@import url('/assets/fonts/fonts.css');
:root{--canvas:#f8f7f4;--surface:#fff;--ink:#29282f;--muted:#65616d;--line:#ddd8e4;--lavender:#7662b0;--hover:#67539e;--soft:#eae5f3;--focus:#67539e;--font:Montserrat,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/1.7 var(--font);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}a{color:var(--hover);text-decoration-thickness:1px;text-underline-offset:4px}a:hover{color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}button{cursor:pointer}img{max-width:100%;display:block;height:auto}svg{display:block;flex-shrink:0}h1,h2,h3{line-height:1.15;letter-spacing:-.04em;font-weight:600;margin:0 0 24px}h1{font-size:clamp(38px,4.3vw,64px)}h2{font-size:clamp(28px,3vw,40px)}h3{font-size:21px;letter-spacing:-.02em}p{margin:0 0 20px}ul,ol{padding-left:24px}li{padding-left:4px;margin-bottom:8px}strong{font-weight:600}.wrap{width:min(1200px,calc(100% - 64px));margin-inline:auto}.skip{position:absolute;left:16px;top:-90px;background:var(--surface);padding:12px;z-index:40}.skip:focus{top:12px}.site-header{border-bottom:1px solid var(--line);background:var(--canvas)}.header-inner{height:84px;display:flex;align-items:center;gap:32px}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:23px;letter-spacing:-.07em}.brand img{width:21px;height:32px;object-fit:contain}.site-nav{margin-left:auto;display:flex;align-items:center;gap:28px}.site-nav a{text-decoration:none;font-size:14px;font-weight:500}.site-nav a[aria-current=page]{color:var(--hover);text-decoration:underline}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border:1px solid var(--line);border-radius:8px;padding:10px 18px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;transition:background .16s,color .16s,border-color .16s}.button:hover{background:var(--soft);color:var(--ink);border-color:#b5a7d1}.button.primary{background:var(--lavender);color:#fff;border-color:var(--lavender)}.button.primary:hover{background:var(--hover);border-color:var(--hover)}.button svg,.icon-link svg{width:18px;height:18px}.menu-button{display:none;min-width:44px;min-height:44px;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);border-radius:8px;color:var(--ink);margin-left:auto}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.hero{padding-top:72px}.hero-copy{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;align-items:end;margin-bottom:44px}.hero h1{max-width:20ch;margin:0}.hero .intro{font-size:18px;line-height:1.7}.intro{color:var(--muted);font-size:18px;max-width:62ch}.product-image{margin:0}.product-image img{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface)}figcaption{font-size:13px;color:var(--muted);margin-top:12px}.hero figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px}.theme-toggle{display:flex;align-items:center;gap:4px}.theme-toggle button{min-height:40px;padding:6px 12px;background:none;border:0;border-bottom:2px solid transparent;font-size:13px;color:var(--muted)}.theme-toggle button[aria-pressed=true]{border-bottom-color:var(--lavender);color:var(--ink)}[hidden]{display:none!important}.section{padding-block:88px;border-bottom:1px solid var(--line)}.section-heading{max-width:680px;margin-bottom:40px}.section-heading p{color:var(--muted)}.editorial{display:grid;grid-template-columns:1fr 1.75fr;gap:64px;align-items:center}.editorial p{color:var(--muted)}.editorial .product-image figcaption{font-size:12px}.icon-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;font-weight:500;min-height:44px}.two-column{display:grid;grid-template-columns:1fr 1fr;gap:64px}.phone-story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.phone-story figure{justify-self:center;max-width:280px}.phone-story figure img{border:1px solid var(--line);border-radius:8px}.plain-list{list-style:none;padding:0;margin:0}.plain-list li{padding:20px 0;margin:0;border-top:1px solid var(--line)}.plain-list li:last-child{border-bottom:1px solid var(--line)}.plain-list a{display:flex;align-items:center;justify-content:space-between;gap:24px;text-decoration:none}.plain-list p{font-size:14px;color:var(--muted);margin:8px 0 0}.plain-list svg{width:20px;height:20px;flex-shrink:0}.cta{padding:72px 0;background:var(--soft)}.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px}.cta h2{max-width:20ch;margin-bottom:16px}.cta p{margin:0;color:var(--muted);max-width:54ch}.footer{padding:48px 0 32px;background:var(--surface);border-top:1px solid var(--line)}.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}.footer-top p{font-size:14px;color:var(--muted);max-width:28ch;margin-top:16px}.footer-group h2{font-size:14px;letter-spacing:0;margin-bottom:16px}.footer-group ul{list-style:none;margin:0;padding:0}.footer-group li{margin-bottom:8px;padding:0}.footer a:not(.brand){font-size:13px;text-decoration:none;display:inline-flex;min-height:32px;align-items:center}.footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.page-hero{padding:64px 0 44px}.page-hero h1{max-width:22ch}.breadcrumb{margin-bottom:24px;display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);flex-wrap:wrap}.breadcrumb a{text-decoration:none}.page-section{padding:0 0 72px}.resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}.resource-link{display:flex;gap:20px;align-items:flex-start;padding:28px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}.resource-link>svg{color:var(--lavender);width:24px;height:24px;margin-top:4px}.resource-link h2{font-size:23px;margin-bottom:12px}.resource-link p{font-size:15px;color:var(--muted);margin-bottom:12px}.resource-link .read{font-size:13px;color:var(--hover);display:inline-flex;align-items:center;gap:8px}.resource-link:hover h2{color:var(--hover)}.reading{max-width:790px}.reading h2{font-size:29px;margin:44px 0 20px;scroll-margin-top:24px}.reading h3{margin-top:28px}.reading p{max-width:74ch}.reading li{line-height:1.8}.reading .note{border-left:3px solid var(--lavender);padding:12px 20px;background:var(--soft);margin:24px 0}.reading .note p:last-child{margin-bottom:0}.contents{padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:32px}.contents h2{font-size:18px;margin:0 0 16px}.contents ol{margin:0;columns:2;font-size:14px}.related{border-top:1px solid var(--line);padding-top:32px;margin-top:48px}.related h2{margin-top:0}.article-image{margin:32px 0}.table-scroll{overflow-x:auto;max-width:100%;margin:32px 0;border:1px solid var(--line);border-radius:8px}table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7;text-align:left}th,td{padding:18px;vertical-align:top;border-bottom:1px solid var(--line);min-width:180px}th{font-weight:600;background:var(--surface)}tr:last-child td{border-bottom:0}.comparison-summary{border-top:1px solid var(--line);padding-top:28px}.faq{max-width:790px}.faq details{padding:22px 0;border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-weight:500;min-height:30px}.faq p{color:var(--muted);margin:20px 0 0}.legal-draft{border-left:3px solid var(--lavender);padding:16px 20px;background:var(--soft);margin-bottom:32px;font-size:14px}.legal-draft p:last-child{margin:0}.contact-options{max-width:790px}.contact-options h2{margin-top:36px;font-size:26px}.filter-tools{display:flex;gap:20px;align-items:end;margin-bottom:32px}.filter-tools label{display:block;flex:1;max-width:620px;font-size:14px}.filter-tools input{display:block;width:100%;min-height:46px;margin-top:8px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}.filter-count{font-size:13px;color:var(--muted);min-height:46px;display:flex;align-items:center}.reveal{transition:opacity .25s ease}.reveal.ready{opacity:0}.reveal.visible{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.wrap{width:min(1240px,calc(100% - 96px))}}
@media(max-width:1000px){.site-nav{gap:18px}.hero-copy{gap:32px}.editorial{gap:32px;grid-template-columns:1fr 1.4fr}.two-column{gap:36px}.footer-top{grid-template-columns:1.2fr 1fr 1fr}.footer-top>div:first-child{grid-column:1/-1}.phone-story{gap:36px}.hero h1{font-size:48px}}
@media(max-width:900px){.wrap{width:calc(100% - 40px)}.header-inner{height:auto;min-height:74px;flex-wrap:wrap;gap:0;padding-block:12px}.menu-button{display:flex}.site-nav{display:flex;flex-basis:100%;width:100%;margin:16px 0 0;padding:16px 0 4px;border-top:1px solid var(--line);flex-direction:column;align-items:stretch;gap:4px}.site-nav a{padding:10px 4px;min-height:44px}.site-nav .button{margin-top:8px;padding-inline:16px}.js .site-nav:not(.open){display:none}.hero{padding-top:44px}.hero-copy{grid-template-columns:1fr;gap:28px;margin-bottom:32px}.hero h1{font-size:clamp(38px,7.5vw,52px);max-width:20ch}.hero .intro{font-size:16px}.hero figcaption{align-items:flex-start;font-size:12px;flex-direction:column;gap:6px}.theme-toggle button{padding-left:0;padding-right:16px}.section{padding-block:56px}.section-heading{margin-bottom:28px}.editorial,.phone-story,.two-column{grid-template-columns:1fr;gap:28px}.editorial figure{order:2}.phone-story figure{max-width:250px}.cta{padding-block:48px}.cta .wrap{flex-direction:column;align-items:flex-start;gap:28px}.footer-top{grid-template-columns:1fr 1fr;gap:28px}.footer-top>div:first-child{grid-column:1/-1}.footer{padding-top:36px}.page-hero{padding-top:40px}.page-hero h1{font-size:36px}.resource-grid{grid-template-columns:1fr}.reading h2{font-size:26px}.contents ol{columns:1}.table-scroll{margin-inline:0}.filter-tools{align-items:stretch;flex-direction:column;gap:8px}.filter-count{min-height:24px}.article-image img{border-radius:4px}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.actions{flex-direction:column;align-items:stretch}.actions .button{width:100%}.brand{font-size:21px}.footer-top{gap:24px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal.ready{opacity:1}}

.theme-toggle,.filter-tools{display:none}.js .theme-toggle,.js .filter-tools{display:flex}.theme-toggle button{min-height:44px}
@media(max-width:900px){.footer a:not(.brand){min-height:44px}}

.brand{min-height:44px}.breadcrumb a{display:inline-flex;align-items:center;min-height:44px}.contents summary{cursor:pointer;font-weight:500;min-height:44px;display:flex;align-items:center}.contents ol{margin-top:16px}.contents a{min-height:44px;display:inline-flex;align-items:center}.retention-list{margin:28px 0;border-bottom:1px solid var(--line)}.retention-list>div{display:grid;grid-template-columns:1fr 2fr;gap:28px;padding:24px 0;border-top:1px solid var(--line)}.retention-list dt{font-weight:600}.retention-list dd{margin:0}
@media(max-width:900px){.retention-list>div{grid-template-columns:1fr;gap:12px}}

.contents summary,.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;list-style:none}.contents summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}.contents summary svg,.faq summary svg{width:18px;height:18px;color:var(--hover)}summary svg:last-child{display:none}details[open]>summary svg:nth-last-child(2){display:none}details[open]>summary svg:last-child{display:block}
@media(max-width:900px){.hero .actions{flex-direction:column;align-items:stretch}.hero .actions .button,.cta .button{width:100%}}

:root{color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--canvas:#17181c;--surface:#202127;--ink:#eaeaf0;--muted:#b3afbc;--line:#3d3947;--lavender:#a68bcf;--hover:#c2acdf;--soft:#2d2937;--focus:#c2acdf}}
:root[data-theme=dark]{color-scheme:dark;--canvas:#17181c;--surface:#202127;--ink:#eaeaf0;--muted:#b3afbc;--line:#3d3947;--lavender:#a68bcf;--hover:#c2acdf;--soft:#2d2937;--focus:#c2acdf}
.button.primary{color:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .button.primary{color:#201828}}
:root[data-theme=dark] .button.primary{color:#201828}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.site-appearance{display:none;align-items:center;gap:10px;font-size:13px}
.js .site-appearance{display:flex}
.site-appearance select{min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.phone-story>.product-image{max-width:280px;justify-self:center}
@media(max-width:900px){.phone-story>.product-image{max-width:250px}.site-nav a[aria-current=page]{text-underline-offset:5px}}

.site-nav>a{white-space:nowrap}.product-image.portrait{width:min(100%,280px);justify-self:center}
@media(max-width:760px){.hero picture img{aspect-ratio:375/330;object-fit:cover;object-position:top}}

/* The project walkthrough uses real captures, with user-controlled chapters. */
.story-hero{padding-top:64px}.story-hero .hero-copy{grid-template-columns:1.2fr 1fr;align-items:start;gap:64px;margin-bottom:48px}.story-hero h1{max-width:15ch;font-size:clamp(38px,4.6vw,64px);line-height:1.08}.hero-note{font-size:13px;color:var(--muted);margin:16px 0 0}.story-hero .intro{font-size:17px}.project-story{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}.tour-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;border-bottom:1px solid var(--line);font-size:13px}.tour-heading p{margin:0}.tour-heading strong{margin-right:6px}.tour-heading>span{color:var(--muted);white-space:nowrap;font-size:12px}.tour-tabs{display:none;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);padding:0 16px}.js .tour-tabs{display:grid}.tour-tabs button{display:flex;gap:10px;align-items:center;justify-content:center;min-height:64px;padding:12px 8px;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font-size:13px;font-weight:500}.tour-tabs button svg{width:20px;height:20px}.tour-tabs button:hover{color:var(--ink);background:var(--canvas)}.tour-tabs button[aria-selected=true]{color:var(--hover);border-bottom-color:var(--lavender)}.tour-tabs button:focus-visible{outline-offset:-4px}.tour-panel[hidden]{display:none}.tour-description{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:28px 32px;background:var(--canvas)}.tour-description h2{font-size:25px;line-height:1.3;letter-spacing:-.03em;margin:0;max-width:24ch}.tour-description p{font-size:14px;line-height:1.7;margin:0;color:var(--muted)}.tour-capture{padding:0 24px 0;background:var(--canvas)}.tour-capture .product-image img{border-radius:6px 6px 0 0}.tour-capture .product-image figcaption{display:none}.tour-footnote{padding:14px 24px;margin:0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.tour-panel.is-entering{animation:chapter-in 180ms ease-out}@keyframes chapter-in{from{opacity:.45}to{opacity:1}}
.story-heading{max-width:780px;margin-bottom:36px}.story-heading p{max-width:65ch;color:var(--muted)}.story-heading h2{font-size:clamp(28px,3vw,42px)}.agent-story{padding-top:96px}.connection-story{display:grid;grid-template-columns:1fr 180px 1fr;align-items:center;border-block:1px solid var(--line);padding:32px 0;margin:32px 0 40px}.connection-end{display:grid;grid-template-columns:38px 1fr;column-gap:18px;align-items:center;padding:0 32px}.connection-end h3{font-size:18px;margin:0}.connection-end p{grid-column:2;font-size:14px;color:var(--muted);margin:8px 0 0}.connection-end>img,.connection-icon{grid-row:1/3;align-self:start}.connection-icon svg{width:32px;height:32px;color:var(--lavender)}.connection-bridge{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--muted);font-size:12px;line-height:1.7}.connection-bridge svg{width:30px;height:30px;color:var(--lavender)}.setup-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding:0;margin:0;list-style:none;counter-reset:setup}.setup-steps li{padding:0;counter-increment:setup}.setup-steps h3{font-size:18px;letter-spacing:-.025em;margin-bottom:14px;display:flex;gap:12px}.setup-steps h3:before{content:counter(setup) '.';color:var(--lavender)}.setup-steps p{font-size:14px;color:var(--muted)}.prompt-example{display:flex;gap:32px;align-items:center;padding:24px 28px;background:var(--surface);border-left:3px solid var(--lavender);margin-top:24px}.prompt-example h3{font-size:14px;margin-bottom:12px;letter-spacing:0}.prompt-example p{margin:0;max-width:75ch;font-size:14px}.copy-prompt{display:none;flex-shrink:0}.js .copy-prompt{display:inline-flex}.copy-prompt svg{width:18px;height:18px}.document-story{border-top:1px solid var(--line)}.document-story>.product-image{margin-bottom:32px}.document-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.document-principles h3{font-size:18px}.document-principles p{font-size:14px;color:var(--muted);margin-bottom:0}.fit-story{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-block:1px solid var(--line)}.fit-story>div>p{color:var(--muted)}.fit-examples>p{display:flex;gap:20px;margin:0;padding:20px 0;border-bottom:1px solid var(--line);font-size:14px}.fit-examples>p:first-child{padding-top:0}.fit-examples>p:last-child{border:0}.fit-examples svg{width:22px;height:22px;color:var(--lavender);margin-top:2px}.fit-examples strong{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}.story-faq{display:grid;grid-template-columns:1fr 1.3fr;gap:64px}.story-faq h2{max-width:12ch}.story-faq .faq{min-width:0}.story-faq .icon-link{margin-top:24px}.story-faq .faq details:first-child{padding-top:0;border-top:0}.story-faq .faq p{font-size:14px}
@media(max-width:900px){.story-hero{padding-top:40px}.story-hero .hero-copy{grid-template-columns:1fr;gap:24px;margin-bottom:32px}.story-hero h1{max-width:18ch}.story-hero .actions{flex-direction:row;align-items:center}.story-hero .actions .button{width:auto}.tour-heading{padding:16px;align-items:flex-start;flex-direction:column;gap:4px}.tour-tabs{padding:0 8px}.tour-tabs button{font-size:12px;flex-direction:column;gap:6px;min-height:76px}.tour-description{padding:24px;gap:20px}.tour-description h2{font-size:22px}.tour-capture{padding:0 12px}.connection-story{grid-template-columns:1fr 100px 1fr}.connection-end{padding:0 8px;column-gap:10px;grid-template-columns:28px 1fr}.connection-end h3{font-size:16px}.connection-icon svg{width:26px;height:26px}.setup-steps,.document-principles{gap:24px}.prompt-example{align-items:flex-start;flex-direction:column;gap:20px}.fit-story{gap:32px}.story-faq{grid-template-columns:1fr;gap:16px}.story-faq h2{max-width:none}.story-faq .faq details:first-child{padding-top:20px;border-top:1px solid var(--line)}}
@media(max-width:600px){.story-hero h1{max-width:15ch;font-size:40px}.story-hero .actions{flex-direction:column;align-items:stretch}.story-hero .actions .button{width:100%}.tour-tabs{grid-template-columns:repeat(2,1fr);padding:0}.tour-tabs button{flex-direction:row;justify-content:flex-start;padding:12px;min-height:52px;font-size:11px}.tour-tabs button svg{width:18px;height:18px}.tour-description{grid-template-columns:1fr;padding:20px;gap:12px;min-height:205px}.tour-description h2{font-size:23px;max-width:none}.tour-capture{overflow:auto;padding:0;overscroll-behavior-x:contain}.tour-capture .product-image{width:760px}.tour-capture .product-image img{width:760px;max-width:none}.tour-footnote{padding:12px 16px;line-height:1.7}.connection-story{grid-template-columns:1fr;gap:20px;padding:24px 0}.connection-end{padding:0 12px;max-width:350px;width:100%;margin:auto;grid-template-columns:36px 1fr}.connection-bridge{flex-direction:row;justify-content:center;gap:16px}.connection-bridge svg{rotate:90deg}.setup-steps,.document-principles,.fit-story{grid-template-columns:1fr;gap:20px}.setup-steps li{margin:0}.setup-steps p{margin:0}.prompt-example{padding:20px}.document-principles h3{margin-bottom:12px}.agent-story{padding-top:56px}.document-story>.product-image{overflow:auto}.document-story>.product-image img{width:760px;max-width:none}.document-story>.product-image figcaption{max-width:100%}.fit-story{gap:24px}.story-faq{padding-bottom:40px}}
@media(max-width:360px){.story-hero h1{font-size:36px}.tour-tabs button{font-size:10px;gap:6px}}
@media(prefers-reduced-motion:reduce){.tour-panel.is-entering{animation:none}}
/* Reserve chapter space so switching views does not move the page. */
.tour-description{min-height:140px}.tour-capture .product-image{aspect-ratio:16/10;background:#f9f9fb}.tour-capture .product-image img{width:100%;height:100%;object-fit:contain}.tour-capture{scrollbar-width:thin}
@media(max-width:600px){.tour-description{min-height:230px}.tour-capture .product-image{width:760px}.tour-capture .product-image img{width:760px}}
.tour-panel{display:flex;flex-direction:column}.tour-capture{order:-1;padding-top:20px}.tour-capture .product-image{aspect-ratio:16/9}.tour-capture .product-image img{object-position:center top}.tour-description{border-top:1px solid var(--line)}
@media(max-width:600px){.tour-capture{padding-top:0}}

/* A unified story header, chapter navigation and explorable project. */
.story-hero h1 span{color:var(--lavender)}
.journey{max-width:960px;display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:64px;align-items:start}.journey-track{display:none}.journey.is-scroll-story>.journey-track{display:grid;grid-area:1/1;pointer-events:none;padding-bottom:50vh}.journey-track>div{min-height:72vh}.journey.is-scroll-story>.journey-visual{grid-area:1/1;position:sticky;top:24px;align-self:start}
.demo-story{display:grid;padding:28px 32px;border-bottom:1px solid #36313e}.journey-step{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:32px;opacity:1;transition:opacity 180ms ease}.journey-step h2{font-size:clamp(24px,2.5vw,28px);line-height:1.2;max-width:none;margin:0}.journey-step p{color:#c5bdcf;font-size:14px;line-height:1.65;margin:0}.js .journey-step{opacity:0;visibility:hidden;pointer-events:none}.js [data-phase=brief] [data-story-step=brief],.js [data-phase=map] [data-story-step=map],.js [data-phase=work] [data-story-step=work],.js [data-phase=handoff] [data-story-step=handoff]{opacity:1;visibility:visible;pointer-events:auto}
.journey-visual{position:relative;min-width:0;background:#19191f;color:#f0edf5;border:1px solid #45404f;border-radius:12px;box-shadow:0 18px 48px #17132115;overflow:hidden;--focus:#c8b2f0}
.demo-phases{display:none;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #36313e}.js .demo-phases{display:grid}.demo-phases button{min-height:48px;padding:10px 6px;border:0;border-bottom:2px solid transparent;background:none;color:#b7b1c3;font-size:12px}.demo-phases button span{margin-right:8px;color:#8f849f}.demo-phases button[aria-pressed=true]{border-bottom-color:#bb9bea;color:#e5d4fc;background:#28232f}.demo-phases button:focus-visible{outline-offset:-4px}
.demo-canvas{position:relative;aspect-ratio:1000/560;isolation:isolate}.demo-wires{position:absolute;width:100%;height:100%;inset:0;color:#84748f}.canvas-grid{opacity:.25}.map-lines path{stroke:#766782;stroke-width:2;fill:none;marker-end:url(#map-arrow);transition:stroke .3s}.map-lines path.selected{stroke:#c5a3f3;stroke-width:2.5}#map-arrow path{fill:#ac90c7}.wire-labels{fill:#aaa0b6;font-size:12px;font-family:Montserrat,sans-serif}
.map-node{position:absolute;width:22%;min-height:20%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:12px;border:1px solid #51465e;border-radius:7px;background:#25222d;color:#eee9f5;box-shadow:0 6px 14px #0002;transition:background .2s,border-color .2s,transform .2s}.map-node:hover{background:#302939;transform:translateY(-2px)}.map-node[aria-pressed=true]{border-color:#c7a6f2;background:#342a42;box-shadow:0 0 0 2px #c7a6f221,0 8px 20px #0003}.map-node strong{font-size:14px;margin-top:7px}.node-top{display:flex;gap:7px;align-items:center;color:#bcb1cd;font-size:10px}.node-top svg{width:18px;height:18px;color:#c7a6f2}.node-state,.node-document{display:flex;align-items:center;gap:6px;font-size:11px;margin-top:8px;color:#c2b8cf}.node-state svg,.node-document svg{width:13px;height:13px}.node-document{display:none}.node-storefront{left:4%;top:21%}.node-checkout{left:37.5%;top:21%}.node-orders{left:74%;top:6%}.node-payments{left:74%;top:39%}.node-email{left:74%;top:72%}.node-catalog{left:4%;top:65%}
.map-context{position:absolute;left:37.5%;top:66%;width:27%;border-left:2px solid #8b6caa;padding-left:14px;transition:opacity .3s}.map-context span{display:flex;align-items:center;gap:7px;font-size:11px;color:#d8c5ed}.map-context svg{width:14px;height:14px}.map-context p{font-size:11px;line-height:1.6;color:#b7b1c3;margin:8px 0 0}
.demo-selection-hint{display:flex;justify-content:center;align-items:center;gap:8px;font-size:11px;color:#b7b1c3;padding:2px 12px 18px}.demo-selection-hint svg{width:16px;height:16px}.demo-inspector{border-top:1px solid #45404f;padding:18px 24px;background:#222027;min-height:164px}.demo-detail-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px;font-size:13px}.demo-detail-heading>span{display:flex;align-items:center;gap:8px}.demo-detail-heading svg{width:18px;height:18px;color:#c7a6f2}.demo-detail-state{font-size:11px;color:#bdb4ca}.demo-detail-columns{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}.demo-detail-columns p{font-size:12px;line-height:1.7;margin-bottom:0;color:#d4cddb}.demo-detail-columns .demo-field{display:flex;align-items:center;gap:7px;font-size:11px;color:#c7a6f2;margin-bottom:9px;overflow-wrap:anywhere}.demo-field svg{width:15px;height:15px}.demo-detail-note{display:block;font-size:10px;color:#aca3ba;margin-top:8px}.demo-handoff{display:none}[data-phase=handoff] .demo-handoff{display:block}[data-phase=handoff] .demo-work{display:none}
.example-complete,.example-complete svg{color:#a6d4b8}

.proof-images{display:grid;grid-template-columns:1fr 1fr;gap:32px}.proof-images h3{margin:24px 0 12px}.proof-images p{font-size:14px;color:var(--muted)}.proof-images img{height:auto;object-fit:contain;object-position:top}
html:not(.js) .demo-story{gap:28px}html:not(.js) .journey-step{grid-area:auto}html:not(.js) .map-node{cursor:default}
@media(max-width:700px){.demo-phases button{font-size:10px;min-height:48px}.demo-phases button span{display:none}.demo-canvas{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 16px 16px;aspect-ratio:auto}.demo-wires,.map-context{display:none}.map-node{position:static;width:100%;min-height:108px;padding:10px}.map-node strong{font-size:12px}.node-top{font-size:9px;gap:5px}.node-top svg{width:15px;height:15px}.node-state{font-size:10px}.demo-selection-hint{font-size:10px;text-align:center;padding:8px 16px 16px}.demo-inspector{padding:18px 16px;min-height:285px}.demo-detail-columns{grid-template-columns:1fr;gap:18px}.demo-detail-heading{font-size:12px}.demo-disclosure{padding:12px 16px;font-size:10px}.proof-images{grid-template-columns:1fr}.journey{padding-bottom:12px}.journey-visual{border-radius:8px}}


@media(prefers-reduced-motion:reduce){.journey *{animation:none!important;transition:none!important}}

/* Phone review: retain the relationships and bring selected context into view. */
.demo-detail-tabs{display:none}.proof-zoom{font-size:13px;margin-top:4px}
@media(max-width:700px){
 .story-hero{padding-top:32px}.story-hero .intro{font-size:16px;line-height:1.6}.hero-note{font-size:12px}.story-hero .hero-copy{gap:20px}

 .demo-phases button{font-size:12px;min-height:48px}
 .demo-canvas{grid-template-areas:"catalog storefront" "orders checkout" "email payments";gap:28px 24px;padding:8px 16px 16px}
 .node-catalog{grid-area:catalog}.node-storefront{grid-area:storefront}.node-orders{grid-area:orders}.node-checkout{grid-area:checkout}.node-email{grid-area:email}.node-payments{grid-area:payments}
 .demo-wires{display:block;z-index:-1;pointer-events:none}.wire-labels{display:none}.canvas-grid{display:none}.map-lines path{stroke-width:1.5}.map-lines path.selected{stroke-width:2}
 .map-node{position:relative;left:auto;top:auto;min-height:82px;padding:12px 10px;box-shadow:none;justify-content:center}.map-node:hover{transform:none}.map-node strong{font-size:13px;line-height:1.3;margin:0;padding-left:24px;overflow-wrap:normal}.node-top{position:absolute;left:10px;top:15px}.node-top span{display:none}.node-top svg{width:17px;height:17px}.node-state{font-size:12px;line-height:1.4;margin-top:10px}.node-state svg{width:14px;height:14px}
 .demo-selection-hint{font-size:12px;padding:2px 16px 14px;line-height:1.4}.demo-inspector{min-height:0;padding:16px;scroll-margin-block:12px}.demo-detail-heading{font-size:14px;margin-bottom:8px}.demo-detail-state{font-size:12px}
 .js .demo-detail-tabs{display:flex;border-bottom:1px solid #51465e;margin-bottom:14px;gap:16px}.demo-detail-tabs button{min-height:44px;padding:6px 0;border:0;border-bottom:2px solid transparent;background:none;color:#c2b8cf;font-size:13px}.demo-detail-tabs button[aria-pressed=true]{border-bottom-color:#c7a6f2;color:#eee9f5}
 .demo-detail-columns{display:block}.js .demo-detail-columns>div{display:none}.js [data-detail-view=doc] .demo-doc,.js [data-detail-view=work] .demo-work,.js [data-detail-view=handoff] .demo-handoff{display:block;animation:mobile-context .18s ease-out}.demo-detail-columns p{font-size:14px;line-height:1.6}.demo-detail-columns .demo-field{font-size:12px}.demo-detail-note{font-size:12px}.demo-disclosure{font-size:11px;line-height:1.6}
 html:not(.js) .demo-wires{display:none}html:not(.js) .demo-detail-columns>div{display:block;margin-top:16px}
}
@keyframes mobile-context{from{opacity:.4}to{opacity:1}}
@media(max-width:360px){.demo-phases button{font-size:11px}.demo-canvas{gap:24px 18px;padding-inline:12px}.map-node{padding:10px 8px;min-height:88px}.node-top{left:8px;top:12px}.map-node strong{font-size:12px}.demo-detail-tabs{gap:14px}.demo-detail-heading{font-size:13px}}
@media(prefers-reduced-motion:reduce){.journey *{animation:none!important;transition:none!important}}

/* Keep chapter text in one place at every size, with opacity-only transitions. */
@media(max-width:700px){.demo-story{padding:22px 16px}.journey-step{grid-template-columns:1fr;align-content:start;gap:12px}.journey-step h2{font-size:24px;max-width:24ch}.journey-step p{font-size:14px;line-height:1.6}}

/* One continuous scene: positions remain stable while the scroll clock reveals context. */
.journey{max-width:1040px}
.journey-track>div{min-height:68vh}
.demo-story{padding:16px 24px}
.journey-step{gap:24px}
.journey-step h2{font-size:26px}
.journey-step p{font-size:13px;line-height:1.6}
.journey-visual{box-shadow:0 2px 8px #17132112}
.demo-phases{position:relative}
.demo-phases::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:#c7a6f2;transform-origin:left;transform:scaleX(var(--story-progress,0));pointer-events:none}
.demo-canvas{height:clamp(280px,calc(100svh - 540px),400px);aspect-ratio:auto}
.map-node{opacity:var(--node-reveal,1);transform:translateY(var(--node-shift,0px));transition:border-color 160ms,background 160ms;min-height:20%;padding:10px 12px}
.map-node:hover{transform:translateY(var(--node-shift,0px))}
.node-state{opacity:0;transition:opacity 160ms}
.has-work .node-state{opacity:1}
.map-context{z-index:2;transform:translate(var(--brief-x,0px),var(--brief-y,0px)) scale(var(--brief-scale,1));transform-origin:top left;opacity:var(--brief-opacity,1);background:#19191f;padding-block:8px;pointer-events:none}
.map-context span{font-size:12px}.map-context p{font-size:12px}
.map-lines path{transition:stroke 160ms;will-change:stroke-dashoffset}
.wire-labels{opacity:var(--wire-labels,0)}
.demo-selection-hint{padding:0 16px 12px;min-height:28px}
.demo-inspector{padding:14px 24px;min-height:156px}
.demo-detail-heading{margin-bottom:10px}
.demo-detail-columns{min-height:100px;align-content:start}
.demo-detail-columns p{font-size:12px;line-height:1.6}
.demo-detail-columns .demo-field{margin-bottom:7px}
.demo-detail-note{font-size:11px;line-height:1.5}
.demo-handoff-summary{margin:10px 0 0;font-size:11px;line-height:1.5}
.demo-handoff-summary>div{display:grid;grid-template-columns:90px 1fr;gap:10px;margin-top:6px}
.demo-handoff-summary dt{color:#bdb4ca}.demo-handoff-summary dd{margin:0;color:#eee9f5}
.demo-handoff:has(.demo-handoff-summary)>p:not(.demo-field){display:none}
.payment-complete .node-payments{border-color:#78b18c}
.demo-disclosure{margin:0;padding:9px 24px;border-top:1px solid #36313e;font-size:10px;line-height:1.6;color:#b7b1c3}
.js .journey-step[aria-hidden=false]{animation:story-copy-in 180ms ease-out}
@keyframes story-copy-in{from{opacity:0}to{opacity:1}}
.journey-visual:has(.map-node:focus-visible) .map-node{opacity:1;transform:none}
.journey-visual:has(.map-node:focus-visible) .map-context{opacity:0}
@media(max-width:700px){
 .demo-story{padding:20px 16px}.journey-step{gap:10px}.journey-step h2{font-size:24px}.journey-step p{font-size:14px}
 .demo-canvas{height:auto;min-height:0;aspect-ratio:auto}
 .map-node{padding:12px 10px;min-height:82px}
 .map-context{display:block;left:20%;top:29%;width:60%;padding:12px 14px;border:1px solid #51465e;border-left:2px solid #bba0df;border-radius:6px;transform:none}
 .demo-inspector{padding:16px;min-height:260px}
 .demo-detail-columns{min-height:144px}
 .demo-detail-columns p{font-size:14px;line-height:1.6}
 .demo-handoff-summary{font-size:12px}.demo-handoff-summary>div{grid-template-columns:90px 1fr}
 .demo-disclosure{padding:10px 16px}
 .demo-detail-note{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .journey *{animation:none!important;transition:none!important}
 .map-node{transform:none;opacity:1}
 .map-context{transform:none}
}

@media(min-width:701px){.demo-detail-columns{height:120px;min-height:120px}.demo-handoff-summary{font-size:12px;margin-top:6px}.demo-handoff-summary>div{margin-top:4px}.demo-handoff .demo-detail-note{margin-top:6px;font-size:10px}}

@media(min-width:701px){.demo-handoff:has(.demo-handoff-summary) .demo-detail-note{display:none}}
@media(max-width:700px){.demo-detail-columns{height:224px;min-height:224px}.demo-handoff:has(.demo-handoff-summary) .demo-detail-note{display:none}}
html:not(.js) .demo-detail-columns{height:auto}

html:not(.js) .node-state{opacity:1}

/* Phones follow the same scroll story with a compact context slot. Full details open on request. */
.demo-copy-phone,.demo-phone-summary{display:none}
.demo-inspector-dialog{max-width:640px;width:calc(100% - 24px);max-height:calc(100svh - 32px);padding:0;border:1px solid #51465e;border-radius:10px;background:#222027;color:#f0edf5;overflow:auto;overscroll-behavior:contain;--focus:#c8b2f0}
.demo-inspector-dialog::backdrop{background:#111016b8}
.demo-dialog-toolbar{display:flex;justify-content:flex-end;padding:8px 12px;border-bottom:1px solid #45404f;background:#222027;position:sticky;top:0;z-index:3}
.demo-dialog-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid #51465e;border-radius:6px;background:transparent;color:inherit;font-size:14px}
.demo-dialog-toolbar svg{width:18px;height:18px}
html:has(.demo-inspector-dialog[open]){overflow:hidden}
.demo-inspector-dialog .demo-inspector{border:0;min-height:0}
.demo-inspector-dialog .demo-detail-columns{height:auto;min-height:0}
@media(max-width:700px){
 .is-mobile-story.is-scroll-story>.journey-visual{top:12px}
 .is-mobile-story.is-scroll-story>.journey-track{padding-bottom:40svh}
 .is-mobile-story .journey-track>div{min-height:55svh}
 .is-mobile-story .demo-copy-full{display:none}
 .is-mobile-story .demo-copy-phone{display:inline}
 .is-mobile-story .demo-story{padding:12px 14px}
 .is-mobile-story .journey-step{gap:8px}
 .is-mobile-story .journey-step h2{font-size:20px;line-height:1.2}
 .is-mobile-story .journey-step p{font-size:13px;line-height:1.5}
 .is-mobile-story .demo-phases button{font-size:11px;min-height:44px;padding:8px 4px}
 .is-mobile-story .demo-canvas{grid-template-rows:repeat(3,72px);gap:16px 22px;padding:8px 12px 12px}
 .is-mobile-story .map-node{min-height:72px;height:72px;padding:8px;justify-content:center}
 .is-mobile-story .map-node strong{font-size:12px;line-height:1.2;padding-left:22px}
 .is-mobile-story .node-top{top:11px;left:8px}
 .is-mobile-story .node-top svg{width:16px;height:16px}
 .is-mobile-story .node-state{font-size:11px;line-height:1.25;margin-top:6px}
 .is-mobile-story .demo-selection-hint{font-size:10px;line-height:1.4;min-height:0;padding:0 8px 7px;gap:5px}
 .is-mobile-story .demo-selection-hint svg{width:13px;height:13px}
 .is-mobile-story .demo-phone-summary{display:grid;border-top:1px solid #45404f;padding:10px 14px;background:#222027}
 .demo-phone-summary>section{grid-area:1/1;min-height:108px;visibility:hidden;pointer-events:none}
 .demo-phone-summary strong{display:flex;gap:7px;align-items:center;font-size:12px;line-height:1.4}
 .demo-phone-summary strong svg,.demo-phone-payment svg{width:15px;height:15px}
 .demo-phone-summary p{font-size:12px;line-height:1.5;margin:7px 0 0;color:#d4cddb}
 .demo-phone-payment{display:flex;align-items:center;gap:6px}
 .payment-complete .demo-phone-payment{color:#a6d4b8}
 .demo-phone-summary dl{font-size:11px;line-height:1.4;margin:8px 0 0}
 .demo-phone-summary dl>div{display:grid;grid-template-columns:60px 1fr;gap:8px;margin-top:4px}
 .demo-phone-summary dt{color:#bdb4ca}.demo-phone-summary dd{margin:0}
 [data-phase=brief] [data-compact-step=brief],[data-phase=map] [data-compact-step=map],[data-phase=work] [data-compact-step=work],[data-phase=handoff] [data-compact-step=handoff]{visibility:visible;pointer-events:auto}
 .is-mobile-story .demo-disclosure{font-size:10px;line-height:1.45;padding:7px 12px}
 .demo-inspector-dialog .demo-detail-columns p{font-size:14px}
}
@media(max-width:700px) and (max-height:660px){
 .is-mobile-story .journey-step h2{font-size:18px}
 .is-mobile-story .journey-step p{display:none}
 .is-mobile-story .demo-story{padding:10px 14px}
 .is-mobile-story .demo-canvas{grid-template-rows:repeat(3,64px);gap:12px 20px;padding:6px 12px 10px}
 .is-mobile-story .map-node{min-height:64px;height:64px;padding:6px 8px}
 .is-mobile-story .node-top{top:8px}
 .demo-phone-summary>section{min-height:100px}
}
@media(prefers-reduced-motion:reduce){.demo-inspector-dialog{animation:none;transition:none}}