/* 80 историй: общий слой оформления, исходный текст хранится в каждом HTML. */
.keysy-detail {
    --kd-ink: #152c46;
    --kd-muted: #4f657b;
    --kd-blue: #2d5c8e;
    --kd-line: #d6e1eb;
    --kd-paper: #f3f6f9;
    --kd-night: #0c1e34;
    --auto-blue: #2d5c8e;
    --auto-ink: #152c46;
    --auto-muted: #4f657b;
    --auto-paper: #f3f6f9;
    font-family: Manrope, sans-serif;
    color: var(--kd-ink);
    background: #fff;
    overflow-x: clip;
}
html:has(> body.keysy-detail) { overflow-x: clip; }
.keysy-detail [hidden] { display: none !important; }
.keysy-detail .auto-shell { width: min(1240px, calc(100% - 64px)); }
.keysy-detail :is(a, button, summary, input, textarea, select):focus-visible {
    outline: 3px solid #4b83b9;
    outline-offset: 4px;
}
.keysy-detail :is(section, main)[id] { scroll-margin-top: 104px; }
.keysy-detail #keysy-main:focus { outline: none; }
.keysy-detail button { font-family: inherit; }
.keysy-detail .kd-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.keysy-detail .kd-skip {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 10020;
    padding: 14px 20px;
    background: #fff;
    color: var(--kd-night);
    font-size: 14px;
    font-weight: 700;
    transform: translateY(-180%);
    clip-path: inset(50%);
}
.keysy-detail .kd-skip:focus { transform: none; clip-path: none; }
.keysy-detail .auto-breadcrumb nav {
    gap: 9px;
    min-height: 46px;
    flex-wrap: wrap;
    padding-block: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #4d6278;
}
.keysy-detail .auto-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 1. Обложка истории: отраслевой знак, настоящие факты и спокойная типографика. */
.keysy-detail .auto-hero { padding: 54px 0 0; background: var(--kd-night); isolation: isolate; }
.keysy-detail .auto-hero::before,
.keysy-detail .auto-hero::after { display: none; }
.keysy-detail .kd-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .8fr);
    align-items: center;
    gap: 56px;
}
.keysy-detail .kd-hero-copy { min-width: 0; padding-bottom: 12px; }
.keysy-detail .keysy-eyebrow {
    margin-bottom: 24px;
    color: #c0d4eb;
    font-size: 10px;
    line-height: 1.7;
    letter-spacing: .1em;
}
.keysy-detail .keysy-eyebrow > span { background: #a6cbee; box-shadow: 0 0 0 4px #9fc5f215; }
.keysy-detail .auto-hero h1 {
    max-width: 810px;
    font-size: clamp(34px, 3.3vw, 53px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.04em;
    text-wrap: pretty;
    overflow-wrap: break-word;
}
.keysy-detail .auto-hero h1 em { display: inline; color: #abd0f5; font-weight: inherit; }
.keysy-detail .keysy-lead { max-width: 690px; margin-top: 26px; color: #d3dfed; font-size: 16px; line-height: 1.85; }
.keysy-detail .auto-btn {
    min-height: 50px;
    padding: 13px 20px;
    gap: 16px;
    border-radius: 6px;
    font: 700 13px/1.6 Manrope, sans-serif;
    text-align: center;
    overflow-wrap: anywhere;
}
.keysy-detail .auto-btn--primary { background: #c7dfff; color: #132a46; }
.keysy-detail .auto-btn--primary:hover { background: #e0edff; transform: none; }
.keysy-detail .auto-btn--ghost { background: transparent; color: #f1f6fc; border-color: #647f9d; }
.keysy-detail .auto-btn--ghost:hover { background: #203b57; border-color: #a3c3e2; transform: none; }
.keysy-detail .keysy-hero-actions { margin-top: 29px; gap: 12px; }
.keysy-detail .kd-form-status { max-width: 700px; margin: 12px 0 0; color: #e3edf8; font-size: 13px; line-height: 1.7; }
.keysy-detail .kd-form-status:empty { display: none; }
.keysy-detail .kd-hero-visual { margin: 0; background: #112b45; border: 1px solid #3d5772; border-radius: 10px; overflow: hidden; }
.keysy-detail .kd-visual-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 17px 24px;
    border-bottom: 1px solid #3d5772;
    color: #c3d7ed;
    font-size: 10px;
    line-height: 1.6;
}
.keysy-detail .kd-visual-top > span:last-child { font-size: 9px; letter-spacing: .08em; }
.keysy-detail .kd-illustration {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 235px;
    background: linear-gradient(#9dc8f10a 1px, transparent 1px), linear-gradient(90deg, #9dc8f10a 1px, transparent 1px);
    background-size: 28px 28px;
}
.keysy-detail .kd-illustration::before { content: ""; position: absolute; width: 174px; height: 174px; border: 1px solid #6085aa66; border-radius: 50%; }
.keysy-detail .kd-illustration::after { content: ""; position: absolute; width: 198px; height: 198px; border: 1px solid #6085aa28; border-radius: 50%; }
.keysy-detail .kd-industry-icon { width: 142px; height: 124px; fill: none; stroke: #b2d3f1; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.keysy-detail .kd-hero-visual figcaption { padding: 21px 24px 23px; border-top: 1px solid #3d5772; }
.keysy-detail .kd-hero-visual figcaption strong { display: block; color: #f1f6fc; font-size: 18px; line-height: 1.5; font-weight: 700; }
.keysy-detail .kd-hero-visual figcaption span { display: block; margin-top: 5px; color: #c2d6e9; font-size: 12px; line-height: 1.7; }
.keysy-detail .kd-hero-visual figcaption small { display: block; margin-top: 15px; color: #adc5de; font-size: 10px; line-height: 1.6; }
.keysy-detail .keysy-hero-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    max-width: none;
    gap: 0;
    padding: 0;
    margin-top: 40px;
    border-top: 1px solid #3b526b;
}
.keysy-detail .keysy-hero-facts > div { padding: 25px 24px 28px; border-right: 1px solid #3b526b; }
.keysy-detail .keysy-hero-facts > div:first-child { padding-left: 0; }
.keysy-detail .keysy-hero-facts > div:last-child { border-right: 0; }
.keysy-detail .keysy-hero-facts b { color: #f5f9ff; font-size: clamp(22px, 2vw, 28px); line-height: 1.35; font-weight: 700; letter-spacing: -.035em; overflow-wrap: anywhere; }
.keysy-detail .keysy-hero-facts span { max-width: 230px; margin-top: 7px; color: #c3d4e6; font-size: 12px; line-height: 1.7; }

/* 2. Навигация не зависит от JS; содержание истории всегда видно. */
.keysy-detail .kd-reading-layout { display: grid; grid-template-columns: 222px minmax(0, 1fr); gap: 64px; align-items: start; padding-top: 54px; padding-bottom: 50px; }
.keysy-detail .kd-sidebar { position: sticky; top: 96px; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a6b8ca transparent; }
.keysy-detail .kd-toc { padding: 0; border-top: 2px solid #335d86; }
.keysy-detail .kd-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 14px 3px; cursor: pointer; color: var(--kd-ink); font-size: 13px; line-height: 1.6; font-weight: 800; list-style: none; }
.keysy-detail .kd-toc summary::-webkit-details-marker { display: none; }
.keysy-detail .kd-toc summary > span { display: inline-flex; align-items: center; gap: 10px; color: var(--kd-muted); font-size: 10px; font-weight: 600; }
.keysy-detail .kd-toc summary > span::after { content: "+"; font-size: 20px; line-height: 1; font-weight: 400; }
.keysy-detail .kd-toc[open] summary > span::after { content: "−"; }
.keysy-detail .kd-toc ol { list-style: none; padding: 0 0 10px; margin: 0; counter-reset: kd-section; }
.keysy-detail .kd-toc li { margin: 0; padding: 0; border-bottom: 1px solid #e0e7ef; }
.keysy-detail .kd-toc a { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 42px; padding: 9px 4px; color: #425d77; text-decoration: none; font-size: 12px; line-height: 1.6; }
.keysy-detail .kd-toc a::before { counter-increment: kd-section; content: counter(kd-section, decimal-leading-zero); color: #58738e; font-size: 10px; font-variant-numeric: tabular-nums; }
.keysy-detail .kd-toc a:hover,
.keysy-detail .kd-toc a[aria-current="location"] { color: #153e68; background: #edf3f9; }
.keysy-detail .kd-toc a[aria-current="location"] { font-weight: 800; }
.keysy-detail .kd-reading-tools { padding: 17px 0 7px; }
.keysy-detail .kd-reading-tools > button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 9px 4px; border: 0; background: transparent; color: #355675; text-align: left; font-size: 11px; line-height: 1.6; font-weight: 600; cursor: pointer; }
.keysy-detail .kd-reading-tools > button:hover { color: #153e68; text-decoration: underline; text-underline-offset: 4px; }
.keysy-detail .kd-reading-tools > button span { font-size: 17px; }
.keysy-detail .kd-status { margin: 5px 4px 0; color: #3f5d76; font-size: 11px; line-height: 1.7; }
.keysy-detail .kd-status:empty { display: none; }
.keysy-detail .kd-copy-fallback { display: block; padding: 12px 4px; color: #425d77; font-size: 11px; line-height: 1.7; }
.keysy-detail .kd-copy-fallback input { width: 100%; min-width: 0; padding: 10px; margin-top: 8px; border: 1px solid #a6bacd; border-radius: 4px; font: 13px/1.5 Manrope, sans-serif; color: #254768; background: #fff; }
.keysy-detail .kd-back-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: #385b7b; font-size: 11px; line-height: 1.6; font-weight: 700; text-decoration: none; }
.keysy-detail .kd-back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.keysy-detail .kd-story { min-width: 0; }
.keysy-detail .kd-brief { padding: 26px 30px; border: 1px solid #cbdbe9; border-left: 3px solid #507ba4; border-radius: 0 8px 8px 0; background: #edf4fa; }
.keysy-detail .kd-brief h2 { margin: 0 0 12px; color: #315a80; font-size: 11px; font-weight: 800; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
.keysy-detail .kd-brief p { margin: 0; max-width: 760px; color: #243e57; font-size: 17px; font-weight: 600; line-height: 1.85; }
.keysy-detail .kd-story .auto-section { padding: 46px 0; background: #fff; }
.keysy-detail .kd-story .auto-section + .auto-section { border-top: 1px solid var(--kd-line); }
.keysy-detail .kd-story .auto-section--paper { padding: 34px 32px; margin: 0 0 12px; border: 1px solid #dae4ed; border-radius: 9px; background: #f3f6f9; }
.keysy-detail .kd-story .auto-section--paper + .auto-section { border-top: 0; }
.keysy-detail .kd-story .auto-shell { width: 100%; }
.keysy-detail .auto-section-head { display: block; margin-bottom: 25px; }
.keysy-detail .auto-kicker { gap: 8px; color: #3e6589; font: 700 10px/1.7 Manrope, sans-serif; letter-spacing: .08em; }
.keysy-detail .auto-kicker::before { width: 3px; height: 15px; background: #7597b8; }
.keysy-detail .auto-section-head h2 { margin: 12px 0 0; max-width: 820px; color: #152c46; font-size: clamp(25px, 2.35vw, 34px); line-height: 1.3; letter-spacing: -.025em; text-wrap: pretty; }
.keysy-detail .auto-section-head p { max-width: 760px; margin: 16px 0 0; color: #4c6278; font-size: 15px; line-height: 1.85; }
.keysy-detail .keysy-prose { max-width: 780px; }
.keysy-detail .keysy-prose p { margin: 0 0 20px; color: #263d53; font-size: 16px; line-height: 1.9; }
.keysy-detail .keysy-prose p:last-child { margin-bottom: 0; }
.keysy-detail .keysy-prose strong { color: #17344f; font-weight: 800; }
.keysy-detail .kd-story a { color: #245784; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.keysy-detail .kd-story a:hover { color: #173b5e; }
.keysy-detail .kd-steps { list-style: none; margin: 0; padding: 0; counter-reset: kd-step; }
.keysy-detail .kd-steps > li { position: relative; padding: 22px 0 22px 58px; border-top: 1px solid #d3dfe9; }
.keysy-detail .kd-steps > li:first-child { padding-top: 6px; border-top: 0; }
.keysy-detail .kd-steps > li:last-child { padding-bottom: 0; }
.keysy-detail .kd-steps > li::before { counter-increment: kd-step; content: counter(kd-step, decimal-leading-zero); position: absolute; top: 22px; left: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #b6cbdd; border-radius: 5px; color: #315f87; background: #e5eef6; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.keysy-detail .kd-steps > li:first-child::before { top: 6px; }
.keysy-detail .kd-steps p { margin: 0; }
.keysy-detail .auto-fact-list { gap: 12px; }
.keysy-detail .auto-fact { grid-template-columns: 36px minmax(0, 1fr); gap: 18px; padding: 20px; border: 1px solid #d3dfe9; border-radius: 6px; }
.keysy-detail .auto-fact strong { color: #17344f; font-size: 15px; line-height: 1.65; }
.keysy-detail .auto-fact span { color: #425d75; font-size: 14px; line-height: 1.85; }
.keysy-detail .auto-fact .material-symbols-outlined { width: 36px; height: 36px; background: #edf3f8; color: #315f87; font-size: 22px; }
.keysy-detail .kd-step-facts { counter-reset: kd-action; }
.keysy-detail .kd-step-facts .auto-fact::before { counter-increment: kd-action; content: counter(kd-action, decimal-leading-zero); display: grid; place-items: center; width: 36px; height: 36px; background: #e8f0f7; color: #315f87; border: 1px solid #b6cbdd; border-radius: 5px; font-size: 12px; font-weight: 700; }
.keysy-detail .kd-step-facts .auto-fact > .material-symbols-outlined { display: none; }
.keysy-detail .keysy-highlight { margin: 26px 0; padding: 23px 26px; background: #e6eff7; border-left: 3px solid #4f7aa2; border-radius: 0 6px 6px 0; }
.keysy-detail .keysy-highlight h3 { margin: 0 0 12px; color: #193b58; font-size: 20px; line-height: 1.45; }
.keysy-detail .keysy-highlight p { margin: 0; color: #2a425a; font-size: 16px; line-height: 1.85; }
.keysy-detail .keysy-quote { margin: 28px 0 0; padding: 24px 26px; border: 0; border-left: 3px solid #6e91b2; border-radius: 0; background: #e8f0f6; color: #2c435a; font-size: 16px; line-height: 1.85; }
.keysy-detail .keysy-quote cite { margin-top: 14px; color: #4b6279; font: 600 11px/1.8 Manrope, sans-serif; letter-spacing: 0; }
.keysy-detail .auto-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.keysy-detail .auto-stat { padding: 22px; border: 1px solid #c7d8e6; border-radius: 6px; background: #fff; }
.keysy-detail .auto-stat b { color: #204b72; font-size: 27px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.keysy-detail .auto-stat span { color: #4b6278; font-size: 12px; line-height: 1.75; }
.keysy-detail .auto-takeaways { gap: 12px; }
.keysy-detail .auto-takeaways li { padding: 19px 22px 19px 43px; border-radius: 5px; color: #294158; font-size: 15px; line-height: 1.85; }
.keysy-detail .auto-takeaways li::before { width: 6px; height: 6px; left: 20px; top: 30px; background: #537b9f; }
.keysy-detail .auto-diagram { grid-template-columns: repeat(3, minmax(0, 1fr)); border-color: #cbdbe7; border-radius: 6px; }
.keysy-detail .auto-diagram-node { padding: 22px 18px; min-height: 0; border-color: #cbdbe7; }
.keysy-detail .auto-diagram-node::after { right: -12px; top: 26px; width: 24px; height: 24px; border-color: #cbdbe7; }
.keysy-detail .auto-diagram-index { color: #3c6386; font: 700 10px/1.6 Manrope, sans-serif; }
.keysy-detail .auto-diagram-node h3 { margin: 22px 0 12px; color: #203f5c; font-size: 18px; line-height: 1.5; }
.keysy-detail .auto-diagram-node p { color: #4c6378; font-size: 13px; line-height: 1.8; }
.keysy-detail .auto-diagram-status { padding: 6px 8px; color: #345a7a; background: #e7eff6; font: 600 10px/1.7 Manrope, sans-serif; letter-spacing: .02em; }
.keysy-detail .auto-faq { max-width: none; margin: 0; gap: 10px; }
.keysy-detail .auto-faq details { border: 1px solid #cfdeea; border-radius: 6px; background: #fff; }
.keysy-detail .auto-faq summary { padding: 20px 53px 20px 22px; color: #23435e; font-size: 15px; line-height: 1.7; }
.keysy-detail .auto-faq summary::after { top: 20px; right: 20px; color: #3c678c; font-size: 23px; }
.keysy-detail .auto-faq details[open] summary { padding-bottom: 14px; }
.keysy-detail .auto-faq details p { padding: 0 22px 22px; color: #415d75; font-size: 15px; line-height: 1.85; }
.keysy-detail .kd-editorial { padding: 28px 0 0; border-top: 1px solid #cbdbe7; }
.keysy-detail .kd-editorial p { max-width: 740px; margin: 11px 0 0; color: #4e6479; font-size: 12px; line-height: 1.8; }
.keysy-detail .kd-editorial .kd-byline { margin-top: 0; color: #2d4a65; font-size: 13px; font-weight: 600; }
.keysy-detail .kd-editorial .kd-updated { font-size: 11px; }

/* 3. Продолжение маршрута: связанные истории и каноничная форма. */
.keysy-detail .kd-related { padding: 52px 0 58px; background: #f3f6f9; border-top: 1px solid #d5e0eb; }
.keysy-detail .kd-related-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.keysy-detail .kd-eyebrow { margin: 0 0 10px; color: #476887; font-size: 10px; line-height: 1.7; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.keysy-detail .kd-related-head h2 { margin: 0; color: #15324d; font-size: 33px; line-height: 1.3; letter-spacing: -.03em; }
.keysy-detail .kd-related-head > p { max-width: 360px; margin: 0; color: #51677d; font-size: 13px; line-height: 1.8; }
.keysy-detail .kd-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.keysy-detail .kd-related-grid > article { display: flex; flex-direction: column; min-width: 0; padding: 25px; border: 1px solid #cfdeea; border-top: 2px solid #7397b7; border-radius: 6px; background: #fff; }
.keysy-detail .kd-related-product { margin: 0 0 18px; color: #4d6c88; font-size: 11px; font-weight: 700; line-height: 1.7; }
.keysy-detail .kd-related-grid h3 { margin: 0 0 16px; color: #1c3b56; font-size: 20px; font-weight: 800; line-height: 1.5; letter-spacing: -.02em; }
.keysy-detail .kd-related-grid h3 a { color: inherit; text-decoration: none; }
.keysy-detail .kd-related-grid h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.keysy-detail .kd-related-summary { flex: 1; margin: 0 0 24px; color: #475f76; font-size: 14px; line-height: 1.85; }
.keysy-detail .kd-related-reason { margin: 0; padding-top: 16px; border-top: 1px solid #dce6ee; color: #4e6880; font-size: 11px; line-height: 1.8; }
.keysy-detail .kd-related-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-top: 12px; color: #315f87; font-size: 12px; line-height: 1.7; font-weight: 800; text-decoration: none; }
.keysy-detail .kd-related-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.keysy-detail .kd-related-link span { font-size: 21px; }
.keysy-detail .kd-next-links { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 30px; padding-top: 25px; }
.keysy-detail .kd-next-links a { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; color: #315b7e; font-size: 12px; font-weight: 700; line-height: 1.75; text-decoration: underline; text-underline-offset: 4px; }
.keysy-detail .kd-next-links a span { flex: none; font-size: 19px; }
.keysy-detail .auto-cta { padding: 60px 0; background: #0c1e34; color: #fff; }
.keysy-detail .auto-cta .auto-kicker { color: #bed8f1; }
.keysy-detail .auto-cta .auto-kicker::before { background: #9ebfe0; }
.keysy-detail .auto-cta h2 { margin: 17px 0 22px; max-width: 920px; color: #f4f8ff; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.23; font-weight: 700; letter-spacing: -.035em; text-wrap: pretty; }
.keysy-detail .auto-cta p { max-width: 870px; color: #d5e2f0; font-size: 16px; line-height: 1.85; }
.keysy-detail .auto-cta a:not(.auto-btn),
.keysy-detail .auto-cta a:not(.auto-btn):visited { color: #eef6ff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.keysy-detail .auto-cta a:not(.auto-btn):hover { color: #fff; }
.keysy-detail .auto-cta .auto-hero-actions { margin: 27px 0; }
.keysy-detail .auto-cta .auto-cta-note { max-width: 1040px; margin: 28px 0 0; padding: 23px 25px; border: 1px solid #425c76; border-radius: 7px; background: #142d47; color: #d0e1f1; font-size: 13px; line-height: 1.9; }
.keysy-detail .auto-cta-note a { white-space: normal; }

/* 4–5. Никаких скрытых историй: JS нужен только для действий интерфейса. */
.keysy-detail:not(.kd-ready) [data-keysy-lead],
.keysy-detail:not(.kd-ready) .kd-reading-tools { display: none; }
.keysy-detail #consultationModal .modal-content { max-width: 460px !important; padding: 28px !important; border-radius: 10px !important; }
.keysy-detail #consultationModal .modal-close { width: 38px !important; height: 38px !important; color: #33536f !important; }
.keysy-detail #consultationModal #modalTitle { padding-right: 18px !important; color: #173953 !important; font-size: 21px !important; line-height: 1.4 !important; }
.keysy-detail #consultationModal #modalDescription { color: #4e657a !important; font-size: 13px !important; line-height: 1.7 !important; }
.keysy-detail #consultationModal .form-group input:not([type="checkbox"]),
.keysy-detail #consultationModal .form-group textarea { font-size: 16px !important; border-color: #9db3c8 !important; color: #203e58 !important; }
.keysy-detail #consultationModal .form-group textarea { min-height: 128px !important; max-height: 280px !important; line-height: 1.6 !important; }

@media (max-width: 1120px) {
    .keysy-detail .kd-hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(230px, .8fr); gap: 34px; }
    .keysy-detail .kd-reading-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 36px; }
    .keysy-detail .kd-related-grid > article { padding: 22px; }
    .keysy-detail .kd-related-grid h3 { font-size: 18px; }
    .keysy-detail .kd-story .auto-section--paper { padding: 28px; }
}
@media (max-width: 980px) {
    .keysy-detail .auto-shell { width: calc(100% - 40px); }
    .keysy-detail .auto-hero { padding-top: 40px; }
    .keysy-detail .kd-hero-grid { grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; }
    .keysy-detail .auto-hero h1 { font-size: 35px; }
    .keysy-detail .kd-hero-visual figcaption { padding: 18px; }
    .keysy-detail .kd-hero-visual figcaption strong { font-size: 16px; }
    .keysy-detail .kd-visual-top { padding: 14px 18px; }
    .keysy-detail .kd-visual-top > span:last-child { display: none; }
    .keysy-detail .kd-illustration { min-height: 200px; }
    .keysy-detail .kd-reading-layout { display: block; padding-top: 28px; padding-bottom: 38px; }
    .keysy-detail .kd-sidebar { position: static; max-height: none; overflow: visible; margin-bottom: 26px; padding: 0 18px; border: 1px solid #ccdce9; border-radius: 6px; background: #f6f9fc; }
    .keysy-detail .kd-toc { border-top: 0; }
    .keysy-detail .kd-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
    .keysy-detail .kd-toc a { min-height: 44px; }
    .keysy-detail .kd-reading-tools { display: flex; flex-wrap: wrap; align-items: start; gap: 0 22px; padding: 8px 0; border-top: 1px solid #d5e1eb; }
    .keysy-detail .kd-reading-tools > button { width: auto; gap: 15px; }
    .keysy-detail .kd-status { flex: 1 0 100%; margin: 0 0 7px; }
    .keysy-detail .kd-copy-fallback { flex: 1 0 100%; }
    .keysy-detail .kd-back-link { display: none; }
    .keysy-detail .kd-story .auto-section-head h2 { font-size: 30px; }
    .keysy-detail .keysy-prose { max-width: none; }
    .keysy-detail .kd-related-head > p { max-width: 300px; }
    .keysy-detail .kd-related-grid { gap: 12px; }
    .keysy-detail .kd-related-grid > article { padding: 20px; }
    .keysy-detail .kd-related-grid h3 { font-size: 17px; }
    .keysy-detail .kd-related-summary { font-size: 13px; }
}
@media (max-width: 720px) {
    .keysy-detail .kd-hero-grid { display: block; }
    .keysy-detail .auto-hero h1 { font-size: clamp(30px, 6.3vw, 42px); }
    .keysy-detail .keysy-eyebrow { margin-bottom: 19px; font-size: 9px; }
    .keysy-detail .keysy-lead { margin-top: 21px; font-size: 16px; line-height: 1.85; }
    .keysy-detail .kd-hero-copy { padding-bottom: 0; }
    .keysy-detail .kd-hero-visual { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; margin-top: 28px; }
    .keysy-detail .kd-visual-top { display: none; }
    .keysy-detail .kd-illustration { min-height: 100px; height: 100%; border-right: 1px solid #3d5772; background-size: 20px 20px; }
    .keysy-detail .kd-industry-icon { width: 60px; height: 56px; stroke-width: 1.6; }
    .keysy-detail .kd-illustration::before,
    .keysy-detail .kd-illustration::after { display: none; }
    .keysy-detail .kd-hero-visual figcaption { border-top: 0; padding: 16px 18px; }
    .keysy-detail .kd-hero-visual figcaption strong { font-size: 14px; }
    .keysy-detail .kd-hero-visual figcaption span { font-size: 11px; }
    .keysy-detail .kd-hero-visual figcaption small { margin-top: 8px; font-size: 9px; }
    .keysy-detail .keysy-hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
    .keysy-detail .keysy-hero-facts > div { padding: 18px 18px 20px 0; border-right: 0; }
    .keysy-detail .keysy-hero-facts > div:nth-child(even) { padding-left: 18px; padding-right: 0; border-left: 1px solid #3b526b; }
    .keysy-detail .keysy-hero-facts > div:nth-child(n+3) { border-top: 1px solid #3b526b; }
    .keysy-detail .keysy-hero-facts b { font-size: 23px; }
    .keysy-detail .keysy-hero-facts span { font-size: 11px; line-height: 1.7; }
    .keysy-detail .kd-brief { padding: 22px 24px; }
    .keysy-detail .kd-brief p { font-size: 16px; }
    .keysy-detail .kd-story .auto-section { padding: 33px 0; }
    .keysy-detail .kd-story .auto-section--paper { padding: 26px 24px; }
    .keysy-detail .kd-story .auto-section-head h2 { font-size: 27px; }
    .keysy-detail .auto-section-head { margin-bottom: 23px; }
    .keysy-detail .auto-section-head p { font-size: 15px; }
    .keysy-detail .keysy-prose p { font-size: 16px; line-height: 1.9; }
    .keysy-detail .kd-steps > li { padding-left: 48px; }
    .keysy-detail .kd-steps > li::before { width: 32px; height: 32px; font-size: 11px; }
    .keysy-detail .auto-diagram { grid-template-columns: 1fr; }
    .keysy-detail .auto-diagram-node { border-right: 0; border-bottom: 1px solid #cbdbe7; padding: 22px; }
    .keysy-detail .auto-diagram-node:last-child { border-bottom: 0; }
    .keysy-detail .auto-diagram-node::after { content: "↓"; top: auto; right: 24px; bottom: -12px; }
    .keysy-detail .auto-diagram-node h3 { margin-top: 12px; }
    .keysy-detail .keysy-highlight,
    .keysy-detail .keysy-quote { padding: 20px; }
    .keysy-detail .keysy-highlight p,
    .keysy-detail .keysy-quote { font-size: 16px; }
    .keysy-detail .auto-fact { padding: 18px; gap: 14px; }
    .keysy-detail .auto-fact strong { font-size: 14px; }
    .keysy-detail .auto-fact span { font-size: 14px; }
    .keysy-detail .auto-faq summary { font-size: 14px; padding: 18px 44px 18px 19px; }
    .keysy-detail .auto-faq summary::after { top: 18px; right: 17px; }
    .keysy-detail .auto-faq details p { padding: 0 19px 20px; font-size: 15px; }
    .keysy-detail .kd-related { padding: 37px 0; }
    .keysy-detail .kd-related-head { display: block; }
    .keysy-detail .kd-related-head h2 { font-size: 29px; }
    .keysy-detail .kd-related-head > p { max-width: none; margin-top: 13px; }
    .keysy-detail .kd-related-grid { grid-template-columns: 1fr; gap: 16px; }
    .keysy-detail .kd-related-grid > article { padding: 23px; }
    .keysy-detail .kd-related-product { margin-bottom: 13px; }
    .keysy-detail .kd-related-grid h3 { font-size: 20px; margin-bottom: 13px; }
    .keysy-detail .kd-related-summary { font-size: 14px; margin-bottom: 20px; }
    .keysy-detail .kd-next-links { display: grid; gap: 0; padding-top: 20px; }
    .keysy-detail .kd-next-links a { justify-content: space-between; gap: 20px; padding-block: 8px; }
    .keysy-detail .auto-cta { padding: 42px 0; }
    .keysy-detail .auto-cta h2 { font-size: 31px; }
    .keysy-detail .auto-cta p { font-size: 15px; }
    .keysy-detail .auto-cta .auto-cta-note { padding: 20px; font-size: 12px; }
}
@media (max-width: 440px) {
    .keysy-detail .auto-shell { width: calc(100% - 32px); }
    .keysy-detail .auto-hero { padding-top: 32px; }
    .keysy-detail .auto-hero h1 { font-size: 31px; line-height: 1.19; }
    .keysy-detail .auto-btn { width: 100%; min-height: 48px; padding: 12px 16px; font-size: 12px; }
    .keysy-detail .keysy-hero-actions { gap: 10px; margin-top: 23px; }
    .keysy-detail .keysy-hero-facts b { font-size: 20px; }
    .keysy-detail .keysy-hero-facts span { font-size: 10px; }
    .keysy-detail .kd-hero-visual { grid-template-columns: 75px minmax(0, 1fr); }
    .keysy-detail .kd-hero-visual figcaption { padding: 14px; }
    .keysy-detail .kd-hero-visual figcaption strong { font-size: 13px; }
    .keysy-detail .kd-industry-icon { width: 53px; height: 48px; }
    .keysy-detail .kd-sidebar { padding-inline: 15px; }
    .keysy-detail .kd-toc ol { grid-template-columns: 1fr; }
    .keysy-detail .kd-reading-tools { gap: 0 14px; }
    .keysy-detail .kd-reading-tools > button { font-size: 10px; gap: 9px; }
    .keysy-detail .kd-brief { padding: 20px; }
    .keysy-detail .kd-brief p { font-size: 15px; }
    .keysy-detail .kd-story .auto-section--paper { padding: 23px 18px; }
    .keysy-detail .kd-story .auto-section-head h2 { font-size: 25px; }
    .keysy-detail .kd-steps > li { padding-left: 0; padding-top: 67px; }
    .keysy-detail .kd-steps > li:first-child { padding-top: 47px; }
    .keysy-detail .kd-steps > li::before { top: 21px; }
    .keysy-detail .kd-steps > li:first-child::before { top: 2px; }
    .keysy-detail .auto-fact { grid-template-columns: 1fr; padding: 18px; gap: 13px; }
    .keysy-detail .auto-stat-grid { gap: 10px; }
    .keysy-detail .auto-stat { padding: 17px 13px; }
    .keysy-detail .auto-stat b { font-size: 21px; }
    .keysy-detail .auto-stat span { font-size: 11px; }
    .keysy-detail .auto-takeaways li { padding: 17px 17px 17px 32px; font-size: 14px; }
    .keysy-detail .auto-takeaways li::before { left: 14px; top: 27px; }
    .keysy-detail .auto-cta h2 { font-size: 29px; }
    .keysy-detail #consultationModal .modal-content { padding: 22px 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
    html:has(> body.keysy-detail),
    body.keysy-detail { scroll-behavior: auto !important; }
    .keysy-detail *, .keysy-detail *::before, .keysy-detail *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
    html:has(> body.keysy-detail), body.keysy-detail { overflow: visible !important; background: #fff !important; color: #000 !important; }
    .keysy-detail [data-include], .keysy-detail .header, .keysy-detail .rg-menu-header, .keysy-detail .footer,
    .keysy-detail .auto-breadcrumb, .keysy-detail .kd-skip, .keysy-detail .kd-sidebar,
    .keysy-detail .kd-hero-visual, .keysy-detail .kd-related, .keysy-detail .auto-cta,
    .keysy-detail .auto-hero-actions, .keysy-detail [data-keysy-lead],
    .keysy-detail #consultationModal, .keysy-detail .modal, .keysy-detail .kd-form-status,
    .keysy-detail #rg-cookie-banner, .keysy-detail #cookieConsentBanner { display: none !important; }
    .keysy-detail .auto-shell { width: 100% !important; }
    .keysy-detail .auto-hero { padding: 0 0 20px; background: #fff !important; color: #000 !important; }
    .keysy-detail .kd-hero-grid, .keysy-detail .kd-reading-layout { display: block; padding: 0; }
    .keysy-detail .auto-hero h1 { font-size: 26pt; color: #000 !important; }
    .keysy-detail .auto-hero h1 em, .keysy-detail .keysy-eyebrow, .keysy-detail .keysy-lead { color: #222 !important; }
    .keysy-detail .keysy-lead, .keysy-detail .keysy-prose p { font-size: 11pt; line-height: 1.65; }
    .keysy-detail .keysy-hero-facts { margin-top: 22px; border-color: #aaa; }
    .keysy-detail .keysy-hero-facts > div { padding: 14px; border-color: #aaa; }
    .keysy-detail .keysy-hero-facts b { color: #000; font-size: 16pt; }
    .keysy-detail .keysy-hero-facts span { color: #222; font-size: 9pt; }
    .keysy-detail .kd-story .auto-section, .keysy-detail .kd-story .auto-section--paper { padding: 20px 0; background: #fff; border: 0; margin: 0; }
    .keysy-detail .auto-section-head h2 { font-size: 19pt !important; }
    .keysy-detail :is(h1, h2, h3, summary) { break-after: avoid; }
    .keysy-detail :is(.kd-brief, .auto-stat, .auto-fact, .keysy-quote, .keysy-highlight, .auto-faq details) { break-inside: avoid; }
    .keysy-detail .auto-faq details::details-content { display: block !important; content-visibility: visible !important; }
    .keysy-detail .auto-faq details > :not(summary) { display: block !important; }
    .keysy-detail .auto-faq summary::after { display: none; }
    .keysy-detail .kd-editorial { padding-top: 18px; }
    .keysy-detail .kd-story a { color: #000; }
}