/* ============================================================
   wire.css — shared low-fi wireframe vocabulary for the
   TP-Link US consumer site secondary pages.
   Loaded after colors_and_type.css. Each page adds its own
   page-specific block inline.
   ============================================================ */
:root{
  --ink:#2b343a; --ink2:rgba(43,52,58,.56); --ink3:rgba(43,52,58,.34);
  --canvas:#eef1f4; --paper:#fff; --line:#d8e0e7;
  --wire:#e7ecf1; --wire2:#dde4ea; --wline:#bcc7d1;
  --teal:#0a8190; --teal-br:#4acbd6; --tealbg:rgba(10,129,144,.09);
  --dark:#20282d; --dark2:#283036;
  --maxw:1280px;
  --stripe:repeating-linear-gradient(135deg,#dfe6ec 0 11px,#e8edf1 11px 22px);
  --stripe-d:repeating-linear-gradient(135deg,#2c353b 0 11px,#333d44 11px 22px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--canvas);color:var(--ink);font-family:var(--font-ui,-apple-system,system-ui,sans-serif);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.mono{font-family:var(--font-mono,monospace)}

/* ---------- low-fi primitives ---------- */
.ph{position:relative;background:var(--stripe);border:1.5px dashed var(--wline);border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink2);overflow:hidden}
.ph.d{background:var(--stripe-d);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.72)}
.ph .lab{font-family:var(--font-mono,monospace);font-size:11.5px;letter-spacing:.04em;line-height:1.5;padding:10px 14px;max-width:90%}
.ph .lab .big{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.ph.d .lab .big{color:#fff}
.ph .ic{width:30px;height:30px;border:1.5px solid currentColor;border-radius:7px;opacity:.5;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.ph .ic::before{content:"";width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%}
.ph .ic::after{content:"";position:absolute;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:11px solid currentColor;transform:translate(6px,6px);opacity:.6}
.ph .dim{position:absolute;top:8px;left:8px;font-family:var(--font-mono,monospace);font-size:9.5px;color:var(--ink3);background:rgba(255,255,255,.7);padding:2px 6px;border-radius:5px}
.ph.d .dim{color:rgba(255,255,255,.7);background:rgba(0,0,0,.25)}

.bar{height:13px;border-radius:5px;background:var(--wline);display:block}
.bar.t{height:11px;opacity:.72}
.bar.h{height:22px;border-radius:6px;background:#aab6c1}
.bar.xh{height:34px;border-radius:7px;background:#9fabb7}
.bars{display:flex;flex-direction:column;gap:8px}
.w90{width:90%}.w80{width:80%}.w70{width:70%}.w60{width:60%}.w50{width:50%}.w40{width:40%}.w30{width:30%}.w24{width:24%}.w100{width:100%}
.bars.cen{align-items:center}
.ond .bar{background:rgba(255,255,255,.26)}
.ond .bar.h{background:rgba(255,255,255,.42)}
.ond .bar.xh{background:rgba(255,255,255,.5)}

.fbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 24px;border-radius:999px;font-size:14px;font-weight:600;border:1.5px solid var(--wline);color:var(--ink2);background:var(--paper);cursor:pointer}
.fbtn.solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.fbtn.sm{height:34px;padding:0 16px;font-size:13px}
.fbtn.teal{background:var(--teal);border-color:var(--teal);color:#fff}
.ond .fbtn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff}
.ond .fbtn.solid{background:#fff;color:var(--dark);border-color:#fff}

/* annotation tag — ties block back to the IA */
.anno{font-family:var(--font-mono,monospace);font-size:10.5px;letter-spacing:.08em;color:var(--teal);background:var(--tealbg);border:1px solid rgba(10,129,144,.2);padding:4px 9px;border-radius:6px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.anno b{color:var(--teal);font-weight:700}
.ond .anno{color:var(--teal-br);background:rgba(74,203,214,.14);border-color:rgba(74,203,214,.3)}
.ond .anno b{color:var(--teal-br)}

/* fixed framework badge */
.fwbar{position:fixed;left:14px;bottom:14px;z-index:200;display:flex;align-items:center;gap:10px;background:rgba(32,40,45,.92);backdrop-filter:blur(8px);color:#fff;padding:9px 14px;border-radius:10px;font-family:var(--font-mono,monospace);font-size:11px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.fwbar .d{width:8px;height:8px;border-radius:50%;background:var(--teal-br);flex:none}
.fwbar b{font-weight:700;letter-spacing:.04em}
.fwbar span{color:rgba(255,255,255,.6)}
.fwbar a{color:var(--teal-br);border-bottom:1px dashed rgba(74,203,214,.5)}

/* announcement */
.ann{background:var(--dark);color:#fff;text-align:center;font-size:13px;padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:10px}
.ann .pin{font-family:var(--font-mono,monospace);font-size:10px;letter-spacing:.12em;color:var(--teal-br);border:1px solid rgba(74,203,214,.45);padding:2px 7px;border-radius:5px}
.ann .bar{width:280px;max-width:40vw;background:rgba(255,255,255,.3)}

/* header / nav */
header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:6px;height:62px}
.logo{display:flex;align-items:center;margin-right:16px}
.logo svg{width:96px;height:auto;display:block}
.slots{display:flex;align-items:center;gap:2px;height:100%}
.slot{display:flex;align-items:center;height:100%;padding:0 14px;font-size:14.5px;font-weight:560;color:var(--ink);cursor:pointer;position:relative;border:0;background:none;font-family:inherit;text-decoration:none}
.slot.prod{color:var(--teal);font-weight:650}
.slot:hover{color:var(--teal)}
.slot::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--teal);transform:scaleX(0);transition:.16s}
.slot.on::after,.slot.cur::after{transform:scaleX(1)}
.slot.cur{color:var(--teal)}
.slot .num{font-family:var(--font-mono,monospace);font-size:9px;color:var(--ink3);margin-right:5px}
.tools{margin-left:auto;display:flex;align-items:center;gap:4px}
.tool{width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--ink2);cursor:pointer;border:1px dashed var(--wline);background:var(--wire);position:relative;text-decoration:none}
.tool:hover{color:var(--teal);border-color:var(--teal)}
.tool svg{width:18px;height:18px}

/* breadcrumb */
.crumb{background:var(--paper);border-bottom:1px solid var(--line)}
.crumb .wrap{display:flex;align-items:center;gap:9px;height:44px;font-family:var(--font-mono,monospace);font-size:12px;color:var(--ink2);overflow-x:auto;scrollbar-width:none}
.crumb .wrap::-webkit-scrollbar{display:none}
.crumb a{color:var(--ink2);white-space:nowrap}
.crumb a:hover{color:var(--teal)}
.crumb .sep{color:var(--ink3)}
.crumb .here{color:var(--ink);font-weight:600;white-space:nowrap}

/* generic band scaffolding */
section.band{padding:74px 0}
.band .head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.band .head .tl{display:flex;flex-direction:column;gap:12px}
.band .head h2.bar.xh{width:300px}
.band .annorow{margin-bottom:18px}

/* trust strip / dark band */
.darkband{background:var(--dark);color:#fff}

/* footer */
footer.site{background:var(--dark);color:#fff;padding:52px 0 28px}
.fgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:22px}
.fcol{display:flex;flex-direction:column;gap:12px}
.fcol .ttl{font-family:var(--font-mono,monospace);font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em;margin-bottom:2px}
.fcol .bar{background:rgba(255,255,255,.22)}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);flex-wrap:wrap}
.fbar .left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.social{display:flex;gap:9px}
.social .s{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.25)}
.country{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.66);border:1px dashed rgba(255,255,255,.28);border-radius:999px;padding:8px 14px}
.country .globe{width:15px;height:15px;border:1.5px solid currentColor;border-radius:50%}

@media (max-width:1080px){.fgrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.slots{display:none}.fgrid{grid-template-columns:1fr 1fr}}