PageSourceSearch

https://wisdomrecall.com/for/influencer-guide

html wisdomrecall.com collected 2026-10-02 01:48:37 UTC 143,606 bytes, 2,808 lines download raw bytes

1<!doctype html>
2<html lang="en" data-theme="light">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<link rel="icon" href="/favicon.ico" sizes="any" />
7<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
8<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
9<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png" />
10<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512.png" />
11<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
12<title>Become a Wisdom Recall Guide - Founding Influencer Program</title>
13<meta name="description" content="The algorithm owns your audience. Take them with you. Become a Founding Wisdom Recall Guide.">
14<link rel="canonical" href="https://wisdomrecall.com/for/influencer-guide">
15
16<meta property="og:type" content="website">
17<meta property="og:site_name" content="Wisdom Recall">
18<meta property="og:url" content="https://wisdomrecall.com/for/influencer-guide">
19<meta property="og:title" content="Become a Wisdom Recall Guide - Founding Influencer Guide Program">
20<meta property="og:description" content="The algorithm owns your audience. Take them with you. Become a Founding Wisdom Recall Guide.">
21<meta property="og:image" content="https://wisdomrecall.com/assets/branding/og-image.png">
22<meta property="og:image:width" content="1200">
23<meta property="og:image:height" content="630">
24<meta name="twitter:card" content="summary_large_image">
25<meta name="twitter:title" content="Become a Wisdom Recall Guide - Founding Influencer Guide Program">
26<meta name="twitter:description" content="The algorithm owns your audience. Take them with you. Become a Founding Wisdom Recall Guide.">
27<meta name="twitter:image" content="https://wisdomrecall.com/assets/branding/og-image.png">
28
29<!--
30  Wow build, commit-then-translate. Sibling of for/creators.html.
31  vibe: Editorial Archive - a paper-and-ink dossier of historical Guides.
32  palette: pinned - paper/ink/cyan/gold/dark-stage (creators token system).
33  fonts: pinned - Outfit (display) + Plus Jakarta Sans (body).
34  composition: 5-block spine - hero, fear, solution, offer, apply.
35  Rebuild note (2026-07-24, second pass): removed §03 Proof (laptop
36  scene + 3-node flow) per direction; offer and apply renumbered
37  03 and 04. Solution (§02) rebuilt as a 3-column platform-attention
38  -> Guide -> owned-relationship composition.
39  weirdness: the one open plate in the wall - the empty Guide plate in
40  the Apply section, canted a few degrees, dashed gold outline, the
41  single unfilled slot the reader is meant to imagine themselves into.
42  Rebuild note (2026-07-24): collapsed the prior 12-section mechanic
43  essay down to the two questions a reader has left after hero/fear/
44  solution - does this work, is buying it safe - answered by a proof
45  moment (§03) and a risk-reversed offer (§04), then one close (§05).
46-->
47
48<link rel="stylesheet" href="/for/influencer-guide-lab.theme.css">
49<link rel="preconnect" href="https://fonts.googleapis.com">
50<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
51<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Plus+Jakarta+Sans:[email protected]&display=swap">
52
53<style>
54    /* WR:HEADER:CSS:START */
55/* Single-source site header CSS. Synced into each page's first <style>
56   between the WR:HEADER:CSS markers by scripts/sync-header.py. Do NOT edit
57   the copy inside a page; edit here and re-run sync.
58
59   Self-contained: consumes page layout tokens (--ink, --rule, --accent,
60   --muted, --bg-canvas, --bg-white, --accent-text, --accent-soft,
61   --font-body, --ease-ios) but ships its OWN signup-button color (hardcoded
62   teal) so it never depends on page .btn-primary or --cta-fill*. */
63
64/* NAV
65   Tinted from --bg-canvas, not --bg-white, so the bar reads as the page
66   showing through rather than as a separate white band. The literal
67   rgba() lines above each color-mix() are the no-color-mix fallback and
68   must be kept in step with the canvas values in the page :root blocks. */
69.nav {
70  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
71  background: rgba(245,245,243,0.78);
72  background: color-mix(in srgb, var(--bg-canvas, #f5f5f3) 78%, transparent);
73  backdrop-filter: saturate(160%) blur(14px);
74  -webkit-backdrop-filter: saturate(160%) blur(14px);
75  border-bottom: 1px solid var(--rule);
76}
77[data-theme="dark"] .nav {
78  background: rgba(25,25,25,0.78);
79  background: color-mix(in srgb, var(--bg-canvas, #191919) 78%, transparent);
80}
81.nav-inner {
82  max-width: 1440px; margin: 0 auto;
83  padding: 14px 48px;
84  display: flex; align-items: center; justify-content: space-between;
85}
86.wordmark {
87  display: inline-flex; align-items: center;
88  text-decoration: none;
89}
90.wordmark img { display: block; height: 68px; width: auto; }
91.wordmark .logo-dark { display: none; }
92[data-theme="dark"] .wordmark .logo-light { display: none; }
93[data-theme="dark"] .wordmark .logo-dark { display: block; }
94/* Share-style mark + wordmark lockup */
95.vlockup {
96  display: inline-flex; align-items: center; gap: 8px;
97  font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
98  font-size: 22px; color: var(--ink); text-decoration: none;
99}
100.vlockup .mark { height: 25px; width: auto; display: block; }
101.vlockup .mark--light { display: block; }
102.vlockup .mark--dark { display: none; }
103[data-theme="dark"] .vlockup .mark--light { display: none; }
104[data-theme="dark"] .vlockup .mark--dark { display: block; }
105.vlockup .wm {
106  display: inline-flex; align-items: baseline; gap: 0.12em;
107  font-family: Outfit, system-ui, sans-serif;
108  font-size: 22px; letter-spacing: -0.04em; line-height: 0.95;
109  color: var(--ink);
110}
111.vlockup .wm .w1 { font-weight: 500; }
112.vlockup .wm .w2 { font-weight: 100; }
113.vlockup .wm sup {
114  font-size: 0.45em; vertical-align: super; margin-left: 0.08em;
115  font-weight: 400; position: relative; top: -0.95em;
116}
117.nav-links { display:flex; gap: 28px; align-items: center; font-size: 14px; color: var(--muted); flex: 1; justify-content: center; }
118.nav-links a { text-decoration:none; color: inherit; transition: color .2s; }
119.nav-links a:hover { color: var(--ink); }
120.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
121.nav-drawer__links a[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
122.nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: 20px; }
123/* "Meet the Guides" flair pill */
124.nav-links a.nav-guides {
125  display: inline-flex; align-items: center; gap: 0; white-space: nowrap;
126  padding: 7px 15px; border-radius: 999px; font-weight: 600;
127  color: var(--accent-text);
128  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
129  background: color-mix(in srgb, var(--accent) 9%, transparent);
130  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
131}
132.nav-links a.nav-guides svg { width: 14px; height: 14px; flex-shrink: 0; margin-right: 7px; }
133.nav-links a.nav-guides:hover {
134  color: var(--accent-text);
135  background: color-mix(in srgb, var(--accent) 16%, transparent);
136  border-color: var(--accent);
137  transform: translateY(-1px);
138  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent);
139}
140.theme-btn {
141  background: transparent; border: 1px solid var(--muted);
142  width: 44px; height: 44px; border-radius: 50%;
143  display: inline-flex; align-items: center; justify-content: center;
144  cursor: pointer; color: var(--ink); transition: border-color .2s;
145}
146.theme-btn:hover { border-color: var(--ink); }
147
148/* Signup CTA. Self-contained button styling + hardcoded teal so the header
149   never inherits page .btn-primary / --cta-fill. Combines the old .btn base
150   with .btn-primary sizing/color. */
151.nav-cta {
152  font-family: var(--font-body);
153  font-weight: 600; font-size: 15.5px;
154  text-decoration: none; padding: 14px 26px;
155  border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
156  transition: transform .25s var(--ease-ios), box-shadow .25s, background .2s;
157  cursor: pointer; border: 0;
158  background: #0e7490;
159  color: #fff !important;
160  box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset;
161}
162.nav-cta:hover { background: #155e75; transform: translateY(-1px); color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset; }
163.nav-cta:visited { color: #fff !important; }
164.nav-cta--block { justify-content: center; text-align: center; }
165
166/* Log in. Text tier deliberately: it sits beside .nav-cta and must not
167   compete with it. Ships its own metrics like the rest of this file. */
168.nav-login {
169  font-family: var(--font-body);
170  font-size: 15px; font-weight: 600;
171  color: var(--muted); text-decoration: none;
172  white-space: nowrap;
173  display: inline-flex; align-items: center; gap: 6px;
174  transition: color .2s;
175}
176.nav-login:hover { color: var(--ink); }
177.nav-login svg { width: 15px; height: 15px; flex-shrink: 0; }
178
179/* Drawer footer login. Below 1060px .nav-actions is hidden, so this is the
180   only login path on phones. */
181.nav-drawer__login {
182  align-self: center;
183  font-size: 15px; font-weight: 600;
184  color: var(--muted); text-decoration: none;
185  padding: 4px 0;
186  transition: color .2s;
187}
188.nav-drawer__login:hover { color: var(--accent-text); }
189
190/* HAMBURGER + NAV DRAWER */
191.nav-hamburger {
192  display: none;
193  background: transparent; border: 1px solid var(--rule);
194  width: 44px; height: 44px; border-radius: 8px;
195  align-items: center; justify-content: center;
196  cursor: pointer; color: var(--ink);
197  padding: 0; flex-shrink: 0;
198  transition: border-color .2s;
199}
200.nav-hamburger:hover { border-color: var(--ink); }
201.nav-hamburger svg { display: block; }
202
203.nav-drawer {
204  position: fixed; inset: 0; z-index: 200;
205  background: var(--bg-white);
206  display: flex; flex-direction: column;
207  padding: 20px 24px;
208  gap: 0;
209  transform: translateY(-8px);
210  opacity: 0;
211  pointer-events: none;
212  transition: transform .25s var(--ease-ios), opacity .25s;
213  overflow-y: auto;
214}
215.nav-drawer[aria-hidden="false"] {
216  transform: none;
217  opacity: 1;
218  pointer-events: auto;
219}
220.nav-drawer__header {
221  display: flex; align-items: center; justify-content: space-between;
222  margin-bottom: 18px;
223}
224/* Account actions sit ABOVE the link list. With eight links at drawer scale
225   the old footer placement pushed Sign up to ~712px on a 390px-wide phone -
226   below the fold on any device with browser chrome - so the primary action
227   was reachable only by scrolling. */
228.nav-drawer__actions {
229  display: flex; flex-direction: column; gap: 12px;
230  margin-bottom: 22px;
231}
232.nav-drawer__close {
233  background: transparent; border: 1px solid var(--rule);
234  width: 44px; height: 44px; border-radius: 8px;
235  display: inline-flex; align-items: center; justify-content: center;
236  cursor: pointer; color: var(--ink);
237  transition: border-color .2s;
238  flex-shrink: 0;
239}
240.nav-drawer__close:hover { border-color: var(--ink); }
241.nav-drawer__links {
242  display: flex; flex-direction: column; gap: 0;
243  border-top: 1px solid var(--rule);
244}
245.nav-drawer__links a {
246  text-decoration: none; color: var(--ink);
247  font-size: 17px; font-weight: 600;
248  padding: 13px 0;
249  border-bottom: 1px solid var(--rule);
250  transition: color .2s;
251}
252.nav-drawer__links a:hover { color: var(--accent-text); }
253.nav-drawer__footer {
254  margin-top: 20px;
255  display: flex; flex-direction: column; gap: 16px;
256}
257.nav-drawer__theme {
258  display: flex; align-items: center; gap: 12px;
259  font-size: 14px; color: var(--muted);
260}
261
262@media (prefers-reduced-motion: reduce) {
263  .nav-drawer { transition: none; }
264}
265
266/* Laptop/landscape-tablet band (1061-1360). The 7-link nav plus the actions cluster does
267   not fit here at desktop metrics, so gaps, padding and the two right-hand
268   controls all tighten rather than clipping the CTA off the right edge. This
269   band was already ~11px short at 1061px before .nav-login was added; the
270   tighter values below buy back that plus the login link's width. Verify with
271   dev/experiments/nav-login-lab.html, which measures real overflow per width.
272   Below 1060px it collapses to the hamburger. */
273@media (max-width: 1360px) and (min-width: 1061px) {
274  .nav-inner { padding: 14px 20px; }
275  .nav-links { gap: 8px; font-size: 13.5px; }
276  .nav-links a.nav-guides { padding: 6px 9px; }
277  .nav-actions { gap: 8px; margin-left: 14px; }
278  .nav-login { font-size: 13.5px; gap: 5px; }
279  .nav-login svg { width: 14px; height: 14px; }
280  .nav-cta { padding: 12px 18px; font-size: 14px; }
281}
282
283@media (max-width: 1060px) {
284  .nav-inner { padding: 14px 24px; }
285  .nav-links a { display: none; }
286  .nav-links #wr-contact-nav-trigger { display: none; }
287  /* Push the nav-links group (the lone Guides icon, plus theme toggle on slim
288     pages) to the right edge so it sits beside the hamburger instead of
289     crowding the logo. */
290  .nav-links { gap: 8px; flex: 0; margin-left: auto; }
291  .nav-actions { display: none; }
292  .nav-hamburger { display: inline-flex; margin-left: 10px; }
293  /* Keep only the Guides control in the mobile header, collapsed to the
294     sparkles icon alone so it can't wrap and grow the fixed header (which was
295     cutting off the hero eyebrow). aria-label keeps it announced with text
296     hidden. Hidden on the Guides page itself (aria-current). */
297  .nav-links a.nav-guides { display: inline-flex; gap: 0; padding: 9px; }
298  .nav-links a.nav-guides svg { width: 18px; height: 18px; margin-right: 0; }
299  .nav-links a.nav-guides .nav-guides__pre,
300  .nav-links a.nav-guides .nav-guides__label { display: none; }
301  .nav-links a.nav-guides[aria-current="page"] { display: none; }
302}
303@media (max-width: 540px) {
304  .nav-inner { padding: 12px 16px; }
305  .wordmark img { height: 48px; }
306}
307    /* WR:HEADER:CSS:END */
308    /* WR:SPINE:CSS:START */
309/* Brand spine — the universal, quiet brand statement, placed after the hero and
310   before the first proof section on home + the three audience pages. Single source:
311   partials/site-spine.{html,css}, synced by scripts/sync-spine.py. Do NOT hand-edit
312   inside a page.
313
314   Per the brand pearl: one centered sentence, generous white space, no card / border /
315   rule / CTA, styled to match the standard .eh section-header treatment (weight 600,
316   --accent italic emphasis) so it reads as a confident category statement, not a
317   caption. Built only on tokens present on every page (--ink, --accent, --font-heading). */
318.brand-spine {
319  padding: clamp(5rem, 11vh, 8.5rem) clamp(24px, 6vw, 56px);
320  text-align: center;
321}
322.brand-spine__line {
323  margin: 0 auto;
324  max-width: 30ch;
325  font-family: var(--font-heading);
326  font-weight: 600;
327  font-size: clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
328  line-height: 1.06;
329  letter-spacing: -0.015em;
330  color: var(--ink);
331  text-wrap: balance;
332}
333.brand-spine__line em {
334  font-style: italic;
335  font-weight: 500;
336  color: var(--accent);
337  white-space: nowrap;
338}
339@media (max-width: 480px) {
340  .brand-spine__line {
341    font-size: clamp(1.6rem, 1.3rem + 3vw, 2.2rem);
342  }
343  .brand-spine__line em {
344    white-space: normal;
345  }
346}
347    /* WR:SPINE:CSS:END */
348:root {
349  --font-heading: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
350  --font-body: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
351  --font-editorial: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
352
353  --bg-white: #ffffff;
354  --bg-soft:  #fafaf8;
355  --bg-paper: #f5f5f3;
356  --bg-canvas: #f5f5f3;
357      --cta-fill: #0e7490;
358      --cta-fill-hover: #155e75;
359      --cta-fill-on: #ffffff;
360  --bg-raised:#ebebe8;
361  --ink:       #141830;
362  --ink-soft:  #2e3350;
363  --muted:     #5c6280;
364  --subtle:    #696d8b;
365  --dimmed:    #9498b2;
366  --rule: rgba(20,24,48,0.08);
367  --rule-strong: rgba(20,24,48,0.14);
368  --accent: #0891b2;
369  --accent-rgb: 8 145 178;
370  --accent-hover: #0e7490;
371  --accent-text: #0e7490;
372  --accent-light: color-mix(in srgb, var(--accent) 55%, white);
373
374  --stage:      #191919;
375  --stage-soft: #1f1f1f;
376  --stage-ink:  #E8E4F0;
377  --stage-mute: #8b8ea8;
378  --stage-rule: rgba(255,255,255,0.10);
379
380  --gold:       #0e7490;
381  --gold-soft:  rgb(8 145 178 / 0.14);
382  --gold-warm:  #0891b2;
383  --danger:     #c8322a;
384  /* WCAG-safe gold for body-size text/icons; --gold alone is ~2.85:1 on paper.
385     Mixing toward --ink darkens it in light mode and, because --ink flips
386     light in dark mode, brightens it further there too. */
387  --gold-ink: color-mix(in srgb, var(--gold) 65%, var(--ink) 35%);
388  /* fixed dark navy for photo-overlay legibility; must NOT flip with theme */
389  --ink-fixed: #141830;
390  --stage-card-fill: rgba(255,255,255,0.03);
391
392  --navy:       #1a2340;
393
394  --card-fill: var(--ink);
395  --card-ink: var(--bg-paper);
396
397  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
398
399  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
400  --step-0:  clamp(1.0rem, 0.95rem + 0.25vw, 1.125rem);
401  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
402  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.0rem);
403  --step-3:  clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
404  --step-4:  clamp(2.6rem, 2.0rem + 3.2vw, 5.0rem);
405  --step-5:  clamp(3.4rem, 2.4rem + 4.8vw, 6.8rem);
406}
407
408[data-theme="dark"] {
409  --bg-white:  #191919;
410  --bg-soft:   #1f1f1f;
411  --bg-paper:  #191919;
412  --bg-canvas: #191919;
413  --bg-raised: #2e2e2e;
414
415  --ink:       #E8E4F0;
416  --ink-soft:  #d4d4d8;
417  --muted:     #8b8ea8;
418  --subtle:    #7b7e98;
419  --dimmed:    #5a5d78;
420
421  --rule:        rgba(255,255,255,0.10);
422  --rule-strong: rgba(255,255,255,0.18);
423
424  --accent:       #06b6d4;
425  --accent-rgb:   6 182 212;
426  --accent-hover: #22d3ee;
427  --accent-text:  #67e8f9;
428  --accent-light: color-mix(in srgb, var(--accent) 55%, white);
429
430  --gold:      #22d3ee;
431  --gold-soft: rgb(34 211 238 / 0.16);
432  --gold-warm: #67e8f9;
433  --danger:    #f16a5f;
434
435  --navy: #0f1424;
436
437  --card-fill: var(--bg-paper);
438  --card-ink: var(--ink);
439}
440
441*, *::before, *::after { box-sizing: border-box; }
442html { scroll-behavior: smooth; }
443body {
444  margin: 0;
445  background: var(--bg-canvas);
446  color: var(--ink);
447  font-family: var(--font-body);
448  font-size: var(--step-0);
449  line-height: 1.55;
450  -webkit-font-smoothing: antialiased;
451  text-rendering: optimizeLegibility;
452}
453img { max-width: 100%; display: block; }
454a { color: inherit; text-decoration: none; }
455:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
456
457.wrap { width: min(1240px, 92vw); margin-inline: auto; }
458.rule { border: 0; height: 1px; background: var(--rule); margin: 0; }
459
460.eyebrow {
461  font-family: var(--font-heading);
462  font-weight: 500;
463  font-size: 12px;
464  letter-spacing: 0.28em;
465  text-transform: uppercase;
466  color: var(--ink-soft);
467}
468.eyebrow .num {
469  font-family: var(--font-editorial);
470  font-weight: 400;
471  font-style: italic;
472  letter-spacing: 0;
473  margin-right: 0.55em;
474  color: var(--gold-ink);
475}
476
477.eh {
478  font-family: var(--font-heading);
479  font-weight: 600;
480  font-style: normal;
481  font-size: var(--step-3);
482  line-height: 1.06;
483  letter-spacing: -0.015em;
484  text-wrap: balance;
485  margin: 0;
486  color: var(--ink);
487}
488.eh em {
489  font-style: italic;
490  font-weight: 500;
491  color: var(--accent);
492}
493p, li { text-wrap: pretty; }
494
495.btn {
496  display: inline-flex;
497  align-items: center;
498  gap: 0.55em;
499  font-family: var(--font-heading);
500  font-weight: 500;
501  font-size: 0.98rem;
502  letter-spacing: 0.01em;
503  padding: 0.88em 1.35em;
504  border-radius: 999px;
505  border: 1px solid transparent;
506  cursor: pointer;
507  transition: transform var(--dur-fast) var(--ease-ios), background var(--dur-fast) var(--ease-ios), color var(--dur-fast) var(--ease-ios), border-color var(--dur-fast) var(--ease-ios);
508  will-change: transform;
509}
510.btn:hover { transform: translateY(-1px); }
511.btn-primary { background: #0e7490; color: #ffffff; }
512.btn-primary:hover { background: #155e75; }
513.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
514.btn-ghost:hover { border-color: var(--ink); }
515.btn .arrow { transition: transform var(--dur-fast) var(--ease-ios); }
516.btn:hover .arrow { transform: translateX(3px); }
517
518/* ─── Masthead ────────────────────────────────────────────────── */
519.masthead {
520  border-bottom: 1px solid var(--rule);
521  padding: 1.15rem 0;
522  background: color-mix(in srgb, var(--bg-paper) 86%, transparent);
523  position: sticky;
524  top: 0;
525  z-index: 20;
526  backdrop-filter: saturate(140%) blur(8px);
527}
528.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
529.wordmark::first-letter { color: var(--gold); }
530.masthead-nav { display: flex; gap: 1.6rem; align-items: center; font-family: var(--font-heading); font-weight: 400; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
531.masthead-nav a { transition: color var(--dur-fast) var(--ease-ios); }
532.masthead-nav a:hover, .masthead-nav a.is-current { color: var(--ink); }
533.theme-btn .sun { display: block; }
534.theme-btn .moon { display: none; }
535[data-theme="dark"] .theme-btn .sun { display: none; }
536[data-theme="dark"] .theme-btn .moon { display: block; }
537.masthead-cta {
538  font-family: var(--font-heading); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.05em;
539  color: var(--bg-paper); background: var(--ink); padding: 0.6em 1.15em; border-radius: 999px;
540  white-space: nowrap; transition: background var(--dur-fast) var(--ease-ios);
541}
542.masthead-cta:hover { background: var(--accent-hover); }
543@media (max-width: 900px) { .masthead-nav { display: none; } }
544
545/* ─── Hero: split-column asymmetric ──────────────────────────── */
546.hero { padding: clamp(6.5rem, 12vh, 8.5rem) 0 clamp(3rem, 7vh, 5.5rem); overflow: visible; }
547.hero-flag { display: flex; align-items: center; gap: 1.2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--rule); margin-bottom: clamp(2.8rem, 6vh, 4.5rem); }
548.hero-flag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
549.hero-flag .flag-text { font-family: var(--font-heading); font-weight: 300; font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); }
550
551.hero-split {
552  display: grid;
553  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
554  gap: clamp(2.5rem, 6vw, 5rem);
555  align-items: center;
556}
557@media (max-width: 980px) {
558  .hero-split { grid-template-columns: 1fr; }
559  .hero-copy { order: -1; }
560  .hero-guide-wrap { margin-top: clamp(2rem, 5vh, 3rem); }
561}
562
563.hero-h1 {
564  font-family: var(--font-heading);
565  font-weight: 700;
566  font-size: clamp(2.35rem, 1.95rem + 2.1vw, 3.9rem);
567  line-height: 1.06;
568  letter-spacing: -0.022em;
569  margin: 0 0 1.6rem;
570  text-wrap: balance;
571  color: var(--ink);
572}
573.hero-h1 em {
574  font-style: italic;
575  font-weight: 500;
576  color: var(--accent);
577}
578.hero-sub { max-width: 46ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.55; color: var(--ink-soft); margin: 0 0 2.2rem; text-wrap: pretty; }
579.hero-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
580.hero-trust { font-family: var(--font-editorial); font-style: italic; font-size: 0.95rem; color: var(--muted); max-width: 44ch; line-height: 1.4; }
581.hero-bridge { display: flex; justify-content: center; margin: clamp(3rem, 7vh, 5.5rem) auto 0; }
582.btn-live-pill {
583  display: inline-flex; align-items: center; gap: 0.7rem;
584  padding: 0.95rem 1.6rem 0.95rem 1.3rem;
585  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
586  background: color-mix(in srgb, var(--accent) 8%, var(--bg-white));
587  color: var(--accent); font-family: var(--font-heading); font-weight: 500; font-size: 1rem; letter-spacing: 0.01em;
588  transition: background var(--dur-fast) var(--ease-ios), border-color var(--dur-fast) var(--ease-ios), transform var(--dur-fast) var(--ease-ios);
589  box-shadow: 0 20px 34px -22px color-mix(in srgb, var(--accent) 45%, transparent);
590}
591.btn-live-pill:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg-white)); border-color: var(--accent); transform: translateY(-1px); }
592.btn-live-pill svg { flex: 0 0 auto;
592 width: 20px; height: 20px; color: var(--accent); }
593.btn-live-pill .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-ios); }
594.btn-live-pill:hover .arrow { transform: translateX(3px); }
595@media (prefers-reduced-motion: reduce) { .btn-live-pill, .btn-live-pill .arrow { transition: none; } .btn-live-pill:hover { transform: none; } }
596
597/* Hero visual: cinematic single portrait (variant 01).
598   Weirdness locus: the .v1-overlay caption card hangs 24px off the bottom-left of the portrait,
599   deliberately breaking the frame. */
600.hero-guide-wrap { position: relative; }
601.v1-frame { position: relative; }
602.v1-visual {
603  position: relative; border-radius: 12px; overflow: hidden;
604  aspect-ratio: 3/4; background: var(--bg-raised);
605  --v1-fade: var(--bg-paper);
606}
607[data-theme="dark"] .v1-visual { --v1-fade: var(--stage); }
608.v1-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
609.v1-visual .v1-swap { position: absolute; inset: 0; }
610.v1-visual .v1-swap img { position: absolute; inset: 0; opacity: 0; animation: v1-crossfade 6s ease-in-out infinite; }
611.v1-visual .v1-swap img:nth-child(1) { animation-delay: 0s; }
612.v1-visual .v1-swap img:nth-child(2) { animation-delay: 3s; }
613@keyframes v1-crossfade {
614  0%, 40% { opacity: 1; }
615  50%, 90% { opacity: 0; }
616  100% { opacity: 1; }
617}
618@media (prefers-reduced-motion: reduce) {
619  .v1-visual .v1-swap img { animation: none; }
620  .v1-visual .v1-swap img:nth-child(1) { opacity: 1; }
621  .v1-visual .v1-swap img:nth-child(2) { opacity: 0; }
622}
623.v1-visual::after {
624  content: ''; position: absolute; inset: 0; pointer-events: none;
625  background: none;
626}
627[data-theme="dark"] .v1-visual::after {
628  background: linear-gradient(180deg, transparent 55%, var(--v1-fade) 100%);
629}
630.v1-overlay {
631  position: absolute; left: -24px; bottom: -24px; z-index: 2; max-width: 78%;
632  padding: 0.75rem 1.05rem; border-radius: 8px;
633  background: color-mix(in srgb, var(--bg-white) 55%, transparent);
634  backdrop-filter: blur(10px) saturate(160%);
635  -webkit-backdrop-filter: blur(10px) saturate(160%);
636  border: 1px solid var(--rule-strong);
637  box-shadow: 0 24px 44px -22px color-mix(in srgb, var(--ink-fixed) 32%, transparent);
638  font-family: var(--font-editorial); font-style: italic; font-size: 0.85rem; color: var(--ink);
639}
640.v1-overlay .no { color: var(--gold-ink); margin-right: 0.35em; }
641@media (max-width: 980px) { .v1-overlay { left: 0.75rem; bottom: 0.75rem; } }
642
643/* ─── Section rhythm ──────────────────────────────────────────── */
644.sec { padding: clamp(4.5rem, 10vh, 8rem) 0; }
645.lead-copy { max-width: 62ch; font-size: var(--step-1); color: var(--ink-soft); line-height: 1.55; text-wrap: pretty; }
646.lead-copy em { font-family: var(--font-editorial); font-style: italic; color: var(--gold-ink); }
647.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; padding-bottom: clamp(2.5rem, 6vh, 4rem); border-bottom: 1px solid var(--rule); margin-bottom: clamp(2.5rem, 6vh, 4rem); }
648.eyebrow + .eh { margin-top: 0.5rem; }
649.sec-head-r p { margin: 0; color: var(--ink-soft); font-size: var(--step-1); max-width: 44ch; line-height: 1.45; text-wrap: pretty; }
650.sec-head-r p em { font-family: var(--font-editorial); font-style: italic; color: var(--ink); }
651@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; } }
652
653/* ─── §01 Fear ────────────────────────────────────────────────── */
654.fear-sec { background: var(--bg-canvas); }
655.fear-list { margin: 0 0 clamp(2rem, 4vh, 2.6rem); padding: 0; list-style: none; max-width: 56ch; }
656.fear-list li { font-family: var(--font-editorial); font-style: italic; font-size: 1.15rem; color: var(--muted); padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
657.fear-close { font-size: var(--step-1); color: var(--ink); max-width: 46ch; }
658.fear-close em { font-family: var(--font-editorial); font-style: italic; color: var(--gold-ink); }
659.fear-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; margin: 0 0 clamp(1.6rem, 3.5vh, 2.2rem); }
660.fear-grid .fear-list { margin: 0; max-width: none; }
661.fear-grid .cliff-card { margin: 0; padding: 1.1rem 1.15rem; }
662/* .fear-col is the grid's left column: the questions, then the closing line
663   directly under them. A bare third grid child would land in row 2 instead,
664   i.e. below the taller cliff-card, leaving a gap under the list. */
665.fear-grid .fear-close { margin: clamp(1.4rem, 3vh, 2rem) 0 0; }
666.fear-grid .cliff-quote { margin-top: 1rem; font-size: 0.98rem; line-height: 1.32; max-width: 26ch; }
667.fear-grid .cliff-quote .cliff-cred { font-size: 0.72rem; }
668@media (max-width: 820px) { .fear-grid { grid-template-columns: 1fr; } }
669
670.cliff-card {
671  border: 1px solid var(--rule-strong);
672  background: var(--bg-white);
673  border-radius: 12px;
674  padding: 1.5rem;
675  margin-bottom: clamp(2rem, 4vh, 2.6rem);
676}
677.cliff-title { margin: 0 0 0.9rem; font-family: var(--font-editorial); font-style: italic; font-size: 0.85rem; color: var(--muted); }
678.cliff-svg { display: block; width: 100%; height: auto; }
679.cliff-axis-label { font-family: var(--font-heading); font-weight: 300; font-size: 9px; letter-spacing: 0.04em; fill: var(--muted); }
680.cliff-change-label { font-family: var(--font-editorial); font-style: italic; font-size: 11px; fill: var(--gold-ink); }
681.cliff-quote {
682  margin: 1.5rem 0 0; max-width: 26ch; font-family: var(--font-editorial); font-style: italic;
683  font-size: 1.15rem; line-height: 1.35; color: var(--ink); text-wrap: pretty;
684}
685.cliff-quote .cliff-cred { display: block; margin-top: 0.6rem; font-size: 0.8rem; font-style: normal;
685 color: var(--muted); font-family: var(--font-body); }
686@media (max-width: 640px) { .cliff-card { padding: 1.1rem; } }
687
688/* ─── §02 Solution · platform attention -> lasting connections ───── */
689.transform-sec { overflow: visible; }
690
691.transform-grid {
692  position: relative;
693  display: grid;
694  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
695  gap: clamp(1.6rem, 4vw, 3rem);
696  align-items: start;
697}
698@media (max-width: 900px) {
699  .transform-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vh, 3.5rem); }
700}
701
702.transform-col { display: flex; flex-direction: column; align-items: center; }
703.transform-col--left { max-width: 320px; margin-inline: auto; width: 100%; }
704.transform-col--right { max-width: 400px; margin-inline: auto; width: 100%; }
705.transform-col--right .tw-phone { max-width: 380px; }
706.transform-col--center { position: relative; max-width: 260px; margin-inline: auto; width: 100%; padding-top: 0.5rem; }
707
708.transform-pill {
709  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1rem;
710  border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--bg-white);
711  margin-bottom: clamp(1.4rem, 3vh, 2rem);
712}
713.transform-pill svg { flex: 0 0 auto; width: 16px; height: 16px; }
714.transform-pill-copy { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
715.transform-pill-copy strong { font-family: var(--font-heading); font-weight: 500; font-size: clamp(0.68rem, 0.6rem + 0.35vw, 0.82rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
716.transform-pill-copy span { font-family: var(--font-body); font-size: clamp(0.74rem, 0.66rem + 0.35vw, 0.9rem); color: var(--muted); }
717.transform-pill--muted svg { color: var(--muted); }
718.transform-pill--accent { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-white)); }
719.transform-pill--accent svg { color: var(--accent); }
720.transform-pill--relation svg { color: var(--gold-ink); }
721
722/* phone frame, shared by left + right columns */
723.tw-phone {
724  position: relative; width: 100%; max-width: 240px; margin-inline: auto;
725  padding: 10px; border-radius: 32px; background: var(--card-fill);
726  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink-fixed) 40%, transparent), 0 0 0 1px var(--rule-strong);
727}
728.tw-phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 64px; height: 16px; border-radius: 0 0 10px 10px; background: var(--card-fill); z-index: 2; }
729.tw-phone-screen { position: relative; background: var(--bg-white); border-radius: 24px; overflow: hidden; }
730
731.feed-post { padding: 0.9rem 0.85rem 1rem; }
732.feed-post-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.65rem; }
733.feed-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--bg-raised); }
734.feed-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; transform: scale(1.9); transform-origin: 50% 18%; }
735.feed-handle { font-family: var(--font-heading); font-weight: 500; font-size: 0.72rem; color: var(--ink); }
736.feed-time { font-family: var(--font-body); font-weight: 400; color: var(--muted); margin-left: 0.35em; }
737.feed-image { border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; margin-bottom: 0.7rem; background: var(--bg-raised); }
738.feed-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
739.feed-caption { margin: 0 0 0.7rem; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.4; }
740.feed-engagement { display: flex; gap: 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.7rem; }
741.feed-engagement span { display: inline-flex; align-items: center; gap: 0.3em; font-family: var(--font-heading); font-weight: 500; font-size: 0.66rem; color: var(--muted); }
742.feed-engagement svg { width: 13px; height: 13px; }
743.feed-skeleton span { display: block; height: 8px; border-radius: 4px; background: var(--rule); margin-bottom: 0.5rem; }
744.feed-skeleton span:nth-child(1) { width: 88%; }
745.feed-skeleton span:nth-child(2) { width: 62%; }
746
747.tw-msg { max-width: 92%; padding: 0.7rem 0.85rem; border-radius: 12px; font-size: 0.78rem; line-height: 1.42; margin-bottom: 0.6rem; text-wrap: pretty; }
748.tw-msg--in { background: var(--bg-soft); border: 1px solid var(--rule-strong); color: var(--ink-soft); border-bottom-left-radius: 4px; }
749.tw-msg--out {
750  margin-left: auto; background: color-mix(in srgb, var(--accent) 14%, var(--bg-white));
751  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink);
752  border-bottom-right-radius: 4px;
753}
754
755.transform-cons { list-style: none; margin: 1.3rem 0 0; padding: 0; width: 100%; }
756.transform-cons li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--rule-strong); font-size: clamp(0.85rem, 0.72rem + 0.5vw, 1.02rem); color: var(--danger); }
757.transform-cons li svg { flex: 0 0 auto; width: 11px; height: 11px; color: var(--danger); transform: translateY(0.15em); }
758
759.transform-pros { list-style: none; margin: 1.3rem 0 0; padding: 0; width: 100%; }
760.transform-pros li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); font-size: clamp(0.85rem, 0.72rem + 0.5vw, 1.02rem); color: var(--ink-soft); line-height: 1.35; }
761.transform-pros li svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--gold-ink); margin-top: 0.18em; }
762.transform-pros li strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: clamp(0.9rem, 0.74rem + 0.6vw, 1.1rem); color: var(--ink); }
763
764/* center: portrait + ring + guide card */
765.transform-portrait-wrap { position: relative; width: 172px; height: 172px; margin: 0.5rem auto 1.4rem; }
766.transform-ring { position: absolute; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); }
767.transform-ring circle { animation: transformRingSpin 6s linear infinite; transform-origin: center; }
768@keyframes transformRingSpin { to { stroke-dashoffset: -220; } }
769.transform-portrait { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg-paper); box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--ink-fixed) 40%, transparent); }
770.transform-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform: scale(1.25); transform-origin: 50% 12%; }
771.transform-ai-badge {
772  position: absolute; bottom: 4px; right: 4px; display: flex; align-items: center; justify-content: center;
773  width: 34px; height: 34px; border-radius: 50%; background: var(--card-fill); color: var(--gold-warm);
774  font-family: var(--font-heading); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.02em;
775  border: 2px solid var(--bg-paper); box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--ink-fixed) 40%, transparent);
776}
777
778.transform-card { width: 100%; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--bg-white); padding: 1rem 1.1rem 1.1rem; }
779.transform-card-title { margin: 0 0 0.75rem; font-family: var(--font-editorial); font-style: italic; font-size: 0.98rem; color: var(--ink); }
780.transform-card-list { list-style: none; margin: 0; padding: 0; }
781.transform-card-list li { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0; font-size: 0.78rem; color: var(--ink-soft); }
782.transform-card-list li svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--accent); }
783
784/* streaming connectors, bleed into the column gaps */
785.transform-stream-in, .transform-stream-out { position: absolute; top: 30%; pointer-events: none; z-index: 0; }
786.transform-stream-in { left: 0; width: clamp(64px, 9vw, 108px); transform: translate(-98%, -20%); }
787.transform-stream-out { right: 0; width: clamp(56px, 7vw, 84px); transform: translate(96%, -10%); }
788.transform-stream-in svg, .transform-stream-out svg { display: block; width: 100%; height: auto; }
789.transform-stream-in .stream-pulse { animation: transformStreamDrift 3.4s var(--ease-ios) infinite; }
790@keyframes transformStreamDrift { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
791@media (max-width: 900px) {
792  .transform-stream-in, .transform-stream-out { position: static; transform: none; width: 2px; height: 44px; margin: 0.4rem auto; background-image: repeating-linear-gradient(to bottom, var(--accent) 0 5px, transparent 5px 10px
792); }
793  .transform-stream-in svg, .transform-stream-out svg { display: none; }
794}
795
796.transform-close { margin: 0.6rem auto 0; max-width: 60ch; text-align: center; font-family: var(--font-editorial); font-size: 1.15rem; color: var(--ink); line-height: 1.4; text-wrap: balance; }
797.transform-close em { font-family: var(--font-editorial); font-style: italic; color: var(--gold-ink); }
798.transform-how { margin: clamp(3rem, 6vh, 4rem) auto 0.6rem; max-width: 80ch; text-align: center; font-size: 1.08rem; color: var(--ink-soft); line-height: 1.5; text-wrap: pretty; }
799.transform-how em { font-family: var(--font-editorial); font-style: italic; color: var(--gold-ink); }
800
801/* ─── §03 Offer + risk reversal ───────────────────────────────────*/
802/* Offer + closing manifesto blend with the page like guides.html's
803   light .stage sections: light in light mode, soft near-black in dark.
804   Scoped --stage* tokens recolor every descendant that reads them, so
805   the section rules below stay untouched. Only .final-cta keeps the
806   root dark --stage (a single deliberate cinematic close). */
807.offer-sec {
808  --stage:      #f5f5f3;
809  --stage-soft: #ffffff;
810  --stage-ink:  #141830;
811  --stage-mute: #5c6280;
812  --stage-rule: rgba(20,24,48,0.10);
813  --stage-card-fill: #ffffff;
814  /* --gold-warm reads low-contrast on light; use the darker --gold for
815     the labels/ticks (same fix as guides/associations light .stage). */
816  --gold-warm: var(--gold);
817}
818[data-theme="dark"] .offer-sec {
819  --stage:      #191919;
820  --stage-soft: #1f1f1f;
821  --stage-ink:  #E8E4F0;
822  --stage-mute: #8b8ea8;
823  --stage-rule: rgba(255,255,255,0.10);
824  --stage-card-fill: rgba(255,255,255,0.04);
825  --gold-warm:  #67e8f9;
826}
827@media (prefers-color-scheme: dark) {
828  :root:not([data-theme]) .offer-sec {
829    --stage:      #191919;
830    --stage-soft: #1f1f1f;
831    --stage-ink:  #E8E4F0;
832    --stage-mute: #8b8ea8;
833    --stage-rule: rgba(255,255,255,0.10);
834    --stage-card-fill: rgba(255,255,255,0.04);
835    --gold-warm:  #67e8f9;
836  }
837}
838/* Gold fill buttons need dark text; their `color: var(--stage)` would
839   otherwise flip light with the section. --ink-fixed stays dark both themes. */
840.offer-sec .flow-learn a:hover { color: var(--ink-fixed); }
841.offer-sec { background: var(--stage); color: var(--stage-ink); position: relative; overflow: hidden; }
842.offer-sec::before {
843  content: ''; position: absolute; inset: 0;
844  pointer-events: none; z-index: 0;
845}
846.offer-inner { position: relative; z-index: 1; }
847.offer-sec .eyebrow { color: var(--ink); }
848.offer-sec .eyebrow .num { color: var(--gold-warm); }
849.offer-sec .eh { color: var(--stage-ink); font-variation-settings: "opsz" 96; }
850.offer-sec .eh em { color: var(--accent); }
851.offer-sub { max-width: 56ch; margin: 1rem 0 0; font-size: var(--step-1); color: color-mix(in srgb, var(--stage-ink) 80%, transparent); line-height: 1.5; }
852
853/* value-flow diagram: your Guide -> Pearls -> your Audience */
854.flow-wrap { max-width: 1100px; margin: clamp(2rem, 4vh, 3rem) auto 0; }
855.flow-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; align-items: center; gap: 0; justify-items: center; }
856.flow-card { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 210px; }
857.flow-frame { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--stage-card-fill); border: 1px solid color-mix(in srgb, var(--gold-warm) 30%, transparent); box-shadow: 0 12px 28px -18px rgba(0,0,0,0.55); }
858.flow-img { width: 100%; height: 100%; object-fit: cover; display: block; }
859.flow-card--pearl .flow-frame { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
860.flow-pearl-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; gap: 0; }
861.flow-pearl-img { display: block; width: 44%; height: auto; }
862.flow-pearl-img--side { width: 34%; opacity: 0.9; }
863.flow-pearl-img--left { transform: translate(30%, 14%); z-index: 1; }
864.flow-pearl-img--center { position: relative; z-index: 2; }
865.flow-pearl-img--right { transform: translate(-30%, 14%); z-index: 1; }
866.flow-cap { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.1rem; }
867.flow-eyebrow { font-family: var(--font-heading); font-weight: 500; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-warm); }
868.flow-sub-txt { font-family: var(--font-editorial); font-style: italic; font-size: 0.82rem; color: color-mix(in srgb, var(--stage-ink) 78%, transparent); }
869.flow-arrow { display: flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--gold-warm) 70%, transparent); }
870.flow-arrow svg { width: 100%; height: 24px; }
871.flow-caption { margin: 1.2rem auto 0; text-align: center; font-family: var(--font-editorial); font-style: italic; font-size: 0.92rem; color: color-mix(in srgb, var(--stage-ink) 85%, transparent); max-width: 56ch; }
872@media (max-width: 720px) {
873  .flow-row { grid-template-columns: 1fr; gap: 1rem; }
874  .flow-arrow { transform: rotate(90deg); height: 28px; }
875  .flow-frame { max-width: 260px; margin: 0 auto; }
876}
877.flow-learn { display: flex; justify-content: center; margin-top: 1.2rem; }
878.flow-learn a { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1.15rem; border: 1px solid color-mix(in srgb, var(--gold-warm) 55%, transparent); border-radius: 999px; font-family: var(--font-heading); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-warm); text-decoration: none; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }
879.flow-learn a:hover { background: var(--gold-warm); color: var(--stage); border-color: var(--gold-warm); }
880.flow-learn a svg { width: 14px; height: 14px; }
881
882.ticket-band { font-family: var(--font-heading); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-warm); margin: clamp(2.5rem, 5vh, 3.5rem) 0 clamp(1.6rem, 3vh, 2.2rem); }
883.ticket-pair { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: stretch; gap: 0; }
884.ticket-perf { display: flex; justify-content: center; align-items: center; }
885.ticket-perf-line { width: 1px; height: 100%; background-image: repeating-linear-gradient(to bottom, var(--gold) 0 8px, transparent 8px 16px); position: relative; }
886.ticket-perf-glyph { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--gold-warm); background: var(--stage); padding: 0.4em 0; }
887@media (max-width: 900px) {
888  .ticket-pair { grid-template-columns: 1fr; gap: 1.6rem 0; }
889  .ticket-perf { transform: rotate(90deg); height: 48px; }
890}
891
892.offer-card { position: relative; border: 1px solid color-mix(in srgb, var(--gold-warm) 35%, transparent); border-radius: 12px; background: var(--stage-card-fill); padding: 2rem 1.8rem 2.2rem; display: flex; flex-direction: column; }
893.offer-card-corner { position: absolute; width: 12px; height: 12px; color: var(--gold-warm); opacity: 0.7; pointer-events: none; }
894/* inset must clear the card's 12px radius, or the ticks collide with the curve */
895.offer-card-corner--tl { top: 14px; left: 14px; }
896.offer-card-corner--tr { top: 14px; right: 14px; transform: rotate(90deg); }
897.offer-card-corner--bl { bottom: 14px; left: 14px; transform: rotate(-90deg); }
898.offer-card-corner--br { bottom: 14px; right: 14px; transform: rotate(180deg); }
899.offer-card--growth { border-color: var(--stage-rule); }
900.offer-card-name { font-family: var(--font-heading); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-warm); margin-bottom: 1rem; }
901.offer-card-title { font-family: var(--font-editorial); font-weight: 400; font-style: italic; font-size: 1.4rem; color: var(--stage-ink); margin: 0 0 0.9rem; }
902.offer-card-includes { margin: 1.4rem 0 1.6rem; list-style: none; flex-grow: 1; padding-top: 1.4rem; border-top: 1px solid var(--stage-rule); }
903.offer-card-includes li { padding: 0.55rem 0; font-size: 0.92rem; color: color-mix(in srgb, var(--stage-ink) 85%, transparent); display: flex; align-items: baseline; gap: 0.7rem; }
904.offer-card-includes li::before { content: '\2013'; color: var(--gold-warm); }
905.offer-card .btn-primary { justify-content: center; background: #0e7490; color: #ffffff; }
906.offer-card .btn-primary:hover { background: #155e75; }
907.offer-card .btn-ghost { justify-content: center; color: var(--stage-ink); border-color: var(--stage-rule); }
908.offer-card .btn-ghost:hover { border-color: var(--stage-ink); }
909.offer-fine { margin-top: clamp(2rem, 4vh, 2.6rem); padding-top: 1.6rem; border-top: 1px solid var(--stage-rule); font-size: 0.85rem; color: var(--stage-mute); max-width: 70ch; line-height: 1.6; }
910
911.honest-box {
912  margin-top: clamp(2rem, 4vh, 2.6rem); max-width: 70ch; padding: 1.4rem 1.6rem;
913  background: var(--stage-card-fill); border: 1px solid var(--stage-rule); border-radius: 12px;
914}
915.honest-box h3 { margin: 0 0 0.5rem; font-family: var(--font-editorial); font-weight: 400; font-style: italic; font-size: 1.05rem; color: var(--stage-ink); }
916.honest-box p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: color-mix(in srgb, var(--stage-ink) 78%, transparent); }
917
918/* ─── §04 Apply · empty plate ─────────────────────────────────── */
919.final-cta { background: var(--stage); color: var(--stage-ink); padding: clamp(5rem, 11vh, 8rem) 0 clamp(4rem, 9vh, 6rem); position: relative; overflow: hidden; text-align: center; }
920.final-cta::before {
921  content: ''; position: absolute; inset: 0;
922  z-index: 0;
923}
924.final-cta-inner { position: relative; z-index: 1; max-width: 62ch; margin-inline: auto; }
925/* --stage-mute, not --ink: this is the one section that stays dark in light
926   mode, so --ink (#141830) sat at ~1.05:1 on the band and read as blank. */
927.final-cta .eyebrow { color: var(--stage-mute); margin-bottom: 1.6rem; }
928.final-cta h2 { color: var(--stage-ink); font-size: var(--step-4); font-variation-settings: "opsz" 96; }
929.final-cta h2 em { color: var(--accent); }
930.final-cta-copy { margin: 1.6rem auto 0; font-size: var(--step-1); color: color-mix(in srgb, var(--stage-ink) 80%, transparent); line-height: 1.5; max-width: 52ch; }
931.final-cta-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 1.8rem 0; }
932.final-cta .btn-primary { background: #0e7490; color: #ffffff; }
933.final-cta .btn-primary:hover { background: #155e75; }
934.final-cta .btn-ghost { color: var(--stage-ink); border-color: var(--stage-rule); }
935.final-cta .btn-ghost:hover { border-color: var(--stage-ink); }
936.final-cta-fine { font-family: var(--font-editorial); font-style: italic; font-size: 1.2rem; color: var(--stage-ink); max-width: 40ch; margin-inline: auto; }
937.final-cta-fine em { color: var(--gold-warm); font-style: italic; }
938
939/* ─── Footer (index-style row) ────────────────────────────────── */
940.foot {
941  border-top: 1px solid var(--rule);
942  padding: clamp(2.5rem, 5vh, 3.5rem) 0 clamp(2rem, 4vh, 2.6rem);
943}
944.foot-inner {
945  display: flex;
946  justify-content: space-between;
947  align-items: center;
948  flex-wrap: wrap;
949  gap: 0.8rem 1.6rem;
950}
951.foot-copy {
952  font-family: var(--font-heading);
953  font-weight: 400;
954  font-size: 0.85rem;
955  color: var(--muted);
956}
957.foot-links {
958  display: flex;
959  flex-wrap: wrap;
960  gap: 0.4rem 1.4rem;
961  align-items: center;
962  color: var(--muted);
963}
964.foot-links a,
965.foot-links button {
966  font-family: var(--font-heading);
967  font-weight: 400;
968  font-size: 0.85rem;
969  color: var(--muted);
970  text-decoration: none;
971  background: none; border: 0; padding: 0; cursor: pointer;
972  transition: color 160ms ease;
973}
974/* beat the shared button.wr-contact-trigger `font: inherit` reset */
975.foot-links .wr-contact-trigger { font-family: var(--font-heading); font-weight: 400; font-size: 0.85rem; color: var(--muted); }
976.foot-links a:hover,
977.foot-links button:hover,
978.foot-links .wr-contact-trigger:hover { color: var(--accent-text); }
979.foot-legal {
980  margin: 1.4rem 0 0;
981  font-size: 0.75rem;
982  line-height: 1.5;
983  color: var(--dimmed);
984  font-style: italic;
985  max-width: 880px;
986}
987@media (max-width: 640px) { .foot-inner { flex-direction: column; align-items: flex-start; } }
988
989/* ─── Sticky mobile CTA ───────────────────────────────────────── */
990.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-paper) 94%, transparent); backdrop-filter: saturate(140%) blur(10px); border-top: 1px solid var(--rule-strong); }
991.sticky-cta a { display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 500; font-size: 0.98rem; background: #0e7490; color: #ffffff; padding: 0.9em 1.2em; border-radius: 999px; }
992@media (max-width: 720px) { .sticky-cta { display: block; } body { padding-bottom: 4.4rem; } }
993
994/* ─── Reduced motion ──────────────────────────────────────────── */
995@media (prefers-reduced-motion: reduce) {
996  * { animation: none !important; transition: none !important; }
997  html { scroll-behavior: auto; }
998}
999</style>
1000<style>
1001
1002
1003
1004
1005    /* ── RESPONSIVE (nav-specific tweaks from index.html @media 980px / 540px) ── */
1006    @media (max-width: 980px) {
1007    }
1008    @media (max-width: 540px) {
1009    }
1010
1011    /* ── CONTACT MODAL STYLES ──────────────────────────────── */
1012    /* Backdrop */
1013    .wr-contact-backdrop {
1014      position: fixed; inset: 0; z-index: 500;
1015      background: rgba(10, 10, 20, 0.72);
1016      backdrop-filter: blur(4px);
1017      -webkit-backdrop-filter: blur(4px);
1018      display: flex; align-items: center; justify-content: center;
1019      padding: 20px;
1020      overflow-y: auto;
1021      opacity: 0; pointer-events: none;
1022      transition: opacity 0.22s ease;
1023    }
1024    .wr-contact-backdrop.wr-open {
1025      opacity: 1; pointer-events: auto;
1026    }
1027    @media (prefers-reduced-motion: reduce) {
1028      .wr-contact-backdrop { transition: none; }
1029      .wr-contact-dialog { transition: none !important; }
1030    }
1031
1032    /* Dialog card */
1033    .wr-contact-dialog {
1034      background: var(--bg-white);
1035      border: 1px solid var(--rule);
1036      border-radius: 16px;
1037      padding: 36px 40px 40px;
1038      width: 100%; max-width: 480px;
1039      max-height: calc(100dvh - 40px);
1040      overflow-y: auto;
1041      position: relative;
1042      box-shadow: 0 24px 64px rgba(10,10,20,0.28);
1043      transform: scale(0.96) translateY(8px);
1044      transition: transform 0.22s cubic-bezier(0.32,0.72,0,1);
1045    }
1046    .wr-contact-backdrop.wr-open .wr-contact-dialog {
1047      transform: scale(1) translateY(0);
1048    }
1049
1050    /* Close button */
1051    .wr-contact-close {
1052      position: absolute; top: 16px; right: 16px;
1053      background: transparent; border: 1px solid var(--rule);
1054      width: 44px; height: 44px; border-radius: 8px;
1055      display: inline-flex; align-items: center; justify-content: center;
1056      cursor: pointer; color: var(--muted);
1057      transition: border-color 0.2s, color 0.2s;
1058      padding: 0;
1059    }
1060    .wr-contact-close:hover { border-color: var(--ink); color: var(--ink); }
1061    .wr-contact-close:focus-visible {
1062      outline: 2px solid var(--accent); outline-offset: 2px;
1063    }
1064
1065    /* Heading */
1066    .wr-contact-title {
1067      font-family: var(--font-heading);
1068      font-size: 22px; font-weight: 700;
1069      color: var(--ink); margin: 0 0 4px;
1070      line-height: 1.25;
1071    }
1072    .wr-contact-sub {
1073      font-size: 14px; color: var(--muted); margin: 0 0 24px;
1074      line-height: 1.5;
1075    }
1076
1077    /* Form fields */
1078    .wr-contact-field {
1079      margin-bottom: 16px;
1080    }
1081    .wr-contact-field label {
1082      display: block;
1083      font-size: 13px; font-weight: 600; color: var(--ink-soft);
1084      margin-bottom: 6px;
1085      letter-spacing: 0.01em;
1086    }
1087    .wr-contact-field label .wr-req {
1088      color: var(--accent-text); margin-left: 2px;
1089      font-weight: 700;
1090    }
1091    .wr-contact-field la
1091bel .wr-opt {
1092      font-weight: 400; color: var(--muted); font-size: 12px;
1093      margin-left: 4px;
1094    }
1095    .wr-contact-field input,
1096    .wr-contact-field textarea {
1097      width: 100%;
1098      font-family: var(--font-body);
1099      font-size: 15px;
1100      color: var(--ink);
1101      background: var(--bg-soft);
1102      border: 1.5px solid var(--rule);
1103      border-radius: 10px;
1104      padding: 11px 14px;
1105      outline: none;
1106      transition: border-color 0.18s, box-shadow 0.18s;
1107      box-sizing: border-box;
1108      -webkit-appearance: none;
1109      appearance: none;
1110    }
1111    .wr-contact-field textarea {
1112      resize: vertical; min-height: 100px; line-height: 1.55;
1113    }
1114    .wr-contact-field input:focus,
1115    .wr-contact-field textarea:focus {
1116      border-color: var(--accent-text);
1117      box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18);
1118    }
1119    .wr-contact-field input:focus-visible,
1120    .wr-contact-field textarea:focus-visible {
1121      outline: 2px solid var(--accent-text);
1122      outline-offset: 2px;
1123    }
1124    .wr-contact-field input[aria-invalid="true"],
1125    .wr-contact-field textarea[aria-invalid="true"] {
1126      border-color: #e53e3e;
1127      box-shadow: 0 0 0 3px rgba(229,62,62,0.14);
1128    }
1129
1130    /* Inline field error */
1131    .wr-contact-field-error {
1132      display: none;
1133      font-size: 12px; color: #c53030;
1134      margin-top: 5px;
1135      font-weight: 500;
1136    }
1137    .wr-contact-field-error::before {
1138      content: '\26A0\FE0F\0020'; /* warning icon + space, dual encoding color+icon for WCAG 1.4.1 */
1139    }
1140    .wr-contact-field-error.wr-visible { display: block; }
1141
1142    /* Honeypot (off-screen, not display:none so bots don't skip it) */
1143    .wr-contact-hp {
1144      position: absolute; left: -9999px; top: -9999px;
1145      width: 1px; height: 1px; opacity: 0;
1146      overflow: hidden;
1147    }
1148
1149    /* Form row actions */
1150    .wr-contact-actions {
1151      display: flex; align-items: center; justify-content: flex-end;
1152      gap: 12px; margin-top: 8px;
1153    }
1154    .wr-contact-submit {
1155      font-family: var(--font-body);
1156      font-weight: 600; font-size: 14px;
1157      background: var(--cta-fill);
1158      color: #ffffff;
1159      border: none; border-radius: 999px;
1160      padding: 11px 24px;
1161      cursor: pointer;
1162      transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
1163      box-shadow: 0 4px 14px rgb(var(--accent-rgb) / 0.35);
1164    }
1165    [data-theme="dark"] .wr-contact-submit {
1166      background: var(--cta-fill);
1167    }
1168    .wr-contact-submit:hover:not(:disabled) {
1169      background: var(--accent);
1170      transform: translateY(-1px);
1171      box-shadow: 0 6px 20px rgb(var(--accent-rgb) / 0.45);
1172    }
1173    .wr-contact-submit:disabled {
1174      opacity: 0.6; cursor: not-allowed;
1175    }
1176    .wr-contact-submit:focus-visible {
1177      outline: 2px solid var(--accent); outline-offset: 3px;
1178    }
1179    .wr-contact-cancel {
1180      font-family: var(--font-body);
1181      font-size: 14px; font-weight: 500; color: var(--muted);
1182      background: none; border: none; cursor: pointer;
1183      padding: 8px 4px;
1184      transition: color 0.2s;
1185    }
1186    .wr-contact-cancel:hover { color: var(--ink); }
1187    .wr-contact-cancel:focus-visible {
1188      outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
1189    }
1190
1191    /* Form-level error banner */
1192    .wr-contact-form-error {
1193      display: none;
1194      background: rgba(229,62,62,0.08);
1195      border: 1px solid rgba(229,62,62,0.3);
1196      border-radius: 8px;
1197      padding: 10px 14px;
1198      font-size: 13px; color: #c53030;
1199      margin-top: 16px;
1200      font-weight: 500;
1201    }
1202    .wr-contact-form-error.wr-visible { display: block; }
1203
1204    /* Success state */
1205    .wr-contact-success {
1206      display: none;
1207      text-align: center;
1208      padding: 16px 0 8px;
1209    }
1210    .wr-contact-success.wr-visible { display: block; }
1211    .wr-contact-success-icon {
1212      width: 52px; height: 52px;
1213      background: rgb(var(--accent-rgb) / 0.12);
1214      border-radius: 50%;
1215      display: inline-flex; align-items: center; justify-content: center;
1216      margin-bottom: 16px;
1217    }
1218    .wr-contact-success-icon svg { color: var(--accent-text); }
1219    .wr-contact-success h3 {
1220      font-family: var(--font-heading);
1221      font-size: 20px; font-weight: 700;
1222      color: var(--ink); margin: 0 0 8px;
1223    }
1224    .wr-contact-success p {
1225      font-size: 15px; color: var(--muted); margin: 0 0 24px; line-height: 1.55;
1226    }
1227    .wr-contact-success .wr-contact-submit {
1228      margin: 0 auto; display: inline-block;
1229    }
1230
1231    /* Trigger link style (nav + footer) */
1232    a.wr-contact-trigger,
1233    button.wr-contact-trigger {
1234      background: none; border: none; cursor: pointer;
1235      padding: 0; font: inherit; color: inherit;
1236      text-decoration: none;
1237      transition: color 0.2s;
1238    }
1239    button.wr-contact-trigger:focus-visible {
1240      outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
1241    }
1242
1243    @media (max-width: 520px) {
1244      .wr-contact-dialog {
1245        padding: 28px 20px 32px;
1246        border-radius: 12px;
1247      }
1248      .wr-contact-title { font-size: 19px; }
1249    }
1250
1251    /* ── APPLY-TO-BECOME-A-GUIDE WIZARD MODAL ─────────────────
1252       Namespaced wr-apply-* so it never collides with the
1253       wr-contact-* contact modal above. Shares the same visual
1254       language (tokens, radii, shadows) on purpose. */
1255    .wr-apply-backdrop {
1256      position: fixed; inset: 0; z-index: 500;
1257      background: rgba(10, 10, 20, 0.72);
1258      backdrop-filter: blur(4px);
1259      -webkit-backdrop-filter: blur(4px);
1260      display: flex; align-items: center; justify-content: center;
1261      padding: 20px;
1262      overflow-y: auto;
1263      opacity: 0; pointer-events: none;
1264      transition: opacity 0.22s ease;
1265    }
1266    .wr-apply-backdrop.wr-open { opacity: 1; pointer-events: auto; }
1267    @media (prefers-reduced-motion: reduce) {
1268      .wr-apply-backdrop { transition: none; }
1269      .wr-apply-dialog { transition: none !important; }
1270    }
1271    .wr-apply-dialog {
1272      background: var(--bg-white);
1273      border: 1px solid var(--rule);
1274      border-radius: 16px;
1275      padding: 36px 40px 40px;
1276      width: 100%; max-width: 520px;
1277      max-height: calc(100dvh - 40px);
1278      overflow-y: auto;
1279      position: relative;
1280      box-shadow: 0 24px 64px rgba(10,10,20,0.28);
1281      transform: scale(0.96) translateY(8px);
1282      transition: transform 0.22s cubic-bezier(0.32,0.72,0,1);
1283    }
1284    .wr-apply-backdrop.wr-open .wr-apply-dialog { transform: scale(1) translateY(0); }
1285    .wr-apply-close {
1286      position: absolute; top: 16px; right: 16px;
1287      background: transparent; border: 1px solid var(--rule);
1288      width: 44px; height: 44px; border-radius: 8px;
1289      display: inline-flex; align-items: center; justify-content: center;
1290      cursor: pointer; color: var(--muted);
1291      transition: border-color 0.2s, color 0.2s;
1292      padding: 0;
1293    }
1294    .wr-apply-close:hover { border-color: var(--ink); color: var(--ink); }
1295    .wr-apply-close:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
1296    .wr-apply-title {
1297      font-family: var(--font-heading);
1298      font-size: 22px; font-weight: 700;
1299      color: var(--ink); margin: 0 0 4px;
1300      line-height: 1.25;
1301    }
1302    .wr-apply-sub { font-size: 14px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
1303    .wr-apply-progress {
1304      font-family: var(--font-body);
1305      font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
1306      text-transform: uppercase; color: var(--muted);
1307      margin: 0 0 20px;
1308    }
1309    .wr-apply-step { display: none; }
1310    .wr-apply-step.is-active { display: block; }
1311    .wr-apply-step h3 {
1312      font-family: var(--font-heading);
1313      font-size: 15px; font-weight: 700;
1314      color: var(--ink); margin: 0 0 16px;
1315    }
1316    .wr-apply-field { margin-bottom: 16px; }
1317    .wr-apply-field label {
1318      display: block;
1319      font-size: 13px; font-weight: 600; color: var(--ink-soft);
1320      margin-bottom: 6px;
1321      letter-spacing: 0.01em;
1322    }
1323    .wr-apply-field label .wr-req { color: var(--accent-hover); margin-left: 2px; font-weight: 700; }
1324    .wr-apply-field label .wr-opt { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
1325    .wr-apply-field input,
1326    .wr-apply-field textarea,
1327    .wr-apply-field select {
1328      width: 100%;
1329      font-family: var(--font-body);
1330      font-size: 15px;
1331      color: var(--ink);
1332      background: var(--bg-soft);
1333      border: 1.5px solid var(--rule);
1334      border-radius: 10px;
1335      padding: 11px 14px;
1336      outline: none;
1337      transition: border-color 0.18s, box-shadow 0.18s;
1338      box-sizing: border-box;
1339      -webkit-appearance: none;
1340      appearance: none;
1341    }
1342    .wr-apply-field select {
1343      padding-right: 36px;
1344      background-image:
1345        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
1346        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
1347      background-position:
1348        calc(100% - 20px) calc(1em + 2px),
1349        calc(100% - 15px) calc(1em + 2px);
1350      background-size: 5px 5px, 5px 5px;
1351      background-repeat: no-repeat;
1352    }
1353    .wr-apply-field textarea { resize: vertical; min-height: 100px; line-height: 1.55; }
1354    .wr-apply-field input:focus,
1355    .wr-apply-field textarea:focus,
1356    .wr-apply-field select:focus {
1357      border-color: var(--accent-hover);
1358      box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18);
1359    }
1360    .wr-apply-field input:focus-visible,
1361    .wr-apply-field textarea:focus-visible,
1362    .wr-apply-field select:focus-visible {
1363      outline: 2px solid var(--accent-hover); outline-offset: 2px;
1364    }
1365    .wr-apply-field input[aria-invalid="true"],
1366    .wr-apply-field textarea[aria-invalid="true"],
1367    .wr-apply-field select[aria-invalid="true"] {
1368      border-color: #e53e3e;
1369      box-shadow: 0 0 0 3px rgba(229,62,62,0.14);
1370    }
1371    .wr-apply-field-error {
1372      display: none;
1373      font-size: 12px; color: #c53030;
1374      margin-top: 5px;
1375      font-weight: 500;
1376    }
1377    .wr-apply-field-error::before { content: '\26A0\FE0F\0020'; }
1378    .wr-apply-field-error.wr-visible { display: block; }
1379    .wr-apply-hp {
1380      position: absolute; left: -9999px; top: -9999px;
1381      width: 1px; height: 1px; opacity: 0;
1382      overflow: hidden;
1383    }
1384    .wr-apply-actions {
1385      display: flex; align-items: center; justify-content: space-between;
1386      gap: 12px; margin-top: 8px;
1387    }
1388    .wr-apply-actions.wr-apply-actions--end { justify-content: flex-end; }
1389    .wr-apply-next,
1390    .wr-apply-submit {
1391      font-family: var(--font-body);
1392      font-weight: 600; font-size: 14px;
1393      background: var(--cta-fill);
1394      color: #ffffff;
1395      border: none; border-radius: 999px;
1396      padding: 11px 24px;
1397      cursor: pointer;
1398      transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
1399      box-shadow: 0 4px 14px rgb(var(--accent-rgb) / 0.35);
1400    }
1401    [data-theme="dark"] .wr-apply-next,
1402    [data-theme="dark"] .wr-apply-submit {
1403      background: var(--cta-fill);
1404    }
1405    .wr-apply-next:hover:not(:disabled),
1406    .wr-apply-submit:hover:not(:disabled) {
1407      background: var(--accent);
1408      transform: translateY(-1px);
1409      box-shadow: 0 6px 20px rgb(var(--accent-rgb) / 0.45);
1410    }
1411    .wr-apply-submit:disabled { opacity: 0.6;
1411 cursor: not-allowed; }
1412    .wr-apply-next:focus-visible,
1413    .wr-apply-submit:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
1414    .wr-apply-back {
1415      font-family: var(--font-body);
1416      font-size: 14px; font-weight: 500; color: var(--muted);
1417      background: none; border: none; cursor: pointer;
1418      padding: 8px 4px;
1419      transition: color 0.2s;
1420    }
1421    .wr-apply-back:hover { color: var(--ink); }
1422    .wr-apply-back:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; border-radius: 4px; }
1423    .wr-apply-form-error {
1424      display: none;
1425      background: rgba(229,62,62,0.08);
1426      border: 1px solid rgba(229,62,62,0.3);
1427      border-radius: 8px;
1428      padding: 10px 14px;
1429      font-size: 13px; color: #c53030;
1430      margin: 16px 0;
1431      font-weight: 500;
1432    }
1433    .wr-apply-form-error.wr-visible { display: block; }
1434    .wr-apply-success { display: none; text-align: center; padding: 16px 0 8px; }
1435    .wr-apply-success.wr-visible { display: block; }
1436    .wr-apply-success-icon {
1437      width: 52px; height: 52px;
1438      background: rgb(var(--accent-rgb) / 0.12);
1439      border-radius: 50%;
1440      display: inline-flex; align-items: center; justify-content: center;
1441      margin-bottom: 16px;
1442    }
1443    .wr-apply-success-icon svg { color: var(--accent-hover); }
1444    .wr-apply-success h3 {
1445      font-family: var(--font-heading);
1446      font-size: 20px; font-weight: 700;
1447      color: var(--ink); margin: 0 0 8px;
1448    }
1449    .wr-apply-success p { font-size: 15px; color: var(--muted); margin: 0 0 24px; line-height: 1.55; }
1450    .wr-apply-success .wr-apply-submit { margin: 0 auto; display: inline-block; }
1451    @media (max-width: 520px) {
1452      .wr-apply-dialog { padding: 28px 20px 32px; border-radius: 12px; }
1453      .wr-apply-title { font-size: 19px; }
1454    }
1455  </style>
1456<script>
1457  (function(){
1458    var stored = null;
1459    try { stored = localStorage.getItem('wr-theme'); } catch(e) {}
1460    var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
1461    document.documentElement.setAttribute('data-theme', theme);
1462  })();
1463</script>
1463
1464  <style>
1465    /* Nav signup button: match index.html baseline (teal --cta-fill). Scoped by
1466       data-cta so it survives nav restructures (button lives in .nav-actions). */
1467    a[data-cta="nav.signup"],
1468    a[data-cta="nav-drawer.signup"] {
1469      background: #0e7490 !important;
1470      color: #ffffff !important;
1471      box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset;
1472    }
1473    a[data-cta="nav.signup"]:hover,
1474    a[data-cta="nav-drawer.signup"]:hover { background: #155e75 !important; color: #ffffff !important; }
1475  </style>
1476<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://wisdomrecall.com/"},{"@type":"ListItem","position":2,"name":"Influencer Guide Program","item":"https://wisdomrecall.com/for/influencer-guide"}]}</script>
1476
1477  <style>
1478  /* Centered nav menu + "Meet the Guides" pill (propagated) */
1479  @media (max-width: 1060px) { .nav-actions { display: none; } .nav-links { flex: 0 1 auto; } .nav-links a.nav-guides { display: none; } }
1480  </style>
1481    
1481<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Wisdom Recall","url":"https://wisdomrecall.com/","logo":"https://wisdomrecall.com/apple-touch-icon.png"}</script>
1481
1482    
1482<script type="module" crossorigin src="/assets/init-COTHHLCD.js"></script>
1482
1483    
1483<script type="module" crossorigin src="/assets/lazy-D1JZu5bI.js"></script>
1483
1484  </head>
1485<body>
1486
1487  <!-- WR:HEADER:START -->
1488<!-- NAV -->
1489  <nav class="nav" aria-label="Primary">
1490    <div class="nav-inner">
1491      <a href="/" class="vlockup" aria-label="Wisdom Recall">
1492        <img src="/assets/branding/logo-mark-from-share.svg" alt="" aria-hidden="true" class="mark mark--light" />
1493        <img src="/assets/branding/logo-mark-from-share-white.svg" alt="" aria-hidden="true" class="mark mark--dark" />
1494        <span class="wm">
1495          <span class="w1">Wisdom</span>
1496          <span class="w2">Recall</span>
1497          <sup>&trade;</sup>
1498        </span>
1499      </a>
1500      <div class="nav-links">
1501        <a href="/guides" class="nav-guides" aria-label="Meet the Guides"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M6 18H2"/></svg><span class="nav-guides__pre">Meet the&nbsp;</span><span class="nav-guides__label">Guides</span></a>
1502        <a href="/for/influencer-guide" aria-current="page">Influencers</a>
1503        <a href="/for/associations">Associations</a>
1504        <a href="/#hero">Memory</a>
1505        <a href="/#pricing">Pricing</a>
1506        <a href="/#faq">FAQ</a>
1507        <a href="/support">Support</a>
1508        <button type="button" class="wr-contact-trigger" id="wr-contact-nav-trigger" aria-haspopup="dialog">Contact</button>
1509      </div>
1510      <div class="nav-actions">
1511        <a href="https://app.wisdomrecall.com/login" class="nav-login" data-cta="nav.login" data-cta-section="nav" data-cta-variant="secondary" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>Log in</a>
1512        <a href="https://app.wisdomrecall.com/signup" class="nav-cta" data-cta="nav.signup" data-cta-section="nav" data-cta-variant="primary" data-cta-position="above-fold" target="_blank" rel="noopener noreferrer">Sign up free</a>
1513        <button id="themeToggle" class="theme-btn" aria-label="Toggle theme" title="Toggle theme">
1514          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path></svg>
1515        </button>
1516      </div>
1517      <button class="nav-hamburger" id="navHamburger" aria-label="Open menu" aria-expanded="false" aria-controls="nav-drawer">
1518        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
1519          <line x1="3" y1="5" x2="17" y2="5"/>
1520          <line x1="3" y1="10" x2="17" y2="10"/>
1521          <line x1="3" y1="15" x2="17" y2="15"/>
1522        </svg>
1523      </button>
1524    </div>
1525  </nav>
1526
1527  <!-- MOBILE NAV DRAWER -->
1528  <div id="nav-drawer" class="nav-drawer" aria-hidden="true" inert role="dialog" aria-modal="true" aria-label="Site navigation">
1529    <div class="nav-drawer__header">
1530      <a href="/" class="wordmark" aria-label="Wisdom Recall" tabindex="-1">
1531        <img src="/assets/branding/logo-mark-from-share.svg" alt="Wisdom Recall" class="logo-light" style="height:40px;width:auto;" />
1532        <img src="/assets/branding/logo-mark-from-share-white.svg" alt="Wisdom Recall" class="logo-dark" style="height:40px;width:auto;" />
1533      </a>
1534      <button class="nav-drawer__close" id="navDrawerClose" aria-label="Close menu">
1535        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
1536          <line x1="3" y1="3" x2="15" y2="15"/>
1537          <line x1="15" y1="3" x2="3" y2="15"/>
1538        </svg>
1539      </button>
1540    </div>
1541    <div class="nav-drawer__actions">
1542      <a href="https://app.wisdomrecall.com/signup" class="nav-cta nav-cta--block" data-cta="nav-drawer.signup" data-cta-section="nav" data-cta-variant="primary" data-cta-position="above-fold" target="_blank" rel="noopener noreferrer">Sign up free</a>
1543      <a href="https://app.wisdomrecall.com/login" class="nav-drawer__login" data-cta="nav-drawer.login" data-cta-section="nav" data-cta-variant="secondary" target="_blank" rel="noopener noreferrer">Already have an account? Log in</a>
1544    </div>
1545    <nav class="nav-drawer__links" aria-label="Mobile navigation">
1546      <a href="/guides" id="navDrawerFirstLink">Guides</a>
1547      <a href="/for/influencer-guide" aria-current="page">Influencers</a>
1548      <a href="/for/associations">Associations</a>
1549      <a href="/#hero">Memory</a>
1550      <a href="/#pricing">Pricing</a>
1551      <a href="/#faq">FAQ</a>
1552      <a href="/support" style="display:block;font-size:17px;font-weight:600;padding:13px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;">Support</a>
1553      <button type="button" class="wr-contact-trigger" id="wr-contact-drawer-trigger" aria-haspopup="dialog" style="display:block;width:100%;text-align:left;font-size:17px;font-weight:600;padding:13px 0;border-bottom:1px solid var(--rule);color:var(--ink);">Contact</button>
1554    </nav>
1555    <div class="nav-drawer__footer">
1556      <div class="nav-drawer__theme">
1557        <span>Theme</span>
1558        <button id="themeToggleDrawer" class="theme-btn" aria-label="Toggle theme" title="Toggle theme">
1559          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path></svg>
1560        </button>
1561      </div>
1562    </div>
1563  </div>
1564  <!-- WR:HEADER:END -->
1565<section id="top" class="hero">
1566  <div class="wrap">
1567    <div class="hero-split">
1568      <div class="hero-guide-wrap">
1569        <div class="v1-frame">
1570          <div class="v1-visual" role="img" aria-label="A creator recording in her studio, becoming a Guide her audience can return to">
1571            <div class="v1-swap">
1572              <img src="/captures/personas/v8/3-influencers-r8-caucasian-brunette-studio.webp" alt="" loading="eager" decoding="async" fetchpriority="high" width="900" height="1200">
1573              <img src="/captures/personas/v8/ava-guide-cam-warmsmile.webp" alt="" loading="eager" decoding="async" width="896" height="1200">
1574            </div>
1575          </div>
1576          <div class="v1-overlay">
1577            <span class="no">No. 001</span>Founding Guide &middot; wisdomrecall.com/yourname
1578          </div>
1579        </div>
1580      </div>
1581
1582      <div class="hero-copy">
1583        <h1 class="hero-h1">The algorithm owns your audience.<br><em>Take them with you.</em></h1>
1584        <p class="hero-sub">Wisdom Recall turns everything you've made into an AI Guide and Pearls of wisdom that your followers can visit, ask, and return to, anytime, whether the feed shows your next post or not.</p>
1585        <div class="hero-ctas">
1586          <a class="btn btn-primary wr-apply-trigger" href="#" data-cta="influencer-guide.apply" data-cta-section="hero" data-cta-position="above-fold">Apply to Become a Guide <span class="arrow" aria-hidden="true">&rarr;</span></a>
1587          <a class="btn-live-pill" href="/guides#try-it-live" data-cta="influencer-guide.see-live" data-cta-section="hero" data-cta-position="above-fold">
1588            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M10 8.5v7l6-3.5-6-3.5z" fill="currentColor" stroke="none"/></svg>
1589            <span>See a live Guide in action</span>
1590            <span class="arrow" aria-hidden="true">&rarr;</span>
1591          </a>
1592        </div>
1593        <p class="hero-trust">Built for creators on Instagram, TikTok, Facebook, and YouTube.</p>
1594      </div>
1595    </div>
1596  </div>
1597</section>
1598
1599<!-- WR:SPINE:START -->
1600<section class="brand-spine" aria-label="Wisdom Recall">
1601  <p class="brand-spine__line">Wisdom Recall gives <em>trusted knowledge</em><br>a <em>persistent place in&nbsp;AI.</em></p>
1602</section>
1603<!-- WR:SPINE:END -->
1604
1605<!-- ─── §01 Fear ─────────────────────────────────────────────────── -->
1606<section id="fear" class="sec fear-sec">
1607  <div class="wrap">
1608    <div class="sec-head">
1609      <div class="sec-head-l">
1610        <div class="eyebrow">You think about it every day.</div>
1611        <h2 class="eh">What if the feed <em>stops feeding you?</em></h2>
1612      </div>
1613      <div class="sec-head-r"><p>One algorithm update can change your reach overnight.</p></div>
1614    </div>
1615
1616    <div class="fear-grid">
1617    <div class="fear-col">
1618    <ul class="fear-list">
1619      <li>Will the algorithm bury my next video?</li>
1620      <li>What happens if my account gets banned?</li>
1621      <li>Can I build predictable income?</li>
1622      <li>Can I slow down without disappearing?</li>
1623      <li>How do I stand out against endless AI content?</li>
1624    </ul>
1625    <p class="fear-close">You built the audience. <em>The platform still controls the connection.</em></p>
1626    </div>
1627    <div class="cliff-card">
1628      <p class="cliff-title">Reach &middot; Creator, 2025-2026</p>
1629      <svg class="cliff-svg" viewBox="0 0 646 260" role="img" aria-label="Line chart of a creator's reach climbing steadily from September 2025 through January 2026, then falling sharply after the February 2026 discovery reset, ending well below where it started">
1630        <defs>
1631          <linearGradient id="cliffArea" x1="0" y1="0" x2="0" y2="1">
1632            <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.16"/>
1633            <stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>
1634          </linearGradient>
1635        </defs>
1636        <line x1="44" y1="68" x2="602" y2="68" stroke="var(--rule)" stroke-width="1"/>
1637        <line x1="44" y1="114" x2="602" y2="114" stroke="var(--rule)" stroke-width="1"/>
1638        <line x1="44" y1="160" x2="602" y2="160" stroke="var(--rule)" stroke-width="1"/>
1639        <path d="M60,150 C100,140 120,132 150,125 C190,115 210,105 240,98 C280,85 300,78 330,70 C370,58 395,52 420,48 C450,80 480,110 510,140 C528,158 542,178 556,194 L556,210 L60,210 Z" fill="url(#cliffArea)" stroke="none" vector-effect="non-scaling-stroke"/>
1640        <path d="M60,150 C100,140 120,132 150,125 C190,115 210,105 240,98 C280,85 300,78 330,70 C370,58 395,52 420,48" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
1641        <path d="M420,48 C450,80 480,110 510,140 C528,158 542,178 556,194" fill="none" stroke="var(--gold-ink)" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 6" vector-effect="non-scaling-stroke"/>
1642        <line x1="510" y1="18" x2="510" y2="204" stroke="var(--gold)" stroke-width="1" stroke-dasharray="4 6"/>
1643        <path d="M498,60 L510,78 L522,60 Z" fill="var(--gold-ink)" stroke="none"/>
1644        <text x="598" y="34" text-anchor="end" class="cliff-change-label" font-style="italic">Discovery reset</text>
1645        <text x="598" y="50" text-anchor="end" class="cliff-change-label" font-style="italic">&middot; Feb 2026</text>
1646        <circle cx="60" cy="150" r="4" fill="var(--bg-white)" stroke="var(--accent)" stroke-width="1.5"/>
1647        <circle cx="420" cy="48" r="4.5" fill="var(--accent)"/>
1648        <circle cx="556" cy="194" r="4" fill="var(--bg-white)" stroke="var(--gold-ink)" stroke-width="1.5"/>
1649        <line x1="44" y1="210" x2="602" y2="210" stroke="var(--rule-strong)" stroke-width="1"/>
1650        <line x1="60" y1="210" x2="60" y2="216" stroke="var(--rule-strong)" stroke-width="1"/>
1651        <line x1="150" y1="210" x2="150" y2="216" stroke="var(--rule-strong)" stroke-width="1"/>
1652        <line x1="240" y1="210" x2="240" y2="216" stroke="var(--rule-strong)" stroke-width="1"/>
1653        <line x1="330" y1="210" x2="330" y2="216" stroke="var(--rule-strong)" stroke-width="1"/>
1654        <line x1="420" y1="210" x2="420" y2="216" stroke="var(--rule-strong)" stroke-width="1"/>
1655        <line x1="510" y1="210" x2="510" y2="216" stroke="var(--rule-strong)" stroke-width="1"/>
1656        <text x="60" y="226" text-anchor="middle" class="cliff-axis-label">Sep &#39;25</text>
1657        <text x="150" y="226" text-anchor="middle" class="cliff-axis-label">Oct</text>
1658        <text x="240" y="226" text-anchor="middle" class="cliff-axis-label">Nov</text>
1659        <text x="330" y="226" text-anchor="middle" class="cliff-axis-label">Dec</text>
1660        <text x="420" y="226" text-anchor="middle" class="cliff-axis-label">Jan &#39;26</text>
1661        <text x="510" y="226" text-anchor="middle" class="cliff-axis-label">Feb</text>
1662      </svg>
1663      <p class="cliff-quote">&ldquo;You go to bed with a career and wake up with a hobby.&rdquo;<span class="cliff-cred">&ndash; an anonymous creator, on the 2026 discovery reset</span></p>
1664    </div>
1665    </div>
1666  </div>
1667</section>
1668
1669<!-- ─── §02 Solution · platform attention -> lasting connections ──── -->
1670<section id="path" class="sec transform-sec">
1671  <div class="wrap">
1672    <div class="sec-head">
1673      <div class="sec-head-l">
1674        <div class="eyebrow">The transformation.</div>
1675        <h2 class="eh">From platform attention to <em>lasting connections.</em></h2>
1676      </div>
1677      <div class="sec-head-r"><p>Wisdom Recall turns your content into a relationship <em>you own</em>. Pearls hold content and are the connection between you, your followers, and their AI.</p></div>
1678    </div>
1679
1680    <div class="transform-grid">
1681
1682      <!-- LEFT: platform attention -->
1683      <div class="transform-col transform-col--left">
1684        <div class="transform-pill transform-pill--muted">
1685          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1.5 12S5 5 12 5s10.5 7 10.5 7-3.5 7-10.5 7S1.5 12 1.5 12z"/><circle cx="12" cy="12" r="3"/></svg>
1686          <span class="transform-pill-copy"><strong>Likes &amp; views</strong><span>Platform attention.</span></span>
1687        </div>
1688
1689        <div class="tw-phone">
1690          <div class="tw-phone-notch" aria-hidden="true"></div>
1691          <div class="tw-phone-screen">
1692            <div class="feed-post">
1693              <div class="feed-post-header">
1694                <span class="feed-avatar"><img src="/captures/personas/v8/ava-guide-cam-warmsmile.webp" alt="" loading="lazy" decoding="async" width="896" height="1200"></span>
1695                <span class="feed-handle">@stylewithava<span class="feed-time">2h</span></span>
1696              </div>
1697              <div class="feed-image"><img src="/captures/personas/v8/3-influencers-r8-caucasian-brunette-studio.webp" alt="A creator's styled feed post" loading="lazy" decoding="async" width="900" height="1200"></div>
1698              <p class="feed-caption">3 ways to elevate your everyday style</p>
1699              <div class="feed-engagement">
1700                <span><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9z"/></svg>12.4K</span>
1701                <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M1.5 12S5 5 12 5s10.5 7 10.5 7-3.5 7-10.5 7S1.5 12 1.5 12z"/><circle cx="12" cy="12" r="2.5"/></svg>147K</span>
1702                <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4A9 9 0 1 1 21 11.5z"/></svg>320</span>
1703                <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13"/></svg>87</span>
1704              </div>
1705              <div class="feed-skeleton" aria-hidden="true"><span></span><span></span></div>
1706            </div>
1707          </div>
1708        </div>
1709
1710        <ul class="transform-cons">
1711          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 5l14 14M19 5L5 19"/></svg>No direct access to followers</li>
1712          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 5l14 14M19 5L5 19"/></svg>Algorithm controls reach</li>
1713          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 5l14 14M19 5L5 19"/></svg>Attention is rented, not owned</li>
1714          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 5l14 14M19 5L5 19"/></svg>Low conversion, hard to capture value</li>
1715        </ul>
1716      </div>
1717
1718      <!-- CENTER: the mechanism -->
1719      <div class="transform-col transform-col--center">
1720        <div class="transform-pill transform-pill--accent">
1721          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l1.8 5.6L19 9l-5.2 1.6L12 16l-1.8-5.4L5 9l5.2-1.4L12 2z"/><path d="M19 15l.8 2.4L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.6L19 15z"/></svg>
1722          <span class="transform-pill-copy"><strong>Interactive AI Guide</strong><span>Your content, reimagined.</span></span>
1723        </div>
1724
1725        <span class="transform-stream-in" aria-hidden="true">
1726          <svg viewBox="0 0 100 90" preserveAspectRatio="none">
1727            <path class="stream-pulse" d="M2,8 C50,8 60,40 96,45" fill="none" stroke="var(--accent)" stroke-width="1.4" stroke-dasharray="2 6" opacity="0.9"/>
1728            <path class="stream-pulse" d="M2,30 C50,30 60,42 96,45" fill="none" stroke="var(--accent)" stroke-width="1.4" stroke-dasharray="2 6" opacity="0.65" style="animation-delay:.3s"/>
1729            <path class="stream-pulse" d="M2,58 C50,58 60,48 96,45" fill="none" stroke="var(--accent)" stroke-width="1.4" stroke-dasharray="2 6" opacity="0.65" style="animation-delay:.6s"/>
1730            <path class="stream-pulse" d="M2,82 C50,82 60,52 96,45" fill="none" stroke="var(--accent)" stroke-width="1.4" stroke-dasharray="2 6" opacity="0.4" style="animation-delay:.9s"/>
1731            <circle cx="4" cy="8" r="3.2" fill="var(--accent)"/>
1732            <circle cx="4" cy="30" r="3.2" fill="var(--accent)"/>
1733            <circle cx="4" cy="58" r="3.2" fill="var(--accent)"/>
1734            <circle cx="4" cy="82" r="3.2" fill="var(--accent)"/>
1735          </svg>
1736        </span>
1737
1738        <div class="transform-portrait-wrap">
1739          <svg class="transform-ring" viewBox="0 0 100 100" aria-hidden="true">
1740            <circle cx="50" cy="50" r="47" fill="none" stroke="var(--accent)" stroke-width="1" stroke-opacity="0.35" stroke-dasharray="1 5"/>
1741            <circle cx="50" cy="50" r="47" fill="none" stroke="var(--accent)" stroke-width="1.5" stroke-dasharray="60 240" stroke-linecap="round"/>
1742          </svg>
1743          <div class="transform-portrait"><img src="/captures/personas/v8/ava-guide-cam-warmsmile.webp" alt="Your Guide, built from your content and your voice" loading="lazy" decoding="async" width="896" height="1200"></div>
1744          <span class="transform-ai-badge">AI</span>
1745        </div>
1746
1747        <div class="transform-card">
1748          <p class="transform-card-title">Your AI Guide</p>
1749          <ul class="transform-card-list">
1750            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>Understands your followers questions</li>
1751            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>Gives personalized recommendations</li>
1752            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>Available 24/7</li>
1753            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>Learns and improves</li>
1754          </ul>
1755        </div>
1756
1757        <ul class="transform-pros">
1758          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-4.35-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.65-9.5 9-9.5 9z"/></svg><span><strong>You own the relationship</strong>Direct access to your audience</span></li>
1759          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4A9 9 0 1 1 21 11.5z"/></svg><span><strong>Deeper engagement</strong>Meaningful conversations</span></li>
1760          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17l6-6 4 4 8-8M15 6h6v6"/></svg><span><strong>More value</strong>Higher trust, higher lifetime value</span></li>
1761        </ul>
1762
1763        <span class="transform-stream-out" aria-hidden="true">
1764          <svg viewBox="0 0 80 40" preserveAspectRatio="none">
1765            <path d="M2,20 L64,20" fill="none" stroke="var(--gold)" stroke-width="1.5" stroke-dasharray="4 6"/>
1766            <path d="M56,12 L68,20 L56,28" fill="none" stroke="var(--gold-ink)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1767          </svg>
1768        </span>
1769      </div>
1770
1771      <!-- RIGHT: owned relationship -->
1772      <div class="transform-col transform-col--right">
1773        <div class="transform-pill transform-pill--relation">
1774          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
1775          <span class="transform-pill-copy"><strong>Direct relationship</strong><span>Owned audience connection.</span></span>
1776        </div>
1777
1778        <div class="tw-phone">
1779          <div class="tw-phone-notch" aria-hidden="true"></div>
1780          <div class="tw-phone-screen">
1781            <div class="feed-post">
1782              <div class="feed-post-header">
1783                <span class="feed-avatar"><img src="/captures/personas/v8/ava-guide-cam-warmsmile.webp" alt="" loading="lazy" decoding="async" width="896" height="1200"></span>
1784                <span class="feed-handle">Your AI Guide<span class="feed-time" style="color:color-mix(in srgb, var(--accent) 60%, var(--gold-warm) 40%);">&#9679; Always here for you</span></span>
1785              </div>
1786              <p class="tw-msg tw-msg--out" style="margin-top:0.4rem;">What are your go-to pieces for a timeless capsule wardrobe?</p>
1787              <div class="tw-msg tw-msg--in" style="margin-top:0.4rem;">
1788                <p style="margin:0 0 0.5rem;">Great question! Here are my must-have timeless pieces that work for any season and occasion.</p>
1789                <ul class="transform-card-list" style="margin:0 0 0.5rem;">
1790                  <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>Tailored blazer</li>
1791                  <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>White button-down</li>
1792                  <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>High-waisted trousers</li>
1793                  <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>Classic denim</li>
1794                  <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>Minimal jewelry</li>
1795                </ul>
1796                <p style="margin:0 0 0.5rem;">I can help you build looks around these or find options within your budget. What's next?</p>
1797                <p style="margin:0; font-weight:700; color:var(--accent);">I'll be releasing a new Pearl drop next week about my favorite Ital
1797ian footwear.</p>
1798              </div>
1799            </div>
1800          </div>
1801        </div>
1802
1803      </div>
1804
1805    </div>
1806
1807    <p class="transform-how">We build it, host it, and keep it running. Fully turnkey.</p>
1808
1809    <p class="transform-close">Turn attention into <em>ownership.</em> Build relationships that <em>last.</em></p>
1810  </div>
1811</section>
1812
1813<!-- ─── §03 Offer + risk reversal ───────────────────────────────── -->
1814<section id="offer" class="sec offer-sec">
1815  <div class="wrap offer-inner">
1816    <div class="eyebrow">The Founding Influencer Guide Program</div>
1817    <h2 class="eh">Become the beautiful <em>Guide</em> your audience deserves.</h2>
1818    <p class="offer-sub">We build your Guide, shape your world, and help you move your audience beyond the feed.</p>
1819
1820    <div class="flow-wrap">
1821      <div class="flow-row">
1822        <figure class="flow-card">
1823          <div class="flow-frame">
1824            <img class="flow-img" src="/captures/personas/v8/ava-guide-cam-warmsmile.webp" alt="A Guide portrait" loading="lazy" decoding="async" width="896" height="1200">
1825          </div>
1826          <figcaption class="flow-cap">
1827            <span class="flow-eyebrow">Your Guide</span>
1828            <span class="flow-sub-txt">an AI version of you</span>
1829          </figcaption>
1830        </figure>
1831
1832        <span class="flow-arrow" aria-hidden="true">
1833          <svg viewBox="0 0 40 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M2 12h34" stroke-dasharray="3 4"/><path d="M32 6l6 6-6 6"/></svg>
1834        </span>
1835
1836        <figure class="flow-card flow-card--pearl">
1837          <div class="flow-frame">
1838            <div class="flow-pearl-stage" role="img" aria-label="Three glass Pearls">
1839              <img class="flow-pearl-img flow-pearl-img--side flow-pearl-img--left" src="/captures/personas/v8/pearl-glass-blue.webp" alt="" loading="lazy" decoding="async" width="350" height="350">
1840              <img class="flow-pearl-img flow-pearl-img--center" src="/captures/personas/v8/pearl-glass-blue.webp" alt="" loading="lazy" decoding="async" width="350" height="350">
1841              <img class="flow-pearl-img flow-pearl-img--side flow-pearl-img--right" src="/captures/personas/v8/pearl-glass-blue.webp" alt="" loading="lazy" decoding="async" width="350" height="350">
1842            </div>
1843          </div>
1844          <figcaption class="flow-cap">
1845            <span class="flow-eyebrow">Pearls</span>
1846            <span class="flow-sub-txt">your content, reshaped</span>
1847          </figcaption>
1848        </figure>
1849
1850        <span class="flow-arrow" aria-hidden="true">
1851          <svg viewBox="0 0 40 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M2 12h34" stroke-dasharray="3 4"/><path d="M32 6l6 6-6 6"/></svg>
1852        </span>
1853
1854        <figure class="flow-card">
1855          <div class="flow-frame">
1856            <img class="flow-img" src="/captures/personas/v8/audience-viewer-couch.webp" alt="A young follower watching a Guide from her couch" loading="lazy" decoding="async" width="896" height="1200">
1857          </div>
1858          <figcaption class="flow-cap">
1859            <span class="flow-eyebrow">Your Audience</span>
1860            <span class="flow-sub-txt">asking, returning, buying</span>
1861          </figcaption>
1862        </figure>
1863      </div>
1864      <p class="flow-caption">Your Guide, made of Pearls, meets your audience. Every day. Without you needing to be online.</p>
1865      <div class="flow-learn">
1866        <a href="https://wisdomrecall.com/" target="_blank" rel="noopener" data-cta="influencer-guide.learn-pearls" data-cta-section="offer" data-cta-position="flow-diagram">
1867          All about Pearls
1868          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
1869        </a>
1870      </div>
1871    </div>
1872
1873    <p class="ticket-band">Founding Influencer Guide &middot; Cohort I</p>
1874
1875    <div class="ticket-pair">
1876      <div class="offer-card">
1877        <svg class="offer-card-corner offer-card-corner--tl" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M0 5V0h5"/></svg>
1878        <svg class="offer-card-corner offer-card-corner--tr" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M0 5V0h5"/></svg>
1879        <svg class="offer-card-corner offer-card-corner--bl" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M0 5V0h5"/></svg>
1880        <svg class="offer-card-corner offer-card-corner--br" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M0 5V0h5"/></svg>
1881        <div class="offer-card-name">Setup</div>
1882        <p class="offer-card-title">Launch Your Guide</p>
1883        <ul class="offer-card-includes">
1884          <li>Custom Influencer Guide</li>
1885          <li>Voice and content mapping</li>
1886          <li>Premium Guide page</li>
1887          <li>Starter interactive content library</li>
1888          <li>Five launch Pearl Drops</li>
1889          <li>Email audience strategy</li>
1890          <li>Launch copy for social and email</li>
1891          <li>Audience migration plan</li>
1892          <li>Recurring-revenue planning</li>
1893          <li>Personal launch support</li>
1894        </ul>
1895        <a class="btn btn-primary wr-apply-trigger" href="#" data-cta="influencer-guide.apply" data-cta-section="offer" data-cta-position="launch-card">
1895Apply to Become a Guide</a>
1896      </div>
1897
1898      <div class="ticket-perf" aria-hidden="true">
1899        <div class="ticket-perf-line"><span class="ticket-perf-glyph"><svg width="18" height="34" viewBox="0 0 18 34" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><circle cx="9" cy="7" r="4"/><line x1="9" y1="12.5" x2="9" y2="21.5"/><circle cx="9" cy="27" r="4"/></svg></span></div>
1900      </div>
1901
1902      <div class="offer-card offer-card--growth">
1903        <svg class="offer-card-corner offer-card-corner--tl" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M0 5V0h5"/></svg>
1904        <svg class="offer-card-corner offer-card-corner--tr" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M0 5V0h5"/></svg>
1905        <svg class="offer-card-corner offer-card-corner--bl" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M0 5V0h5"/></svg>
1906        <svg class="offer-card-corner offer-card-corner--br" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M0 5V0h5"/></svg>
1907        <div class="offer-card-name">Ongoing</div>
1908        <p class="offer-card-title">Keep It Growing</p>
1909        <ul class="offer-card-includes">
1910          <li>Guide hosting</li>
1911          <li>Audience access</li>
1912          <li>Five new Pearl Drops each month</li>
1913          <li>Guide content updates</li>
1914          <li>Email audience tools</li>
1915          <li>Engagement reporting</li>
1916          <li>Platform support</li>
1917          <li>Quarterly growth review</li>
1918        </ul>
1919        <a class="btn btn-ghost wr-apply-trigger" href="#" data-cta="influencer-guide.apply" data-cta-section="offer" data-cta-position="growth-card">Apply to Become a Guide</a>
1920      </div>
1921    </div>
1922
1923    <p class="offer-fine">After you apply, we'll follow up with next steps and pricing for your Cohort I spot.</p>
1924
1925    <div class="honest-box">
1926      <h3>Who this isn't for.</h3>
1927      <p>This isn't for creators still figuring out their voice, or looking for a shortcut to virality. If you don't already have followers who trust you, we're not the right move yet.</p>
1928    </div>
1929  </div>
1930</section>
1931
1932<!-- ─── §04 Apply ────────────────────────────────────────────────── -->
1933<section id="final" class="final-cta">
1934  <div class="wrap final-cta-inner">
1935    <div class="eyebrow">Your audience is already moving into AI.</div>
1936
1937    <h2 class="eh">Make sure they can <em>find you</em> there.</h2>
1938    <p class="final-cta-copy">Build a Guide that keeps your audience connected to you, whether or not the feed cooperates.</p>
1939    <div class="final-cta-ctas">
1940      <a class="btn btn-primary wr-apply-trigger" href="#" data-cta="influencer-guide.apply" data-cta-section="final" data-cta-position="primary">Apply to Become a Guide</a>
1941    </div>
1942    <p class="final-cta-fine">Stop chasing relevance. <em>Become unforgettable.</em></p>
1943  </div>
1944</section>
1945
1946<!-- ─── Footer ──────────────────────────────────────────────────── -->
1947<footer class="foot">
1948  <div class="wrap">
1949    <div class="foot-inner">
1950      <span class="foot-copy">&copy; 2026 Wisdom Recall</span>
1951      <nav class="foot-links" aria-label="Footer">
1952        <a href="/#pricing">Pricing</a>
1953        <a href="/privacy">Privacy</a>
1954        <a href="/terms">Terms</a>
1955        <a href="/support">Support</a>
1956        <button type="button" class="wr-contact-trigger" id="wr-contact-foot-trigger" aria-haspopup="dialog">Contact</button>
1957      </nav>
1958    </div>
1959    <p class="foot-legal">Users are responsible for ensuring they have the right to save, use, share, or distribute content through Wisdom Recall. Wisdom Recall does not grant rights to third-party content or materials that users add to their Pearl Vault.</p>
1960  </div>
1961</footer>
1962
1963<!-- ─── Sticky mobile CTA ────────────────────────────────────────── -->
1964<div class="sticky-cta">
1965  <a href="#" class="wr-apply-trigger" data-cta="influencer-guide.apply" data-cta-section="mobile-sticky" data-cta-position="bottom">
1965Apply to Become a Guide</a>
1966</div>
1967
1968  <!-- ── CONTACT MODAL ──────────────────────────────────────── -->
1969  <div
1970    id="wr-contact-modal"
1971    class="wr-contact-backdrop"
1972    role="dialog"
1973    aria-modal="true"
1974    aria-labelledby="wr-contact-title"
1975    aria-describedby="wr-contact-desc"
1976    aria-hidden="true"
1977    inert
1978  >
1979    <div class="wr-contact-dialog">
1980      <button type="button" class="wr-contact-close" id="wr-contact-close" aria-label="Close contact form">
1981        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
1982          <line x1="1" y1="1" x2="13" y2="13"/>
1983          <line x1="13" y1="1" x2="1" y2="13"/>
1984        </svg>
1985      </button>
1986
1987      <h2 class="wr-contact-title" id="wr-contact-title">Get in touch</h2>
1988      <p class="wr-contact-sub" id="wr-contact-desc">Have a question about Wisdom Recall? We read every message.</p>
1989
1990      <!-- Success state (hidden until submit succeeds) -->
1991      <div class="wr-contact-success" id="wr-contact-success" role="status" aria-live="polite">
1992        <div class="wr-contact-success-icon" aria-hidden="true">
1993          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
1994        </div>
1995        <h3>Message sent</h3>
1996        <p>Thanks for reaching out. We typically respond within one business day.</p>
1997        <button type="button" class="wr-contact-submit" id="wr-contact-success-close">Close</button>
1998      </div>
1999
2000      <!-- Form (replaced by success on submit) -->
2001      <form id="wr-contact-form" novalidate autocomplete="on">
2002        <!-- Honeypot: hidden from humans, readable by bots -->
2003        <div class="wr-contact-hp" aria-hidden="true">
2004          <label for="wr-hp-field">Leave this empty</label>
2005          <input type="text" id="wr-hp-field" name="_hp" tabindex="-1" autocomplete="off" />
2006        </div>
2007
2008        <div class="wr-contact-field">
2009          <label for="wr-contact-name">Name <span class="wr-req" aria-label="required">*</span></label>
2010          <input type="text" id="wr-contact-name" name="name" autocomplete="given-name" required aria-required="true" aria-describedby="wr-name-error" />
2011          <div class="wr-contact-field-error" id="wr-name-error" role="alert">Please enter your name.</div>
2012        </div>
2013
2014        <div class="wr-contact-field">
2015          <label for="wr-contact-email">Email <span class="wr-req" aria-label="required">*</span></label>
2016          <input type="email" id="wr-contact-email" name="email" autocomplete="email" required aria-required="true" aria-describedby="wr-email-error" />
2017          <div class="wr-contact-field-error" id="wr-email-error" role="alert">Please enter a valid email address.</div>
2018        </div>
2019
2020        <div class="wr-contact-field">
2021          <label for="wr-contact-company">Company <span class="wr-opt">(optional)</span></label>
2022          <input type="text" id="wr-contact-company" name="company" autocomplete="organization" />
2023        </div>
2024
2025        <div class="wr-contact-field">
2026          <label for="wr-contact-message">Message <span class="wr-req" aria-label="required">*</span></label>
2027          <textarea id="wr-contact-message" name="message" required aria-required="true" aria-describedby="wr-message-error"></textarea>
2028          <div class="wr-contact-field-error" id="wr-message-error" role="alert">Please enter a message.</div>
2029        </div>
2030
2031        <div class="wr-contact-form-error" id="wr-contact-form-error" role="alert">
2032          Something went wrong. Please try again, or email us at <a href="mailto:[email protected]" style="color:inherit;text-decoration:underline;" target="_blank" rel="noopener noreferrer">[email protected]</a>.
2033        </div>
2034
2035        <div class="cf-turnstile" data-sitekey="0x4AAAAAADuO8N_5t1a2RLEO" data-theme="light"></div>
2036
2037        <div class="wr-contact-actions">
2038          <button type="button" class="wr-contact-cancel" id="wr-contact-cancel">Cancel</button>
2039          <button type="submit" class="wr-contact-submit" id="wr-contact-submit">Send message</button>
2040        </div>
2041      </form>
2042    </div>
2043  </div>
2044
2045  <!-- ── APPLY TO BECOME A GUIDE MODAL (3-step wizard) ─────────── -->
2046  <div
2047    id="wr-apply-modal"
2048    class="wr-apply-backdrop"
2049    role="dialog"
2050    aria-modal="true"
2051    aria-labelledby="wr-apply-title"
2052    aria-describedby="wr-apply-desc"
2053    aria-hidden="true"
2054    inert
2055  >
2056    <div class="wr-apply-dialog">
2057      <button type="button" class="wr-apply-close" id="wr-apply-close" aria-label="Close application form">
2058        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
2059          <line x1="1" y1="1" x2="13" y2="13"/>
2060          <line x1="13" y1="1" x2="1" y2="13"/>
2061        </svg>
2062      </button>
2063
2064      <h2 class="wr-apply-title" id="wr-apply-title">Apply to become a Guide</h2>
2065      <p class="wr-apply-sub" id="wr-apply-desc">Selected creators work with Wisdom Recall to turn their expertise into an interactive AI Guide that builds direct audience relationships and captures qualified connections.</p>
2066      <p class="wr-apply-progress" id="wr-apply-progress" aria-l
2066ive="polite">Step 1 of 3</p>
2067
2068      <!-- Success state (hidden until submit succeeds) -->
2069      <div class="wr-apply-success" id="wr-apply-success" role="status" aria-live="polite">
2070        <div class="wr-apply-success-icon" aria-hidden="true">
2071          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
2072        </div>
2073        <h3>Application received</h3>
2074        <p>Thanks for applying. We review every application and follow up if it looks like a fit.</p>
2075        <button type="button" class="wr-apply-submit" id="wr-apply-success-close">Close</button>
2076      </div>
2077
2078      <!-- Form (replaced by success on submit) -->
2079      <form id="wr-apply-form" novalidate autocomplete="on">
2080        <!-- Honeypot: hidden from humans, readable by bots -->
2081        <div class="wr-apply-hp" aria-hidden="true">
2082          <label for="wr-apply-hp-field">Leave this empty</label>
2083          <input type="text" id="wr-apply-hp-field" name="_hp" tabindex="-1" autocomplete="off" />
2084        </div>
2085
2086        <div class="wr-apply-step is-active" data-step="1">
2087          <h3>Your work</h3>
2088          <div class="wr-apply-field">
2089            <label for="wr-apply-profile">Primary profile or website <span class="wr-req" aria-label="required">*</span></label>
2090            <input type="text" id="wr-apply-profile" name="profile" placeholder="https://... or @handle" autocomplete="url" required aria-required="true" aria-describedby="wr-apply-profile-error" />
2091            <div class="wr-apply-field-error" id="wr-apply-profile-error" role="alert">Please share a profile or website link.</div>
2092          </div>
2093          <div class="wr-apply-field">
2094            <label for="wr-apply-niche">What people rely on you for <span class="wr-req" aria-label="required">*</span></label>
2095            <input type="text" id="wr-apply-niche" name="niche" required aria-required="true" aria-describedby="wr-apply-niche-error" />
2096            <div class="wr-apply-field-error" id="wr-apply-niche-error" role="alert">Please tell us your niche or subject.</div>
2097          </div>
2098          <div class="wr-apply-actions wr-apply-actions--end">
2099            <button type="button" class="wr-apply-next" id="wr-apply-next-1">Next</button>
2100          </div>
2101        </div>
2102
2103        <div class="wr-apply-step" data-step="2">
2104          <h3>Your audience</h3>
2105          <div class="wr-apply-field">
2106            <label for="wr-apply-audience">Audience size <span class="wr-req" aria-label="required">*</span></label>
2107            <select id="wr-apply-audience" name="audience_size" required aria-required="true" aria-describedby="wr-apply-audience-error">
2108              <option value="" disabled selected>Select a range</option>
2109              <option value="Under 5k">Under 5k</option>
2110              <option value="5k to 50k">5k to 50k</option>
2111              <option value="50k to 250k">50k to 250k</option>
2112              <option value="250k to 1M">250k to 1M</option>
2113              <option value="1M+">1M+</option>
2114            </select>
2115            <div class="wr-apply-field-error" id="wr-apply-audience-error" role="alert">Please select an audience size.</div>
2116          </div>
2117          <div class="wr-apply-field">
2118            <label for="wr-apply-why">Why would your audience want an ongoing conversation with your Guide? <span class="wr-req" aria-label="required">*</span></label>
2119            <textarea id="wr-apply-why" name="why_guide" required aria-required="true" aria-describedby="wr-apply-why-error"></textarea>
2120            <div class="wr-apply-field-error" id="wr-apply-why-error" role="alert">Please share why an ongoing Guide would help your audience.</div>
2121          </div>
2122          <div class="wr-apply-actions">
2123            <button type="button" class="wr-apply-back" id="wr-apply-back-2">Back</button>
2124            <button type="button" class="wr-apply-next" id="wr-apply-next-2">Next</button>
2125          </div>
2126        </div>
2127
2128        <div class="wr-apply-step" data-step="3">
2129          <h3>Where to reach you</h3>
2130          <div class="wr-apply-field">
2131            <label for="wr-apply-name">Name <span class="wr-req" aria-label="required">*</span></label>
2132            <input type="text" id="wr-apply-name" name="name" autocomplete="name" required aria-required="true" aria-describedby="wr-apply-name-error" />
2133            <div class="wr-apply-field-error" id="wr-apply-name-error" role="alert">Please enter your name.</div>
2134          </div>
2135          <div class="wr-apply-field">
2136            <label for="wr-apply-email">Email <span class="wr-req" aria-label="required">*</span></label>
2137            <input type="email" id="wr-apply-email" name="email" autocomplete="email" required aria-required="true" aria-describedby="wr-apply-email-error" />
2138            <div class="wr-apply-field-error" id="wr-apply-email-error" role="alert">Please enter a valid email address.</div>
2139          </div>
2140
2141          <div class="cf-turnstile" data-sitekey="0x4AAAAAADuO8N_5t1a2RLEO" data-theme="light"></div>
2142
2143          <div class="wr-apply-form-error" id="wr-apply-form-error" role="alert">
2144            Something went wrong. Please try again, or email us at <a href="mailto:[email protected]" style="color:inherit;text-decoration:underline;" target="_blank" rel="noopener noreferrer">[email protected]</a>.
2145          </div>
2146
2147          <div class="wr-apply-actions">
2148            <button type="button" class="wr-apply-back" id="wr-apply-back-3">Back</button>
2149            <button type="submit" class="wr-apply-submit" id="wr-apply-submit">Submit application</button>
2150          </div>
2151        </div>
2152      </form>
2153    </div>
2154  </div>
2155
2156<script>
2157    // Theme toggle
2158    (function(){
2159      var html = document.documentElement;
2160      var headerBtn = document.getElementById('themeToggle');
2161
2162      function applyTheme(mode) {
2163        html.setAttribute('data-theme', mode);
2164        document.body.setAttribute('data-theme', mode);
2165        localStorage.setItem('wr-theme', mode);
2166      }
2167
2168      var storedTheme = localStorage.getItem('wr-theme');
2169      if (storedTheme) applyTheme(storedTheme); else applyTheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
2170
2171      if (headerBtn) {
2172        headerBtn.addEventListener('click', function(){
2173          var current = html.getAttribute('data-theme') || 'light';
2174          applyTheme(current === 'light' ? 'dark' : 'light');
2175        });
2176      }
2177    })();
2178
2179    // Mobile nav drawer
2180    (function(){
2181      var hamburger = document.getElementById('navHamburger');
2182      var drawer = document.getElementById('nav-drawer');
2183      var closeBtn = document.getElementById('navDrawerClose');
2184      var themeDrawer = document.getElementById('themeToggleDrawer');
2185      if (!hamburger || !drawer) return;
2186
2187      var FOCUSABLE = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
2188
2189      function openDrawer() {
2190        drawer.removeAttribute('inert');
2191        drawer.setAttribute('aria-hidden', 'false');
2192        hamburger.setAttribute('aria-expanded', 'true');
2193        document.documentElement.style.overflow = 'hidden';
2194        // Inert the rest of the page so AT can't reach background content.
2195        document.querySelectorAll('body > *:not(#nav-drawer):not(.video-modal):not(script)').forEach(function(el){
2196          el.setAttribute('inert', '');
2197        });
2198        var first = document.getElementById('navDrawerFirstLink');
2199        if (first) setTimeout(function(){ first.focus(); }, 50);
2200      }
2201
2202      function closeDrawer() {
2203        drawer.setAttribute('aria-hidden', 'true');
2204        drawer.setAttribute('inert', '');
2205        hamburger.setAttribute('aria-expanded', 'false');
2206        document.documentElement.style.overflow = '';
2207        // Restore background AT access (don't strip inert from the modal itself).
2208        document.querySelectorAll('body > *[inert]:not(#nav-drawer):not(.video-modal)').forEach(function(el){
2209          el.removeAttribute('inert');
2210        });
2211        hamburger.focus();
2212      }
2213
2214      hamburger.addEventListener('click', function(){
2215        var isOpen = drawer.getAttribute('aria-hidden') === 'false';
2216        if (isOpen) { closeDrawer(); } else { openDrawer(); }
2217      });
2218
2219      if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
2220
2221      // Close on backdrop click (outside drawer content)
2222      drawer.addEventListener('click', function(e){
2223        if (e.target === drawer) closeDrawer();
2224      });
2225
2226      // Close on Escape
2227      document.addEventListener('keydown', function(e){
2228        if (e.key === 'Escape' && drawer.getAttribute('aria-hidden') === 'false') {
2229          closeDrawer();
2230        }
2231      });
2232
2233      // Focus trap
2234      drawer.addEventListener('keydown', function(e){
2235        if (e.key !== 'Tab') return;
2236        var focusable = Array.prototype.slice.call(drawer.querySelectorAll(FOCUSABLE));
2237        if (!focusable.length) return;
2238        var first = focusable[0];
2239        var last = focusable[focusable.length - 1];
2240        if (e.shiftKey) {
2241          if (document.activeElement === first) { e.preventDefault(); last.focus(); }
2242        } else {
2243          if (document.activeElement === last) { e.preventDefault(); first.focus(); }
2244        }
2245      });
2246
2247      // Close drawer links on navigation
2248      drawer.querySelectorAll('a[href]').forEach(function(link){
2249        link.addEventListener('click', function(){ closeDrawer(); });
2250      });
2251
2252      // Drawer theme toggle mirrors main toggle
2253      if (themeDrawer) {
2254        themeDrawer.addEventListener('click', function(){
2255          var current = document.documentElement.getAttribute('data-theme') || 'light';
2256          var next = current === 'light' ? 'dark' : 'light';
2257          document.documentElement.setAttribute('data-theme', next);
2258          document.body.setAttribute('data-theme', next);
2259          localStorage.setItem('wr-theme', next);
2260        });
2261      }
2262    })();
2263
2264    // Contact modal, IIFE, plain ES5-compatible
2265    (function () {
2266      var ENDPOINT = 'https://dkquhuvgsvsuzvjkippv.supabase.co/functions/v1/submit-contact';
2267      var SOURCE = 'influencer-guide';
2268
2269      var backdrop = document.getElementById('wr-contact-modal');
2270      var form     = document.getElementById('wr-contact-form');
2271      var closeBtn = document.getElementById('wr-contact-close');
2272      var cancelBtn = document.getElementById('wr-contact-cancel');
2273      var submitBtn = document.getElementById('wr-contact-submit');
2274      var successDiv = document.getElementById('wr-contact-success');
2275      var successClose = document.getElementById('wr-contact-success-close');
2276      var formError = document.getElementById('wr-contact-form-error');
2277
2278      var lastTrigger = null;
2279
2280      // All trigger buttons (nav desktop, nav drawer, footer)
2281      var triggers = document.querySelectorAll('.wr-contact-trigger');
2282
2283      // Focusable selector
2284      var FOCUSABLE = 'input:not([tabindex="-1"]), textarea:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), [tabindex]:not
2284([tabindex="-1"])';
2285
2286      function openModal(triggerEl) {
2287        lastTrigger = triggerEl || null;
2288        backdrop.setAttribute('aria-hidden', 'false'); backdrop.removeAttribute('inert');
2289        backdrop.classList.add('wr-open');
2290        document.documentElement.style.overflow = 'hidden';
2291        // Focus first field
2292        setTimeout(function () {
2293          var first = backdrop.querySelector(FOCUSABLE);
2294          if (first) first.focus();
2295        }, 60);
2296      }
2297
2298      function closeModal() {
2299        backdrop.setAttribute('aria-hidden', 'true'); backdrop.setAttribute('inert', '');
2300        backdrop.classList.remove('wr-open');
2301        document.documentElement.style.overflow = '';
2302        if (lastTrigger) {
2303          try { lastTrigger.focus(); } catch (e) {}
2304        }
2305      }
2306
2307      function resetForm() {
2308        form.reset();
2309        // Clear error states
2310        var errEls = form.querySelectorAll('.wr-contact-field-error');
2311        for (var i = 0; i < errEls.length; i++) errEls[i].classList.remove('wr-visible');
2312        var inputs = form.querySelectorAll('input, textarea');
2313        for (var j = 0; j < inputs.length; j++) inputs[j].removeAttribute('aria-invalid');
2314        if (formError) formError.classList.remove('wr-visible');
2315        // Re-show form, hide success
2316        if (successDiv) successDiv.classList.remove('wr-visible');
2317        form.style.display = '';
2318        if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Send message'; }
2319      }
2320
2321      // Wire triggers
2322      for (var t = 0; t < triggers.length; t++) {
2323        (function (btn) {
2324          btn.addEventListener('click', function () {
2325            // If mobile drawer is open, close it first
2326            var drawer = document.getElementById('nav-drawer');
2327            if (drawer && drawer.getAttribute('aria-hidden') === 'false') {
2328              drawer.setAttribute('aria-hidden', 'true');
2329              var hamburger = document.getElementById('navHamburger');
2330              if (hamburger) hamburger.setAttribute('aria-expanded', 'false');
2331              document.documentElement.style.overflow = '';
2332            }
2333            resetForm();
2334            openModal(btn);
2335          });
2336        })(triggers[t]);
2337      }
2338
2339      // Close buttons
2340      if (closeBtn) closeBtn.addEventListener('click', closeModal);
2341      if (cancelBtn) cancelBtn.addEventListener('click', closeModal);
2342      if (successClose) successClose.addEventListener('click', closeModal);
2343
2344      // Deep-link auto-open: ?contact=1 in the URL opens the modal on
2345      // load. Lets other surfaces (e.g. dashboard cap modals linking
2346      // Team/Enterprise contact) jump straight to the form. We strip the
2347      // param from history so refreshes do not reopen the modal.
2348      try {
2349        var params = new URLSearchParams(window.location.search);
2350        if (params.get('contact') === '1') {
2351          resetForm();
2352          openModal(null);
2353          params.delete('contact');
2354          var newSearch = params.toString();
2355          var newUrl = window.location.pathname + (newSearch ? '?' + newSearch : '') + window.location.hash;
2356          window.history.replaceState({}, '', newUrl);
2357        }
2358      } catch (e) { /* URLSearchParams or history unavailable - skip */ }
2359
2360      // Backdrop click (outside dialog)
2361      backdrop.addEventListener('click', function (e) {
2362        if (e.target === backdrop) closeModal();
2363      });
2364
2365      // ESC key
2366      document.addEventListener('keydown', function (e) {
2367        if (e.key === 'Escape' && backdrop.getAttribute('aria-hidden') === 'false') {
2368          closeModal();
2369        }
2370      });
2371
2372      // Focus trap inside dialog
2373      backdrop.addEventListener('keydown', function (e) {
2374        if (e.key !== 'Tab') return;
2375        var focusable = Array.prototype.slice.call(backdrop.querySelectorAll(FOCUSABLE));
2376        if (!focusable.length) return;
2377        var first = focusable[0];
2378        var last = focusable[focusable.length - 1];
2379        if (e.shiftKey) {
2380          if (document.activeElement === first) { e.preventDefault(); last.focus(); }
2381        } else {
2382          if (document.activeElement === last) { e.preventDefault(); first.focus(); }
2383        }
2384      });
2385
2386      // Validation helpers
2387      function setFieldError(inputEl, errorEl, show) {
2388        if (show) {
2389          inputEl.setAttribute('aria-invalid', 'true');
2390          errorEl.classList.add('wr-visible');
2391        } else {
2392          inputEl.removeAttribute('aria-invalid');
2393          errorEl.classList.remove('wr-visible');
2394        }
2395      }
2396
2397      function validateEmail(val) {
2398        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
2399      }
2400
2401      function validateForm() {
2402        var ok = true;
2403        var nameEl = document.getElementById('wr-contact-name');
2404        var emailEl = document.getElementById('wr-contact-email');
2405        var msgEl = document.getElementById('wr-contact-message');
2406        var nameErr = document.getElementById('wr-name-error');
2407        var emailErr = document.getElementById('wr-email-error');
2408        var msgErr = document.getElementById('wr-message-error');
2409
2410        if (!nameEl.value.trim()) { setFieldError(nameEl, nameErr, true); ok = false; } else { setFieldError(nameEl, nameErr, false); }
2411        if (!emailEl.value.trim() || !validateEmail(emailEl.value.trim())) { setFieldError(emailEl, emailErr, true); ok = false; } else { setFieldError(emailEl, emailErr, false); }
2412        if (!msgEl.value.trim()) { setFieldError(msgEl, msgErr, true); ok = false; } else { setFieldError(msgEl, msgErr, false); }
2413        return ok;
2414      }
2415
2416      // Form submit
2417      if (form) {
2418        form.addEventListener('submit', function (e) {
2419          e.preventDefault();
2420          if (!validateForm()) {
2421            // Focus first invalid field
2422            var firstInvalid = form.querySelector('[aria-invalid="true"]');
2423            if (firstInvalid) firstInvalid.focus();
2424            return;
2425          }
2426
2427          var hp = document.getElementById('wr-hp-field');
2428          var tsInput = form.querySelector('[name="cf-turnstile-response"]');
2429          var tsToken = tsInput ? tsInput.value : '';
2430          var payload = {
2431            name:     document.getElementById('wr-contact-name').value.trim(),
2432            email:    document.getElementById('wr-contact-email').value.trim(),
2433            company:  document.getElementById('wr-contact-company').value.trim(),
2434            message:  document.getElementById('wr-contact-message').value.trim(),
2435            source:   SOURCE,
2436            page_url: window.location.href,
2437            _hp:      hp ? hp.value : '',
2438            'cf-turnstile-response': tsToken
2439          };
2440
2441          submitBtn.disabled = true;
2442          submitBtn.textContent = 'Sending...';
2443          if (formError) formError.classList.remove('wr-visible');
2444
2445          fetch(ENDPOINT, {
2446            method: 'POST',
2447            headers: { 'Content-Type': 'application/json' },
2448            body: JSON.stringify(payload)
2449          })
2450          .then(function (res) {
2451            return res.json().then(function (data) {
2452              return { status: res.status, data: data };
2453            });
2454          })
2455          .then(function (result) {
2456            if (result.status >= 200 && result.status < 300 && result.data && result.data.success) {
2457              // Show success
2458              form.style.display = 'none';
2459              if (successDiv) {
2460                successDiv.classList.add('wr-visible');
2461                var sh = successDiv.querySelector('h3');
2462                if (sh) sh.focus();
2463              }
2464            } else {
2465              throw new Error('Non-success response');
2466            }
2467          })
2468          .catch(function () {
2469            submitBtn.disabled = false;
2470            submitBtn.textContent = 'Send message';
2471            if (formError) formError.classList.add('wr-visible');
2472          });
2473        });
2474      }
2475    })();
2476
2477    // Apply-to-become-a-Guide wizard modal, IIFE, plain ES5-compatible
2478    (function () {
2479      var ENDPOINT = 'https://dkquhuvgsvsuzvjkippv.supabase.co/functions/v1/submit-contact';
2480
2481      var backdrop = document.getElementById('wr-apply-modal');
2482      var form = document.getElementById('wr-apply-form');
2483      var closeBtn = document.getElementById('wr-apply-close');
2484      var submitBtn = document.getElementById('wr-apply-submit');
2485      var successDiv = document.getElementById('wr-apply-success');
2486      var successClose = document.getElementById('wr-apply-success-close');
2487      var formError = document.getElementById('wr-apply-form-error');
2488      var progressEl = document.getElementById('wr-apply-progress');
2489
2490      var next1 = document.getElementById('wr-apply-next-1');
2491      var next2 = document.getElementById('wr-apply-next-2');
2492      var back2 = document.getElementById('wr-apply-back-2');
2493      var back3 = document.getElementById('wr-apply-back-3');
2494
2495      var step = 1;
2496      var lastTrigger = null;
2497
2498      var triggers = document.querySelectorAll('.wr-apply-trigger');
2499
2500      var FOCUSABLE = 'input:not([tabindex="-1"]), textarea:not([tabindex="-1"]), select:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
2501
2502      function openModal(triggerEl) {
2503        lastTrigger = triggerEl || null;
2504        backdrop.setAttribute('aria-hidden', 'false'); backdrop.removeAttribute('inert');
2505        backdrop.classList.add('wr-open');
2506        document.documentElement.style.overflow = 'hidden';
2507        setTimeout(function () {
2508          var first = backdrop.querySelector(FOCUSABLE);
2509          if (first) first.focus();
2510        }, 60);
2511      }
2512
2513      function closeModal() {
2514        backdrop.setAttribute('aria-hidden', 'true'); backdrop.setAttribute('inert', '');
2515        backdrop.classList.remove('wr-open');
2516        document.documentElement.style.overflow = '';
2517        if (lastTrigger) {
2518          try { lastTrigger.focus(); } catch (e) {}
2519        }
2520      }
2521
2522      // Toggle which step is visible + update the progress line.
2523      // No focus move - used for silent resets and for submit-time
2524      // "jump back to the invalid step" recovery (where we move focus
2525      // to the invalid field ourselves, not the first field).
2526      function setActiveStep(n) {
2527        step = n;
2528        var stepEls = form.querySelectorAll('[data-step]');
2529        for (var i = 0; i < stepEls.length; i++) {
2530          if (stepEls[i].getAttribute('data-step') === String(n)) {
2531            stepEls[i].classList.add('is-active');
2532          } else {
2533            stepEls[i].classList.remove('is-active');
2534          }
2535        }
2536        if (progressEl) progressEl.textContent = 'Step ' + n + ' of 3';
2537      }
2538
2539      // Same as setActiveStep, but also moves focus to the first field
2540      // of the newly-shown step. Used by Next/Back navigation.
2541      function showStep(n) {
2542        setActiveStep(n);
2543        setTimeout(function () {
2544          var active = form.querySelector('[data-step="' + n + '"]');
2545          if (active) {
2546            var first = active.querySelector(FOCUSABLE);
2547            if (first) first.focus();
2548          }
2549        }, 30);
2550      }
2551
2552      function resetForm() {
2553        form.reset();
2554        var errEls = form.querySelectorAll('.wr-apply-field-error');
2555        for (var i = 0; i < errEls.length; i++) errEls[i].classList.remove('wr-visible');
2556        var inputs = form.querySelectorAll('input, textarea, select');
2557        for (var j = 0; j < inputs.length; j++) inputs[j].removeAttribute('aria-invalid');
2558        if (formError) formError.classList.remove('wr-visible');
2559        if (successDiv) successDiv.classList.remove('wr-visible');
2560        form.style.display = '';
2561        if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Submit application'; }
2562        setActiveStep(1);
2563      }
2564
2565      // Wire triggers (anchors, so we must stop the dead-anchor jump)
2566      for (var t = 0; t < triggers.length; t++) {
2567        (function (btn) {
2568          btn.addEventListener('click', function (e) {
2569            e.preventDefault();
2570            resetForm();
2571            openModal(btn);
2572          });
2573        })(triggers[t]);
2574      }
2575
2576      if (closeBtn) closeBtn.addEventListener('click', closeModal);
2577      if (successClose) successClose.addEventListener('click', closeModal);
2578
2579      backdrop.addEventListener('click', function (e) {
2580        if (e.target === backdrop) closeModal();
2581      });
2582
2583      document.addEventListener('keydown', function (e) {
2584        if (e.key === 'Escape' && backdrop.getAttribute('aria-hidden') === 'false') {
2585          closeModal();
2586        }
2587      });
2588
2589      backdrop.addEventListener('keydown', function (e) {
2590        if (e.key !== 'Tab') return;
2591        var focusable = Array.prototype.slice.call(backdrop.querySelectorAll(FOCUSABLE));
2592        if (!focusable.length) return;
2593        var first = focusable[0];
2594        var last = focusable[focusable.length - 1];
2595        if (e.shiftKey) {
2596          if (document.activeElement === first) { e.preventDefault(); last.focus(); }
2597        } else {
2598          if (document.activeElement === last) { e.preventDefault(); first.focus(); }
2599        }
2600      });
2601
2602      function setFieldError(inputEl, errorEl, show) {
2603        if (show) {
2604          inputEl.setAttribute('aria-invalid', 'true');
2605          errorEl.classList.add('wr-visible');
2606        } else {
2607          inputEl.removeAttribute('aria-invalid');
2608          errorEl.classList.remove('wr-visible');
2609        }
2610      }
2611
2612      function validateEmail(val) {
2613        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
2614      }
2615
2616      function focusFirstInvalid() {
2617        var el = form.querySelector('[aria-invalid="true"]');
2618        if (el) el.focus();
2619      }
2620
2621      function validateStep1() {
2622        var ok = true;
2623        var profileEl = document.getElementById('wr-apply-profile');
2624        var nicheEl = document.getElementById('wr-apply-niche');
2625        var profileErr = document.getElementById('wr-apply-profile-error');
2626        var nicheErr = document.getElementById('wr-apply-niche-error');
2627        if (!profileEl.value.trim()) { setFieldError(profileEl, profileErr, true); ok = false; } else { setFieldError(profileEl, profileErr, false); }
2628        if (!nicheEl.value.trim()) { setFieldError(nicheEl, nicheErr, true); ok = false; } else { setFieldError(nicheEl, nicheErr, false); }
2629        return ok;
2630      }
2631
2632      function validateStep2() {
2633        var ok = true;
2634        var audienceEl = document.getElementById('wr-apply-audience');
2635        var whyEl = document.getElementById('wr-apply-why');
2636        var audienceErr = document.getElementById('wr-apply-audience-error');
2637        var whyErr = document.getElementById('wr-apply-why-error');
2638        if (!audienceEl.value) { setFieldError(audienceEl, audienceErr, true); ok = false; } else { setFieldError(audienceEl, audienceErr, false); }
2639        if (!whyEl.value.trim()) { setFieldError(whyEl, whyErr, true); ok = false; } else { setFieldError(whyEl, whyErr, false); }
2640        return ok;
2641      }
2642
2643      function validateStep3() {
2644        var ok = true;
2645        var nameEl = document.getElementById('wr-apply-name');
2646        var emailEl = document.getElementById('wr-apply-email');
2647        var nameErr = document.getElementById('wr-apply-name-error');
2648        var emailErr = document.getElementById('wr-apply-email-error');
2649        if (!nameEl.value.trim()) { setFieldError(nameEl, nameErr, true); ok = false; } else { setFieldError(nameEl, nameErr, false); }
2650        if (!emailEl.value.trim() || !validateEmail(emailEl.value.trim())) { setFieldError(emailEl, emailErr, true); ok = false; } else { setFieldError(emailEl, emailErr, false); }
2651        return ok;
2652      }
2653
2654      if (next1) next1.addEventListener('click', function () {
2655        if (validateStep1()) { showStep(2); } else { focusFirstInvalid(); }
2656      });
2657      if (next2) next2.addEventListener('click', function () {
2658        if (validateStep2()) { showStep(3); } else { focusFirstInvalid(); }
2659      });
2660      if (back2) back2.addEventListener('click', function () { showStep(1); });
2661      if (back3) back3.addEventListener('click', function () { showStep(2); });
2662
2663      if (form) {
2664        form.addEventListener('submit', function (e) {
2665          e.preventDefault();
2666
2667          if (!validateStep1()) { setActiveStep(1); focusFirstInvalid(); return; }
2668          if (!validateStep2()) { setActiveStep(2); focusFirstInvalid(); return; }
2669          if (!validateStep3()) { setActiveStep(3); focusFirstInvalid(); return; }
2670
2671          var profileEl = document.getElementById('wr-apply-profile');
2672          var nicheEl = document.getElementById('wr-apply-niche');
2673          var audienceEl = document.getElementById('wr-apply-audience');
2674          var whyEl = document.getElementById('wr-apply-why');
2675          var nameEl = document.getElementById('wr-apply-name');
2676          var emailEl = document.getElementById('wr-apply-email');
2677          var audienceText = audienceEl.options[audienceEl.selectedIndex] ? audienceEl.options[audienceEl.selectedIndex].text : audienceEl.value;
2678
2679          var hp = document.getElementById('wr-apply-hp-field');
2680          var tsInput = form.querySelector('[name="cf-turnstile-response"]');
2681          var tsToken = tsInput ? tsInput.value : '';
2682
2683          var payload = {
2684            name: nameEl.value.trim(),
2685            email: emailEl.value.trim(),
2686            company: profileEl.value.trim(),
2687            team_size: audienceText,
2688            message: 'Relied on for: ' + nicheEl.value.trim() + '\nWhy an ongoing Guide: ' + whyEl.value.trim(),
2689            source: 'guide-application',
2690            page_url: window.location.href,
2691            _hp: hp ? hp.value : '',
2692            'cf-turnstile-response': tsToken
2693          };
2694
2695          submitBtn.disabled = true;
2696          submitBtn.textContent = 'Sending...';
2697          if (formError) formError.classList.remove('wr-visible');
2698
2699          fetch(ENDPOINT, {
2700            method: 'POST',
2701            headers: { 'Content-Type': 'application/json' },
2702            body: JSON.stringify(payload)
2703          })
2704          .then(function (res) {
2705            return res.json().then(function (data) {
2706              return { status: res.status, data: data };
2707            });
2708          })
2709          .then(function (result) {
2710            if (result.status >= 200 && result.status < 300 && result.data && result.data.success) {
2711              if (window.wrTag) window.wrTag('guide_apply_submitted', { audience_size: audienceText });
2712              form.style.display = 'none';
2713              if (successDiv) {
2714                successDiv.classList.add('wr-visible');
2715                var sh = successDiv.querySelector('h3');
2716                if (sh) sh.focus();
2717              }
2718            } else {
2719              throw new Error('Non-success response');
2720            }
2721          })
2722          .catch(function () {
2723            submitBtn.disabled = false;
2724            submitBtn.textContent = 'Submit application';
2725            if (formError) formError.classList.add('wr-visible');
2726          });
2727        });
2728      }
2729
2730    })();
2731  </script>
2731
2732
2733  <!-- WR:HEADER:JS:START -->
2734<script>
2735/* Single-source site-header behavior. Synced into each page before </body>
2736   between the WR:HEADER:JS markers (wrapped in 
2736<script> by sync-header.py).
2737
2738   Active state: the generator bakes aria-current="page" into the matching
2739   nav link statically, so no pathname logic is needed here. On the home page
2740   this scroll-spy takes over Product/Pricing/FAQ, moving aria-current as each
2741   section scrolls into view. On any page whose #hero/#pricing/#faq sections
2742   are absent it bails out early, so it is safe to ship everywhere.
2743
2744   Theme toggle + mobile drawer behavior stay as their own in-page IIFEs
2745   (they key off ids the generated markup still emits: #themeToggle,
2746   #themeToggleDrawer, #navHamburger, #nav-drawer, #navDrawerClose). */
2747(function () {
2748  var sections = ['hero', 'pricing', 'faq'];
2749  var targets = sections.map(function (id) { return document.getElementById(id); }).filter(Boolean);
2750  if (targets.length < 2) return;
2751
2752  // Header nav + drawer anchors only. Match both '#pricing' and '/#pricing'
2753  // by comparing the substring after the first '#'.
2754  var anchorsByHash = {};
2755  document.querySelectorAll('.nav-links a[href*="#"], .nav-drawer__links a[href*="#"]').forEach(function (a) {
2756    var href = a.getAttribute('href') || '';
2757    var i = href.indexOf('#');
2758    if (i === -1) return;
2759    var hash = href.slice(i + 1);
2760    if (sections.indexOf(hash) === -1) return;
2761    (anchorsByHash[hash] = anchorsByHash[hash] || []).push(a);
2762  });
2763
2764  var current = null;
2765  function setActive(id) {
2766    if (id === current) return;
2767    current = id;
2768    Object.keys(anchorsByHash).forEach(function (hash) {
2769      anchorsByHash[hash].forEach(function (a) {
2770        if (hash === id) a.setAttribute('aria-current', 'page');
2771        else a.removeAttribute('aria-current');
2772      });
2773    });
2774  }
2775
2776  function update() {
2777    var line = window.innerHeight * 0.35;
2778    var atBottom = (window.innerHeight + window.scrollY) >= (document.documentElement.scrollHeight - 2);
2779    var activeId = targets[0].id;
2780    if (atBottom) {
2781      activeId = targets[targets.length - 1].id;
2782    } else {
2783      for (var i = 0; i < targets.length; i++) {
2784        if (targets[i].getBoundingClientRect().top <= line) activeId = targets[i].id;
2785      }
2786    }
2787    setActive(activeId);
2788  }
2789
2790  var ticking = false;
2791  function onScroll() {
2792    if (ticking) return;
2793    ticking = true;
2794    requestAnimationFrame(function () { update(); ticking = false; });
2795  }
2796  window.addEventListener('scroll', onScroll, { passive: true });
2797  window.addEventListener('resize', onScroll);
2798  update();
2799})();
2800</script>
2800
2801  <!-- WR:HEADER:JS:END -->
2802  <!-- Statcounter -->
2803  
2803<script type="text/javascript">var sc_project=13335596;var sc_invisible=1;var sc_security="1c388aec";</script>
2803
2804  
2804<script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>
2804
2805  <noscript><div class="statcounter"><a title="Web Analytics" href="https://statcounter.com/" target="_blank"><img class="statcounter" src="https://c.statcounter.com/13335596/0/1c388aec/1/" alt="Web Analytics" referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
2806  <!-- End Statcounter -->
2807  </body>
2808</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.