/* Page sections for OrthoVaultOS marketing site. Hero supports 3 layout variants: 'split', 'centered', 'editorial'. Colors come from CSS custom properties (--bg, --surface, --text, etc.) defined in index.html and flipped by [data-theme="dark"] on the root. */ function useIsMobile(breakpoint = 640) { const [mobile, setMobile] = React.useState(window.innerWidth < breakpoint); React.useEffect(() => { const fn = () => setMobile(window.innerWidth < breakpoint); window.addEventListener('resize', fn); return () => window.removeEventListener('resize', fn); }, [breakpoint]); return mobile; } function Logo({ size = 32, accent = '#b91c2c' }) { return (

ORTHOVAULT OS ); } function Nav({ accent }) { const [session, setSession] = React.useState(null); const [tier, setTier] = React.useState('free'); const [menuOpen, setMenuOpen] = React.useState(false); const isMobile = useIsMobile(880); React.useEffect(() => { // supabaseClient is only available on pages that load supabase-client.js. // Marketing pages don't load it — gracefully fall back to signed-out state. if (typeof supabaseClient === 'undefined') return; supabaseClient.auth.getSession().then(({ data: { session: s } }) => { if (!s) return; setSession(s); supabaseClient.from('profiles').select('tier').eq('id', s.user.id).single() .then(({ data }) => { if (data) setTier(data.tier); }); }); }, []); React.useEffect(() => { if (!isMobile) setMenuOpen(false); }, [isMobile]); const isPro = tier === 'professional'; const navLinks = ( How it works Pricing Procedure Library Resident Guide FAQ ); const authControls = session ? ( /* ── Logged-in state ── */

{isPro && ( 📷 Photo Sync )} {(session.user.email || '?')[0].toUpperCase()} My account

) : ( /* ── Logged-out state ── */

); return (

{isMobile ? ( ) : (

{navLinks}

{authControls} )}

{isMobile && menuOpen && (

{navLinks}

{authControls}

)}

); } /* Hero brand mark — the logo with a breathing crimson halo behind it. Halo scale controlled via --halo-size CSS custom property. */ function HeroBrandMark({ size = 72, haloScale = '210%' }) { return (

); } function HeroEyebrow({ accent }) { return (

Now in early access

); } function HeroCtas({ accent, size = 'md' }) { const padY = size === 'lg' ? '13px' : '11px'; const padX = size === 'lg' ? '22px' : '18px'; const fs = size === 'lg' ? 14 : 13.5; return (

Download now ↗

); } /* Full-screen lightbox for the 30-second product demo. Opened globally via window.openDemoModal() so any CTA (across hero variants) can trigger it without prop-drilling through three different hero layouts. */ function DemoModal() { const [open, setOpen] = React.useState(false); const videoRef = React.useRef(null); React.useEffect(() => { window.openDemoModal = () => setOpen(true); return () => { delete window.openDemoModal; }; }, []); React.useEffect(() => { if (open && videoRef.current) { videoRef.current.currentTime = 0; videoRef.current.play().catch(() => {}); } }, [open]); React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open]); if (!open) return null; return (

setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(8, 10, 14, 0.85)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, }}>

e.stopPropagation()} style={{ width: '100%', maxWidth: 960, borderRadius: 14, overflow: 'hidden', background: '#000', boxShadow: '0 40px 100px -20px rgba(0,0,0,0.7)', position: 'relative', }}>

); } function AppShot({ maxWidth = 980, videoSrc }) { return (

{videoSrc ? (

); } /* Macbook-style frame around the app screenshot — thin dark bezel, small camera dot up top, and a tapered hinge/base strip wider than the screen so it reads as a 3D-ish device, not just a black card. Used in the split hero. */ function LaptopFrame({ src, alt, videoSrc, maxWidth = 820 }) { return (

{/* Lid — silver/aluminum chassis */}

{/* Black bezel surrounding the display (macOS-style) */}

{/* Camera dot in the top bezel */}

{/* Screen content */}

{videoSrc ? (

{/* Hinge / base — slightly wider than the lid, deep underside shadow */}

{/* Hinge notch */}

{/* Soft cast shadow on the surface below */}

); } /* Three-up feature strip under the laptop — icon + title + one-line subtitle, full-width, evenly spaced. Small crimson icons against the page bg. */ function HeroFeatureStrip({ accent }) { const isMobile = useIsMobile(); const items = [ { title: 'Access anywhere', subtitle: 'Web-based. Always with you.', icon: }, { title: 'Save hours every week', subtitle: 'Streamline documentation.', icon: }, { title: 'Built for every surgeon', subtitle: 'Orthopedic today, everything tomorrow.', icon: }]; return (

{items.map((f) =>

{f.icon}

{f.title}

{f.subtitle}

)}

); } /* Social-proof row under the hero CTAs: overlapping head avatars, five filled stars in the accent color, and a short tagline. Avatars are color-blocked initials (placeholder pending real testimonial photos — honest about the placeholder state). */ function TrustRow({ accent }) { const reviewers = [ { initials: 'JM', alt: 'Reviewer 1' }, { initials: 'AK', alt: 'Reviewer 2' }, { initials: 'RS', alt: 'Reviewer 3' }, { initials: 'TL', alt: 'Reviewer 4' }]; return (

{/* Avatar stack */}

{reviewers.map((r, i) =>

{r.initials}

)}

{/* Stars + tagline */}

{[0, 1, 2, 3, 4].map((i) => )}

Trusted by orthopedic surgeons and residents

); } function HeroSplit({ accent }) { const isMobile = useIsMobile(); return (

Surgical mastery,{' '} AMPLIFIED.

OrthoVaultOS brings precision to every decision. Customize procedures to your technique, reference in real-time during surgery, and build your personal surgical knowledge base.

{/* Strong crimson glow under the screenshot — echoes the logo's vault glow */}

); } function HeroCentered({ accent }) { const isMobile = useIsMobile(); return (

Surgical mastery,{' '} AMPLIFIED.

OrthoVaultOS brings precision to every decision. Customize procedures to your technique, reference in real-time during surgery, and build your personal surgical knowledge base.

); } function HeroEditorial({ accent }) { const isMobile = useIsMobile(); return (

Surgical
mastery,
AMPLIFIED.

OrthoVaultOS brings precision to every decision. Customize procedures to your technique, reference in real-time during surgery, and build your personal surgical knowledge base.

); } function Stat({ n, label, small }) { return (

{n}

{label}

); } /* "The Old Way" — a dark, full-bleed contrast section that establishes the problem (fragmented surgical workflows) before How It Works shows the solution. Six-column composition: 1 — left text panel with eyebrow + headline + paragraph + CTA 2-5 — four atmospheric image slots with X-mark labels 6 — solid crimson panel with the brand mark + tagline + arrow CTA Image slots use so the user can drop their own grainy photos later; until then they read as moody dark placeholders. */ /* "The Old Way" — a dark, full-bleed contrast section that establishes the problem (fragmented surgical workflows) before How It Works shows the solution. Six-column composition: 1 — left text panel with eyebrow + headline + paragraph + CTA 2-5 — four anatomy-themed line-art illustrations + X-mark labels 6 — solid crimson panel with the brand mark + tagline */ /* Stylized line-art illustrations for each "old way" failure mode. Stroke-only, low opacity so they read as atmospheric backgrounds rather than literal photos. Anatomy motifs throughout (knee, hand, vertebra, hip ball) tie them to the orthopedic subject matter. */ function OldWayIllustration({ kind, accent }) { const ink = 'rgba(176, 184, 196, 0.55)'; const dim = 'rgba(176, 184, 196, 0.28)'; const paper = '#15181f'; const Knee = ({ s = 1 }) => {/* femur shaft */} {/* condyles */} {/* patella */} {/* tibia + fibula */} ; const Vertebra = ({ s = 1 }) => {/* body */} {/* spinous process */} {/* transverse processes */} {/* canal */} ; const Hand = ({ s = 1 }) => {/* metacarpals */} {/* phalanges */} {/* thumb */} {/* wrist */} ; const Hip = ({ s = 1 }) => {/* acetabulum */} {/* femoral head */} {/* femoral neck + greater trochanter */} {/* shaft */} ; const Foot = ({ s = 1 }) => {/* calcaneus (heel) */} {/* tarsals */} {/* metatarsals fanning out */} {/* phalanges — short toe bones */} ; const ChildHand = ({ s = 1 }) => // Wobbly, slightly-off-center hand outline like a child traced their // own palm on paper. No bones — just a single squiggled silhouette // around 5 fingers + a thumb. Drawn with a softer, crayon-y stroke. {/* a little smile face on the palm — unmistakably a kid's drawing */} ; if (kind === 'scattered-notes') { // Blackboard with scattered post-it notes return ( ); } if (kind === 'clunky-system') { // Mac with macOS-style error dialogs stacked on screen. Each dialog has // rounded corners, traffic-light controls, a warning icon, and right- // aligned Cancel + primary buttons. const dialog = (x, y, w, h, title, body, opts = {}) => { const { i = 0, rot = 0, urgent = false, working = false } = opts; const primary = urgent ? accent : '#0a6fef'; return ( {/* drop shadow */} {/* dialog body */} {/* title bar with traffic lights */} {/* warning icon (or beach ball if 'working') */} {working ? : } {/* title */} {title} {/* body lines */} {body[0]} {body[1] && {body[1]}} {/* right-aligned buttons */} Cancel {urgent ? 'Retry' : 'OK'} ); }; return ( ); } if (kind === 'outdated-templates') { // Old-school radiograph light box with a knee x-ray clipped on, // overlaid with translucent implant template sheets return ( ); } if (kind === 'hard-to-find') { // The child's hand drawing is the centerpiece — the one easy-to-find // image among a scatter of half-buried anatomy fragments around it. // Reinforces "no central library: the wrong thing surfaces first." return ( ); } return null; } function OldWay({ accent }) { const isMobile = useIsMobile(); const failures = [ { id: 'old-way-1', kind: 'scattered-notes', label: 'Scattered Notes', line1: 'Information everywhere.', line2: 'Hard to find.' }, { id: 'old-way-2', kind: 'clunky-system', label: 'Clunky Systems', line1: 'Outdated. Slow.', line2: 'Not built for surgeons.' }, { id: 'old-way-3', kind: 'outdated-templates', label: 'Outdated Templates', line1: 'Not procedure-specific.', line2: 'Hard to customize.' }, { id: 'old-way-4', kind: 'hard-to-find', label: 'Hard to Find Visuals', line1: 'No central library.', line2: 'Wastes time.' }]; return (

{/* Slow crimson scan sweep across the whole section */}

{/* 1 — Left text panel */}

{/* Drifting fragment particles — 225 mixed shards generated procedurally with deterministic pseudo-random positions, sizes, rotations, and animation phases. */} {Array.from({ length: 225 }, (_, i) => { // Cheap deterministic hash so each particle reads as random // but the layout is stable across renders. const hash = (n, m) => ((n * 9301 + 49297) % 233280) / 233280 * m; const top = hash(i * 7 + 11, 100); const left = hash(i * 13 + 5, 100); const sizeRoll = hash(i * 17 + 3, 1); // Mostly small particles, occasional bigger shards const w = sizeRoll < 0.6 ? 2 + Math.floor(hash(i * 19, 4)) : 6 + Math.floor(hash(i * 23, 18)); const h = hash(i * 29, 1) < 0.5 ? 2 + Math.floor(hash(i * 31, 3)) : w; const rot = -45 + hash(i * 37, 90); const dur = 7 + hash(i * 41, 6); const d = hash(i * 43, 3); return { top: `${top}%`, left: `${left}%`, w, h, rot, dur, d }; }).map((p, i) => ( ))}

THE OUTDATED WAY:

Surgical workflows are
{'Fragmented.'.split('').map((ch, i) => { const offsets = [ { rest: 'translate(0,0) rotate(0deg)', peak: 'translate(0px,-2px) rotate(-2deg)' }, { rest: 'translate(0,0) rotate(0.4deg)', peak: 'translate(1px,0px) rotate(2deg)' }, { rest: 'translate(0,-1px) rotate(-0.6deg)', peak: 'translate(-1px,1px) rotate(1.5deg)' }, { rest: 'translate(0,0.5px) rotate(0.8deg)', peak: 'translate(0px,-2px) rotate(-1.2deg)' }, { rest: 'translate(-0.5px,0) rotate(-0.4deg)', peak: 'translate(1px,1px) rotate(2.5deg)' }]; const o = offsets[i % offsets.length]; return ( {ch}); })}

Scattered notes. Outdated templates. No visual library. Surgeons and residents waste valuable time rebuilding the same workflows.

See the difference

{/* 2-5 — Four atmospheric image panels */} {failures.map((f, i) =>

{/* Anatomy line-art illustration fills the panel */}

{/* Dark wash at the bottom so the caption sits on a solid base */}

{/* Caption — absolutely anchored at the bottom of the panel (height 120px) so the X-mark sits at exactly the same vertical level in every panel, regardless of label length. */}

{f.label}

{f.line1}
{f.line2}

)} {/* 6 — Crimson "everything you need" panel */}

One platform.
Everything you need.

); } function HowItWorks({ accent }) { const isMobile = useIsMobile(); const steps = [ { num: '01', title: 'Walk into pre-op', body: 'Open OrthoVaultOS, search for the procedure, or pick it from your starred list. Instant search across every procedure in your library.', detail: 'Search-and-go in the seconds you have.' }, { num: '02', title: 'Pick the surgeon', body: 'Tap the surgeon\'s name and the entire panel reconfigures — their gloves, suture sizes, tourniquet pressure, positioning, the pearls they always mention.', detail: 'Surgeon preferences are first-class data, cross-referenced from other residents and the attendings themselves.' }, { num: '03', title: 'Reference case', body: 'Pull up technique PDFs, evidence papers, or the surgeon\'s tray of implants. Glance at the next step without breaking sterile field.', detail: 'Take a picture in the OR and upload it within the app. Streamlined process.' }]; return (

How it works

Three taps from{' '} scrub-in to{' '} ready.

Designed for the speed of the OR. No friction, no cloud round-trips, no broken sterile field for a forgotten suture size. Just the surgeon's playbook, where you need it.

{steps.map((s) =>

STEP {s.num}

{s.title}

{s.body}

{s.detail}

)}

); } /* "Built for surgeons" — what the app offers. Dark section with a left text panel and 5 feature cards. Each card has a small accent icon, title, one-line description, and a stylized visual preview at the bottom (procedure list, OR positioning diagram, preference cart, numbered op-note steps, AI chat). All visuals are SVG/CSS so the panel reads as a dense, in-product preview. */ function BuiltForSurgeons({ accent }) { const isMobile = useIsMobile(); const cards = [ { title: 'Procedure Templates', sub: 'Template, customize, and reuse with ease.', icon: , preview: 'procedures' }, { title: 'Visual Positioning', sub: 'Detailed positioning library with visuals.', icon: , preview: 'positioning' }, { title: 'Case Cart', sub: 'The instrument tray, built per surgeon, ready before you scrub in.', icon: , preview: 'cart' }, { title: 'Op Notes', sub: 'Smart, structured, and fast.', icon: , preview: 'opnotes' }, { title: 'AI Assistant', sub: 'Your surgical copilot. Ask anything, in context.', icon: , preview: 'ai' }, { title: 'X-Ray Annotation', sub: 'Draw, label, and drag-place implants for pre-op planning.', icon: , preview: 'xray' }, { title: 'Evidence Annotation', sub: 'Highlight and drop notes directly on papers you upload.', icon: , preview: 'pdfnote' }]; /* Per-card preview visuals — each is a small slice of what the feature actually does, drawn in HTML/CSS for crispness. */ const renderPreview = (kind) => { if (kind === 'procedures') { // A list of "Procedure" rows with one selected (accent). const rows = [ { label: 'Pelvic ex-fix' }, { label: 'Femur IM nail', active: true }, { label: 'Distal radius ORIF' }]; return (

Cases

{rows.map((r) =>

{r.label}

)}

); } if (kind === 'positioning') { // A library of surgical positions — 6 small position thumbnails // in a 3×2 grid, one highlighted (the selected position). const positions = [ { name: 'Supine', sel: true, svg: }, { name: 'Lateral', svg: }, { name: 'Prone', svg: }]; return (

Position Library

{positions.map((p) =>

{p.name}

)}

); } if (kind === 'cart') { // "Pelvic Ex-Fix Cart" with item rows + quantities — sized to fill the card. const items = [ { name: 'Synthes Ex-Fix Set', qty: '1' }, { name: 'Schanz Pin 5.0 mm', qty: '4' }, { name: 'Carbon Fiber Rod', qty: '3' }]; return (

Pelvic Ex-Fix Cart

ItemQty

{items.map((it) =>

{it.name} {it.qty}

)}

); } if (kind === 'opnotes') { const steps = [ 'Patient positioning', 'Incision', 'Closure']; return (

Procedure Steps

{steps.map((s, i) =>

{i + 1} {s}

)}

); } if (kind === 'ai') { return (

Ask anything…

{[ 'What are the key steps for a pelvic ex-fix?', 'Suggest implant sizing for a TKA.']. map((q, i) =>

{q}

)}

Generating…

); } if (kind === 'xray') { return (

Locking plate

Drag-placed, non-destructive layer

{['↖', '✎', 'T'].map((s, i) => {s} )}

); } if (kind === 'pdfnote') { const lines = [1, 0.9, 0.75, 0.5]; return (

{lines.map((w, i) =>

)}

); } return null; }; return (

{/* Soft accent wash in the top-left */}

{/* Text panel */}

Built for surgeons

Everything you need.
In one platform.

{/* Feature cards */}

{cards.map((c) =>

{/* icon badge */} {c.icon}

{c.title}

{c.sub}

{renderPreview(c.preview)}

)}

); } /* Convert #rrggbb to "r, g, b" for use inside rgba(var(--accent-rgb), a). */ function hexToRgbTriple(hex) { const h = hex.replace('#', ''); const v = h.length === 3 ? h.split('').map((c) => c + c).join('') : h; const n = parseInt(v, 16); return `${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}`; } /* "In the OR" — two intra-operative photo slots, composed asymmetrically. The user drops their own images via the web component; empty state reads as intentional thanks to the muted caption and crimson rule. Slots persist via the sidecar so a fill survives reload. */ function InTheOR({ accent }) { const accentRgb = hexToRgbTriple(accent); const isMobile = useIsMobile(); return (

{/* Soft crimson wash so the photo block sits inside the brand atmosphere */}

From the field

Built where the{' '} CASES happen.

Capture the moments that matter — approach, retraction, the final reduction. Photos sync to the procedure record so the next resident on rotation walks in already knowing what good looks like.

{/* Asymmetric three-photo composition. Left column: two stacked photos (OR team + room setup). Right column: large hero photo offset down. */}

01 Walking through the steps · the resident logs each one in OrthoVaultOS, then exports a fully functional operative plan

03 Room setup in a flash · actual images from the surgeon you’re scrubbing with, configured the way they like it

02 Hohmann and Z-retractor placement is easier when you have pictures of exactly where they go

); } /* Beyond ortho — a quiet acknowledgment that the app is designed for orthopedics today, but the underlying structure (surgeon prefs, steps, pearls, references) maps to any surgical subspecialty. The grid lists adjacent fields with a small "soon" tag on the ones we plan to support officially. Editorial spacing, no icons — names earn their own weight. */ function OtherSpecialties({ accent }) { const isMobile = useIsMobile(); const specialties = [ { name: 'General surgery', soon: true }, { name: 'Cardiothoracic', soon: true }, { name: 'Vascular', soon: true }, { name: 'Neurosurgery', soon: true }, { name: 'Plastic & recon.', soon: true }, { name: 'Urology', soon: true }, { name: 'Otolaryngology', soon: true }, { name: 'OB / GYN', soon: true }, { name: 'Ophthalmology', soon: true }, { name: 'Trauma', soon: true }, { name: 'Pediatric surgery', soon: true }, { name: 'Transplant', soon: true }]; return (

Beyond ortho

Built for{' '} ORTHO.{' '} USEFUL in any OR.

Every surgical subspecialty runs on the same loop — surgeon preferences, steps, pearls, references. Official support for the fields below is on the roadmap, but the app already works today for any surgeon who wants to capture and reference their cases.

{specialties.map((s) => (

{s.name} {s.soon && ( Soon )}

))}

); } function Pricing({ accent }) { const isMobile = useIsMobile(); const tiers = [ { name: 'Free', price: '$0', sub: 'forever', tag: 'Try it in one case', cta: 'Download now', ctaHref: 'download.html', ctaStyle: 'ghost', featured: false, limits: { surgeons: '1 surgeon', procedures: '1 procedure' }, features: [ 'Full app, no time limit', 'Surgeon preference panel', 'Procedure steps & technique notes', 'Evidence & implant references', 'AI assistant (bring your own API key)'], excluded: ['Phone-to-desktop photo upload', 'Operative report parser', 'Import/export'] }, { name: 'Essentials', price: '$9.99', sub: 'per month', tag: 'For residents, fellows & attendings — all rotations', cta: 'Get Essentials', ctaHref: 'signup.html?plan=essentials', ctaStyle: 'solid', featured: false, limits: { surgeons: 'Up to 10 surgeons', procedures: 'Up to 20 procedures' }, features: [ 'Everything in Free', 'Up to 10 surgeon profiles', 'Up to 20 procedures', 'Favorites & quick-access', 'Import/export surgeon templates', 'Evidence & technique attachments'], excluded: ['Phone-to-desktop photo upload', 'Operative report parser'] }, { name: 'Professional', price: '$19.99', sub: 'per month', tag: 'For residents, fellows & attendings — all rotations', cta: 'Get Professional', ctaHref: 'signup.html?plan=professional', ctaStyle: 'featured', featured: true, badge: 'Most popular', limits: { surgeons: 'Unlimited surgeons', procedures: 'Unlimited procedures' }, features: [ 'Everything in Free', 'Unlimited surgeon profiles', 'Unlimited procedures', 'Favorites & quick-access', 'Import/export surgeon templates', 'Evidence & technique attachments', 'Phone images directly to app'], excluded: [] }]; return (

Pricing

Start with one procedure. Scale to your whole department.

Resident-friendly pricing. Cancel anytime. No credit card required for the free tier.

{tiers.map((t) => { const isFeat = t.featured; const cardBg = isFeat ? 'var(--feat-bg)' : 'var(--surface)'; const cardFg = isFeat ? 'var(--feat-fg)' : 'var(--text)'; const cardMuted = isFeat ? 'var(--feat-muted)' : 'var(--subtle)'; const cardText = isFeat ? 'var(--feat-text)' : 'var(--text)'; const cardBorder = isFeat ? 'var(--feat-bg)' : 'var(--border-strong)'; const limitsBg = isFeat ? 'var(--feat-overlay)' : 'rgba(120,120,140,0.06)'; return (

{t.badge &&

{t.badge}

}

{t.tag}

{t.name}

{t.price} {t.sub}

{t.limits.surgeons}

{t.limits.procedures}

{t.cta}

); })}

Note: OrthoVaultOS is not a HIPAA-protected app. Do not enter patient identifiers or any PHI. Use only de-identified information.

); } function Testimonials({ accent }) { const isMobile = useIsMobile(); const quotes = [ { quote: "Walked into my first solo TKA assist actually knowing Dr. Alami's positioning, suture sizes, and which trial she wanted first. Felt like I'd already scrubbed with her ten times.", name: 'Dr. Azer', org: 'PGY-2 · Orthopaedic Surgery' }, { quote: "My attendings stopped repeating themselves. The juniors actually show up prepared. The pearls panel is doing the teaching I used to have to do manually between cases.", name: 'Dr. Patel', org: 'Chief Resident · Sports Medicine' }, { quote: "I used to keep a folder of scribbled prefs cards from every attending. Now it's one app. New rotation, search the surgeon, walk in knowing what they want.", name: 'Dr. Samara', org: 'PGY-4 · Trauma Service' }]; return (

From the residents

The people who actually scrub in.

{quotes.map((q, i) =>

{q.quote}

{q.name.split(' ').map((w) => w[0]).join('').slice(0, 2)}

{q.name}

{q.org}

)}

); } function CallToAction({ accent }) { const isMobile = useIsMobile(); return (

{/* Crimson glow echoing the hero */}

Join surgeons{' '} mastering{' '} their craft.

Start free. Learn how your technique compares to the best. Upgrade when you're ready.

Get started free →

); } function Footer({ accent }) { const isMobile = useIsMobile(); return ( ); } Object.assign(window, { Nav, HeroSplit, HeroCentered, HeroEditorial, OldWay, HowItWorks, BuiltForSurgeons, InTheOR, OtherSpecialties, Pricing, Testimonials, CallToAction, Footer });

Surgical mastery,{' '} AMPLIFIED.

Surgical mastery,{' '} AMPLIFIED.

Surgicalmastery, AMPLIFIED.

Three taps from{' '} scrub-in to{' '} ready.

{s.title}

Everything you need. In one platform.

{c.title}

Built where the{' '} CASES happen.

Built for{' '} ORTHO.{' '} USEFUL in any OR.

Start with one procedure. Scale to your whole department.

The people who actually scrub in.

Join surgeons{' '} mastering{' '} their craft.

Surgical
mastery,
AMPLIFIED.

Everything you need.
In one platform.