PageSourceSearch

https://vo.dev/product/builder/

html vo.dev collected 2026-10-04 13:33:21 UTC 62,861 bytes, 232 lines download raw bytes

1<!DOCTYPE html><html lang="en"> <head><meta name="sentry-route-name" content="%2Fproduct%2Fbuilder"/><meta charset="utf-8"><!-- Persona attribute BEFORE first paint (no-flicker rule, same pattern
2         as dark-mode gates): the header CTA's maker label is CSS keyed off
3         html[data-persona], so the right label renders on the very first
4         frame instead of swapping at DOMContentLoaded. Keys owned by
5         dev-entry.js (ritual_dev_entry / ritual_maker_entry). -->
5<script>
6      try {
7        var p =
8          localStorage.getItem("ritual_maker_entry") === "1"
9            ? "maker"
10            : localStorage.getItem("ritual_dev_entry") === "1"
11              ? "developer"
12              : "";
13        if (p) document.documentElement.setAttribute("data-persona", p);
14      } catch (e) {
15        /* storage blocked: default CTA renders */
16      }
17    </script>
17<!-- Same no-flicker rule, for the verified developer coming back from the
18         email link. The CLI is a client:only island, so the marketing page is
19         what paints while React loads, and they watched the page they had just
20         left reassemble itself before the console they came back for arrived.
21         Stamping html here covers that gap from the first frame; CliHeroPlugin
22         mounts straight into fullscreen underneath it and clears the flag.
23
24         The style is INLINE rather than in cli.css: that sheet ships with the
25         island's chunk, which by definition has not loaded yet at the moment
26         this needs to be painted.
27
28         Scoped to the developer pages, since ?return=1 is a common enough
29         param to belong to something else elsewhere. -->
29<script>
30      try {
31        if (
32          location.pathname.indexOf("/product/developer") === 0 &&
33          new URLSearchParams(location.search).get("return") === "1"
34        ) {
35          document.documentElement.setAttribute("data-cli-return", "");
36          /* Never strand them on a dark screen: if the island fails to mount
37             (JS blocked, chunk 404), the page comes back on its own. Longer
38             than a slow mount, shorter than a visitor's patience. */
39          setTimeout(function () {
40            document.documentElement.removeAttribute("data-cli-return");
41          }, 8000);
42        }
43      } catch (e) {
44        /* no URL API / blocked: the old flash is the fallback, not a failure */
45      }
46    </script>
46<style>
47      /* #1B1A2A is --cli-bg, hardcoded for the same reason the style is inline:
48         the sheet that defines the token has not arrived yet. */
49      html[data-cli-return] {
50        background: #1b1a2a;
51      }
52      html[data-cli-return]::before {
53        content: "";
54        position: fixed;
55        inset: 0;
56        background: #1b1a2a;
57        /* Under the takeover (100) so the console draws over it, above
58           everything else so the page underneath never shows. */
59        z-index: 99;
60        /* A full-screen overlay that ate clicks would be its own bug. */
61        pointer-events: none;
62      }
63      html[data-cli-return] body {
64        overflow: hidden;
65      }
66    </style><link rel="icon" type="image/png" href="/favicon.png"><link rel="apple-touch-icon" href="/favicon.png"><!-- interactive-widget=resizes-content: the on-screen keyboard SHRINKS the
67         layout viewport, so the prelogin CLI's fullscreen input + action button
68         sit above the keyboard instead of behind it on mobile. Harmless on
69         pages without the CLI (only changes keyboard-resize behavior). --><meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content"><meta name="generator" content="Astro v6.4.8"><meta name="description" content="Ritual's discovery-to-recommendations workflow builds clarity before context debt slows you down."><link rel="canonical" href="https://ritual.work/product/builder/"><!-- Open Graph --><meta property="og:type" content="website"><meta property="og:title" content="Builder — Ritual"><meta property="og:description" content="Ritual's discovery-to-recommendations workflow builds clarity before context debt slows you down."><meta property="og:url" content="https://ritual.work/product/builder/"><meta property="og:image" content="https://ritual.work/hero-graph.png"><meta property="og:site_name" content="Ritual"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Builder — Ritual"><meta name="twitter:description" content="Ritual's discovery-to-recommendations workflow builds clarity before context debt slows you down."><meta name="twitter:image" content="https://ritual.work/hero-graph.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"><title>Builder — Ritual</title>
69<script>(function(){const posthogKey = "phc_uDVTitoexBzZHYAc46FpaX2uRMhA8EWmZFNPfEDDykAM";
70const posthogHost = "https://us.i.posthog.com";
71const releaseSha = "0db980f";
72
73    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once register_for_session unregister unregister_for_session opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
74
75    // Don't send analytics from local dev hosts — keeps localhost test
76    // events (and their localhost $current_url / fake UTMs) out of the
77    // production PostHog project. The stub still exists, so capture/register
78    // calls below are harmless no-ops and the CTA-routing logic still runs.
79    var phHost = location.hostname;
80    var phIsDevHost =
81      phHost === "localhost" ||
82      phHost === "127.0.0.1" ||
83      phHost === "0.0.0.0" ||
84      phHost === "::1" ||
85      phHost === "[::1]" ||
86      phHost.slice(-6) === ".local";
87    if (!phIsDevHost) {
88      // Scope replay to the developer funnel — watch where users stall on
89      // /product/developer + the quickstart, without recording the whole site.
90      var phPath = location.pathname;
91      var phFunnelPage =
92        phPath.indexOf('/product/developer') === 0 ||
93        phPath.indexOf('/product/makers') === 0 ||
94        phPath.indexOf('/docs/quickstart') === 0;
95
96      posthog.init(posthogKey, {
97        api_host: posthogHost,
98        person_profiles: 'identified_only',
99        // Session replay stays OFF by default; `loaded` below turns it on for
100        // the funnel pages only. Inputs are masked, and anything tagged
101        // .ph-no-capture (e.g. the minted token) is masked in the replay too.
102        // (Also needs Session Replay enabled in the PostHog project settings.)
103        disable_session_recording: true,
104        session_recording: { maskAllInputs: true, maskTextSelector: '.ph-no-capture' },
105        // MUST start replay from `loaded`, NOT synchronously after init().
106        //
107        // This call used to sit right below init() behind a
108        // `posthog.startSessionRecording && …` guard, and it never once ran.
109        // At that moment window.posthog is still the SNIPPET STUB, which only
110        // proxies a fixed method list — capture, identify, register,
111        // onFeatureFlags and friends. `startSessionRecording` is NOT on that
112        // list, so the guard evaluated falsy and skipped silently, forever.
113        // Verified in-browser 2026-08-06 against production: at snippet time
114        // `!!posthog.startSessionRecording` is false; after the SDK loads it is
115        // a function, and `sessionRecording.status` reads "disabled" because
116        // nothing ever started it. $recording_status was "disabled" on all
117        // 1,782 developer-page events in the preceding two days.
118        //
119        // `loaded` fires with the REAL SDK, so the method exists. Same class of
120        // bug as the arm-resolution race this PR fixes: code assuming PostHog
121        // is ready when only its stub is.
122        loaded: function (ph) {
123          if (!phFunnelPage) return;
124          try { ph.startSessionRecording(); } catch (_) {}
125        },
126      });
127      // Deploy provenance on every client event (see frontmatter comment).
128      // `register` IS on the stub's proxy list, so this one is safe here.
129      if (releaseSha) {
130        posthog.register({ release_sha: releaseSha });
131      }
132    }
133
134    // CTA click delegation: any element (or ancestor up to 6 levels)
135    // with data-ph-cta becomes a tracked CTA. We also pick up the
136    // resolved destination so "Get started" → /ritual-mcp/docs#install
137    // tells us where they went without needing a separate prop.
138    (function () {
139      function readCta(el) {
140        for (var i = 0; i < 6 && el && el !== document; i++) {
141          if (el.dataset && el.dataset.phCta) {
142            return {
143              cta: el.dataset.phCta,
144              location: el.dataset.phCtaLocation || null,
145              href: el.getAttribute && (el.getAttribute("href") || el.getAttribute("formaction")) || null,
146              text: (el.innerText || el.textContent || "").trim().slice(0, 80) || null,
147            };
148          }
149          el = el.parentElement;
150        }
151        return null;
152      }
153      document.addEventListener("click", function (ev) {
154        var info = readCta(ev.target);
155        if (!info) return;
156        try {
157          window.posthog && window.posthog.capture && window.posthog.capture("cta_clicked", info);
158        } catch (_) {}
159      }, { capture: true });
160      // Form submit tracking: tag the <form> with data-ph-cta to
161      // capture the actual submission (more meaningful than a click
162      // for the waitlist form).
163      document.addEventListener("submit", function (ev) {
164        var info = readCta(ev.target);
165        if (!info) return;
166        try {
167          window.posthog && window.posthog.capture && window.posthog.capture("cta_submitted", info);
168        } catch (_) {}
169      }, { capture: true });
170    })();
171    // Developer-entrant detection + CTA routing lives in the bundled
172    // module src/scripts/dev-entry.js (mounted via DevEntryRouting.astro),
173    // which can import the shared Keycloak/connect-flow constants. Kept
174    // out of this inline snippet so we don't duplicate auth config here.
175  })();</script>
175<script type="module" src="/_astro/DevEntryRouting.astro_astro_type_script_index_0_lang.BMf2VZsx.js"></script>
175<link rel="stylesheet" href="/_astro/PostHogScript.CAMvvd4h.css"><style>.cta-label-maker,html[data-persona=maker] .cta-label-default{display:none}html[data-persona=maker] .cta-label-maker{display:inline}
176.logo-bar[data-astro-cid-2xxwpcru].is-marquee .logo-track[data-astro-cid-2xxwpcru]{width:max-content;justify-content:flex-start;animation:logo-scroll 40s linear infinite}.logo-bar[data-astro-cid-2xxwpcru].is-marquee:hover .logo-track[data-astro-cid-2xxwpcru]{animation-play-state:paused}@keyframes logo-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}@media(prefers-reduced-motion:reduce){.logo-bar[data-astro-cid-2xxwpcru].is-marquee .logo-track[data-astro-cid-2xxwpcru]{animation:none}}
177.feature-slide[data-astro-cid-hcoyjovv]{opacity:0;transition:opacity .6s ease;pointer-events:none}.feature-slide[data-astro-cid-hcoyjovv].is-active{opacity:1;pointer-events:auto}.carousel-dot[data-astro-cid-hcoyjovv].is-active{background-color:#fffffff2;width:1.25rem}.feature-step[data-astro-cid-hcoyjovv]{border-color:var(--color-ink-200, #e5e5e5)}.feature-step[data-astro-cid-hcoyjovv] .step-label[data-astro-cid-hcoyjovv]{color:var(--color-ink-500, #6b6b6b);transition:color .2s ease}.feature-step[data-astro-cid-hcoyjovv]:hover .step-label[data-astro-cid-hcoyjovv]{color:var(--color-ink-700, #2c2c2c)}.feature-step[data-astro-cid-hcoyjovv].is-active{border-color:var(--color-accent-500, #f97316)}.feature-step[data-astro-cid-hcoyjovv].is-active .step-label[data-astro-cid-hcoyjovv]{color:var(--color-ink-900, #0a0a0a);font-weight:600}@media(prefers-reduced-motion:reduce){.feature-slide[data-astro-cid-hcoyjovv]{transition:none}}
178</style>
178<script type="module" src="/_astro/page.Bm8nvw0p.js"></script>
178</head> <body class="min-h-screen flex flex-col"> <header class="sticky top-0 z-50 bg-canvas/85 backdrop-blur border-b border-ink-100"> <div class="mx-auto max-w-7xl px-6 h-20 flex items-center justify-between"> <a href="/" class="flex items-center gap-2" aria-label="Ritual home"> <img src="/ritual-logo.svg" alt="Ritual" class="h-9 w-auto"> </a> <!-- Desktop nav --> <nav class="hidden md:flex items-center gap-2 text-base text-ink-700"> <a href="/" class="px-4 py-2.5 rounded-md hover:text-ink-900 transition-colors"> Home </a><a href="/problem" class="px-4 py-2.5 rounded-md hover:text-ink-900 transition-colors"> Problem </a><div class="relative group"> <button type="button" class="inline-flex items-center gap-1 px-4 py-2.5 rounded-md hover:text-ink-900 transition-colors" aria-haspopup="true" aria-expanded="false"> Product <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 transition-transform group-hover:rotate-180"> <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path> </svg> </button> <div class="invisible opacity-0 translate-y-1 group-hover:visible group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-0 transition-all absolute left-0 top-full pt-2 w-72"> <div class="rounded-xl bg-white shadow-lg ring-1 ring-ink-100 p-2"> <a href="/product/builder" class="block px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Product</div> <div class="text-xs text-ink-500 mt-0.5">Clear and compelling PRDs</div> </a><a href="/product/developer" class="block px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Developer</div> <div class="text-xs text-ink-500 mt-0.5">Agentic coding without the drift</div> </a><a href="/product/makers" class="block px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Prototyping</div> <div class="text-xs text-ink-500 mt-0.5">Turn ideas into better builds</div> </a> </div> </div> </div><div class="relative group"> <button type="button" class="inline-flex items-center gap-1 px-4 py-2.5 rounded-md hover:text-ink-900 transition-colors" aria-haspopup="true" aria-expanded="false"> Use Cases <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 transition-transform group-hover:rotate-180"> <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path> </svg> </button> <div class="invisible opacity-0 translate-y-1 group-hover:visible group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-0 transition-all absolute left-0 top-full pt-2 w-72"> <div class="rounded-xl bg-white shadow-lg ring-1 ring-ink-100 p-2"> <a href="/use-cases/agentic-coding" class="block px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Agentic Coding</div> <div class="text-xs text-ink-500 mt-0.5">Context &amp; constraints for coding agents</div> </a><a href="/use-cases/requirements" class="block px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Product Requirements</div> <div class="text-xs text-ink-500 mt-0.5">Build-ready specs without the rework</div> </a><a href="/use-cases/prototyping" class="block px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Prototyping</div> <div class="text-xs text-ink-500 mt-0.5">Turn ideas into better builds</div> </a><a href="/use-cases/strategy" class="block px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Strategy &amp; Transformation</div> <div class="text-xs text-ink-500 mt-0.5">Turn initiatives into actionable explorations</div> </a> </div> </div> </div><a href="/about" class="px-4 py-2.5 rounded-md hover:text-ink-900 transition-colors"> About </a><a href="/technology" class="px-4 py-2.5 rounded-md hover:text-ink-900 transition-colors"> Technology </a> </nav> <div class="flex items-center gap-2"> <a href="https://app.ritual.work" target="_blank" rel="noopener noreferrer" data-ph-cta="get_started" data-ph-cta-location="header" class="hidden sm:inline-flex items-center rounded-full bg-ink-900 text-white text-base px-5 py-2.5 hover:bg-ink-700 transition-colors"> <span class="cta-label-default">Get started for free</span><span class="cta-label-maker">
178Build Now</span> </a> <!-- Mobile menu toggle --> <button type="button" class="md:hidden inline-flex items-center justify-center h-11 w-11 rounded-md text-ink-700 hover:bg-ink-50 transition-colors" aria-label="Toggle menu" aria-expanded="false" aria-controls="mobile-menu" data-mobile-toggle> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 [data-open=true]_&]:hidden" aria-hidden="true"> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </div> </div> <!-- Mobile menu panel --> <div id="mobile-menu" class="md:hidden hidden border-t border-ink-100 bg-canvas" data-mobile-panel> <nav class="mx-auto max-w-7xl px-6 py-4 flex flex-col gap-1.5 text-sm"> <a href="/" class="flex items-center min-h-[44px] px-3 py-2.5 rounded-lg text-ink-900 hover:bg-ink-50 transition-colors"> Home </a><a href="/problem" class="flex items-center min-h-[44px] px-3 py-2.5 rounded-lg text-ink-900 hover:bg-ink-50 transition-colors"> Problem </a><div class="py-1"> <div class="px-3 py-2 text-xs font-semibold uppercase tracking-wider text-ink-400"> Product </div> <a href="/product/builder" class="flex flex-col justify-center min-h-[44px] px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Product</div> <div class="text-xs text-ink-500 mt-0.5">Clear and compelling PRDs</div> </a><a href="/product/developer" class="flex flex-col justify-center min-h-[44px] px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Developer</div> <div class="text-xs text-ink-500 mt-0.5">Agentic coding without the drift</div> </a><a href="/product/makers" class="flex flex-col justify-center min-h-[44px] px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Prototyping</div> <div class="text-xs text-ink-500 mt-0.5">Turn ideas into better builds</div> </a> </div><div class="py-1"> <div class="px-3 py-2 text-xs font-semibold uppercase tracking-wider text-ink-400"> Use Cases </div> <a href="/use-cases/agentic-coding" class="flex flex-col justify-center min-h-[44px] px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Agentic Coding</div> <div class="text-xs text-ink-500 mt-0.5">Context &amp; constraints for coding agents</div> </a><a href="/use-cases/requirements" class="flex flex-col justify-center min-h-[44px] px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Product Requirements</div> <div class="text-xs text-ink-500 mt-0.5">Build-ready specs without the rework</div> </a><a href="/use-cases/prototyping" class="flex flex-col justify-center min-h-[44px] px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Prototyping</div> <div class="text-xs text-ink-500 mt-0.5">Turn ideas into better builds</div> </a><a href="/use-cases/strategy" class="flex flex-col justify-center min-h-[44px] px-3 py-2.5 rounded-lg hover:bg-ink-50 transition-colors"> <div class="text-sm font-semibold text-ink-900">Strategy &amp; Transformation</div> <div class="text-xs text-ink-500 mt-0.5">Turn initiatives into actionable explorations</div> </a> </div><a href="/about" class="flex items-center min-h-[44px] px-3 py-2.5 rounded-lg text-ink-900 hover:bg-ink-50 transition-colors"> About </a><a href="/technology" class="flex items-center min-h-[44px] px-3 py-2.5 rounded-lg text-ink-900 hover:bg-ink-50 transition-colors"> Technology </a> <a href="https://app.ritual.work" target="_blank" rel="noopener noreferrer" data-ph-cta="get_started" data-ph-cta-location="header_mobile" class="mt-2 inline-flex items-center justify-center min-h-[44px] rounded-full bg-ink-900 text-white text-sm px-4 py-2.5 hover:bg-ink-700 transition-colors"> <span class="cta-label-default">Get started for free</span><span class="cta-label-maker">
178Build Now</span> </a> </nav> </div> </header>   
178<script>
179  (function () {
180    var p = document.documentElement.getAttribute("data-persona");
181    if (!p) return;
182    if (p === "developer" && location.pathname.indexOf("/product/developer") === 0) return;
183    document
184      .querySelectorAll('a[data-ph-cta-location="header"], a[data-ph-cta-location="header_mobile"]')
185      .forEach(function (a) {
186        if (p === "maker") {
187          a.setAttribute("href", "/product/makers#nc-idea");
188          a.setAttribute("data-ph-cta", "nav_build_now");
189        } else {
190          a.setAttribute("href", "/product/developer");
191          a.setAttribute("data-ph-cta", "nav_dev_hero");
192        }
193        a.removeAttribute("target");
194        a.removeAttribute("rel");
195      });
196  })();
197</script>
197 
197<script>
198  (function () {
199    function init() {
200      var btn = document.querySelector("[data-mobile-toggle]");
201      var panel = document.querySelector("[data-mobile-panel]");
202      if (!btn || !panel) return;
203      btn.addEventListener("click", function () {
204        var open = panel.classList.toggle("hidden") === false;
205        btn.setAttribute("aria-expanded", open ? "true" : "false");
206      });
207    }
208    if (document.readyState === "loading") {
209      document.addEventListener("DOMContentLoaded", init);
210    } else {
211      init();
212    }
213  })();
214</script>
214 <main class="flex-1">  <!-- Hero (data-ab-hero wrappers: experiment swap slot 1 — inert divs unless
215     the consuming page ships the arm-gating CSS) --><section class="relative overflow-hidden lg:min-h-[640px]" data-astro-cid-hcoyjovv> <div data-ab="control" data-ab-hero data-astro-cid-hcoyjovv> <div class="mx-auto max-w-7xl px-6 pt-10 md:pt-16 lg:pt-20 pb-10 md:pb-16 relative" data-astro-cid-hcoyjovv> <div class="relative z-10 lg:max-w-[50%]" data-astro-cid-hcoyjovv> <p class="text-sm font-semibold tracking-[0.2em] uppercase text-accent-600" data-astro-cid-hcoyjovv>Builder</p> <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-[1.05] tracking-tight text-ink-900" data-astro-cid-hcoyjovv> All Build, No Drift. Problem Solve Like Never Before </h1> <p class="mt-6 text-xl md:text-2xl text-ink-500 max-w-xl" data-astro-cid-hcoyjovv>Ritual's workflow <strong class='font-bold text-ink-900'>defines problems</strong>, runs <strong class='font-bold text-ink-900'>structured discovery</strong>, and produces clear, <strong class='font-bold text-ink-900'>explainable recommendations</strong>.</p> <div class="mt-7 flex items-center gap-3" data-astro-cid-hcoyjovv> <a href="#features" data-ph-cta="product_learn_more" data-ph-cta-location="product_hero" class="inline-flex items-center gap-2 rounded-full bg-accent-500 hover:bg-accent-600 transition-colors text-white text-base font-medium px-6 py-3" data-astro-cid-hcoyjovv> Learn More <span aria-hidden="true" data-astro-cid-hcoyjovv>›</span> </a> </div> <p class="mt-8 text-xl md:text-2xl text-ink-700 max-w-md" data-astro-cid-hcoyjovv>Recommendations become build-ready context for requirements, implementation plans, and specifications.</p> </div> <div class="hidden lg:block absolute top-0 right-0 bottom-0 w-1/2 pointer-events-none overflow-hidden" data-astro-cid-hcoyjovv> <!-- WebP, not PNG: this is a soft overlay (alpha never exceeds 128, i.e.
216           50% opacity) that PNG was storing losslessly at 2,514 kB. WebP q80
217           with alpha_q 100 is 360 kB, 86% smaller, at 38.6 dB PSNR measured
218           COMPOSITED over the page canvas rather than as raw RGB — the latter
219           reads as poor quality only because the pixels under the transparent
220           regions are meaningless. Alpha range preserved exactly (0-128). No
221           picture-element fallback: WebP has been universal since 2020.
222           It also sits directly in front of the flag race: this file competed
223           for bandwidth with array.js, which must load before the arm can be
224           resolved at all. --> <img src="/hero-prod.webp" alt="Ritual product hero" class="select-none block w-full h-full object-cover object-left max-w-none" loading="eager" decoding="async" data-astro-cid-hcoyjovv> </div> </div> </div>  </section> <!-- Variant arm hides the logo row; control and non-experiment pages keep it
225     (same data-ab CSS gate as the hero swap). --> <div data-astro-cid-hcoyjovv> <section class="border-y border-ink-50 bg-canvas mt-4 md:mt-6" data-astro-cid-2xxwpcru> <div class="logo-bar relative mx-auto max-w-7xl py-5 md:py-6 overflow-hidden" data-astro-cid-2xxwpcru> <!-- Edge fades (only shown when scrolling) --> <div class="logo-fade pointer-events-none absolute inset-y-0 left-0 w-12 sm:w-16 md:w-24 bg-gradient-to-r from-canvas to-transparent z-10 opacity-0 transition-opacity duration-200" aria-hidden="true" data-astro-cid-2xxwpcru></div> <div class="logo-fade pointer-events-none absolute inset-y-0 right-0 w-12 sm:w-16 md:w-24 bg-gradient-to-l from-canvas to-transparent z-10 opacity-0 transition-opacity duration-200" aria-hidden="true" data-astro-cid-2xxwpcru></div> <div class="logo-track flex items-center justify-center gap-8 sm:gap-12 md:gap-16 px-4 sm:px-6" data-astro-cid-2xxwpcru> <ul class="logo-set flex shrink-0 items-center justify-center gap-8 sm:gap-12 md:gap-16 opacity-70" data-astro-cid-2xxwpcru> <li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/james-hardie.png" alt="James Hardie" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li><li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/yum-brands.png" alt="Yum! Brands" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li><li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/taco-bell.png" alt="Taco Bell" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li><li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/hilton.png" alt="Hilton" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li><li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/mgm-resorts.png" alt="MGM Resorts" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li><li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/marine.png" alt="National Marine Sanctuary Foundation" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li> </ul> <ul class="logo-set logo-clone hidden shrink-0 items-center justify-center gap-8 sm:gap-12 md:gap-16 opacity-70" aria-hidden="true" data-astro-cid-2xxwpcru> <li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/james-hardie.png" alt="" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li><li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/yum-brands.png" alt="" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li><li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/taco-bell.png" alt="" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li><li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/hilton.png" alt="" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li><li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/mgm-resorts.png" alt="" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li><li class="shrink-0 flex items-center justify-center" data-astro-cid-2xxwpcru> <img src="/logos/marine.png" alt="" class="h-9 sm:h-10 md:h-14 w-auto object-contain grayscale opacity-50" loading="lazy" decoding="async" data-astro-cid-2xxwpcru> </li> </ul> </div> </div> </section> 
225<script type="module">(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{};t.SENTRY_RELEASE={id:"0db980f79d252d05b56df1a9e892560eca117bc3"};var e=new t.Error().stack;e&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[e]="e9c79242-0f35-420b-8116-a9560297b0da",t._sentryDebugIdIdentifier="sentry-dbid-e9c79242-0f35-420b-8116-a9560297b0da")}catch{}})();function c(){document.querySelectorAll(".logo-bar").forEach(e=>{const n=e.querySelector(".logo-set"),s=e.querySelector(".logo-clone"),i=e.querySelectorAll(".logo-fade");if(!n||!s)return;const o=()=>{s.classList.remove("hidden"),s.classList.add("flex");const d=e.clientWidth;n.getBoundingClientRect().width+16>d?(e.classList.add("is-marquee"),i.forEach(r=>r.classList.remove("opacity-0"))):(e.classList.remove("is-marquee"),s.classList.add("hidden"),s.classList.remove("flex"),i.forEach(r=>r.classList.add("opacity-0")))};o(),n.querySelectorAll("img").forEach(d=>{d.complete||(d.addEventListener("load",o,{once:!0}),d.addEventListener("error",o,{once:!0}))}),typeof ResizeObserver<"u"?new ResizeObserver(o).observe(e):window.addEventListener("resize",o)})}c();document.addEventListener("astro:page-load",c);</script>
225 </div> <!-- Feature sections (experiment swap slot 2: the variant replaces this whole
226     scripted-Scene walkthrough with the workflow-variant slot below) -->  <section id="features" class="bg-canvas" data-astro-cid-hcoyjovv> <div class="mx-auto max-w-7xl px-6" data-astro-cid-hcoyjovv> <div class="feature-stepper grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center py-12 md:py-20 " data-astro-cid-hcoyjovv> <div class data-astro-cid-hcoyjovv> <div class="feature-carousel relative" data-autoplay="4000" aria-roledescription="carousel" aria-label="Problem Framing preview" data-astro-cid-hcoyjovv> <div class="grid" data-astro-cid-hcoyjovv> <div class="feature-slide is-active" style="grid-area: 1 / 1;" aria-hidden="false" role="group" aria-roledescription="slide" aria-label="1 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/problem-1.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/problem-1.png" alt="Explore the problem space" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div><div class="feature-slide " style="grid-area: 1 / 1;" aria-hidden="true" role="group" aria-roledescription="slide" aria-label="2 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/problem-2.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/problem-2.png" alt="Select your focus areas" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div><div class="feature-slide " style="grid-area: 1 / 1;" aria-hidden="true" role="group" aria-roledescription="slide" aria-label="3 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/problem-3.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/problem-3.png" alt="Craft a problem statement" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div> </div> <div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-2" data-astro-cid-hcoyjovv> <button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all is-active" data-idx="0" aria-label="Go to slide 1" data-astro-cid-hcoyjovv></button><button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all " data-idx="1" aria-label="Go to slide 2" data-astro-cid-hcoyjovv></button><button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all " data-idx="2" aria-label="Go to slide 3" data-astro-cid-hcoyjovv></button> </div> </div> </div> <div class data-astro-cid-hcoyjovv> <h2 class="text-2xl md:text-3xl font-bold text-ink-900" data-astro-cid-hcoyjovv>Problem Framing</h2> <ul class="feature-steps mt-6 space-y-3" role="tablist" data-astro-cid-hcoyjovv> <li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="true" data-idx="0" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer is-active" data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Explore the problem space </span> </button> </li><li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="false" data-idx="1" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer " data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Select your focus areas </span> </button> </li><li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="false" data-idx="2" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer " data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Craft a problem statement </span> </button> </li> </ul> <p class="mt-6 text-base md:text-lg text-ink-700 max-w-md leading-relaxed" data-astro-cid-hcoyjovv>Define the hidden constraints, tradeoffs, and gaps in minutes.</p> </div> </div><div class="feature-stepper grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center py-12 md:py-20 border-t border-ink-100" data-astro-cid-hcoyjovv> <div class="lg:order-2" data-astro-cid-hcoyjovv>
226 <div class="feature-carousel relative" data-autoplay="4000" aria-roledescription="carousel" aria-label="Curated Questions preview" data-astro-cid-hcoyjovv> <div class="grid" data-astro-cid-hcoyjovv> <div class="feature-slide is-active" style="grid-area: 1 / 1;" aria-hidden="false" role="group" aria-roledescription="slide" aria-label="1 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/question-1.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/question-1.png" alt="Get curated discovery questions" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div><div class="feature-slide " style="grid-area: 1 / 1;" aria-hidden="true" role="group" aria-roledescription="slide" aria-label="2 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/question-2.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/question-2.png" alt="Build a question list that pushes thinking" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div><div class="feature-slide " style="grid-area: 1 / 1;" aria-hidden="true" role="group" aria-roledescription="slide" aria-label="3 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/question-3.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/question-3.png" alt="Produce an exploration overview" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div> </div> <div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-2" data-astro-cid-hcoyjovv> <button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all is-active" data-idx="0" aria-label="Go to slide 1" data-astro-cid-hcoyjovv></button><button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all " data-idx="1" aria-label="Go to slide 2" data-astro-cid-hcoyjovv></button><button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all " data-idx="2" aria-label="Go to slide 3" data-astro-cid-hcoyjovv></button> </div> </div> </div> <div class="lg:order-1" data-astro-cid-hcoyjovv> <h2 class="text-2xl md:text-3xl font-bold text-ink-900" data-astro-cid-hcoyjovv>Curated Questions</h2> <ul class="feature-steps mt-6 space-y-3" role="tablist" data-astro-cid-hcoyjovv> <li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="true" data-idx="0" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer is-active" data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Get curated discovery questions </span> </button> </li><li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="false" data-idx="1" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer " data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Build a question list that pushes thinking </span> </button> </li><li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="false" data-idx="2" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer " data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Produce an exploration overview </span> </button> </li> </ul> <p class="mt-6 text-base md:text-lg text-ink-700 max-w-md leading-relaxed" data-astro-cid-hcoyjovv>Curate tailored, deep questions that ensure you go deep on what actually matters.</p> </div> </div><div class="feature-stepper grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center py-12 md:py-20 border-t border-ink-100" data-astro-cid-hcoyjovv> <div class data-astro-cid-hcoyjovv>
226 <div class="feature-carousel relative" data-autoplay="4000" aria-roledescription="carousel" aria-label="Intelligent Deep Diving preview" data-astro-cid-hcoyjovv> <div class="grid" data-astro-cid-hcoyjovv> <div class="feature-slide is-active" style="grid-area: 1 / 1;" aria-hidden="false" role="group" aria-roledescription="slide" aria-label="1 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/answer-1.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/answer-1.png" alt="Add knowledge sources to extract relevant thinking" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div><div class="feature-slide " style="grid-area: 1 / 1;" aria-hidden="true" role="group" aria-roledescription="slide" aria-label="2 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/answer-2.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/answer-2.png" alt="Leverage Ritual's answer engine and frameworks" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div><div class="feature-slide " style="grid-area: 1 / 1;" aria-hidden="true" role="group" aria-roledescription="slide" aria-label="3 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/answer-3.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/answer-3.png" alt="Tap Ritual's agent to build draft answers" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div> </div> <div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-2" data-astro-cid-hcoyjovv> <button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all is-active" data-idx="0" aria-label="Go to slide 1" data-astro-cid-hcoyjovv></button><button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all " data-idx="1" aria-label="Go to slide 2" data-astro-cid-hcoyjovv></button><button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all " data-idx="2" aria-label="Go to slide 3" data-astro-cid-hcoyjovv></button> </div> </div> </div> <div class data-astro-cid-hcoyjovv> <h2 class="text-2xl md:text-3xl font-bold text-ink-900" data-astro-cid-hcoyjovv>Intelligent Deep Diving</h2> <ul class="feature-steps mt-6 space-y-3" role="tablist" data-astro-cid-hcoyjovv> <li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="true" data-idx="0" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer is-active" data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Add knowledge sources to extract relevant thinking </span> </button> </li><li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="false" data-idx="1" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer " data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Leverage Ritual&#39;s answer engine and frameworks </span> </button> </li><li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="false" data-idx="2" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer " data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Tap Ritual&#39;s agent to build draft answers </span> </button> </li> </ul> <p class="mt-6 text-base md:text-lg text-ink-700 max-w-md leading-relaxed" data-astro-cid-hcoyjovv>Get to the bottom using your internal knowledge and powerful structured thinking.</p> </div> </div><div class="feature-stepper grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center py-12 md:py-20 border-t border-ink-100" data-astro-cid-hcoyjovv> <div class="lg:order-2" data-astro-cid-hcoyjovv>
226 <div class="feature-carousel relative" data-autoplay="4000" aria-roledescription="carousel" aria-label="Explainable Recommendations preview" data-astro-cid-hcoyjovv> <div class="grid" data-astro-cid-hcoyjovv> <div class="feature-slide is-active" style="grid-area: 1 / 1;" aria-hidden="false" role="group" aria-roledescription="slide" aria-label="1 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/rec-1.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/rec-1.png" alt="Recommendations with best in class explainability" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div><div class="feature-slide " style="grid-area: 1 / 1;" aria-hidden="true" role="group" aria-roledescription="slide" aria-label="2 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/rec-2.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/rec-2.png" alt="Iterate on recommendations with collaboration and knowledge sources" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div><div class="feature-slide " style="grid-area: 1 / 1;" aria-hidden="true" role="group" aria-roledescription="slide" aria-label="3 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/rec-3.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/rec-3.png" alt="Turn recommendations into concrete deliverables like requirements" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div> </div> <div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-2" data-astro-cid-hcoyjovv> <button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all is-active" data-idx="0" aria-label="Go to slide 1" data-astro-cid-hcoyjovv></button><button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all " data-idx="1" aria-label="Go to slide 2" data-astro-cid-hcoyjovv></button><button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all " data-idx="2" aria-label="Go to slide 3" data-astro-cid-hcoyjovv></button> </div> </div> </div> <div class="lg:order-1" data-astro-cid-hcoyjovv> <h2 class="text-2xl md:text-3xl font-bold text-ink-900" data-astro-cid-hcoyjovv>Explainable Recommendations</h2> <ul class="feature-steps mt-6 space-y-3" role="tablist" data-astro-cid-hcoyjovv> <li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="true" data-idx="0" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer is-active" data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Recommendations with best in class explainability </span> </button> </li><li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="false" data-idx="1" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer " data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv>
226 Iterate on recommendations with collaboration and knowledge sources </span> </button> </li><li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="false" data-idx="2" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer " data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Turn recommendations into concrete deliverables like requirements </span> </button> </li> </ul> <p class="mt-6 text-base md:text-lg text-ink-700 max-w-md leading-relaxed" data-astro-cid-hcoyjovv>Get recommendations right, and deliver everything else with confidence.</p> </div> </div><div class="feature-stepper grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center py-12 md:py-20 border-t border-ink-100" data-astro-cid-hcoyjovv> <div class data-astro-cid-hcoyjovv> <div class="feature-carousel relative" data-autoplay="4000" aria-roledescription="carousel" aria-label="Deliverables w/o Drift preview" data-astro-cid-hcoyjovv> <div class="grid" data-astro-cid-hcoyjovv> <div class="feature-slide is-active" style="grid-area: 1 / 1;" aria-hidden="false" role="group" aria-roledescription="slide" aria-label="1 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/deliver-1.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/deliver-1.png" alt="Start with templates and tailor to your needs" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div><div class="feature-slide " style="grid-area: 1 / 1;" aria-hidden="true" role="group" aria-roledescription="slide" aria-label="2 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/deliver-2.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/deliver-2.png" alt="Deliver context-rich outputs grounded in best-in-class discovery" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div><div class="feature-slide " style="grid-area: 1 / 1;" aria-hidden="true" role="group" aria-roledescription="slide" aria-label="3 of 3" data-astro-cid-hcoyjovv> <div class="relative rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;" data-astro-cid-hcoyjovv> <img src="/deliver-3.png" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover scale-110 blur-xl opacity-50 brightness-90 select-none pointer-events-none" data-astro-cid-hcoyjovv> <div class="absolute inset-0 flex items-center justify-center p-4 md:p-8" data-astro-cid-hcoyjovv> <img src="/deliver-3.png" alt="Get started fast with a template library for any use case" class="block max-w-full max-h-full w-auto h-auto rounded-xl shadow-2xl ring-1 ring-black/15" data-astro-cid-hcoyjovv> </div> </div> </div> </div> <div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-2" data-astro-cid-hcoyjovv> <button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all is-active" data-idx="0" aria-label="Go to slide 1" data-astro-cid-hcoyjovv></button><button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all " data-idx="1" aria-label="Go to slide 2" data-astro-cid-hcoyjovv></button><button type="button" class="carousel-dot h-2 w-2 rounded-full bg-white/50 hover:bg-white/80 transition-all " data-idx="2" aria-label="Go to slide 3" data-astro-cid-hcoyjovv></button> </div> </div> </div> <div class data-astro-cid-hcoyjovv> <h2 class="text-2xl md:text-3xl font-bold text-ink-900" data-astro-cid-hcoyjovv>Deliverables w/o Drift</h2> <ul class="feature-steps mt-6 space-y-3" role="tablist" data-astro-cid-hcoyjovv> <li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="true" data-idx="0" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer is-active" data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Start with templates and tailor to your needs </span> </button> </li><li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="false" data-idx="1" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer " data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Deliver context-rich outputs grounded in best-in-class discovery </span> </button> </li><li data-astro-cid-hcoyjovv> <button type="button" role="tab" aria-selected="false" data-idx="2" class="feature-step group w-full text-left pl-4 border-l-2 py-1 transition-colors cursor-pointer " data-astro-cid-hcoyjovv> <span class="step-label text-sm md:text-base" data-astro-cid-hcoyjovv> Get started fast with a template library for any use case </span> </button> </li> </ul> <p class="mt-6 text-base md:text-lg text-ink-700 max-w-md leading-relaxed" data-astro-cid-hcoyjovv>Elevate your deliverables with Ritual&#39;s discovery to recommendations workflow.</p> </div> </div> </div> </section>    <section class="bg-night-900 text-white"> <div class="mx-auto max-w-7xl px-6 py-20 text-center"> <h2 class="text-3xl md:text-4xl font-bold tracking-tight"> 
227Ready to own the <span class="bg-gradient-to-r from-accent-500 to-sand-300 bg-clip-text text-transparent">frontier</span>?
228 </h2> <p class="mt-4 text-ink-300 max-w-xl mx-auto text-sm md:text-base">Join thousands of users already using our platform to drive growth and innovation.</p> <div class="mt-8 flex items-center justify-center gap-3"> <a href="https://app.ritual.work" target="_blank" rel="noopener noreferrer" data-ph-cta="get_started" data-ph-cta-location="cta_section_primary" class="inline-flex items-center rounded-full bg-white text-ink-900 text-sm font-medium px-5 py-2.5 hover:bg-ink-100 transition-colors"> Get Started </a> <a href="https://calendly.com/mike-hkg/30min" target="_blank" rel="noopener noreferrer" data-ph-cta="book_demo" data-ph-cta-location="cta_section_secondary" class="inline-flex items-center rounded-full border border-white/30 text-white text-sm font-medium px-5 py-2.5 hover:bg-white/10 transition-colors"> Schedule a Demo </a> </div> </div> </section>  
228<script type="module">(function(){try{var r=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{};r.SENTRY_RELEASE={id:"0db980f79d252d05b56df1a9e892560eca117bc3"};var n=new r.Error().stack;n&&(r._sentryDebugIds=r._sentryDebugIds||{},r._sentryDebugIds[n]="8bccabaf-9804-4b03-acbe-67cf8407965c",r._sentryDebugIdIdentifier="sentry-dbid-8bccabaf-9804-4b03-acbe-67cf8407965c")}catch{}})();function h(){const r=Array.from(document.querySelectorAll(".feature-stepper")),n=[];if(r.forEach(c=>{const a=c.querySelector(".feature-carousel");if(!a)return;const i=a.querySelectorAll(".feature-slide"),s=a.querySelectorAll(".carousel-dot"),t=c.querySelectorAll(".feature-step");if(i.length<=1)return;let e=0,o;const g=parseInt(a.dataset.autoplay??"4500",10),b=d=>{i[e].classList.remove("is-active"),i[e].setAttribute("aria-hidden","true"),s[e]?.classList.remove("is-active"),t[e]?.classList.remove("is-active"),t[e]?.setAttribute("aria-selected","false"),e=(d+i.length)%i.length,i[e].classList.add("is-active"),i[e].setAttribute("aria-hidden","false"),s[e]?.classList.add("is-active"),t[e]?.classList.add("is-active"),t[e]?.setAttribute("aria-selected","true")},w=()=>b(e+1),v=()=>{o===void 0&&(o=window.setInterval(w,g))},E=()=>{o!==void 0&&(clearInterval(o),o=void 0)};s.forEach((d,p)=>{d.addEventListener("click",()=>{b(p),v()})}),t.forEach((d,p)=>{d.addEventListener("click",()=>{b(p),v()})}),n.push({el:c,start:v,stop:E})}),n.length===0)return;let l=null;const u=()=>{const c=window.innerHeight/2;let a=null,i=1/0;for(const s of n){const t=s.el.getBoundingClientRect();if(t.bottom<0||t.top>window.innerHeight)continue;const e=(t.top+t.bottom)/2,o=Math.abs(e-c);o<i&&(i=o,a=s.el)}if(a!==l){l=a;for(const s of n)s.el===l?s.start():s.stop()}else l&&n.find(t=>t.el===l)?.start()};let f=!1;const y=()=>{f||(f=!0,requestAnimationFrame(()=>{f=!1,u()}))};window.addEventListener("scroll",y,{passive:!0}),window.addEventListener("resize",y),document.addEventListener("visibilitychange",()=>{if(document.hidden)for(const c of n)c.stop();else u()}),requestAnimationFrame(u)}h();document.addEventListener("astro:page-load",h);</script>
228  </main> <footer class="bg-canvas border-t border-ink-100"> <div class="mx-auto max-w-7xl px-6 py-10 md:py-14"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-10"> <div class="col-span-2 md:col-span-1"> <a href="/" class="flex items-center gap-2" aria-label="Ritual home"> <img src="/ritual-logo.svg" alt="Ritual" class="h-7 w-auto"> </a> <p class="mt-4 text-sm text-ink-500 max-w-xs">
229Move from idea to action with AI‑powered collaboration.
230</p> <div class="mt-5 flex items-center gap-3"> <a href="https://www.linkedin.com/company/ritualai" target="_blank" rel="noopener noreferrer" aria-label="Ritual on LinkedIn" class="inline-flex h-9 w-9 items-center justify-center rounded-full ring-1 ring-ink-100 text-ink-500 hover:text-ink-900 hover:ring-ink-300 transition-colors"> <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="h-4 w-4"> <path d="M20.452 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.356V9h3.414v1.561h.046c.477-.9 1.637-1.852 3.37-1.852 3.602 0 4.266 2.37 4.266 5.455v6.288zM5.337 7.433a2.062 2.062 0 01-2.063-2.064 2.063 2.063 0 112.063 2.064zM7.119 20.452H3.553V9h3.566v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path> </svg> </a> </div> </div> <div> <h4 class="text-sm font-semibold text-ink-900">Product</h4> <ul class="mt-4 space-y-3"> <li> <a href="/product/builder" class="text-sm text-ink-500 hover:text-ink-900 transition-colors"> Product </a> </li><li> <a href="/product/developer" class="text-sm text-ink-500 hover:text-ink-900 transition-colors"> Developer </a> </li><li> <a href="/product/makers" class="text-sm text-ink-500 hover:text-ink-900 transition-colors"> Prototyping </a> </li> </ul> </div><div> <h4 class="text-sm font-semibold text-ink-900">Resources</h4> <ul class="mt-4 space-y-3"> <li> <a href="/docs/quickstart" class="text-sm text-ink-500 hover:text-ink-900 transition-colors"> Quick start </a> </li><li> <a href="/faq" class="text-sm text-ink-500 hover:text-ink-900 transition-colors"> FAQ </a> </li><li> <a href="/support" class="text-sm text-ink-500 hover:text-ink-900 transition-colors"> Support </a> </li><li> <a href="/security" class="text-sm text-ink-500 hover:text-ink-900 transition-colors"> Security </a> </li> </ul> </div><div> <h4 class="text-sm font-semibold text-ink-900">Company</h4> <ul class="mt-4 space-y-3"> <li> <a href="/about" class="text-sm text-ink-500 hover:text-ink-900 transition-colors"> About </a> </li> </ul> </div> </div> <div class="mt-14 pt-6 border-t border-ink-100 text-center text-xs text-ink-400">
231© 2025 Ritual. All rights reserved.
232</div> </div> </footer> </body></html>

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