/* ==========================================================================
   Wazon — public site (landing, pricing, legal)  ·  wfl-*
   Mobile-first. Breakpoints: 640 / 768 / 1024 / 1280.
   Everything reads from the tokens below; dark mode just swaps them.
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  color-scheme: light dark;

  /* colour */
  --bg: #f7f8f7;
  --surface: #ffffff;
  --surface-2: #f1f4f2;
  --text: #0f1714;
  --text-muted: #55625c;          /* 6.1:1 on --surface */
  --primary: #0f7a4a;             /* 5.4:1 with white text */
  --primary-hover: #0b633c;
  --on-primary: #ffffff;
  --accent: #25d366;              /* WhatsApp green — decorative only, never text */
  --border: #e3e8e5;
  --border-strong: #cfd8d3;
  --success: #15803d;
  --warning: #b45309;
  --danger: #dc2626;
  --tint: color-mix(in srgb, var(--primary) 8%, var(--surface));
  --bubble-out: #dcf8c6;

  /* type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-sans);

  /* spacing: 4 8 12 16 24 32 48 64 */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* shadows: soft + layered */
  --shadow-sm: 0 1px 2px rgba(16, 24, 20, 0.04), 0 1px 3px rgba(16, 24, 20, 0.06);
  --shadow-md: 0 2px 4px -1px rgba(16, 24, 20, 0.05), 0 8px 24px -6px rgba(16, 24, 20, 0.10);
  --shadow-lg: 0 4px 8px -2px rgba(16, 24, 20, 0.05), 0 24px 56px -12px rgba(16, 24, 20, 0.18);

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* entrances */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);         /* general UI */
  --t-fast: 180ms;
  --t-med: 250ms;
  --t-slow: 560ms;

  /* layout */
  --shell: 1180px;
  --gutter: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --head-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0f0d;
    --surface: #111815;
    --surface-2: #17201c;
    --text: #e8eeeb;
    --text-muted: #9aa8a1;
    --primary: #3ddc84;
    --primary-hover: #66e6a0;
    --on-primary: #03140b;
    --border: #222d28;
    --border-strong: #2f3d36;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --tint: color-mix(in srgb, var(--primary) 7%, var(--surface));
    --bubble-out: #144d37;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.3), 0 8px 24px -6px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.3), 0 24px 56px -12px rgba(0, 0, 0, 0.6);
  }
}

/* Always-dark surfaces (broadcasts band, final CTA) re-scope the tokens locally */
.wfl-sec-dark,
.wfl-cta {
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --text: #eef3f0;
  --text-muted: #a9b6b0;
  --primary: #3ddc84;
  --primary-hover: #66e6a0;
  --on-primary: #03140b;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --tint: rgba(61, 220, 132, 0.10);
  --bubble-out: #144d37;
  color: var(--text);
}

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

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

body.wfl {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-feature-settings: 'cv11', 'ss01';
}

.wfl h1, .wfl h2, .wfl h3, .wfl h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}
.wfl p { margin: 0; text-wrap: pretty; }
.wfl img, .wfl svg { max-width: 100%; }
.wfl :where(a) { color: inherit; }
.wfl a:where(:hover) { text-decoration: none; }

.wfl-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 768px) { :root { --gutter: 2rem; } }

/* ---------- 3. ACCESSIBILITY HELPERS ---------- */
.wfl-skip {
  position: fixed;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--text);
  color: var(--bg) !important;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--t-med) var(--ease);
}
.wfl-skip:focus { transform: none; }

.wfl :where(a, button, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

.wfl-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke-width: 1.75;
}

/* ---------- 4. BRAND ---------- */
.wfl .wf-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.wfl .wf-brand-mark {
  height: auto;
  width: auto;
  display: block;
}
.wfl .wf-brand-mark img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.wfl .wf-brand-word { display: none; }

/* theme-aware logo: partial renders both, CSS picks one */
.wfl .wf-brand-mark.is-auto img.wf-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .wfl .wf-brand-mark.is-auto img.wf-logo-light { display: none; }
  .wfl .wf-brand-mark.is-auto img.wf-logo-dark { display: block; }
}

/* ---------- 5. BUTTONS ---------- */
.wfl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.wfl-btn .wfl-icon {
  width: 18px;
  height: 18px;
  transition: transform var(--t-med) var(--ease-out);
}
.wfl-btn:hover .wfl-icon { transform: translateX(3px); }
.wfl-btn:active { transform: scale(0.97); }

.wfl-btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.wfl-btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }

.wfl-btn-ghost,
.wfl-btn-line {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.wfl-btn-ghost:hover,
.wfl-btn-line:hover { background: var(--surface-2); color: var(--text); }

.wfl-btn-dark { background: var(--text); color: var(--bg); }
.wfl-btn-dark:hover { opacity: 0.9; color: var(--bg); }

.wfl-btn-sm { min-height: 44px; padding: 0 var(--s-4); font-size: 0.9rem; }

/* ---------- 6. HEADER + MOBILE DRAWER ---------- */
.wfl-head {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.wfl-head.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 12px -6px rgba(16, 24, 20, 0.12);
}
.wfl-head-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--head-h);
}

.wfl-nav {
  display: none;
  align-items: center;
  gap: var(--s-1);
  margin-inline: auto;
}
.wfl-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.wfl-nav a:hover { color: var(--text); background: var(--surface-2); }

.wfl-head-cta { display: none; align-items: center; gap: var(--s-2); }

.wfl-burger {
  position: relative;
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.wfl-burger:active { transform: scale(0.94); }
.wfl-burger > span:not(.wfl-sr) {
  grid-area: 1 / 1;
  display: grid;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-out);
}
.wfl-burger .wfl-x { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.wfl-burger[aria-expanded="true"] .wfl-bars { opacity: 0; transform: rotate(90deg) scale(0.6); }
.wfl-burger[aria-expanded="true"] .wfl-x { opacity: 1; transform: none; }

.wfl-drawer {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  padding: var(--s-2) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  max-height: calc(100dvh - var(--head-h));
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--t-med) var(--ease),
    transform var(--t-med) var(--ease-out),
    visibility 0s linear var(--t-med);
}
.wfl-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.wfl-drawer > a {
  display: flex;
  align-items: center;
  min-height: 52px;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.wfl-drawer .wfl-drawer-cta {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

/* ---------- 7. HERO ---------- */
.wfl-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* one quiet wash of colour — no grids, no glow blobs */
.wfl-hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto;
  height: 80%;
  z-index: -1;
  background: radial-gradient(60% 60% at 70% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.wfl-hero-grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
  padding-block: var(--s-7) var(--s-8);
}

.wfl-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-3) 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
}
.wfl-pill-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.wfl-pill-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  animation: wfl-ping 2.4s var(--ease) infinite;
}

.wfl-h1 {
  margin-top: var(--s-5) !important;
  font-size: clamp(2.25rem, 1.4rem + 4vw, 3.75rem);
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  max-width: 16ch;
}
.wfl-h1 em { font-style: normal; color: var(--primary); }

.wfl-lede {
  margin-top: var(--s-5) !important;
  max-width: 36rem;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-muted);
}
.wfl-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.wfl-hero-note {
  margin-top: var(--s-3) !important;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.wfl-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-6) 0 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}
.wfl-trust li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.wfl-trust .wfl-icon { width: 18px; height: 18px; color: var(--primary); }

/* hero visual: flat phone, two static callouts */
.wfl-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--s-4) 0;
}
.wfl-hero-visual::before {
  content: '';
  position: absolute;
  inset: 8% 10%;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  border: 1px solid var(--border);
  z-index: 0;
}
.wfl-hero-visual .wf-phone {
  position: relative;
  z-index: 1;
  height: 380px;
  max-height: none;
  transform: none;
  animation: wfl-rise 900ms var(--ease-out) 120ms both;
}

.wfl-chip {
  position: absolute;
  z-index: 3;
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  animation: wfl-rise var(--t-slow) var(--ease-out) both;
}
.wfl-chip-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--tint);
  color: var(--primary);
}
.wfl-chip-ico .wfl-icon { width: 18px; height: 18px; }
.wfl-chip b {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
.wfl-chip span > span { display: block; font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; }
.wfl-chip-a { top: 22%; left: -9%; animation-delay: 700ms; }
.wfl-chip-b { top: 40%; right: -10%; animation-delay: 1000ms; }

/* ---------- 8. CAPABILITY BAND ---------- */
.wfl-band {
  border-block: 1px solid var(--border);
  background: var(--surface);
}
.wfl-band-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wfl-band-cell {
  padding: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.wfl-band-cell:nth-child(odd) { border-right: 1px solid var(--border); }
.wfl-band-cell:nth-last-child(-n + 2) { border-bottom: 0; }
.wfl-band-cell b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.wfl-band-cell span {
  display: block;
  margin-top: var(--s-1);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------- 9. SECTIONS ---------- */
.wfl-sec { padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
.wfl :where(section[id]) { scroll-margin-top: calc(var(--head-h) + var(--s-4)); }
.wfl-sec-alt {
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.wfl-sec-dark {
  background: #0c1411;
  background-image: radial-gradient(50% 60% at 90% 0%, rgba(61, 220, 132, 0.10), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  .wfl-sec-dark { background-color: #070b09; border-block: 1px solid #1a2420; }
}

.wfl-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
}

.wfl-h2 {
  margin-top: var(--s-3) !important;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em !important;
  max-width: 20ch;
}
.wfl-sub {
  margin-top: var(--s-4) !important;
  max-width: 38rem;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  color: var(--text-muted);
}

.wfl-head-row-2 {
  display: grid;
  gap: var(--s-4);
  align-items: end;
}

/* ---------- 10. CARDS / BENTO ---------- */
.wfl-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.wfl-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition:
    translate var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}
@media (hover: hover) {
  .wfl-tile:hover {
    translate: 0 -4px;
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
  }
}
.wfl-tile-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--tint);
  color: var(--primary);
  margin-bottom: var(--s-2);
}
.wfl-tile-ico .wfl-icon { width: 20px; height: 20px; }
.wfl-tile h3 { font-size: 1.075rem; font-weight: 650; letter-spacing: -0.015em; }
.wfl-tile p {
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.wfl-tile-list {
  margin: var(--s-2) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  display: grid;
  gap: var(--s-2);
}
.wfl-tile-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: 0.9rem;
  line-height: 1.5;
}
.wfl-tile-list .wfl-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--primary); }

/* lead tile: tinted, not a dark gradient */
.wfl-tile-lead {
  background: var(--tint);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}
.wfl-tile-lead .wfl-tile-ico { background: var(--primary); color: var(--on-primary); }

/* ---------- 11. SPLIT / CHECK LISTS ---------- */
.wfl-split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

.wfl-checks {
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-5);
}
.wfl-checks li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  align-items: start;
}
.wfl-checks .wfl-check-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--tint);
  color: var(--primary);
}
.wfl-checks .wfl-icon { width: 16px; height: 16px; }
.wfl-checks b {
  display: block;
  font-size: 0.975rem;
  font-weight: 600;
}
.wfl-checks li > span:last-child > span {
  display: block;
  margin-top: 2px;
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------- 12. INBOX MOCK ---------- */
.wfl-mock {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.wfl-mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.wfl-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.wfl-mock-title {
  margin-left: var(--s-2);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}
.wfl-mock-body { display: grid; grid-template-columns: 1fr; }
.wfl-mock-list {
  display: none;
  padding: var(--s-2);
  gap: var(--s-1);
  align-content: start;
  border-right: 1px solid var(--border);
}
.wfl-mock-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2);
  border-radius: var(--r-sm);
}
.wfl-mock-row.is-active { background: var(--surface-2); }
.wfl-mock-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.wfl-mock-row strong,
.wfl-mock-row small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wfl-mock-row strong { font-size: 0.82rem; font-weight: 600; }
.wfl-mock-row small { font-size: 0.72rem; color: var(--text-muted); }
.wfl-mock-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.68rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.wfl-mock-thread {
  padding: var(--s-4);
  display: grid;
  gap: var(--s-2);
  align-content: start;
  min-height: 260px;
  background: var(--bg);
}
.wfl-msg {
  max-width: 80%;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border-top-left-radius: 4px;
  font-size: 0.83rem;
  line-height: 1.45;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.wfl-msg.out {
  justify-self: end;
  background: var(--bubble-out);
  border-color: transparent;
  border-top-left-radius: var(--r-md);
  border-top-right-radius: 4px;
}
.wfl-msg time {
  display: block;
  margin-top: 2px;
  text-align: right;
  font-size: 0.66rem;
  color: var(--text-muted);
}
.wfl-msg-tag {
  display: inline-block;
  margin-bottom: var(--s-1);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ---------- 13. BROADCAST PANEL ---------- */
.wfl-panel {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 24px 56px -16px rgba(0, 0, 0, 0.5);
}
.wfl-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.wfl-panel-head b { font-family: var(--font-display); font-size: 1rem; font-weight: 650; }
.wfl-tagpill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fcd34d;
  font-size: 0.75rem;
  font-weight: 600;
}
.wfl-tagpill.ok { background: var(--tint); border-color: rgba(61, 220, 132, 0.3); color: var(--primary); }

.wfl-meter { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.wfl-meter-row { display: grid; gap: var(--s-2); }
.wfl-meter-lab {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.wfl-meter-lab b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.wfl-meter-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
/* scaleX, not width → GPU-only fill animation on reveal */
.wfl-meter-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--primary);
  transform-origin: left;
  transform: scaleX(calc(var(--wfl-val-n, 0.5)));
  transition: transform 1100ms var(--ease-out) 250ms;
}
.wfl-meter-fill.warn { background: #fbbf24; }
.wfl-meter-fill.dim { background: rgba(255, 255, 255, 0.28); }
html.wfl-js .wfl-reveal:not(.is-in) .wfl-meter-fill { transform: scaleX(0); }

.wfl-panel-foot {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.wfl-panel-foot .wfl-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--primary); }

/* ---------- 14. STEPS ---------- */
.wfl-steps {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
  counter-reset: wfl-step;
}
.wfl-step {
  position: relative;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg);
}
.wfl-step::before {
  counter-increment: wfl-step;
  content: counter(wfl-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.wfl-step h3 { margin-top: var(--s-3); font-size: 1.075rem; }
.wfl-step p {
  margin-top: var(--s-2);
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- 15. FAQ (accordion) ---------- */
.wfl-faq {
  margin-top: var(--s-6);
  max-width: 760px;
  border-top: 1px solid var(--border);
}
.wfl-qa { border-bottom: 1px solid var(--border); }
.wfl-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 64px;
  padding: var(--s-4) 0;
  font-family: var(--font-display);
  font-size: 1.025rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--ease);
}
.wfl-qa summary::-webkit-details-marker { display: none; }
.wfl-qa summary:hover { color: var(--primary); }
.wfl-qa summary .wfl-icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform var(--t-med) var(--ease-out);
}
.wfl-qa[open] summary .wfl-icon { transform: rotate(45deg); color: var(--primary); }
.wfl-qa-body {
  padding: 0 var(--s-6) var(--s-5) 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 64ch;
}
.wfl-qa[open] .wfl-qa-body { animation: wfl-fade-down var(--t-med) var(--ease-out); }

/* ---------- 16. FINAL CTA ---------- */
.wfl-cta-wrap { padding-block: var(--s-6) clamp(4rem, 3rem + 4vw, 6rem); }
.wfl-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  background: #0c1411;
  background-image:
    radial-gradient(50% 80% at 50% 0%, rgba(61, 220, 132, 0.16), transparent 70%);
  box-shadow: var(--shadow-lg);
}
@media (prefers-color-scheme: dark) {
  .wfl-cta { background-color: #0f1a15; border: 1px solid #1f2b25; }
}
.wfl-cta h2 {
  margin-inline: auto;
  max-width: 18ch;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  letter-spacing: -0.03em;
}
.wfl-cta p {
  margin: var(--s-4) auto 0;
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.wfl-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* ---------- 17. FOOTER ---------- */
.wfl-foot {
  --wfl-foot-end: #d7e4dc;
  border-top: 1px solid var(--border);
  background:
    linear-gradient(
      180deg,
      var(--surface) 0%,
      var(--surface) 48%,
      color-mix(in srgb, var(--surface) 55%, var(--wfl-foot-end) 100%) 78%,
      var(--wfl-foot-end) 100%
    );
  padding: var(--s-7) 0 0;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .wfl-foot {
    --wfl-foot-end: #010403;
    background:
      linear-gradient(
        180deg,
        var(--surface) 0%,
        var(--surface) 36%,
        #0a100e 68%,
        var(--wfl-foot-end) 100%
      );
  }
}
.wfl-foot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}
.wfl-foot-about { grid-column: 1 / -1; }
.wfl-foot-about p {
  margin-top: var(--s-3) !important;
  max-width: 28rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.wfl-foot h4 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
.wfl-foot ul {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.wfl-foot ul a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.wfl-foot ul a:hover { color: var(--text); }
.wfl-foot-base {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-5);
  font-size: 0.825rem;
  color: var(--text-muted);
}
.wfl-foot-meta {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}
.wfl-foot-meta img {
  height: 56px;
  width: auto;
  max-width: min(200px, 48vw);
  object-fit: contain;
  object-position: left center;
  border-radius: 8px;
}
/* dark mark on light theme; light mark on dark theme (specificity > .wfl-foot-meta img) */
.wfl-foot-meta img.wfl-foot-meta-light { display: none; }
.wfl-foot-meta img.wfl-foot-meta-dark { display: block; }
@media (prefers-color-scheme: dark) {
  .wfl-foot-meta img.wfl-foot-meta-dark { display: none; }
  .wfl-foot-meta img.wfl-foot-meta-light { display: block; }
  .wfl-foot-base { color: #a9b6b0; }
  .wfl-foot-base .wfl-foot-legal { color: #c5d0cb; }
}
.wfl-foot-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  margin-left: auto;
  min-width: 0;
  text-align: right;
  line-height: 1.45;
  color: #3f4f48;
}
.wfl-foot-brand {
  margin-top: var(--s-5);
  padding-inline: var(--gutter);
  padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.wfl-foot-mark {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 18vw, 12.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: transparent;
  background-image: linear-gradient(
    180deg,
    var(--primary) 0%,
    var(--primary) 42%,
    color-mix(in srgb, var(--primary) 40%, var(--wfl-foot-end) 100%) 78%,
    var(--wfl-foot-end) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .wfl-foot-base { align-items: flex-start; }
  .wfl-foot-legal { align-items: flex-start; text-align: left; margin-left: 0; width: 100%; }
  .wfl-foot-meta img { height: 48px; }
  .wfl-foot-brand { margin-top: var(--s-4); }
  .wfl-foot-mark { font-size: clamp(3.75rem, 26vw, 6.5rem); }
}

/* ---------- 18. PRICING ---------- */
.wfl-pricing-hero { text-align: center; }
.wfl-pricing-hero .wfl-shell { padding-block: var(--s-7) var(--s-5); }
.wfl-pricing-hero .wfl-h1,
.wfl-pricing-hero .wfl-lede { margin-inline: auto; }
.wfl-pricing-hero .wfl-h1 { max-width: 16ch; }
.wfl-pricing-hero .wfl-pill { animation: wfl-rise var(--t-slow) var(--ease-out) both; }
.wfl-pricing-hero .wfl-h1   { animation: wfl-rise var(--t-slow) var(--ease-out) 80ms both; }
.wfl-pricing-hero .wfl-lede { animation: wfl-rise var(--t-slow) var(--ease-out) 160ms both; }

.wfl-pricing-sec { padding-top: var(--s-6); }

/* centred row that works for 1–4 plans */
.wfl-pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--s-5);
}

.wfl-price-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex: 1 1 250px;
  max-width: 380px;
  padding: var(--s-6) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition:
    translate var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}
@media (hover: hover) {
  .wfl-price-card:hover {
    translate: 0 -6px;
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
  }
}

/* featured: always-dark card with a slowly orbiting glow border */
.wfl-price-card.is-featured {
  --surface: #0f1714;
  --surface-2: rgba(255, 255, 255, 0.06);
  --text: #eef3f0;
  --text-muted: #a9b6b0;
  --primary: #3ddc84;
  --primary-hover: #66e6a0;
  --on-primary: #03140b;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --tint: rgba(61, 220, 132, 0.12);
  color: var(--text);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(61, 220, 132, 0.16), transparent 60%),
    var(--surface);
  border-color: transparent;
  box-shadow: 0 30px 60px -24px rgba(8, 40, 24, 0.55);
  overflow: hidden;
}
@media (min-width: 768px) {
  .wfl-price-card.is-featured { translate: 0 -12px; }
  .wfl-price-card.is-featured:hover { translate: 0 -18px; }
}
/* orbiting light: a big conic square spun with transform, masked to a 1.5px ring */
.wfl-price-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  overflow: hidden;
  pointer-events: none;
}
.wfl-price-glow::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(61, 220, 132, 0.15) 65%, #3ddc84 78%, #b8ffd7 82%, transparent 92%);
  animation: wfl-orbit 6s linear infinite;
}
.wfl-price-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
}

.wfl-price-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.wfl-price-name { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.wfl-price-term {
  display: inline-block;
  margin-top: var(--s-1);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}
.wfl-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 28px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
}
.wfl-price-badge .wfl-icon { width: 14px; height: 14px; }
.wfl-price-badge-alt {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.wfl-price-desc {
  margin-top: var(--s-3) !important;
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--text-muted);
}
/* 3 lines: keeps prices aligned when cards sit side by side */
@media (min-width: 640px) { .wfl-price-desc { min-height: 4.65em; } }

.wfl-price-amount { margin-top: var(--s-5); }
.wfl-price-now {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.wfl-price-now strong {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.wfl-price-now > span { font-size: 0.925rem; color: var(--text-muted); }
.wfl-price-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  min-height: 26px;
  margin-top: var(--s-3);
  font-size: 0.85rem;
}
.wfl-price-was { color: var(--text-muted); text-decoration: line-through; }
.wfl-price-save {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.75rem;
  font-weight: 700;
}
.wfl-price-pm { color: var(--text-muted); }

.wfl-price-cta { margin-top: var(--s-5); }
.wfl-price-cta .wfl-btn { width: 100%; min-height: 50px; }
.is-featured .wfl-price-cta .wfl-btn-primary {
  box-shadow: 0 10px 30px -10px rgba(61, 220, 132, 0.6);
}

.wfl-price-incl {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}
.wfl-price-features {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.wfl-price-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: 0.925rem;
  line-height: 1.5;
}
.wfl-price-tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--primary);
}
.wfl-price-tick .wfl-icon { width: 12px; height: 12px; stroke-width: 3; }

/* features tick in one by one once the card is revealed */
html.wfl-js .wfl-price-card.wfl-reveal .wfl-price-features li {
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 400ms var(--ease-out),
    transform 400ms var(--ease-out);
  transition-delay: calc(350ms + var(--i, 0) * 70ms);
}
html.wfl-js .wfl-price-card.wfl-reveal.is-in .wfl-price-features li { opacity: 1; transform: none; }
html.wfl-js .wfl-price-card.wfl-reveal.is-in .wfl-price-tick {
  animation: wfl-tick-pop 420ms var(--ease-out) both;
  animation-delay: calc(400ms + var(--i, 0) * 70ms);
}

.wfl-pricing-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-6);
  margin: var(--s-7) auto 0;
  padding: var(--s-5) 0 0;
  max-width: 900px;
  border-top: 1px solid var(--border);
  list-style: none;
}
.wfl-pricing-trust li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.wfl-pricing-trust .wfl-icon { width: 18px; height: 18px; color: var(--primary); }

@keyframes wfl-orbit { to { transform: rotate(1turn); } }
@keyframes wfl-tick-pop {
  0%   { transform: scale(0.4); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ---------- 19. LEGAL ---------- */
.wfl-legal-hero { border-bottom: 1px solid var(--border); }
.wfl-legal-hero .wfl-shell {
  max-width: calc(760px + 2 * var(--gutter));
  padding-block: var(--s-7) var(--s-6);
}
.wfl-legal-hero .wfl-h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); max-width: 20ch; }
.wfl-legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4) !important;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.wfl-legal-sec { padding-block: var(--s-6) var(--s-8); }
.wfl-legal {
  max-width: calc(760px + 2 * var(--gutter)) !important;
  font-size: 1rem;
  line-height: 1.75;
}
.wfl-legal a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wfl-legal a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.wfl-legal .intro p { margin: 0 0 var(--s-4); }
.wfl-legal .toc,
.wfl-legal .sample,
.wfl-legal .contact-block {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.wfl-legal .toc h2 { font-size: 0.95rem; margin-bottom: var(--s-3); }
.wfl-legal .toc ol { margin: 0; padding-left: 1.25rem; }
@media (min-width: 640px) { .wfl-legal .toc ol { columns: 2; column-gap: var(--s-6); } }
.wfl-legal .toc li {
  break-inside: avoid;
  padding-block: 2px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.wfl-legal .toc a { text-decoration: none; }
.wfl-legal .toc a:hover { text-decoration: underline; }
.wfl-legal .section {
  margin-bottom: var(--s-7);
  scroll-margin-top: calc(var(--head-h) + var(--s-5));
}
.wfl-legal .section h2 { font-size: 1.3rem; margin-bottom: var(--s-3); }
.wfl-legal .section h3 { font-size: 1.05rem; margin: var(--s-5) 0 var(--s-2); }
.wfl-legal .section p { margin: 0 0 var(--s-4); }
.wfl-legal .section ul,
.wfl-legal .section ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
.wfl-legal .section li { margin-bottom: var(--s-2); }
.wfl-legal .section li::marker { color: var(--text-muted); }
.wfl-legal .sample { font-size: 0.9rem; white-space: pre-wrap; line-height: 1.6; }
.wfl-legal .contact-block p { margin: 0 0 var(--s-2); }
.wfl-legal .page-foot {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.wfl-legal .page-foot-links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }

/* ---------- 20. SKELETON (shimmer placeholder for async blocks) ---------- */
.wfl-skel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: transparent !important;
}
.wfl-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
  animation: wfl-shimmer 1.4s var(--ease) infinite;
}

/* ---------- 21. MOTION ---------- */
@keyframes wfl-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wfl-fade-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wfl-ping {
  0%       { transform: scale(1); opacity: 0.6; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}
@keyframes wfl-shimmer { to { transform: translateX(100%); } }

/* Scroll reveal — only hidden when JS is running */
html.wfl-js .wfl-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: var(--wfl-delay, 0ms);
}
html.wfl-js .wfl-reveal.is-in { opacity: 1; transform: none; }
/* tiles lift on hover without waiting for the reveal delay */
html.wfl-js .wfl-reveal.is-in.wfl-tile,
html.wfl-js .wfl-reveal.is-in.wfl-price-card {
  transition:
    opacity var(--t-slow) var(--ease-out) var(--wfl-delay, 0ms),
    transform var(--t-slow) var(--ease-out) var(--wfl-delay, 0ms),
    translate var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

/* ---------- 22. RESPONSIVE (min-width only) ---------- */
@media (min-width: 640px) {
  .wfl-band-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wfl-band-cell { border-bottom: 0; border-right: 1px solid var(--border); padding-inline: var(--s-5); }
  .wfl-band-cell:last-child { border-right: 0; }
  .wfl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wfl-mock-body { grid-template-columns: 200px minmax(0, 1fr); }
  .wfl-mock-list { display: grid; }
  .wfl-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wfl-hero-visual .wf-phone { height: 460px; }
}

@media (min-width: 768px) {
  .wfl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wfl-foot-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
  .wfl-foot-about { grid-column: auto; }
  .wfl-cta { padding: var(--s-8) var(--s-7); }
  .wfl-panel { padding: var(--s-6); }
}

@media (min-width: 1024px) {
  .wfl-nav, .wfl-head-cta { display: flex; }
  .wfl-burger, .wfl-drawer { display: none; }
  .wfl-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    padding-block: var(--s-8) clamp(4rem, 8vw, 7rem);
  }
  .wfl-hero-visual .wf-phone { height: 540px; }
  .wfl-chip { display: flex; }
  .wfl-head-row-2 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-7); }
  .wfl-head-row-2 .wfl-sub { margin-top: 0 !important; }
  .wfl-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wfl-span-3 { grid-column: span 3; }
  .wfl-span-2 { grid-column: span 2; }
  .wfl-tile-lead { padding: var(--s-6); }
  .wfl-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-8); }
  .wfl-split-flip > *:first-child { order: 2; }
  .wfl-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .wfl-nav { gap: var(--s-2); }
}

/* phones: stack CTAs full-width */
@media (max-width: 479px) {
  .wfl-hero-cta .wfl-btn,
  .wfl-cta-row .wfl-btn { width: 100%; }
}

/* ---------- 23. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wfl *, .wfl *::before, .wfl *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  html.wfl-js .wfl-reveal { opacity: 1; transform: none; }
  .wfl-pill-dot::after { display: none; }
  .wf-bubble { opacity: 1 !important; }
}

/* ==========================================================================
   24. iPHONE MOCKUP  (partials/wf-phone-mock.blade.php)
   Parent rules set only the height; everything inside is sized in cqh
   (percent of phone height) so the device scales as one piece.
   Height, position and entrance animation stay with the parent context.
   ========================================================================== */
.wf-phone.ip {
  /* screen palette: WhatsApp for iOS, light */
  --ip-bg: #efeae2;
  --ip-bar: rgba(246, 246, 246, 0.94);
  --ip-bar-line: rgba(0, 0, 0, 0.12);
  --ip-text: #111b21;
  --ip-sub: #667781;
  --ip-in: #ffffff;
  --ip-out: #d9fdd3;
  --ip-link: #007aff;
  --ip-tick: #53bdeb;
  --ip-doodle: rgba(0, 0, 0, 0.045);
  --ip-field: #ffffff;
  --ip-tag: #1a8a5a;

  container-type: size;
  aspect-ratio: 71.5 / 147;
  width: auto;
  max-height: none;
  /* cqh on this element resolves against the page, not the phone,
     so the frame is drawn on .ip-screen instead */
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  flex: 0 0 auto;
  background: none;
  box-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif;
  color: var(--ip-text);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  .wf-phone.ip {
    /* WhatsApp for iOS, dark */
    --ip-bg: #0b141a;
    --ip-bar: rgba(22, 27, 31, 0.94);
    --ip-bar-line: rgba(255, 255, 255, 0.10);
    --ip-text: #e9edef;
    --ip-sub: #8696a0;
    --ip-in: #202c33;
    --ip-out: #005c4b;
    --ip-link: #0a84ff;
    --ip-doodle: rgba(255, 255, 255, 0.035);
    --ip-field: #2a3942;
    --ip-tag: #7ee0b0;
    --ip-shadow: 0 28px 50px -20px rgba(0, 0, 0, 0.8);
  }
}

/* side hardware */
.wf-phone.ip .ip-btn {
  position: absolute;
  width: 0.5cqh;
  border-radius: 0.3cqh;
  background: linear-gradient(90deg, #1d1d1f, #55555a 60%, #2a2a2d);
}
.wf-phone.ip .ip-action   { left: -1cqh; top: 16%; height: 3.6cqh; }
.wf-phone.ip .ip-vol-up   { left: -1cqh; top: 23%; height: 6.4cqh; }
.wf-phone.ip .ip-vol-down { left: -1cqh; top: 31%; height: 6.4cqh; }
.wf-phone.ip .ip-power    { right: -1cqh; top: 25%; height: 9.8cqh; }

/* glass: black bezel + screen */
.wf-phone.ip .ip-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6.8cqh;
  border: 1.35cqh solid #000;
  /* titanium frame as rings hugging the glass: frame, lit edge, outline, drop shadow */
  box-shadow:
    0 0 0 0.5cqh #2b2b2e,
    0 0 0 0.62cqh #6a6a6f,
    0 0 0 0.72cqh rgba(0, 0, 0, 0.35),
    var(--ip-shadow, 0 28px 50px -20px rgba(16, 24, 20, 0.45));
  background-color: var(--ip-bg);
  background-image:
    radial-gradient(circle at 20% 30%, var(--ip-doodle) 0 0.5cqh, transparent 0.55cqh),
    radial-gradient(circle at 70% 70%, var(--ip-doodle) 0 0.35cqh, transparent 0.4cqh),
    radial-gradient(circle at 85% 20%, var(--ip-doodle) 0 0.25cqh, transparent 0.3cqh);
  background-size: 9cqh 9cqh;
}
/* subtle glass reflection */
.wf-phone.ip .ip-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, transparent 28%);
}

.wf-phone.ip .ip-island {
  position: absolute;
  top: 1.1cqh;
  left: 50%;
  z-index: 10;
  width: 29%;
  height: 3.4cqh;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

/* status bar */
.wf-phone.ip .ip-status {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.6cqh;
  padding: 0.5cqh 6.2cqh 0 7.2cqh;
  background: var(--ip-bar);
  color: var(--ip-text);
}
.wf-phone.ip .ip-clock { font-size: 1.95cqh; font-weight: 600; letter-spacing: -0.02em; }
.wf-phone.ip .ip-sys { display: flex; align-items: center; gap: 0.7cqh; }
.wf-phone.ip .ip-signal { width: 2.1cqh; height: 1.35cqh; fill: currentColor; }
.wf-phone.ip .ip-wifi   { width: 1.95cqh; height: 1.45cqh; fill: currentColor; }
.wf-phone.ip .ip-battery {
  position: relative;
  display: block;
  width: 3cqh;
  height: 1.4cqh;
  padding: 0.22cqh;
  border: 0.14cqh solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 0.45cqh;
}
.wf-phone.ip .ip-battery::after {
  content: "";
  position: absolute;
  right: -0.45cqh;
  top: 50%;
  width: 0.25cqh;
  height: 0.55cqh;
  transform: translateY(-50%);
  border-radius: 0 0.2cqh 0.2cqh 0;
  background: color-mix(in srgb, currentColor 40%, transparent);
}
.wf-phone.ip .ip-battery span {
  display: block;
  width: 80%;
  height: 100%;
  border-radius: 0.2cqh;
  background: currentColor;
}

/* chat header */
.wf-phone.ip .ip-head {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.9cqh;
  padding: 0.6cqh 1.6cqh 1cqh 1.3cqh;
  background: var(--ip-bar);
  border-bottom: 0.1cqh solid var(--ip-bar-line);
}
.wf-phone.ip .ip-back { width: 1.2cqh; height: 2.1cqh; color: var(--ip-link); flex: none; }
.wf-phone.ip .ip-count { margin-left: -0.3cqh; font-size: 1.8cqh; color: var(--ip-link); }
.wf-phone.ip .ip-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.2cqh;
  height: 4.2cqh;
  margin-left: 0.3cqh;
  border-radius: 50%;
  background: linear-gradient(135deg, #f6a57a, #e2576c);
  color: #fff;
  font-size: 1.8cqh;
  font-weight: 600;
}
.wf-phone.ip .ip-who { flex: 1; min-width: 0; line-height: 1.15; }
.wf-phone.ip .ip-who b {
  display: block;
  font-size: 1.8cqh;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-phone.ip .ip-who small { display: block; font-size: 1.35cqh; color: var(--ip-sub); }
.wf-phone.ip .ip-act { width: 2.5cqh; height: 2.5cqh; color: var(--ip-link); flex: none; margin-left: 0.8cqh; }

/* conversation */
.wf-phone.ip .ip-chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.7cqh;
  padding: 1.2cqh 1.5cqh 1.4cqh;
  overflow: hidden;
}
.wf-phone.ip .ip-day {
  align-self: center;
  margin-bottom: auto;
  padding: 0.4cqh 1.2cqh;
  border-radius: 0.9cqh;
  background: var(--ip-in);
  box-shadow: 0 0.1cqh 0.2cqh rgba(0, 0, 0, 0.08);
  color: var(--ip-sub);
  font-size: 1.3cqh;
  font-weight: 500;
}
.wf-phone.ip .ip-msg {
  position: relative;
  max-width: 78%;
  padding: 0.75cqh 1.1cqh 0.6cqh;
  border-radius: 1.4cqh;
  font-size: 1.95cqh;
  line-height: 1.3;
  box-shadow: 0 0.1cqh 0.15cqh rgba(0, 0, 0, 0.10);
  opacity: 0;
  animation: ip-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wf-phone.ip .ip-msg.in  { align-self: flex-start; background: var(--ip-in); }
.wf-phone.ip .ip-msg.out { align-self: flex-end; background: var(--ip-out); }
.wf-phone.ip .ip-msg.in.tail  { border-bottom-left-radius: 0.3cqh; }
.wf-phone.ip .ip-msg.out.tail { border-bottom-right-radius: 0.3cqh; }
/* bubble tails */
.wf-phone.ip .ip-msg.tail::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1.2cqh;
  height: 1.3cqh;
  background: inherit;
}
.wf-phone.ip .ip-msg.in.tail::before  { left: -0.8cqh;  clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.wf-phone.ip .ip-msg.out.tail::before { right: -0.8cqh; clip-path: polygon(0 0, 100% 100%, 0 100%); }

.wf-phone.ip .ip-tag {
  display: block;
  margin-bottom: 0.25cqh;
  font-size: 1.3cqh;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ip-tag);
}
.wf-phone.ip .ip-meta {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 0.3cqh;
  margin: 0.55cqh 0 -0.2cqh 1cqh;
  font-size: 1.3cqh;
  color: var(--ip-sub);
  white-space: nowrap;
}
.wf-phone.ip .ip-ticks { width: 1.6cqh; height: 1.1cqh; color: var(--ip-tick); }

/* typing indicator */
.wf-phone.ip .ip-typing {
  align-self: flex-start;
  display: flex;
  gap: 0.45cqh;
  padding: 1.1cqh 1.3cqh;
  border-radius: 1.4cqh;
  background: var(--ip-in);
  box-shadow: 0 0.1cqh 0.15cqh rgba(0, 0, 0, 0.10);
  opacity: 0;
  animation: ip-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wf-phone.ip .ip-typing i {
  width: 0.75cqh;
  height: 0.75cqh;
  border-radius: 50%;
  background: var(--ip-sub);
  animation: ip-dot 1.2s ease-in-out infinite;
}
.wf-phone.ip .ip-typing i:nth-child(2) { animation-delay: 0.15s; }
.wf-phone.ip .ip-typing i:nth-child(3) { animation-delay: 0.3s; }

/* staged message entrance */
.wf-phone.ip .ip-m1 { animation-delay: 0.5s; }
.wf-phone.ip .ip-m2 { animation-delay: 1.0s; }
.wf-phone.ip .ip-m3 { animation-delay: 1.5s; }
.wf-phone.ip .ip-m4 { animation-delay: 2.0s; }
.wf-phone.ip .ip-m5 { animation-delay: 2.5s; }
.wf-phone.ip .ip-m6 { animation-delay: 3.1s; }

/* composer */
.wf-phone.ip .ip-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.2cqh;
  padding: 0.9cqh 1.6cqh 4cqh;
  background: var(--ip-bar);
  border-top: 0.1cqh solid var(--ip-bar-line);
  color: var(--ip-link);
}
.wf-phone.ip .ip-ico { width: 2.5cqh; height: 2.5cqh; flex: none; }
.wf-phone.ip .ip-field {
  flex: 1;
  height: 3.3cqh;
  border-radius: 999px;
  background: var(--ip-field);
  border: 0.1cqh solid var(--ip-bar-line);
}

.wf-phone.ip .ip-home {
  position: absolute;
  bottom: 1cqh;
  left: 50%;
  z-index: 10;
  width: 36%;
  height: 0.55cqh;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--ip-text);
  opacity: 0.85;
}

@keyframes ip-pop {
  from { opacity: 0; transform: translateY(1cqh) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes ip-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-0.5cqh); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-phone.ip .ip-msg,
  .wf-phone.ip .ip-typing { animation: none; opacity: 1; }
  .wf-phone.ip .ip-typing i { animation: none; }
}