/* Chapter framing follows the measured incident.io product reference. */
.ys-story{--chapter-top:80px;--chapter-offset:160px;background:#fff;padding:104px 0 65px;color:#30312f}
.ys-intro{position:relative;text-align:center;margin-bottom:58px}
.ys-intro .eyebrow{font-size:11px;color:#a59383;letter-spacing:.09em;margin-bottom:20px}
.ys-intro h2{font-size:clamp(40px,4.3vw,60px);line-height:1.2;letter-spacing:-.04em;margin:auto;max-width:900px}
.ys-intro>p{font-size:18px;line-height:1.5;color:#77726d;margin:23px auto 0;max-width:660px}

.ys-chapter-nav{position:sticky;top:var(--chapter-top);z-index:90;background:#fffffffa;backdrop-filter:blur(16px);border-bottom:1px solid #ece9e4;margin-bottom:64px}
.ys-chapter-nav>.container{display:grid;grid-template-columns:repeat(3,1fr)}
.ys-chapter-nav a{position:relative;display:flex;align-items:center;gap:13px;min-height:60px;padding:0 12px;font:500 14px/1.5 var(--body);color:#928c85}
.ys-chapter-nav a>span{font-size:10px;color:#a9a098;font-weight:400}
.ys-chapter-nav a[aria-current]{color:#39342e}
.ys-chapter-nav a[aria-current]>span{color:#e96b47}
.ys-chapter-nav a i{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#f25533;transform:scaleX(0);transform-origin:left;transition:transform .18s}
.ys-chapter-nav a[aria-current] i{transform:scaleX(var(--step-progress,1))}
.ys-chapter-nav a:hover{color:#c5633f}

.ys-chapters{position:relative;isolation:isolate;width:min(1192px,calc(100% - 96px));max-width:1192px}
.ys-chapter-position{display:block;height:0;pointer-events:none;visibility:hidden}
.ys-chapter{position:relative;scroll-margin-top:180px}
.ys-chapter>.anchor-alias{position:absolute;top:0;left:0}
.ys-chapter-inner{display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:96px;align-items:start;padding:48px;min-height:714px;background:#f8f5f0;border-radius:8px;box-shadow:0 -10px 30px -20px #3c291f12}
.ys-chapter-copy{min-width:0}
.ys-chapter-message{width:100%}
.ys-chapter-message h3{font-size:36px;line-height:1.15;letter-spacing:-.032em;max-width:400px;text-wrap:pretty;font-weight:400;margin:0 0 20px}
.ys-chapter-message>p{font-size:18px;line-height:1.4;letter-spacing:-.012em;color:#68645e;max-width:400px;margin:0}
.ys-forward{display:flex;gap:13px;align-items:center;width:fit-content;max-width:100%;min-height:44px;margin-top:12px;font-size:14px;font-weight:500;line-height:1.55;color:#f25533}
.ys-forward>span{font-size:21px;transition:transform .2s}
.ys-forward:hover>span{transform:translateX(4px)}
.ys-case-note{display:flex;flex-direction:column;width:334px;max-width:100%;min-height:222px;margin-top:88px;padding:24px;border:1px solid #ece9e3;border-radius:8px;background:#fff}
.ys-case-note h4{display:flex;align-items:center;gap:9px;font:500 17px/1.4 var(--body);letter-spacing:-.025em;color:#272725;margin:0 0 23px}
.ys-case-note h4 .ypm-app-mark{width:25px;height:25px;flex-shrink:0;stroke:none}
.ys-case-note blockquote{font:400 14px/1.55 var(--body);color:#252524;margin:0 0 15px}
.ys-case-note>p{font:400 13px/1.6 var(--body);color:#77716a;margin:0 0 24px}
.ys-case-note>small{display:block;font:400 11px/1.6 var(--body);color:#99948d;margin-top:auto}
.ys-product-stage{min-width:0;align-self:start}
.ys-case-scope{padding-top:28px}
.ys-case-scope p{font-size:11px;line-height:1.8;color:#9b948a;text-align:right;max-width:900px;margin-left:auto}
.ys-story a:focus-visible{outline:2px solid #df704a;outline-offset:5px}

@media(min-width:1300px){
 .ys-chapters{width:1192px;max-width:1192px}
}
@media(min-width:1101px) and (prefers-reduced-motion:no-preference){
 .ys-can-pin .ys-chapter{position:sticky;top:var(--chapter-pin-top,var(--chapter-offset))}
}
@media(max-width:1299px){
 .ys-chapters{width:calc(100% - 64px);max-width:1192px}
 .ys-chapter-inner{padding:36px;grid-template-columns:340px minmax(0,1fr);column-gap:58px;min-height:690px}
 .ys-chapter-message h3{font-size:34px}
 .ys-chapter-message>p{font-size:17px}
 .ys-case-note{width:314px;padding:22px}
}
/* Preserve the full-size product UI in shorter desktop windows. */
@media(min-width:1101px) and (max-height:860px){
 .ys-story .ys-chapter-inner{min-height:0;padding-block:16px}
 .ys-story .ys-case-note{margin-top:24px}
 .ys-product-stage .ypm-tabs{margin-top:16px}
 .ys-product-stage .ypm-tabs button{min-height:44px;padding-block:9px 13px}
}
@media(max-width:1100px){
 .ys-story{padding-top:82px}
 .ys-chapter-nav{margin-bottom:42px}
 .ys-chapters{width:calc(100% - 64px)}
 .ys-chapter-inner{display:block;padding:36px;min-height:0}
 .ys-chapter-message{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
 .ys-chapter-message h3{margin-bottom:0;max-width:none;font-size:32px}
 .ys-chapter-message>p{max-width:none;font-size:16px;line-height:1.6}
 .ys-forward{grid-column:2;margin-top:12px}
 .ys-case-note{display:none}
 .ys-product-stage{margin-top:30px}
 .ys-chapter{margin-bottom:26px}
 .ys-intro h2{font-size:47px}
}
@media(max-width:760px){
 .ys-story{--chapter-top:70px;padding:66px 0 35px}
 .ys-intro{margin-bottom:32px}
 .ys-intro .eyebrow{font-size:10px;margin-bottom:18px}
 .ys-intro h2{font-size:35px;line-height:1.3;max-width:330px}
 .ys-intro>p{font-size:15px;margin-top:18px}
 .ys-chapter-nav{margin-bottom:25px}
 .ys-chapter-nav>.container{width:calc(100% - 22px)}
 .ys-chapter-nav a{padding:0 6px;gap:6px;font-size:10px;min-height:54px;line-height:1.5}
 .ys-chapter-nav a>span{font-size:9px}
 .ys-chapter-nav a i{right:7px}
 .ys-chapters{width:calc(100% - 24px);max-width:none}
 .ys-chapter-inner{padding:28px 18px 20px}
 .ys-chapter-message{display:block}
 .ys-chapter-message h3{font-size:30px;line-height:1.35;margin-bottom:16px}
 .ys-chapter-message>p{font-size:15px;line-height:1.75}
 .ys-forward{font-size:12px;margin-top:13px;gap:12px}
 .ys-product-stage{margin-top:25px;margin-inline:-6px}
 .ys-chapter{margin-bottom:25px;scroll-margin-top:145px}
 .ys-case-scope{padding-top:18px;width:calc(100% - 44px)}
 .ys-case-scope p{text-align:left;font-size:10px}
}
@media(max-width:360px){
 .ys-chapter-inner{padding-inline:15px}
 .ys-chapter-message h3{font-size:27px}
 .ys-chapter-message>p{font-size:14px}
 .ys-intro h2{font-size:31px}
 .ys-chapter-nav a{font-size:9px;gap:4px}
 .ys-chapter-nav a>span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .ys-chapter{position:relative}
 .ys-chapter-nav a i,.ys-forward>span{transition:none}
}
/* Keep the approved editorial headings separate from the product UI font. */
html[lang="zh-CN"] .ys-story :is(.ys-intro h2,.ys-chapter-message h3){font-family:Georgia,"STZhongsong","Songti SC",SimSun,serif;font-weight:400}

/* Chapter navigation and source captions are information, not decoration. */
.ys-intro .eyebrow,.ys-chapter-nav a,.ys-chapter-nav a>span,
.ys-case-note>small,.ys-case-scope p{color:#706f66}
.ys-chapter-nav a[aria-current]>span,.ys-chapter-nav a:hover,
.ys-forward{color:#94593c}