/* Digital forensics: every chapter is headed by the service's own name, with the editorial line beneath it. */
.df .df-body { color: #5b6d87; font-size: 15px; line-height: 1.85; margin-top: 20px; }
.df .cy-dark .df-body { color: #aec3dd; }
.df i[data-ic] { display: inline-flex; font-style: normal; flex: none; }
.df main i[data-ic] svg { width: 24px; height: 24px; }
.df em { font-style: normal; }

/* chapter head: number, the service name (h2) and the line */
.df .df-n { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: #d8313f; }
.df-n::after { content: ''; order: 1; width: 36px; height: 2px; background: currentColor; }
.df-n small { order: 2; font: 800 11px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #4775ab; }
.cy-dark .df-n small { color: #9bbde9; }
.df main .df-chead h2 { font-size: clamp(38px, 3.1vw, 58px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.df .df-line { margin-top: 14px; font-size: clamp(19px, 1.4vw, 26px); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: #2f6db0; }
.df .cy-dark .df-line { color: #9fcdf5; }
.df-breach .df-line em { color: #fff; }
.df-chead + .cy-lead { margin-top: 22px !important; }

/* numbered chapter bar */
.df-jump a > span { margin-right: 8px; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: #9aabc6; }
.df-jump a[aria-current] > span { color: #e43844; }
.df-jump a { font-size: 12.5px; }

/* hero: the lab, then the field it works in */
.df-hero { position: relative; isolation: isolate; background: var(--navy); overflow: hidden; }
.df-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: -2; }
.df-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0f1c4d, #0f1c4def 30%, #0f1c4db0 48%, #0f1c4d22 68%), linear-gradient(0deg, #172863dd, transparent 45%); }
.df-hero-in { min-height: 735px; position: relative; padding-block: 32px 72px; }
.df-hero-copy { max-width: 900px; width: 54%; }
.df .df-hero-lab { display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px 9px 13px; border-radius: 999px; background: #0f1c4dbf; box-shadow: inset 0 0 0 1px #93b8ea59; color: #e3efff; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.df-hero-lab::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #e0343c; box-shadow: 0 0 0 4px #e0343c33; }
.df .df-hero h1 { margin-top: 26px; font-size: clamp(56px, 4.7vw, 90px); font-weight: 900; line-height: .98; color: #fff; letter-spacing: -.055em; }
.df-hero h1 > span { display: block; }
.df .df-hero h1 .df-h1-sub { margin-top: 12px; font-size: .5em; line-height: 1.1; letter-spacing: -.035em; color: #cfe1f8; }
.df .df-deck { margin-top: 26px; color: #fff; font-size: clamp(22px, 1.8vw, 32px); line-height: 1.25; font-weight: 800; letter-spacing: -.03em; }
.df-deck em { color: #94cdf8; }
.df .df-hero-summary { color: #b8cbe3; font-size: 16px; line-height: 1.75; margin-top: 16px; max-width: 600px; }
.df-hero-caption { position: absolute; bottom: 50px; right: 0; display: grid; gap: 10px; width: 280px; }
.df-hero-caption span { color: #d1e8fc; font-size: 12px; letter-spacing: .05em; }
.df-hero-caption i { height: 1px; background: linear-gradient(90deg, #91ccf7, transparent); }
.df-hero-caption small { color: #9bbad8; font-size: 10px; }
.df-assurance { border-bottom: 1px solid #dce5f1; }
.df-assurance .cy-in { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 25px; gap: 24px; }
.df-assurance span { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #395c82; font-weight: 700; }
.df-assurance i { color: #2874b9; }

/* 01 lab */
.df-lab-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(35px, 5vw, 85px); align-items: center; }
.df-workbench { position: relative; overflow: hidden; border-radius: 12px; align-self: stretch; min-height: 600px; background: #0b1c32; }
.df-workbench img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.df-workbench::after, .df-specimen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #0f1c4df5, transparent 60%); pointer-events: none; }
.df-workbench figcaption { position: absolute; z-index: 1; bottom: 33px; left: 32px; right: 25px; font-size: 27px; line-height: 1.25; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.df-workbench figcaption span { display: block; font-size: 10px; font-weight: 400; letter-spacing: .04em; margin-top: 12px; color: #b6cfe7; }
.df-lab-note { display: flex; gap: 18px; padding: 23px 0; border-block: 1px solid #dce5f1; margin-top: 26px; }
.df-lab-note > i { color: #2772af; padding-top: 3px; }
.df .df-lab-note h3 { font-size: 17px; }
.df .df-lab-note p { margin-top: 10px; font-size: 14px; color: #61758d; line-height: 1.8; }

/* 02 managed detection */
.df-mdr { background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.df-mdr-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: center; }
.df-mdr .cy-button { margin-top: 28px; }
.df-monitor-art { position: relative; height: clamp(300px, 34vh, 440px); overflow: hidden; border-radius: 12px; background: var(--navy-2); }
.df-monitor-art img { width: 100%; height: 100%; object-fit: cover; }
.df-monitor-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #0f1c4dee, transparent 50%); }
.df-monitor-art figcaption { position: absolute; z-index: 1; bottom: 25px; left: 26px; right: 20px; color: #fff; }
.df-monitor-art figcaption span { font-size: 19px; font-weight: 700; display: block; letter-spacing: -.03em; }
.df-monitor-art figcaption small { display: block; font-size: 11px; color: #c8d0ee; margin-top: 8px; }
.df-monitor-platform { display: flex; justify-content: space-between; gap: 15px; padding-block: 16px; color: #b7c6ed; font-size: 11px; }
.df-monitor-platform small { color: #a0b1d8; font-size: 9px; }
.df-monitor-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; border-top: 1px solid #7084c766; padding-top: 19px; }
.df-monitor-outcomes li > span { display: block; color: #9db5ed; font: 10px ui-monospace, monospace; margin-bottom: 8px; }
.df-monitor-outcomes b { font-size: 15px; color: #fff; }
.df .df-monitor-outcomes p { font-size: 12px; color: #bfc9ee; margin-top: 8px; line-height: 1.65; }

/* 04 data breach */
.df-breach { background: radial-gradient(ellipse at 10% 100%, var(--band), var(--navy) 70%); }
.df-breach-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: end; }
.df-breach-top .cy-lead { margin-top: 0 !important; }
.df-breach-questions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; margin-top: 42px; }
.df-breach-questions article { padding-top: 22px; border-top: 1px solid #6285a666; }
.df-breach-questions span { color: #8cb6d9; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.df .df-breach-questions h3 { margin-block: 15px 12px; font-size: 22px; }
.df-breach-questions p { font-size: 14px; color: #a5bfd6; }
.df-breach-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 38px; }
.df-breach-bottom > p { max-width: 570px; color: #99b4cc; font-size: 13px; }

/* 05 malware analysis: the five techniques from the surface inward, then the outcome */
.df-mal-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(30px, 4vw, 80px); align-items: end; }
.df-specimen { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #0b192b; height: clamp(260px, 30vh, 340px); }
.df-specimen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.df-specimen figcaption { position: absolute; z-index: 1; bottom: 22px; left: 26px; right: 24px; display: grid; gap: 8px; color: #fff; }
.df-specimen figcaption span { color: #bbd8ef; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.df-specimen figcaption b { font-size: clamp(20px, 1.6vw, 28px); letter-spacing: -.035em; }
.df-specimen figcaption small { font-size: 10px; color: #adc0d4; }
.df-depth { margin-top: 34px; }
.df-depth-axis { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'a line b'; align-items: center; gap: 14px; width: calc(80% - 12px); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6c83a8; }
.df-depth-axis > span:first-child { grid-area: a; }
.df-depth-axis > i { grid-area: line; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #9cc0ea, #2f6db0 55%, #e0343c); position: relative; }
.df-depth-axis > i::after { content: ''; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 8px solid #e0343c; border-right: 0; }
.df-depth-axis > span:nth-of-type(2) { grid-area: b; color: #c42533; }
.df-depth-axis .ctx { position: absolute; left: calc(100% + 28px); white-space: nowrap; }
.df-depth-axis { position: relative; }
.df-techniques { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.df-techniques li { position: relative; display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #dce5f1, 0 10px 28px #0f1c4d0d; transition: transform .2s, box-shadow .2s; }
.df-techniques li::before { content: ''; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--tone, #9cc0ea); }
.df-techniques li:nth-child(2) { --tone: #5d93d3; }
.df-techniques li:nth-child(3) { --tone: #2f6db0; }
.df-techniques li:nth-child(4) { --tone: #e0343c; }
.df-techniques li.ctx { --tone: #7b8fb3; background: #f4f7fc; box-shadow: inset 0 0 0 1px #cfdaea; }
.df-techniques li.ctx::after { content: ''; position: absolute; left: -7px; top: 18px; bottom: 18px; border-left: 1px dashed #b3c3dc; }
.df-techniques li:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px #c3d3ec, 0 16px 34px #0f1c4d17; }
.df-t-n { font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: #7e93b6; }
.df-techniques b { margin-top: 12px; font-size: 18px; line-height: 1.2; font-weight: 800; color: #11234e; letter-spacing: -.02em; }
.df-techniques em { margin-top: 6px; font-size: 14px; font-weight: 700; color: #2f6db0; }
.df-techniques li:nth-child(4) em { color: #c42533; }
.df .df-techniques p { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: #5b6d87; }
.df-techniques small { align-self: flex-start; margin-top: auto; padding-top: 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6c83a8; }
.df-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; margin-top: 20px; padding: 20px 26px; border-radius: 14px; background: linear-gradient(120deg, #0f1c4d, #1b3276); color: #c8d6ee; }
.df-verdict-out { display: grid; gap: 4px; padding-right: 40px; border-right: 1px solid #8fb0ff33; }
.df-verdict-out span { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8fb3e6; }
.df-verdict-out b { font-size: 21px; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.df-verdict-out b i { font-style: normal; color: #e0343c; padding-inline: 4px; }
.df-verdict-out small { font-size: 12px; color: #a9c1e6; }
.df .df-verdict p { font-size: 13.5px; line-height: 1.7; color: #b9c9e4; }
.df-verdict p b { color: #fff; }
/* the techniques come in one after another, once, when the chapter is in view */
.df-techniques.rv li { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--n, 0) * 110ms); }
.df-techniques.rv.in li { opacity: 1; transform: none; }
.df-techniques.rv.in li:hover { transform: translateY(-3px); transition-delay: 0s; }

/* 06 incident response */
.df-response-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; margin-top: 35px; }
.df-response-grid article { border-top: 2px solid #99b9d6; padding-top: 21px; }
.df-response-grid article > span { display: block; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; color: #507a9f; margin-bottom: 25px; font-weight: 700; }
.df-response-grid article > i { color: #2b6ca6; margin-bottom: 20px; }
.df main .df-response-grid i svg { width: 32px; height: 32px; }
.df .df-response-grid h3 { font-size: 23px; }
.df .df-response-grid p { color: #5d748f; font-size: 14px; line-height: 1.85; margin-top: 15px; }
.df-six-questions { margin-top: 38px; border-top: 1px solid #d5e2ee; padding-top: 25px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.df-six-questions p { font-size: 13px; color: #526f8f; }
.df-six-questions > div { display: flex; gap: 23px; flex-wrap: wrap; color: #2e618f; font-size: 19px; font-weight: 800; }
.df #service-request { background: #fff; }

/* At desktop sizes, compose complete chapters within the space below both navigation bars.
   Proximity snapping settles nearby chapters without locking wheel/touch navigation. */
@media (min-width: 1100px) and (min-height: 700px) {
  html.df-page { scroll-snap-type: y proximity; }
  .df.cy main > section { scroll-snap-align: start; scroll-margin-top: calc(var(--cy-header) + var(--cy-jump)); }
  .df main > .cy-section { min-height: calc(100svh - var(--cy-header) - var(--cy-jump)); padding-block: clamp(26px, 4vh, 48px); display: flex; align-items: center; }
  .df.cy main > .df-hero { scroll-margin-top: var(--cy-header); }
  .df-hero-in { min-height: calc(100svh - var(--cy-header)); padding-block: 27px 45px; display: flex; flex-direction: column; justify-content: center; }
  .df-hero .cy-crumb { position: absolute; top: 25px; }
  .df-hero-copy { margin-top: 45px; }
  .df .cy-title { margin-bottom: 25px; }
  .df .cy-lead { font-size: 16px; line-height: 1.7; margin-top: 17px !important; }
  .df .df-body { font-size: 14px; line-height: 1.75; margin-top: 15px; }
  .df-workbench { min-height: 0; height: clamp(420px, 64vh, 660px); align-self: center; }
  .df-lab-note { padding: 18px 0; margin-top: 18px; }
  .df .df-lab-note p { font-size: 13px; }
  .df-breach-questions { margin-top: 32px; }
  .df-response-grid { margin-top: 24px; gap: 32px; }
  .df #incident-response .cy-title { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; }
  .df-response-grid article > span { margin-bottom: 15px; }
  .df-response-grid article > i { margin-bottom: 14px; }
  .df .df-response-grid p { font-size: 13px; line-height: 1.75; }
  .df-six-questions { margin-top: 27px; padding-top: 20px; }
  .df #service-request .cy-split { align-items: center; }
}
@media (min-width: 1100px) and (min-height: 700px) and (max-height: 850px) {
  .df .df-hero h1 { font-size: 64px; margin-top: 18px; }
  .df .df-hero-lab { font-size: 11px; padding-block: 7px; }
  .df-hero .cy-crumb { top: 20px; }
  .df .df-deck { font-size: 22px; margin-top: 16px; }
  .df .df-hero-summary { font-size: 13px; margin-top: 12px; }
  .df-hero .cy-actions { margin-top: 20px; }
  .df .cy-title > p { font-size: 14px; }
  .df .cy-lead { font-size: 14px; }
  .df .df-body { font-size: 13px; line-height: 1.7; }
  .df .df-lab-note h3 { font-size: 15px; }
  .df .df-lab-note p { font-size: 12px; }
  .df-lab-note { padding: 14px 0; margin-top: 14px; }
  .df .cy-link { margin-top: 16px; }
  .df .cy-title { margin-bottom: 20px; }
  .df .df-response-grid h3 { font-size: 20px; }
  .df-response-grid article > span { margin-bottom: 11px; }
  .df-response-grid article > i { margin-bottom: 10px; }
  .df .df-response-grid p { font-size: 12px; }
  .df-six-questions { margin-top: 20px; padding-top: 15px; }
  .df #incident-response .cy-actions { margin-top: 20px; }
  .df #service-request { padding-block: 20px; }
  .df-monitor-art { height: 295px; }
  .df .df-monitor-outcomes p { font-size: 11px; }
}
/* the chapter heads and the malware sequence also tighten on 900-pixel-high screens (1440 × 900) */
@media (min-width: 1100px) and (min-height: 700px) and (max-height: 950px) {
  .df main .df-chead h2 { font-size: 40px; }
  .df .df-line { font-size: 18px; margin-top: 9px; }
  .df .df-n { margin-bottom: 11px; }
  .df-chead + .cy-lead { margin-top: 14px !important; }
  .df-mal-top .cy-lead { font-size: 13px; }
  .df-specimen { height: 200px; }
  .df-depth { margin-top: 18px; }
  .df-techniques { margin-top: 12px; }
  .df-techniques li { padding: 14px 16px 13px; }
  .df-techniques b { margin-top: 8px; font-size: 16px; }
  .df-techniques em { font-size: 13px; }
  .df .df-techniques p { font-size: 12px; line-height: 1.55; margin-top: 6px; }
  .df-techniques small { padding-top: 9px; font-size: 9.5px; }
  .df-verdict { margin-top: 12px; padding: 13px 22px; }
  .df-verdict-out b { font-size: 18px; }
  .df .df-verdict p { font-size: 12px; line-height: 1.6; }
  .df-mal-top .df-chead h2 { font-size: 40px; }
}
@media (max-width: 1500px) { .df-techniques li { padding-inline: 16px; } }
@media (max-width: 1200px) {
  .df-hero-copy { width: 62%; }
  .df-hero::before { background: linear-gradient(90deg, #0f1c4dfa, #0f1c4ddc 35%, #0f1c4d70 62%, #0f1c4d33); }
  .df-mdr-grid, .df-breach-top { gap: 40px; }
  .df-assurance .cy-in { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .df-techniques { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .df-verdict { grid-template-columns: auto minmax(0, 1fr); }
  .df-verdict .cy-button { grid-column: 1 / -1; justify-self: start; }
  .df-depth-axis { display: none; }
  .df-techniques li.ctx::after { display: none; }
}
@media (max-width: 900px) {
  .df-hero-copy { width: 80%; }
  .df-hero-in { min-height: 720px; }
  .df-hero-caption { display: none; }
  .df-lab-grid, .df-mdr-grid, .df-breach-top, .df-mal-top { grid-template-columns: 1fr; }
  .df-lab-grid { gap: 35px; }
  .df-workbench { min-height: 430px; }
  .df-lab-grid > div { grid-row: 1; }
  .df-mdr-grid { gap: 35px; }
  .df-techniques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .df-verdict { grid-template-columns: 1fr; }
  .df-verdict-out { padding-right: 0; border-right: 0; }
  .df-six-questions { align-items: flex-start; flex-direction: column; gap: 17px; }
  .df-breach-bottom { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .df-monitor-art { height: 320px; }
  .df-monitor-art figcaption { left: 22px; bottom: 22px; }
  .df-monitor-art figcaption span { font-size: 18px; }
  .df-monitor-platform { flex-direction: column; gap: 7px; }
  .df-monitor-outcomes { gap: 13px; }
  .df-monitor-outcomes b { font-size: 12px; }
  .df .df-monitor-outcomes p { font-size: 11px; }
  .df-hero-in { padding-block: 27px 55px; min-height: 680px; }
  .df-hero .cy-crumb { margin-bottom: 35px; font-size: 10px; }
  .df-hero-copy { width: 100%; }
  .df .df-hero h1 { font-size: clamp(44px, 11vw, 60px); }
  .df-hero-art { object-position: 66% center; opacity: .58; }
  .df-hero::before { background: linear-gradient(90deg, #0f1c4df5, #0f1c4da6), linear-gradient(0deg, #172863, transparent 70%); }
  .df .df-hero-lab { font-size: 10px; }
  .df .df-deck { font-size: 22px; }
  .df .df-hero-summary { font-size: 14px; }
  .df-hero .cy-button { font-size: 12px; padding-inline: 17px; }
  .df main .df-chead h2 { font-size: clamp(30px, 8vw, 40px); }
  .df-assurance span { font-size: 10px; gap: 8px; align-items: flex-start; }
  .df-assurance i svg { width: 19px; height: 19px; }
  .df-workbench { min-height: 360px; }
  .df-workbench figcaption { left: 23px; bottom: 25px; font-size: 23px; }
  .df-techniques { grid-template-columns: 1fr; }
  .df-breach-questions, .df-response-grid { grid-template-columns: 1fr; gap: 27px; }
  .df-six-questions > div { gap: 15px 23px; font-size: 17px; }
  .df #incident-response .cy-button { font-size: 11px; padding-inline: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .df-techniques.rv li { opacity: 1; transform: none; transition: none; }
  .df-techniques li { transition: none; }
}