/* Colocation page — the page itself uses the site's Tailwind (app.css); the price
   calculator is styled here in plain CSS so its layout never depends on which
   Tailwind utilities happen to be in the compiled build. Colors use the site
   brand palette (brand-700 #12264D, brand-500 #1D3C78, brand-400 #2F5DBA). */

.cfg{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:2rem}
@media(max-width:900px){.cfg{grid-template-columns:1fr}}

.cfg-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.cfg-sum{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:24px;position:sticky;top:96px}
@media(max-width:900px){.cfg-sum{position:static}}

.cfg .cfg-h{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin:0 0 12px}
.cfg .cfg-h+.cfg-h,.cfg-rows+.cfg-h,.cfg .mt{margin-top:26px}

.cfg-base{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.cfg-base{grid-template-columns:1fr}}
.cfg-opt{display:flex;align-items:center;gap:12px;border:1.5px solid #e2e8f0;border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.cfg-opt:has(input:checked){border-color:#2F5DBA;background:#e9effa}
.cfg-opt>input{width:18px;height:18px;flex:none;accent-color:#2F5DBA;margin:0}
.cfg-opt .t{flex:1;min-width:0}
.cfg-opt .t b{display:block;font-size:14px;font-weight:600;color:#0f172a;line-height:1.3}
.cfg-opt .t small{display:block;font-size:11.5px;color:#64748b;font-weight:400;margin-top:2px}
.cfg-opt .p{font-size:15px;font-weight:700;color:#0f172a;white-space:nowrap}

.cfg-rows{margin-top:6px}
.cfg-row{display:grid;grid-template-columns:1fr auto 96px;align-items:center;gap:16px;padding:11px 0;border-top:1px solid #f1f5f9}
.cfg-row:first-child{border-top:0}
.cfg-row .l{font-size:14px;color:#334155}
.cfg-row .pr{font-size:13px;color:#64748b;white-space:nowrap;text-align:right}
.cfg-row .pr small{color:#94a3b8}
.cfg-row input[type=number]{width:96px;min-height:40px;padding:6px 10px;border:1.5px solid #cbd5e1;border-radius:9px;font-size:14px;text-align:center;-moz-appearance:textfield}
.cfg-row input[type=checkbox]{width:22px;height:22px;justify-self:end;accent-color:#2F5DBA;margin:0}
.cfg-row input:focus{outline:none;border-color:#2F5DBA;box-shadow:0 0 0 3px rgba(47,93,186,.18)}
.cfg-note{font-size:11.5px;color:#94a3b8;margin:12px 0 0}

.cfg-sline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:#475569;padding:5px 0}
.cfg-sline b{font-variant-numeric:tabular-nums;font-weight:700;color:#0f172a}
.cfg-grand{border-top:1px solid #e2e8f0;margin-top:6px;padding-top:12px;font-size:15px}
.cfg-grand span{color:#0f172a;font-weight:600}
.cfg-grand b{font-size:24px;color:#1D3C78}
.cfg-mo{text-align:right;font-size:11.5px;color:#94a3b8;margin-top:2px}
.cfg-cta{display:flex;width:100%;align-items:center;justify-content:center;margin-top:18px;padding:12px 20px;border-radius:12px;background:linear-gradient(90deg,#12264D,#2F5DBA);color:#fff;font-weight:600;font-size:14px;text-decoration:none;transition:opacity .15s}
.cfg-cta:hover{opacity:.92;color:#fff}

.cfg-incl{margin-top:18px;border-top:1px solid #e2e8f0;padding-top:16px}
.cfg-incl h4{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin:0 0 8px}
.cfg-incl ul{list-style:none;margin:0;padding:0}
.cfg-incl li{font-size:13.5px;color:#475569;margin:6px 0;padding-left:20px;position:relative}
.cfg-incl li:before{content:'\2713';position:absolute;left:0;color:#2F5DBA;font-weight:700}
.cfg-incl .f{font-size:11.5px;color:#94a3b8;margin-top:10px}

/* conceptual 3-DC diagram connector dots */
.colo-dc-link{position:relative}