<!-- WE-S233-resume | 02 Jun 2026 | MJ-Walkthrough strand — companion to demo v325 (LESSON 5 same-session pointer flip). ONE edit: the single functional begin-route redirect advanced from the v324 demo to the v325 demo (the one-token moment-popup tap-anywhere fix); the secondary cinematic trailer route is unchanged. No copy, structural, handler, ARIA or locked-value change beyond the one pointer string. Validation: HTML comment balance even, forbidden-brand plus survey-acronym body sweep zero, allergy attribution remains the husband's alone, RULE 21 surfaces unchanged. Replace-in-place on Netlify plus project folder. index file untouched per the two-strand boundary. -->
<!-- WE-S233 | 02 Jun 2026 | MJ-Walkthrough strand — companion to demo v324 (LESSON 5 same-session pointer flip). THREE edits, all surgical and copy-only. (1) POINTER FLIP: the single functional begin-route redirect at the location assignment advanced from the v323 demo to the v324 demo shipped this session; the secondary cinematic trailer route is untouched at its prior version. (2) JOURNEY-META REFRAME (A18): the journey-meta line was reframed to describe a thirteen-part scripted operating-model walkthrough rather than the prior cinematic-mini-acts phrasing, so the entry reads as an operating-model proof rather than a show-reel. (3) PROOF-MOMENT RELABEL (A18): the thirteen chapter-grid eyebrows were relabelled from a feature label to a proof-moment label; the remaining feature-label tokens on the page are all changelog or markup comments and were correctly left untouched. No structural, handler, ARIA or locked-value change beyond the one pointer string and the copy reframes. Validation: HTML comment balance even, forbidden-brand plus survey-acronym body sweep zero, allergy attribution remains the husband's alone, RULE 21 surfaces unchanged. Replace-in-place on Netlify plus project folder. index file untouched per the two-strand boundary. -->
<!-- v314 entry edits | 31 May 2026 | Atlas response: (A8) the £89K proof tile relabelled from "Recovered in 4 minutes" to an at-risk / recovery-time / trust-restored framing so it no longer reads as commercialising a safety breach; (A9) the proactive-WhatsApp preview reframed from "because the data said now" to a consent-aware line (high-value journey + unresolved need + preferred channel + consented signal), em dash removed. Begin pointer flipped to demo v314. Locked figures HOLD; zero forbidden. -->
<!-- WE | 30 May 2026 | v310 companion — begin-route pointer advanced from v309 to v310 (single window.location.href edit at the begin handler; secondary cinematic route untouched at v123; copy, locked values and allergy ownership unchanged; forbidden-brand and survey-metric sweeps clean; index file untouched; +1 header line). -->
<!-- WE | 30 May 2026 | v309 companion — begin-route pointer advanced from v308 to v309 (single window.location.href edit at the begin handler; secondary cinematic route untouched at v123; copy, locked values and allergy ownership unchanged; forbidden-brand and survey-metric sweeps clean; index file untouched; +1 header line). -->
<!-- WE-S239 | 30 May 2026 | MJ-Walkthrough strand — companion to demo v308 (LESSON 5 same-session pointer flip). TWO line-neutral edits, both surgical. (1) POINTER FLIP: the single functional begin-route redirect at the location assignment advanced one production version to the v308 demo shipped this session; the secondary cinematic route is untouched; historical version references elsewhere are changelog quotes, left intact per LESSON 7. (2) STALE LABEL SCRUB: the internal disclosure comment that labels the live See-all-chapters details block carried a chapter count one higher than the block actually renders (the summary and the article set are canonical at the lower count); the comment was a stale live-content label, not a version-history record, so the count token was corrected to match the live block on explicit instruction. The block content, the EPIC CSX FEATURE eyebrows, and the S158 attribution are otherwise byte-identical. No user-facing copy changed; the begin-hint already states the canonical count. Validation: HTML comment balance even, forbidden plus survey-acronym body sweep zero, allergy attribution remains the husband's alone, RULE 21 disclosure stays a native opt-in control with no free-click cascade. -->
<!-- WE-S238 | 30 May 2026 | MJ-Walkthrough strand — POINTER FLIP: the single functional redirect (the location.href assignment) advanced one production version to the current demo, which ships the Atlas Ship 6 recovery-chapter pass (the incident-rupture guided-attention beat upgraded to the executive-bubble format; the brand-sentiment-journey intro rewritten to lead with the not-a-survey sentinel; two audit-first no-card outcomes — net-new cards zero). No Begin-page visible content changed; every prior session's Begin-page copy preserved byte-identical. No DOM / ARIA / handler change beyond the one pointer string. Replace-in-place on Netlify + project folder. -->
<!-- WE-S34 | 29 May 2026 | Legacy — POINTER RETARGET: the single functional redirect now points at the current production demo version, which carries both the prior Atlas Ship 2 envelope and a production glitch fix (the on-arrival spotlight dim on the first group-share step removed). This supersedes the intra-session prior target documented at WE-S33, which was never deployed; that historical entry is left intact per the historical-record rule. The chapter-count reconcile shipped at WE-S33 (Act ranges aligned to the demo's true chapter total, with the final chapter not double-counted across the last two Acts) is unchanged. No DOM/ARIA/handler change beyond the one pointer string. Replace-in-place on Netlify + project folder. -->
<!-- WE-S33 | 29 May 2026 | Legacy — ATLAS SHIP 2 SYNC: (1) Live demo pointer advanced one production version at the single functional redirect (the location.href fallback). Prior-version historical changelog mentions left intact per the historical-record rule. (2) Visitor-facing chapter-count reconcile to match the demo's true chapter total: the final Act range moved off the stale higher number to the true final chapter, and the preceding Act range trimmed by one so the final chapter is not double-counted across the two Acts. The summary <details> and per-page OG/Twitter card meta already reflected the true total and were left unchanged; CSS/JS comments and prior changelog count mentions left intact per the historical-record rule. No DOM/ARIA/handler change beyond the two Act range spans + the one pointer string. Replace-in-place on Netlify + project folder. -->
<!-- WE-S32 | 29 May 2026 | Legacy — PRODUCTION HOTFIX: 2-route chooser CTAs overlapped. The pre-existing S128c rule made .begin-cta position:fixed at bottom-centre (designed for a single sticky button). When WE-S31 added the second .begin-cta the shared fixed rule pinned BOTH buttons to the same spot; they overlapped and the later-painted secondary button intercepted every tap, so the primary route was unreachable (this is the LESSON 44 single-redirect failure mode in CSS form). FIX (CSS-only): .begin-cta now renders in normal flow — display:flex, width:fit-content, margin-inline:auto (desktop) / width:100% (mobile <=768px) — so the two buttons stack and centre, primary first, secondary below via its inline margin-top. S128c comment rewritten to a DO-NOT-REINTRODUCE note. No DOM/ARIA/JS change; same #beginCta (primary route) / #trailerCta (secondary route) and handlers. Trade-off: retires the S128c single-sticky-button drop-off pattern (incompatible with a 2-route chooser). Replace-in-place on Netlify + project folder. -->
<!-- WE-S31 | 28 May 2026 | Legacy/MAIN-S31 — entry converted from single-CTA to 2-ROUTE CHOOSER per the Elevation ownership transfer (LESSON 44, drop no routes). Begin panel now offers TWO routes: primary "Begin the full walkthrough" (13-chapter scripted experience) -> epic-csx-mj-demo-v293.html (unchanged target); new secondary "Watch the 90-second cinematic" -> Elevation trailer epic-csx-trailer-v123.html. New trailerCta handler added after beginCta handler; both window.location.href, no free-click cascade. Index/back routes + 13-chapter <details> preserved. Hint copy updated for the two routes. Locked values + LESSON A (David sole allergic party) untouched; forbidden sweep zero; zero brand names introduced. This file is now Legacy-owned per the 28 May Elevation ownership-transfer brief (supersedes prior two-strand never-touch rule). +1 line. -->
<!-- S198 (19 May 2026): Cinematic Reveal Engine plus mini-act text size lift pointer flip — walkthrough-entry.html L1565 active hyperlink updated to the new demo version per LESSON 5 same-session pointer-flip discipline. ZERO MODIFICATIONS to any Begin-page visible content (every prior session's Begin-page copy preserved byte-identical). The new demo file ships two coordinated upgrades. (1) CINEMATIC REVEAL ENGINE replacing the prior FIX-1 plus FIX-2 hard scroll behaviour across all seventeen walkthrough steps with timed cinematic auto-scroll calibrated to two-hundred-fifty words-per-minute reading pace clamped between four and twenty-two seconds plus CTA gating that mutes the cyan scripted-CTA bubble plus the gold Continue button to forty-two percent opacity with reduced saturation until the visitor has scrolled past eighty percent of the chapter content area at which point both CTAs unlock with a six-hundred-millisecond ease-out brighten animation so scripted CTAs never appear fully luminous before the visitor has finished reading the content above. User-scroll intent at any moment immediately releases the cinematic scroll and unlocks the CTAs so visitor agency is never compromised. The engine honours prefers-reduced-motion via WCAG 2.1 AA compliant instant-unlock variant with no muting for accessibility. (2) MINI-ACT TEXT SIZE LIFT applying a uniform thirty-percent font-size increase across every mini-act surface — chapter eyebrow plus headline plus emotional sub plus industry-anchor labels plus industry-anchor body plus breakthrough caption plus AI-arc body plus enterprise-arc body plus commercial-impact body plus signature stamp plus skip-control — at all three responsive tiers (desktop plus tablet sub-five-ninety-nine plus mobile sub-three-eighty) with the inner-card maximum width raised in proportion. ZERO LOCKED-VALUE FLOOR REGRESSIONS demo-side (MJ floor plus James Harrington plus David plus EPIC ID plus all locked sterling figures plus loyalty point figure plus Brand Sentiment four-anchor sentiment arc all HOLD or RISE). ZERO FORBIDDEN BRAND OR CHARACTER NAMES in body content (carry-forward historical changelog references unchanged). ZERO NPS in body content (preserved at zero per the Brand Sentiment never NPS doctrine in EPIC CSX demo content). Replace-in-place per Cand 21: walkthrough-entry.html DELETE plus walkthrough-entry.html UPLOAD on Netlify and on the claude project folder. index.html UNCHANGED per the S181 two-strand model locking index.html to the MAIN-S01 strand exclusively. -->
<!-- S197 (19 May 2026): Atlas Point 7 sidebar-telemetry extension pointer flip — walkthrough-entry.html active hyperlink updated v257 to v258 per LESSON 5 same-session pointer-flip discipline. ZERO MODIFICATIONS to any Begin-page visible content (every prior session's Begin-page copy preserved byte-identical). The demo file v258 ships fourteen coordinated surgical richening edits inside the CHAPTERS array intel field at chapters one through fourteen replacing system-language telemetry register (label-colon-figure plus label-colon-figure pattern at every chapter intel) with cinematic relationship-state register preserving the locked Brand Sentiment metric label plus the locked-paired-sentiment-figure-per-chapter byte-identical at the lead segment plus replacing the system-language Propensity-to-Buy figure-percent third-segment plus the bare telemetry-noun fourth-segment with named-relationship-state phrases plus operational-fact phrases carrying the chapter narrative beat. The persistent always-visible sidebar at every chapter now reads as relationship intelligence not database printout matching the cinematic register of the chapter banner plus mini-act plus operator-voice cards already landing at the same chapter surface per Alex S197 observation that the sidebar is anonymous on mobile and always visible on desktop and tablet. ZERO STRUCTURAL CHANGES to the demo file. ZERO JS LOGIC MODIFICATIONS. ZERO CSS MODIFICATIONS. Replace-in-place per Cand 21: walkthrough-entry.html DELETE plus walkthrough-entry.html UPLOAD on Netlify and on the claude project folder. index.html UNCHANGED per the S181 two-strand model locking index.html to the MAIN-S01 strand exclusively. -->
<!-- S196 (19 May 2026): Atlas-disciplined surgical richening pointer flip — walkthrough-entry.html L1563 active hyperlink updated v256 to v257 per LESSON 5 same-session pointer-flip discipline. ZERO MODIFICATIONS to any Begin-page visible content (every prior session's Begin-page copy preserved byte-identical). The demo file v257 ships seven coordinated surgical richening edits inside the cinematic data tables (one Act I card commercialBody plus six chapter mini-act fields across chapters three / five / six / ten / eleven / thirteen) replacing system-language plus abstract-on-abstract plus weak verb phrasings with named-character cinema plus human subjects plus locked editorial-spine thesis verbatim echoes plus outcome-focused trust-restored framing per Atlas Amendment 3 plus the sharper verb form. ZERO STRUCTURAL CHANGES to the demo file. ZERO JS LOGIC MODIFICATIONS. ZERO CSS MODIFICATIONS. Replace-in-place per Cand 21: walkthrough-entry.html DELETE plus walkthrough-entry.html UPLOAD on Netlify and on the claude project folder. index.html UNCHANGED per the S181 two-strand model locking index.html to the MAIN-S01 strand exclusively. -->
<!-- S194 (19 May 2026): ATLAS CORRECTION CONTINUATION pointer flip — walkthrough-entry.html L1562 active hyperlink updated v255 to v256 per LESSON 5 same-session pointer-flip discipline. ZERO MODIFICATIONS to any Begin-page visible content (S193 §4 verbatim rewrites at meta descriptions plus hero subhead plus four-act preview plus proof-tiles plus Watch-For nine-list plus context-gate-deleted state all preserved byte-identical). The demo file v256 ships eleven coordinated NIC card plus chapter banner watch field slimming edits per the S193 directive section eleven REPLACE-not-ADD doctrine where the section six mini-act now carries the beat the chapter banner beneath must slim and where two surfaces say the same thing the more cinematic survives and the less-cinematic deletes. Path A confirmed at S194 open honouring the section three directive-mandated floor parity deltas accepted in entirety. Replace-in-place per Cand 21: walkthrough-entry.html DELETE plus walkthrough-entry.html UPLOAD on Netlify and on the claude project folder. index.html UNCHANGED per the S181 two-strand model locking index.html to the MAIN-S01 strand exclusively. -->
<!-- S193 (19 May 2026): ATLAS CORRECTION BUILD — Begin page rewrite per S193_ATLAS_CORRECTION_HANDOVER §4. SHIP A meta descriptions L60/L101/L116 rewritten to the §4.4 verbatim string ("across multiple sectors" per Atlas Amendment 2 — the public-positioning canon is six sectors and the meta tags must not introduce an "eight sectors" inconsistency aggressively cached by social platforms). SHIP B hero subhead (.journey-sub) rewritten to §4.3: one-guest-eight-relationships-six-channels framing landing at locked-LTV-pair, plus new .journey-meta line "Four major acts. Thirteen cinematic mini-acts. About ten minutes." Drops the prior "Three acts" closer; the directive locks four major acts + fourteen chapter mini-acts (both, not three, not only fourteen). SHIP C three-act .journey-acts block replaced byte-for-byte with the four-act preview per §4.7 (Act I Recognition Before Friction / Act II The Relationship Becomes Collaborative / Act III Operational Intelligence Under Pressure / Act IV Service Compounds Commercially). Aligns to the demo file ACT_CARDS data table at steps 1/5/14/21. SHIP D five-tile proof-metrics row (new .proof-tiles + .proof-tile + .proof-tile-val + .proof-tile-label classes) inserted between hero and four-act preview per §4.5 — every value MJ-journey-traceable: locked-final-quote-figure / eight-guests / six-channels / sentiment-arc / LTV-growth-pair. Removes the prior +30% / 78% / 4 min / 8x abstract SaaS-style tile row that lived inside the now-deleted context-gate. SHIP E .entry-moments "Worth watching for" 8-line block rewritten to the §4.6 nine-line list with new title "Watch for / The moments cruise operations still miss." No body copy under each line — the list is the device. SHIP F #context-gate "First, the context" primer block DELETED entirely per §4.1 + §11 REPLACE-not-ADD doctrine: operating-model EPIC pillars block, five phase cards, entry-tagline, entry-fictitious-note, entry-cross-note, context-gate-scrolldown all removed. The "Sell more. Serve more. Be more." locked editorial spine remains protected at the demo file Ch14 close tagline surface. The duplication between the three primer-block surfaces was the explanatory bloat that made the Begin page read like a table of contents instead of a trailer (Atlas Amendment 6). SHIP G L1576 active pointer flipped v254 to v255 per LESSON 5 same-session pointer-flip discipline. Per S193 §3 / §12 / PI v17.4 §LOCKED VALUE FLOOR PARITY: locked figures preserved across edits — twenty-four-thousand-and-thirteen final-quote retained at the proof-tile, one-hundred-forty-eight-thousand and one-hundred-ninety-three-thousand LTV pair retained at the journey-sub and Act IV journey-act-line and the LTV-growth proof-tile, eight-point-five-to-three-point-two-to-nine-point-two sentiment arc retained at the proof-tile, eight-guests retained at the Act II journey-act-line, ninety-four-percent James-match retained at the Act I journey-act-line. The five-thousand-nine-hundred-eighty-seven under-budget figure, the twenty-six-thousand-two-hundred rebooking figure and the eighty-nine-thousand recovery-LTV figure that previously lived in the journey-sub now live at the demo file body (no Begin-page floor regression because each appears at multiple demo-file sites, and the Begin page is not part of the locked-value-floor scope). Brand Sentiment never NPS preserved. Allergy attribution per LESSON A preserved by construction (no allergy references in any edited Begin-page string). Forbidden brand-name sweep zero across all monitored terms. The S110-S111 chapter pill rewrites at the 14-chapter <details> disclosure are preserved byte-identical (the collapsed disclosure remains the secondary affordance below the Begin CTA per §4.3 "View the 14-chapter index"). The S113 OG/Twitter meta tag scaffolding preserved byte-identical outside the three description-string rewrites. Replace-in-place per Cand 21: walkthrough-entry.html DELETE plus walkthrough-entry.html UPLOAD on Netlify. index.html UNCHANGED per S181 two-strand model. EYES-ON FOCUS post-Netlify-deploy at the five viewport widths (360, 414, 768, 1100, 1440 pixel): the Begin page first-impression order — hero header + .proof-tiles 5-row + four-act preview + Watch For 9-list + Begin CTA + collapsed 14-chapter disclosure + footer. Nothing else above the fold. Per Atlas Amendment 6: the Begin page should feel like a trailer, not a table of contents. -->
<!-- S113 (05 May 2026): PER-PAGE OG + TWITTER CARD META TAGS ADDED to <head> for LinkedIn / Facebook / WhatsApp / iMessage / Slack / Signal / Discord rich-link-preview parity with index.html v56 (S112 amendment block). 14 new meta tags total — 9 og:* (title, description, image, image:width, image:height, image:alt, url, type, site_name) + 5 twitter:* (card, title, description, image, image:alt) — inserted in <head> between the existing robots meta (L60 baseline) and the GA4 comment block (L62 baseline). All values hand-tuned for walkthrough-entry context (distinct from homepage): og:title "Inside the walkthrough — Alex Mead | EPIC CSX"; og:description "Walk MJ's anniversary voyage end-to-end. 14 chapters, about 10 minutes. The walkthrough Alex Mead built to show how he thinks about CX transformation."; og:url ABSOLUTE "https://www.epiccsx.com/walkthrough-entry.html" per LinkedIn requirement; og:image SAME shared "https://www.epiccsx.com/og-image.png" as homepage (single-image consistency for brand-recognition signal); og:image:alt accurate to the actual S113 P2 composite ("Alex Mead headshot beside the Meet MJ guest profile — Platinum member, 25th anniversary, Ocean Penthouse, David's severe peanut and tree nut allergy protocol."). Twitter Card values mirror Open Graph for cross-platform consistency. ZERO REGRESSION on existing tags: <title> at L58, <meta name="description"> at L59, <meta name="robots"> at L60 ALL UNCHANGED byte-for-byte (the existing description meta containing "actual product, working" prose remains unchanged per Zero Freelancing — flagged for future-session Cand 38 hygiene review without scope expansion this session). ZERO REGRESSION on active hyperlinks: var WALKTHROUGH_URL at the JavaScript location (was L1361 baseline, now L1404 post-prepend due to +43-line insertion this session) UNCHANGED at 'epic-csx-mj-demo-v190.html'; location.href fallback (was L1670, now L1713) UNCHANGED at v190. ZERO REGRESSION on existing meta tag style: existing self-closing <meta .../> tags at L57/59/60 UNCHANGED; new OG/Twitter tags use HTML5 void style <meta ...> matching index.html v56 S112 pattern verbatim (both styles valid HTML5; consistency with sibling-file pattern preserves cross-file reasoning). Cand 21 replace-in-place file: walkthrough-entry.html appears in BOTH the DELETE and the UPLOAD columns of the S113 deploy block. Cand 45 dual-validator pass: Python regex JS-extract bytewise identical to S112 baseline (zero JS impact — pure HTML head meta-tag insertion); html.parser strict-mode parses cleanly; Cand 42 grep gate Patterns A/B/C 0/0/0; locked-value floors HOLD (this file carries no £-figures in body content; floor irrelevant); forbidden character/brand-name sweep 0; allergy attribution David never MJ unchanged; Brand Sentiment never NPS unchanged. INDEX.HTML shipped same session at v57 — Direction B hero layout optimisation (outcome card relocated from .hero-avatar right column to .hero-text left column between .hero-stats and .hero-proof-inline) + iPad Portrait empty-right centring fix (margin-inline:auto on .hero-sub, .hero-preview-tile, .hero-outcome-card at min-width:768 max-width:1099 band) + Cand 49 candidate (vertical-rhythm interpretation of Cand 46 rule 4 "distinct visual zone"); see index.html v57 changelog header for full detail. OG-IMAGE.PNG shipped same session at S113 P2 — proper headshot + Meet MJ panel composite (1200×630 PNG RGB no-alpha, headshot from alex-leader.jpg in 380px circle with thin gold ring, panel from heropreview.jpg cropped to remove white edge artefacts, faint navy grid pattern); replaces S112 panel-only stopgap on Netlify root. Cand 45 production-fidelity gate framing: this S113 bundle (walkthrough-entry.html + index.html v57 + og-image.png) is READY FOR ALEX'S EYES-ON AT PRODUCTION FIDELITY post-Netlify-deploy via LinkedIn Post Inspector force-refresh on https://www.epiccsx.com/walkthrough-entry.html — static-gate close at S113 is necessary, NOT sufficient. -->
<!-- S112 (05 May 2026): WALKTHROUGH_URL bumped v189 to v190 at active hyperlinks only (var declaration plus location.href fallback). v190 = handover paragraph 6.2 plus 6.4 cleanup work: S32-era CSS-comment allergy attribution drift fix at the ALLERGY-MOMENT TYPOGRAPHY block (allergy correctly attributed to David, MJ utters on his behalf) plus dead-CSS .chapter-banner cleanup (3 base rules plus 3 mobile breakpoint rules removed, 19 lines removed total, zero JS or HTML element usage anywhere). Both surgical edits, zero user-facing content change, zero locked-value floor regression versus v189 baseline. INDEX.HTML shipped same session at v55 — first invocation of Cand 46 PI ratification (£38M airline-group outcome card above-fold, right column, below MJ photo tile in .hero-avatar; non-clickable; sector-descriptor only "Global airline group" per BRAND NAMES RULE; full attribution context "4,000 FTE · 12 sites · 3 continents"; gold left-rule visual treatment per Treisman pre-attentive accent; width parity with .hero-preview-tile). [Cand 44] inline citations: handover paragraph 6.2 plus 6.4 specs; Cand 46 ratification body (PI v16 DRAFT v48); BRAND NAMES RULE load-bearing interpretation; Lesson 7 narrow line-anchored grep canonical for the version bump itself. [Cand 45] DUAL-VALIDATOR PASS on v190: raw awk node --check 0 errors; Python regex extractor 3 of 3 script blocks OK. [Cand 45] DUAL-VALIDATOR on index v55: Python regex extractor 4 of 5 script blocks OK (1 of 5 carry-forward error pre-existing in v54 baseline, NOT S112-introduced — Zero Freelancing). Locked-value floors HOLD or RISE on v190 (multi-encoding £ regex per Lesson 11): £24,013 = 59 versus v189 = 59 (HOLD), £5,987 = 32 versus 32 (HOLD), £30,000 = 16 versus 16 (HOLD), £148 = 53 versus 53 (HOLD), £26,200 = 25 versus 25 (HOLD), £89K = 4 versus 4 (HOLD), 8 guests = 86 versus 85 (RISE +1). Brand Sentiment never NPS in user-facing content. Allergy attribution David never MJ across BOTH user-facing AND developer documentation as of v190 (S111 candidate observation #13 codified and cleared). Forbidden character or brand-name sweep on v190: 0 hits. Cand 21 replace-in-place file: walkthrough-entry.html appears in BOTH the DELETE and the UPLOAD columns of the S112 deploy block. Lesson 7 narrow line-anchored discipline: the v189 to v190 bump touched ONLY the active hyperlinks at L1361 var WALKTHROUGH_URL plus L1670 fallback location.href; historical changelog comments above (S111, S110, S109, S108, S107, S105 entries) referencing past versions LEFT INTACT — those are historical records of what shipped at each session, not active references that should bump. Earlier mid-session bug caught and reverted: an over-broad sed pattern incorrectly bumped historical changelog mentions of v189; revert to baseline executed; surgical str_replace on active hyperlinks only used instead. Cand 45 production-fidelity gate framing: build is READY FOR ALEX EYES-ON AT PRODUCTION FIDELITY post-Netlify-deploy; static-gate close at S112 is necessary, NOT sufficient. -->
<!-- S111 (05 May 2026): WALKTHROUGH_URL bumped v188 → v189 at active hyperlinks (L1351 var WALKTHROUGH_URL + L1660 fallback location.href; both lines unchanged from S110-baseline because S111 only touches three .chap-title texts and prepends this changelog). S111 chapter-title audit per handover paragraph 6.8 (deferred from S110 as scope-creep candidate). Three .chap-title H2 rewrites on architecture-jargon outliers, retaining the eleven titles already verb-led or human-named.
     CHANGE 1 (Ch6 chapter-title): "Video Intelligence" replaced by "AI Reads MJ&rsquo;s 20-Second Video Message". Architecture-jargon noun-phrase superseded by verb+number+named-human pattern matching the post-S110 Ch6 gold pill ("AI Reads the 20-Second Video — James Lands the Moment"). Cand 44 cite: AUDIT-2 Pass B Ch6 verbatim audit-driven; Cand 30 AI-as-actor (AI reads the video); single-source-of-truth principle (chapter title and gold pill convey the same capability surface).
     CHANGE 2 (Ch7 chapter-title): "Mentioned Once, Enforced Everywhere" replaced by "One Allergy Mention. Nine Venues Flagged." Architecture-jargon retired in favour of number-led concrete pattern matching the Ch7 gold pill ("One Mention to James → 9 Venues Flagged, Marco Confirmed"). Cand 44 cites: Cand 6 person-as-subject not noun-phrase-as-subject; Cand 38 vision-not-software (concrete venues plus number lifts the moment from architecture vocabulary).
     CHANGE 3 (Ch8 chapter-title): "Proactive Outreach at the Right Moment" replaced by "James Reaches MJ &mdash; Before She Asks". Architecture-jargon noun-phrase superseded by verb+named-human pattern matching the post-S110 Ch8 gold pill ("AI Signals the Moment — James Reaches MJ on WhatsApp"). Cand 44 cites: Cand 30 AI-as-actor strict (AI signals; named human reaches); Cand 35 named-human-follow-up (James named at chapter-title level matches in-pill consistency).
     EXPLICIT NON-SCOPE: the eleven other chapter titles retained as verb-led or human-named per S111 audit (handover paragraph 6.8 retain-where-already-good principle). Ch1, Ch2, Ch3, Ch4, Ch5, Ch9, Ch10, Ch11, Ch12, Ch13, Ch14 audit scoring listed in S111 close handover.
     LESSON 15 COMPLIANCE: this comment uses spelled-out language for parser-sensitive sequences. Zero internal three-character close-comment sequences anywhere in the prose.
     LESSON 16 COMPLIANCE: Python html.parser run on this file before delivery; leak-signature search on visible body text confirms zero hits.
     Cand 21 replace-in-place file (walkthrough-entry.html appears in BOTH the DELETE and the UPLOAD columns of the session-close FILE DELETE and UPLOAD SUMMARY block).
     Cand 44 inline citations on every change. Cand 45 dual-validator: Python html.parser + grep gate Patterns A B C all return 0. Cand 42 grep gate Patterns A, B, C: 0/0/0. Forbidden character/brand sweep: 0. Brand Sentiment never NPS in user-facing content. WALKTHROUGH_URL hyperlinks BUMPED v188 to v189 to route to the new walkthrough file delivered same session. v189 file (epic-csx-mj-demo-v189.html) shipped same session — see L4 of v189 for its v189 changelog header detailing Surface 3 prominence + Surface 4 Cand 48 cross-viewport + Step 7 mini-grid + Step 16 callout. INDEX.HTML shipped same session — see index.html v53 changelog at file head for D1+D2+D3 hero restructure + Cand 46 IAG-card override. Cand 45 production-fidelity gate framing: build is READY FOR ALEX EYES-ON AT PRODUCTION FIDELITY post-Netlify-deploy; static-gate close at S111 is necessary, NOT sufficient. -->
<!-- S110 (05 May 2026): WALKTHROUGH_URL bumped v187 → v188 at active hyperlinks (L1351 var WALKTHROUGH_URL + L1660 fallback location.href; both lines shifted from S109 L1338+L1647 baseline due to +13 lines added this session: 1 journey-attribution paragraph + 12 lines of journey-attribution CSS rules). AUDIT-1 (in-walkthrough cold-viewer, 17 steps × 14 chapters) + AUDIT-2 (index.html + walkthrough-entry cold-viewer) drove S110 scope. THIS FILE — three changes. (1) PRIORITY-0 BUG FIX: \u00b7 literal-escape leak on all 14 chapter pill eyebrows eliminated via sed 's|\\u00b7|·|g' — count was 14, now 0. The Python escape was rendering as visible text 'EPIC CSX FEATURE \u00b7' on every chapter card (single biggest credibility kill in AUDIT-2 Pass B). (2) SURFACE 1 — all 14 chapter pills (.chap-feature divs L1015-1145 baseline, now shifted post-add) rewritten verb+number+named-Ambassador per AUDIT-2 SYNTHESIS 2 (3 audit-verbatim rewrites for Ch6 'AI Reads the 20-Second Video — James Lands the Moment' / Ch10 'James + Priya Cover 24/7/365 — Zero Dropped Context' / Ch13 'AI Flags 8.5 → 3.2 — James Recovers £89K in 4 Minutes' + 11 fresh designed per Golden Rule pattern). Pre-rewrite average pill score 4.6/10 per AUDIT-2 Pass B. James named in 12 pills + Marco/Priya/Alessandra/MJ/Ryan named — Priya promoted from ghost-in-body to actor-in-pill at Ch10. (3) SURFACE 1 ADDITIVE — hire-first framing line inserted above chapter grid per AUDIT-2 Synthesis 3 (port positioning across the seam from index.html): new <p class='journey-attribution'> reading 'One operator's vision of what becomes possible — built solo, no team, no vendor. Imagined, designed and built by Alex Mead · Available for hire.' Single new CSS class .journey-attribution + .journey-attribution em + .journey-attribution strong added to companion .journey-sub block (L235+ baseline, ~13 net lines added). EXPLICIT NON-SCOPE: chapter title H2 elements (.chap-title divs at L1014/1024/etc.) NOT rewritten — audit scoped pills only; rewriting display titles flagged for S111+ as scope-creep candidate. Two grep hits for 'Mentioned Once, Enforced Everywhere' (1) + 'Proactive Outreach at the Right Moment' (1) post-S110 are .chap-title legitimate carryovers, NOT pill-rewrite misses. [Cand 44] inline citations: AUDIT-2 Pass B verbatim for Ch6/10/13 + AUDIT-2 Pass B per-pill scores for fresh rewrites + Cand 30 AI-as-actor strict (AI surfaces; named human acts) + Cand 35 named-human-follow-up (every pill names Ambassador or named human where commercially possible) + Cand 38 vision-not-software (zero forbidden 'platform/SaaS/deploy/license/product') + AUDIT-2 Synthesis 3 hire-first port. [Cand 45] DUAL-VALIDATOR PASS: Python regex extractor (canonical for multi-block files per Lesson 11) reports 7 blocks 0 errors. Zero literal backticks introduced. [Cand 42] grep gate Patterns A/B/C: 0/0/0. Forbidden character/brand sweep: 0. Brand Sentiment never NPS in user-facing content (2 changelog-comment hits at file head are documentation references to the rule, not user-facing). v188 file (epic-csx-mj-demo-v189.html) shipped same session — see L4 of v188 for its v188 changelog header detailing in-walkthrough banner data-source rewrite (CHAPTER_FEATURES + STEP_CAPABILITIES + STEP_INSIGHTS) + Surface 2 selective callout pill restoration. INDEX.HTML — see index.html v51→v52 changelog at file head for Track 2 work (CMS leak fix + D1+D2+D3+D4 + Cand 47 secondary CTA). Cand 45 production-fidelity gate: build is READY FOR ALEX'S EYES-ON AT PRODUCTION FIDELITY post-Netlify-deploy. -->
<!-- S109 (04 May 2026): WALKTHROUGH_URL bumped v186 → v187 at L1338 + L1647 (line numbers shifted +1 each from S108-baseline L1337 + L1646 because this S109 changelog comment itself was prepended at L1, pushing the S108 changelog comment to L2 and all subsequent lines down 1). v187 = Path 1 cold-viewer-audit-driven pill cull + Step 14 eyebrow rewrite. MOVE 1: gold-pill `.epic-first-callout-eyebrow` div CULLED at 4 callouts (Ch6 video sentiment / Ch7 allergy enforcement / Ch8 proactive WhatsApp / Ch11 casual→service); body+headline+rare-line content RETAINED at all 4 (absorbed into demo flow as supporting detail per literal paste-prompt instruction). MOVE 2: Ch10 onboard concierge eyebrow REWRITTEN from 'YOUR CONTEXT FOLLOWS YOU ONBOARD' (noun-phrase, 4-6/10 cold-viewer score) to 'SHE NEVER REPEATS HERSELF — ACROSS 6 CHANNELS' (verb+number + cold-viewer-validated power phrase + Cand 6 person-as-subject + 6-channel scarcity hook). Eyebrow count 13 → 9 (paste-prompt target ~6-7; 9 delivered = 3-callout delta on early Ch1-Ch5 callouts not in Alex's explicit cull or survivor lists, retained per literal instruction; available for cascade at S110+). Callout container divs UNCHANGED at 13. [Cand 44] inline citations on every cull and the rewrite. [Cand 45] DUAL-VALIDATOR PASS: jsval2 + raw node --check both 0/0/0. AUTHORISED LOCKED-VALUE FLOOR REDUCTIONS per paste-prompt explicit authorisation (pill-related copy reduction acceptable; documented in S109 handover §5). Cand 30/35/38/42 walks: 0/0/0/0. Brand Sentiment never NPS: 0 NPS hits in walkthrough+walkthrough-entry. v187 detail in epic-csx-mj-demo-v187.html L4 changelog header. Lines 1338 + 1647 of THIS file bumped v186 → v187. index.html NOT touched in S109 (out of scope per paste-prompt explicit non-scope clause; index.html v51 references at file head are HTML changelog comments not active hyperlinks; active route is via this file which is bumped to v187). Cand 45 production-fidelity gate framing: this build is READY FOR ALEX'S EYES-ON AT PRODUCTION FIDELITY post-Netlify-deploy; close ceremony framing is 'ready for eyes-on' not 'ship-ready' until Alex GREEN-LIGHTS at production fidelity. -->
<!-- S108 (04 May 2026): WALKTHROUGH_URL bumped v185 → v186 at L1337 + L1646 (line numbers shifted +1 each from S107-baseline L1336 + L1645 because this S108 changelog comment itself was prepended at L1, pushing the S105 v184 comment to L2 and the S107 v185 comment to L3 and all subsequent lines down 1). v186 = Path 1 — Batch 4 standout-moments elevation, deferred from S107 Path 7 per S107 handover §14 carry-forward. Three new .epic-first-callout blocks injected at the visual climax of plan-doc Steps 13/14/15-16 per STANDOUT_MOMENTS_ELEVATION_PLAN.md L86-99: Step 13 (renderStep11 booking close, ZERO FRICTION first-contact-to-confirmation), Step 14 (renderStep12new onboard concierge, YOUR CONTEXT FOLLOWS YOU ONBOARD with Cand 36 Capability #20 Ambassador 24/7/365 anchor naming Priya Sharma as off-shift continuity ambassador), Step 15-16 (renderStep12b casual question to service moment, AI HANDLES VOLUME / HUMANS HANDLE MOMENTS naming all four service-moment actors James Harrington / Estela Marin / Alessandra Conte plus Trattoria Mariuccia / Sports Lounge / The Vault venues from actual demo content). Callout count 10 → 13 (narrow line-anchored grep canonical per Lesson 7). Path 2 of S108 (PI v16 v45 Cand 43+44 reconstitution from S107 source material per BRANCH B + Cand 45 dual-validator + production-fidelity gate ratification per S107 postmortem) executed in parallel against PROJECT_INSTRUCTIONS_v16_DRAFT.md (delivered separately). [Cand 44] inline citations on every materially-affecting decision (NN/g writing-for-the-web 1997/2018 + PI v16 Cand 36 Capability #20 + NN/g visual-hierarchy 2018 + plan-doc design rule L22). [Cand 45] DUAL-VALIDATOR PASS: jsval2 (Cand 23 v2 with HTML-comment-stripping) AND raw node --check (no comment-stripping) BOTH report 0/0/0 on every commit; no-literal-backticks-in-HTML-comments-inside-JS-template-literal-regions sub-rule observed across all 3 callout insertions. Cand 30 AI-as-actor strict on NEW callouts: 0 violations. Cand 35 named-human-follow-up: every depicted AI action paired with a named human in same callout body. Cand 38 vision-not-software in NEW callouts: 0 forbidden-term hits. Cand 42 grep gate Patterns A/B/C: 0/0/0 across this file + epic-csx-mj-demo-v186.html + index.html v51. Locked-value floors HOLD or RISE on v186 (multi-encoding £ regex incl. raw UTF-8 + &pound; entity + \u00a3 JS-escape forms): £24,013 = 41 (S107 floor 38, +3 RISE), £30,000 = 14 (S107 floor 13, +1 RISE), £5,987 = 22 (S107 floor 20, +2 RISE), £148 = 34 (S107 floor 32, +2 RISE), 8 guests = 84 (S107 floor 81, +3 RISE). Brand Sentiment never NPS: 0 NPS hits in walkthrough + walkthrough-entry. Allergy attribution David never MJ: 0 'MJ severe/peanut/tree-nut/allergy' attribution hits. Forbidden walkthrough character/brand-name sweep: 1 carry-forward base64 false-positive at v186 L5903 (MJ photo data URI, NOT S108-introduced); Brand Names 'crystal' false-positive at v186 L5960 ('crystal clear' English idiom, pre-existing in v185). v186 detail in epic-csx-mj-demo-v186.html L4 changelog header. Lines 1337 + 1646 of THIS file bumped v185 → v186. index.html v51 NOT touched in S108 (its v185 references are HTML changelog comments at file head, not active hyperlinks; the active route is via this file which is bumped — flagged for future-session attention if Alex wants stale comments updated). Cand 45 production-fidelity gate framing: this build is READY FOR ALEX'S EYES-ON AT PRODUCTION FIDELITY post-Netlify-deploy; close ceremony framing is 'ready for eyes-on' not 'ship-ready' until Alex GREEN-LIGHTS at production fidelity. -->
<!-- S105 v184 (04 May 2026 post-eyes-on iteration): WALKTHROUGH_URL bumped v183 → v184 at L1334 + L1643. v184 contains 4 surgical fixes from Alex's iPad Pro 13 M4 production-fidelity QA: F1 breakpoint 1100→1024 (catches iPad portrait — Apple HIG anchors iPad portrait at 1024px logical CSS pixels); F2 content-inner max-width 900→1100 at ≥1024px (eliminates landscape dead-margin "looks ugly" perception per NN/g whitespace research + Krug); F3 defensive try/catch on cl_postStepRender (silences 7 pre-existing console exceptions per step-arrow click — hire-first credibility hit if a recruiter inspects); F4 standout-moment enter-animation on .epic-first-callout (Material Motion + Apple HIG + von Restorff effect; 800ms opacity+translateY+gold-glow pulse on element mount; honours prefers-reduced-motion for WCAG 2.1 AA). All CSS-only and one-line JS guard. Mobile <1024px byte-identical to v183. Locked-value floors held 50/13/26/42/86 ≥ 29/12/16/23/77; JS 3/0; Cand 42 0/0/0; forbidden 0; 7 callouts retained at Steps 1/2/4/5/7/8/9. Lines 1334 + 1643 of this file bumped v183 → v184. -->
<!-- S107 (04 May 2026): WALKTHROUGH_URL bumped v184 → v185 (Path 3 — Batch 3 standout-moments per STANDOUT_MOMENTS_ELEVATION_PLAN.md; 3 new .epic-first-callout blocks injected at Steps 10/11/12 = renderStep8 video sentiment, renderStep9 allergy enforcement, renderStep10 proactive WhatsApp; callout count 7 → 10. Path 2 of S107 ratified Cand 43 + Cand 44 in PROJECT_INSTRUCTIONS_v16_DRAFT.md (handover-claim cross-verification + design-science citation pattern); 42 → 44 ratified candidates. Path 7 (Batch 4 standout-moments Steps 13/14/15-16) was attempted mid-session but cancelled by Alex post-eyes-on of v48 deployed — Path 7 properly defers to S108 with full spec carry-forward in handover §14. v185 detail in epic-csx-mj-demo-v185.html L4-L100 changelog header. Locked-value floors held 38/13/20/32/80 ≥ 29/12/16/23/77; JS validation 3/0; Cand 42 grep gate Patterns A/B/C 0/0/0; forbidden 1 (carry-forward base64 false-positive from v184 — substring inside MJ photo data URI at L5903, not S107-introduced); Brand Names 0; Cand 38 user-visible 0 walkthrough-as-software hits (2 narrative-physical-product hits at Step 11 PASS per S106 Lesson 3 context-awareness); Cand 30 AI-as-actor 0; Cand 35 strict 0. Lines 1336 + 1645 of this file bumped v184 → v185 (line numbers shifted +1 each from S106-baseline L1335 + L1644 because this S107 changelog comment itself was prepended at L2). -->
<!-- S105 (04 May 2026): WALKTHROUGH_URL bumped v182 → v183 (launch-day quick wins on demo: QW1 desktop header consolidation ≥1100px, QW2 ghost-bar gradient endpoint fix on .wt-continue + .tour-cta-area, QW3 right-rail full-height density-tightening at ≥1100px with 900px viewport-height floor; full detail in epic-csx-mj-demo-v183.html L4-L60 changelog header). All CSS-only, zero HTML reflow, mobile (<1100px) byte-identical to v182. Locked-value floors held 50/13/26/42/86 ≥ 29/12/16/23/77 (multi-encoding £ pattern); JS validation 3/0; Cand 42 grep gate Patterns A/B/C 0/0/0; forbidden 0; 7 .epic-first-callout blocks retained at Steps 1/2/4/5/7/8/9. S105 ALSO reconciled chapter-count drift: walkthrough is canonically 14 chapters (CHAPTERS array ch:1-14); S104 handover claim of "12 chapters" was incorrect. 5 stale "12 chapters" HTML comments in index.html corrected per S105 sweep (3 historical changelogs preserved with appended S105-reconciliation parenthetical; 2 forward-looking stale claims corrected to "14 chapters"). Lines 1333 + 1642 of this file bumped v182 → v183. -->
<!-- S100 (03 May 2026): WALKTHROUGH_URL bumped v175 → v176 (5 surgical demo edits + NB-01 §1L gate-as-handshake on entry: P3a copy reframe at L1078 to invitation framing + 24h personal-reply commitment per dossier §1K + S95 amendment §B1; P3b prefilled LinkedIn DM contact-row added before generic LinkedIn profile row in default view — URL pattern https://www.linkedin.com/messaging/compose/?recipient=alexmead&body=Hi%20Alex%2C%20can%20I%20have%20the%20access%20code%20for%20the%20EPIC%20CSX%20walkthrough%3F confirmed by Alex; P4 WT-10b tablet-range defense-in-depth — .amb-panel .grp-avatar-lg avatar-only override added inside @media(max-width:1100px) so 769–1099px also enlarges avatar; parent flex layout stays @ 768px because tablet has horizontal real-estate; P5 WT-08 isMobile operator unification at L9726 from `<= 768` to `< 768` matching L14719 canonical pattern, eliminates 768px edge case; P6 WT-15 §3M Sophie cinema beat tightening at L10782 — restructured "AI surfaced... routed to James" to "AI surfaced 9 restaurants matching her requirements. James saw the request, recommended Mediterranean Terrace... locked in the booking with the kitchen" — loop-closure unambiguously on James, Cand 30 strict-PASS; P7 DEF-01 crisis sweep RESOLVED via Cand 33 autonomous emotional-design science decision — 6 surgical replacements across L5369 / L5415 / L8823 / L8846 / L8899 / L14700 swap "crisis" for trust-language ("Trust to Recovery", "Trust Recovery + Lifetime Value", "The moment trust breaks", "moment of failure", "Trust broken to trust restored", "trust, broken, restored") preserving 8.5→3.2→9.2 arc + 22 minutes + £89,000 byte-for-byte; locked-value floors held 31/14/18/25/79 ≥ 29/12/16/23/77; Cand 30 three-gate clean 0/0/0; Cand 29 BOTH MODES clean 12/12/12; JS validation 5/0; crisis count 6→0; PI v16 DRAFT amended to permit "crisis" only in incident-recovery narrative beats where no trust-language alternative carries the beat; Cand 33 autonomous micro-decision authority codified as new candidate at PI v16 (now 32 candidates). Tracker §A.1 WT-08/WT-10b/WT-15 + §B DEF-01 + §C NB-01 graduate to CLOSED via P3-S100-blind agreement on the surgical edits; remaining gate is visual eyes-on at production-deploy fidelity via Claude-in-Chrome on Netlify-deployed bundle. -->
<!-- S97 (03 May 2026): WALKTHROUGH_URL bumped v174 → v175 (Live Intelligence communication-layer focused-fix per dossier §1L L1–L7: P1 first-reading modal RETIME (1→2) + RETAIN (no auto-dismiss) + RESTRUCTURE (first-encounter plain-English meaning); P2 mobile bottom pill REMOVED across all 22 steps incl. HTML element + 4 JS handlers stubbed; P3 ephemeral toast pattern audited (narrate + cl_showPointerAnnotation mobile-gated; STEP_ANNOTATIONS Ch2/Step3 toast no longer fires on mobile); P4 Ch2 mobile Guest Context layout cleanup (avatar 40→64px + horizontal-flex no-dead-space); PRIORITY 1(f) Amalfi continuity bug FIXED (8 days · 6 ports → 5 ports to match canonical ITINERARY); locked-value floors held 31/14/18/25/79 ≥ 29/12/16/23/77; Cand 30 three-gate clean 0/0/0; Cand 29 BOTH MODES clean 12/12/12; JS validation 5/0). chapterGrid UNCHANGED — byte-identical to S96. MILESTONE A signoff candidate pending fresh-session eyes-on; MILESTONE B animated hero panels deferred S98+. -->
<!-- S95 (02 May 2026): WALKTHROUGH_URL bumped v173 → v174 (sidebar Hybrid D refined: 4 always-on incl. fresh-id sbAmbMatch drop-and-replace + 5 step-conditional + sbBeyond dropped + 280px sticky/viewport-fit + Live Activity Stream NEW + mobile soft-redirect <1100px banner; locked-value floors held 29/12/16/23/77; Cand 30 three-gate sweep clean; Cand 29 BOTH MODES clean; JS validation 5/0). chapterGrid UNCHANGED — already 12 cards Cand 30-aligned at S93. -->
<!-- S94 (02 May 2026): WALKTHROUGH_URL bumped v172 → v173 (§1E P-a-S completion: Step 10 ×2 + Marco fatigue trim across Clusters B/C 11→2 + Ch14-referent re-audit + JC2 four system-as-actor rewrites; locked-value floors held 29/12/16/23/77; Cand 30 three-gate sweep clean; Cand 29 BOTH MODES clean). chapterGrid byte-identical to S93 — all 12 cards already Cand 30-aligned at S93. -->
<!-- S93 (02 May 2026): WALKTHROUGH_URL bumped v171 → v172 (AI-Supports-Human Follow-Up Rule application — 17 user-visible chapter-copy/STEP_BUBBLES/Tab Tour edits; locked-value floors preserved 29/12/16/23/77 inc. v172 changelog mentions; §1E Person-as-Subject regression in Ch4 banner FIXED in same pass; Cand 30 codified in PI v16). S93 mid-session structural fix: chapterGrid rewritten from 14 hardcoded cards to 12 cards mapped 1:1 to v172 CHAPTERS array — closes the structural drift Alex caught at S93 mid-session. Each card Cand 30-aligned. Also paired in v172: chapter-strip dropdown max-height 60vh → 78vh so all 12 chapter options visible without scroll. -->
<!-- S92 (02 May 2026): WALKTHROUGH_URL bumped v170 → v171 (Path D device-aware single-source · §1I CLOSE: mobile = 4 popup-moments at Steps 1/5/10/21 · desktop = step-conditional sidebar audit · Cand 24 authorised bug fix at L12928 demoBookSpa) -->
<!-- S90 (02 May 2026): WALKTHROUGH_URL bumped v169 → v170 (TASK 4 chapter-strip nav · TASK 3 Step 5/6 cinema scenes · TASK 1 epiccsx.html teaser KILLED — preview-link removed; TASK 5 trailer markers preserved) -->
<!DOCTYPE html>
<!-- walkthrough-entry.html | S76 PROMISE-killed · S80 cleaned (architecture review §5 Phase 1, Q4 Option A).
     Single-screen pre-entry teaser. The 12-chapter JOURNEY index lands on first paint;
     no atmospheric "PROMISE" beat, no two-stage page-toggle.

     Architecture:
       JOURNEY (single-screen, lands on first paint)
         McKinsey/BCG-grade chapter index. All 12 chapter titles preserved verbatim from
         v162 CHAPTERS array. One-line preview per chapter using AI-supports-humans framing
         (humans are actors, AI is the surface, the listener, the connector). Pillar-tag
         colour matches the v162 chapter pillar mapping.
       BEGIN PANEL (below chapter index)
         Two-CTA discipline: "Begin the walkthrough" (gated, primary) + "Or read the
         four-act preview →" (open access, parity weight). Reveal-on-press inline gate
         panel with full contact card (phone, WhatsApp, email, LinkedIn) — never appears
         on initial page load, only when the visitor actually presses Begin.

     Wired by: index.html — all teaser entry points route here with ?from= query param.
     Outbound link epic-csx-mj-demo-v176.html is the locked production state until Alex
     explicitly instructs a change.

     Behaviour:
       • <500ms paint: inline CSS / inline JS / fonts preconnected
       • #begin deep-link auto-opens gate panel (locked → reveal; unlocked → navigate)
       • "Begin the walkthrough" → unlocked? navigate v164; locked? reveal inline gate
       • Gate submit → SHA-256 check, set localStorage, navigate v164
       • Esc / outside-click closes the inline gate panel
       • Click-to-copy email rows (Rule 13 Netlify Forms primary; mailto fallback)
       • prefers-reduced-motion: every animation has a static fallback
-->
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Alex Mead &mdash; Available now | CX Transformation Leader | EPIC CSX</title>
  <meta name="description" content="Alex Mead &mdash; CX Transformation Leader and Executive available now. MJ&apos;s anniversary voyage end-to-end across four major acts and thirteen cinematic mini-acts. The working demonstration of how Alex designs customer contact as a commercial engine. About ten minutes. 20+ years across multiple sectors and 30+ countries."/>
  <link rel="canonical" href="https://www.epiccsx.com/walkthrough-entry">

  <!-- TR-03 (S124): inline SVG favicon as data-URI — zero asset-upload required. Same monogram as index + walkthrough-summary for cross-page brand-tab consistency. -->
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%23080d1a'/><circle cx='16' cy='16' r='11' fill='none' stroke='%23c9a96e' stroke-width='2.5'/><text x='16' y='21' text-anchor='middle' fill='%23c9a96e' font-family='Georgia,serif' font-size='14' font-weight='600'>A</text></svg>"/>

  <!-- S153 v225 SHIP D — production-fidelity browser/UA metadata parity with the demo file v220 + v221 ships -->
  <meta name="theme-color" content="#0c1626"/>
  <meta name="color-scheme" content="dark"/>
  <meta name="format-detection" content="telephone=no"/>
  <meta name="referrer" content="strict-origin-when-cross-origin"/>
  <meta name="author" content="Alex Mead"/>
  <meta name="publisher" content="Alex Mead"/>
  <meta name="application-name" content="EPIC CSX"/>

  <!-- ═══════════════════════════════════════════════════════════════════════ -->
  <!-- OPEN GRAPH + TWITTER CARD (S113 P3 — per-page rich-link-preview parity   -->
  <!-- with index.html v56 S112 amendment block).                               -->
  <!-- Walkthrough-entry is the second-most-shared URL on epiccsx.com after    -->
  <!-- the homepage; recruiters and decision-makers paste it directly into     -->
  <!-- LinkedIn DMs and posts. The S112 amendment wired rich previews on the  -->
  <!-- homepage; this block does the same for the walkthrough-entry page so  -->
  <!-- shares of the walkthrough URL render with title + description + image -->
  <!-- card instead of falling back to platform defaults.                       -->
  <!--                                                                          -->
  <!-- Same og-image.png as homepage (the S113 P2 headshot + Meet MJ panel    -->
  <!-- composite at site root) — single shared image keeps brand-recognition  -->
  <!-- signal consistent across both pages while title and description are    -->
  <!-- walkthrough-tuned.                                                      -->
  <!--                                                                          -->
  <!-- og:url and og:image both ABSOLUTE per LinkedIn requirement. Image      -->
  <!-- dimensions declared 1200x630 to match the asset spec (LinkedIn 1.91:1 -->
  <!-- preferred ratio; also optimal for Facebook, Twitter X, WhatsApp,       -->
  <!-- iMessage, Slack, Signal, Discord).                                      -->
  <!--                                                                          -->
  <!-- noindex/nofollow on robots meta does NOT block OG scrapers — LinkedIn -->
  <!-- and other rich-link generators ignore robots directives because they  -->
  <!-- are preview generators, not search engines.                             -->
  <!-- ═══════════════════════════════════════════════════════════════════════ -->
  <!-- Open Graph (LinkedIn, Facebook, WhatsApp, iMessage, Slack, Signal, Discord) -->
  <meta property="og:title" content="Alex Mead — Available now | CX Transformation Leader | EPIC CSX">
  <meta property="og:description" content="Alex Mead — CX Transformation Leader and Executive available now. MJ&apos;s anniversary voyage end-to-end across four major acts and thirteen cinematic mini-acts. The working demonstration of how Alex designs customer contact as a commercial engine. About ten minutes. 20+ years across multiple sectors and 30+ countries.">
  <meta property="og:image" content="https://www.epiccsx.com/og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:secure_url" content="https://www.epiccsx.com/og-image.png">
  <meta property="og:image:alt" content="Alex Mead headshot beside the Meet MJ guest profile — Platinum member, 25th anniversary, Ocean Penthouse, David&apos;s severe peanut and tree nut allergy protocol.">
  <meta property="og:url" content="https://www.epiccsx.com/walkthrough-entry.html">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="EPIC CSX">
  <meta property="og:locale" content="en_GB">

  <!-- Twitter Card (also used by many modern apps) -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Alex Mead — Available now | CX Transformation Leader | EPIC CSX">
  <meta name="twitter:description" content="Alex Mead — CX Transformation Leader and Executive available now. MJ&apos;s anniversary voyage end-to-end across four major acts and thirteen cinematic mini-acts. The working demonstration of how Alex designs customer contact as a commercial engine. About ten minutes. 20+ years across multiple sectors and 30+ countries.">
  <meta name="twitter:image" content="https://www.epiccsx.com/og-image.png">
  <meta name="twitter:image:alt" content="Alex Mead headshot beside the Meet MJ guest profile — Platinum member, 25th anniversary, Ocean Penthouse, David&apos;s severe peanut and tree nut allergy protocol.">

  <!-- ═══════════════════════════════════════════════════════════════════════ -->
  <!-- GOOGLE ANALYTICS 4 (carried from S59 v3 — Alex directive, merged stream) -->
  <!-- Same Measurement ID as index.html for unified visitor tracking across   -->
  <!-- the homepage → interstitial flow. async loader, does not block render.  -->
  <!-- ═══════════════════════════════════════════════════════════════════════ -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-1QCNHQJX2V"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-1QCNHQJX2V');
  </script>

  <!-- ═══════════════════════════════════════════════════════════════════════ -->
  <!-- LINKEDIN INSIGHT TAG (S59 v3 — STAGED, NOT YET ACTIVE)                   -->
  <!-- HOW TO ACTIVATE:                                                          -->
  <!--   1. Go to LinkedIn Campaign Manager: https://www.linkedin.com/campaignmanager -->
  <!--   2. Account Assets → Insight Tag → Set up Insight Tag                    -->
  <!--   3. Copy the Partner ID (a numeric value, e.g. 1234567)                  -->
  <!--   4. Replace BOTH occurrences of "PARTNER_ID_HERE" below with that number -->
  <!--   5. Remove the surrounding HTML comment wrappers around the script tags  -->
  <!--   6. Re-deploy the file. Data starts flowing within ~30 minutes.          -->
  <!-- WHAT IT GIVES YOU: company-level visitor identification (e.g. "3 visitors -->
  <!-- from Carnival UK this week"). Free.                                        -->
  <!-- ═══════════════════════════════════════════════════════════════════════ -->
  <!--
  <script type="text/javascript">
    _linkedin_partner_id = "PARTNER_ID_HERE";
    window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
    window._linkedin_data_partner_ids.push(_linkedin_partner_id);
  </script>
  <script type="text/javascript">
    (function(l) {
      if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};window.lintrk.q=[]}
      var s = document.getElementsByTagName("script")[0];
      var b = document.createElement("script");
      b.type = "text/javascript";b.async = true;
      b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
      s.parentNode.insertBefore(b, s);
    })(window.lintrk);
  </script>
  <noscript>
    <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=PARTNER_ID_HERE&fmt=gif" />
  </noscript>
  -->

  <!-- ═══════════════════════════════════════════════════════════════════════ -->
  <!-- MICROSOFT CLARITY (S59 v3 — STAGED, NOT YET ACTIVE)                      -->
  <!-- Activation steps identical to LinkedIn Insight Tag block above.          -->
  <!-- ═══════════════════════════════════════════════════════════════════════ -->
  <!--
  <script type="text/javascript">
    (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "PROJECT_ID_HERE");
  </script>
  -->

  <link rel="preconnect" href="https://fonts.googleapis.com"/>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600&family=DM+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>

  <style>
/* ═════════════════════════════════════════════════════════════════════════ */
/*  DESIGN TOKENS — matches index.html design system, extended for S67       */
/* ═════════════════════════════════════════════════════════════════════════ */
:root{
  --navy:#080d1a;--navy2:#0e1625;--navy3:#131e30;--navy4:#1b2942;
  --gold:#c9a96e;--gold2:#e8c98a;--gold3:#a88a4f;
  --gf:rgba(201,169,110,0.08);--gb:rgba(201,169,110,0.18);
  --gb2:rgba(201,169,110,0.28);--gb3:rgba(201,169,110,0.42);
  --text:#f0ece4;--muted:rgba(240,236,228,0.62);--muted2:rgba(240,236,228,0.38);
  --muted3:rgba(240,236,228,0.20);
  --card:rgba(255,255,255,0.03);--card2:rgba(255,255,255,0.055);--card3:rgba(255,255,255,0.085);
  /* Pillar accents — match v162 CHAPTERS array */
  --p-easy:#22d3ee;--p-personalised:#c8a96e;--p-intuitive:#a78bfa;--p-contextual:#34d399;
  --space-xs:8px;--space-s:12px;--space-m:16px;--space-l:24px;--space-xl:32px;
  --space-2xl:48px;--space-3xl:64px;--space-4xl:96px;
  /* Motion timings — research-grounded (NN/g attention, Material Motion) */
  --t-fast:180ms;--t-med:340ms;--t-slow:600ms;--t-cinema:1200ms;
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:radial-gradient(ellipse at 50% -10%,var(--navy3) 0%,var(--navy2) 38%,var(--navy) 78%) var(--navy);
  color:var(--text);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:calc(92px + env(safe-area-inset-bottom));
}
a{color:inherit;text-decoration:none;}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--navy);}
::-webkit-scrollbar-thumb{background:rgba(201,169,110,0.25);border-radius:2px;}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  PERSISTENT CHROME — wordmark + back-to-homepage, both screens             */
/* ═════════════════════════════════════════════════════════════════════════ */
.chrome{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-l) var(--space-l) 0;
  z-index:5;
}
.wordmark{
  font-family:'Cormorant Garamond',serif;
  font-size:14px;font-weight:600;letter-spacing:.5px;
  color:var(--gold);
  text-transform:lowercase;
}
.wordmark a{display:inline-block;transition:color var(--t-fast) var(--ease-out);}
.wordmark a:hover{color:var(--gold2);}
.chrome-back{
  font-size:11.5px;letter-spacing:.4px;
  color:var(--muted2);
  font-weight:400;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 0;
  transition:color var(--t-fast) var(--ease-out);
}
.chrome-back:hover{color:var(--muted);}
.chrome-back .arr-back{
  display:inline-block;
  transition:transform var(--t-fast) var(--ease-out);
}
.chrome-back:hover .arr-back{transform:translateX(-2px);}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  SCREEN MANAGEMENT — single-screen JOURNEY (.screen--active hard-coded)    */
/* ═════════════════════════════════════════════════════════════════════════ */
.screen{
  display:none;
  flex-direction:column;
  min-height:calc(100vh - 60px);
  padding:var(--space-l) var(--space-l) var(--space-3xl);
  position:relative;
}
.screen--active{display:flex;animation:screenEnter var(--t-cinema) var(--ease-out) both;}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  THE JOURNEY — single-screen 12-chapter index                              */
/*  AI-supports-humans framing per Alex S67 directive (humans as actors;      */
/*  AI as the surface, the listener, the connector). PROMISE block killed     */
/*  S76 (architecture review §5 Phase 1, Q4 Option A); residue cleaned S80.   */
/* ═════════════════════════════════════════════════════════════════════════ */
.journey{
  margin-top:var(--space-l);
  flex:1;
  display:flex;flex-direction:column;
}
.journey-header{
  text-align:center;
  max-width:760px;
  margin:0 auto var(--space-2xl);
  padding:var(--space-xl) var(--space-m) 0;
}
.journey-eyebrow{
  font-size:11px;letter-spacing:3.5px;color:var(--gold);
  text-transform:uppercase;font-weight:700;
  margin-bottom:var(--space-m);
  display:inline-flex;align-items:center;gap:var(--space-s);
}
.journey-eyebrow::before,.journey-eyebrow::after{
  content:'';display:inline-block;width:28px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.journey-h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(28px,4.4vw,42px);
  font-weight:400;line-height:1.15;
  letter-spacing:-.4px;
  margin-bottom:var(--space-m);
}
.journey-h2 em{font-style:italic;color:var(--gold);font-weight:500;}
.journey-sub{
  font-size:clamp(14px,1.4vw,16px);
  color:var(--muted);
  line-height:1.65;
  max-width:580px;
  margin:0 auto;
}
.journey-sub strong{color:var(--text);font-weight:500;}
/* S193 — Atlas correction. Cinematic meta-line under subhead. */
.journey-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(11px,1.05vw,12.5px);
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:rgba(201,169,110,.72);
  margin:var(--space-m) auto 0;
  text-align:center;
  max-width:580px;
}
/* S193 — Atlas correction. Five-tile proof-metrics row sits between hero and four-act preview. Replaces the deleted in-context-gate four-tile row. Numbers are MJ-journey-traceable, not abstract SaaS ratios. */
.proof-tiles{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--space-s);
  max-width:1100px;
  width:100%;
  margin:var(--space-xl) auto 0;
}
.proof-tile{
  text-align:center;
  padding:var(--space-l) var(--space-m);
  background:linear-gradient(180deg,rgba(201,169,110,.06) 0%,rgba(201,169,110,.02) 100%);
  border:1px solid rgba(201,169,110,.18);
  border-left:2px solid var(--gold);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:96px;
}
.proof-tile-val{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(14px,1.5vw,18px);
  font-weight:700;
  color:var(--gold);
  line-height:1.2;
  letter-spacing:.2px;
}
.proof-tile-label{
  font-size:clamp(10px,.95vw,11px);
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:rgba(240,236,228,.55);
  margin-top:8px;
  font-weight:500;
}
@media (max-width:899px){
  .proof-tiles{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:419px){
  .proof-tiles{grid-template-columns:1fr;}
}
/* v188 (S110) — Cand 44 hire-first framing line above chapter grid (AUDIT 2 Synthesis 3 port). */
.journey-attribution{
  font-size:clamp(13px,1.25vw,14.5px);
  color:var(--muted);
  line-height:1.6;
  max-width:600px;
  margin:var(--space-m) auto 0;
  text-align:center;
  letter-spacing:.1px;
}
.journey-attribution em{color:var(--text);font-style:italic;font-weight:400;}
.journey-attribution strong{color:var(--gold);font-weight:600;}

/* Chapter grid — 1-col mobile, 2-col desktop */
.journey-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-m);
  max-width:1100px;
  width:100%;
  margin:0 auto var(--space-2xl);
}
.chap{
  display:flex;
  align-items:flex-start;
  gap:var(--space-l);
  padding:var(--space-l) var(--space-l);
  background:var(--card);
  border:1px solid rgba(201,169,110,0.10);
  border-left:2px solid var(--gb2);
  border-radius:8px;
  position:relative;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out),
             border-color var(--t-med) var(--ease-out),background var(--t-med) var(--ease-out);
}
.chap.chap--in{
  opacity:1;
  transform:translateY(0);
}
.chap:hover{
  background:var(--card2);
  border-color:rgba(201,169,110,0.20);
  border-left-color:var(--gold);
}
.chap-num{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:500;
  color:var(--gold);
  font-size:34px;
  line-height:1;
  flex:0 0 auto;
  min-width:48px;
  letter-spacing:-.5px;
  padding-top:2px;
}
.chap-meta{
  flex:1;
  display:flex;flex-direction:column;
  gap:6px;
  min-width:0;
}
.chap-title{
  font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:600;
  color:var(--text);
  line-height:1.35;
  letter-spacing:.1px;
}
.chap-preview{
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
}
.chap-preview strong{color:var(--text);font-weight:500;}
.chap-preview em{color:var(--gold2);font-style:normal;font-weight:500;}
.chap-pillar{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10px;letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
  margin-top:2px;
}
.chap-pillar .pdot{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--p-easy);
  flex:0 0 auto;
}
.chap[data-pillar="easy"]         .chap-pillar .pdot{background:var(--p-easy);}
.chap[data-pillar="personalised"] .chap-pillar .pdot{background:var(--p-personalised);}
.chap[data-pillar="intuitive"]    .chap-pillar .pdot{background:var(--p-intuitive);}
.chap[data-pillar="contextual"]   .chap-pillar .pdot{background:var(--p-contextual);}

/* v177 (S102) — Cand 40 chapter-card EPIC CSX FEATURE name (single-data-source surface). */
.chap-feature{
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold);
  margin:6px 0 4px;
  line-height:1.4;
}
.chap-feature .chap-feature-eyebrow{color:rgba(240,236,228,0.45);font-weight:500;}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  S158 v229 (P0a) — HIRE-FIRST EYEBROW + 3-ACT JOURNEY FRAMING + COLLAPSED  */
/*  13-CHAPTER DETAILS DISCLOSURE                                              */
/*  Replaces the prior 14-card grid above Begin with a dominant hire-first    */
/*  eyebrow, a tighter H2/sub journey-header, and three act cards summarising */
/*  the visitor experience in <120 words total. The 13 chapter cards move    */
/*  byte-identical into a collapsed <details> below Begin labelled            */
/*  "See all 13 chapters →". Act ranges aligned to the demo's ACT_CARDS       */
/*  ground truth: Act I = Ch1-5 (steps 1-9), Act II = Ch6-11 (steps 10-15),  */
/*  Act III = Ch12-14 (steps 16-22) — collapsing the demo's Act III + Coda    */
/*  into one entry-page Act III by name.                                       */
/* ═════════════════════════════════════════════════════════════════════════ */
.journey-eyebrow--hire{
  display:inline-block;
  font-size:clamp(12px,1.15vw,13.5px);
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
  padding:8px 16px;
  border:1px solid rgba(201,169,110,0.30);
  border-radius:999px;
  background:rgba(201,169,110,0.04);
  margin-bottom:var(--space-m);
}
.journey-eyebrow--hire strong{color:var(--gold);font-weight:700;}
.journey-eyebrow--hire .je-sep{color:rgba(201,169,110,0.45);margin:0 8px;}

/* 3-act framing — replaces journey-grid above Begin */
.journey-acts{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-m);
  max-width:1100px;
  width:100%;
  margin:var(--space-xl) auto var(--space-2xl);
}
.journey-act{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:var(--space-l) var(--space-l);
  background:var(--card);
  border:1px solid rgba(201,169,110,0.12);
  border-left:3px solid var(--gold);
  border-radius:8px;
  position:relative;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out),
             border-color var(--t-med) var(--ease-out),background var(--t-med) var(--ease-out);
}
.journey-act.journey-act--in{opacity:1;transform:translateY(0);}
.journey-act:hover{background:var(--card2);border-color:rgba(201,169,110,0.22);}
.journey-act-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-bottom:4px;
}
.journey-act-num{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:500;
  color:var(--gold);
  font-size:clamp(22px,2.4vw,28px);
  line-height:1;letter-spacing:-.3px;
}
.journey-act-name{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(15px,1.6vw,17px);font-weight:600;
  color:var(--text);
  letter-spacing:.1px;
}
.journey-act-range{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(240,236,228,0.45);font-weight:500;
  margin-left:auto;
}
.journey-act-line{
  font-size:clamp(13px,1.35vw,15px);
  color:var(--muted);line-height:1.65;
  margin:0;
}
.journey-act-line strong{color:var(--text);font-weight:500;}
.journey-act-line em{color:var(--gold2);font-style:normal;font-weight:500;}

/* Collapsed 13-chapter disclosure below Begin */
.journey-chapters-details{
  max-width:1100px;width:100%;
  margin:0 auto var(--space-2xl);
  padding:0 var(--space-m);
}
.journey-chapters-details>summary{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:600;
  color:var(--muted);
  letter-spacing:.4px;
  padding:10px 18px;
  border:1px solid rgba(201,169,110,0.20);
  border-radius:6px;
  background:rgba(255,255,255,0.02);
  cursor:pointer;
  list-style:none;
  transition:color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out);
  margin:0 auto;
}
.journey-chapters-details>summary::-webkit-details-marker{display:none;}
.journey-chapters-details>summary:hover{color:var(--text);border-color:rgba(201,169,110,0.40);background:rgba(201,169,110,0.05);}
.journey-chapters-details>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.journey-chapters-details>summary .jcd-caret{
  display:inline-block;color:var(--gold);font-weight:600;
  transition:transform var(--t-fast) var(--ease-out);
}
.journey-chapters-details[open]>summary .jcd-caret{transform:rotate(90deg);}
.journey-chapters-details-wrap{
  display:flex;justify-content:center;
  margin:var(--space-m) auto var(--space-l);
}
.journey-chapters-details .journey-grid{margin-top:var(--space-l);}

@media (min-width:768px){
  .journey-acts{grid-template-columns:1fr;gap:var(--space-l);}
}
@media (min-width:1100px){
  .journey-acts{gap:var(--space-l);}
}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  S117a — Cand 39 PRIMER CSS REMOVED (orphaned after markup port to        */
/*  #context-gate). All .primer-* class definitions and the @media override   */
/*  block deleted — zero remaining .primer-* usage anywhere in the file.      */
/*  Replacement CSS for #context-gate appended at end of <style> block.       */
/* ═════════════════════════════════════════════════════════════════════════ */


/* ═════════════════════════════════════════════════════════════════════════ */
/*  BEGIN PANEL — primary CTA + reveal-on-press inline gate                   */
/* ═════════════════════════════════════════════════════════════════════════ */
.begin{
  max-width:1100px;
  width:100%;
  margin:var(--space-l) auto var(--space-2xl);
  padding:0 var(--space-m);
  text-align:center;
}
.begin-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%);
  color:var(--navy);
  font-family:'DM Sans',sans-serif;
  font-size:14px;font-weight:600;
  letter-spacing:.4px;
  padding:18px var(--space-2xl);
  border-radius:8px;
  border:none;
  cursor:pointer;
  min-width:300px;
  transition:transform var(--t-med) var(--ease-out),
             box-shadow var(--t-med) var(--ease-out);
}
/* ═════════════════════════════════════════════════════════════════════════ */
/*  MJ-S236 — ALWAYS-AVAILABLE STICKY ROUTE BAR                               */
/*  A DEDICATED, SEPARATE component pinned to the viewport bottom so the      */
/*  primary "Begin the full walkthrough" route (and the film route) are       */
/*  reachable from first paint with no scroll. This is NOT the retired        */
/*  S128c single-fixed .begin-cta pattern (see WE-S32 DO-NOT-REINTRODUCE      */
/*  note): it never reuses .begin-cta positioning and never overlaps the      */
/*  in-flow .begin panel buttons (body padding-bottom reserves clearance).    */
/* ═════════════════════════════════════════════════════════════════════════ */
.sticky-begin-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(8,13,26,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid var(--gb2);
  box-shadow:0 -8px 26px rgba(0,0,0,.4);
}
.sticky-begin-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%);
  color:var(--navy);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.4px;padding:14px 30px;border-radius:8px;border:none;cursor:pointer;
  text-decoration:none;
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out);
}
.sticky-begin-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(201,169,110,.32);}
.sticky-begin-film{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--gold);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  letter-spacing:.3px;text-decoration:none;opacity:.92;cursor:pointer;
  transition:opacity var(--t-fast) var(--ease-out);
}
.sticky-begin-film:hover{opacity:1;text-decoration:underline;}
@media (max-width:520px){
  .sticky-begin-bar{gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));}
  .sticky-begin-cta{flex:1 1 200px;padding:13px 18px;}
}
@media (prefers-reduced-motion:reduce){
  .sticky-begin-cta,.sticky-begin-film{transition:none;}
  .sticky-begin-cta:hover{transform:none;}
}
.begin-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(201,169,110,0.28);
}
.begin-cta .arr{font-size:16px;line-height:1;display:inline-block;
  transition:transform var(--t-fast) var(--ease-out);}
.begin-cta:hover .arr{transform:translateX(3px);}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  S128c SUPERSEDED BY WE-S32 — DO NOT REINTRODUCE position:fixed HERE.       */
/*  S128c made .begin-cta a single sticky bottom-centre button (position:fixed)*/
/*  to fight entry-page drop-off. That was valid for ONE button. The v124      */
/*  2-route chooser added a SECOND .begin-cta (#trailerCta); the shared fixed  */
/*  rule pinned BOTH to the same bottom:20px spot, so they overlapped and the  */
/*  later-painted trailer button intercepted every tap — the primary Begin     */
/*  route was unreachable. FIX: both .begin-cta now render IN NORMAL FLOW,      */
/*  block-level (display:flex), centred (width:fit-content + margin-inline:    */
/*  auto), and stacked (primary Begin first; outline trailer below via its     */
/*  inline margin-top). A single fixed button cannot carry two routes — if     */
/*  sticky behaviour is ever wanted again it must wrap BOTH buttons in one     */
/*  fixed container, never re-apply position:fixed to .begin-cta itself.       */
/*  No DOM, ARIA, or JS changes — same #beginCta/#trailerCta, same handlers.   */
/* ═════════════════════════════════════════════════════════════════════════ */
.begin-cta{
  display:flex;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
  box-shadow:0 12px 32px rgba(10,16,28,0.55),
             0 4px 12px rgba(201,169,110,0.18);
}
@media (max-width: 768px){
  .begin-cta{
    width:100%;
    min-width:0;
    margin-left:0;
    margin-right:0;
  }
}

/* S76: .preview-link — secondary above-fold affordance paired with .begin-cta.
   Open path (no access code) to the four-act teaser. Form-factor hierarchy:
   button (gold-fill) = primary gated path; outline link = secondary open path.
   Parity weight (visible above fold, equal scan height) but visually subordinate.
   Research: P7 visual hierarchy (Apple HIG / Material emphasis tokens) +
   S70 v15 form-factor rule. */
.preview-link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin:14px auto 0;
  padding:14px 28px;
  color:var(--gold2);
  font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;
  letter-spacing:.3px;
  text-decoration:none;
  border:1px solid rgba(201,169,110,0.35);
  border-radius:8px;
  background:transparent;
  min-width:300px;
  transition:border-color var(--t-fast) var(--ease-out),
             color var(--t-fast) var(--ease-out),
             background var(--t-fast) var(--ease-out);
}
.preview-link:hover{
  border-color:var(--gold2);
  color:var(--gold);
  background:rgba(201,169,110,0.04);
}
.preview-link .arr{font-size:15px;line-height:1;display:inline-block;
  transition:transform var(--t-fast) var(--ease-out);}
.preview-link:hover .arr{transform:translateX(3px);}
.begin-hint{
  font-size:12px;color:var(--muted2);
  margin-top:var(--space-m);
  letter-spacing:.2px;
}
.begin-hint strong{color:var(--muted);font-weight:500;}

/* Click-to-copy email rows — extend .contact-row visually, behave as buttons */
button.contact-row{
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  width:100%;
  appearance:none;
  -webkit-appearance:none;
}
.contact-row-copy-icon{
  flex:0 0 auto;
  width:16px;
  height:16px;
  color:rgba(201,169,110,0.42);
  margin-left:auto;
  transition:color var(--t-fast) var(--ease-out),
             transform var(--t-fast) var(--ease-out);
}
.contact-row-copy:hover .contact-row-copy-icon{
  color:var(--gold);
}
.contact-row-copy:active .contact-row-copy-icon{
  transform:scale(0.92);
}

/* Toast — Cormorant-gold premium feel, bottom-centred, 2-second auto-dismiss */
.epc-toast{
  position:fixed;
  bottom:calc(env(safe-area-inset-bottom,0px) + 28px);
  left:50%;
  transform:translateX(-50%) translateY(8px) scale(0.96);
  background:linear-gradient(180deg,rgba(20,32,56,0.95) 0%,rgba(12,22,38,0.98) 100%);
  border:1px solid var(--gb2);
  border-radius:10px;
  padding:11px 18px;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:15px;
  color:var(--gold2);
  letter-spacing:.3px;
  box-shadow:0 14px 36px rgba(0,0,0,0.42);
  opacity:0;
  pointer-events:none;
  z-index:9000;
  transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out);
}
.epc-toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  JOURNEY FOOTER — back-to-homepage                                         */
/* ═════════════════════════════════════════════════════════════════════════ */
.journey-foot{
  text-align:center;
  margin-top:auto;
  padding-top:var(--space-2xl);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-s);
}
.foot-home{
  font-size:12px;color:var(--muted2);
  letter-spacing:.2px;
  transition:color var(--t-fast) var(--ease-out);
}
.foot-home:hover{color:var(--muted);}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  KEYFRAMES                                                                 */
/* ═════════════════════════════════════════════════════════════════════════ */
@keyframes screenEnter{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  T2 (mobile-landscape / iPad-portrait) ≥481px                              */
/* ═════════════════════════════════════════════════════════════════════════ */
@media (min-width:481px){
  .screen{padding:var(--space-l) var(--space-l) var(--space-3xl);}
}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  T3 (iPad-landscape / small laptop) ≥811px                                 */
/* ═════════════════════════════════════════════════════════════════════════ */
@media (min-width:811px){
  .chrome{padding:var(--space-l) var(--space-2xl) 0;}
  .screen{padding:var(--space-l) var(--space-2xl) var(--space-3xl);min-height:calc(100vh - 60px);}
  .journey-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-l);}
  .chap{padding:var(--space-l) var(--space-l);}
  .chap-num{font-size:38px;min-width:54px;}
}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  T4 (laptop / standard desktop) ≥1100px                                    */
/* ═════════════════════════════════════════════════════════════════════════ */
@media (min-width:1100px){
  .journey-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-xl);}
}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  T4+ (large laptop) ≥1200px                                                */
/* ═════════════════════════════════════════════════════════════════════════ */
@media (min-width:1200px){
  .chrome{padding:var(--space-xl) var(--space-2xl) 0;}
  .screen{padding:var(--space-xl) var(--space-2xl) var(--space-4xl);}
}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  T5 (large desktop) ≥1440px                                                */
/* ═════════════════════════════════════════════════════════════════════════ */
@media (min-width:1440px){
  .chrome{padding:var(--space-xl) var(--space-3xl) 0;}
  .screen{padding:var(--space-xl) var(--space-3xl) var(--space-4xl);}
}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  PREFERS-REDUCED-MOTION — every animation has a static fallback            */
/* ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .screen--active,.chap{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .chap{transition:none !important;}
  .begin-cta,.contact-row,.foot-home,
  .chrome-back,.wordmark a,
  .contact-row-copy,.contact-row-copy-icon,.epc-toast{
    transition:none !important;
    animation:none !important;
  }
  .begin-cta:hover{
    transform:none !important;
  }
  html{scroll-behavior:auto;}
}

/* ═════════════════════════════════════════════════════════════════════════ */
/*  PRINT — hide everything except a no-print message                         */
/* ═════════════════════════════════════════════════════════════════════════ */
@media print{
  body::before{
    content:'EPIC CSX walkthrough — visit https://www.epiccsx.com to view.';
    display:block;font-size:18px;padding:24px;color:#000;
  }
  .screen,.chrome{display:none !important;}
}
/* ═════════════════════════════════════════════════════════════════════════ */
/*  S117a — #context-gate scoped CSS                                          */
/*  Ported from epic-csx-mj-demo-v190.html (multiple zones, see handover).   */
/*  STRIPPED from port: .entry-context-summary, .ece-* (header is now static  */
/*  not <summary>), [open] state rules, @keyframes eceFade (no expand        */
/*  animation), .entry-start-btn-2 (CTA pair stripped). All other classes    */
/*  preserved verbatim from source. Wrapper renamed                          */
/*  .entry-context-expand → .context-gate; static header classes new         */
/*  (.context-gate-head / -title / -hint).                                    */
/* ═════════════════════════════════════════════════════════════════════════ */
.context-gate {
  max-width:780px; margin:var(--space-2xl) auto var(--space-l);
  border:1px solid rgba(200,169,110,0.18);
  border-radius:12px;
  background:rgba(12,22,38,0.35);
}
.context-gate-head {
  padding:12px 16px;
  display:flex; align-items:center; gap:10px;
  font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;
  border-bottom:1px solid rgba(200,169,110,0.15);
  background:rgba(200,169,110,0.04);
}
.context-gate-title {
  font-size:14px; font-weight:700; color:var(--gold);
  flex-shrink:0;
}
.context-gate-hint {
  flex:1; font-size:11.5px; font-family:'DM Sans',sans-serif;
  color:rgba(255,255,255,0.5); font-weight:400;
}
.context-gate .entry-context-body {
  padding:14px 16px 18px;
}

/* --- Creator credit --- */
.context-gate .entry-creator { text-align:center; padding:14px 16px 6px; }
.context-gate .entry-creator-label { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#c8a96e; font-weight:600; }
.context-gate .entry-creator-name { font-family:'Cormorant Garamond',Georgia,serif; font-size:18px; font-weight:700; color:#fff; margin-top:3px; }
.context-gate .entry-creator-sub { font-size:12px; color:rgba(255,255,255,0.45); margin-top:3px; }

/* --- Hook line --- */
.context-gate .entry-hook-card { margin:10px 16px; padding:12px 16px; border-radius:12px; background:linear-gradient(135deg,rgba(200,169,110,0.08),rgba(200,169,110,0.02)); border:1px solid rgba(200,169,110,0.2); text-align:center; }
.context-gate .entry-hook-text { font-family:'Cormorant Garamond',Georgia,serif; font-size:17px; font-weight:400; color:#fff; line-height:1.4; }

/* --- 4 metrics --- */
.context-gate .entry-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:8px 16px; }
.context-gate .entry-metric { text-align:center; padding:8px; border-radius:8px; }
.context-gate .entry-metric-val { font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:700; }
.context-gate .entry-metric-label { font-size:10px; color:rgba(255,255,255,0.5); margin-top:2px; }
.context-gate .entry-metric.green { background:rgba(45,138,94,0.08); border:1px solid rgba(45,138,94,0.15); }
.context-gate .entry-metric.green .entry-metric-val { color:#2d8a5e; }
.context-gate .entry-metric.cyan { background:rgba(34,211,238,0.08); border:1px solid rgba(34,211,238,0.15); }
.context-gate .entry-metric.cyan .entry-metric-val { color:#22d3ee; }
.context-gate .entry-metric.gold { background:rgba(200,169,110,0.08); border:1px solid rgba(200,169,110,0.15); }
.context-gate .entry-metric.gold .entry-metric-val { color:#c8a96e; }
.context-gate .entry-metric.purple { background:rgba(167,139,250,0.08); border:1px solid rgba(167,139,250,0.15); }
.context-gate .entry-metric.purple .entry-metric-val { color:#a78bfa; }

/* --- Operating Model EPIC pillars --- */
.context-gate .entry-operating-model {
  border:1px solid rgba(200,169,110,0.15);
  border-radius:10px; padding:10px 12px;
  margin:8px 16px;
  background:rgba(255,255,255,0.02);
}
.context-gate .entry-section-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.35); font-weight:600; margin-bottom:8px; }
.context-gate .entry-pillar-row { display:flex; align-items:flex-start; gap:8px; padding:4px 8px; border-radius:8px; margin-bottom:3px; }
.context-gate .entry-pillar-row.easy { background:rgba(34,211,238,0.06); border:1px solid rgba(34,211,238,0.12); }
.context-gate .entry-pillar-row.personalised { background:rgba(200,169,110,0.06); border:1px solid rgba(200,169,110,0.12); }
.context-gate .entry-pillar-row.intuitive { background:rgba(167,139,250,0.06); border:1px solid rgba(167,139,250,0.12); }
.context-gate .entry-pillar-row.contextual { background:rgba(52,211,153,0.06); border:1px solid rgba(52,211,153,0.12); }
.context-gate .entry-pillar-letter { font-size:11px; font-weight:700; min-width:14px; }
.context-gate .entry-pillar-text { font-size:11px; color:rgba(255,255,255,0.55); line-height:1.4; }
.context-gate .entry-op-footer {
  text-align:center; font-size:10.5px;
  letter-spacing:1px; text-transform:uppercase;
  color:rgba(200,169,110,0.7); margin-top:8px;
  padding-top:6px; border-top:1px solid rgba(200,169,110,0.1);
}

/* --- 5 phase cards --- */
.context-gate .entry-phases { display:flex; flex-direction:column; gap:4px; margin:8px 16px; }
.context-gate .entry-phase { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding:8px 12px; border-radius:10px; }
.context-gate .entry-phase-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.context-gate .entry-phase-title { font-size:12px; font-weight:700; }
.context-gate .entry-phase-desc { font-size:11px; color:rgba(255,255,255,0.5); line-height:1.5; }

/* --- Tagline --- */
.context-gate .entry-tagline {
  margin:12px 16px; padding:10px 14px;
  border-radius:10px;
  background:rgba(200,169,110,0.04);
  border:1px solid rgba(200,169,110,0.12);
  font-size:12px; color:rgba(255,255,255,0.6);
  line-height:1.7; text-align:center; font-style:italic;
}

/* --- Worth asking yourself --- */
.context-gate .entry-signpost-preview { margin:10px 16px; padding:10px; border-radius:10px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); }
.context-gate .entry-signpost-label { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.35); font-weight:600; margin-bottom:6px; text-align:center; }
.context-gate .entry-qa-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }

/* --- Fictitious + cross-industry notes --- */
.context-gate .entry-fictitious-note {
  text-align:center; font-size:11px;
  color:rgba(200,169,110,0.7); line-height:1.55;
  margin:10px 16px; padding:8px 14px;
  border-top:1px dotted rgba(200,169,110,0.15);
  border-bottom:1px dotted rgba(200,169,110,0.15);
}
.context-gate .entry-cross-note { text-align:center; font-size:12px; color:rgba(255,255,255,0.35); padding:6px 20px; line-height:1.5; }

/* --- Gold shimmer (used in hook line) --- */
.shimmer-gold {
  background: linear-gradient(90deg, #c8a96e 0%, #f5e6c8 50%, #c8a96e 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 2.5s linear infinite;
}
@keyframes shimmerText {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* --- Mobile (<=768px) — match source breakpoint A --- */
@media (max-width:768px) {
  .context-gate { max-width:100%; margin:var(--space-l) auto var(--space-m); border-radius:10px; }
  .context-gate-head { padding:11px 14px; gap:8px; }
  .context-gate-title { font-size:13px; }
  .context-gate-hint { font-size:10.5px; }
  .context-gate .entry-context-body { padding:12px 12px 14px; }
  .context-gate .entry-creator { padding:6px 16px 2px; margin-bottom:2px; }
  .context-gate .entry-creator-name { font-size:16px; margin-top:1px; }
  .context-gate .entry-creator-sub { font-size:11px; margin-top:1px; }
  .context-gate .entry-hook-card { margin:4px 8px; padding:8px 16px; }
  .context-gate .entry-hook-text { font-size:15px; }
  .context-gate .entry-metrics { gap:8px; margin:4px 8px; }
  .context-gate .entry-metric { padding:6px 4px; }
  .context-gate .entry-metric-val { font-size:16px; }
  .context-gate .entry-metric-label { font-size:9px; }
  .context-gate .entry-operating-model { margin:8px 8px; }
  .context-gate .entry-section-label { margin-bottom:4px; }
  .context-gate .entry-pillar-row { padding:2px 8px; margin-bottom:1px; }
  .context-gate .entry-pillar-text { font-size:10.5px; line-height:1.3; }
  .context-gate .entry-phases { gap:1px; margin:2px 8px; }
  .context-gate .entry-phase { padding:3px 14px; }
  .context-gate .entry-phase-icon { width:24px; height:24px; font-size:12px; border-radius:6px; }
  .context-gate .entry-phase-title { font-size:11px; }
  .context-gate .entry-phase-desc { font-size:10.5px; line-height:1.4; }
  .context-gate .entry-tagline { margin:8px 8px; }
  .context-gate .entry-signpost-preview { margin:2px 8px; padding:4px 12px; }
  .context-gate .entry-qa-grid { gap:2px 16px; }
  .context-gate .entry-fictitious-note { margin:6px 8px; }
  .context-gate .entry-cross-note { margin-top:2px; padding:2px 20px; font-size:11px; }
}

/* --- S117a scroll affordance (Begin-CTA below) --- */
.context-gate-scrolldown {
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  margin:14px 16px 4px;
  padding:10px 12px;
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:600;
  letter-spacing:1.6px; text-transform:uppercase;
  color:#c8a96e;
  border-top:1px solid rgba(200,169,110,0.12);
}
.context-gate-scrolldown .cgs-text {
  white-space:nowrap;
}
.context-gate-scrolldown .cgs-arrow {
  font-size:14px; line-height:1;
  display:inline-block;
  animation:cgsBounce 1.8s ease-in-out infinite;
}
@keyframes cgsBounce {
  0%,100% { transform:translateY(0); opacity:0.55; }
  50%     { transform:translateY(4px); opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  .context-gate-scrolldown .cgs-arrow { animation:none; opacity:0.85; }
}

/* Tablet portrait + small landscape (<=900px) — tighten gap, allow wrap on very narrow */
@media (max-width:900px) {
  .context-gate-scrolldown {
    gap:8px;
    margin:10px 8px 2px;
    padding:8px 10px;
    font-size:11.5px;
    letter-spacing:1.4px;
  }
  .context-gate-scrolldown .cgs-arrow { font-size:13px; }
}

/* Mobile portrait (<=420px) — text wraps cleanly between arrows */
@media (max-width:420px) {
  .context-gate-scrolldown {
    flex-wrap:wrap;
    gap:6px;
    font-size:11px;
    letter-spacing:1.2px;
  }
  .context-gate-scrolldown .cgs-text {
    white-space:normal;
    flex-basis:100%;
    text-align:center;
    order:2;
  }
  .context-gate-scrolldown .cgs-arrow:first-child { order:1; }
  .context-gate-scrolldown .cgs-arrow:last-child  { order:3; }
}

/* Short-viewport landscape (<=500px high) — collapse vertical animation amplitude */
@media (max-height:500px) and (orientation:landscape) {
  .context-gate-scrolldown { margin:8px 16px 2px; padding:6px 10px; }
  .context-gate-scrolldown .cgs-arrow { animation:none; opacity:0.85; }
}

  </style>
</head>
<body>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!--  PERSISTENT CHROME — wordmark + back-to-homepage                          -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<div class="chrome">
  <!-- TR-02 (S124): visually-hidden H1 for SEO + screen-reader page anchor. The page is the second-most-shared URL on epiccsx.com and previously had ZERO h1, only one h2. Inline style = no new CSS class needed; clip:rect approach works in every modern browser + matches WCAG visually-hidden recommendation. -->
  <h1 style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;">Begin the EPIC CSX walkthrough, by Alex Mead</h1>
  <div class="wordmark">
    <a aria-label='Back to epiccsx.com homepage' href='/'>epiccsx.com</a>
  </div>
  <a aria-label='Back to epiccsx.com homepage' class='chrome-back' href='/'>
    <span class="arr-back" aria-hidden="true">&larr;</span>
    <span>Back to homepage</span>
  </a>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!--  S76: PROMISE stage + page-indicator KILLED per architecture review §5    -->
<!--  Phase 1 (Q4 Option A). Single-screen JOURNEY now lands on first paint.   -->
<!--  Two-CTA discipline: Begin the walkthrough (gated) + four-act preview     -->
<!--  (open) presented adjacent in the .begin panel below the chapter index.   -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!--  THE JOURNEY — single-screen 12-chapter index                             -->
<!--  All 12 chapter titles preserved verbatim from v162 CHAPTERS array.       -->
<!--  Previews use AI-supports-humans framing per Alex S67 directive:          -->
<!--   - Humans (MJ, James, Marco, group members) are the actors.              -->
<!--   - AI is the surface, the listener, the connector, the signaller.        -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<section id="page-journey" class="screen screen--active">
  <div class="journey">

    <header class="journey-header">
      <div class="journey-eyebrow journey-eyebrow--hire">Imagined, designed and built by <strong>Alex Mead</strong><span class="je-sep">&middot;</span><strong>Available now</strong></div>
      <h2 class="journey-h2">Customer contact, designed as a <em>commercial engine</em>.</h2>
      <p class="journey-sub"><strong>Service and sales, run as one revenue engine.</strong> One guest, eight relationships, six connected channels: a live quote, one allergy remembered everywhere, trust recovered before escalation. <strong>&pound;148K becomes &pound;193K</strong>.</p>
      <p class="journey-meta">Four acts. A 13-part scripted operating-model walkthrough. About ten minutes.</p>
      <p class="journey-meta">This is a cruise, but it&rsquo;s an operating pattern, not a cruise one. In a bank it&rsquo;s a vulnerable customer met by the right specialist in one sentence; in an airline, cost out at scale without dropping the relationship.</p>
    </header>

    <!-- ─────────────────────────────────────────────────────────────────── -->
    <!--  S193 ATLAS CORRECTION — five proof-metric tiles                       -->
    <!--  Every number traceable to MJ's journey. No abstract SaaS-style        -->
    <!--  metrics. Replaces the four +30% / 78% / 4 min / 8x tiles that lived   -->
    <!--  inside the now-deleted context-gate.                                  -->
    <!-- ─────────────────────────────────────────────────────────────────── -->
    <div class="proof-tiles" aria-label="Ten proof metrics from MJ's voyage">
      <div class="proof-tile"><div class="proof-tile-val">&pound;24,013</div><div class="proof-tile-label">Outcome to watch &middot; &pound;30K budget &rarr; booked, &pound;5,987 headroom</div></div>
      <div class="proof-tile"><div class="proof-tile-val">8</div><div class="proof-tile-label">Guests connected</div></div>
      <div class="proof-tile"><div class="proof-tile-val">6 channels</div><div class="proof-tile-label">Zero reset</div></div>
      <div class="proof-tile"><div class="proof-tile-val">8.5 &rarr; 3.2 &rarr; 9.2</div><div class="proof-tile-label">Brand Sentiment arc</div></div>
      <div class="proof-tile"><div class="proof-tile-val">&pound;89K</div><div class="proof-tile-label">At risk &middot; recovered in 4 min &middot; trust back in 22</div></div>
      <div class="proof-tile"><div class="proof-tile-val">&pound;148K &rarr; &pound;193K</div><div class="proof-tile-label">LTV growth</div></div>
      <div class="proof-tile"><div class="proof-tile-val">94%</div><div class="proof-tile-label">Ambassador match</div></div>
      <div class="proof-tile"><div class="proof-tile-val">25th</div><div class="proof-tile-label">Anniversary &middot; 8 guests</div></div>
      <div class="proof-tile"><div class="proof-tile-val">9 venues</div><div class="proof-tile-label">Allergen-managed</div></div>
      <div class="proof-tile"><div class="proof-tile-val">&pound;5,987</div><div class="proof-tile-label">Under budget</div></div>
    </div>

    <!-- ─────────────────────────────────────────────────────────────────── -->
    <!--  S193 ATLAS CORRECTION — 4-act preview replaces v229 3-act framing.   -->
    <!--  Act boundaries align to demo file ACT_CARDS data table at steps      -->
    <!--  1 / 5 / 14 / 21 (four entries, not three).                            -->
    <!-- ─────────────────────────────────────────────────────────────────── -->
    <div class="journey-acts" id="journeyActs">

      <article class="journey-act" data-act="1">
        <div class="journey-act-head">
          <span class="journey-act-num">Act I</span>
          <span class="journey-act-name">Recognition Before Friction</span>
          <span class="journey-act-range">Chapters 1&ndash;2</span>
        </div>
        <p class="journey-act-line">The guest is known before she works. <strong>AI loads loyalty, occasion, &pound;148K LTV, allergy risk and James&rsquo;s 94% match</strong> before friction begins.</p>
      </article>

      <article class="journey-act" data-act="2">
        <div class="journey-act-head">
          <span class="journey-act-num">Act II</span>
          <span class="journey-act-name">The Relationship Becomes Collaborative</span>
          <span class="journey-act-range">Chapters 3&ndash;9</span>
        </div>
        <p class="journey-act-line">A quote becomes a living group environment. <strong>Eight guests, WhatsApp, video, flights, Amalfi, spa signals and hesitation</strong> all become commercial intelligence.</p>
      </article>

      <article class="journey-act" data-act="3">
        <div class="journey-act-head">
          <span class="journey-act-num">Act III</span>
          <span class="journey-act-name">Operational Intelligence Under Pressure</span>
          <span class="journey-act-range">Chapters 10&ndash;12</span>
        </div>
        <p class="journey-act-line">The relationship crosses onto the ship. <strong>AI Concierge, James, dining, guest services and recovery</strong> share one memory.</p>
      </article>

      <article class="journey-act" data-act="4">
        <div class="journey-act-head">
          <span class="journey-act-num">Act IV</span>
          <span class="journey-act-name">Service Compounds Commercially</span>
          <span class="journey-act-range">Chapter 13</span>
        </div>
        <p class="journey-act-line">The rebooking is earned, not blasted. <strong>AI detects the signal, James acts personally</strong>, and <em>&pound;148K becomes &pound;193K</em>.</p>
      </article>

    </div>

    <!-- ─────────────────────────────────────────────────────────────────── -->
    <!--  S193 ATLAS CORRECTION — Watch For list                                -->
    <!--  Single tight list replaces the S172 "Worth watching for" 8-line       -->
    <!--  block plus the now-deleted context-gate operating-model + chapter     -->
    <!--  summary repetition (three surfaces consolidated to one).              -->
    <!-- ─────────────────────────────────────────────────────────────────── -->
    <section class="entry-moments" aria-labelledby="entryMomentsHeading" style="max-width:880px;margin:48px auto 0;padding:36px 28px 32px;background:linear-gradient(180deg,rgba(201,169,110,.06) 0%,rgba(201,169,110,.02) 100%);border:1px solid rgba(201,169,110,.22);border-radius:14px;">
      <div style="text-align:center;margin:0 0 26px;">
        <div style="font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:#c8a96e;font-weight:500;margin:0 0 12px;">Watch for</div>
        <h3 id="entryMomentsHeading" style="font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;line-height:1.25;font-weight:500;color:#fff;margin:0 auto;max-width:680px;letter-spacing:-0.2px;">The moments cruise operations still miss.</h3>
      </div>
      <ol class="entry-moments-list" style="list-style:none;counter-reset:em;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 22px;">
        <li style="counter-increment:em;position:relative;padding:12px 16px 12px 50px;background:rgba(255,255,255,.03);border-radius:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88);"><span style="position:absolute;left:14px;top:11px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#c8a96e;letter-spacing:.5px;">01</span>The guest is recognised before she repeats herself.</li>
        <li style="counter-increment:em;position:relative;padding:12px 16px 12px 50px;background:rgba(255,255,255,.03);border-radius:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88);"><span style="position:absolute;left:14px;top:11px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#c8a96e;letter-spacing:.5px;">02</span>The quote becomes a live commercial environment.</li>
        <li style="counter-increment:em;position:relative;padding:12px 16px 12px 50px;background:rgba(255,255,255,.03);border-radius:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88);"><span style="position:absolute;left:14px;top:11px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#c8a96e;letter-spacing:.5px;">03</span>One organiser becomes eight revenue relationships.</li>
        <li style="counter-increment:em;position:relative;padding:12px 16px 12px 50px;background:rgba(255,255,255,.03);border-radius:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88);"><span style="position:absolute;left:14px;top:11px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#c8a96e;letter-spacing:.5px;">04</span>AI detects hesitation before abandonment.</li>
        <li style="counter-increment:em;position:relative;padding:12px 16px 12px 50px;background:rgba(255,255,255,.03);border-radius:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88);"><span style="position:absolute;left:14px;top:11px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#c8a96e;letter-spacing:.5px;">05</span>James becomes better because AI prepares him.</li>
        <li style="counter-increment:em;position:relative;padding:12px 16px 12px 50px;background:rgba(255,255,255,.03);border-radius:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88);"><span style="position:absolute;left:14px;top:11px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#c8a96e;letter-spacing:.5px;">06</span>One allergy mention is remembered across the ship.</li>
        <li style="counter-increment:em;position:relative;padding:12px 16px 12px 50px;background:rgba(255,255,255,.03);border-radius:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88);"><span style="position:absolute;left:14px;top:11px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#c8a96e;letter-spacing:.5px;">07</span>Six channels behave as one relationship memory.</li>
        <li style="counter-increment:em;position:relative;padding:12px 16px 12px 50px;background:rgba(255,255,255,.03);border-radius:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88);"><span style="position:absolute;left:14px;top:11px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#c8a96e;letter-spacing:.5px;">08</span>Recovery begins before escalation destroys trust.</li>
        <li style="counter-increment:em;position:relative;padding:12px 16px 12px 50px;background:rgba(255,255,255,.03);border-radius:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.88);"><span style="position:absolute;left:14px;top:11px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#c8a96e;letter-spacing:.5px;">09</span>Service quality becomes the next booking.</li>
      </ol>
    </section>

    <!-- ─────────────────────────────────────────────────────────────────── -->
    <!--  S193 ATLAS CORRECTION — DELETED: the #context-gate primer block       -->
    <!--  (operating-model EPIC pillars, five phase cards, tagline, cross-      -->
    <!--  industry note, fictitious-note, scroll-down arrow). Per §4.1 cut and  -->
    <!--  §11 REPLACE-not-ADD doctrine. The duplication between "Worth          -->
    <!--  watching for", "Operating Model" and the chapter-summary triplet      -->
    <!--  was the explanatory bloat — only the §4.6 Watch For list survives.    -->
    <!--  Begin CTA follows directly below the four-act preview.                -->
    <!-- ─────────────────────────────────────────────────────────────────── -->

    <!-- ─────────────────────────────────────────────────────────────────── -->
    <!--  BEGIN PANEL — primary CTA, navigates straight to demo (S160 Flag 23)-->
    <!-- ─────────────────────────────────────────────────────────────────── -->
    <div class="begin">
      <button type="button" class="begin-cta" id="beginCta">
        <span>Begin the full walkthrough</span>
        <span class="arr" aria-hidden="true">&rarr;</span>
      </button>
      <button type="button" class="begin-cta" id="trailerCta" style="background:transparent;border:1px solid var(--gold);color:var(--gold);margin-top:14px;">
        <span>Watch the 90-second cinematic trailer</span>
        <span class="arr" aria-hidden="true">&rarr;</span>
      </button>
      <button type="button" class="begin-cta" id="featureCta" style="background:transparent;border:1px solid var(--gold);color:var(--gold);margin-top:14px;">
        <span>Watch the 8-minute cinematic feature</span>
        <span class="arr" aria-hidden="true">&rarr;</span>
      </button>
      <p class="begin-hint">The walkthrough is the complete 13-chapter scripted experience, just click Begin. Prefer to watch? The 90-second trailer is the cinematic taste; the 8-minute feature is the full movie. All three are open to all.</p>

    </div>

    <!-- ─────────────────────────────────────────────────────────────────── -->
    <!--  S158 v229 (P0a) — 13-CHAPTER DETAILS DISCLOSURE                       -->
    <!--  Cards relocated byte-identical from the prior journey-grid (above    -->
    <!--  Begin). Collapsed by default on every viewport. Native <details>     -->
    <!--  toggle is Rule-21-compliant (one scripted-equivalent disclosure       -->
    <!--  control, no free-click cascade). EPIC CSX FEATURE eyebrows retained  -->
    <!--  per S158 Amendment 1: framework-first rule applies to hero/meta —     -->
    <!--  collapsed disclosure content is opt-in expansion, not meta.           -->
    <!-- ─────────────────────────────────────────────────────────────────── -->
    <details class="journey-chapters-details" id="journeyChaptersDetails">
      <summary aria-controls="chapterGrid">See all 13 chapters <span class="jcd-caret" aria-hidden="true">&rarr;</span></summary>
    <div class="journey-grid" id="chapterGrid">

      <article class="chap" data-pillar="easy">
        <div class="chap-num">01</div>
        <div class="chap-meta">
          <div class="chap-title">First Contact: AI Understands Everything</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> One Message → 5 Entities Surfaced, James Matched at 94%</div>
          <p class="chap-preview"><strong>MJ</strong> describes her 25th anniversary trip naturally. AI <em>extracts</em> every detail in real time, surfaces David&rsquo;s severe nut allergy as critical, recognises &pound;148K LTV. <strong>James</strong> matches at 94%, and steps in the moment a human specialist outvalues automation.</p>
          <div class="chap-pillar"><span class="pdot"></span>Easy</div>
        </div>
      </article>

      <article class="chap" data-pillar="personalised">
        <div class="chap-num">02</div>
        <div class="chap-meta">
          <div class="chap-title">Seamless Handoff: James Creates the Perfect Quote</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> James Builds £24,013 Quote Live, Under Budget by £5,987</div>
          <p class="chap-preview"><strong>James</strong> receives a complete brief with zero context loss. He crafts the personalised quote, AI <em>surfacing</em> every detail line by line as MJ speaks. &pound;24,013. Under budget by &pound;5,987.</p>
          <div class="chap-pillar"><span class="pdot"></span>Personalised</div>
        </div>
      </article>

      <article class="chap" data-pillar="intuitive">
        <div class="chap-num">03</div>
        <div class="chap-meta">
          <div class="chap-title">One Enquiry. Eight Active Relationships.</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> One Quote Shared → 8 Active Guest Relationships, James Sees All</div>
          <p class="chap-preview"><strong>MJ</strong> shares the quotation; the group of 8 guests comes alive: photos, polls, dietary flags, cabin comparisons. AI <em>alerts</em> <strong>James</strong> the moment a guest needs a human. James and the Ambassador team are one message away across every channel.</p>
          <div class="chap-pillar"><span class="pdot"></span>Intuitive</div>
        </div>
      </article>

      <article class="chap" data-pillar="contextual">
        <div class="chap-num">04</div>
        <div class="chap-meta">
          <div class="chap-title">AI Catches the Drift. James Closes the Callback.</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> AI Spots Ryan's 3 Browses, James Closes on a Whisper-Coached Call</div>
          <p class="chap-preview"><strong>Ryan</strong> browsed three times without confirming. AI <em>spots</em> the pattern before any human notices and hands <strong>James</strong> a complete callback brief. James calls armed, GenAI <em>surfacing</em> flights, pricing and group logistics live, and drops them into the quote as the call closes. No admin tail.</p>
          <div class="chap-pillar"><span class="pdot"></span>Contextual</div>
        </div>
      </article>

      
      <article class="chap" data-pillar="intuitive">
        <div class="chap-num">05</div>
        <div class="chap-meta">
          <div class="chap-title">AI Reads MJ&rsquo;s 20-Second Video Message</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> AI Reads the 20-Second Video, James Lands the Moment</div>
          <p class="chap-preview"><strong>MJ</strong> records 20 seconds. AI <em>analyses</em> sentiment, emotion and booking signals. The micro-dip lands the moment David&rsquo;s allergy is mentioned. Text captures words. Video captures intent.</p>
          <div class="chap-pillar"><span class="pdot"></span>Intuitive</div>
        </div>
      </article>

      <article class="chap" data-pillar="personalised">
        <div class="chap-num">06</div>
        <div class="chap-meta">
          <div class="chap-title">One Allergy Mention. Carried Across Every Venue.</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> One Message to James → 9 Venues Flagged, Marco Confirmed</div>
          <p class="chap-preview">David&rsquo;s severe peanut and tree-nut allergy: one mention <em>propagated</em> to every dining venue. <strong>Marco Bellini</strong> (Head Chef) confirms the protocol personally. The flag follows David through every meal, every event, every venue.</p>
          <div class="chap-pillar"><span class="pdot"></span>Personalised</div>
        </div>
      </article>

      <article class="chap" data-pillar="contextual">
        <div class="chap-num">07</div>
        <div class="chap-meta">
          <div class="chap-title">James Reaches MJ, Before She Asks</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> AI Signals the Moment, James Reaches MJ on WhatsApp</div>
          <p class="chap-preview"><strong>James</strong> reaches out via WhatsApp at exactly the right moment. Not a cold push: a high-value journey, an unresolved need, his preferred channel and a consented signal that the time is right. Every word informed by AI: anniversary, group, allergy, budget.</p>
          <div class="chap-pillar"><span class="pdot"></span>Contextual</div>
        </div>
      </article>

      <article class="chap" data-pillar="personalised">
        <div class="chap-num">08</div>
        <div class="chap-meta">
          <div class="chap-title">The Close</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> James Closes £24,013, MJ Confirms by Video</div>
          <p class="chap-preview"><strong>MJ</strong> confirms. &pound;24,013. Under budget by &pound;5,987. AI <em>surfaces</em> the leftover budget to <strong>James</strong>, never direct to MJ. James presents the spa upgrade as his own thoughtful offer. 8 guests coordinated. Zero forms. Zero transfers.</p>
          <div class="chap-pillar"><span class="pdot"></span>Personalised</div>
        </div>
      </article>

      <article class="chap" data-pillar="easy">
        <div class="chap-num">09</div>
        <div class="chap-meta">
          <div class="chap-title">AI Concierge On Board: Day 1</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> James + Priya Cover 24/7/365, Zero Dropped Context</div>
          <p class="chap-preview"><strong>MJ</strong> is on the ship. The AI Concierge already knows everything from the booking journey. <strong>James</strong> is dedicated, part of an Ambassador team that covers MJ 24/7/365. AI <em>carries</em> full context to whoever picks up when James is off-shift.</p>
          <div class="chap-pillar"><span class="pdot"></span>Easy</div>
        </div>
      </article>

      <article class="chap" data-pillar="easy">
        <div class="chap-num">10</div>
        <div class="chap-meta">
          <div class="chap-title">Every Question, A Service Moment</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> 4 Questions → 4 Service Moments, Alessandra Pours the Wine</div>
          <p class="chap-preview"><strong>MJ</strong> asks four unscripted questions: weather, dress code, football, wine. AI <em>answers</em> each one. <strong>James</strong> turns each into something real: a held lunch table, the photographer, the Sports Lounge, a private wine tasting.</p>
          <div class="chap-pillar"><span class="pdot"></span>Easy</div>
        </div>
      </article>

      <article class="chap" data-pillar="personalised">
        <div class="chap-num">11</div>
        <div class="chap-meta">
          <div class="chap-title">Six Channels. One Truth. Zero Repetition.</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> 22 Interactions · 6 Channels: Sentiment 7.8 → 9.1, Zero Repeats</div>
          <p class="chap-preview">Day 3: AI <em>bridges</em> MJ&rsquo;s question to <strong>James</strong> via Chat. Day 6: James answers a worried call with full context already on screen, AI whispering as he speaks. Sentiment 7.8 &rarr; 9.1. MJ never repeats herself once across 6 channels.</p>
          <div class="chap-pillar"><span class="pdot"></span>Personalised</div>
        </div>
      </article>

      <article class="chap" data-pillar="contextual">
        <div class="chap-num">12</div>
        <div class="chap-meta">
          <div class="chap-title">When Things Go Wrong: 8.5 &rarr; 3.2</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> AI Flags 8.5 → 3.2, £89K Protected · Call in 4 Min · Trust Restored in 22</div>
          <p class="chap-preview">David is offered tree-nut traces at the buffet. Brand Sentiment crashes 8.5 &rarr; 3.2. &pound;89K LTV at risk. AI <em>escalates</em> in 90 seconds; <strong>James</strong> recovers MJ from 3.2 to 9.2 in 22 minutes: through speed, transparency, proof.</p>
          <div class="chap-pillar"><span class="pdot"></span>Contextual</div>
        </div>
      </article>

      <article class="chap" data-pillar="intuitive">
        <div class="chap-num">13</div>
        <div class="chap-meta">
          <div class="chap-title">The Commercial Payoff</div>
          <div class="chap-feature"><span class="chap-feature-eyebrow">PROOF MOMENT ·</span> James Closes £26,200 Rebooking, LTV £148K → £193K</div>
          <p class="chap-preview">Service became revenue. <strong>MJ</strong> rebooks. LTV grows from &pound;148K to &pound;193K (+30.4%). AI <em>spotted</em> the rebooking signal; <strong>James</strong> closed it. Greek Islands, July 2027, &pound;26,200. Sell more. Serve more. Be more.</p>
          <div class="chap-pillar"><span class="pdot"></span>Intuitive</div>
        </div>
      </article>

    
    </div>
    </details>

    <!-- ─────────────────────────────────────────────────────────────────── -->
    <!--  PAGE 2 FOOTER                                                        -->
    <!-- ─────────────────────────────────────────────────────────────────── -->
    <footer class="journey-foot">
      <a class='foot-home' href='/'>Back to homepage</a>
    </footer>

  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!--  MJ-S236 — ALWAYS-AVAILABLE STICKY ROUTE BAR (dedicated component; see   -->
<!--  the .sticky-begin-bar CSS note. NOT the retired S128c fixed .begin-cta  -->
<!--  pattern). #beginCtaSticky shares the #beginCta navigation handler; the  -->
<!--  film route is a native anchor. Both routes reachable from first paint.  -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<div class="sticky-begin-bar" role="group" aria-label="Start the walkthrough">
  <button type="button" class="sticky-begin-cta" id="beginCtaSticky">
    <span>Begin the full walkthrough</span>
    <span aria-hidden="true">&rarr;</span>
  </button>
  <a aria-label='Watch the 90-second cinematic trailer' class='sticky-begin-film' href='/epic-csx-trailer-v123' id='trailerCtaSticky'>Watch the 90-second trailer <span aria-hidden="true">&rarr;</span></a>
  <a aria-label='Watch the 8-minute cinematic feature' class='sticky-begin-film' href='/epic-csx-feature-v315' id='featureCtaSticky'>Watch the 8-minute feature <span aria-hidden="true">&rarr;</span></a>
</div>


<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!--  SCREEN ROUTING + EYEBROW MICROCOPY + INTERSECTION-OBSERVER CASCADE       -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<script>
(function(){

  // ─── Screen routing ────────────────────────────────────────────────────────
  function setScreen(name, opts){
    opts = opts || {};
    var screens = document.querySelectorAll('.screen');
    for(var i = 0; i < screens.length; i++){
      screens[i].classList.remove('screen--active');
    }
    var target = document.getElementById('page-' + name);
    if(target){ target.classList.add('screen--active'); }

    // Smooth scroll to top of viewport on screen change
    if(opts.scroll !== false){
      try { window.scrollTo({ top: 0, behavior: 'smooth' }); }
      catch(e){ window.scrollTo(0, 0); }
    }

    // Re-arm chapter cascade observer on Journey activation
    if(name === 'journey'){
      observeChapters();
    }
  }

  // ─── Toast helper (Cormorant-gold, 2-second auto-dismiss) ──────────────────
  var TOAST_TIMER = null;
  function showToast(message){
    var t = document.getElementById('epcToast');
    if(!t) return;
    t.textContent = message;
    // Force reflow so the transition fires when class is re-added in quick succession
    void t.offsetWidth;
    t.classList.add('is-visible');
    if(TOAST_TIMER){ clearTimeout(TOAST_TIMER); }
    TOAST_TIMER = setTimeout(function(){
      t.classList.remove('is-visible');
    }, 2000);
  }

  // ─── Click-to-copy email row (Rule 13 fallback for direct-address rows) ────
  function legacyCopyText(text){
    try {
      var ta = document.createElement('textarea');
      ta.value = text;
      ta.setAttribute('readonly', '');
      ta.style.position = 'absolute';
      ta.style.left = '-9999px';
      ta.style.top = '0';
      document.body.appendChild(ta);
      ta.select();
      ta.setSelectionRange(0, text.length);
      var ok = document.execCommand && document.execCommand('copy');
      document.body.removeChild(ta);
      return !!ok;
    } catch(e){ return false; }
  }
  function copyEmailRow(btn){
    var email = btn.getAttribute('data-copy');
    if(!email) return;
    var done = function(){ showToast('Copied ' + email); };
    var fail = function(){
      // Last-resort graceful degradation — open mailto so the visitor isn't stranded.
      // Only reached when both clipboard API and execCommand fail (very old browsers).
      try { window.location.href = 'mailto:' + email; }
      catch(ex){ showToast('Copy unavailable — please email ' + email); }
    };
    if(navigator.clipboard && typeof navigator.clipboard.writeText === 'function'){
      navigator.clipboard.writeText(email).then(done).catch(function(){
        if(legacyCopyText(email)){ done(); } else { fail(); }
      });
    } else if(legacyCopyText(email)){
      done();
    } else {
      fail();
    }
  }

  // ─── Hash → screen on initial load + popstate ─────────────────────────────
  function syncFromHash(){
    var h = (window.location.hash || '').replace('#','').toLowerCase();
    if(h === 'journey'){
      setScreen('journey', { scroll: false });
    } else if(h === 'begin'){
      // S160 Flag 23: gate was removed; #begin deep-link now lands on journey
      // screen (the visitor can press Begin to navigate straight to the demo).
      setScreen('journey', { scroll: false });
    } else {
      setScreen('journey', { scroll: false });
    }
  }
  window.addEventListener('popstate', syncFromHash);

  // ─── Chapter cascade — IntersectionObserver-driven fade-up ─────────────────
  // S158 v229 (P0a): observer extended to the new .journey-act cards (the 3-act
  // entry framing above Begin). The 14 .chap cards still exist but live inside
  // a collapsed <details> below Begin; we (re-)observe them on details open so
  // the entrance animation fires when the visitor expands the disclosure.
  var chapObserver = null;
  function observeChapters(){
    if(!('IntersectionObserver' in window)){
      // No IO support → reveal all immediately
      var fb = document.querySelectorAll('.chap, .journey-act');
      for(var i = 0; i < fb.length; i++){
        if(fb[i].classList.contains('journey-act')){ fb[i].classList.add('journey-act--in'); }
        else { fb[i].classList.add('chap--in'); }
      }
      return;
    }
    if(chapObserver){ chapObserver.disconnect(); }
    chapObserver = new IntersectionObserver(function(entries){
      entries.forEach(function(en){
        if(en.isIntersecting){
          if(en.target.classList.contains('journey-act')){
            en.target.classList.add('journey-act--in');
          } else {
            en.target.classList.add('chap--in');
          }
          chapObserver.unobserve(en.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    var elems = document.querySelectorAll('.chap, .journey-act');
    for(var j = 0; j < elems.length; j++){
      chapObserver.observe(elems[j]);
    }
  }

  // ─── Wire up CTAs once DOM is ready ───────────────────────────────────────
  function init(){
    syncFromHash();

    // S76: PROMISE killed — seeUnfolds button removed; handler block removed.
    // S76: backToPromise dead-link removed — handler block removed.

    // S122: gate moved to in-demo Ch8. Begin always navigates straight to demo —
    // no password reveal here any more. Demo file handles the gate at Ch8 CTA.
    // S160 Flag 23: all in-page gate scaffolding removed (CSS, JS functions,
    // DOM stub, Netlify form registration). Begin click handler unchanged.
    var beginBtn = document.getElementById('beginCta');
    if(beginBtn){
      beginBtn.addEventListener('click', function(e){
        e.preventDefault();
        window.location.href = 'epic-csx-mj-demo-v334.html';
      });
    }
    // MJ-S236 — always-available sticky Begin shares the same single navigation.
    var beginBtnSticky = document.getElementById('beginCtaSticky');
    if(beginBtnSticky){
      beginBtnSticky.addEventListener('click', function(e){
        e.preventDefault();
        window.location.href = 'epic-csx-mj-demo-v334.html';
      });
    }
    var featureBtn = document.getElementById('featureCta');
    if(featureBtn){
      featureBtn.addEventListener('click', function(e){
        e.preventDefault();
        window.location.href = 'epic-csx-feature-v315.html';
      });
    }
    var trailerBtn = document.getElementById('trailerCta');
    if(trailerBtn){
      trailerBtn.addEventListener('click', function(e){
        e.preventDefault();
        window.location.href = 'epic-csx-trailer-v123.html';
      });
    }

    // S158 v229 (P0a) — re-observe .chap cards when the 13-chapter <details>
    // expands for the first time. While collapsed, .chap elements have
    // display:none and the IntersectionObserver cannot trigger their fade-up.
    // On first toggle to open we re-run observeChapters() so the entrance
    // animation fires as the visitor scrolls through the expanded list.
    var chDetails = document.getElementById('journeyChaptersDetails');
    if(chDetails){
      var chReobserved = false;
      chDetails.addEventListener('toggle', function(){
        if(chDetails.open && !chReobserved){
          chReobserved = true;
          try { observeChapters(); } catch(ex){}
        }
      });
    }

    // Click-to-copy email rows (Rule 13 fallback for direct-address rows)
    var copyBtns = document.querySelectorAll('.contact-row-copy');
    for(var ci = 0; ci < copyBtns.length; ci++){
      copyBtns[ci].addEventListener('click', function(e){
        e.preventDefault();
        copyEmailRow(this);
      });
    }

  }

  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!--  TOAST — Cormorant-gold premium, used by click-to-copy + future surfaces  -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<div class="epc-toast" id="epcToast" role="status" aria-live="polite" aria-atomic="true"></div>

</body>
</html>