/* =========================================================================
   Wefeen: Beautiful digital invitations & event websites
   Standalone branded stylesheet (no build step required).
   ------------------------------------------------------------------------
   Sections:
     1.  Root variables
     2.  Reset & base typography
     3.  Layout helpers (container / grid / utilities)
     4.  Page background & floating decorations
     5.  Buttons
     6.  Cards
     7.  Section headings
     8.  Media placeholders
     9.  Announcement bar
     10. Header / navigation / mobile nav
     11. Hero + dashboard mockup
     12. Trust strip
     13. Problem / solution
     14. Product preview / how it works / features
     15. Event types / templates
     16. RSVP / why different / social proof / audiences
     17. Early access form / demo modal / FAQ
     18. Final CTA / footer
     19. Reveal animations
     20. Responsive
     21. Reduced motion & focus
   ========================================================================= */

/* ---------------------------------------------------------------- 1. ROOT */
:root {
  --wf-rose: #E94F7D;
  --wf-coral: #FF8A66;
  --wf-gold: #D9A441;
  --wf-cream: #FFF3E6;
  --wf-plum: #3A1F2B;
  --wf-white: #FFFCF8;
  --wf-muted: #7A5C66;
  --wf-soft-rose: #FFE8EF;
  --wf-muted-peach: #FFD1B8;
  --wf-success: #3BAA78;
  --wf-error: #D94A4A;

  --wf-gradient: linear-gradient(135deg, #FF8A66 0%, #E94F7D 100%);
  --wf-gradient-premium: linear-gradient(135deg, #FF8A66 0%, #E94F7D 58%, #D9A441 100%);

  --wf-radius-sm: 12px;
  --wf-radius-md: 18px;
  --wf-radius-lg: 28px;
  --wf-radius-xl: 36px;

  --wf-shadow-soft: 0 24px 80px rgba(58, 31, 43, 0.10);
  --wf-shadow-card: 0 16px 40px rgba(58, 31, 43, 0.08);

  --wf-border: rgba(58, 31, 43, 0.08);
  --wf-border-rose: rgba(233, 79, 125, 0.22);
  --wf-border-gold: rgba(217, 164, 65, 0.28);

  --wf-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --wf-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wf-max: 1240px;
  --wf-header-h: 84px;
  --wf-section-muted: #fbfbfb;
  --wf-ease-spring: cubic-bezier(.34, 1.1, .64, 1);
  --wf-ease-out: cubic-bezier(.25, .46, .45, .94);
}

/* ------------------------------------------------------ 2. RESET & BASE */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--wf-font-sans);
  color: var(--wf-plum);
  background-color: var(--wf-white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--wf-font-serif);
  color: var(--wf-plum);
  line-height: 1.1;
  margin: 0 0 0.4em;
  font-weight: 700;
}

p { margin: 0 0 1rem; color: var(--wf-muted); }

a { color: var(--wf-rose); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--wf-coral); }

img, svg { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

/* ------------------------------------------------- 3. LAYOUT HELPERS */
.wf-container {
  width: 100%;
  max-width: var(--wf-max);
  margin-inline: auto;
  padding-inline: 24px;
}

.wf-section { padding: 96px 0; position: relative; scroll-margin-top: calc(var(--wf-header-h) + 16px); }
.wf-section--tight { padding: 64px 0; }
.wf-section--muted { background: var(--wf-section-muted); }

.wf-grid { display: grid; gap: 24px; }
.wf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wf-flex { display: flex; }
.wf-items-center { align-items: center; }
.wf-justify-between { justify-content: space-between; }
.wf-gap-sm { gap: 12px; }
.wf-gap-md { gap: 20px; }
.wf-gap-lg { gap: 32px; }
.wf-wrap { flex-wrap: wrap; }

.wf-center { text-align: center; }
.wf-mx-auto { margin-inline: auto; }
.wf-measure { max-width: 640px; }
.wf-measure-wide { max-width: 760px; }

.wf-mt-sm { margin-top: 12px; }
.wf-mt-md { margin-top: 24px; }
.wf-mt-lg { margin-top: 40px; }

.wf-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------- 4. BACKGROUND & DECORATIONS */
.wf-page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--wf-white);
}
.wf-page-bg::before,
.wf-page-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
}
.wf-page-bg::before {
  width: 60vw; height: 60vw;
  top: -20vw; right: -15vw;
  background: radial-gradient(circle at center, rgba(233, 79, 125, 0.14), transparent 62%);
}
.wf-page-bg::after {
  width: 55vw; height: 55vw;
  bottom: -18vw; left: -15vw;
  background: radial-gradient(circle at center, rgba(255, 138, 102, 0.16), transparent 62%);
}
.wf-page-bg span {
  position: absolute;
  top: 30%; left: 50%;
  transform: translateX(-50%);
  width: 50vw; height: 50vw;
  background: radial-gradient(circle at center, rgba(255, 243, 230, 0.7), transparent 60%);
  border-radius: 50%;
}

.wf-floating-petal {
  position: absolute;
  width: 18px; height: 18px;
  background: var(--wf-gradient);
  border-radius: 60% 0 60% 0;
  opacity: 0.5;
  pointer-events: none;
  animation: wf-float 9s ease-in-out infinite;
}
.wf-floating-petal--gold { background: var(--wf-gold); opacity: 0.4; }
.wf-floating-petal--soft { background: var(--wf-muted-peach); opacity: 0.6; }

/* ------------------------------------------------------- 5. BUTTONS */
.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 16px 26px;
  border-radius: var(--wf-radius-md);
  border: 1px solid transparent;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  white-space: nowrap;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.wf-btn svg { position: relative; z-index: 1; flex: none; }
.wf-btn:active { transform: translateY(0) scale(0.98); }

@keyframes wf-btn-ripple {
  0% { opacity: 0; transform: scale(0); }
  8% { opacity: 1; transform: scale(0.15); }
  20% { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* Primary: gradient, lift, ripple shine (ref st2) */
.wf-btn-primary {
  background: var(--wf-gradient);
  color: #fff;
  box-shadow: 0 12px 28px rgba(233, 79, 125, 0.28);
}
.wf-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.14);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 0;
  pointer-events: none;
}
.wf-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 350%;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.42);
  transform: scale(0);
  animation: wf-btn-ripple 6s linear infinite;
  animation-delay: var(--wf-ripple-delay, 0s);
  z-index: 0;
  pointer-events: none;
}
.wf-btn-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(233, 79, 125, 0.36);
}
.wf-btn-primary:hover::before { opacity: 1; }
.wf-btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(233, 79, 125, 0.36);
}

/* Secondary: outline fill on hover (ref Order button) */
.wf-btn-secondary {
  background: var(--wf-white);
  color: var(--wf-plum);
  border-color: var(--wf-border-gold);
}
.wf-btn-secondary:hover,
.wf-btn-secondary:focus-visible {
  background: var(--wf-rose);
  color: #fff;
  border-color: var(--wf-rose);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(233, 79, 125, 0.22);
}

.wf-btn-ghost {
  background: transparent;
  color: var(--wf-plum);
  padding-inline: 8px;
}
.wf-btn-ghost:hover { color: var(--wf-rose); }

.wf-btn-sm { padding: 10px 16px; font-size: 14px; border-radius: var(--wf-radius-sm); }
.wf-btn-pill { border-radius: 999px; }
.wf-btn-block { width: 100%; }

/* --------------------------------------------------------- 6. CARDS */
.wf-card {
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-lg);
  box-shadow: var(--wf-shadow-card);
  padding: 30px;
}
.wf-card--interactive { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.wf-card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--wf-shadow-soft);
  border-color: var(--wf-border-rose);
}

.wf-card-icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--wf-soft-rose);
  color: var(--wf-rose);
  margin-bottom: 18px;
}
.wf-card-icon svg { width: 26px; height: 26px; }
.wf-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.wf-card p { margin-bottom: 0; font-size: 0.98rem; }

/* ----------------------------------------------- 7. SECTION HEADINGS */
.wf-section-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wf-coral);
  margin-bottom: 14px;
}
.wf-section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 18px;
}
.wf-section-lead {
  font-size: 1.12rem;
  color: var(--wf-muted);
  max-width: 640px;
}
.wf-section-head--center { text-align: center; }
.wf-section-head--center .wf-section-lead { margin-inline: auto; }
.wf-section-title--split { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.wf-section-title-sub { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--wf-muted); font-weight: 600; }

.wf-gradient-text {
  background: var(--wf-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --------------------------------------------- 8. MEDIA PLACEHOLDERS */
.wf-media-placeholder {
  position: relative;
  border-radius: var(--wf-radius-md);
  background:
    linear-gradient(135deg, rgba(255, 138, 102, 0.14), rgba(233, 79, 125, 0.12)),
    var(--wf-cream);
  border: 1px dashed var(--wf-border-rose);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  padding: 20px;
  text-align: center;
  color: var(--wf-muted);
}
.wf-media-placeholder svg { width: 30px; height: 30px; color: var(--wf-rose); opacity: 0.8; }
.wf-media-placeholder .wf-ph-label { font-weight: 600; font-size: 0.9rem; color: var(--wf-plum); }
.wf-media-placeholder .wf-ph-note { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }

/* --------------------------------------------- 9. ANNOUNCEMENT BAR */
.wf-announce {
  background: var(--wf-gradient-premium);
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
  padding: 10px 24px;
}
.wf-announce a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  margin-left: 6px;
}
.wf-announce a:hover { color: var(--wf-cream); }

/* --------------------------------- 10. HEADER / NAV / MOBILE NAV */
.wf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 0;
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.wf-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(255, 252, 248, 0.72);
  border: 1px solid var(--wf-border);
  border-radius: 999px;
  padding: 10px 12px 10px 20px;
  box-shadow: var(--wf-shadow-card);
  backdrop-filter: blur(10px);
}
.wf-header-scrolled .wf-header-inner {
  background: rgba(255, 252, 248, 0.94);
  box-shadow: var(--wf-shadow-soft);
}

.wf-logo { display: inline-flex; align-items: center; gap: 10px; }
.wf-logo-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: none;
  display: block;
}
.wf-logo svg { width: 38px; height: 38px; }
.wf-logo-word {
  font-family: var(--wf-font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--wf-plum);
  letter-spacing: -0.01em;
}

.wf-nav { display: flex; align-items: center; gap: 4px; }
.wf-nav a {
  color: var(--wf-plum);
  font-size: 0.96rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
.wf-nav a:hover,
.wf-nav a.wf-nav-active { background: var(--wf-soft-rose); color: var(--wf-rose); }

.wf-header-actions { display: flex; align-items: center; gap: 10px; }

.wf-mobile-toggle {
  display: none;
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px solid var(--wf-border);
  background: var(--wf-white);
  align-items: center;
  justify-content: center;
  color: var(--wf-plum);
}
.wf-mobile-toggle svg { width: 24px; height: 24px; }

.wf-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(58, 31, 43, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.wf-mobile-nav.wf-open { opacity: 1; visibility: visible; }
.wf-mobile-nav-panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(84vw, 360px);
  background: var(--wf-white);
  padding: 24px;
  box-shadow: var(--wf-shadow-soft);
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.wf-mobile-nav.wf-open .wf-mobile-nav-panel { transform: translateX(0); }
.wf-mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wf-mobile-nav a.wf-mobile-link {
  color: var(--wf-plum);
  font-size: 1.1rem;
  font-weight: 500;
  padding: 14px 12px;
  border-radius: var(--wf-radius-sm);
  border-bottom: 1px solid var(--wf-border);
}
.wf-mobile-nav a.wf-mobile-link:hover { background: var(--wf-soft-rose); color: var(--wf-rose); }
.wf-mobile-close {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--wf-border); background: var(--wf-cream);
  display: inline-flex; align-items: center; justify-content: center; color: var(--wf-plum);
}

/* ---------------------------------------- 11. HERO + DASHBOARD */
.wf-hero { padding: 56px 0 80px; position: relative; }
.wf-hero-shell {
  display: grid;
  grid-template-columns: 48% 52%;
  align-items: center;
  gap: 40px;
}
.wf-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wf-white);
  border: 1px solid var(--wf-border-gold);
  color: var(--wf-plum);
  font-size: 0.85rem; font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: var(--wf-shadow-card);
  margin-bottom: 22px;
}
.wf-hero-badge span.wf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wf-gradient); }
.wf-hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.wf-hero-lead { font-size: 1.18rem; max-width: 520px; margin-bottom: 30px; }
.wf-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.wf-hero-reassure { display: flex; flex-wrap: wrap; gap: 18px 26px; }
.wf-hero-reassure li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.92rem; color: var(--wf-plum); font-weight: 500;
}
.wf-hero-reassure svg { width: 18px; height: 18px; color: var(--wf-success); }

/* Dashboard mockup */
.wf-dashboard {
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-xl);
  box-shadow: var(--wf-shadow-soft);
  padding: 16px;
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 16px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.wf-dashboard:hover { transform: translateY(-6px); box-shadow: 0 34px 90px rgba(58, 31, 43, 0.16); }

.wf-dash-side {
  background: var(--wf-cream);
  border-radius: var(--wf-radius-md);
  padding: 16px 12px;
}
.wf-dash-side .wf-logo-word { font-size: 1.2rem; }
.wf-dash-side ul { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.wf-dash-side li {
  font-size: 0.85rem; color: var(--wf-muted); font-weight: 500;
  padding: 8px 10px; border-radius: 10px;
}
.wf-dash-side li.wf-dash-active { background: var(--wf-white); color: var(--wf-rose); box-shadow: var(--wf-shadow-card); }

.wf-dash-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wf-dash-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wf-dash-event { display: flex; align-items: center; gap: 10px; }
.wf-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--wf-gradient-premium);
  border: 2px solid #fff;
  box-shadow: var(--wf-shadow-card);
}
.wf-avatar--stack { margin-left: -14px; background: linear-gradient(135deg, #D9A441, #E94F7D); }
.wf-dash-event h4 { margin: 0; font-size: 1rem; }
.wf-dash-url { font-size: 0.78rem; color: var(--wf-muted); }
.wf-badge-published {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--wf-success); background: rgba(59, 170, 120, 0.12);
  padding: 4px 10px; border-radius: 999px;
}
.wf-dash-actions { display: flex; gap: 8px; }

.wf-dash-body { display: grid; grid-template-columns: 200px 1fr; gap: 14px; }

.wf-invite-card {
  background: linear-gradient(160deg, #fff, var(--wf-soft-rose));
  border: 1px solid var(--wf-border-rose);
  border-radius: var(--wf-radius-md);
  padding: 20px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.wf-invite-card::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid var(--wf-border-gold);
  border-radius: 14px; pointer-events: none;
}
.wf-invite-eyebrow { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wf-muted); }
.wf-invite-name { font-family: var(--wf-font-serif); font-size: 1.5rem; color: var(--wf-plum); margin: 6px 0; line-height: 1.1; }
.wf-invite-date { font-size: 0.8rem; color: var(--wf-rose); font-weight: 600; letter-spacing: 0.06em; }
.wf-invite-venue { font-size: 0.72rem; color: var(--wf-muted); margin-top: 4px; }
.wf-invite-rsvp {
  margin-top: 14px; display: inline-block;
  background: var(--wf-gradient); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 8px 16px; border-radius: 999px;
}

.wf-dash-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start; }
.wf-stat {
  background: var(--wf-white); border: 1px solid var(--wf-border);
  border-radius: 14px; padding: 12px;
}
.wf-stat .wf-stat-num { font-family: var(--wf-font-serif); font-size: 1.5rem; color: var(--wf-plum); line-height: 1; }
.wf-stat .wf-stat-label { font-size: 0.72rem; color: var(--wf-muted); margin-top: 4px; }
.wf-stat--going .wf-stat-num { color: var(--wf-success); }

.wf-rsvp-progress { grid-column: 1 / -1; }
.wf-rsvp-progress .wf-progress-head { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--wf-muted); margin-bottom: 6px; }
.wf-progress-track { height: 8px; border-radius: 999px; background: var(--wf-soft-rose); overflow: hidden; }
.wf-progress-fill { height: 100%; width: 0; border-radius: 999px; background: var(--wf-gradient); transition: width 1.2s ease; }

.wf-dash-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.wf-tile {
  background: var(--wf-cream); border: 1px solid var(--wf-border);
  border-radius: 12px; padding: 10px 6px; text-align: center;
  font-size: 0.68rem; color: var(--wf-plum); font-weight: 600;
}
.wf-tile svg { width: 18px; height: 18px; color: var(--wf-rose); margin: 0 auto 4px; }

/* --------------------------------------------- 12. TRUST STRIP */
.wf-trust {
  background: var(--wf-white);
  border-top: 1px solid var(--wf-border);
  border-bottom: 1px solid var(--wf-border);
  padding: 20px 0;
  overflow: hidden;
}
.wf-trust-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.wf-trust-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(28px, 5vw, 56px);
  width: max-content;
  padding: 2px 0;
  animation: wf-trust-scroll 18s linear infinite;
  will-change: transform;
}
.wf-trust-marquee:hover .wf-trust-marquee-track { animation-play-state: paused; }
@keyframes wf-trust-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.wf-trust-marquee::before,
.wf-trust-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(48px, 10vw, 100px);
  z-index: 2;
  pointer-events: none;
}
.wf-trust-marquee::before { left: 0; background: linear-gradient(to right, var(--wf-white), transparent); }
.wf-trust-marquee::after { right: 0; background: linear-gradient(to left, var(--wf-white), transparent); }
.wf-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 600;
  color: var(--wf-plum);
  font-size: clamp(0.88rem, 2.4vw, 0.96rem);
}
.wf-trust-item svg { width: 22px; height: 22px; flex: none; color: var(--wf-rose); }

/* --------------------------------------- 13. PROBLEM / SOLUTION */
.wf-alt { background: var(--wf-section-muted); }
.wf-problem-card .wf-card-icon { background: rgba(217, 68, 68, 0.1); color: var(--wf-error); }
.wf-solution-card .wf-card-icon { background: rgba(59, 170, 120, 0.12); color: var(--wf-success); }

.wf-pill-list { display: flex; flex-direction: column; gap: 14px; }
.wf-pill-item {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--wf-white); border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md); padding: 18px 20px;
}
.wf-pill-item .wf-check {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: var(--wf-soft-rose); color: var(--wf-rose);
  display: inline-flex; align-items: center; justify-content: center;
}
.wf-pill-item .wf-check svg { width: 18px; height: 18px; }
.wf-pill-item h4 { margin: 0 0 2px; font-size: 1.02rem; }
.wf-pill-item p { margin: 0; font-size: 0.9rem; }

/* --------------- 14. PRODUCT PREVIEW / HOW IT WORKS / FEATURES */
.wf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* How it works — animated journey */
.wf-section--how {
  position: relative;
  overflow: hidden;
}
.wf-how-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.wf-how-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.42;
  animation: wf-how-blob-drift 20s ease-in-out infinite;
}
.wf-how-blob--1 {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(255, 138, 102, 0.55), transparent 68%);
  top: -140px;
  left: -100px;
}
.wf-how-blob--2 {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(233, 79, 125, 0.38), transparent 68%);
  bottom: -80px;
  right: -40px;
  animation-delay: -7s;
}
.wf-how-blob--3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(217, 164, 65, 0.28), transparent 68%);
  top: 42%;
  left: 38%;
  animation-delay: -14s;
}
@keyframes wf-how-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(28px, -18px) scale(1.06); }
  66% { transform: translate(-22px, 14px) scale(0.96); }
}

.wf-how-journey {
  position: relative;
  z-index: 1;
}
.wf-how-progress {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: min(680px, 92%);
  margin: 0 auto clamp(36px, 5vw, 52px);
  padding: 0 4px;
}
.wf-how-progress::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 18px;
  right: 18px;
  height: 3px;
  background: rgba(58, 31, 43, 0.08);
  border-radius: 999px;
  transform: translateY(-50%);
}
.wf-how-progress-fill {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 0%;
  height: 3px;
  border-radius: 999px;
  background: var(--wf-gradient);
  transform: translateY(-50%);
  transition: width 0.75s var(--wf-ease-spring);
  box-shadow: 0 0 16px rgba(233, 79, 125, 0.35);
}
.wf-how-progress-dot {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--wf-white);
  border: 2px solid rgba(58, 31, 43, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--wf-muted);
  transition: transform 0.45s var(--wf-ease-spring), border-color 0.35s, color 0.35s, box-shadow 0.35s;
}
.wf-how-progress-dot--active {
  border-color: var(--wf-rose);
  color: var(--wf-rose);
  transform: scale(1.14);
  box-shadow: 0 0 0 7px rgba(233, 79, 125, 0.12);
}

.wf-how-track {
  position: relative;
  padding-top: 8px;
}
.wf-how-path {
  position: absolute;
  top: 52px;
  left: 0;
  width: 100%;
  height: 88px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.wf-how-path-bg,
.wf-how-path-line {
  fill: none;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.wf-how-path-bg {
  stroke: rgba(58, 31, 43, 0.08);
}
.wf-how-path-line {
  stroke: url(#wf-how-path-gradient);
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.8s var(--wf-ease-out);
}
.wf-how-journey--live .wf-how-path-line {
  stroke-dashoffset: 0;
}
.wf-how-path-dot {
  fill: var(--wf-white);
  stroke: rgba(58, 31, 43, 0.12);
  stroke-width: 2;
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.4s ease, transform 0.45s var(--wf-ease-spring);
}
.wf-how-journey--live .wf-how-path-dot {
  opacity: 1;
}
.wf-how-path-dot--active {
  fill: var(--wf-rose);
  stroke: var(--wf-rose);
  transform: scale(1.35);
}

.wf-how-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
  perspective: 1200px;
}
.wf-how-step {
  position: relative;
  padding: clamp(22px, 2.5vw, 28px) clamp(18px, 2vw, 22px) clamp(24px, 2.5vw, 28px);
  border-radius: 28px;
  background: rgba(255, 252, 248, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(58, 31, 43, 0.08);
  text-align: center;
  overflow: hidden;
  cursor: default;
  transition:
    transform 0.55s var(--wf-ease-spring),
    box-shadow 0.45s ease,
    border-color 0.35s ease,
    background 0.35s ease;
  transform: translateY(0) rotateX(0deg);
}
.wf-how-step:focus-visible {
  outline: 3px solid var(--wf-rose);
  outline-offset: 3px;
}
.wf-how-step--active,
.wf-how-step:hover,
.wf-how-step:focus-visible {
  transform: translateY(-10px) rotateX(3deg);
  border-color: var(--wf-border-rose);
  background: rgba(255, 252, 248, 0.96);
  box-shadow:
    0 28px 56px rgba(233, 79, 125, 0.14),
    0 0 0 1px rgba(233, 79, 125, 0.06);
}
.wf-how-step-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 62%
  );
  transform: translateX(-120%);
  pointer-events: none;
}
.wf-how-step--active .wf-how-step-shine {
  animation: wf-how-shine 1.1s ease forwards;
}
@keyframes wf-how-shine {
  to { transform: translateX(120%); }
}

.wf-how-step-marker {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
}
.wf-how-step-ring {
  position: absolute;
  inset: -7px;
  border-radius: 24px;
  border: 2px dashed rgba(233, 79, 125, 0.28);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.wf-how-step--active .wf-how-step-ring {
  opacity: 1;
  animation: wf-how-ring-spin 14s linear infinite;
}
@keyframes wf-how-ring-spin {
  to { transform: rotate(360deg); }
}
.wf-how-step-num {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: var(--wf-gradient);
  background-size: 200% 200%;
  color: #fff;
  font-family: var(--wf-font-serif);
  font-size: 1.65rem;
  font-weight: 700;
  box-shadow: 0 16px 34px rgba(233, 79, 125, 0.32);
  transition: transform 0.5s var(--wf-ease-spring);
  animation: wf-how-gradient-drift 6s ease infinite;
}
.wf-how-step--active .wf-how-step-num {
  transform: scale(1.08) rotate(-4deg);
}
@keyframes wf-how-gradient-drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.wf-how-step-icon {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wf-white);
  border: 2px solid var(--wf-soft-rose);
  color: var(--wf-rose);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(58, 31, 43, 0.12);
  transition: transform 0.4s var(--wf-ease-spring);
}
.wf-how-step-icon svg { width: 18px; height: 18px; }
.wf-how-step--active .wf-how-step-icon {
  transform: scale(1.12) rotate(8deg);
}
.wf-how-step[data-wf-how-step="3"].wf-how-step--active .wf-how-step-icon {
  animation: wf-how-share-pulse 2s ease infinite;
}
@keyframes wf-how-share-pulse {
  0%, 100% { box-shadow: 0 8px 18px rgba(58, 31, 43, 0.12); }
  50% { box-shadow: 0 0 0 8px rgba(233, 79, 125, 0.14), 0 8px 18px rgba(58, 31, 43, 0.12); }
}

.wf-how-step-body h3 {
  font-size: clamp(1.08rem, 1.6vw, 1.22rem);
  margin: 0 0 8px;
  color: var(--wf-plum);
}
.wf-how-step-body p {
  font-size: clamp(0.88rem, 1.2vw, 0.94rem);
  margin: 0;
  line-height: 1.65;
  color: var(--wf-muted);
}

.wf-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* --------------------------------- 15. EVENT TYPES / TEMPLATES */
.wf-eventtypes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wf-eventtype {
  position: relative; overflow: hidden;
  border-radius: var(--wf-radius-lg);
  border: 1px solid var(--wf-border);
  background: var(--wf-white);
  padding: 24px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.wf-eventtype:hover { transform: translateY(-4px); box-shadow: var(--wf-shadow-soft); border-color: var(--wf-border-rose); }
.wf-eventtype .wf-et-emoji {
  width: 48px; height: 48px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 14px;
  background: var(--wf-soft-rose);
}
.wf-eventtype h3 { font-size: 1.15rem; margin-bottom: 6px; }
.wf-eventtype p { font-size: 0.9rem; margin: 0; }

.wf-templates-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Template showcase (ref-style preview cards) */
.wf-section--templates { background: #fbfbfb; }
.wf-template-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 28px);
  align-items: stretch;
}
.wf-template-showcase-card {
  background: #eeeeee;
  border-radius: 32px;
  padding: clamp(22px, 3vw, 34px) clamp(16px, 2.5vw, 24px) clamp(24px, 3vw, 30px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wf-template-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(58, 31, 43, 0.1);
}
.wf-template-showcase-card--hidden { display: none; }

.wf-template-showcase-phone {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: clamp(16px, 2.5vw, 24px);
}
.wf-template-showcase-device {
  position: relative;
  width: min(210px, 74%);
  aspect-ratio: 9 / 19.2;
  padding: 10px 7px;
  border-radius: 34px;
  background: linear-gradient(145deg, #2a2a2a, #0f0f0f);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.wf-template-showcase-notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 20px;
  border-radius: 999px;
  background: #050505;
  z-index: 2;
}
.wf-template-showcase-screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
}
.wf-template-showcase-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.wf-template-showcase-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #fff;
  text-align: center;
  font-family: var(--wf-font-serif);
  font-size: 1rem;
  line-height: 1.25;
}

.wf-template-showcase-meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.wf-template-showcase-badge {
  margin: 0;
  font-family: var(--wf-font-serif);
  font-size: 1rem;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.3;
}
.wf-template-showcase-badge span { font-weight: 400; }
.wf-template-showcase-sparkle {
  color: #d9a441;
  letter-spacing: 0.08em;
  font-size: 0.92em;
}
.wf-template-showcase-title {
  margin: 0;
  font-family: var(--wf-font-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.55rem);
  font-weight: 700;
  color: #4a4a4a;
  line-height: 1.2;
}
.wf-template-showcase-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}
.wf-template-showcase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  flex: 1 1 calc(50% - 5px);
  max-width: 150px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wf-template-showcase-btn:active { transform: scale(0.98); }
.wf-template-showcase-btn--preview {
  background: var(--wf-gradient);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 10px 22px rgba(233, 79, 125, 0.28);
}
.wf-template-showcase-btn--preview:hover,
.wf-template-showcase-btn--preview:focus-visible {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(233, 79, 125, 0.34);
}
.wf-template-showcase-btn--order {
  background: #feffff;
  color: var(--wf-plum);
  border: 1px solid var(--wf-plum);
}
.wf-template-showcase-btn--order:hover,
.wf-template-showcase-btn--order:focus-visible {
  background: var(--wf-rose);
  border-color: var(--wf-rose);
  color: #fff;
  transform: translateY(-1px);
}

.wf-template-showcase-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}
.wf-template-showcase-load {
  min-width: 180px;
  padding-inline: 36px;
}
.wf-template-showcase-more--done { display: none; }

.wf-tv-1 { background: linear-gradient(150deg, #E94F7D, #FF8A66); }
.wf-tv-2 { background: linear-gradient(150deg, #3A1F2B, #7A5C66); }
.wf-tv-3 { background: linear-gradient(150deg, #FF8A66, #D9A441); }
.wf-tv-4 { background: linear-gradient(150deg, #E94F7D, #D9A441); }
.wf-tv-5 { background: linear-gradient(150deg, #FFD1B8, #E94F7D); }
.wf-tv-6 { background: linear-gradient(150deg, #3A1F2B, #E94F7D); }
.wf-tv-7 { background: linear-gradient(150deg, #D9A441, #3A1F2B); }
.wf-tv-8 { background: linear-gradient(150deg, #FF8A66, #3A1F2B); }

/* Section CTA strips (ref-style) */
.wf-section-cta {
  margin-top: 40px;
  padding-top: 8px;
}
.wf-section-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.wf-section-cta-actions { justify-content: center; margin-bottom: 0; }
.wf-section-cta-btn {
  min-width: 220px;
  padding-inline: 28px;
  box-shadow: 0 12px 28px rgba(233, 79, 125, 0.28);
}
.wf-section-cta-note {
  margin: 0;
  max-width: 420px;
  color: var(--wf-muted);
  font-size: 0.92rem;
}
.wf-included-cta { margin-top: 18px; width: 100%; justify-content: center; }

/* ------------- 16. RSVP / WHY DIFFERENT / SOCIAL / AUDIENCES */
.wf-rsvp-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 40px; }
.wf-rsvp-stat {
  background: var(--wf-white); border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md); padding: 22px; text-align: center;
}
.wf-rsvp-stat .wf-rsvp-num { font-family: var(--wf-font-serif); font-size: 2.1rem; color: var(--wf-plum); line-height: 1; }
.wf-rsvp-stat .wf-rsvp-label { font-size: 0.82rem; color: var(--wf-muted); margin-top: 6px; }
.wf-rsvp-stat--going .wf-rsvp-num { color: var(--wf-success); }
.wf-rsvp-stat--maybe .wf-rsvp-num { color: var(--wf-gold); }
.wf-rsvp-stat--no .wf-rsvp-num { color: var(--wf-error); }

.wf-tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.wf-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--wf-white); border: 1px solid var(--wf-border);
  font-size: 0.9rem; font-weight: 500; color: var(--wf-plum);
}
.wf-tag svg { width: 16px; height: 16px; color: var(--wf-rose); }
.wf-soon {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--wf-gold); background: rgba(217, 164, 65, 0.14);
  padding: 2px 8px; border-radius: 999px;
}

.wf-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.wf-compare-col {
  border-radius: var(--wf-radius-lg); border: 1px solid var(--wf-border);
  background: var(--wf-white); padding: 28px;
}
.wf-compare-col h3 { font-size: 1.2rem; margin-bottom: 16px; }
.wf-compare-col ul { display: flex; flex-direction: column; gap: 12px; }
.wf-compare-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; color: var(--wf-muted); }
.wf-compare-col li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.wf-compare-col .wf-x svg { color: var(--wf-error); }
.wf-compare-col .wf-ok svg { color: var(--wf-success); }
.wf-compare-col--wefeen {
  background: var(--wf-plum); border-color: var(--wf-plum);
  box-shadow: var(--wf-shadow-soft);
}
.wf-compare-col--wefeen h3 { color: #fff; }
.wf-compare-col--wefeen li { color: rgba(255, 252, 248, 0.86); }
.wf-compare-col--wefeen .wf-badge-best {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wf-plum); background: var(--wf-gold); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}

/* Mobile swipe cards (ref wof2 pattern) */
.wf-swipe-wrap {
  display: none;
  overflow: hidden;
  margin-inline: -18px;
}
.wf-swipe-viewport { overflow: hidden; padding: 8px 20px 4px; }
.wf-swipe-track {
  display: flex;
  gap: 14px;
  transition: transform .48s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.wf-swipe-card {
  flex-shrink: 0;
  width: calc(100vw - 56px);
  max-width: 360px;
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: 18px;
  padding: 28px 24px 26px;
  opacity: 0;
  transform: scale(.96) translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.wf-swipe-card.wf-swipe-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.wf-swipe-bignum {
  font-family: var(--wf-font-serif);
  font-size: 3.25rem;
  font-weight: 700;
  color: var(--wf-rose);
  opacity: .14;
  line-height: 1;
  margin-bottom: -6px;
  letter-spacing: -.02em;
  display: block;
}
.wf-swipe-title {
  font-family: var(--wf-font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wf-plum);
  line-height: 1.25;
  margin: 0 0 14px;
}
.wf-swipe-desc { font-size: 0.9rem; color: var(--wf-muted); line-height: 1.72; margin: 0 0 18px; }
.wf-swipe-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--wf-rose);
  background: var(--wf-soft-rose);
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: .02em;
}
.wf-swipe-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
}
.wf-swipe-dots { display: flex; gap: 6px; align-items: center; }
.wf-swipe-dot {
  height: 5px;
  border-radius: 3px;
  background: #ddd;
  transition: width .35s ease, background .35s ease;
  width: 16px;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.wf-swipe-dot.wf-active { background: var(--wf-rose); width: 28px; }
.wf-swipe-counter { font-size: 0.75rem; color: var(--wf-muted); }

.wf-quote-card { background: var(--wf-white); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-lg); padding: 28px; }
.wf-quote-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wf-muted); background: var(--wf-cream);
  padding: 4px 10px; border-radius: 999px; display: inline-block; margin-bottom: 14px;
}
.wf-quote-card p { font-family: var(--wf-font-serif); font-size: 1.15rem; color: var(--wf-plum); line-height: 1.4; }
.wf-quote-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.wf-quote-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--wf-gradient-premium); }
.wf-quote-foot .wf-q-name { font-size: 0.85rem; font-weight: 600; color: var(--wf-plum); }
.wf-quote-foot .wf-q-role { font-size: 0.75rem; color: var(--wf-muted); }

/* Audience tabs */
.wf-tabs-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }
.wf-tab-btn {
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--wf-border); background: var(--wf-white);
  color: var(--wf-plum); font-weight: 600; font-size: 0.92rem;
  transition: all .2s ease;
}
.wf-tab-btn:hover { border-color: var(--wf-border-rose); }
.wf-tab-btn.wf-tab-active { background: var(--wf-gradient); color: #fff; border-color: transparent; }
.wf-tab-panel { display: none; }
.wf-tab-panel.wf-tab-panel-active { display: block; animation: wf-fade-up .4s ease both; }
.wf-tab-panel-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;
  background: var(--wf-white); border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-lg); padding: 36px; box-shadow: var(--wf-shadow-card);
}
.wf-tab-panel-inner h3 { font-size: 1.6rem; }

/* ---------------- 17. EARLY ACCESS / DEMO MODAL / FAQ */
.wf-early { background: var(--wf-plum); color: #fff; }
.wf-early .wf-section-eyebrow { color: var(--wf-gold); }
.wf-early .wf-section-title { color: #fff; }
.wf-early .wf-section-lead { color: rgba(255, 252, 248, 0.82); }

.wf-form-shell {
  background: var(--wf-white);
  border-radius: var(--wf-radius-xl);
  padding: 36px;
  box-shadow: var(--wf-shadow-soft);
  color: var(--wf-plum);
}
.wf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wf-field { display: flex; flex-direction: column; gap: 6px; }
.wf-field--full { grid-column: 1 / -1; }
.wf-field label { font-size: 0.85rem; font-weight: 600; color: var(--wf-plum); }
.wf-field .wf-req { color: var(--wf-rose); }
.wf-input, .wf-select, .wf-textarea {
  width: 100%;
  font-family: inherit; font-size: 0.98rem; color: var(--wf-plum);
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wf-input:focus, .wf-select:focus, .wf-textarea:focus {
  outline: none;
  border-color: var(--wf-rose);
  box-shadow: 0 0 0 4px rgba(233, 79, 125, 0.14);
}
.wf-textarea { resize: vertical; min-height: 96px; }
.wf-input.wf-invalid, .wf-select.wf-invalid, .wf-textarea.wf-invalid { border-color: var(--wf-error); }
.wf-field-error { font-size: 0.78rem; color: var(--wf-error); min-height: 1em; }

.wf-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--wf-muted); }
.wf-checkbox input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--wf-rose); }

.wf-form-micro { font-size: 0.8rem; color: var(--wf-muted); margin-top: 12px; }
.wf-form-note { font-size: 0.9rem; margin-top: 18px; }

.wf-form-alert { border-radius: var(--wf-radius-sm); padding: 14px 16px; font-weight: 600; font-size: 0.92rem; margin-bottom: 18px; display: none; }
.wf-form-alert.wf-show { display: block; }
.wf-form-alert--success { background: rgba(59, 170, 120, 0.12); color: var(--wf-success); border: 1px solid rgba(59, 170, 120, 0.3); }
.wf-form-alert--error { background: rgba(217, 74, 74, 0.1); color: var(--wf-error); border: 1px solid rgba(217, 74, 74, 0.3); }

.wf-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Contact section (ref-inspired) */
.wf-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1080px;
  margin-inline: auto;
}
.wf-contact-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  margin-bottom: 18px;
  color: var(--wf-plum);
}
.wf-contact-title-sub {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  color: var(--wf-muted);
  font-weight: 600;
}
.wf-contact-lead {
  font-size: 1.05rem;
  color: var(--wf-muted);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 460px;
}
.wf-contact-links { display: flex; flex-direction: column; gap: 18px; }
.wf-contact-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--wf-plum);
  font-size: 1.02rem;
}
.wf-contact-email svg { width: 20px; height: 20px; color: var(--wf-rose); }
.wf-contact-email:hover { color: var(--wf-rose); }
.wf-contact-social { display: flex; flex-wrap: wrap; gap: 12px; }
.wf-contact-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--wf-border);
  background: var(--wf-white);
  color: var(--wf-plum);
  font-size: 0.88rem;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.wf-contact-social-btn:hover,
.wf-contact-social-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(233, 79, 125, 0.14);
}
.wf-contact-social-btn--ig { border-color: #C13584; color: #C13584; }
.wf-contact-social-btn--ig:hover,
.wf-contact-social-btn--ig:focus-visible { background: #C13584; border-color: #C13584; color: #fff; box-shadow: 0 10px 22px rgba(193, 53, 132, 0.22); }
.wf-contact-social-btn--email:hover,
.wf-contact-social-btn--email:focus-visible { background: var(--wf-rose); border-color: var(--wf-rose); color: #fff; }
.wf-contact-cta { margin-top: 22px; width: fit-content; max-width: 100%; }
.wf-contact-form .wf-btn-block { width: 100%; }

.wf-early-secondary { text-align: center; margin-top: 26px; color: rgba(255, 252, 248, 0.9); }
.wf-early-secondary a { color: var(--wf-gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Demo modal */
.wf-modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(58, 31, 43, 0.5);
  backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.wf-modal.wf-open { opacity: 1; visibility: visible; }
.wf-modal-panel {
  width: min(560px, 100%);
  max-height: 90vh; overflow-y: auto;
  background: var(--wf-white);
  border-radius: var(--wf-radius-lg);
  box-shadow: var(--wf-shadow-soft);
  padding: 30px;
  transform: translateY(16px) scale(0.98);
  transition: transform .28s ease;
}
.wf-modal.wf-open .wf-modal-panel { transform: translateY(0) scale(1); }
.wf-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.wf-modal-head h2 { font-size: 1.5rem; margin: 0; }

/* What's Included (ref-inspired wif layout, Wefeen brand) */
.wf-included-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  max-width: 1100px;
  margin-inline: auto;
  align-items: center;
}
.wf-included-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.wf-included-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 17px;
  border-radius: 13px;
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  transition: border-color .22s, background .22s, transform .2s, box-shadow .2s;
  opacity: 0;
  transform: translateY(14px);
}
.wf-included-item.wf-in {
  animation: wf-included-in .46s var(--wf-ease-spring) forwards;
  animation-delay: var(--wf-in-delay, 0ms);
}
@keyframes wf-included-in {
  to { opacity: 1; transform: translateY(0); }
}
.wf-included-item:hover {
  border-color: var(--wf-border-rose);
  background: var(--wf-soft-rose);
  transform: translateY(-2px);
  box-shadow: var(--wf-shadow-card);
}
.wf-included-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 9px;
  background: var(--wf-soft-rose);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background .2s;
}
.wf-included-icon svg {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  display: block;
  flex-shrink: 0;
  color: var(--wf-rose);
}
.wf-included-item:hover .wf-included-icon { background: var(--wf-gradient); }
.wf-included-item:hover .wf-included-icon svg { color: #fff; }
.wf-included-label { font-size: 0.94rem; font-weight: 600; color: var(--wf-plum); line-height: 1.35; }
.wf-included-card {
  background: linear-gradient(160deg, var(--wf-soft-rose), var(--wf-cream));
  border: 1.5px solid var(--wf-border-rose);
  border-radius: var(--wf-radius-lg);
  padding: 34px 30px 32px;
}
.wf-included-ey {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-rose);
  margin-bottom: 14px;
  display: block;
}
.wf-included-bignum {
  font-family: var(--wf-font-serif);
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--wf-plum);
  line-height: 1;
  margin-bottom: 2px;
}
.wf-included-plus { font-size: 2.4rem; color: var(--wf-rose); }
.wf-included-numsub { font-size: 0.75rem; color: var(--wf-muted); margin-bottom: 24px; font-weight: 600; }
.wf-included-ctitle { font-family: var(--wf-font-serif); font-size: 1.35rem; color: var(--wf-plum); margin-bottom: 10px; }
.wf-included-cdesc { font-size: 0.92rem; color: var(--wf-muted); line-height: 1.7; }
.wf-included-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.wf-included-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--wf-plum);
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: 999px;
  padding: 6px 12px;
}

/* Customer feedback / reviews (ref wgr pattern) */
.wf-reviews-head { text-align: center; margin-bottom: 28px; }
.wf-reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: var(--wf-shadow-card);
}
.wf-reviews-score { font-family: var(--wf-font-serif); font-size: 0.95rem; font-weight: 700; color: var(--wf-plum); }
.wf-reviews-stars { color: var(--wf-gold); font-size: 1rem; letter-spacing: 1px; }
.wf-reviews-label { font-size: 0.75rem; color: var(--wf-muted); }

.wf-review-card {
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: 16px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  width: 320px;
}
.wf-review-top { display: flex; align-items: center; gap: 12px; }
.wf-review-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  font-family: var(--wf-font-serif);
}
.wf-review-name { font-size: 0.88rem; font-weight: 700; color: var(--wf-plum); margin-bottom: 2px; font-family: var(--wf-font-serif); }
.wf-review-country { font-size: 0.68rem; color: var(--wf-muted); margin-bottom: 4px; letter-spacing: 0.01em; }
.wf-review-meta { display: flex; align-items: center; gap: 8px; }
.wf-review-st { color: var(--wf-gold); font-size: 0.72rem; letter-spacing: .5px; }
.wf-review-text { font-size: 0.84rem; color: var(--wf-muted); line-height: 1.65; flex: 1; margin: 0; }
.wf-review-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(58, 31, 43, 0.06);
}
.wf-review-foot svg { flex-shrink: 0; display: block; }
.wf-review-flabel { font-size: 0.68rem; color: var(--wf-muted); font-weight: 600; }

.wf-reviews-marquee {
  position: relative;
  overflow: hidden;
  margin-inline: -24px;
}
.wf-reviews-marquee--google { margin-bottom: 8px; }
.wf-reviews-marquee--social { margin-top: 4px; }
.wf-reviews-marquee-track {
  display: flex;
  gap: 16px;
  padding: 4px 0 8px;
  width: max-content;
  animation: wf-reviews-scroll 220s linear infinite;
}
.wf-reviews-marquee--social .wf-reviews-marquee-track {
  animation-duration: 260s;
  animation-direction: reverse;
}
.wf-reviews-marquee:hover .wf-reviews-marquee-track { animation-play-state: paused; }
@keyframes wf-reviews-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.wf-reviews-marquee::before,
.wf-reviews-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.wf-reviews-marquee::before { left: 0; background: linear-gradient(to right, var(--wf-section-muted), transparent); }
.wf-reviews-marquee::after { right: 0; background: linear-gradient(to left, var(--wf-section-muted), transparent); }

.wf-reviews-slider {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.wf-reviews-slider-vp { width: 100%; overflow: hidden; padding: 4px 20px; }
.wf-reviews-slider-track {
  display: flex;
  gap: 16px;
  transition: transform .45s var(--wf-ease-out);
  will-change: transform;
}
.wf-reviews-slider-track .wf-review-card {
  width: calc(100vw - 56px);
  max-width: 360px;
}
.wf-reviews-dots { display: flex; gap: 7px; justify-content: center; }
.wf-reviews-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d4d4d4;
  border: none;
  cursor: pointer;
  transition: background .25s, transform .25s;
  padding: 0;
}
.wf-reviews-dot.wf-active { background: var(--wf-rose); transform: scale(1.3); }

.wf-reviews-cta { text-align: center; margin-top: 32px; }
.wf-reviews-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wf-white);
  border: 1.5px solid var(--wf-rose);
  color: var(--wf-rose);
  border-radius: 999px;
  padding: 11px 26px;
  font-size: 0.88rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wf-reviews-cta-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 350%;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  animation: wf-btn-ripple 6s linear infinite;
  pointer-events: none;
}
.wf-reviews-cta-btn:hover,
.wf-reviews-cta-btn:focus-visible {
  background: var(--wf-rose);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(233, 79, 125, 0.28);
}

.wf-reviews-social-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
  margin-bottom: 24px;
}
.wf-reviews-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wf-white);
  border: 1.5px solid var(--wf-rose);
  color: var(--wf-rose);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wf-reviews-social-btn:hover,
.wf-reviews-social-btn:focus-visible {
  background: var(--wf-rose);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(233, 79, 125, 0.2);
}
.wf-reviews-social-btn--ig { border-color: #C13584; color: #C13584; }
.wf-reviews-social-btn--ig:hover,
.wf-reviews-social-btn--ig:focus-visible { background: #C13584; color: #fff; box-shadow: 0 10px 22px rgba(193, 53, 132, 0.22); }

/* Legacy quote cards (footer areas) */

/* FAQ */
.wf-faq { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }
.wf-faq-item { background: var(--wf-white); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-md); overflow: hidden; }
.wf-faq-q {
  width: 100%; text-align: left; background: none; border: 0;
  padding: 20px 22px; font-size: 1.05rem; font-weight: 600; color: var(--wf-plum);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.wf-faq-q .wf-faq-icon { flex: none; width: 26px; height: 26px; transition: transform .25s ease; color: var(--wf-rose); }
.wf-faq-item.wf-faq-open .wf-faq-icon { transform: rotate(45deg); }
.wf-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.wf-faq-a-inner { padding: 0 22px 20px; color: var(--wf-muted); font-size: 0.98rem; }

/* --------------------------------- 18. FINAL CTA / FOOTER */
.wf-final-cta {
  background: var(--wf-gradient-premium);
  border-radius: var(--wf-radius-xl);
  padding: 64px 40px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.wf-final-cta h2 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); }
.wf-final-cta p { color: rgba(255, 255, 255, 0.92); max-width: 560px; margin-inline: auto; font-size: 1.1rem; }
.wf-final-cta .wf-btn-secondary {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.wf-final-cta .wf-btn-secondary:hover,
.wf-final-cta .wf-btn-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.95);
  border-color: #fff;
  color: var(--wf-rose);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}
.wf-final-cta .wf-btn-primary {
  background: var(--wf-white);
  color: var(--wf-rose);
  box-shadow: 0 14px 30px rgba(58, 31, 43, 0.25);
}
.wf-final-cta .wf-btn-primary::before { background: rgba(233, 79, 125, 0.1); }
.wf-final-cta .wf-btn-primary::after { background: rgba(233, 79, 125, 0.2); }
.wf-final-cta .wf-btn-primary:hover,
.wf-final-cta .wf-btn-primary:focus-visible { color: var(--wf-rose); }

.wf-footer { background: var(--wf-plum); color: rgba(255, 252, 248, 0.72); padding: 72px 0 32px; }
.wf-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.wf-footer h4 { color: #fff; font-family: var(--wf-font-sans); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.wf-footer .wf-logo-word { color: #fff; }
.wf-footer-brand p { color: rgba(255, 252, 248, 0.66); font-size: 0.95rem; max-width: 300px; }
.wf-footer-links li { margin-bottom: 10px; }
.wf-footer-links a { color: rgba(255, 252, 248, 0.72); font-size: 0.95rem; }
.wf-footer-links a:hover { color: var(--wf-gold); }
.wf-footer-social { display: flex; gap: 10px; margin-top: 18px; }
.wf-footer-social a {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255, 252, 248, 0.08); border: 1px solid rgba(255, 252, 248, 0.12);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.wf-footer-social a:hover { background: var(--wf-gradient); border-color: transparent; }
.wf-footer-social svg { width: 20px; height: 20px; }
.wf-footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 252, 248, 0.12);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  font-size: 0.85rem; color: rgba(255, 252, 248, 0.6);
}

/* --------------------------------------- 19. REVEAL ANIMATIONS */
main {
  opacity: 0;
  transition: opacity .45s ease;
}
body.wf-page-ready main { opacity: 1; }

[data-wf-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--wf-ease-out), transform .65s var(--wf-ease-spring);
}
[data-wf-reveal].wf-revealed { opacity: 1; transform: none; }

[data-wf-stagger] > [data-wf-reveal],
[data-wf-stagger] > [data-wf-stagger-item] {
  transition-delay: calc(var(--wf-stagger-i, 0) * 90ms);
}

.wf-how-step[data-wf-reveal] { transform: translateY(28px) scale(0.96) rotateX(6deg); }
.wf-how-step[data-wf-reveal].wf-revealed { opacity: 1; transform: translateY(0) rotateX(0deg); }
.wf-how-step--active[data-wf-reveal].wf-revealed,
.wf-how-step--active.wf-revealed { transform: translateY(-10px) rotateX(3deg); }
.wf-how-step[data-wf-reveal].wf-revealed:hover,
.wf-how-step[data-wf-reveal].wf-revealed:focus-visible { transform: translateY(-10px) rotateX(3deg); }

.wf-compare-col[data-wf-reveal] { transform: translateY(20px) scale(.98); }
.wf-compare-col--wefeen[data-wf-reveal].wf-revealed { transform: translateY(-4px) scale(1); }

@keyframes wf-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes wf-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(12deg); }
}
@keyframes wf-gradient-drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ------------------------------------------------- 20. RESPONSIVE */
@media (max-width: 980px) {
  .wf-compare--desktop { display: none; }
  .wf-swipe-wrap { display: block; }
}

@media (max-width: 700px) {
  .wf-reviews-marquee--google { display: none; }
  .wf-reviews-slider--google { display: flex; }
}

@media (max-width: 1024px) {
  .wf-hero-shell { grid-template-columns: 1fr; gap: 48px; }
  .wf-features-grid { grid-template-columns: repeat(2, 1fr); }
  .wf-eventtypes-grid { grid-template-columns: repeat(2, 1fr); }
  .wf-templates-grid { grid-template-columns: repeat(2, 1fr); }
  .wf-template-showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .wf-how-steps { grid-template-columns: repeat(2, 1fr); }
  .wf-how-path { top: 64px; height: 100px; }
  .wf-two-col { grid-template-columns: 1fr; gap: 32px; }
  .wf-compare { grid-template-columns: 1fr; }
  .wf-included-grid { grid-template-columns: 1fr; }
  .wf-rsvp-stats { grid-template-columns: repeat(3, 1fr); }
  .wf-contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  .wf-nav, .wf-header-actions .wf-btn, .wf-header-desktop-login { display: none; }
  .wf-mobile-toggle { display: inline-flex; }
  .wf-section { padding: 68px 0; }
  .wf-grid-2, .wf-grid-3, .wf-grid-4 { grid-template-columns: 1fr; }
  .wf-tab-panel-inner { grid-template-columns: 1fr; }
  .wf-dash-body { grid-template-columns: 1fr; }
  .wf-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wf-container { padding-inline: 18px; }
  .wf-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .wf-hero-cta { flex-direction: column; }
  .wf-hero-cta .wf-btn { width: 100%; }
  .wf-section-cta-actions { flex-direction: column; width: 100%; }
  .wf-section-cta-actions .wf-btn { width: 100%; }
  .wf-section-cta-btn { width: 100%; max-width: 360px; }
  .wf-template-actions { flex-direction: column; }
  .wf-template-actions .wf-btn { flex: 1 1 auto; width: 100%; }
  .wf-features-grid, .wf-eventtypes-grid, .wf-templates-grid { grid-template-columns: 1fr; }
  .wf-how-steps {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 22px;
    margin-left: 8px;
    border-left: 2px solid rgba(58, 31, 43, 0.08);
  }
  .wf-how-path { display: none; }
  .wf-how-progress { max-width: 100%; margin-bottom: 32px; }
  .wf-how-step {
    text-align: left;
    margin-bottom: 18px;
    cursor: pointer;
  }
  .wf-how-step-marker { margin: 0 0 16px; }
  .wf-how-journey--live .wf-how-steps {
    border-left-color: rgba(233, 79, 125, 0.22);
  }
  .wf-template-showcase-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .wf-template-showcase-actions { flex-direction: column; align-items: stretch; }
  .wf-template-showcase-btn { max-width: none; flex: 1 1 auto; width: 100%; }
  .wf-rsvp-stats { grid-template-columns: repeat(2, 1fr); }
  .wf-form-grid { grid-template-columns: 1fr; }
  .wf-footer-grid { grid-template-columns: 1fr; }
  .wf-dashboard { grid-template-columns: 1fr; }
  .wf-dash-side ul { flex-direction: row; flex-wrap: wrap; }
  .wf-final-cta { padding: 44px 22px; }
  .wf-included-items { grid-template-columns: 1fr; }
  .wf-included-item,
  .wf-included-item.wf-in { opacity: 1; transform: none; animation: none; }
}

/* --------------------------- 21. REDUCED MOTION & FOCUS */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .wf-btn-primary::after,
  .wf-reviews-cta-btn::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .wf-btn:hover,
  .wf-btn:focus-visible,
  .wf-reviews-cta-btn:hover,
  .wf-reviews-social-btn:hover,
  .wf-contact-social-btn:hover {
    transform: none !important;
  }
  [data-wf-reveal] { opacity: 1 !important; transform: none !important; }
  .wf-included-item { opacity: 1 !important; transform: none !important; animation: none !important; }
  main { opacity: 1 !important; }
  .wf-reviews-marquee-track { animation: none !important; }
  .wf-trust-marquee-track { animation: none !important; transform: none !important; flex-wrap: wrap; justify-content: center; width: 100%; max-width: var(--wf-max); margin-inline: auto; padding-inline: 18px; }
  .wf-trust-marquee { overflow-x: auto; }
  .wf-floating-petal { display: none; }
  .wf-how-blob { animation: none !important; }
  .wf-how-step-ring { animation: none !important; }
  .wf-how-step-num { animation: none !important; }
  .wf-how-path-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .wf-how-step-shine { animation: none !important; display: none; }
  .wf-how-step[data-wf-how-step="3"].wf-how-step--active .wf-how-step-icon { animation: none !important; }
}

:focus-visible {
  outline: 3px solid var(--wf-rose);
  outline-offset: 2px;
  border-radius: 4px;
}
.wf-btn:focus-visible { outline-offset: 3px; }

body.wf-no-scroll { overflow: hidden; }

/* --------------------------- 22. LEGAL PAGES */
.wf-header-legal { position: sticky; top: 0; }
.wf-header-legal + .wf-legal-page { padding-top: 0; }
.wf-nav-legal a[aria-current="page"] { color: var(--wf-rose); font-weight: 600; }

.wf-legal-page {
  padding: 48px 0 88px;
  background: linear-gradient(180deg, var(--wf-cream) 0%, var(--wf-white) 220px);
}

.wf-legal-shell { max-width: 820px; margin-inline: auto; }

.wf-legal-header { margin-bottom: 36px; }
.wf-legal-header h1 {
  font-family: var(--wf-font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 12px;
}
.wf-legal-meta {
  color: var(--wf-muted);
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.wf-legal-meta a { color: var(--wf-rose); }

.wf-legal-notice {
  background: #fff8fb;
  border: 1px solid var(--wf-border-rose);
  border-radius: var(--wf-radius-md);
  padding: 18px 20px;
  margin-bottom: 32px;
  font-size: 0.94rem;
  color: var(--wf-text);
}
.wf-legal-notice strong { color: var(--wf-rose); }

.wf-legal-body {
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-lg);
  padding: 36px 32px;
  box-shadow: var(--wf-shadow-sm);
}
.wf-legal-body h2 {
  font-family: var(--wf-font-display);
  font-size: 1.35rem;
  margin: 2.2rem 0 0.75rem;
  scroll-margin-top: 96px;
}
.wf-legal-body h2:first-child { margin-top: 0; }
.wf-legal-body h3 {
  font-size: 1.05rem;
  margin: 1.4rem 0 0.5rem;
}
.wf-legal-body p,
.wf-legal-body li {
  color: var(--wf-muted);
  line-height: 1.7;
  font-size: 0.98rem;
}
.wf-legal-body p { margin: 0 0 1rem; }
.wf-legal-body ul,
.wf-legal-body ol {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
}
.wf-legal-body li { margin-bottom: 0.45rem; }
.wf-legal-body a { color: var(--wf-rose); text-decoration: underline; text-underline-offset: 2px; }
.wf-legal-body a:hover { color: var(--wf-rose-dark, #c93d66); }

.wf-legal-toc {
  background: var(--wf-cream);
  border-radius: var(--wf-radius-md);
  padding: 18px 20px;
  margin-bottom: 28px;
}
.wf-legal-toc h2 {
  font-size: 1rem;
  margin: 0 0 10px;
  font-family: var(--wf-font-body);
  font-weight: 600;
}
.wf-legal-toc ol {
  margin: 0;
  padding-left: 1.2rem;
  columns: 1;
}
.wf-legal-toc li { break-inside: avoid; margin-bottom: 0.35rem; }
.wf-legal-toc a { color: var(--wf-text); text-decoration: none; font-size: 0.92rem; }
.wf-legal-toc a:hover { color: var(--wf-rose); }

@media (min-width: 720px) {
  .wf-legal-toc ol { columns: 2; column-gap: 28px; }
}

@media (max-width: 640px) {
  .wf-legal-page { padding: 32px 0 64px; }
  .wf-legal-body { padding: 24px 18px; }
  .wf-nav-legal { display: none; }
}

/* ------------------------------------------------ 22. CREATE / ORDER PAGE */
.wf-create-page { background: #fbfbfb; }
.wf-create-page .wf-section { background: transparent; }
.wf-create-page .wf-section--muted { background: var(--wf-section-muted); }

.wf-header-create .wf-nav-create a { font-size: 0.92rem; }

.wf-create-hero {
  position: relative;
  padding: clamp(48px, 8vw, 88px) 0 clamp(56px, 7vw, 72px);
  overflow: hidden;
}
.wf-create-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wf-create-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  animation: wf-how-blob-drift 18s ease-in-out infinite;
}
.wf-create-hero-orb--1 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255, 138, 102, 0.55), transparent 70%);
  top: -120px;
  right: -80px;
}
.wf-create-hero-orb--2 {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(233, 79, 125, 0.35), transparent 70%);
  bottom: -80px;
  left: -60px;
  animation-delay: -9s;
}
.wf-create-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.wf-create-hero-kicker {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-coral);
}
.wf-create-hero-title {
  margin: 0 0 16px;
  font-family: var(--wf-font-serif);
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  line-height: 1.08;
  color: var(--wf-plum);
}
.wf-create-hero-lead,
.wf-create-hero-sub {
  margin: 0 0 14px;
  color: var(--wf-muted);
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.65;
  max-width: 540px;
}
.wf-create-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.wf-create-hero-visual { display: flex; justify-content: center; }
.wf-create-hero-stack {
  position: relative;
  width: min(360px, 100%);
  height: 380px;
}
.wf-create-hero-card {
  position: absolute;
  width: 58%;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  color: #fff;
  font-family: var(--wf-font-serif);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 24px 48px rgba(58, 31, 43, 0.18);
  animation: wf-create-float 5s ease-in-out infinite;
}
.wf-create-hero-card--1 { top: 12%; left: 4%; transform: rotate(-8deg); z-index: 1; animation-delay: 0s; }
.wf-create-hero-card--2 { top: 18%; right: 4%; left: auto; transform: rotate(6deg); z-index: 2; animation-delay: -1.6s; width: 64%; }
.wf-create-hero-stack--two { height: 340px; max-width: 320px; }
.wf-create-hero-stack--two .wf-create-hero-card--2 { right: 0; }
@keyframes wf-create-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

.wf-create-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 24px);
}
.wf-create-process-step {
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: 24px;
  padding: clamp(22px, 2.5vw, 28px);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--wf-ease-spring), box-shadow 0.35s ease, border-color 0.3s;
}
.wf-create-process-step:hover {
  transform: translateY(-6px);
  border-color: var(--wf-border-rose);
  box-shadow: var(--wf-shadow-card);
}
.wf-create-process-num {
  display: block;
  font-family: var(--wf-font-serif);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--wf-rose);
  opacity: 0.12;
  line-height: 1;
  margin-bottom: -8px;
}
.wf-create-process-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--wf-soft-rose);
  color: var(--wf-rose);
  margin-bottom: 14px;
}
.wf-create-process-step h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.wf-create-process-step p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--wf-muted);
  line-height: 1.65;
}

.wf-create-trust {
  padding: 22px 0;
  background: var(--wf-white);
  border-block: 1px solid var(--wf-border);
}
.wf-create-trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  text-align: center;
}
.wf-create-trust-item {
  font-size: 0.92rem;
  color: var(--wf-plum);
}
.wf-create-trust-stars { color: var(--wf-gold); letter-spacing: 1px; }
.wf-create-trust-divider {
  width: 1px;
  height: 18px;
  background: var(--wf-border);
}

.wf-create-plans-section { padding-top: clamp(56px, 7vw, 80px); }
.wf-create-plans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.5vw, 24px);
  align-items: stretch;
  max-width: 920px;
  margin-inline: auto;
}
.wf-create-plans-swipe { display: none; margin-top: 28px; }
.wf-create-plans-swipe .wf-swipe-card {
  padding: 0;
  border: none;
  background: transparent;
  max-width: min(380px, calc(100vw - 56px));
}
.wf-create-plans-swipe .wf-create-plan { min-height: 100%; }

.wf-create-plan {
  position: relative;
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: 28px;
  padding: clamp(24px, 2.5vw, 30px);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.4s var(--wf-ease-spring), box-shadow 0.35s ease, border-color 0.3s;
}
.wf-create-plan:hover {
  transform: translateY(-6px);
  box-shadow: var(--wf-shadow-soft);
  border-color: var(--wf-border-rose);
}
.wf-create-plan--featured {
  border-color: var(--wf-border-rose);
  box-shadow: 0 28px 60px rgba(233, 79, 125, 0.12);
  transform: translateY(-8px);
}
.wf-create-plan--featured:hover { transform: translateY(-12px); }
.wf-create-plan-badge {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wf-create-plan-badge--new { background: var(--wf-soft-rose); color: var(--wf-rose); }
.wf-create-plan-badge--popular { background: rgba(217, 164, 65, 0.16); color: #9a6f12; }
.wf-create-plan-badge--bespoke { background: rgba(58, 31, 43, 0.08); color: var(--wf-plum); }
.wf-create-plan-title {
  margin: 0 0 8px;
  font-family: var(--wf-font-serif);
  font-size: clamp(1.35rem, 2vw, 1.55rem);
}
.wf-create-plan-desc {
  margin: 0 0 18px;
  color: var(--wf-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.wf-create-plan-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.wf-create-plan-price-now {
  font-family: var(--wf-font-serif);
  font-size: clamp(2rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--wf-plum);
}
.wf-create-plan-price-was {
  font-size: 1.1rem;
  color: var(--wf-muted);
  text-decoration: line-through;
  opacity: 0.7;
}
.wf-create-plan-price-note {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--wf-muted);
}
.wf-create-plan-timing {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 18px;
  font-size: 0.82rem;
  color: var(--wf-plum);
}
.wf-create-plan-express {
  color: var(--wf-rose);
  font-weight: 600;
}
.wf-create-plan-includes-label {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wf-muted);
}
.wf-create-plan-includes ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-create-plan-includes li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--wf-muted);
  line-height: 1.45;
}
.wf-create-plan-includes li svg {
  flex: none;
  margin-top: 2px;
  color: var(--wf-success);
}
.wf-create-plan-templates { margin-bottom: 18px; }
.wf-create-plan-templates-label {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--wf-muted);
}
.wf-create-plan-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.wf-create-plan-thumb {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 6px;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.wf-create-plan-cta { margin-top: auto; }

.wf-create-guests-card { background: linear-gradient(145deg, #fff8fb, #fff3e6); }
.wf-create-contact { background: var(--wf-section-muted); }

@media (max-width: 1024px) {
  .wf-create-hero-grid { grid-template-columns: 1fr; }
  .wf-create-hero-visual { order: -1; }
  .wf-create-hero-stack { height: 320px; max-width: 300px; margin-inline: auto; }
  .wf-create-process { grid-template-columns: 1fr; }
  .wf-create-plans-grid { display: none; }
  .wf-create-plans-swipe { display: block; }
}

@media (max-width: 640px) {
  .wf-create-hero-actions { flex-direction: column; }
  .wf-create-hero-actions .wf-btn { width: 100%; justify-content: center; }
  .wf-create-trust-divider { display: none; }
  .wf-nav-create { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-create-hero-card { animation: none !important; }
  .wf-order-spinner { animation: none !important; border-top-color: var(--wf-rose); }
}
/* Order modal (ref-style, Wefeen palette) */
.wf-order-overlay{position:fixed;inset:0;background:rgba(8,15,28,.6);backdrop-filter:blur(4px);z-index:99998;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .22s}
.wf-order-overlay.wf-order-open{opacity:1;pointer-events:all}
.wf-order-popup{background:#fff;border-radius:22px;width:100%;max-width:660px;max-height:92vh;overflow-y:auto;overflow-x:hidden;position:relative;transform:translateY(28px) scale(.97);transition:transform .3s cubic-bezier(.34,1.1,.64,1);scrollbar-width:thin;scrollbar-color:var(--wf-soft-rose, #fce8ef) var(--wf-cream, #faf7f5)}
.wf-order-overlay.wf-order-open .wf-order-popup{transform:translateY(0) scale(1)}
.wf-order-popup::-webkit-scrollbar{width:5px}
.wf-order-popup::-webkit-scrollbar-track{background:var(--wf-cream, #faf7f5)}
.wf-order-popup::-webkit-scrollbar-thumb{background:var(--wf-soft-rose, #fce8ef);border-radius:4px}

.wf-order-phead{position:sticky;top:0;background:#fff;border-bottom:1.5px solid #f0f5f8;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;z-index:10;border-radius:22px 22px 0 0}
.wf-order-phead-title{font-family:var(--wf-font-serif,Georgia,serif);font-size:18px;font-weight:700;color:#0f1a22}
.wf-order-phead-right{display:flex;align-items:center;gap:14px}
.wf-order-ptotal{font-family:var(--wf-font-serif,Georgia,serif);font-size:24px;font-weight:700;color:var(--wf-rose)}
.wf-order-pbdown{font-size:11px;color:#8a9aaa;max-width:200px;text-align:right;line-height:1.4}
.wf-order-pclose{width:32px;height:32px;border-radius:50%;border:1.5px solid #e4ecf0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s;flex-shrink:0}
.wf-order-pclose:hover{background:#f0f5f8}
.wf-order-pbody{padding:22px 18px 32px;width:100%;overflow:hidden;box-sizing:border-box}
.wf-order-pbody *{box-sizing:border-box;max-width:100%}
.wf-order-pbody input,.wf-order-pbody select,.wf-order-pbody textarea{width:100% !important;max-width:100% !important;min-width:0 !important}

/* ══ STEP ══ */
.wf-order-step-label{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.wf-order-step-num{width:28px;height:28px;border-radius:50%;background:var(--wf-rose);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wf-order-step-title{font-size:15px;font-weight:700;color:#0f1a22}
.wf-order-step-sub{font-size:11.5px;color:#8a9aaa;margin-left:auto;white-space:nowrap}
.wf-order-step-sep{width:100%;height:1px;background:#edf2f7;margin:26px 0}

/* ══ DESIGN PICKER ══ */
.wf-order-picker-grid{display:grid;gap:10px;width:100%;min-width:0;overflow:hidden}
.wf-order-pg3{grid-template-columns:1fr 1fr 1fr}
.wf-order-pg6{grid-template-columns:1fr 1fr 1fr}
.wf-order-pg7{grid-template-columns:1fr 1fr 1fr}
@media(max-width:560px){.wf-order-pg3,.wf-order-pg6,.wf-order-pg7{grid-template-columns:1fr 1fr}}
@media(max-width:340px){.wf-order-pg3,.wf-order-pg6,.wf-order-pg7{grid-template-columns:1fr}}

.wf-order-dc{border:1.5px solid #e4ecf2;border-radius:13px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;background:#fff;position:relative}
.wf-order-dc:hover{border-color:#7fc0d8;box-shadow:0 4px 18px rgba(0,105,137,.1);transform:translateY(-2px)}
.wf-order-dc.wf-order-sel{border-color:var(--wf-rose);box-shadow:0 0 0 3px rgba(0,105,137,.12)}

.wf-order-dc-prev{width:100%;aspect-ratio:9/16;background:linear-gradient(135deg,#e8f4fa,#f2fafd);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.wf-order-dc-prev img{width:100%;height:100%;object-fit:cover;display:block}
.wf-order-dc-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:.4;pointer-events:none}
.wf-order-dc-ph svg{width:28px;height:28px;stroke:var(--wf-rose);fill:none;stroke-width:1.3}
.wf-order-dc-ph span{font-size:9px;color:var(--wf-rose);font-weight:700;text-transform:uppercase;letter-spacing:.1em}

.wf-order-dc-chk{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--wf-rose);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:opacity .18s,transform .22s cubic-bezier(.34,1.3,.64,1)}
.wf-order-dc.wf-order-sel .wf-order-dc-chk{opacity:1;transform:scale(1)}
.wf-order-dc-chk svg{width:12px;height:12px;stroke:#fff;stroke-width:2.5;fill:none}
.wf-order-dc-badge{position:absolute;top:8px;left:8px;background:rgba(0,105,137,.82);color:#fff;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:20px}
.wf-order-dc-info{padding:10px 11px 11px}
.wf-order-dc-name{font-size:12.5px;font-weight:700;color:#0f1a22;margin-bottom:2px;line-height:1.25}
.wf-order-dc-desc{font-size:11px;color:#7a8a98;line-height:1.35;margin-bottom:6px}
.wf-order-dc-demo{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--wf-rose);text-decoration:none;transition:gap .15s}
.wf-order-dc-demo:hover{gap:6px}
.wf-order-dc-demo svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}

.wf-order-picker-cont{margin-top:20px;display:flex;justify-content:flex-end}
.wf-order-picker-cont button{display:flex;align-items:center;gap:8px;background:var(--wf-rose);color:#fff;font-size:14px;font-weight:700;padding:13px 28px;border-radius:11px;border:none;cursor:pointer;font-family:inherit;transition:background .2s,box-shadow .2s,opacity .2s}
.wf-order-picker-cont button:disabled{opacity:.4;cursor:not-allowed}
.wf-order-picker-cont button:not(:disabled):hover{background:var(--wf-plum);box-shadow:0 6px 20px rgba(0,105,137,.25)}

/* ══ FORM FIELDS ══ */
.wf-order-field{margin-bottom:16px;width:100%;min-width:0}
.wf-order-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px;width:100%;min-width:0;max-width:100%}
@media(max-width:480px){.wf-order-field-row{grid-template-columns:1fr}}
.wf-order-label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a8a98;margin-bottom:7px}
.wf-order-input,.wf-order-select,.wf-order-textarea{width:100%;min-width:0;max-width:100%;padding:11px 12px;border:1.5px solid #dce8f0;border-radius:10px;font-size:14px;font-family:inherit;color:#0f1a22;background:#fff;transition:border-color .18s,box-shadow .18s;outline:none;display:block}
.wf-order-input:focus,.wf-order-select:focus,.wf-order-textarea:focus{border-color:var(--wf-rose);box-shadow:0 0 0 3px rgba(0,105,137,.09)}
.wf-order-input.err,.wf-order-select.err{border-color:#ee0000}
.wf-order-errmsg{font-size:11px;color:#ee0000;margin-top:4px;display:none}
.wf-order-errmsg.show{display:block}
.wf-order-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23889' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;cursor:pointer}
.wf-order-textarea{resize:vertical;min-height:80px;line-height:1.55}

/* custom sections */
.wf-order-custom-sec-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.wf-order-custom-sec-row{display:flex;align-items:center;gap:8px}
.wf-order-custom-sec-row .wf-order-input{flex:1}
.wf-order-custom-sec-row button{width:34px;height:42px;border:1.5px solid #dce8f0;border-radius:9px;background:#fff;color:#9aaab8;font-size:18px;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s;display:flex;align-items:center;justify-content:center}
.wf-order-custom-sec-row button:hover{background:#fff0f0;border-color:#ee8888;color:#ee0000}
.wf-order-add-custom-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--wf-rose);background:var(--wf-soft-rose, #fce8ef);border:1.5px solid var(--wf-soft-rose, #fce8ef);border-radius:9px;padding:8px 14px;cursor:pointer;transition:background .15s;font-family:inherit}
.wf-order-add-custom-btn:hover{background:#d0eaf5}

/* chips */
.wf-order-chips{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.wf-order-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:24px;border:1.5px solid #dce8f0;font-size:12px;font-weight:600;color:#4a5a6a;cursor:pointer;transition:border-color .18s,background .18s,color .18s;user-select:none;background:#fff;white-space:nowrap}
.wf-order-chip:hover{border-color:#7fc0d8;color:var(--wf-rose)}
.wf-order-chip.active{border-color:var(--wf-rose);background:var(--wf-soft-rose, #fce8ef);color:var(--wf-rose)}
.wf-order-chip .wf-order-cp{font-size:10px;color:#9aaab8;transition:color .18s}
.wf-order-chip.active .wf-order-cp{color:var(--wf-rose)}

/* icon chips */
.wf-order-icon-chips{display:flex;flex-wrap:wrap;gap:6px;width:100%;min-width:0;overflow:visible;max-width:100%}
.wf-order-icon-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 10px;border-radius:24px;border:1.5px solid #dce8f0;font-size:12px;font-weight:600;color:#4a5a6a;cursor:pointer;transition:border-color .18s,background .18s,color .18s;user-select:none;background:#fff}
.wf-order-icon-chip:hover{border-color:#7fc0d8;color:var(--wf-rose)}
.wf-order-icon-chip.active{border-color:var(--wf-rose);background:var(--wf-soft-rose, #fce8ef);color:var(--wf-rose)}
.wf-order-icon-chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;flex-shrink:0}
.wf-order-chip-badges{display:inline-flex;gap:3px;margin-left:2px}
.wf-order-chip-pop{font-size:9px;background:var(--wf-rose);color:#fff;padding:1px 5px;border-radius:8px;font-weight:700}
.wf-order-chip-nw{font-size:9px;background:var(--wf-soft-rose, #fce8ef);color:var(--wf-rose);padding:1px 5px;border-radius:8px;font-weight:700}

/* extras */
.wf-order-extras-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%;max-width:100%}
@media(max-width:480px){.wf-order-extras-grid{grid-template-columns:1fr}}
.wf-order-extra{border:1.5px solid #dce8f0;border-radius:13px;padding:14px 14px 13px;cursor:pointer;transition:border-color .2s,background .2s,transform .18s;background:#fff;position:relative}
.wf-order-extra:hover{border-color:#7fc0d8;background:#f7fbfd;transform:translateY(-1px)}
.wf-order-extra.active{border-color:var(--wf-rose);background:#edf7fb}
.wf-order-extra-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:2px 7px;border-radius:20px;margin-bottom:9px;display:inline-block}
.wf-order-eb-mp{background:var(--wf-rose);color:#fff}
.wf-order-eb-nw{background:var(--wf-soft-rose, #fce8ef);color:var(--wf-rose)}
.wf-order-eb-pm{background:#fdf8ee;color:#9a7830}
.wf-order-eb-fs{background:var(--wf-soft-rose, #fce8ef);color:var(--wf-rose)}
.wf-order-extra-name-row{display:flex;align-items:center;gap:4px;margin-bottom:2px}
.wf-order-extra-name{font-size:13px;font-weight:700;color:#0f1a22}
.wf-order-extra-price{font-size:12px;color:var(--wf-rose);font-weight:600}
.wf-order-extra-chk{position:absolute;top:11px;right:11px;width:20px;height:20px;border-radius:50%;border:1.5px solid #c8d8e4;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s}
.wf-order-extra.active .wf-order-extra-chk{background:var(--wf-rose);border-color:var(--wf-rose)}
.wf-order-extra-chk svg{width:10px;height:10px;stroke:#fff;stroke-width:2.5;fill:none;opacity:0;transition:opacity .15s}
.wf-order-extra.active .wf-order-extra-chk svg{opacity:1}


/* VERSION SELECTOR PILLS */
.wf-order-vers-opts{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 8px;max-width:100%}
.wf-order-vo{padding:8px 15px;border:1.5px solid #dce8f0;border-radius:24px;font-size:13px;font-weight:600;color:#4a5a6a;cursor:pointer;transition:border-color .18s,background .18s,color .18s;user-select:none;background:#fff;display:inline-flex;align-items:center;gap:4px}
.wf-order-vo:hover{border-color:#7fc0d8;color:var(--wf-rose)}
.wf-order-vo.wf-order-vo-sel{border-color:var(--wf-rose);background:var(--wf-soft-rose, #fce8ef);color:var(--wf-rose)}
.wf-order-vo-pr{font-size:11px;color:#9aaab8}
.wf-order-vo.wf-order-vo-sel .wf-order-vo-pr{color:var(--wf-rose)}

/* counter */
.wf-order-counter-row{display:flex;align-items:center;border:1.5px solid #dce8f0;border-radius:10px;overflow:hidden;width:fit-content}
.wf-order-counter-btn{width:40px;height:42px;border:none;background:#f5f8fa;cursor:pointer;font-size:20px;color:#4a5a6a;display:flex;align-items:center;justify-content:center;transition:background .15s}
.wf-order-counter-btn:hover{background:var(--wf-soft-rose, #fce8ef);color:var(--wf-rose)}
.wf-order-counter-val{width:54px;text-align:center;font-size:15px;font-weight:700;color:#0f1a22;border:none;background:#fff;height:42px;display:flex;align-items:center;justify-content:center;border-left:1.5px solid #dce8f0;border-right:1.5px solid #dce8f0}

/* lang */
.wf-order-lang-added{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.wf-order-lang-tag{display:flex;align-items:center;gap:6px;background:var(--wf-soft-rose, #fce8ef);border:1px solid var(--wf-soft-rose, #fce8ef);border-radius:20px;padding:4px 10px 4px 12px;font-size:12px;color:var(--wf-rose);font-weight:600}
.wf-order-lang-tag button{background:none;border:none;cursor:pointer;color:#9aaab8;font-size:15px;line-height:1;padding:0;transition:color .15s}
.wf-order-lang-tag button:hover{color:#ee0000}
.wf-order-add-lang{display:flex;gap:9px;align-items:stretch;margin-top:10px}
.wf-order-add-lang .wf-order-select{flex:1}
.wf-order-add-lang-btn{padding:0 16px;background:var(--wf-soft-rose, #fce8ef);border:1.5px solid var(--wf-soft-rose, #fce8ef);border-radius:10px;color:var(--wf-rose);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .18s;font-family:inherit}
.wf-order-add-lang-btn:hover{background:#d0eaf5}

/* summary */
.wf-order-summary{background:var(--wf-cream, #faf7f5);border:1.5px solid var(--wf-soft-rose, #fce8ef);border-radius:14px;padding:20px 22px;margin-top:26px}
.wf-order-sum-row{display:flex;justify-content:space-between;padding:5px 0}
.wf-order-sum-row span:first-child{font-size:13px;color:#4a5a6a}
.wf-order-sum-row span:last-child{font-size:13px;font-weight:600;color:#0f1a22}
.wf-order-sum-div{height:1px;background:var(--wf-soft-rose, #fce8ef);margin:10px 0}
.wf-order-sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0 0}
.wf-order-sum-total span:first-child{font-size:14px;font-weight:700;color:#0f1a22}
.wf-order-sum-total span:last-child{font-family:var(--wf-font-serif,Georgia,serif);font-size:30px;font-weight:700;color:var(--wf-rose)}

/* pay */
.wf-order-pay-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px 24px;background:var(--wf-rose);color:#fff;border:none;border-radius:13px;font-size:16px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:background .2s,box-shadow .2s,transform .18s;margin-top:18px;font-family:inherit}
.wf-order-pay-btn:hover{background:var(--wf-plum);box-shadow:0 10px 30px rgba(0,105,137,.3);transform:translateY(-1px)}
.wf-order-pay-note{text-align:center;font-size:11.5px;color:#9aaab8;margin-top:10px;line-height:1.5}

/* back */
.wf-order-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#8a9aaa;cursor:pointer;background:none;border:none;font-family:inherit;margin-bottom:22px;padding:0;transition:color .15s}
.wf-order-back:hover{color:var(--wf-rose)}
.wf-order-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}

/* loading */
.wf-order-loading{display:none;position:fixed;inset:0;background:rgba(255,255,255,.92);z-index:99999;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.wf-order-loading.show{display:flex}
.wf-order-spinner{width:42px;height:42px;border:3px solid #dde8f0;border-top-color:var(--wf-rose);border-radius:50%;animation:wgfSpin .85s linear infinite}
@keyframes wgfSpin{to{transform:rotate(360deg)}}
.wf-order-loading p{font-size:14px;color:#4a5a6a;font-weight:600}

#wgfCC{position:fixed;inset:0;pointer-events:none;z-index:99997}


/* CARD ENTRANCE ANIMATIONS */
@keyframes wgfCardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.wf-order-card{opacity:0;animation:wgfCardIn .55s cubic-bezier(.34,1.1,.64,1) both}
.wf-order-card-std{animation-delay:.05s}
.wf-order-card-tpl{animation-delay:.22s}
.wf-order-card-custom{animation-delay:.39s}

/* INCLUDE LIST STAGGERED ANIMATION */
@keyframes wgfItemIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.wf-order-incl li{opacity:0;animation:wgfItemIn .38s cubic-bezier(.34,1.1,.64,1) both}
.wf-order-incl li:nth-child(1){animation-delay:.35s}
.wf-order-incl li:nth-child(2){animation-delay:.45s}
.wf-order-incl li:nth-child(3){animation-delay:.55s}
.wf-order-incl li:nth-child(4){animation-delay:.65s}
.wf-order-incl li:nth-child(5){animation-delay:.75s}
.wf-order-incl li:nth-child(6){animation-delay:.85s}

/* ══════════════════════════════════════════
   MOBILE — cards + popup (desktop untouched)
══════════════════════════════════════════ */
@media(max-width:640px){

  /* ── CARDS: bigger, more impactful ── */
  .wf-order-plans{gap:16px}
  .wf-order-inner{padding:0 14px}
  .wf-order-card{padding:24px 20px 20px;border-radius:20px}

  /* Bigger card headings for mobile impact */
  .wf-order-cname{font-size:26px;letter-spacing:-.01em}
  .wf-order-card-tpl .wf-order-cname{font-size:28px}
  .wf-order-ctag{font-size:13.5px;line-height:1.6;margin-bottom:16px}

  /* Bigger price display */
  .wf-order-price{font-size:42px}
  .wf-order-card-tpl .wf-order-price{font-size:46px}
  .wf-order-price-was{font-size:24px}

  /* Tighter include list on mobile — readable but compact */
  .wf-order-incl{gap:8px;margin-bottom:22px}
  .wf-order-incl li{font-size:13.5px}

  /* Bigger CTA button — thumb-friendly */
  .wf-order-cbtn{padding:16px 20px;font-size:15px;border-radius:13px}
  .wf-order-card-tpl .wf-order-cbtn{padding:18px 20px;font-size:16px}

  /* Mini previews: slightly taller on mobile */
  .wf-order-mini-row,.wf-order-mini-row-6{gap:5px}
  .wf-order-mini-previews{margin-top:20px;padding-top:14px}

  /* ── POPUP: centered on mobile, clean header ── */
  .wf-order-overlay{
    padding:12px;
    align-items:center;
  }
  .wf-order-popup{
    border-radius:20px;
    max-height:92vh;
    max-width:100%;
    width:100%;
    transform:translateY(20px) scale(.97);
  }
  .wf-order-overlay.wf-order-open .wf-order-popup{
    transform:translateY(0) scale(1);
  }
  /* Clean header — no pseudo-element, proper spacing */
  .wf-order-phead{
    border-radius:20px 20px 0 0;
    padding:16px 16px 14px;
    gap:8px;
  }
  .wf-order-phead::before{display:none}
  .wf-order-phead-title{font-size:15px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wf-order-ptotal{font-size:21px;white-space:nowrap}
  .wf-order-pbdown{display:none}
  .wf-order-pclose{width:30px;height:30px;flex-shrink:0}
  .wf-order-step-counter{padding:4px 16px 0}

  /* Body padding */
  .wf-order-pbody{padding:16px 14px 28px}

  /* Picker grids on mobile */
  .wf-order-picker-grid.wf-order-pg6{grid-template-columns:1fr 1fr}
  .wf-order-picker-grid.wf-order-pg7{grid-template-columns:1fr 1fr}
  /* STD: 2 cols so each card is bigger and more impactful */
  .wf-order-picker-grid.wf-order-pg3{grid-template-columns:1fr 1fr}

  /* Forms: single column */
  .wf-order-field-row{grid-template-columns:1fr}

  /* Extras: 2 cols still fits well */
  .wf-order-extras-grid{grid-template-columns:1fr 1fr}

  /* Step title */
  .wf-order-step-title{font-size:14px}
}

@media(max-width:400px){
  .wf-order-vers-opts{gap:6px}
  .wf-order-vo{padding:7px 10px;font-size:12px}
  .wf-order-cname{font-size:23px}
  .wf-order-price{font-size:38px}
}

/* INFO TOOLTIP */
.wf-order-info-wrap{display:inline-flex;align-items:center;position:relative;vertical-align:middle;margin-left:5px}
.wf-order-info-btn{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--wf-soft-rose, #fce8ef);background:var(--wf-soft-rose, #fce8ef);color:var(--wf-rose);font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;flex-shrink:0;transition:background .15s,border-color .15s;font-family:inherit}
.wf-order-info-btn:hover{background:var(--wf-rose);color:#fff;border-color:var(--wf-rose)}
.wf-order-tooltip{display:none}
#wf-order-tip{position:fixed;background:#fff;color:#3a4a5a;font-size:12px;line-height:1.6;padding:12px 14px;border-radius:12px;width:230px;z-index:999999;pointer-events:none;box-shadow:0 6px 28px rgba(0,105,137,.18);border:1.5px solid var(--wf-soft-rose, #fce8ef);display:none}
#wf-order-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--wf-soft-rose, #fce8ef)}
#wf-order-tip::before{content:'';position:absolute;top:calc(100% - 1px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#fff;z-index:1}

/* DELIVERY BADGE */
.wf-order-delivery{display:flex;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.wf-order-del-standard{font-size:11px;color:#6a7a8a;background:var(--wf-cream, #faf7f5);border:1px solid #dce8f0;border-radius:6px;padding:3px 9px;font-weight:600}
.wf-order-del-express{font-size:11px;color:var(--wf-rose);background:var(--wf-soft-rose, #fce8ef);border:1px solid var(--wf-soft-rose, #fce8ef);border-radius:6px;padding:3px 9px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.wf-order-del-gold{background:#fdf8ec;border-color:#d8c888;color:#8a7030}
.wf-order-del-gold-exp{background:#fdf8ec;border-color:#d8c888;color:#8a7030}
.wf-order-del-gold-exp svg{stroke:#8a7030}

/* BUNDLE CARDS */
.wf-order-bundles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.wf-order-bundle{border:1.5px solid #d8c888;border-radius:13px;padding:14px 14px 13px;cursor:pointer;transition:border-color .2s,background .2s;background:linear-gradient(135deg,#fffdf5,#fffff8);position:relative}
.wf-order-bundle:hover{border-color:#b8a050}
.wf-order-bundle.active{border-color:#9a8030;background:#fdf8ec}
.wf-order-bundle-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:2px 7px;border-radius:20px;margin-bottom:6px;display:inline-block;background:#9a8030;color:#fff}
.wf-order-bundle-name{font-size:13px;font-weight:700;color:#0f1a22;margin-bottom:2px}
.wf-order-bundle-desc{font-size:11px;color:#7a6a40;line-height:1.4;margin-bottom:6px}
.wf-order-bundle-price{display:flex;align-items:baseline;gap:6px}
.wf-order-bundle-price-new{font-size:16px;font-weight:700;color:#9a8030}
.wf-order-bundle-price-was{font-size:12px;color:#c0b080;text-decoration:line-through}
.wf-order-bundle-chk{position:absolute;top:11px;right:11px;width:20px;height:20px;border-radius:50%;border:1.5px solid #c8b888;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s}
.wf-order-bundle.active .wf-order-bundle-chk{background:#9a8030;border-color:#9a8030}
.wf-order-bundle-chk svg{width:10px;height:10px;stroke:#fff;stroke-width:2.5;fill:none;opacity:0;transition:opacity .15s}
.wf-order-bundle.active .wf-order-bundle-chk svg{opacity:1}

/* EXPRESS HIGHLIGHT */
.wf-order-express-sub{font-size:10.5px;color:var(--wf-rose);font-weight:600;margin-top:2px}

/* SOCIAL PROOF */
.wf-order-social-proof{text-align:center;font-size:12px;color:#6a8a9a;margin-top:8px;line-height:1.5}


.wf-order-progress{height:4px;background:#edf2f7;overflow:visible;margin:0;border-radius:0}
.wf-order-progress-fill{height:100%;background:linear-gradient(90deg,var(--wf-rose),#f06b94);border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.wf-order-step-counter{font-size:11px;font-weight:600;color:#8a9aaa;padding:8px 24px 0;letter-spacing:.02em}
.wf-order-phead-total-wrap{text-align:right}
.wf-order-tip{position:fixed;background:#fff;color:#3a4a5a;font-size:12px;line-height:1.6;padding:12px 14px;border-radius:12px;width:230px;z-index:999999;pointer-events:none;box-shadow:0 6px 28px rgba(233,79,125,.18);border:1.5px solid var(--wf-soft-rose,#fce8ef);display:none}
.wf-order-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--wf-soft-rose,#fce8ef)}
.wf-order-social-proof{text-align:center;font-size:12px;color:#6a8a9a;margin-top:8px;line-height:1.5}
.wf-order-express-sub{font-size:11px;color:var(--wf-plum);margin-top:2px}
@media(max-width:768px){.wf-order-input,.wf-order-select,.wf-order-textarea{font-size:16px !important}}
@media(max-width:640px){
  .wf-order-overlay{padding:12px;align-items:center}
  .wf-order-popup{border-radius:20px;max-height:94vh}
  .wf-order-phead{padding:14px 16px}
  .wf-order-pbody{padding:18px 14px 28px}
  .wf-order-bundles{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .wf-order-spinner{animation:none !important;border-top-color:var(--wf-rose)}
}