/* Stage 4: the accepted Product language applied to home and use cases. */
.marketing-page{--ink:#233142;--blue:#245d96;--muted:#5c6c7e}
.marketing-page .product-chapter{scroll-margin-top:95px}
.marketing-page .scene-art{aspect-ratio:var(--scene-ratio);height:auto}
.marketing-page .scene-art img{height:100%;aspect-ratio:auto;object-fit:cover}
.marketing-page .scene-art [data-sketch]{height:100%}
.marketing-page .scene-stage>.chapter-intro{pointer-events:auto}
.marketing-page .scene-stage .chapter-intro h1{font-size:clamp(40px,4.25vw,68px);font-weight:500;line-height:1.07;letter-spacing:-.055em}
.marketing-page .scene-stage .chapter-intro h2{font-size:clamp(38px,3.9vw,62px)}
.marketing-page .scene-stage .scene-lead{max-width:440px;font-size:clamp(17px,1.4vw,21px)}
.marketing-page .marketing-hero{padding-top:20px}
.marketing-page .marketing-hero .scene-stage>.chapter-intro{top:10%;width:42%}
.marketing-page .marketing-hero .scene-lead{font-size:clamp(17px,1.35vw,20px);line-height:1.65}
.marketing-page .marketing-hero .product-actions{margin-top:25px;gap:24px}
.marketing-page .marketing-hero .scene-art{mask-image:linear-gradient(transparent,#000 4%,#000 90%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 4%,#000 90%,transparent)}
.marketing-page .scene-train-story .scene-art{aspect-ratio:1.9}
.marketing-page .scene-train-story img{object-position:50% 28%}
.marketing-page .copy-right .scene-stage>.chapter-intro{left:57%;width:36%;top:8%}
.marketing-page .scene-cloud-story .scene-stage>.chapter-intro{top:6%;width:47%}
.marketing-page .scene-education-story .scene-stage>.chapter-intro{top:6%;width:41%}
.marketing-page .scene-closing-story .scene-stage>.chapter-intro{top:16%;width:47%}
.marketing-page .scene-closing-story .scene-art{aspect-ratio:1672/941}
.marketing-page .copy-above .scene-stage>.chapter-intro{position:relative;top:auto;left:auto;width:auto;padding:0 6.5%;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;margin-bottom:-15px}
.marketing-page .copy-above .scene-lead{margin-top:35px}
.marketing-page .scene-education-story.marketing-hero .scene-art:after,.marketing-page .scene-cloud-story.marketing-hero .scene-art:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 56% 48% at 20% 12%,#fff 0%,#ffffffb3 40%,#ffffff00 100%);pointer-events:none}


.marketing-page .chapter-reading{max-width:1000px}
.workspace-model{max-width:700px;margin:42px auto 20px;padding:0 24px}
.workspace-model .route-track{height:125px}
.workspace-model figcaption{font-size:12px;color:var(--product-muted);text-align:center;line-height:1.6}
.marketing-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px;margin:45px 6.5% 20px}
.marketing-sample{display:block;width:96px;height:46px;color:var(--product-blue);margin-bottom:24px}
.marketing-points h3,.requirements-body h3,.responsibility-grid h3,.connection-steps h3{font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.025em;margin:0 0 14px}
.marketing-points p,.requirements-body p,.responsibility-grid p,.connection-steps p{font-size:15px;color:var(--product-muted);line-height:1.7;margin:0}
.marketing-points .product-link{margin-top:14px}
.connection-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px;margin:42px 6.5% 25px;padding:0}
.connection-steps li{display:flex;align-items:flex-start;gap:18px}
.step-index{font-size:12px;font-variant-numeric:tabular-nums;color:var(--product-blue);padding-top:5px}
.requirements-body{display:grid;grid-template-columns:.85fr 1.3fr;gap:70px;margin:40px 6.5% 20px}
.requirements-body .system-summary p{line-height:2}
.requirements-body .product-link{margin-top:14px}
.requirements-body ul{list-style:none;margin:0;padding:0}
.requirements-body li{position:relative;padding:0 0 0 25px;margin-bottom:20px;color:var(--product-muted);font-size:16px;line-height:1.7}
.requirements-body li:before{content:'';position:absolute;top:12px;left:0;width:10px;height:1px;background:#c97832}
.marketing-faq{display:grid;grid-template-columns:1fr 1.25fr;gap:70px;padding:35px 6.5% 20px!important}
.marketing-faq>.chapter-intro{display:block;padding:0;margin:0}
.marketing-faq .chapter-explanation{padding-top:22px}
.marketing-answers details{border-bottom:1px solid #e0e8ee}
.marketing-answers summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;min-height:64px;padding:18px 0;font-size:17px;line-height:1.5}
.marketing-answers summary::-webkit-details-marker{display:none}
.marketing-answers summary:after{content:'+';color:var(--product-blue);font-size:22px;font-weight:400}
.marketing-answers details[open] summary:after{content:'−'}
.marketing-answers details>div{padding:0 24px 23px 0}
.marketing-answers p{font-size:15px;color:var(--product-muted);line-height:1.7}
.marketing-answers .product-link{display:flex;max-width:max-content;margin-top:8px}
.responsibility-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin:40px 6.5% 20px}
.responsibility-grid .product-link{margin-top:12px}
.product-page .scope-note{font-size:13px;color:var(--product-muted);line-height:1.7;margin:30px 6.5% 10px;max-width:820px}
.case-ending{padding:35px 6.5% 70px!important}
.case-ending h2{font-size:clamp(38px,4.4vw,64px);font-weight:500;line-height:1.08;letter-spacing:-.05em;margin:0 0 25px}
.case-ending>p:not(.eyebrow){max-width:650px;font-size:18px;color:var(--product-muted);line-height:1.7}
.ending-links{display:flex;gap:30px;flex-wrap:wrap;margin-top:23px}
@media(min-width:901px) and (max-width:1150px){.marketing-page .scene-stage .chapter-intro h1{font-size:42px}.marketing-page .scene-stage .chapter-intro h2{font-size:40px}.marketing-page .scene-stage .scene-lead{font-size:16px}.marketing-page .marketing-hero .product-actions{gap:14px}.marketing-page .marketing-hero .button{padding:15px 17px;font-size:14px}.marketing-points,.connection-steps{gap:30px}.marketing-faq{gap:40px}}
@media(max-width:900px){.marketing-page .scene-stage>.chapter-intro,.marketing-page .copy-right .scene-stage>.chapter-intro,.marketing-page .marketing-hero .scene-stage>.chapter-intro,.marketing-page .copy-above .scene-stage>.chapter-intro{position:relative;top:auto;left:auto;width:auto;padding:0 24px;display:block;margin:0;max-width:700px}.marketing-page .marketing-hero{padding-top:30px}.marketing-page .scene-stage .chapter-intro h1{font-size:clamp(40px,6.3vw,58px)}.marketing-page .scene-stage .chapter-intro h2{font-size:43px}.marketing-page .scene-stage .scene-lead{font-size:18px;max-width:560px;margin-top:20px}.marketing-page .scene-train-story .scene-art{aspect-ratio:1536/1024}.marketing-page .marketing-hero .scene-art:after{display:none}.marketing-page .scene-stage .product-scene{margin-top:18px}.marketing-page .copy-above .scene-lead{margin-top:20px}.marketing-points{margin:35px 24px 15px;gap:28px}.marketing-points h3,.connection-steps h3{font-size:20px}.connection-steps{gap:28px;margin:35px 24px 20px;grid-template-columns:1fr}.connection-steps p{max-width:620px}.requirements-body{margin:30px 24px 15px;gap:35px}.responsibility-grid{margin:30px 24px 15px;gap:35px}.product-page .scope-note{margin:25px 24px 10px}.marketing-faq{padding:25px 24px!important;gap:30px}.marketing-faq .chapter-intro h2{font-size:38px}.case-ending{padding:25px 24px 50px!important}.ending-links{gap:20px}}
@media(max-width:600px){.marketing-page .scene-stage .chapter-intro h1{font-size:43px}.marketing-page .scene-stage .chapter-intro h2{font-size:38px}.marketing-page .scene-stage .scene-lead{font-size:17px}.marketing-page .marketing-hero .scene-stage .scene-lead{font-size:17px}.marketing-points{grid-template-columns:1fr;gap:34px}.marketing-points h3{font-size:22px}.marketing-sample{margin-bottom:18px}.workspace-model{margin-top:25px}.marketing-faq{grid-template-columns:1fr;gap:16px}.requirements-body{grid-template-columns:1fr;gap:28px}.responsibility-grid{grid-template-columns:1fr;gap:30px}.marketing-answers summary{font-size:16px}.marketing-answers details>div{padding-right:0}.case-ending>p:not(.eyebrow){font-size:17px}.ending-links{display:block}.ending-links .product-link{display:flex;max-width:max-content}.marketing-page .chapter-reading{margin-top:14px}}
@media(max-width:360px){.marketing-page .scene-stage .chapter-intro h1{font-size:37px}.marketing-page .scene-stage .chapter-intro h2,.marketing-faq .chapter-intro h2{font-size:34px}.marketing-page .product-actions{gap:17px}}
/* Keep copy in the negative space deliberately composed into each scene. */
.hero-reading{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;margin:20px 6.5% 10px}
.product-page .hero-reading>p{font-size:18px;line-height:1.7;color:var(--product-muted);max-width:620px}
.hero-reading .product-actions{margin:0;justify-content:flex-end}
@media(min-width:901px){
 .marketing-page .scene-train-story .scene-art{height:clamp(422px,calc(100svh - 298px),672px);aspect-ratio:auto}
 .marketing-page .scene-train-story .scene-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 53% 90% at 7% 38%,#fff 0%,#fffffff2 50%,#ffffff80 72%,#ffffff00 100%)}
 .marketing-page .scene-train-story .scene-lead{max-width:380px}
 .marketing-page .scene-cloud-story .scene-stage>.chapter-intro{left:34%;width:62%;top:5%;text-align:center}
 .marketing-page .scene-cloud-story .scene-lead{margin-left:auto;margin-right:auto}
 .marketing-page .scene-cloud-story.marketing-hero .scene-art:after,.marketing-page .scene-education-story.marketing-hero .scene-art:after{display:none}
}
@media(max-width:900px){.hero-reading{margin:20px 24px 10px;display:block}.product-page .hero-reading>p{font-size:16px}.hero-reading .product-actions{margin-top:22px;justify-content:flex-start}}
@media(max-width:900px){.marketing-page .marketing-scene .scene-stage>.chapter-intro{position:relative;top:auto;left:auto;width:auto;max-width:700px;padding:0 24px;margin:0;text-align:left}}

/* Keep the original home hero signature: thread, motto and three destinations. */
.home-page .hero-tail{margin:-12px 4.5% 28px;padding:28px 0 2px}
.home-page .two-places{position:relative;z-index:1;display:table;margin:0 auto 17px;padding:0 18px;font-size:17px;line-height:1.5;color:var(--product-muted);background:#fff}
.home-page .two-places span{color:var(--ink)}
.home-page .hero-use-cases a{color:var(--ink);transition:color 150ms ease}
.home-page .hero-use-cases a:hover{color:var(--product-blue)}
.system-summary .supported-systems{display:grid;gap:16px;margin:23px 0}
.system-summary .supported-systems li{display:flex;align-items:center;gap:15px;padding:0;margin:0}
.system-summary .supported-systems li:before{display:none}
.supported-systems .platform-mark{flex:0 0 26px;width:26px;height:28px;margin:0;color:#3b4b5d}
.supported-systems strong,.supported-systems small{display:block}
.supported-systems strong{font-size:16px;font-weight:500;line-height:1.4;color:var(--ink)}
.supported-systems small{font-size:13px;line-height:1.5;color:var(--product-muted)}
@media(max-width:900px){.home-page .hero-tail{margin:-5px 24px 0;padding-top:28px}.home-page .two-places{font-size:15px;margin-bottom:16px}.home-page .hero-use-cases{gap:12px}.home-page .hero-use-cases a{font-size:12px;line-height:1.4;text-align:center;padding:15px 0;white-space:normal}.home-page .hero-use-cases svg{flex-shrink:0}}
@media(max-width:360px){.home-page .hero-tail{margin-left:18px;margin-right:18px}.home-page .hero-use-cases{gap:8px}.home-page .hero-use-cases a{font-size:11px}}

@media(min-width:1601px){body{overflow-x:clip}main.home-page{overflow:visible}.home-page .marketing-hero .scene-stage>.product-scene{margin-right:calc((1600px - 100vw) / 2)}}

/* A trace of graphite remains at the mountain scene's fading edge. */
.marketing-page .scene-closing-story .scene-art .retained-pencil{opacity:.55;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mask-image:linear-gradient(110deg,#000 0%,#000 35%,rgba(0,0,0,.8) 40%,transparent 51%),radial-gradient(ellipse 15% 17% at 47% 89%,rgba(0,0,0,.8),transparent 100%);-webkit-mask-image:linear-gradient(110deg,#000 0%,#000 35%,rgba(0,0,0,.8) 40%,transparent 51%),radial-gradient(ellipse 15% 17% at 47% 89%,rgba(0,0,0,.8),transparent 100%)}

/* The train source ends at 84% of its canvas: fade before that edge,
   accounting for the vertically centred cover crop on desktop. */
.home-page .scene-train-story .scene-art{--train-fade-end:min(100%,calc(50% + max(34%,22.6667vw) - 3px));mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 calc(var(--train-fade-end) - 105px),transparent var(--train-fade-end));-webkit-mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 calc(var(--train-fade-end) - 105px),transparent var(--train-fade-end))}
@media(max-width:900px){.home-page .scene-train-story .scene-art{--train-fade-end:83.7%;mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 70%,transparent var(--train-fade-end));-webkit-mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 70%,transparent var(--train-fade-end))}}

/* Keep Cloud Workspace copy legible above the evening office. */
@media(min-width:901px){
.marketing-page .scene-cloud-story .scene-art:after,.marketing-page .scene-cloud-story.marketing-hero .scene-art:after{display:block;content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 45% 32% at 65% 7%,#fff 0%,#fff 52%,rgba(255,255,255,.94) 65%,rgba(255,255,255,.45) 82%,transparent 100%)}
}

/* Education copy stays clear of the curved photo boundary. */
@media(min-width:901px){.marketing-page .scene-education-story .scene-stage>.chapter-intro{top:1%}}

/* A little graphite remains on the photographed furniture after reveal. */
.marketing-page .scene-education-story .scene-art .education-pencil-residue{position:absolute;inset:0;width:100%;height:100%;opacity:.92;pointer-events:none;mask-image:radial-gradient(ellipse 33% 24% at 8% 92%,#000 0%,rgba(0,0,0,.85) 36%,transparent 100%),radial-gradient(ellipse 16% 33% at 0% 66%,#000 0%,rgba(0,0,0,.85) 30%,transparent 100%),radial-gradient(ellipse 17% 8% at 99% 49%,#000 0%,rgba(0,0,0,.8) 35%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 33% 24% at 8% 92%,#000 0%,rgba(0,0,0,.85) 36%,transparent 100%),radial-gradient(ellipse 16% 33% at 0% 66%,#000 0%,rgba(0,0,0,.85) 30%,transparent 100%),radial-gradient(ellipse 17% 8% at 99% 49%,#000 0%,rgba(0,0,0,.8) 35%,transparent 100%)}

/* An unfinished classroom drawing carries the scene into the white corner. */
.marketing-page .scene-education-story .scene-art .education-corner-sketch{position:absolute;inset:auto 0 0 auto;width:60%;height:60%;object-fit:contain;opacity:.55;mix-blend-mode:multiply;pointer-events:none;mask-image:radial-gradient(ellipse 35% 39% at 83% 76%,#000 25%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 35% 39% at 83% 76%,#000 25%,transparent 100%)}
