:root{
  --bg:#FFFFFF; --bg-alt:#F6F7F9; --bg-card:#FFFFFF;
  --ink:#1A1D23; --ink-muted:#5B6472; --ink-faint:#8992A0;
  --border:#E4E7EC; --border-strong:#D0D5DD;
  --primary:#2563EB; --primary-dark:#1D4ED8; --primary-bg:#EFF4FF;
  --good:#16A34A; --good-bg:#EFFCF3;
  --bad:#DC2626; --bad-bg:#FEF2F2;
  --warn:#D97706; --warn-bg:#FFFAEB;
  --cyan:#0891B2;
  --radius:10px;
  --radius-sm:8px;
}
*{box-sizing:border-box; margin:0; padding:0;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Inter', -apple-system, sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased;}
.mono{font-family:'IBM Plex Mono', monospace;}
.display{font-family:'Inter', sans-serif;}
a{color:var(--primary); text-decoration:none;}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
button{font-family:inherit; cursor:pointer;}

.tag{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); display:inline-flex; align-items:center; gap:7px; font-weight:600;}
.tag::before{content:""; width:6px; height:6px; background:var(--primary); border-radius:50%;}
.tag.cyan{color:var(--cyan);} .tag.cyan::before{background:var(--cyan);}

header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border);}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px;}
.logo{font-family:'Inter', sans-serif; font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--ink); display:flex; align-items:baseline; gap:2px;}
.logo .accent{color:var(--primary);}
.navlinks{display:flex; gap:24px; align-items:center;}
.navlinks a{font-size:13.5px; color:var(--ink-muted); font-weight:500;}
.navlinks a:hover{color:var(--ink);}
.navcta{font-family:'Inter', sans-serif; font-size:13px; background:var(--primary); color:#fff; padding:9px 16px; border-radius:var(--radius); font-weight:600;}
.navcta:hover{background:var(--primary-dark); color:#fff;}
.mobile-hide{display:flex;}
@media (max-width:900px){.mobile-hide{display:none;}}

.hero-page{padding:40px 0 28px; border-bottom:1px solid var(--border); background:var(--bg-alt);}
.hero-page h1{font-family:'Inter', sans-serif; font-size:clamp(24px,3.2vw,34px); line-height:1.2; letter-spacing:-.01em; margin:12px 0 12px; font-weight:700; color:var(--ink);}
.hero-page .lede{font-size:15px; color:var(--ink-muted); max-width:660px;}

.hero{padding:48px 0 40px; border-bottom:1px solid var(--border); background:var(--bg-alt);}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-family:'Inter', sans-serif; font-size:clamp(26px,3.6vw,40px); line-height:1.15; letter-spacing:-.01em; margin:14px 0 14px; font-weight:700; color:var(--ink);}
.hero h1 em{font-style:normal; color:var(--primary);}
.hero p.lede{font-size:15px; color:var(--ink-muted); max-width:440px; margin-bottom:22px;}

.btn-primary{background:var(--primary); color:#fff; padding:11px 20px; font-weight:600; font-size:13.5px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px; border:none; transition:background .15s;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-secondary{border:1px solid var(--border-strong); color:var(--ink); background:#fff; padding:11px 20px; font-weight:500; font-size:13.5px; border-radius:var(--radius);}
.btn-secondary:hover{border-color:var(--ink-faint); background:var(--bg-alt);}
.btn-small{background:#fff; border:1px solid var(--border-strong); color:var(--ink); padding:8px 12px; font-size:12px; font-weight:600; border-radius:var(--radius);}
.btn-small:disabled{color:var(--ink-faint); background:var(--bg-alt); cursor:not-allowed;}
.btn-small:hover{border-color:var(--ink-faint); background:var(--bg-alt);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}

.tool-card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; box-shadow:0 1px 3px rgba(16,24,40,.05);}
.tool-card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.tool-card-title{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase;}
.tool-card-live{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--good); display:flex; align-items:center; gap:6px; font-weight:600;}
.tool-card-live::before{content:""; width:5px;height:5px;border-radius:50%; background:var(--good);}

.ip-display{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border);}
.ip-display-label{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; width:100%;}
.ip-display-value{font-family:'IBM Plex Mono', monospace; font-size:clamp(22px,4vw,32px); font-weight:700; color:var(--ink); word-break:break-all;}
.btn-copy{background:#fff; border:1px solid var(--border-strong); color:var(--ink); padding:7px 14px; font-size:12.5px; font-weight:600; border-radius:var(--radius); cursor:pointer; white-space:nowrap;}
.btn-copy:hover{border-color:var(--primary); color:var(--primary);}
.ip-section{margin-top:22px; padding-top:18px; border-top:1px solid var(--border);}
.ip-section h3{font-size:14px; font-weight:700; color:var(--ink); margin-bottom:10px;}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.tool-section-heading{font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;}

input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea{
  width:100%; background:#fff; border:1px solid var(--border-strong); color:var(--ink);
  padding:11px 13px; border-radius:var(--radius); font-family:'IBM Plex Mono', monospace; font-size:13.5px;
}
textarea{resize:vertical; min-height:96px;}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg);}
select{appearance:none;}

.meter{height:8px; background:var(--bg-alt); border:1px solid var(--border); border-radius:4px; overflow:hidden; margin:16px 0 10px;}
.meter-fill{height:100%; width:0%; border-radius:4px; transition:width .25s ease, background .25s ease;}
.meter-row{display:flex; justify-content:space-between; align-items:baseline;}
.meter-label{font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:600;}
.meter-detail{font-size:12px; color:var(--ink-muted); margin-top:10px;}
.privacy-note{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-faint); margin-top:16px; padding-top:14px; border-top:1px solid var(--border);}
.breach-result{margin-top:14px; padding-top:14px; border-top:1px solid var(--border); font-size:13px; display:none;}
.breach-result.show{display:block;}

.disclosure{background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:10px 0;}
.disclosure p{font-size:12px; color:var(--ink-faint); text-align:center;}
.disclosure a{color:var(--ink-muted); text-decoration:underline;}

section{padding:48px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; gap:24px; flex-wrap:wrap;}
.section-head h2{font-family:'Inter', sans-serif; font-size:clamp(20px,2.4vw,26px); font-weight:700; letter-spacing:-.01em; margin-top:6px; color:var(--ink);}
.section-head p{color:var(--ink-muted); font-size:13.5px; max-width:320px;}

.dir-cat-label{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:28px 0 12px; font-weight:600;}
.dir-cat-label:first-child{margin-top:0;}
.dir-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;}
@media (max-width:920px){.dir-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.dir-grid{grid-template-columns:1fr;}}
.dir-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px 16px; transition:border-color .15s, box-shadow .15s; display:block;}
.dir-card:hover{border-color:var(--primary); box-shadow:0 1px 3px rgba(16,24,40,.06);}
.dir-card .id{font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--ink-faint); display:block; margin-bottom:6px;}
.dir-card h4{font-family:'Inter', sans-serif; font-size:14px; font-weight:600; margin-bottom:4px; color:var(--ink);}
.dir-card p{font-size:12px; color:var(--ink-muted);}

.tool-box{background:#fff; border:1px solid var(--border); border-radius:14px; padding:26px; max-width:680px; box-shadow:0 1px 3px rgba(16,24,40,.05);}
.tool-box.wide{max-width:100%;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; color:var(--ink-muted); margin-bottom:6px; font-weight:500;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){.two-col{grid-template-columns:1fr;}}

.output-block{background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:13px 15px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink); word-break:break-all; white-space:pre-wrap; max-height:300px; overflow:auto;}
.kv-row{display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--border); font-size:13px;}
.kv-row.kv-highlight{background:var(--primary-bg, rgba(37,99,235,0.08)); margin:0 -12px; padding:10px 12px; border-radius:6px; border-top-color:transparent;}
.bit-prefix{color:var(--primary, #2563eb); font-weight:700;}
.bit-remaining{color:var(--ink-muted);}
.bit-boundary{border-left:2px solid var(--primary, #2563eb); margin-left:1px; padding-left:1px;}
.kv-row:first-child{border-top:none;}
.kv-row .k{color:var(--ink-muted);}
.kv-row .v{font-family:'IBM Plex Mono',monospace; color:var(--ink); font-weight:600;}

.metric-group{margin-bottom:16px;}
.metric-group .mg-label{font-size:12px; color:var(--ink-muted); margin-bottom:8px; display:block; font-weight:500;}
.metric-opts{display:flex; gap:6px; flex-wrap:wrap;}
.metric-opt{padding:7px 13px; border:1px solid var(--border-strong); border-radius:var(--radius); font-size:12px; background:#fff; color:var(--ink-muted);}
.metric-opt.selected{border-color:var(--primary); color:var(--primary); background:var(--primary-bg); font-weight:600;}
.severity-badge{display:inline-block; padding:5px 14px; border-radius:20px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:700;}

.timer-track{height:4px; background:var(--bg-alt); border-radius:2px; overflow:hidden; margin-top:14px;}
.timer-fill{height:100%; background:var(--primary); width:100%;}
.qr-wrap{background:#fff; border:1px solid var(--border); padding:12px; border-radius:var(--radius); display:inline-block; margin:16px 0;}
.totp-code{font-family:'IBM Plex Mono',monospace; font-size:34px; font-weight:700; letter-spacing:.08em; color:var(--good); margin:10px 0 4px;}

table.data-table{width:100%; border-collapse:collapse; font-size:12.5px;}
table.data-table th, table.data-table td{text-align:left; padding:9px 10px; border-top:1px solid var(--border);}
table.data-table th{color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase;}
mark{background:#FEF3C7; color:var(--ink); border-radius:2px; padding:0 2px;}

.uuid-list{display:flex; flex-direction:column; gap:6px; margin-top:14px; max-height:200px; overflow:auto;}
.uuid-item{display:flex; justify-content:space-between; align-items:center; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; font-family:'IBM Plex Mono',monospace; font-size:12.5px;}

.myip-display{font-family:'IBM Plex Mono',monospace; font-size:38px; font-weight:700; color:var(--primary); margin:10px 0;}

.article-content{max-width:740px;}
.article-content h2{font-family:'Inter', sans-serif; font-size:20px; font-weight:700; margin:32px 0 12px; color:var(--ink);}
.article-content h2:first-child{margin-top:0;}
.article-content h3{font-family:'Inter', sans-serif; font-size:15px; font-weight:600; margin:18px 0 8px; color:var(--ink);}
.article-content p{font-size:14px; color:var(--ink-muted); margin-bottom:13px;}
.article-content ul, .article-content ol{margin:0 0 13px 20px; color:var(--ink-muted); font-size:14px;}
.article-content li{margin-bottom:6px;}
.article-content strong{color:var(--ink);}
.faq-item{border-top:1px solid var(--border); padding:16px 0;}
.faq-item:first-of-type{border-top:none;}
.faq-item h3{margin-top:0; margin-bottom:7px; font-size:14.5px;}
.faq-item p{margin-bottom:0;}
.sponsor-line{font-size:13px; color:var(--ink-faint); border-top:1px solid var(--border); padding-top:16px; margin-top:20px;}
.sponsor-line a{color:var(--primary); text-decoration:underline;}
.related-tools{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.related-tools a{font-size:12.5px; background:#fff; border:1px solid var(--border); padding:7px 13px; border-radius:var(--radius); color:var(--ink-muted);}
.related-tools a:hover{color:var(--primary); border-color:var(--primary);}

.scorecard{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.sc-row{display:grid; grid-template-columns:44px 1.4fr .9fr .9fr 100px; align-items:center; padding:14px 18px; border-top:1px solid var(--border); gap:12px; background:#fff;}
.sc-row:first-child{border-top:none;}
.sc-row.head{background:var(--bg-alt); font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); padding:12px 18px;}
.sc-rank{font-family:'Inter', sans-serif; font-weight:700; font-size:17px; color:var(--ink-faint);}
.sc-row.top .sc-rank{color:var(--primary);}
.sc-name{font-weight:600; font-size:14px; color:var(--ink);}
.sc-sub{font-size:11.5px; color:var(--ink-muted); margin-top:2px;}
.sc-detail{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-muted);}
.sc-score{font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:13px; color:var(--good);}
@media (max-width:760px){.sc-row{grid-template-columns:28px 1fr; row-gap:8px;} .sc-detail{grid-column:2;}}
.sc-cta{background:#fff; color:var(--ink); font-size:12px; font-weight:600; padding:8px 13px; text-align:center; border-radius:var(--radius); border:1px solid var(--border-strong);}
.sc-cta:hover{border-color:var(--primary); color:var(--primary);}

.method-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
@media (max-width:860px){.method-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.method-grid{grid-template-columns:1fr;}}
.method-item .num{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--primary); margin-bottom:10px; font-weight:600;}
.method-item h4{font-family:'Inter', sans-serif; font-size:14.5px; font-weight:600; margin-bottom:7px; color:var(--ink);}
.method-item p{font-size:13px; color:var(--ink-muted);}

.brief{background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:36px; display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap;}
.brief h3{font-family:'Inter', sans-serif; font-size:19px; margin-bottom:7px; color:var(--ink); font-weight:700;}
.brief p{color:var(--ink-muted); font-size:13px; max-width:360px;}
.brief-form{display:flex; gap:10px; flex-wrap:wrap;}
.brief-form input{min-width:220px; background:#fff;}

footer{border-top:1px solid var(--border); background:var(--bg-alt); padding:40px 0 28px;}
.footer-tool-grid{display:grid; grid-template-columns:1.3fr 1fr 1.3fr 1fr 1fr; gap:22px; margin-bottom:30px;}
@media (max-width:1000px){.footer-tool-grid{grid-template-columns:1fr 1fr 1fr;}}
@media (max-width:640px){.footer-tool-grid{grid-template-columns:1fr 1fr;}}
.footer-col h5{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:11px; font-weight:600;}
.footer-col a{display:block; font-size:12.5px; color:var(--ink-muted); margin-bottom:8px;}
.footer-col a:hover{color:var(--primary);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:11.5px; color:var(--ink-faint); padding-top:18px; border-top:1px solid var(--border);}

/* DNS Record Lookup — status badges, per-type record blocks, and
   multi-resolver comparison columns. Reuses the site's existing
   --good/--bad/--warn color tokens rather than introducing new ones. */
.badge{display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; margin-right:6px; letter-spacing:.01em;}
.badge-ok{background:var(--good-bg); color:var(--good);}
.badge-warn{background:var(--warn-bg); color:var(--warn);}
.badge-info{background:var(--primary-bg); color:var(--primary);}
.dns-status-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0 12px;}
.dns-status-desc{font-size:12px; color:var(--ink-muted);}
.dns-type-block{margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--border);}
.dns-type-block:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.dns-type-heading{font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 4px;}
.dns-record-list{margin:0;}
.port-result-list{list-style:none; padding:0;}
.dns-ttl{color:var(--ink-faint); font-size:11.5px;}
.dns-empty{font-size:13px; color:var(--ink-faint); font-style:italic; margin:6px 0;}
.dns-loading{font-size:13px; color:var(--ink-muted);}
.dns-txt-record{padding:10px 0; border-top:1px solid var(--border);}
.dns-txt-record:first-child{border-top:none; padding-top:0;}
.dns-txt-value{word-break:break-all; font-size:12.5px;}
.dns-spf-breakdown{margin-top:8px; padding:10px 12px; background:var(--bg-alt); border-radius:var(--radius-sm);}
.dns-compare-match, .dns-compare-mismatch{font-size:13px; color:var(--ink-muted); margin:0 0 12px;}
.dns-resolver-column{margin-top:14px; padding-top:14px; border-top:1px dashed var(--border);}
.dns-resolver-column h4{font-size:12.5px; font-weight:600; color:var(--ink); margin:0 0 6px;}