/* Illustrated feature stories use the existing AIOS palette and type. */
.feature-detail{--feature-tone:var(--pastel-lilac)}
.feature-peach{--feature-tone:var(--pastel-peach)}
.feature-mint{--feature-tone:var(--pastel-mint)}
.feature-rose{--feature-tone:var(--pastel-rose)}
.feature-blue{--feature-tone:var(--pastel-blue)}
.feature-detail>.container{max-width:1240px}
.feature-detail .detail-heading{max-width:none;margin:32px 0 56px}
.feature-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.feature-detail .eyebrow{margin-bottom:20px;color:var(--blue)}
.feature-detail h1{max-width:760px;text-wrap:balance}
.feature-detail .detail-intro{max-width:640px}
.feature-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.feature-jump{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px;font-weight:600}
.feature-example{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:36px 40px;background:var(--feature-tone);border-radius:var(--radius-md)}
.feature-example h2{font-size:28px;line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
.feature-example>p{font-size:19px;line-height:1.75}
.feature-detail .detail-layout{display:block;margin:48px 0 80px}
.feature-detail .detail-toc{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:72px}
.feature-detail .detail-toc a{padding:16px 0;font-size:15px;font-weight:600}
.feature-detail .detail-sections section{margin:0 0 100px;padding:0;border:0}
.feature-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:72px}
.feature-story:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.feature-story:nth-child(even) .feature-story-copy{order:2}
.feature-story-copy{padding:16px 0}
.feature-step{display:inline-block;color:var(--blue);font-size:15px;font-weight:700;margin-bottom:20px;letter-spacing:.12em}
.feature-detail .detail-sections h2{font-size:clamp(28px,3vw,40px);line-height:1.15;text-wrap:balance;margin-bottom:24px}
.feature-detail .detail-sections p{font-size:18px;line-height:1.85;margin-top:18px}
.feature-scene{margin:0;background:var(--feature-tone);border-radius:28px;overflow:hidden;min-width:0}
.scene-caption{display:flex;justify-content:space-between;gap:12px;padding:24px 28px 0;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.scene-stage{position:relative;padding:32px 28px 70px;min-height:370px;display:grid;align-items:center;isolation:isolate}
.scene-mascot{position:absolute;bottom:0;right:6px;width:130px;height:130px;object-fit:contain;z-index:2;pointer-events:none}
.feature-scene figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;padding:12px 24px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:0 0 28px 28px;font-size:13px}
.scene-replay{font:inherit;color:var(--blue);background:none;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px;padding:8px;text-align:right}
.scene-replay[hidden]{display:none}
.feature-scene .pictogram{width:36px;height:36px;flex-shrink:0}
.scene-lines{display:flex;flex-direction:column;gap:9px;margin-top:20px;width:100%}
.scene-lines i{display:block;height:6px;background:var(--line-strong);border-radius:5px;width:100%}
.scene-lines i:nth-child(2){width:76%}.scene-lines i:nth-child(3){width:52%}
.scene-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center;padding:20px 0}
.scene-sheet{position:relative;display:flex;flex-direction:column;gap:16px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:16px;padding:20px 14px;min-height:224px;box-shadow:0 5px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
.scene-sheet strong{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.sheet-0{rotate:-4deg;translate:0 10px}.sheet-2{rotate:4deg;translate:0 10px}
.sheet-current{border:2px solid var(--blue);translate:0 -12px}
.scene-sheet .scene-lines{margin-top:0}
.scene-seal{font-size:12px;color:var(--blue);font-weight:700;margin-top:auto}
.feature-detail .scene-sample,.feature-detail .detail-sections .scene-sample{font-size:13px;line-height:1.55;color:var(--muted);margin:8px 0 0;overflow-wrap:normal}
.scene-conversation{display:flex;flex-direction:column;gap:18px;padding-right:34px}
.scene-bubble{display:flex;gap:14px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:18px;padding:18px;max-width:92%}
.scene-bubble>div{flex:1;min-width:0}.scene-bubble strong{font-size:15px}
.scene-bubble .scene-lines{margin-top:12px;gap:7px;min-width:90px}
.bubble-1{margin-left:28px;background:var(--bg);border-color:var(--blue)}
.scene-week{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-bottom:20px}
.scene-day{min-height:230px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:16px;padding:18px 10px;display:flex;flex-direction:column;gap:24px}
.scene-day>strong{font-size:13px;overflow-wrap:anywhere}
.scene-task{background:var(--feature-tone);border-radius:10px;padding:12px 8px}
.scene-task .scene-lines{margin-top:14px}.scene-task .pictogram{width:28px;height:28px}
.scene-dot{color:var(--blue);font-size:20px;font-weight:700;margin-top:auto}
.scene-chart{background:var(--bg-elevated);border:1px solid var(--line);border-radius:20px;padding:24px 20px;margin-bottom:25px}
.scene-bars{display:flex;gap:28px;height:190px;align-items:stretch;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent 46px,var(--line) 47px,transparent 48px)}
.scene-bars>div{flex:1;display:flex;align-items:flex-end;justify-content:center}
.scene-bars span{display:block;width:70%;max-width:60px;background:var(--blue);border-radius:8px 8px 0 0;transform-origin:bottom}
.scene-bars>div:nth-child(2) span{opacity:.7}.scene-bars>div:first-child span{opacity:.4}
.scene-chart-labels{display:flex;gap:8px;margin-top:16px;font-size:11px;text-align:center}.scene-chart-labels>*{flex:1;min-width:0;overflow-wrap:anywhere}
.scene-map{position:relative;height:270px;margin-bottom:20px}
.scene-connectors{position:absolute;inset:0;width:100%;height:100%;color:var(--blue);opacity:.45}
.scene-node{position:absolute;display:grid;justify-items:center;gap:12px;padding:20px 10px;width:36%;max-width:155px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:18px;font-size:13px;text-align:center}
.scene-focus{padding:12px 24px 22px;display:grid;justify-items:center}
.scene-focus-tag{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:12px;align-self:start;justify-self:start;rotate:-5deg;z-index:1;font-size:13px}
.scene-focus-sheet{width:90%;padding:28px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:18px;rotate:2deg;display:flex;flex-direction:column;gap:16px}
.scene-focus-sheet>strong{font-size:23px;line-height:1.2}
.feature-detail .scene-focus-sheet .scene-sample{font-size:16px}
.scene-focus-mark{width:100%;height:55px;color:var(--blue)}
.scene-answer{border-top:1px solid var(--line);padding-top:8px}
.scene-answer summary{cursor:pointer;min-height:44px;padding:12px 0;color:var(--blue);font-size:14px}
.scene-journey{display:grid;gap:14px;padding:10px 24px 24px 0}
.scene-journey-row{display:flex;align-items:center;gap:14px;background:var(--bg-elevated);padding:18px;border:1px solid var(--line);border-radius:14px}
.scene-journey-row>div{flex:1;min-width:0}.scene-journey-row strong{font-size:15px}
.scene-journey-row:last-child{border-color:var(--blue)}
.journey-number{font-size:13px;font-weight:700;color:var(--blue)}
.node-0{left:32%;top:0}.node-1{left:0;bottom:0}.node-2{right:0;bottom:0}
.feature-takeaways{padding:44px;background:var(--feature-tone);border-radius:28px;margin:0 0 90px}
.feature-takeaways>h2{font-size:30px;text-wrap:balance;margin-bottom:36px;max-width:620px}
.feature-takeaways>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.feature-takeaways .pictogram{width:40px;height:40px;margin-bottom:20px}
.feature-takeaways h3{font-size:20px;line-height:1.4}
.feature-faq{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;margin:0 0 90px}
.feature-faq h2{font-size:32px;line-height:1.2;text-wrap:balance}
.feature-faq details{border-bottom:1px solid var(--line)}
.feature-faq summary{padding:20px 8px;min-height:64px;font-size:18px;font-weight:600;cursor:pointer}
.feature-faq details p{padding:0 8px 24px;color:var(--muted);font-size:17px;line-height:1.8}
.feature-final-cta{text-align:center;padding:48px 32px;background:var(--feature-tone);border-radius:28px;margin-bottom:70px}
.feature-final-cta h2{font-size:clamp(28px,3vw,40px);line-height:1.2;text-wrap:balance}
.feature-final-cta p{font-size:18px;line-height:1.7;margin:20px auto 28px;max-width:660px}
.feature-detail .detail-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:28px 0}
.feature-detail .detail-related a{display:flex;align-items:flex-start;gap:12px;padding:20px 0;text-decoration:none;border-top:1px solid var(--line)}
.feature-detail .detail-related a:hover strong{text-decoration:underline;text-underline-offset:4px}
.feature-detail .detail-related .pictogram{width:32px;height:32px;flex-shrink:0}
.feature-detail .detail-related strong{display:block;font-size:17px}
.feature-detail .detail-related small{display:block;margin-top:8px;line-height:1.6;color:var(--muted)}
.feature-detail .detail-related a>span:last-child{margin-left:auto}
.feature-detail .detail-heading-scene{padding:32px;background:var(--feature-tone)}
@media(max-width:1000px){
 .feature-hero,.feature-story,.feature-story:nth-child(even){gap:32px}
 .scene-stage{padding:26px 18px 70px;min-height:340px}
 .scene-sheet{padding:16px 10px}.scene-stack{gap:6px}
 .feature-scene figcaption{padding:12px 16px}
}
@media(max-width:700px){
 .feature-detail .detail-heading{margin:24px 0 36px}
 .feature-hero,.feature-story,.feature-story:nth-child(even){grid-template-columns:1fr;gap:24px}
 .feature-story:nth-child(even) .feature-story-copy{order:0}
 .feature-example{grid-template-columns:1fr;gap:16px;padding:28px 24px}
 .feature-example>p{font-size:17px}
 .feature-detail .detail-layout{margin:32px 0 48px}
 .feature-detail .detail-toc{grid-template-columns:1fr;gap:0;margin-bottom:40px}
 .feature-detail .detail-sections section{margin-bottom:56px}
 .feature-detail .detail-sections p{font-size:17px}
 .feature-detail .detail-related{grid-template-columns:1fr;gap:0}
 .feature-detail .detail-heading-scene{padding:24px 20px;text-align:left}
 .feature-actions .btn{width:100%}
 .scene-stage{min-height:330px;padding:24px 16px 65px}
 .scene-caption{padding:20px 20px 0;font-size:11px}
 .scene-sheet{min-height:200px;padding:14px 8px;gap:12px}
 .scene-sheet strong{font-size:12px}.feature-scene .pictogram{width:30px;height:30px}
 .feature-detail .scene-sheet .scene-sample,.feature-detail .scene-task .scene-sample{font-size:11px;line-height:1.5}
 .scene-bubble{padding:14px;gap:10px}.scene-conversation{padding-right:18px}
 .scene-mascot{width:110px;height:110px}
 .scene-week{gap:6px}.scene-day{padding:16px 7px}.scene-day>strong{font-size:11px}
 .scene-chart{padding:20px 12px}.scene-chart-labels{font-size:10px}
 .scene-map{height:250px}.scene-node{font-size:12px}
 .scene-focus{padding:12px 8px 22px}.scene-focus-sheet{padding:24px 18px}.scene-focus-sheet>strong{font-size:20px}
 .scene-journey{padding-right:10px}.scene-journey-row{gap:10px;padding:16px 12px}
 .feature-takeaways{padding:28px 24px;margin-bottom:56px}
 .feature-takeaways>div{grid-template-columns:1fr;gap:24px}
 .feature-takeaways>div>div{display:flex;gap:16px;align-items:center}
 .feature-takeaways .pictogram{flex-shrink:0;margin:0}
 .feature-faq{grid-template-columns:1fr;gap:24px;margin-bottom:56px}
 .feature-faq h2{font-size:28px}.feature-faq summary{font-size:17px}
 .feature-final-cta{padding:32px 24px;margin-bottom:48px}
}
@media(prefers-reduced-motion:reduce){.scene-replay{display:none}}