/* DNS Shield uses the WAFGuard product shell with page-specific presentation. */
.dns-page [hidden] { display:none !important; }
.dns-page .hero-grid { grid-template-columns:1.1fr 1fr; gap:66px; padding-block:78px 60px; }
.dns-page .hero h1 { font-size:clamp(43px,4.3vw,61px); letter-spacing:-2.5px; line-height:1.14; }
.dns-page .hero-eyebrow { font-size:11px; letter-spacing:1.35px; margin-bottom:28px; }
.dns-product-mark { width:27px; height:29px; color:var(--accent); display:inline-flex; align-items:center; }
.dns-product-mark svg { width:26px; height:26px; }
.dns-page .hero-lede { max-width:485px; line-height:1.85; }
.dns-page .hero-note { font-size:12px; margin-top:21px; line-height:1.75; }
.dns-page .trust-strip { justify-content:flex-start; gap:65px; padding-block:23px; }
.dns-story { margin:0; border:1px solid #395568; background:#102c40; border-radius:12px; overflow:hidden; box-shadow:0 26px 70px #03152144; }
.dns-story figcaption { display:flex; align-items:center; gap:10px; padding:18px 23px; border-bottom:1px solid #365165; color:#cfdee6; font-size:12px; font-weight:500; }
.dns-scenarios { display:flex; gap:5px; padding:17px 21px 0; }
.dns-scenarios>button { flex:1; background:transparent; color:#b4cbd8; border:1px solid transparent; border-radius:4px; font-size:10px; padding:9px 5px; line-height:1.4; min-height:38px; }
.dns-scenarios>button[aria-pressed="true"] { background:#213f51; color:#e6f5fc; border-color:#4b677a; }
.dns-scenarios>button:hover { color:#fff; background:#213f51; }
.dns-story-body { padding:25px 23px 24px; }
.dns-request { display:flex; align-items:center; gap:15px; }
.dns-device-icon { color:#b1cddd; width:40px; height:40px; background:#1c394d; border:1px solid #3e5c6f; border-radius:6px; display:grid; place-items:center; flex:none; }
.dns-device-icon svg { width:27px; height:27px; }
.dns-diagram-label { display:block; font-size:10px; color:#acc4d3; line-height:1.5; }
.dns-request code { display:block; color:#eff7fc; font-size:15px; margin-top:3px; letter-spacing:-.2px; }
.dns-query-tag { margin-left:auto; font-size:9px; color:#adc8d8; border:1px solid #3e5c6f; border-radius:3px; padding:2px 6px; }
.dns-flow-link { display:flex; flex-direction:column; align-items:center; height:47px; justify-content:center; color:#88b4bb; font-size:17px; line-height:1; }
.dns-flow-link>span:first-child { width:1px; height:18px; background:#567c8c; }
.dns-flow-link>span:last-child { margin-top:-7px; }
.dns-engine { border:1px solid #6abcaa8c; border-radius:7px; padding:18px 18px 0; background:#143c41; box-shadow:0 0 40px #92ebca05; }
.dns-engine-heading { display:flex; gap:9px; align-items:center; }
.dns-engine-heading svg { width:23px; height:25px; color:var(--accent); flex:none; }
.dns-engine-heading strong { font-family:var(--heading); font-weight:600; font-size:17px; color:#e9fff6; letter-spacing:-.3px; }
.dns-engine-heading>span { margin-left:auto; font-size:9px; color:#b2d6d0; }
.dns-engine-inputs { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:#c0e2db; padding-block:15px 17px; font-size:10px; }
.dns-engine-inputs>span:not([aria-hidden]) { background:#173f44; border:1px solid #3f6969; padding:3px 7px; border-radius:3px; }
.dns-engine-inputs>span[aria-hidden] { color:#8ecdbd; }
#dns-signal { color:#b4d5cf; border-top:1px solid #3f6666; font-size:10px; padding-block:12px; min-height:42px; }
#dns-signal>span { color:#8fcdbd; padding-right:7px; }
.dns-outcome { display:flex; align-items:center; gap:12px; border:1px solid #ddaf9b61; background:#b485700e; border-radius:6px; padding:17px 15px; min-height:86px; }
.dns-outcome-icon { color:#f5bca7; font-size:27px; line-height:1; width:22px; flex:none; text-align:center; }
.dns-outcome strong { display:block; color:#ffcebb; font-size:13px; font-weight:600; line-height:1.4; }
.dns-outcome p { color:#c2cdd3; font-size:10px; line-height:1.7; margin-top:4px; }
.dns-outcome-label { font-size:10px; margin-left:auto; color:#f3bfaa; border:1px solid #c79c8955; border-radius:3px; padding:3px 7px; }
.dns-outcome[data-tone="allowed"] { border-color:#6abcaa73; background:#173d40; }
.dns-outcome[data-tone="allowed"] .dns-outcome-icon,.dns-outcome[data-tone="allowed"] strong,.dns-outcome[data-tone="allowed"] .dns-outcome-label { color:#a5ebce; }
.dns-outcome[data-tone="allowed"] .dns-outcome-label { border-color:#5c978a77; }
.dns-story-note { color:#a7c0cf; font-size:9px; line-height:1.7; padding:12px 21px; text-align:center; border-top:1px solid #304d61; background:#0d293c; }
.dns-page .section-heading>p { font-size:14px; max-width:330px; }
.dns-protection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #b7cdd5; }
.dns-protection-grid article { padding:30px 33px 0; border-left:1px solid var(--line); }
.dns-protection-grid article:first-child { padding-left:0; border:0; }
.dns-protection-grid article:last-child { padding-right:0; }
.dns-use-icon { width:32px; height:32px; color:#2f7471; display:block; margin-bottom:21px; }
.dns-protection-grid h3 { font-size:19px; }
.dns-protection-grid p { font-size:14px; line-height:1.85; color:var(--muted); margin-top:14px; }
.dns-use-detail { display:block; font-size:10px; color:#416b75; font-weight:600; margin-top:21px; }
.dns-workflow-section { background:var(--paper); border-block:1px solid var(--line); }
.dns-workflow { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dns-workflow li { display:flex; flex-direction:column; padding-right:45px; }
.dns-workflow .step-detail { margin-top:auto; padding-top:20px; }
.dns-workflow p { max-width:300px; }
.dns-workflow li:before { border-color:var(--paper); }
.dns-deployment-section { background:#eef4f4; }
.dns-deployment-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:100px; align-items:center; }
.dns-deployment-copy>p:not(.eyebrow) { max-width:455px; color:var(--muted); font-size:16px; line-height:1.85; margin-top:24px; }
.dns-planning-note { display:flex; align-items:flex-start; gap:12px; margin-top:23px; max-width:450px; }
.dns-planning-note>span { color:#387970; line-height:1.6; font-size:22px; }
.dns-planning-note>p { color:#43656c; font-size:12px; line-height:1.9; }
.dns-deployment-copy>.inline-link { margin-top:17px; }
.dns-deployment-options { border:1px solid #cbdadb; background:#fff; border-radius:8px; padding:4px 28px 0; }
.dns-deployment-option { display:flex; gap:20px; padding-block:26px; border-bottom:1px solid var(--line); }
.dns-option-number { font-size:12px; line-height:25px; font-family:ui-monospace,monospace; color:#527884; }
.dns-deployment-option h3 { font-size:20px; }
.dns-deployment-option p { color:var(--muted); font-size:14px; line-height:1.85; margin-top:11px; }
.dns-deployment-foot { color:#587381; font-size:11px; line-height:1.8; padding-block:18px; }
.dns-faq-section { background:#fff; }
.dns-page .faq-list p a { text-decoration:underline; text-underline-offset:3px; color:var(--blue); }
.dns-page .closing-grid { grid-template-columns:1.4fr 1fr; gap:110px; }
.dns-engagement { border-left:1px solid #39576b; padding:10px 0 10px 43px; }
.dns-engagement h3 { font-size:22px; font-weight:600; line-height:1.4; margin-top:12px; }
.dns-engagement p { font-size:13px; color:#b7cddc; line-height:1.85; margin-top:17px; }
.dns-engagement a { display:inline-flex; align-items:center; gap:20px; color:var(--accent); font-size:15px; font-weight:500; padding-block:8px; margin-top:18px; }
.dns-engagement a:hover { text-decoration:underline; text-underline-offset:4px; }
.dns-engagement-note { display:block; color:#a8c1d0; font-size:10px; margin-top:10px; }
@media(min-width:1440px) { .dns-page .hero-grid { padding-block:86px 70px; } }
@media(max-width:1100px) {
    .dns-page .hero-grid { gap:40px; }
    .dns-page .hero h1 { font-size:clamp(43px,4.3vw,50px); }
    .dns-page .trust-strip { gap:35px; }
    .dns-deployment-grid { gap:60px; }
    .dns-protection-grid article { padding-inline:25px; }
    .dns-page .closing-grid { gap:65px; }
}
@media(max-width:900px) {
    .dns-page .hero-grid { grid-template-columns:1fr 1fr; gap:30px; padding-block:54px 40px; }
    .dns-page .hero h1 { font-size:42px; letter-spacing:-1.9px; }
    .dns-page .hero-eyebrow { font-size:9px; gap:8px; letter-spacing:1px; }
    .dns-page .hero-note { font-size:11px; }
    .dns-page .trust-strip { gap:26px; font-size:10px; }
    .dns-story figcaption { padding-inline:17px; gap:7px; font-size:10px; }
    .dns-scenarios { padding-inline:13px; gap:3px; }
    .dns-scenarios>button { font-size:9px; padding:8px 4px; min-height:43px; }
    .dns-story-body { padding:21px 17px; }
    .dns-request { gap:11px; }
    .dns-request code { font-size:13px; }
    .dns-query-tag { font-size:8px; padding-inline:4px; }
    .dns-engine { padding:16px 13px 0; }
    .dns-engine-heading { gap:7px; }
    .dns-engine-heading strong { font-size:16px; }
    .dns-engine-heading>span { font-size:8px; }
    .dns-engine-inputs { font-size:9px; gap:6px; }
    .dns-engine-inputs>span:not([aria-hidden]) { padding-inline:6px; }
    #dns-signal { font-size:9px; }
    .dns-outcome { gap:9px; padding:14px 10px; }
    .dns-outcome strong { font-size:12px; }
    .dns-outcome-label { font-size:9px; padding-inline:5px; }
    .dns-story-note { font-size:9px; padding-inline:15px; }
    .dns-page .section-heading>p { font-size:12px; max-width:255px; }
    .dns-protection-grid h3 { font-size:18px; }
    .dns-protection-grid p { font-size:13px; }
    .dns-protection-grid article { padding-inline:20px; }
    .dns-workflow { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .dns-workflow li { padding-right:23px; }
    .dns-workflow p { max-width:100%; font-size:13px; }
    .dns-workflow-section .inline-link { font-size:11px; max-width:205px; }
    .dns-deployment-grid { gap:40px; }
    .dns-deployment-copy>p:not(.eyebrow) { font-size:14px; }
    .dns-deployment-options { padding-inline:20px; }
    .dns-deployment-option { gap:15px; }
    .dns-deployment-option h3 { font-size:18px; }
    .dns-deployment-option p { font-size:13px; }
    .dns-page .closing-grid { gap:40px; }
    .dns-engagement { padding-left:30px; }
    .dns-engagement h3 { font-size:20px; }
}
@media(max-width:700px) {
    .dns-page .hero-grid { grid-template-columns:1fr; padding-block:42px 32px; gap:36px; }
    .dns-page .hero h1 { font-size:clamp(36px,8.8vw,58px); letter-spacing:-1.9px; }
    .dns-page .hero-eyebrow { font-size:10px; gap:10px; margin-bottom:25px; }
    .dns-page .hero-lede { max-width:520px; margin-top:22px; }
    .dns-page .hero-note { font-size:11px; margin-top:17px; }
    .dns-story { max-width:500px; width:100%; margin:auto; }
    .dns-story figcaption { font-size:11px; padding:17px 18px; gap:8px; }
    .dns-story .example-tag { font-size:9px; }
    .dns-scenarios { padding:16px 14px 0; gap:4px; }
    .dns-scenarios>button { font-size:10px; min-height:43px; }
    .dns-story-body { padding:23px 18px; }
    .dns-request code { font-size:15px; }
    .dns-query-tag { font-size:9px; padding-inline:6px; }
    .dns-engine { padding:17px 15px 0; }
    .dns-engine-heading strong { font-size:17px; }
    .dns-engine-heading>span { font-size:9px; }
    .dns-engine-inputs { font-size:10px; gap:6px; }
    #dns-signal { font-size:10px; }
    .dns-outcome { padding:16px 12px; gap:10px; min-height:88px; }
    .dns-outcome strong { font-size:13px; }
    .dns-outcome-label { font-size:10px; padding-inline:6px; }
    .dns-page .trust-strip { grid-template-columns:1fr; gap:12px; font-size:12px; padding-block:22px 28px; }
    .dns-page .section-heading>p { max-width:100%; font-size:14px; margin-top:20px; }
    .dns-protection-grid { grid-template-columns:1fr; }
    .dns-protection-grid article,.dns-protection-grid article:first-child,.dns-protection-grid article:last-child { border:0; border-bottom:1px solid var(--line); padding:28px 0; }
    .dns-protection-grid article:last-child { padding-bottom:0; border:0; }
    .dns-protection-grid h3 { font-size:20px; }
    .dns-protection-grid p { font-size:14px; }
    .dns-use-icon { margin-bottom:18px; }
    .dns-use-detail { font-size:11px; margin-top:18px; }
    .dns-workflow { grid-template-columns:1fr; }
    .dns-workflow p { font-size:14px; }
    .dns-workflow li:last-child:after { background:var(--paper); }
    .dns-workflow-section .inline-link { margin-top:16px; font-size:12px; max-width:100%; }
    .dns-deployment-grid { grid-template-columns:1fr; gap:30px; }
    .dns-deployment-copy>p:not(.eyebrow) { max-width:520px; margin-top:20px; }
    .dns-planning-note { margin-top:20px; }
    .dns-deployment-options { padding-inline:23px; }
    .dns-deployment-option { padding-block:24px; gap:17px; }
    .dns-deployment-option h3 { font-size:19px; }
    .dns-page .closing-grid { grid-template-columns:1fr; gap:36px; }
    .dns-engagement { border:0; border-top:1px solid #39576b; padding:28px 0 0; }
    .dns-engagement h3 { font-size:22px; }
}
@media(max-width:375px) {
    .dns-page .hero h1 { font-size:33px; letter-spacing:-1.6px; }
    .dns-page .hero-eyebrow { font-size:9px; gap:8px; }
    .dns-story figcaption { font-size:10px; padding-inline:14px; }
    .dns-story .example-tag { font-size:8px; }
    .dns-scenarios { padding-inline:10px; }
    .dns-scenarios>button { font-size:9px; }
    .dns-story-body { padding-inline:14px; }
    .dns-request code { font-size:13px; }
    .dns-request { gap:9px; }
    .dns-device-icon { width:35px; height:37px; }
    .dns-engine-heading strong { font-size:15px; }
    .dns-engine-heading>span { font-size:8px; }
    .dns-engine-inputs { font-size:9px; gap:5px; }
    #dns-signal { font-size:9px; }
    .dns-outcome strong { font-size:12px; }
    .dns-outcome-label { font-size:9px; }
}