/* webhostingsingapore.com: component CSS. Plain CSS, no build step. Self-hosted Geist + Geist Mono (WOFF2, variable). */
@font-face{font-family:"Geist";src:url(/assets/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --ink-900:#0E1726;--slate-700:#344054;--slate-600:#475467;--slate-500:#667085;--slate-400:#98A2B3;--slate-300:#C4CBD4;
  --slate-200:#DDE2E8;--slate-100:#EDF0F3;--slate-50:#F1F4F7;--paper-50:#F6F8FA;--white:#fff;
  --accent-600:#1F4FD8;--accent-700:#163BA6;--accent-800:#1A43B8;--accent-100:#EAF0FD;--accent-200:#C9D7F8;--accent-on-dark:#7FA2F5;
  --font-sans:"Geist",system-ui,sans-serif;--font-mono:"Geist Mono",ui-monospace,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s12:48px;
  --r-sm:3px;--r-md:4px;--r-lg:6px;--maxw:1240px;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink-900);font:16px/1.55 var(--font-sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent-600);text-underline-offset:3px}a:hover{color:var(--accent-700)}
:focus-visible{outline:2px solid var(--accent-600);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s6)}
.mono-label{font:500 12px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--slate-600)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Disclosure bar + header */
.affiliate-bar{background:var(--ink-900);color:#DCE2EA;font-size:14px}
.affiliate-bar .wrap{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;padding-top:9px;padding-bottom:9px}
.affiliate-bar strong{color:#fff;font-weight:600}.affiliate-bar a{color:#fff}
.site-header{border-bottom:1px solid var(--slate-200)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink-900);text-decoration:none;font-weight:600;font-size:17px;letter-spacing:-.01em}
.brand b{font-weight:400;color:var(--slate-600)}
.main-nav{display:flex;flex-wrap:wrap;gap:4px 22px;flex:1 1 auto;font-size:15px}
.main-nav a{color:var(--ink-900);text-decoration:none}.main-nav a[aria-current=page]{color:var(--accent-600);font-weight:600}
.site-header .btn{min-height:0;padding:7px 12px;font-size:14px;font-weight:500}
.site-footer{background:var(--ink-900);color:#C9D1DC;font-size:14px}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:24px;padding-bottom:32px}
.site-footer a{color:#C9D1DC}
.site-footer nav{display:flex;flex-wrap:wrap;gap:16px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:var(--r-md);border:1px solid var(--slate-300);background:#fff;color:var(--ink-900);font:600 15px var(--font-sans);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--ink-900);color:var(--ink-900)}
.btn-primary{background:var(--accent-600);border-color:var(--accent-600);color:#fff}.btn-primary:hover{background:var(--accent-700);border-color:var(--accent-700);color:#fff}
.btn-dark{background:var(--ink-900);border-color:var(--ink-900);color:#fff}.btn-dark:hover{color:#fff}

/* Badges and labels */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--slate-700);border:1px solid var(--slate-200);border-radius:var(--r-sm);padding:2px 8px}
.badge-sg{font-weight:500;color:var(--accent-800);background:var(--accent-100);border-color:var(--accent-200)}
.badge-no-sg{color:var(--slate-600);background:var(--slate-50)}
.badge-untested{font:500 12px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--slate-600);border:1px dashed var(--slate-400)}
.label-affiliate{font:600 12px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-900);border:1px solid var(--ink-900);border-radius:var(--r-sm);padding:1px 6px;white-space:nowrap}
.featured-band{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:7px 18px;background:var(--ink-900);color:#fff;font-size:13px}
.featured-band strong{letter-spacing:.03em;text-transform:uppercase}.featured-band a{color:#fff}
.verified{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--slate-600)}

/* Logo / monogram tile */
.tile{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--slate-200);border-radius:var(--r-md);background:var(--slate-50);font:600 14px var(--font-mono)}
.tile img{width:100%;height:100%;object-fit:contain}

/* Price pair */
.price-pair{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--slate-100);border-bottom:1px solid var(--slate-100);padding:12px 0}
.price-pair>div+div{border-left:1px solid var(--slate-100);padding-left:16px}
.price-pair .k{font-size:13px;color:var(--slate-600)}.price-pair .v{font-size:22px;font-weight:600;letter-spacing:-.01em}
.price-pair .v small{font-size:14px;font-weight:400;color:var(--slate-600)}.price-pair .n{font-size:13px;color:var(--slate-500)}

/* Provider card */
.provider-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.provider-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);overflow:hidden}
.provider-card__body{display:flex;flex-direction:column;gap:14px;flex:1;padding:18px}
.provider-card__head{display:flex;align-items:center;gap:12px}
.provider-card__head h3{font-size:18px;line-height:1.25}.provider-card__head .domain{font-size:14px;color:var(--slate-500)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.provider-card__actions{display:flex;gap:8px;margin-top:auto}.provider-card__actions .btn{flex:1}

/* Facts row, tables, changelog */
.facts{margin:0;border-top:1px solid var(--slate-200)}
.facts__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:2px 20px;padding:12px 0;border-bottom:1px solid var(--slate-200)}
.facts dt{color:var(--slate-600)}.facts dd{margin:0}.facts dd:first-of-type{font-weight:500}
.table-scroll{overflow-x:auto;border:1px solid var(--slate-200);border-radius:var(--r-md)}
.table-scroll table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px}
.table-scroll th,.table-scroll td{padding:12px 14px;border-bottom:1px solid var(--slate-100);text-align:left}
.table-scroll thead th{background:var(--paper-50);border-bottom-color:var(--slate-200)}
.table-scroll .num{text-align:right;font-weight:600}
.changelog{list-style:none;margin:0;padding:0;border-left:1px solid var(--slate-300)}
.changelog li{display:flex;flex-wrap:wrap;gap:4px 16px;padding:8px 0 8px 18px;position:relative}
.changelog li::before{content:"";position:absolute;left:-4px;top:16px;width:7px;height:7px;border-radius:50%;background:#fff;border:1px solid var(--slate-600)}
.changelog time{flex:0 0 110px;font-size:14px;color:var(--slate-600)}

/* Filters */
.filter-group{border:0;margin:0;padding:0 0 20px;display:flex;flex-direction:column;gap:4px}
.filter-group+.filter-group{border-top:1px solid var(--slate-100);padding-top:20px}
.filter-group legend{padding:0;margin-bottom:8px}
.filter-option{display:flex;align-items:center;gap:10px;min-height:36px;font-size:15px;cursor:pointer}
.filter-option input{width:18px;height:18px;margin:0;accent-color:var(--accent-600)}
.filter-option .count{margin-left:auto;font-size:13px;color:var(--slate-500)}
.chip-active{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--accent-200);background:var(--accent-100);color:var(--accent-800);border-radius:999px;font:14px var(--font-sans);cursor:pointer}
.empty-state{border:1px dashed var(--slate-300);border-radius:var(--r-lg);padding:40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
@media (max-width:879px){.filter-panel{display:none}.filter-panel.is-open{display:block;position:fixed;left:0;right:0;bottom:0;max-height:86vh;overflow-y:auto;z-index:50;background:#fff;border-radius:8px 8px 0 0;box-shadow:0 -8px 32px rgba(14,23,38,.18);padding:0 20px}}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;font-weight:500}
.field input,.field select,.field textarea{font:16px var(--font-sans);color:var(--ink-900);background:#fff;border:1px solid var(--slate-400);border-radius:var(--r-md);padding:0 12px;min-height:46px;width:100%}
.field textarea{padding:10px 12px}.field .hint{font-weight:400;font-size:14px;color:var(--slate-600)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Callouts + ad slots */
.callout{border:2px solid var(--ink-900);border-radius:var(--r-lg);background:var(--paper-50);padding:24px}
.ad-slot{border:1px solid var(--slate-200);border-radius:var(--r-md);background:#fff}
.ad-slot__label{display:flex;justify-content:space-between;gap:8px;padding:4px 10px;border-bottom:1px solid var(--slate-100);font:11px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--slate-600)}
.ad-slot__label a{color:var(--slate-600)}
.ad-slot__body{display:grid;place-items:center;overflow:hidden}.ad-slot__body img{display:block;max-width:100%;height:auto}
.ad-slot--top{max-width:728px}.ad-slot--top .ad-slot__body{min-height:90px}
.ad-slot--side{max-width:300px}.ad-slot--side .ad-slot__body{min-height:250px}
.ad-slot--inline{max-width:336px;margin-inline:auto}.ad-slot--inline .ad-slot__body{min-height:280px}
.ad-slot--support{max-width:600px}.ad-slot--support .ad-slot__body{min-height:60px}
.house-box{border:1px solid var(--ink-900);border-radius:var(--r-md);background:var(--paper-50);padding:14px 16px}

/* Breadcrumb */
.breadcrumb{font-size:14px;color:var(--slate-600);margin-bottom:16px}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.breadcrumb li+li::before{content:"/";margin-right:4px}