/* Nodewave public site: final polish layer (2026-10-03).

   Loaded after every other stylesheet on the marketing pages. Each block fixes

   one visible inconsistency left by earlier layers; keep it that way. */



/* Typography: no single orphaned word at the end of a heading or paragraph. */

main h1,main h2,main h3{text-wrap:balance}

main p,.faq-list details p{text-wrap:pretty}



/* Footer: contact details on their own lines, one link style throughout. */

.footer-main>div:first-child a[href^="mailto:"],

.footer-main>div:first-child a[href^="tel:"]{display:block;width:fit-content;margin-top:10px;font:400 13px/1.5 var(--nw-font);color:#a3afba;text-decoration:none}

.footer-main>div:first-child a[href^="mailto:"]{margin-top:20px}

.footer-main>div:not(:first-child) a,

.footer-main>div:not(:first-child) button{all:unset;cursor:pointer;width:fit-content;font:400 13px/1.5 var(--nw-font);color:#93a1ad;transition:color .15s}

.footer-main a:hover,.footer-main button:hover{color:#f0c9a5}

.footer-main>div:not(:first-child) button:focus-visible,.footer-main a:focus-visible{outline:2px solid #efb791;outline-offset:3px;border-radius:3px}

.footer-main small{font:600 11px var(--nw-font);letter-spacing:.08em;color:#e8a77a}

.footer-bottom span:last-child{text-transform:none;letter-spacing:0}



/* Pricing: section headings use the same type as every other heading. */

.compare-heading h3,.included-head h3{font:650 clamp(28px,3vw,40px)/1.1 var(--nw-font);letter-spacing:-.04em;word-spacing:normal;text-transform:none;color:#eef0f1}

.compare-heading span,.included-head span{font:500 12px var(--nw-font);letter-spacing:.01em;text-transform:none;color:#d5b89f}

.included-grid strong{font:600 18px/1.3 var(--nw-font);letter-spacing:-.01em;text-transform:none;color:#eef0f1}

.included-grid span{font:500 11px var(--nw-font);letter-spacing:.02em;text-transform:none;color:#d5b89f}



/* Operating systems: ready images lead, with real versions; the rest are quiet. */

.os-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.os-pill{position:relative;min-width:0;display:flex;align-items:center;gap:12px;padding:14px 15px;border:1px solid #ffffff12;border-radius:14px;background:#1a2027;color:#dfe4e8}

.os-pill-logo{flex:none}

.os-pill-text{display:grid;gap:3px;min-width:0}

.os-pill-text strong{font:500 13px var(--nw-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.os-pill-text small,.os-pill small{margin:0;font:400 11px var(--nw-font);color:#7f8c98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.os-pill.ready{border-color:#86b9923d;background:linear-gradient(135deg,#1d2a26,#1a2027 70%)}

.os-pill.ready .os-pill-text small{color:#b9cfc0}

.os-pill-state{position:absolute;top:10px;right:11px;width:7px;height:7px;border-radius:50%;background:#86b992;box-shadow:0 0 0 3px #86b99224;font-size:0}



/* Dashboard showcase: the steps sit together instead of stretching to the image height. */

.platform-points{align-self:start;align-content:start;gap:6px;padding-top:6px}

.platform-points>div{padding-block:18px}

.platform-screenshot{aspect-ratio:auto;height:auto;object-fit:contain;background:#0f1419}



/* Hero live card: the percent sign sits on the baseline next to the value. */

#load-cpu{font-variant-numeric:tabular-nums}



@media(max-width:1100px){.os-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:620px){

  .os-list{grid-template-columns:1fr 1fr;gap:8px}

  .os-pill{padding:12px;gap:10px}

  .compare-heading h3,.included-head h3{font-size:clamp(26px,7.5vw,32px)}

  .footer-main>div:first-child a[href^="mailto:"]{margin-top:14px}

}

@media(max-width:340px){.os-list{grid-template-columns:1fr}}



/* Dashboard showcase: the steps travel with the screenshot on wide screens. */

@media(min-width:851px){.platform-points{position:sticky;top:112px}}



/* Protection: the live panel is the visual; the copy column lists what it shows. */

.protection-visibility-points{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;max-width:440px;border-top:1px solid #ffffff12}

.protection-visibility-points li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid #ffffff12}

.protection-visibility-points strong{font:600 13px/1.5 var(--nw-font);color:#eef0f1}

.protection-visibility-points span{font:400 13px/1.5 var(--nw-font);color:#8e9fab}

@media(max-width:620px){.protection-visibility-points li{grid-template-columns:1fr;gap:3px}}



/* Pricing is its own page: its billing FAQ follows the plans and stays visible. */

body.view-pricing main>.pricing-faq{display:block}



/* Not-found page: one calm message and the main ways back. */

.not-found-page{min-height:100vh;display:flex;flex-direction:column}

.not-found{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:96px}

.not-found .eyebrow{align-self:flex-start}

.not-found h1{margin:18px 0 0;font:600 clamp(40px,6vw,72px)/1.05 var(--nw-font);letter-spacing:-.045em;color:#eef0f1}

.not-found p{margin:20px 0 0;max-width:520px;font:400 15px/1.8 var(--nw-font);color:#8e9fab}

.not-found-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}

/* Dark sections: slate glass across public pages (owner request 2026-10-03) */

.game-stack-visual,.protection-illustration{background:linear-gradient(180deg,#151c25 0%,#10161d 100%);border:1px solid #ffffff14;box-shadow:0 30px 80px #00000073,inset 0 1px 0 #ffffff0d;color:#eef1f4}

.stack-visual-top{color:#8f9aa7}

.stack-visual-top span:last-child{color:#d6a079}

.game-stack-main,.game-stack-layer{background:#0c1117;border-color:#ffffff0f}

.game-stack-main{background:#efae8614;border-color:#efae8638}

.stack-layer-number{color:#6f7c89}

.game-stack-main small,.game-stack-foundation span{color:#d6a079}

.game-stack-main strong,.game-stack-layer strong,.game-stack-foundation strong{color:#f1f3f5}

.game-stack-main p,.game-stack-layer p,.game-stack-foundation small{color:#8f9aa7}

.game-stack-main svg{stroke:#efae86}

.game-benefits-band,.protection-flow-section{background:#121921;color:#eef1f4;border-top:1px solid #ffffff0d}

.game-benefits-band .product-page-heading h2,.protection-flow-section .protection-section-heading h2{color:#f1f3f5}

.game-benefits-band .product-page-heading h2 span,.protection-flow-section .protection-section-heading h2 span{color:#8c9aa5}

.game-benefits-band .product-page-heading>p,.protection-flow-section .protection-section-heading>p{color:#8f9aa7}

.game-benefits-grid article,.protection-flow li{background:linear-gradient(180deg,#151c25 0%,#10161d 100%);border-color:#ffffff12}

.game-benefits-grid article>span,.protection-flow li>span{color:#d6a079}

.game-benefits-grid h3,.protection-flow strong{color:#eef1f4}

.game-benefits-grid p,.protection-flow p{color:#8f9aa7}

.game-benefits-grid a{color:#efae86}

.protection-validation{color:#8f9aa7}

.protection-validation .status-light{background:#6fbf8e}

.protection-validation strong{color:#cfe7d7}

/* Support: how tickets work, with a direct route into the dashboard. */

.support-section{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;align-items:center;padding-block:97px;border-top:1px solid #ffffff09}

.support-copy h2{font:500 clamp(35px,3.9vw,53px)/1.15 var(--nw-font);letter-spacing:-.045em;margin-bottom:22px}

.support-copy>p{font:400 14px/1.85 var(--nw-font);color:#8897a6;max-width:520px}

.support-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.support-note{font:400 12px/1.7 var(--nw-font)!important;color:#748596!important;margin:16px 0 0}

.support-steps{list-style:none;margin:0;padding:0;display:grid;gap:11px}

.support-steps li{display:flex;gap:18px;align-items:flex-start;border:1px solid #ffffff0e;border-radius:16px;background:linear-gradient(145deg,#1b222a,#171e25);padding:22px 24px}

.support-steps span{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#efad8214;border:1px solid #efad8233;color:#e6b593;font:500 12px var(--nw-font)}

.support-steps h3{font:500 16px/1.4 var(--nw-font);letter-spacing:-.02em;color:#dce2e7;margin:5px 0 6px}

.support-steps p{font:400 13px/1.75 var(--nw-font);color:#8b9aa9;margin:0}

.signup-dialog .email-signup{width:100%;justify-content:center;gap:10px;margin-top:12px}

@media(max-width:850px){.support-section{grid-template-columns:1fr;gap:36px}}

@media(max-width:620px){.support-section{padding-block:72px}.support-actions .button{flex:1 1 100%;justify-content:space-between}.support-steps li{padding:18px;gap:14px}}
/* DDoS panel: lead with the outcome. Mitigated reads as protection working (calm green); blackholes stay
   honest (amber); an unverified feed stays neutral (slate). */
.ddos-outcome{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;max-width:100%;margin:0 0 18px;padding:7px 12px 7px 10px;border-radius:20px;border:1px solid #ffffff12;background:#ffffff05;color:#a9b5c1;font:500 12px/1.3 var(--nw-font)}
.ddos-outcome svg{width:15px;height:15px;flex:none}
.ddos-outcome[data-tone=mitigated],.ddos-outcome[data-tone=calm]{color:#9fdcbc;border-color:#5fcf9a38;background:#5fcf9a12}
.ddos-outcome[data-tone=blackholed]{color:#f2c886;border-color:#e8a33d45;background:#e8a33d14}
.ddos-panel .ddos-total span{color:#8fa1b1}
.ddos-bar{display:flex;flex-direction:column-reverse;overflow:hidden;border-radius:6px 6px 2px 2px;background:#ffffff0d}
.ddos-bar.has-events{background:none;box-shadow:none}
.ddos-seg{display:block;width:100%;min-height:3px}
.ddos-seg.mitigated{background:linear-gradient(0deg,#2f9e72,#72d9ab)}
.ddos-seg.blackholed{background:linear-gradient(0deg,#c47f27,#f0b45a)}
.ddos-seg.events{background:linear-gradient(0deg,#5a6875,#8d9cab)}
.ddos-bar.has-events:has(.mitigated){box-shadow:0 0 18px #4cc28a26}
.ddos-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;min-height:14px;font:400 10px var(--nw-font);color:#8193a3}
.ddos-key{display:inline-flex;align-items:center;gap:6px}
.ddos-key:before{content:"";width:8px;height:8px;border-radius:2px;background:#8d9cab}
.ddos-key.mitigated:before{background:#5fcf9a}
.ddos-key.blackholed:before{background:#e8a33d}
@media(prefers-reduced-motion:reduce){.ddos-bar.has-events{box-shadow:none}}


.region-country.has-flag{display:grid;place-items:center;padding:7px}.region-country.has-flag img{display:block;width:30px;height:20px;border-radius:3px;box-shadow:0 0 0 1px #ffffff1f}

/* Language menu (header) and language links (footer); see i18n.py. */

.lang-menu{position:relative;flex:none}

.lang-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;min-height:35px;padding:0 10px;border:1px solid #ffffff17;border-radius:10px;color:#c9d0d6;font:600 11px/1 var(--nw-font);letter-spacing:.04em;user-select:none}

.lang-menu summary::-webkit-details-marker{display:none}

.lang-menu summary:hover,.lang-menu[open] summary{color:#fff;border-color:#ffffff33}

.lang-menu summary:focus-visible{outline:2px solid #f4a071;outline-offset:2px}

.lang-globe{position:relative;width:14px;height:14px;border:1.5px solid currentColor;border-radius:50%;box-sizing:border-box}

.lang-globe:before{content:"";position:absolute;inset:-1.5px 2.5px;border:1.5px solid currentColor;border-radius:50%}

.lang-globe:after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid currentColor;transform:translateY(-50%)}

.lang-menu ul{position:absolute;top:calc(100% + 8px);right:0;z-index:70;list-style:none;margin:0;padding:6px;min-width:200px;background:#141a21;border:1px solid #ffffff1c;border-radius:12px;box-shadow:0 18px 40px #00000080}

.lang-menu li a{display:block;padding:9px 12px;border-radius:8px;color:#d3d9de;font:500 13px/1.3 var(--nw-font);letter-spacing:0;text-transform:none;white-space:nowrap}

.lang-menu li a:hover,.lang-menu li a:focus-visible{background:#ffffff12;color:#fff}

.lang-menu li a[aria-current]{color:#f4a071}

.lang-footer a{color:#8a98a4;margin:0 2px}

.lang-footer a:hover{color:#fff}

.lang-footer a[aria-current]{color:#f4a071}

/* Thai and Arabic text uses the system font for those scripts. */

html[lang="th"]{--nw-font:"Noto Sans","Noto Sans Thai","Leelawadee UI",Thonburi,Tahoma,sans-serif}

html[lang="ar"]{--nw-font:"Noto Sans","Noto Sans Arabic","Segoe UI",Tahoma,"Geeza Pro",sans-serif}

[dir="rtl"] .lang-menu ul{right:auto;left:0}

.header-actions .lang-menu{margin-right:12px}

[dir="rtl"] .header-actions .lang-menu{margin-right:0;margin-left:12px}

.footer-langs{padding:0 0 26px;font:400 11px/1.9 var(--nw-font);color:#5f6f7c}

[dir="rtl"] .brand-wordmark{direction:ltr}

@media(max-width:620px){.header-actions .lang-menu{display:none}}