@charset "UTF-8";

/* All visual changes are inside the service content. The production shell is reused. */
.service-story{--story-mint:#95e7ce;--story-lilac:#b8a6ff;--story-surface:#151930;--story-paper:#10152a;--story-soft:#a4aecb;--story-line:#929ade26;max-width:1260px;margin:0 auto;padding:0 10px;isolation:isolate}
[data-theme=light] .service-story{--story-mint:#25856b;--story-lilac:#7651e3;--story-surface:#fff;--story-paper:#f7f6ff;--story-soft:#626b86;--story-line:#8986b536}
.service-story *{box-sizing:border-box}
.service-story svg:not(.story-tool-slot *){display:block;flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.service-story a:not(.story-tool-slot *){text-decoration:none}
.service-story button:not(.story-tool-slot *){box-shadow:none;transform:none}
.service-story button:hover:not(.story-tool-slot *){transform:none}
.service-story a:focus-visible:not(.story-tool-slot *),.service-story button:focus-visible:not(.story-tool-slot *),.service-story input:focus-visible:not(.story-tool-slot *),.service-story textarea:focus-visible:not(.story-tool-slot *),.service-story summary:focus-visible:not(.story-tool-slot *){outline:2px solid var(--violet);outline-offset:4px}
.service-story :is(h1,h2,h3,p):not(.story-tool-slot *){margin:0}
.service-story .story-topline{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:8px 0 26px}
.service-story .story-breadcrumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.service-story .story-breadcrumbs a{color:var(--muted)}
.service-story .story-breadcrumbs a:hover{color:var(--text)}
.service-story .story-breadcrumbs>span[aria-current]{color:var(--text)}
.service-story .concept-mark{font-size:10px;color:var(--muted)!important;padding:5px 8px;border:1px solid var(--line);border-radius:8px;white-space:nowrap}
.service-story .concept-mark:hover{color:var(--violet)!important;border-color:var(--violet)}
.service-story .story-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);gap:40px;align-items:center;position:relative;min-height:525px;padding:27px 0 43px}
.service-story .hero-copy{position:relative;z-index:1}
.service-story .story-eyebrow{display:flex;align-items:center;gap:8px;color:var(--story-lilac);font-size:12px;font-weight:600;letter-spacing:.1px}
.service-story .story-eyebrow i{display:block;width:6px;height:6px;border-radius:50%;background:var(--story-lilac);box-shadow:0 0 12px #9470ff88}
.service-story h1:not(.story-tool-slot *){font-size:clamp(34px,3.05vw,53px);line-height:1.09;letter-spacing:-1.9px;font-weight:700;margin:21px 0 23px}
.service-story h1 em{font-style:normal;background:linear-gradient(110deg,#baaaff,#d8caff 50%,#96e2d5);background-clip:text;-webkit-background-clip:text;color:transparent}
[data-theme=light] .service-story h1 em{background-image:linear-gradient(110deg,#7054d8,#8256c3 55%,#367a87)}
.service-story .hero-lead{font-size:16px;line-height:1.75;color:var(--muted);max-width:470px}
.service-story .hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:27px}
.service-story .story-button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:49px;padding:14px 20px;border:1px solid #9172ff;border-radius:14px;font-size:13px;font-weight:700;white-space:nowrap}
.service-story .story-button>span{font-size:19px;font-weight:400;line-height:1}
.service-story .story-demo-link{display:inline-flex;align-items:center;gap:8px;color:var(--text)!important;font-size:12px;min-height:42px}
.service-story .story-demo-link svg{width:16px;height:16px;fill:var(--story-lilac);stroke:none}
.service-story .hero-access{font-size:11px!important;margin-top:11px!important;color:var(--story-soft)!important}
.service-story .hero-reassurance{display:flex;align-items:center;gap:17px;flex-wrap:wrap;margin-top:30px;color:var(--muted);font-size:10px}
.service-story .hero-reassurance span{display:inline-flex;align-items:center;gap:6px}
.service-story .hero-reassurance svg{width:15px;height:15px;color:var(--story-lilac)}
.service-story .product-stage{position:relative;padding:14px 12px 0;isolation:isolate;min-width:0;scroll-margin-top:35px;outline:none}
.service-story .product-stage:before{content:"";position:absolute;inset:5% -10% 0;z-index:-2;background:radial-gradient(ellipse at 50% 45%,#805bff2e,transparent 68%);filter:blur(10px);pointer-events:none}
.service-story .stage-orbit{position:absolute;z-index:-1;border:1px solid #9f84f22a;border-radius:32px;pointer-events:none}
.service-story .orbit-one{inset:31px 4px 35px;transform:rotate(-4deg);background:linear-gradient(130deg,#5d388416,transparent)}
.service-story .orbit-two{inset:44px 0 41px;transform:rotate(3deg);border-color:#7b85c31c}
.service-story .product-window{position:relative;border:1px solid #8d7cc055;border-radius:23px;background:linear-gradient(150deg,#2b244556,#151a3100 55%),var(--story-surface);box-shadow:0 24px 60px #00000025,inset 0 1px 0 #ffffff09;overflow:hidden}
.service-story .saved-note{position:absolute;display:flex;gap:9px;align-items:center;right:20px;top:-23px;z-index:2;font-size:10px;line-height:1.5;color:var(--muted);background:var(--story-surface);padding:11px 14px;border:1px solid var(--story-line);border-radius:14px;box-shadow:0 10px 30px #08051335;transform:rotate(4deg)}
.service-story .saved-note>svg{width:23px;height:23px;color:var(--story-mint)}
.service-story .saved-note strong{color:var(--text);font-weight:600}
.service-story .product-titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:19px 18px 16px}
.service-story .product-titlebar>div{display:flex;align-items:center;gap:9px}
.service-story .product-titlebar strong{font-size:12px;font-weight:600}
.service-story .product-logo{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:#7657f9;color:#fff;font-size:11px;font-weight:700;letter-spacing:-.6px}
.service-story .example-label{color:var(--muted);font-size:9px}
.service-story .demo-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));isolation:isolate;position:relative;margin:0 18px 15px;padding:4px;border:1px solid var(--story-line);border-radius:14px;background:var(--story-paper);--tab-index:0}
.service-story .demo-tabs button{position:relative;min-width:0;border:0;background:transparent!important;border-radius:9px;padding:9px 4px;font-size:11px;font-weight:600;color:var(--muted);line-height:1.3;box-shadow:none;transition:color .15s}
.service-story .demo-tabs button[aria-selected=true]{color:var(--text)}
.service-story .demo-tab-indicator{position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/3);background:#9375e82b;border:1px solid #ad95ff28;border-radius:9px;z-index:-1;transform:translateX(calc(var(--tab-index,0)*100%));transition:transform .42s cubic-bezier(.2,.86,.2,1.03);will-change:transform}
.service-story .demo-editor{padding:18px;margin:0 18px;border:1px solid var(--story-line);border-radius:16px;background:var(--story-paper);box-shadow:inset 0 2px 4px #0808120c}
.service-story .demo-editor-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--story-soft);font-size:9px;margin-bottom:12px;min-height:22px}
.service-story .demo-editor-top>span:last-child{display:flex;align-items:center;gap:5px;background:#9880e71a;color:var(--story-lilac);padding:4px 7px;border-radius:7px}
.service-story .demo-editor-top svg{width:12px;height:12px}
.service-story .demo-field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.service-story .demo-title{font:600 16px/1.4 Arial,sans-serif;color:var(--text);letter-spacing:-.2px;margin:0 0 9px;padding:0;border:0;border-radius:5px;background:transparent;box-shadow:none;height:26px;width:100%;min-width:0}
.service-story #demo-text{font:12px/1.8 Arial,sans-serif;display:block;background:transparent;border:0;box-shadow:none;color:var(--muted);padding:0;margin:0;resize:none;height:156px;min-height:156px;width:100%;overflow:auto;border-radius:5px;scrollbar-width:thin;scrollbar-color:#8069c44a transparent}
.service-story .demo-title[readonly],.service-story #demo-text[readonly]{cursor:default}
.service-story .product-window.is-copy .demo-title,.service-story .product-window.is-copy #demo-text{box-shadow:0 0 0 6px #8d6eff09;background:#8d6eff09}
.service-story .product-window.is-copy .demo-editor{border-color:#89d3bd60}
.service-story .product-window.is-copy .demo-editor-top>span:last-child{color:var(--story-mint);background:#82dcb116}
.service-story .demo-platforms{display:flex;align-items:center;gap:6px;margin-top:13px;font-size:9px;color:var(--muted)}
.service-story .demo-platforms>span:first-child{margin-right:auto}
.service-story .platform-chip{display:flex;align-items:center;gap:4px;padding:4px 6px;border:1px solid var(--story-line);border-radius:7px;color:var(--text);font-size:9px}
.service-story .platform-chip svg{width:13px;height:13px;stroke-width:1.4;color:#8bcfff}
.service-story .platform-chip b{display:grid;place-items:center;color:#a594ff;font-size:11px;font-weight:700;width:13px;height:13px}
.service-story .demo-window-bottom{display:flex;gap:6px;padding:15px 18px 17px;min-height:76px;align-items:center}
.service-story .demo-create{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #8a6afd;border-radius:12px;background:linear-gradient(125deg,#7659f5,#6744df);color:#fff;min-height:42px;font-size:11px;padding:10px 13px;width:100%;white-space:nowrap;box-shadow:inset 0 1px 0 #fff2}
.service-story .demo-create svg{width:16px;height:16px}
.service-story .demo-create>span:last-child{margin-left:auto;font-size:16px}
.service-story .demo-create>span:nth-child(2){margin-right:auto}
.service-story .demo-create:hover{background:linear-gradient(125deg,#8868ff,#7453ef)}
.service-story .demo-reset{border-color:var(--story-line);background:var(--story-paper);padding:10px 12px;font-size:11px;min-height:42px;width:100%;color:var(--story-lilac);border-radius:12px}
.service-story .demo-feedback{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--story-soft);font-size:9px;line-height:1.5;margin-top:16px;min-height:28px;text-align:center}
.service-story .feedback-dot{width:5px;height:5px;border-radius:50%;flex:none;background:var(--story-lilac)}
.service-story .product-stage:has(.is-copy) .feedback-dot{background:var(--story-mint)}
.service-story .story-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border-top:1px solid var(--story-line);border-bottom:1px solid var(--story-line);padding:24px 0;margin:14px 0 0}
.service-story .story-principles>div{display:flex;gap:12px;align-items:center}
.service-story .principle-icon{width:37px;height:37px;display:grid;place-items:center;color:var(--story-lilac);background:#9a79ed10;border:1px solid #9a79ed18;border-radius:12px}
.service-story .principle-icon svg{width:19px;height:19px}
.service-story .story-principles p{font-size:12px;line-height:1.45!important}
.service-story .story-principles strong{color:var(--text);display:block;font-weight:600}
.service-story .story-principles p>span{color:var(--muted);font-size:10px;display:block;margin-top:4px}
.service-story .story-section-nav{display:flex;align-items:center;gap:25px;padding:19px 0 0;overflow-x:auto;scrollbar-width:none}
.service-story .story-section-nav a{white-space:nowrap;color:var(--muted);font-size:11px;min-height:27px}
.service-story .story-section-nav a:hover{color:var(--story-lilac)}
.service-story .story-section{margin:77px 0;scroll-margin-top:32px}
.service-story .section-kicker{font-size:9px;letter-spacing:.12em;line-height:1.5;color:var(--story-lilac);font-weight:600;display:block;margin-bottom:13px}
.service-story h2:not(.story-tool-slot *){font-size:clamp(27px,2.1vw,36px);line-height:1.16;letter-spacing:-1px;font-weight:650}
.service-story .section-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:26px}
.service-story .section-intro>p{font-size:12px;line-height:1.7;max-width:350px;margin-bottom:3px;color:var(--muted)}
.service-story .use-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.service-story .use-case{display:flex;flex-direction:column;position:relative;min-width:0;overflow:hidden;padding:24px 21px 0;background:linear-gradient(145deg,#8a62e51a,transparent 68%),var(--panel);border:1px solid var(--story-line);border-radius:21px}
.service-story .case-news{background:linear-gradient(145deg,#4ccda914,transparent 68%),var(--panel)}
.service-story .case-hours{background:linear-gradient(145deg,#7797ed19,transparent 68%),var(--panel)}
.service-story .case-icon{display:grid;place-items:center;width:39px;height:39px;border:1px solid #a085e530;border-radius:13px;background:#9474ed14;color:var(--story-lilac);margin-bottom:22px}
.service-story .case-icon svg{width:21px;height:21px}
.service-story .case-news .case-icon{color:var(--story-mint);border-color:#63cba331;background:#75d6ad0b}
.service-story .case-hours .case-icon{color:#a9bdff;border-color:#899dcb30;background:#759bd611}
[data-theme=light] .service-story .case-hours .case-icon{color:#5278bf}
.service-story .case-number{position:absolute;right:18px;top:36px;font-size:8px;letter-spacing:.04em;color:var(--muted)}
.service-story .use-case h3{font-size:17px;line-height:1.35;letter-spacing:-.35px;font-weight:600}
.service-story .use-case p{font-size:12px;line-height:1.75!important;color:var(--muted);margin:10px 0 20px}
.service-story .case-snippet{margin-top:auto;background:var(--story-paper);border:1px solid var(--story-line);border-bottom:0;border-radius:13px 13px 0 0;padding:16px;position:relative;min-height:108px}
.service-story .case-snippet>span{display:block;font-size:10px;color:var(--text);margin-bottom:11px}
.service-story .case-snippet i{display:block;height:4px;background:var(--muted);opacity:.18;border-radius:4px;width:90%;margin:7px 0}
.service-story .case-snippet i:nth-of-type(2){width:65%}
.service-story .case-snippet b{display:block;font-size:9px;font-weight:400;color:var(--story-lilac);margin-top:15px}
.service-story .case-news .case-snippet b{color:var(--story-mint)}
.service-story .section-note{font-size:10px!important;color:var(--muted);margin-top:13px!important}
.service-story .inline-action{display:inline-flex;align-items:center;gap:12px;color:var(--story-lilac)!important;font-size:12px;white-space:nowrap;min-height:36px}
.service-story .inline-action>span{font-size:18px}
.service-story .workflow{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;counter-reset:step}
.service-story .workflow li{position:relative}
.service-story .workflow li:not(:last-child):before{content:"";position:absolute;left:50px;right:0;top:20px;border-top:1px solid var(--story-line)}
.service-story .workflow li:not(:last-child):after{content:"›";position:absolute;right:-16px;top:8px;color:var(--story-lilac);font-size:17px}
.service-story .step-index{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;border:1px solid var(--story-line);color:var(--story-lilac);background:var(--story-paper);font-size:12px;margin-bottom:24px}
.service-story .workflow h3{font-size:15px;letter-spacing:-.2px;margin-bottom:10px;font-weight:600}
.service-story .workflow p{font-size:12px;line-height:1.8!important;color:var(--muted)}
.service-story .capabilities-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:55px;align-items:center}
.service-story .capability-copy>p{font-size:13px;line-height:1.8!important;color:var(--muted);margin-top:17px;max-width:430px}
.service-story .capability-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:22px}
.service-story .capability-list li{display:flex;gap:13px}
.service-story .capability-list li>span{flex:none;display:grid;place-items:center;width:31px;height:31px;color:var(--story-lilac);background:#8f76d312;border-radius:10px;margin-top:1px}
.service-story .capability-list svg{width:17px;height:17px}
.service-story .capability-list strong{font-size:13px;font-weight:600}
.service-story .capability-list p{font-size:11px;line-height:1.8!important;margin-top:5px;max-width:360px;color:var(--muted)}
.service-story .separation-card{background:linear-gradient(150deg,#9776fb0f,transparent 65%),var(--panel);border:1px solid var(--story-line);border-radius:24px;padding:28px}
.service-story .separation-heading{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.service-story .separation-heading>span{color:var(--story-lilac);display:grid;place-items:center;width:41px;height:41px;background:#9776fb13;border:1px solid #9776fb28;border-radius:14px}
.service-story .separation-heading svg{width:22px;height:22px}
.service-story .separation-heading h3{font-size:17px;font-weight:600;letter-spacing:-.3px;line-height:1.4}
.service-story .comparison-head,.service-story .comparison-row{display:grid;grid-template-columns:minmax(0,1.25fr) .7fr .8fr;gap:8px;padding:15px 0;border-bottom:1px solid var(--story-line);align-items:center}
.service-story .comparison-head{font-size:9px;line-height:1.4;color:var(--muted);padding-top:0}
.service-story .comparison-head strong{font-weight:500;text-align:center;color:var(--story-lilac)}
.service-story .comparison-row{font-size:12px;color:var(--muted)}
.service-story .comparison-row>span:not(:first-child){text-align:center}
.service-story .dash{opacity:.5}
.service-story .control-note{display:flex;gap:11px;margin-top:23px;align-items:center}
.service-story .control-note svg{width:22px;height:22px;color:var(--story-lilac)}
.service-story .control-note p{font-size:10px;line-height:1.75!important}
.service-story .control-note strong{color:var(--text);font-weight:500}
.service-story .faq-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:55px;padding-top:12px}
.service-story .faq-intro>p{font-size:12px;line-height:1.85!important;max-width:310px;margin-top:19px;color:var(--muted)}
.service-story .faq-intro a{color:var(--story-lilac);text-decoration:underline;text-underline-offset:3px}
.service-story .story-faq{border-top:1px solid var(--story-line)}
.service-story .story-faq details{border-bottom:1px solid var(--story-line);padding:0}
.service-story .story-faq summary{list-style:none;display:flex;align-items:center;gap:18px;justify-content:space-between;cursor:pointer;font-size:13px;line-height:1.6;padding:20px 0;min-height:67px;color:var(--text)}
.service-story .story-faq summary::-webkit-details-marker{display:none}
.service-story .story-faq summary>span{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--story-line);border-radius:9px;flex:none;color:var(--story-lilac);font-size:18px;transition:transform .23s ease}
.service-story .story-faq details[open] summary>span{transform:rotate(45deg)}
.service-story .story-faq details p{font-size:12px;line-height:1.85!important;color:var(--muted);margin:0 34px 20px 0;animation:service-story-answer .18s ease-out}
.service-story .story-final{margin-top:80px;padding:38px;display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid #9c80f345;border-radius:25px;background:radial-gradient(ellipse at 80% 100%,#7b5bf529,transparent 65%),linear-gradient(130deg,#3930583a,transparent 80%),var(--panel);position:relative;overflow:hidden}
.service-story .story-final h2{font-size:30px;line-height:1.2;letter-spacing:-.8px}
.service-story .story-final p{margin-top:15px;font-size:12px;color:var(--muted)}
.service-story .story-final .section-kicker{font-size:8px;margin-bottom:14px}
.service-story .final-action{display:flex;flex-direction:column;gap:12px;align-items:center;flex:none}
.service-story .final-action>span{font-size:10px;color:var(--muted)}
.service-story .related-section{margin-top:42px}
.service-story .related-section>h2{font-size:17px;letter-spacing:-.3px;font-weight:600}
.service-story .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:17px}
.service-story .related-grid>a{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--story-line);border-radius:17px;background:var(--panel);color:var(--text)}
.service-story .related-grid>a:hover{border-color:var(--violet)}
.service-story .related-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:11px;background:#9176ef12;color:var(--story-lilac)}
.service-story .related-icon svg{width:20px;height:20px}
.service-story .related-grid h3{font-size:12px;font-weight:600}
.service-story .related-grid p{font-size:10px;color:var(--muted);margin-top:4px}
.service-story .related-grid a>span:last-child{font-size:18px;color:var(--story-lilac);margin-left:auto}
.service-story .story-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin:40px 0 0;padding:22px 0 9px;border-top:1px solid var(--story-line);font-size:9px;color:var(--muted)}
@keyframes service-story-answer{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1700px){.service-story .story-hero{gap:65px}
.service-story .story-copy{max-width:530px}
.service-story h1:not(.story-tool-slot *){font-size:55px}
.service-story .hero-lead{font-size:17px!important}
.service-story .product-stage{max-width:550px;width:100%;justify-self:end}
.service-story .hero-actions{gap:24px}
.service-story .story-section{margin:85px 0}}
@media(max-width:1280px) and (min-width:901px){.service-story .story-hero{gap:24px;padding-top:20px}
.service-story h1:not(.story-tool-slot *){font-size:36px;letter-spacing:-1.2px}
.service-story .hero-lead{font-size:14px!important}
.service-story .hero-actions{gap:8px}
.service-story .hero-access{font-size:10px!important}
.service-story .hero-reassurance{gap:9px}
.service-story .hero-reassurance span{font-size:9px}
.service-story .story-button{font-size:11px;padding:12px 14px;gap:10px;min-height:45px}
.service-story .story-demo-link{font-size:10px}
.service-story .product-stage{padding-inline:0}
.service-story .saved-note{right:10px;font-size:8px;top:-16px}
.service-story .product-titlebar{padding:16px 13px}
.service-story .demo-tabs{margin-inline:13px}
.service-story .demo-editor{margin-inline:13px;padding:14px}
.service-story .demo-window-bottom{padding-inline:13px}
.service-story .demo-create{font-size:10px!important}
.service-story .demo-title{font-size:14px}
.service-story #demo-text{font-size:11px;height:166px;min-height:166px}
.service-story .demo-feedback{font-size:8px}
.service-story .story-principles{gap:12px}
.service-story .story-principles>div{gap:9px}
.service-story .story-principles strong{font-size:11px}
.service-story .story-principles p>span{font-size:9px}
.service-story h2:not(.story-tool-slot *){font-size:28px}
.service-story .section-intro>p{max-width:250px;font-size:11px}
.service-story .use-case{padding:20px 16px 0}
.service-story .use-case h3{font-size:15px}
.service-story .use-case p{font-size:11px}
.service-story .case-number{font-size:7px;right:12px;top:30px}
.service-story .case-icon{width:32px;height:32px}
.service-story .capabilities-section,.service-story .faq-section{gap:27px}
.service-story .separation-card{padding:22px}
.service-story .story-final{padding:28px}
.service-story .story-final h2{font-size:27px}
.service-story .story-final p{font-size:11px}
.service-story .final-action>span{font-size:9px}}
@media(max-width:900px){.service-story{padding:0 6px}
.service-story .story-hero{gap:30px;min-height:0;padding:25px 0 38px}
.service-story h1:not(.story-tool-slot *){font-size:36px;letter-spacing:-1.3px}
.service-story .hero-lead{font-size:14px!important}
.service-story .hero-actions{gap:6px;margin-top:23px}
.service-story .story-button{font-size:12px;padding:12px 16px;min-height:46px}
.service-story .story-demo-link{font-size:11px;min-height:38px}
.service-story .hero-reassurance{gap:8px;margin-top:20px}
.service-story .hero-reassurance span{font-size:9px}
.service-story .hero-access{font-size:10px!important}
.service-story .product-stage{padding-inline:0}
.service-story .saved-note{right:8px;top:-18px;font-size:8px;padding:8px 11px}
.service-story .product-titlebar{padding:17px 13px 13px}
.service-story .product-titlebar strong{font-size:11px}
.service-story .example-label{font-size:8px}
.service-story .demo-tabs{margin-inline:13px}
.service-story .demo-editor{margin-inline:13px;padding:14px}
.service-story .demo-title{font-size:14px}
.service-story #demo-text{font-size:11px;height:160px;min-height:160px}
.service-story .demo-window-bottom{padding-inline:13px}
.service-story .demo-create{font-size:10px!important}
.service-story .demo-feedback{font-size:8px}
.service-story .story-principles{gap:12px;padding:21px 0}
.service-story .story-principles>div{gap:9px}
.service-story .story-principles strong{font-size:11px}
.service-story .story-principles p>span{font-size:9px}
.service-story .principle-icon{width:32px;height:32px}
.service-story .principle-icon svg{width:17px;height:17px}
.service-story .story-section{margin:60px 0}
.service-story .section-intro{gap:20px}
.service-story .section-intro>p{font-size:11px;max-width:240px}
.service-story h2:not(.story-tool-slot *){font-size:28px}
.service-story .use-case{padding:19px 14px 0}
.service-story .use-case h3{font-size:15px}
.service-story .use-case p{font-size:11px}
.service-story .case-number{font-size:7px;right:12px;top:29px}
.service-story .case-icon{width:31px;height:31px}
.service-story .case-icon svg{width:18px;height:18px}
.service-story .case-snippet{padding:13px}
.service-story .case-snippet b{font-size:8px}
.service-story .workflow{gap:20px}
.service-story .workflow p{font-size:11px}
.service-story .workflow h3{font-size:14px}
.service-story .workflow li:not(:last-child):after{right:-11px}
.service-story .capabilities-section{gap:28px}
.service-story .separation-card{padding:21px}
.service-story .separation-heading h3{font-size:15px}
.service-story .comparison-row{font-size:11px}
.service-story .control-note p{font-size:9px}
.service-story .capability-copy>p{font-size:12px}
.service-story .faq-section{gap:30px}
.service-story .story-faq summary{font-size:12px}
.service-story .story-final{padding:26px;margin-top:60px;gap:20px}
.service-story .story-final h2{font-size:26px}
.service-story .story-final p{font-size:11px}
.service-story .final-action>span{font-size:9px}
.service-story .related-grid{gap:12px}
.service-story .related-grid>a{padding:15px;gap:11px}}
@media(max-width:640px){.service-story{padding:0 1px}
.service-story .story-topline{padding-top:2px;padding-bottom:5px;gap:8px}
.service-story .story-breadcrumbs{font-size:9px;gap:6px}
.service-story .concept-mark{font-size:8px;padding:3px 6px}
.service-story .story-hero{grid-template-columns:1fr;gap:42px;padding-top:25px;padding-bottom:27px}
.service-story .story-eyebrow{font-size:10px}
.service-story h1:not(.story-tool-slot *){font-size:clamp(33px,7.9vw,45px);margin:18px 0;letter-spacing:-1.3px;line-height:1.1}
.service-story .hero-lead{font-size:14px!important;max-width:500px}
.service-story .hero-actions{gap:18px;margin-top:23px}
.service-story .hero-access{font-size:10px!important}
.service-story .hero-reassurance{margin-top:20px;gap:14px}
.service-story .hero-reassurance span{font-size:9px}
.service-story .product-stage{width:100%;max-width:460px;justify-self:center;padding:0 5px}
.service-story .product-window{border-radius:20px}
.service-story .saved-note{right:14px;top:-23px;font-size:9px;transform:rotate(3deg)}
.service-story .product-titlebar{padding:19px 16px 15px}
.service-story .product-titlebar strong{font-size:12px}
.service-story .demo-tabs{margin:0 16px 14px}
.service-story .demo-editor{margin:0 16px;padding:16px}
.service-story .demo-title{font-size:16px}
.service-story #demo-text{font-size:12px;height:166px;min-height:166px}
.service-story .demo-window-bottom{padding:14px 16px 16px}
.service-story .demo-create{font-size:11px!important;min-height:44px}
.service-story .demo-feedback{font-size:9px;margin-top:12px;min-height:30px}
.service-story .demo-tabs button{min-height:40px;padding:10px 2px!important}
.service-story .demo-title:not([readonly]),.service-story #demo-text:not([readonly]){font-size:16px}
.service-story .story-principles{grid-template-columns:1fr;gap:19px;padding:24px 0;margin-top:0}
.service-story .story-principles>div{gap:12px}
.service-story .principle-icon{width:36px;height:36px}
.service-story .story-principles strong{font-size:13px}
.service-story .story-principles p>span{font-size:11px}
.service-story .story-section-nav{gap:20px;padding-top:18px}
.service-story .story-section-nav a{font-size:10px;min-height:36px}
.service-story .story-section{margin:49px 0;scroll-margin-top:27px}
.service-story .section-intro{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:22px}
.service-story h2:not(.story-tool-slot *){font-size:28px;letter-spacing:-.8px}
.service-story .section-intro>p{font-size:13px;max-width:100%}
.service-story .section-intro>p br{display:none}
.service-story .section-kicker{font-size:9px;margin-bottom:11px}
.service-story .use-cases{grid-template-columns:1fr;gap:14px}
.service-story .use-case{padding:23px 22px 0;border-radius:20px}
.service-story .case-icon{width:37px;height:37px;margin-bottom:17px}
.service-story .case-icon svg{width:20px;height:20px}
.service-story .case-number{font-size:8px;right:21px;top:37px}
.service-story .use-case h3{font-size:19px}
.service-story .use-case p{font-size:13px;margin:11px 0 22px}
.service-story .case-snippet{padding:15px;min-height:103px;max-width:none}
.service-story .case-snippet>span{font-size:11px}
.service-story .case-snippet b{font-size:10px}
.service-story .section-note{font-size:10px!important;margin-top:12px!important}
.service-story .workflow{grid-template-columns:1fr;gap:25px;margin-top:0;padding-left:52px}
.service-story .workflow li{min-height:104px}
.service-story .step-index{position:absolute;left:-52px;top:0;width:33px;height:33px;border-radius:11px;font-size:11px}
.service-story .workflow li:not(:last-child):before{left:-36px;top:46px;bottom:-9px;width:0;right:auto;border-top:0;border-left:1px solid var(--story-line)}
.service-story .workflow li:not(:last-child):after{display:none}
.service-story .workflow h3{font-size:16px;padding-top:5px}
.service-story .workflow p{font-size:13px}
.service-story .inline-action{font-size:12px}
.service-story .capabilities-section{grid-template-columns:1fr;gap:26px}
.service-story .capability-copy>p{font-size:13px;max-width:none}
.service-story .capability-list{gap:21px;margin-top:24px}
.service-story .capability-list strong{font-size:14px}
.service-story .capability-list p{font-size:12px}
.service-story .capability-list li>span{width:33px;height:33px}
.service-story .separation-card{padding:22px}
.service-story .separation-heading h3{font-size:17px}
.service-story .comparison-head{font-size:9px}
.service-story .comparison-row{font-size:12px;padding:15px 0}
.service-story .control-note p{font-size:11px}
.service-story .faq-section{grid-template-columns:1fr;gap:23px;padding-top:0}
.service-story .faq-intro>p{max-width:none;font-size:13px;margin-top:15px}
.service-story .story-faq summary{font-size:13px;padding:19px 0;min-height:64px}
.service-story .story-faq details p{font-size:12px}
.service-story .story-final{flex-direction:column;align-items:flex-start;padding:27px 22px;gap:25px;border-radius:22px;margin-top:50px}
.service-story .story-final h2{font-size:29px}
.service-story .story-final p{font-size:13px}
.service-story .story-final .section-kicker{font-size:8px;max-width:250px;line-height:1.7}
.service-story .final-action{width:100%}
.service-story .final-action .story-button{width:100%;min-height:49px;font-size:13px}
.service-story .final-action>span{font-size:10px}
.service-story .related-section{margin-top:32px}
.service-story .related-grid{grid-template-columns:1fr;gap:11px;margin-top:16px}
.service-story .related-grid>a{padding:17px}
.service-story .related-grid h3{font-size:14px}
.service-story .related-grid p{font-size:11px}
.service-story .story-footer{margin-top:28px;font-size:9px;flex-direction:column;align-items:flex-start;gap:8px}}
@media(max-width:359px){.service-story .hero-actions{gap:10px}
.service-story .story-button{font-size:11px;padding:12px 14px}
.service-story .story-demo-link{font-size:10px}
.service-story .hero-reassurance{gap:10px}
.service-story .hero-reassurance span{font-size:8px}
.service-story .demo-editor{padding:13px}
.service-story .demo-title{font-size:14px!important}
.service-story .demo-platforms{gap:4px}
.service-story .demo-platforms>span:first-child{font-size:8px}
.service-story .platform-chip{font-size:8px;padding:4px}
.service-story .product-titlebar strong{font-size:11px}
.service-story .saved-note{font-size:8px}
.service-story h2:not(.story-tool-slot *){font-size:26px}
.service-story .comparison-head{font-size:8px}
.service-story .comparison-row{font-size:11px}}

/* Decorative light stays inside its section and never creates horizontal scrolling. */
.service-story .story-hero{overflow-x:clip;overflow-y:visible}
.service-story .demo-feedback{min-height:36px}
[data-theme=light] .service-story .product-window{background:linear-gradient(150deg,#d6c9ff60,transparent 55%),var(--story-surface);box-shadow:0 24px 60px #4c348719,inset 0 1px 0 #fff8}
[data-theme=light] .service-story .saved-note{box-shadow:0 10px 30px #4c348717}
.service-story .story-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.service-story .capability-table{width:100%;table-layout:fixed;border-collapse:collapse}
.service-story .capability-table th,.service-story .capability-table td{padding:15px 3px;border-bottom:1px solid var(--story-line);vertical-align:middle}
.service-story .capability-table th:first-child{width:46%;text-align:left;padding-left:0}
.service-story .capability-table thead th{font-size:10px;line-height:1.4;font-weight:500;color:var(--story-lilac);padding-top:0}
.service-story .capability-table thead th:first-child{color:var(--muted)}
.service-story .capability-table tbody th{font-size:13px;font-weight:400;color:var(--muted)}
.service-story .capability-table td{text-align:center;color:var(--muted);font-size:14px}
.service-story .capability-table td.yes{color:var(--story-mint);font-size:17px}
@media(max-width:480px){.service-story .capability-table thead th{font-size:9px}
.service-story .capability-table tbody th{font-size:12px}}
@media(min-width:901px){.service-story .section-intro>p{font-size:14px;max-width:350px}
.service-story .use-case h3{font-size:18px}
.service-story .use-case p,.service-story .workflow p{font-size:13px}
.service-story .workflow h3{font-size:16px}
.service-story .capability-copy>p{font-size:14px}
.service-story .capability-list strong{font-size:14px}
.service-story .capability-list p{font-size:13px}
.service-story .story-faq summary{font-size:14px}
.service-story .story-faq details p{font-size:13px}
.service-story .faq-intro>p{font-size:13px}
.service-story .comparison-row{font-size:13px}
.service-story .related-grid h3{font-size:14px}
.service-story .related-grid p{font-size:12px}
.service-story .story-final p{font-size:13px}
.service-story .story-principles strong{font-size:13px}
.service-story .story-principles p>span{font-size:11px}
.service-story #demo-text{font-size:13px;height:180px;min-height:180px}
.service-story .demo-title{font-size:17px}
.service-story .demo-platforms,.service-story .platform-chip{font-size:10px}
.service-story .demo-create{font-size:12px!important}
.service-story .demo-feedback{font-size:10px}
.service-story .story-section-nav a{font-size:12px}}
@media(prefers-reduced-motion:reduce){.service-story *,.service-story *:before,.service-story *:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Production variants share the approved story layout, with isolated local examples. */
.service-story [hidden]{display:none!important}
.service-story .story-button{white-space:normal;text-align:center;max-width:100%}
.service-story .story-tool-slot{margin:35px 0 55px;min-width:0}
.service-story .story-tool-slot .guest-tool{margin:0;scroll-margin-top:38px}
.service-story .story-example-stage{min-width:0}
.service-story .story-example-window{overflow:hidden}
.service-story .story-example-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 20px 15px;padding:4px;border:1px solid var(--story-line);border-radius:13px;background:var(--story-paper)}
.service-story .story-example-tabs button{display:flex;justify-content:center;align-items:center;min-height:40px;min-width:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:11px;font-weight:500;padding:8px 5px;line-height:1.2;box-shadow:none;transition:background-color .18s ease,color .18s ease}
.service-story .story-example-tabs button[aria-selected=true]{background:#9c84ef22;color:var(--text);box-shadow:inset 0 0 0 1px #b398fb24}
.service-story .story-example-tabs button:hover{color:var(--text);background-color:#9980db16}
.service-story .story-example-tabs button:focus-visible{outline-offset:1px}
.service-story .story-example-panels{margin:0 20px;border:1px solid var(--story-line);border-radius:14px;background:var(--story-paper);min-width:0}
.service-story .story-example-panel{padding:19px;min-height:303px;min-width:0}
.service-story .story-example-panel .demo-editor-top{align-items:center;margin-bottom:18px;gap:10px}
.service-story .story-example-panel .demo-editor-top svg{width:17px;height:17px;color:var(--story-lilac)}
.service-story .story-example-panel h2{font-size:20px;letter-spacing:-.45px;line-height:1.35;overflow-wrap:anywhere}
.service-story .story-example-rows{margin:17px 0 0}
.service-story .story-example-rows>div{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:15px 0;border-top:1px solid var(--story-line);font-size:12px;line-height:1.5}
.service-story .story-example-rows dt{color:var(--muted);flex:0 0 32%}
.service-story .story-example-rows dd{margin:0;flex:1;overflow-wrap:anywhere;color:var(--text)}
.service-story .story-example-code{max-width:100%;min-height:182px;margin:20px 0 0;padding:16px;border:1px solid var(--story-line);border-radius:10px;background:var(--story-surface);font:11px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--story-lilac)}
.service-story .story-example-code code{font:inherit}
.service-story .story-example-hint{display:flex;align-items:center;gap:11px;padding:19px 22px;color:var(--muted)}
.service-story .story-example-hint svg{width:18px;height:18px;color:var(--story-lilac)}
.service-story .story-example-hint p{font-size:11px;line-height:1.6}
.service-story .story-example-caption{text-align:center;font-size:11px;line-height:1.65;max-width:440px;margin:16px auto 0;padding:0 9px;color:var(--muted);display:block;min-height:40px}
.service-story .story-scope dl{margin:0}
.service-story .story-scope dl>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:18px;padding:17px 0;border-top:1px solid var(--story-line)}
.service-story .story-scope dt{font-size:12px;line-height:1.7;font-weight:600;color:var(--story-lilac)}
.service-story .story-scope dd{font-size:13px;line-height:1.7;color:var(--muted);margin:0;overflow-wrap:anywhere}
.service-story .section-intro>div{max-width:65%}
.service-story .related-grid a>div{min-width:0}
.service-story .related-grid h3,.service-story .related-grid p{overflow-wrap:anywhere}
@media(max-width:1280px) and (min-width:901px){.service-story .story-example-tabs{margin-inline:13px}
.service-story .story-example-panels{margin-inline:13px}
.service-story .story-example-panel{padding:15px;min-height:315px}
.service-story .story-example-rows>div{font-size:11px;gap:9px}
.service-story .story-example-hint{padding:17px}
.service-story .story-example-tabs button{font-size:10px}
.service-story .story-example-panel h2{font-size:18px}
.service-story .story-scope dl>div{grid-template-columns:70px minmax(0,1fr);gap:12px}}
@media(max-width:900px){.service-story .story-example-tabs{margin-inline:13px}
.service-story .story-example-panels{margin-inline:13px}
.service-story .story-example-panel{padding:15px;min-height:320px}
.service-story .story-example-panel h2{font-size:18px}
.service-story .story-example-rows>div{font-size:11px;gap:8px}
.service-story .story-example-tabs button{font-size:10px}
.service-story .story-example-hint{padding:17px}
.service-story .story-example-code{font-size:10px;padding:12px}
.service-story .story-scope dl>div{grid-template-columns:70px minmax(0,1fr);gap:12px}}
@media(max-width:640px){.service-story .section-intro>div{max-width:none}
.service-story .story-example-tabs{margin-inline:16px}
.service-story .story-example-panels{margin-inline:16px}
.service-story .story-example-panel{padding:16px;min-height:307px}
.service-story .story-example-panel h2{font-size:20px}
.service-story .story-example-rows>div{font-size:12px;gap:12px}
.service-story .story-example-tabs button{font-size:11px;min-height:42px}
.service-story .story-example-hint{padding:17px 20px}
.service-story .story-example-caption{font-size:10px}
.service-story .story-scope dl>div{grid-template-columns:75px minmax(0,1fr);gap:14px}
.service-story .story-tool-slot{margin:25px 0 40px}
.service-story .story-tool-slot .guest-tool{padding:20px 16px}}
@media(max-width:359px){.service-story .story-example-tabs{margin-inline:10px}
.service-story .story-example-panels{margin-inline:10px}
.service-story .story-example-panel{padding:13px;min-height:330px}
.service-story .story-example-tabs button{font-size:10px}
.service-story .story-example-rows>div{font-size:11px}}

/* Full catalog illustrations punctuate the story; their complete 2:1 frame is retained. */
.service-story .story-visual{container-type:inline-size}
.service-story .story-visual-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center;gap:clamp(24px,3vw,46px);margin:0}
.service-story .story-visual-frame{min-width:0;overflow:hidden;border:1px solid var(--story-line);border-radius:24px;background:var(--story-paper);box-shadow:0 18px 42px #06071924}
.service-story .story-visual-frame img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain}
.service-story .story-visual-copy{min-width:0;padding:8px 0}
.service-story .story-visual-label{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.service-story .story-visual-label>span:first-child{display:grid;place-items:center;width:39px;height:39px;flex:none;border:1px solid var(--story-line);border-radius:12px;color:var(--story-lilac);background:color-mix(in srgb,var(--story-lilac) 9%,var(--story-paper))}
.service-story .story-visual-label svg{width:20px;height:20px}
.service-story .story-visual-label .section-kicker{margin:0;line-height:1.6}
.service-story .story-visual h2{font-size:clamp(25px,2.15vw,34px);line-height:1.2;letter-spacing:-.9px;text-wrap:balance}
.service-story .story-visual-text{margin-top:18px!important;font-size:14px;line-height:1.75;color:var(--muted)}
.service-story .story-visual-note{margin-top:20px!important;padding-top:17px;border-top:1px solid var(--story-line);font-size:11px;line-height:1.7;color:var(--story-soft)}
@container(max-width:660px){.service-story .story-visual-grid{grid-template-columns:minmax(0,1fr);gap:23px}
.service-story .story-visual-frame{border-radius:21px}
.service-story .story-visual-copy{padding:0 2px}
.service-story .story-visual h2{font-size:28px}
.service-story .story-visual-label{margin-bottom:14px}
.service-story .story-visual-text{margin-top:14px!important}
.service-story .story-visual-note{margin-top:17px!important}}
@media(max-width:359px){.service-story .story-visual h2{font-size:25px}}

/* Additional planner illustration; every style stays within this section. */
.service-story .planner-date-demo{--planner-demo-card-height:108px}
.service-story .planner-date-demo .planner-demo-workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(270px,.85fr);gap:18px;align-items:stretch;min-width:0}
.service-story .planner-date-demo .planner-demo-calendar,.service-story .planner-date-demo .planner-demo-editor{min-width:0;border:1px solid var(--story-line);border-radius:22px;background:var(--panel)}
.service-story .planner-date-demo .planner-demo-calendar{padding:22px;background:radial-gradient(ellipse at 40% 0,#956cff12,transparent 70%),var(--panel)}
.service-story .planner-date-demo .planner-demo-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;min-height:24px}
.service-story .planner-date-demo .planner-demo-topline>span:first-child{display:flex;align-items:center;gap:9px;color:var(--text);font-size:13px;font-weight:600}
.service-story .planner-date-demo .planner-demo-topline svg{width:19px;height:19px;color:var(--story-lilac)}
.service-story .planner-date-demo .planner-demo-example{font-size:10px;color:var(--muted);border:1px solid var(--story-line);border-radius:8px;padding:4px 8px}
.service-story .planner-date-demo .planner-demo-board{position:relative;min-width:0}
.service-story .planner-date-demo .planner-demo-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.service-story .planner-date-demo .planner-demo-lane{min-width:0;padding:10px 8px;border:1px solid var(--story-line);border-radius:14px;background:var(--story-paper);transition:border-color .18s ease,background-color .18s ease}
.service-story .planner-date-demo .planner-demo-lane.is-selected{border-color:#a888ed5c;background:linear-gradient(#a181f610,#a181f604),var(--story-paper)}
.service-story .planner-date-demo .planner-demo-lane h3{display:flex;flex-direction:column;gap:2px;justify-content:center;min-height:36px;line-height:1.45;text-align:center;margin:0;font-weight:500;letter-spacing:0}
.service-story .planner-date-demo .planner-demo-lane h3 span{font-size:10px;color:var(--muted)}
.service-story .planner-date-demo .planner-demo-lane h3 strong{font-size:11px;color:var(--text);font-weight:600}
.service-story .planner-date-demo .planner-demo-slot{height:var(--planner-demo-card-height);margin-top:10px;border:1px dashed var(--story-line);border-radius:10px}
.service-story .planner-date-demo .planner-demo-card{position:absolute;z-index:2;left:9px;top:57px;width:calc((100% - 16px)/3 - 18px);height:var(--planner-demo-card-height);padding:12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:5px;border:1px solid #ae8bff70;border-radius:10px;background:linear-gradient(145deg,#7354d5,#56449b);box-shadow:0 8px 22px #34226325;color:#fff;transform:none;pointer-events:none}
.service-story .planner-date-demo .planner-demo-time{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:10px;line-height:1;color:#ede7ff}
.service-story .planner-date-demo .planner-demo-time i{width:5px;height:5px;border-radius:50%;background:#bfafe9}
.service-story .planner-date-demo .planner-demo-card>strong{font-size:13px;line-height:1.3;font-weight:600;letter-spacing:-.2px;overflow-wrap:anywhere}
.service-story .planner-date-demo .planner-demo-draft{font-size:9px;line-height:1.4;padding:2px 5px;border:1px solid #d4bcff30;border-radius:5px;background:#f3e7ff13;color:#f4efff}
.service-story .planner-date-demo .planner-demo-calendar-note{font-size:12px;line-height:1.7;color:var(--muted);margin:22px 2px 0;max-width:420px}
.service-story .planner-date-demo .planner-demo-editor{padding:22px;background:linear-gradient(135deg,#a58add0a,transparent),var(--panel)}
.service-story .planner-date-demo .planner-demo-editor-head{display:flex;align-items:center;gap:12px;margin-bottom:22px;min-width:0}
.service-story .planner-date-demo .planner-demo-editor-symbol{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid var(--story-line);border-radius:12px;color:var(--story-lilac);background:#9372e412}
.service-story .planner-date-demo .planner-demo-editor-symbol svg{width:19px;height:19px}
.service-story .planner-date-demo .planner-demo-editor-kicker{display:block;margin-bottom:4px;font-size:8px;letter-spacing:.09em;color:var(--muted)}
.service-story .planner-date-demo .planner-demo-editor-head h3{font-size:14px;font-weight:600;line-height:1.4;letter-spacing:-.2px;margin:0}
.service-story .planner-date-demo .planner-demo-choice{min-width:0;padding:0;margin:0 0 15px;border:0}
.service-story .planner-date-demo .planner-demo-choice legend{padding:0;margin-bottom:8px;font-size:11px;color:var(--muted)}
.service-story .planner-date-demo .planner-demo-day-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.service-story .planner-date-demo .planner-demo-day-buttons button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:57px;padding:10px 12px;border:1px solid var(--story-line);border-radius:11px;background:var(--story-paper);color:var(--muted);text-align:left;transform:none;box-shadow:none;line-height:1.4;transition:border-color .18s ease,background-color .18s ease,color .18s ease}
.service-story .planner-date-demo .planner-demo-day-buttons button span{font-size:10px}
.service-story .planner-date-demo .planner-demo-day-buttons button strong{font-size:12px;font-weight:600}
.service-story .planner-date-demo .planner-demo-day-buttons button[aria-pressed=true]{border-color:#9e7aef88;background:#9372e419;color:var(--story-lilac)}
.service-story .planner-date-demo .planner-demo-day-buttons button:hover:not(:disabled){border-color:var(--story-lilac);background:#9372e41c}
.service-story .planner-date-demo .planner-demo-date-field{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border:1px solid var(--story-line);border-radius:11px;background:var(--story-paper);margin-bottom:16px}
.service-story .planner-date-demo .planner-demo-date-field span{font-size:10px;color:var(--muted)}
.service-story .planner-date-demo .planner-demo-date-field strong{font-size:13px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.service-story .planner-date-demo .planner-demo-actions{display:flex;flex-direction:column;gap:5px}
.service-story .planner-date-demo .planner-demo-save{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:11px 15px;border:1px solid #9272fc;border-radius:12px;background:linear-gradient(120deg,#7858f1,#6442d8);color:#fff;font-size:12px;font-weight:650;line-height:1.4;transform:none;box-shadow:inset 0 1px 0 #ffffff18}
.service-story .planner-date-demo .planner-demo-save:hover:not([aria-disabled=true]){background:linear-gradient(120deg,#8666fc,#7250e5);transform:none}
.service-story .planner-date-demo .planner-demo-save[aria-disabled=true]{opacity:.6;cursor:default}
.service-story .planner-date-demo .planner-demo-save>span{font-size:17px;line-height:1}
.service-story .planner-date-demo .planner-demo-replay{min-height:36px;border:0;padding:8px;background:transparent;color:var(--story-lilac);font-size:11px;line-height:1.4;transform:none;box-shadow:none}
.service-story .planner-date-demo .planner-demo-replay:hover:not(:disabled){background:#9372e40b;transform:none}
.service-story .planner-date-demo .planner-demo-replay:disabled{opacity:.38;cursor:default}
.service-story .planner-date-demo .planner-demo-feedback{min-height:57px;margin:11px 0 0;font-size:11px;line-height:1.7;color:var(--muted)}
.service-story .planner-date-demo .planner-demo-disclosure{margin:15px 2px 0;max-width:780px;font-size:11px;line-height:1.8;color:var(--muted)}
.service-story .planner-date-demo button:focus-visible{outline:2px solid var(--story-lilac);outline-offset:3px}
@media(max-width:1100px){.service-story .planner-date-demo .planner-demo-workspace{grid-template-columns:minmax(0,1fr);gap:14px}.service-story .planner-date-demo .planner-demo-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px}.service-story .planner-date-demo .planner-demo-editor-head{grid-column:1/-1;margin-bottom:17px}.service-story .planner-date-demo .planner-demo-choice{grid-column:1}.service-story .planner-date-demo .planner-demo-date-field{grid-column:1;margin-bottom:0}.service-story .planner-date-demo .planner-demo-actions{grid-column:2;grid-row:2}.service-story .planner-date-demo .planner-demo-feedback{grid-column:2;grid-row:3;margin-top:0;align-self:start}.service-story .planner-date-demo .planner-demo-calendar-note{max-width:none}}
@media(max-width:480px){.service-story .planner-date-demo .planner-demo-calendar{padding:16px 12px}.service-story .planner-date-demo .planner-demo-topline{margin-bottom:18px}.service-story .planner-date-demo .planner-demo-card{padding:10px 7px}.service-story .planner-date-demo .planner-demo-card>strong{font-size:11px}.service-story .planner-date-demo .planner-demo-lane h3 strong{font-size:10px}.service-story .planner-date-demo .planner-demo-editor{display:block;padding:20px 17px}.service-story .planner-date-demo .planner-demo-date-field{margin-bottom:14px}.service-story .planner-date-demo .planner-demo-feedback{margin-top:10px;min-height:57px}.service-story .planner-date-demo .planner-demo-calendar-note{font-size:11px;margin-top:18px}.service-story .planner-date-demo .planner-demo-disclosure{font-size:10px}}
@media(prefers-reduced-motion:reduce){.service-story .planner-date-demo *{transition:none!important;animation:none!important}}