/* Demand-test pages (/towerside, /routerdiff, /rackfield): facts row, CSS wireframes, the waitlist form.
   Brand: Night background, white and greys, one red accent per group. Loaded after main.css on these pages only. */
:root {
  --lab-red: #E10600; --lab-white: #FFFFFF; --lab-carbon: #1B1B1D; --lab-graphite: #2C2C2E;
  --lab-slate: #555555; --lab-steel: #9A9A9A; --lab-mist: #E6E6E6; --lab-night: #0B0B0C;
}

/* facts row */
.lab-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0 0; }
.lab-fact { border: 1px solid var(--lab-graphite); background: var(--lab-carbon); border-radius: 6px; padding: 1rem 1.1rem; }
.lab-fact b { display: block; font-family: "Poppins", Arial, sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1.1; letter-spacing: -.01em; color: var(--lab-white); }
.lab-fact span { display: block; margin-top: .3rem; font-size: .9rem; color: var(--lab-steel); line-height: 1.4; }

/* what it does */
.lab-steps { counter-reset: s; display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.lab-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; align-items: start; color: var(--lab-mist); line-height: 1.5; }
.lab-steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: "Poppins", Arial, sans-serif; font-weight: 600; font-size: .85rem; color: var(--lab-red); padding-top: .2rem; }
.lab-steps strong { color: var(--lab-white); font-weight: 600; }

/* phone-frame wireframes */
.lab-frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 210px)); justify-content: start; gap: 1.2rem; margin: 1.2rem 0 0; }
.lab-phone { background: var(--lab-carbon); border: 1.5px solid var(--lab-slate); border-radius: 20px; padding: .8rem .7rem; aspect-ratio: 9 / 17; display: flex; flex-direction: column; gap: .4rem; font-size: .62rem; line-height: 1.25; color: var(--lab-steel); min-width: 0; max-width: 100%; }
.lab-phone .t { font-family: "Poppins", Arial, sans-serif; font-weight: 600; font-size: .7rem; color: var(--lab-white); display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.lab-phone .t small { font-weight: 400; font-size: .56rem; color: var(--lab-steel); }
.lab-phone .cap { margin-top: auto; font-family: "Poppins", Arial, sans-serif; font-weight: 500; font-size: .62rem; color: var(--lab-steel); text-align: center; }
.lab-pl { display: grid; gap: .2rem; }
.lab-pl div { background: var(--lab-graphite); border-radius: 3px; padding: .22rem .3rem; display: flex; justify-content: space-between; gap: .3rem; }
.lab-pl div b { font-weight: 600; color: var(--lab-white); text-align: right; }
.lab-pl div.go { background: var(--lab-white); color: var(--lab-night); justify-content: center; font-weight: 600; }
.lab-pl div.flag b { color: var(--lab-red); }
.lab-cam { flex: 1; border: 1px dashed var(--lab-slate); border-radius: 6px; display: grid; place-items: center; color: var(--lab-steel); font-size: .58rem; position: relative; min-height: 2.8rem; }
.lab-cam::after { content: ""; position: absolute; inset: 22% 14%; border: 1.5px solid var(--lab-red); border-radius: 3px; }
.lab-u { display: grid; grid-template-columns: 1rem 1fr; gap: .2rem; align-items: stretch; flex: 1; }
.lab-u .n { font-size: .5rem; color: var(--lab-steel); display: grid; align-content: space-between; text-align: right; padding-right: .15rem; }
.lab-u .rail { display: grid; grid-auto-rows: 1fr; gap: 1px; border: 1px solid var(--lab-slate); border-radius: 3px; padding: 1px; }
.lab-u .dev { border-radius: 2px; background: var(--lab-graphite); display: flex; align-items: center; padding: 0 .3rem; font-size: .55rem; font-style: normal; color: var(--lab-mist); overflow: hidden; white-space: nowrap; }
.lab-u .dev.sw { background: var(--lab-mist); color: var(--lab-night); }
.lab-u .dev.pp { background: var(--lab-steel); color: var(--lab-night); }
.lab-u .dev.hl { outline: 1.5px solid var(--lab-red); outline-offset: -1px; }
.lab-ports { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.lab-ports i { display: block; aspect-ratio: 1; border-radius: 1.5px; background: var(--lab-graphite); }
.lab-ports i.on { background: var(--lab-steel); }
.lab-ports i.x { background: var(--lab-red); }
.lab-ports i.me { outline: 1.5px solid var(--lab-white); outline-offset: -1px; }

/* plan and price */
.lab-price { border-left: 3px solid var(--lab-red); padding: .4rem 1rem; color: var(--lab-mist); margin: 1rem 0 0; }
.lab-price strong { color: var(--lab-white); }

/* the form */
.lab-form { display: grid; gap: 1rem; margin-top: 1rem; }
.lab-form .field { display: grid; gap: .35rem; min-width: 0; }
.lab-form label, .lab-form legend { font-family: "Poppins", Arial, sans-serif; font-weight: 500; font-size: .95rem; color: var(--lab-white); }
.lab-form input[type="text"], .lab-form input[type="email"], .lab-form select, .lab-form textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--lab-white); background: var(--lab-carbon);
  border: 1px solid var(--lab-graphite); border-radius: 4px; padding: .6rem .7rem; min-width: 0;
}
.lab-form textarea { resize: vertical; }
.lab-form input:focus-visible, .lab-form select:focus-visible, .lab-form textarea:focus-visible { outline: 2px solid var(--lab-red); outline-offset: 1px; }
.lab-form [aria-invalid="true"] { border-color: var(--lab-red); }
.lab-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.lab-pay { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; }
.lab-radio { display: flex; gap: .6rem; align-items: center; font-family: "Inter", Arial, sans-serif; font-weight: 400; font-size: .95rem; color: var(--lab-mist); cursor: pointer; }
.lab-form .lab-radio input[type="radio"] { width: 1.1rem; height: 1.1rem; margin: 0; padding: 0; flex: none; accent-color: var(--lab-red); appearance: auto; border: 0; background: none; }
.lab-req { font-weight: 400; color: var(--lab-steel); font-size: .85rem; }
.lab-fine { color: var(--lab-steel); font-size: .85rem; margin: 0; max-width: 60ch; }
.lab-form .actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.lab-form .form-msg--err { margin: 0; }
.lab-form .form-msg--ok, .lab-form + .form-msg--ok { margin-top: 1rem; }
.lab-others { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-top: 1rem; }

@media (max-width: 640px) {
  .lab-fact b { font-size: 1.6rem; }
  .lab-frames { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}