:root{
--navy:#001124; --blue:#0072c6; --blue-soft:#eaf3fb; --blue-line:#cfe2f2;
--ink:#1c2530; --muted:#5a6b7d; --line:#e4e9f0;
--green:#198754; --amber:#e8930a; --red:#d6402c; --orange:#e35f05;
}
body { font-family: Montserrat, sans-serif; color:var(--ink); }
.gnw-article-wrap { max-width: 840px; }
.topbar-link { color:#fff; font-size:14px; text-decoration:none; }
.brand-mark { font-weight:800; font-size:1.4rem; color:#fff; letter-spacing:-.5px; }
.brand-mark span { color:#34b8f8; }
.single-content { font-size:17px; line-height:1.72; }
.single-content h2{ font-size:1.7rem; }
.single-content h3{ font-size:1.35rem; }
/* HERO (image1) */
.gnw-hero{
border:1px solid var(--blue-line); border-radius:16px; overflow:hidden;
background:linear-gradient(135deg,#001124 0%,#0a3a63 55%,#0072c6 100%);
color:#fff; display:flex; align-items:center; gap:22px; padding:26px 28px; margin:26px 0;
}
.gnw-hero .glyph{ flex:0 0 auto; width:84px; height:84px; border-radius:18px;
border:1px solid rgba(255,255,255,.35); display:grid; place-items:center; position:relative; background:rgba(255,255,255,.08); }
.gnw-hero .glyph i{ font-size:40px; color:#fff; }
.gnw-hero .glyph .dot{ position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%;
background:var(--red); border:1px solid #fff; animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(214,64,44,.55)} 70%{box-shadow:0 0 0 12px rgba(214,64,44,0)} 100%{box-shadow:0 0 0 0 rgba(214,64,44,0)} }
.gnw-hero h2{ color:#fff!important; margin:0!important; font-size:1.6rem; }
/* STATUS PANEL (image2) */
.gnw-status-panel{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0; }
.gnw-status-card{ border:1px solid var(--line); border-radius:12px; padding:18px 16px; text-align:center; background:#fff; }
.gnw-status-card .light{ width:18px; height:18px; border-radius:50%; margin:0 auto 10px; }
.gnw-status-card.g .light{ background:var(--green); box-shadow:0 0 0 4px rgba(25,135,84,.15); }
.gnw-status-card.a .light{ background:var(--amber); box-shadow:0 0 0 4px rgba(232,147,10,.15); }
.gnw-status-card.r .light{ background:var(--red); box-shadow:0 0 0 4px rgba(214,64,44,.15); }
.gnw-status-card strong{ display:block; font-size:.95rem; }
.gnw-status-card span{ font-size:.82rem; color:var(--muted); }
@media(max-width:575px){ .gnw-status-panel{ grid-template-columns:1fr } }
/* CAUSE GRID (image3) */
.gnw-cause-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:24px 0; }
.gnw-cause{ border:1px solid var(--line); border-radius:14px; padding:20px 18px 16px; background:#fff; position:relative; transition:.2s; }
.gnw-cause:hover{ box-shadow:0 8px 26px rgba(0,114,198,.12); transform:translateY(-2px); border-color:var(--blue-line); }
.gnw-cause .top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.gnw-cause .emoji{ font-size:24px; }
.gnw-cause .num{ font-size:11px; font-weight:700; color:#fff; background:var(--blue); border-radius:20px; padding:2px 10px; letter-spacing:.5px; }
.gnw-cause h5{ margin:.1rem 0 .5rem!important; font-size:1.05rem; }
.gnw-cause p{ font-size:14px; color:var(--muted); margin:0; line-height:1.55; }
/* ANALOGY (image4-6) */
.gnw-analogy{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; margin:26px 0;
border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.gnw-analogy .side{ padding:22px 20px; }
.gnw-analogy .side i{ font-size:30px; }
.gnw-analogy .l{ background:var(--blue-soft); }
.gnw-analogy .r{ background:#fff7f0; }
.gnw-analogy .mid{ display:grid; place-items:center; background:#fff; border-inline:1px solid var(--line); padding:0 14px; color:var(--muted); font-weight:700; }
.gnw-analogy .head{ text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size:11px; color:var(--muted); padding:10px 20px 0; }
.gnw-analogy small{ text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size:11px; }
.gnw-analogy .l small{ color:var(--blue); } .gnw-analogy .r small{ color:var(--orange); }
.gnw-analogy p{ margin:.4rem 0 0; font-size:.95rem; }
@media(max-width:575px){ .gnw-analogy{ grid-template-columns:1fr } .gnw-analogy .mid{ border-inline:none; border-block:1px solid var(--line); padding:8px } }
/* INCOGNITO COMPARE (image7) */
.gnw-win-compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0; }
.gnw-win{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.gnw-win .bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid var(--line); background:#f5f7fa; font-size:.8rem; color:var(--muted); }
.gnw-win .bar b{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.gnw-win .body{ padding:18px; font-size:.9rem; }
.gnw-win .verdict{ font-weight:700; margin-top:10px; }
.gnw-win.bad .verdict{ color:var(--red); } .gnw-win.good .verdict{ color:var(--green); }
@media(max-width:575px){ .gnw-win-compare{ grid-template-columns:1fr } }
/* STORAGE GAUGE (image9) */
.gnw-gauge{ border:1px solid var(--line); border-radius:14px; padding:22px; margin:24px 0; background:#fff; }
.gnw-gauge .meter{ height:26px; border-radius:8px; background:#eef1f5; overflow:hidden; position:relative; border:1px solid var(--line); }
.gnw-gauge .fill{ height:100%; width:88%; background:linear-gradient(90deg,#2e9e6b 0%,#e8930a 70%,#d6402c 100%); border-radius:8px 0 0 8px; }
.gnw-gauge .safe-line{ position:absolute; top:-6px; bottom:-6px; left:80%; width:2px; background:var(--navy); }
.gnw-gauge .safe-line span{ position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700; white-space:nowrap; }
.gnw-gauge .scale{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin-top:6px; }
.gnw-gauge .legend{ font-size:.85rem; color:var(--muted); margin-top:12px; }
/* PREVENTION CHIPS (image10) */
.gnw-chips{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:22px 0; }
.gnw-chip{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff; display:flex; gap:12px; align-items:flex-start; }
.gnw-chip i{ font-size:20px; color:var(--blue); flex:0 0 auto; margin-top:2px; }
.gnw-chip b{ display:block; font-size:.95rem; } .gnw-chip span{ font-size:.84rem; color:var(--muted); }
/* CHECKLIST TIMELINE (image11) */
.gnw-timeline{ margin:24px 0; padding:0; list-style:none; counter-reset:step; }
.gnw-timeline li{ position:relative; padding:0 0 18px 52px; counter-increment:step; }
.gnw-timeline li:before{ content:counter(step); position:absolute; left:0; top:0; width:34px; height:34px;
border:1px solid var(--blue); border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:700; }
.gnw-timeline li:not(:last-child):after{ content:""; position:absolute; left:16px; top:34px; bottom:0; width:1px; background:var(--blue-line); }
.gnw-timeline b{ display:block; }
.gnw-timeline span{ font-size:.9rem; color:var(--muted); }
.gnw-phone-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.gnw-phone{ width:64px; height:120px; border:1px solid var(--line); border-radius:14px; display:grid; place-items:center; background:#f7f9fc; color:var(--blue); font-size:26px; }
/* ---- heading spacing normalization ----
Section headings (direct children of .single-content) keep the theme's
generous 50px top margin. Headings nested inside components should sit at
the top of their container, so reset their top margin. */
.single-content .highlighted-box-steps h2, .single-content .highlighted-box-steps h3, .single-content .highlighted-box-steps h4, .single-content .highlighted-box-steps h5, .single-content .highlighted-box-steps h6,
.single-content .highlighted-box-bulb h2, .single-content .highlighted-box-bulb h3, .single-content .highlighted-box-bulb h4, .single-content .highlighted-box-bulb h5, .single-content .highlighted-box-bulb h6,
.single-content .highlighted-box-link h2, .single-content .highlighted-box-link h3, .single-content .highlighted-box-link h4, .single-content .highlighted-box-link h5, .single-content .highlighted-box-link h6,
.single-content .highlighted-box-faq h2, .single-content .highlighted-box-faq h3, .single-content .highlighted-box-faq h4, .single-content .highlighted-box-faq h5, .single-content .highlighted-box-faq h6,
.single-content .header-product h4, .single-content .header-product h5, .single-content .header-product h6{ margin-top:0!important; }
.single-content .accordion-header{ margin-top:0!important; margin-bottom:0!important; }
.footer h6{ margin-top:0!important; }
/* ---- self-contained box corner icons ----
The theme fetches these from systoolsgroup.com, which fails when that
server is unreachable. Override with inline SVGs so they always show. */
.single-content .highlighted-box-steps:before{
background:url('data:image/svg+xml,') center/contain no-repeat !important;
}
.single-content .highlighted-box-bulb:before{
background:url('data:image/svg+xml,') center/contain no-repeat !important;
}
/* avatar fallback if the photo fails to load */
.gnw-avatar-fallback{ width:50px; height:50px; border-radius:50%; background:var(--blue); color:#fff;
display:inline-grid; place-items:center; font-weight:700; font-size:16px; border:1px solid #e9e9e9; }
/* inline icon base + per-component sizing */
.gnw-ic{ display:inline-block; width:1em; height:1em; vertical-align:-.125em; background-position:center; background-repeat:no-repeat; background-size:contain; }
.gnw-hero .glyph .gnw-ic{ width:40px; height:40px; color:#fff; }
.gnw-analogy .side .gnw-ic{ width:30px; height:30px; }
.gnw-chip .gnw-ic{ width:20px; height:20px; color:var(--blue); flex:0 0 auto; margin-top:2px; }
.gnw-phone .gnw-ic{ width:26px; height:26px; }
.social-media .gnw-ic{ width:18px; height:18px; }
/* data-URI icons (work inside WordPress; no inline