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 & 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 & 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 & 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 & 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'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'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'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.