/* Commercial context section, scoped to the DDoS page. */
.ddos-context { background: #eef4fc; padding: 65px 40px; color: #263449; }
.ddos-context-inner { max-width: 900px; margin: auto; }
.ddos-context-copy h2 { margin: 0 0 25px; font: 550 clamp(29px, 2.8vw, 38px)/1.3 Montserrat, Inter, sans-serif; letter-spacing: -.04em; text-wrap: balance; }
.ddos-context-copy p { margin: 0; color: #536680; font-size: 16px; line-height: 1.85; }
.ddos-context-copy p + p { margin-top: 20px; }
@media (max-width: 760px) { .ddos-context { padding: 46px 24px; } .ddos-context-copy p { font-size: 14px; } }

/* Layout references: OVHcloud Anti-DDoS compact benefits + traffic diagram;
   Tailscale expandable rows; Cloudflare centred CTA. Scoped to this DDoS page. */
.ddos-page { background: #fff; color: #263449; }
.ddos-inner { max-width: 1160px; margin: auto; }
.ddos-benefits, .ddos-path, .ddos-uses { padding: 66px 40px; }
.ddos-benefits h2, .ddos-path h2, .ddos-uses h2, .ddos-support h2 { margin: 0 0 36px; font: 550 clamp(29px, 2.8vw, 38px)/1.3 Montserrat, Inter, sans-serif; letter-spacing: -.04em; text-wrap: balance; }
.ddos-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.ddos-benefit-grid article { border-top: 2px solid #dce8fa; padding-top: 22px; }
.ddos-benefit-grid h3 { margin: 0 0 16px; color: #1759b5; font: 600 21px/1.35 Montserrat, Inter, sans-serif; letter-spacing: -.03em; }
.ddos-benefit-grid p, .ddos-path-copy p, .ddos-support-copy p, .ddos-use-list p { margin: 0; color: #536680; font-size: 15px; line-height: 1.85; }
.ddos-path { background: #fff; }
.ddos-path h2 { max-width: 800px; }
.ddos-path-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin: 42px 0; padding: 0; list-style: none; }
.ddos-path-stages li { position: relative; background: #eef4fc; border: 1px solid #d7e3f4; border-radius: 5px; padding: 28px; }
.ddos-path-stages li:nth-child(2) { background: #17498e; border-color: #17498e; color: #fff; }
.ddos-path-stages li:not(:last-child)::after { content: '→'; position: absolute; top: 50%; right: -34px; color: #1761da; font-size: 25px; transform: translateY(-50%); }
.ddos-path-stages strong { display: block; font: 600 18px/1.4 Montserrat, Inter, sans-serif; }
.ddos-path-stages p { margin: 14px 0 0; color: #536680; font-size: 14px; line-height: 1.75; }
.ddos-path-stages li:nth-child(2) p { color: #e0ebff; }
.ddos-path-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; }
.ddos-path-copy p + p, .ddos-use-list p + p, .ddos-support-copy p + p { margin-top: 20px; }
.ddos-path-copy a { display: inline-flex; gap: 24px; margin-top: 25px; color: #1759b5; font-size: 14px; font-weight: 600; text-decoration: none; }
.ddos-uses { background: #f5f7fa; }
.ddos-use-list { border-top: 1px solid #d6dfec; }
.ddos-use-list details { border-bottom: 1px solid #d6dfec; }
.ddos-use-list summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 25px 0; list-style: none; cursor: pointer; color: #173c77; font: 550 23px/1.4 Montserrat, Inter, sans-serif; letter-spacing: -.025em; }
.ddos-use-list summary::-webkit-details-marker { display: none; }
.ddos-use-list summary::marker { content: ''; }
.ddos-use-toggle { font: 400 28px/1 Inter, sans-serif; color: #1761da; }
.ddos-use-list details[open] .ddos-use-toggle { transform: rotate(45deg); }
.ddos-use-list details > div { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 0 60px 28px 0; }
.ddos-use-list details > div p + p { margin-top: 0; }
.ddos-support { padding: 72px 40px; color: #fff; background: #123b78; text-align: center; }
.ddos-support h2 { max-width: 780px; margin-inline: auto; }
.ddos-support-copy { max-width: 840px; margin: auto; }
.ddos-support-copy p { color: #deebff; }
.ddos-support a { display: inline-flex; gap: 28px; padding: 15px 21px; margin-top: 30px; background: #fff; color: #17478d; border-radius: 4px; text-decoration: none; font-size: 14px; font-weight: 600; }
@media (max-width: 1000px) { .ddos-benefit-grid { gap: 24px; } .ddos-path-stages { gap: 30px; } .ddos-path-stages li { padding: 23px; } .ddos-path-stages li:not(:last-child)::after { right: -25px; font-size: 21px; } }
@media (max-width: 760px) { .ddos-benefits, .ddos-path, .ddos-uses, .ddos-support { padding: 46px 24px; } .ddos-benefit-grid, .ddos-path-copy, .ddos-use-list details > div { grid-template-columns: 1fr; gap: 24px; } .ddos-path-stages { grid-template-columns: 1fr; gap: 35px; margin: 30px 0; } .ddos-path-stages li:not(:last-child)::after { content: '↓'; right: 50%; top: auto; bottom: -30px; transform: translateX(50%); } .ddos-use-list summary { font-size: 20px; padding-block: 22px; } .ddos-use-list details > div { padding: 0 0 25px; gap: 18px; } .ddos-benefit-grid p, .ddos-path-copy p, .ddos-use-list p, .ddos-support-copy p { font-size: 14px; } }
