:root{
  --bg0:#070a09;
  --bg1:#0b1411;
  --panel:#0b0f0d;
  --panel2:#0e1311;
  --text:#e9f0ec;
  --muted:#a8b7ae;
  --line:rgba(255,255,255,.08);
  --glow:rgba(124,255,95,.14);
  --accent:#53ff3d; /* neon green */
  --accent2:#2adf2a;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --r:18px;
  --w:1080px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(83,255,61,.18), transparent 60%),
    radial-gradient(800px 480px at 62% 30%, rgba(39,201,157,.10), transparent 62%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--w); margin:0 auto; padding:28px 20px}

.site-header{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(4,7,6,.78), rgba(4,7,6,.52));
  border-bottom:1px solid var(--line);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:14px 20px;
}

.brand{display:flex; align-items:center; gap:10px}
.brand-mark{
  width:9px; height:9px; border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 6px rgba(83,255,61,.09), 0 0 26px rgba(83,255,61,.35);
}
.brand-name{font-weight:650; letter-spacing:.2px}

.nav{display:flex; gap:12px; align-items:center}
.nav-link{
  padding:8px 12px;
  border-radius:999px;
  color:rgba(233,240,236,.86);
  border:1px solid transparent;
}
.nav-link:hover{border-color:rgba(83,255,61,.18); background:rgba(83,255,61,.06)}
.nav-link.is-active{
  border-color:rgba(83,255,61,.28);
  background:rgba(83,255,61,.10);
  box-shadow:0 0 0 4px rgba(83,255,61,.06);
}

.hero{padding:52px 0 26px}
.h1{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.08;
  letter-spacing:-.6px;
}
.subhead{
  margin:0 0 18px;
  color:rgba(233,240,236,.78);
  max-width:68ch;
}

.hero-actions{display:flex; gap:10px; align-items:center}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  color:rgba(233,240,236,.92);
  background:rgba(255,255,255,.02);
  transition: transform .08s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  user-select:none;
}
.btn:hover{border-color:rgba(83,255,61,.22); background:rgba(83,255,61,.06)}
.btn:active{transform: translateY(1px)}
.btn[aria-disabled="true"]{opacity:.45; pointer-events:none}

.btn-primary{
  border-color:rgba(83,255,61,.30);
  background: linear-gradient(180deg, rgba(83,255,61,.22), rgba(83,255,61,.08));
  box-shadow:0 0 0 6px rgba(83,255,61,.05);
}
.btn-primary:hover{
  border-color:rgba(83,255,61,.45);
  box-shadow:0 0 0 7px rgba(83,255,61,.06), 0 20px 50px rgba(0,0,0,.45);
}
.btn-ghost{
  background:rgba(255,255,255,.015);
}

.site-footer{
  padding:34px 0 12px;
}
.muted{color:rgba(168,183,174,.92)}
.crumbs{
  display:flex; align-items:center; gap:10px;
  padding-top:14px;
  color:rgba(168,183,174,.92);
}
.crumbs a{color:rgba(233,240,236,.78)}
.sep{opacity:.5}

.page-head{padding:20px 0 16px}
.title-row{display:flex; align-items:center; gap:12px}
.icon-badge{
  width:30px; height:30px;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(83,255,61,.08);
  border:1px solid rgba(83,255,61,.18);
  box-shadow:0 0 0 6px rgba(83,255,61,.05);
}

.note{
  margin-top:14px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:1.25rem;
  padding:10px 0;
  width:100%;
  box-sizing:border-box;
}
@media (max-width: 900px){
  .h1{font-size:36px}
  .grid{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 620px){
  .h1{font-size:32px}
  .grid{grid-template-columns: 1fr}
}

.card{
  box-sizing:border-box;

  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10));
  box-shadow: var(--shadow);
  padding:16px;
  transition: border-color .18s ease, transform .10s ease, box-shadow .18s ease;
}
.card:hover{
  border-color:rgba(83,255,61,.20);
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(0,0,0,.58);
}
.card.disabled{opacity:.55; pointer-events:none}

.card-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.pill{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(83,255,61,.22);
  background:rgba(83,255,61,.06);
  color:rgba(233,240,236,.90);
}
.pill-ghost{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(168,183,174,.95);
}

.h2{margin:0 0 6px; font-size:20px; letter-spacing:-.2px}
.h3{margin:22px 0 10px; font-size:16px; color:rgba(233,240,236,.86)}

.tool-feature{
  margin:10px 0 14px;
  padding:18px;
  border-radius:var(--r);
  border:1px solid rgba(83,255,61,.16);
  background: linear-gradient(180deg, rgba(83,255,61,.06), rgba(0,0,0,.10));
  box-shadow: var(--shadow);
}
.tool-feature-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}

.stack{display:flex; flex-direction:column; gap:10px; padding-bottom:10px}
.row{
  display:flex; justify-content:space-between; gap:14px; align-items:flex-start;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.row-title{font-weight:650; margin-bottom:4px}
.tag{
  white-space:nowrap;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:rgba(168,183,174,.95);
}

/* --- ScopedLabs: tool-row list cards (Network/Power category pages) --- */
.tool-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:16px 18px;
  border-radius:14px;

  text-decoration:none;
  color:inherit;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.tool-row:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.045);
  border-color: rgba(140,255,70,0.25);
}

.tool-row strong{
  display:block;
  font-weight:700;
  margin-bottom:4px;
}

.tool-row .muted{
  margin:0;
}

/* ================================
   ScopedLabs Form System (v1)
   - glass inputs + consistent spacing
   ================================ */

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

@media (max-width: 860px){
  .form-grid{ grid-template-columns: 1fr; }
}

.field{
  display:block;
}

.field label{
  display:block;
  font-size: 12.5px;
  letter-spacing: .2px;
  opacity: .92;
  margin: 0 0 6px;
}

/* Applies to ALL normal inputs/selects/textareas inside .field */
.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 999px;                 /* pill */
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);          /* glass */
  color: rgba(255,255,255,.92);
  outline: none;
}

.field textarea{
  border-radius: 14px;                  /* textareas look better not full-pill */
  min-height: 110px;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(140,255,70,.28);   /* neon-green hint */
  box-shadow: 0 0 0 3px rgba(140,255,70,.08);
}

.field input::placeholder,
.field textarea::placeholder{
  color: rgba(255,255,255,.35);
}

/* Button row */
.actions, .btn-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* =========================================
   ScopedLabs — Glass Inputs (Network tools)
   Paste at END of assets/style.css
   ========================================= */

.card input,
.card select,
.card textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.38);
  color: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;

  padding: 12px 12px;
  line-height: 1.2;

  outline: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.22) inset,
    0 10px 30px rgba(0, 0, 0, 0.25);

  -webkit-appearance: none;
  appearance: none;
}

.card input:focus,
.card select:focus,
.card textarea:focus {
  border-color: rgba(140, 255, 120, 0.45);
  box-shadow:
    0 0 0 1px rgba(140, 255, 120, 0.18) inset,
    0 0 0 4px rgba(140, 255, 120, 0.10);
}

.card input::placeholder,
.card textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

/* Number input: tame the spinner a bit (optional) */
.card input[type="number"]::-webkit-outer-spin-button,
.card input[type="number"]::-webkit-inner-spin-button {
  opacity: 0.45;
}

/* ============================
   ScopedLabs — Glass Inputs (FORCE)
   Put at END of style.css
   ============================ */

.tool-card input,
.tool-card select,
.tool-card textarea,
.card input,
.card select,
.card textarea,
.glass-input {
  -webkit-appearance: none;
  appearance: none;

  width: 100%;
  box-sizing: border-box;

  background: rgba(10, 14, 12, 0.55) !important;
  color: rgba(255,255,255,0.92) !important;

  border: 1px solid rgba(120, 255, 140, 0.25) !important;
  border-radius: 999px !important;

  padding: 10px 12px !important;
  height: 40px !important;

  outline: none !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.25) inset,
    0 0 24px rgba(90, 255, 120, 0.06) !important;
}

.tool-card textarea,
.card textarea {
  border-radius: 18px !important;
  height: auto !important;
  min-height: 96px;
}

/* Focus glow */
.tool-card input:focus,
.tool-card select:focus,
.tool-card textarea:focus,
.card input:focus,
.card select:focus,
.card textarea:focus,
.glass-input:focus {
  border-color: rgba(120, 255, 140, 0.5) !important;
  box-shadow:
    0 0 0 3px rgba(90, 255, 120, 0.10),
    0 0 28px rgba(90, 255, 120, 0.08) !important;
}

/* Placeholder */
.tool-card input::placeholder,
.card input::placeholder,
.glass-input::placeholder {
  color: rgba(255,255,255,0.45);
}

/* Remove number spinners (optional) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* =========================================
   ScopedLabs — Inline Help (tooltips/modal)
   Paste at END of assets/style.css
   ========================================= */

.label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.hint {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(120, 255, 140, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255,255,255,0.85);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.hint:hover {
  border-color: rgba(120, 255, 140, 0.45);
  box-shadow: 0 0 0 3px rgba(90, 255, 120, 0.10);
}

/* Modal shell */
.help-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.62);
  z-index: 9999;
}

.help-modal[aria-hidden="false"] {
  display: flex;
}

.help-card {
  width: min(560px, 92vw);
  border-radius: 18px;
  border: 1px solid rgba(120, 255, 140, 0.18);
  background: rgba(10, 14, 12, 0.92);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  padding: 16px 16px 14px;
}

.help-title {
  font-weight: 900;
  margin: 0 0 6px;
}

.help-body {
  margin: 0;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
}

.help-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* --- Help hint button (subtle, no circle) --- */
.hint{
  border: 0;
  background: transparent;
  color: inherit;              /* match label text */
  opacity: .65;                /* reduce attention */
  padding: 0 6px;
  margin-left: 6px;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.hint:hover{ opacity: .95; text-decoration: underline; }

.hint:focus-visible{
  outline: 2px solid rgba(120, 255, 120, .35);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- ScopedLabs: subtle help hint button (no circle) --- */
.label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.hint{
  appearance:none;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  line-height:1;
  font-weight:600;
  font-size:12px;
  color:inherit;           /* same as label text */
  opacity:.55;             /* toned down */
  cursor:pointer;
  transform: translateY(-1px);
}

.hint:hover{ opacity:.85; }
.hint:focus-visible{
  outline:2px solid rgba(120,255,120,.25);
  outline-offset:2px;
  border-radius:6px;
}

/* ScopedLabs — Help hint polish (subtle, no circle) */
.label-row{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.label-row .hint{
  margin-left:.25rem;
}

.hint{
  appearance:none;
  background:transparent;
  border:0;
  padding:0 .15rem;
  line-height:1;
  font:inherit;
  font-weight:600;
  color:var(--muted, rgba(255,255,255,.65));
  opacity:.7;
  cursor:pointer;
}

.hint:hover{
  opacity:1;
  color:var(--text, rgba(255,255,255,.9));
}

.hint:focus-visible{
  outline:2px solid rgba(120,255,120,.35);
  outline-offset:3px;
  border-radius:6px;
}
/* ScopedLabs: help hint buttons — subtle, no circle, sits next to label */
.label-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  justify-content:flex-start; /* not space-between */
}

.hint{
  border:0;
  background:transparent;
  padding:0 .15rem;
  line-height:1;
  font:inherit;
  color:rgba(255,255,255,.55); /* muted */
  cursor:pointer;
}

.hint:hover{
  color:rgba(255,255,255,.8);
}

.hint:focus-visible{
  outline:2px solid rgba(140,255,60,.35);
  outline-offset:2px;
  border-radius:6px;
}
/* ============================
   ScopedLabs template stabilizers
   Storage tool: results should NOT look like input pills
   + background band should sit lower / feel consistent
   Add at END of /assets/style.css
   ============================ */

/* 1) Keep the page “tall enough” so the green band doesn’t creep up on short pages */
.page{
  min-height: calc(100vh - 72px); /* 72px = approx header height; adjust if needed */
  padding-bottom: 96px;           /* pushes footer off the band visually */
}

/* 2) Make background behave consistently across different page heights */
body{
  background-attachment: fixed;
}

/* 3) Results: force simple line layout (no pill containers) */
.result-lines{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* If your global CSS makes .row look like a pill, neutralize it here */
.result-lines .row{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;

  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

/* Make the right-side values read clean */
.result-lines .row strong{
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* Optional: a subtle divider line without “pill” vibe */
.result-lines .row + .row{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 10px !important; /* re-add a little breathing room */
}
/* ============================
   ScopedLabs: select/dropdown polish
   (Closed select = glass pill)
   ============================ */

/* Make selects match the glass pill inputs */
.card select,
.tool-card select,
select{
  width: 100%;
  border-radius: 999px;
  padding: 10px 38px 10px 14px; /* space for arrow */
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(140, 255, 140, .22);
  color: rgba(255,255,255,.92);
  outline: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
  appearance: none;            /* remove native arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Focus ring (subtle, not neon) */
.card select:focus,
.tool-card select:focus,
select:focus{
  border-color: rgba(140,255,140,.35);
  box-shadow:
    0 0 0 1px rgba(140,255,140,.12),
    0 0 0 4px rgba(140,255,140,.06);
}

/* Custom arrow */
.card .select-wrap,
.tool-card .select-wrap{
  position: relative;
}

.card .select-wrap::after,
.tool-card .select-wrap::after{
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

/* Try to tame the opened dropdown list (limited by OS/browser) */
select option{
  background: #0b0f0c;         /* dark menu */
  color: rgba(255,255,255,.92);
}
/* === ScopedLabs Help + Select polish (append at END of style.css) === */

/* Put label + ? together (no far-right spacing) */
.label-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}

/* Subtle hint "?" (no circle, no big attention) */
.hint{
  border:0;
  background:transparent;
  padding:0 4px;
  margin:0;
  border-radius:0;
  line-height:1;
  font-weight:600;
  color: rgba(255,255,255,.55);
  cursor:pointer;
}
.hint:hover{ color: rgba(255,255,255,.80); }
.hint:focus{ outline: none; }

/* Make selects match the glass pill inputs */
.select-wrap{
  position:relative;
}

/* custom arrow */
.select-wrap::after{
  content:"▾";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

/* the actual select */
.select-wrap select,
select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  /* force dark dropdown styling where supported */
  color-scheme: dark;

  border-radius:999px;
  padding: 12px 38px 12px 14px; /* room for arrow */
  border: 1px solid rgba(80, 255, 120, .22);
  background: rgba(10, 12, 10, .50);
  color: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

/* keep focus glow consistent */
.select-wrap select:focus,
select:focus{
  outline:none;
  border-color: rgba(80, 255, 120, .45);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 0 0 3px rgba(80, 255, 120, .10);
}

/* (optional) guarantee pill buttons if anything overrides them */
.btn{ border-radius:999px; }

.tool-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ============================
   ScopedLabs — Tool card height lock
   Keeps all category cards equal height
   ============================ */

.grid {
  align-items: stretch;
}

.tool-card,
.tool-row {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tool-card .card-top,
.tool-row .card-top {
  margin-bottom: 6px;
}

.tool-card p,
.tool-row p {
  flex-grow: 1;      /* description takes remaining space */
}

.tool-card .actions,
.tool-row .actions {
  margin-top: auto; /* buttons/pills sit at bottom consistently */
}
/* ================================
   ScopedLabs: tool-row hard lock (override)
   Keeps rows consistent height + pill on right
================================ */
.tool-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  text-align:left !important;
}

.tool-row-left{
  flex: 1 1 auto;
  min-width: 0;
}

.tool-row-left strong{
  margin-bottom: 4px;
}

.tool-row-left .muted{
  margin: 0;
}

.tool-row .pill{
  flex: 0 0 auto;
  margin-left: 16px;
  align-self: center;
}

/* Equalize row height so “Advanced Storage Planner” can’t become taller */
.tool-row{
  min-height: 86px;
}
/* --- Video & Storage category rows: lock consistent height + layout --- */
.tool-row {
  min-height: 92px;              /* forces equal row height */
}

.tool-row__meta {
  flex: 1 1 auto;
  min-width: 0;                  /* allows text to truncate instead of pushing layout */
}

.tool-row__meta .muted {
  display: -webkit-box;          /* keep descriptions from making one row taller */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ScopedLabs Global Help Modal */
.modal { display: none; position: fixed; inset: 0; padding: 24px; z-index: 9999; }
.modal.is-open { display: flex; align-items: center; justify-content: center; }

.modal::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.65); }

.modal-content {
  position: relative;
  max-width: 720px;
  width: 100%;
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: #0b0f0e;
  border: 1px solid rgba(0,255,140,.25);
  box-shadow: 0 0 0 1px rgba(0,255,140,.12), 0 18px 60px rgba(0,0,0,.55);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.75);
  font-size: 22px;
  cursor: pointer;
}
.soft-divider {
  border: 0;
  height: 1px;
  background: rgba(0, 255, 0, 0.15);
  margin: 0.75rem 0;
}
/* Breadcrumb spacing — global, intentional */
.page-breadcrumb {
  margin-bottom: -0.25rem;
}
/* Breadcrumb vertical nudge (global) */
.page-breadcrumb,
.breadcrumb,
.tools-breadcrumb {
  transform: translateY(-6px);
}
.page-head .crumbs,
.page-head .breadcrumb,
.page-head .page-breadcrumb {
  transform: translateY(-6px);
}
/* Breadcrumb vertical spacing normalization */
.breadcrumbs,
.page-breadcrumbs,
.tools-breadcrumbs {
  margin-bottom: 0.35rem;
  margin-top: -0.5rem;
}
.breadcrumbs {
  margin-top: -0.5rem;
  margin-bottom: 0.35rem;
}
/* Section divider heading (e.g. "Other tools in this category") */
.section-divider,
.other-tools-title,
h3.section-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 1.75rem 0 0.75rem;
}
.section-divider,
.other-tools-title,
h3.section-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 1.75rem 0 0.75rem;
}
.section-divider {
  font-size: 1.35rem;   /* was ~1.15rem */
  font-weight: 700;     /* stronger hierarchy */
  letter-spacing: 0.02em;
  margin: 2.25rem 0 1rem;
}
/* Tool-row spacing inside stacked lists (prevents cards touching) */
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Failsafe if a page doesn't use .stack correctly */
.tool-row + .tool-row {
  margin-top: 16px;
}
/* --- Fix brand LED stretching --- */
.brand-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: #6dff4a;
  box-shadow: 0 0 6px rgba(109, 255, 74, 0.7);
  flex: 0 0 auto;
}
/* --- Fix Free tool pill stretching --- */
.pill {
  display: inline-flex;
  width: fit-content;
  max-width: max-content;
  align-self: flex-start;
}
/* ============================= */
/* Tool card vertical spacing   */
/* ============================= */

.tool-page > .card {
  margin-bottom: 1.75rem;
}

/* Slightly tighter on mobile */
@media (max-width: 768px) {
  .tool-page > .card {
    margin-bottom: 1.25rem;
  }
}
/* ============================= */
/* Results card spacing          */
/* ============================= */

.results {
  display: flex;
  flex-direction: column;
  gap: 0.6rem; /* space between result rows */
}

/* Individual result rows (text lines) */
.results p,
.results div {
  line-height: 1.45;
}

/* Optional: slightly tighter on mobile */
@media (max-width: 768px) {
  .results {
    gap: 0.45rem;
  }
}
/* ============================= */
/* Bandwidth Planner — Results spacing (robust) */
/* ============================= */

/* Try all common results containers */
#results,
#resultsCard,
#resultsPanel,
.results,
.results-card,
.results-box,
.result-box,
.tool-results,
.output,
.output-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* spacing between rows */
}

/* If your results are just multiple elements inside a card, force spacing anyway */
#results > * + *,
#resultsCard > * + *,
#resultsPanel > * + *,
.results > * + *,
.results-card > * + *,
.results-box > * + *,
.result-box > * + *,
.tool-results > * + *,
.output > * + *,
.output-card > * + * {
  margin-top: 0.75rem;
}

/* If results are text lines inside a single block, at least improve readability */
#results, #resultsCard, #resultsPanel,
.results, .results-card, .results-box, .result-box, .tool-results, .output, .output-card {
  line-height: 1.55;
}
.results .result-row{
  padding: 0.15rem 0;
}
/* === Card vertical spacing fix === */
.card {
  margin-bottom: 2rem;
}

.section-title {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;

  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.3px;

  color: rgba(235, 255, 235, 0.95);
}

/* POWER category: section title should read like a real header */
main h3.section-title {
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: 0.3px;
  color: rgba(235, 255, 235, 0.95);
}

/* Emphasize tool names in "Other tools" section */
.tool-row-title {
  font-weight: 600;
  color: rgba(235, 255, 235, 0.95);
}
/* Centered layout for Pro tools */
.tool-row-left.centered {
  text-align: center;
  align-items: center;
}

/* Pro tool title styling */
.tool-row-left.centered .tool-row-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: rgba(235, 255, 235, 0.95);
  margin-bottom: 0.35rem;
}

/* Lock icon — subtle, not shouty */
.tool-row-left.centered .lock-icon {
  font-size: 0.9em;
  opacity: 0.65;
  margin-right: 0.35rem;
}

/* Description softer for hierarchy */
.tool-row-left.centered .tool-row-sub {
  font-size: 0.95rem;
  color: rgba(200, 215, 200, 0.8);
  max-width: 520px;
  margin: 0 auto;
}
/* Center Pro tool titles + descriptions */
.tool-row-left {
  display: flex;
  flex-direction: column;
  align-items: center;   /* ⬅️ THIS centers the title block */
  text-align: center;    /* ⬅️ This centers the text itself */
}

/* Make Pro tool names clearly bold */
.tool-row-title {
  font-weight: 600;
}
/* =========================
   Tools page: category cards
   ========================= */
.page-tools .category-grid {
  align-items: stretch; /* keep equal-height cards per row */
}

.page-tools .category-grid > a.card {
  height: 100%;
  min-height: 160px;           /* enough to prevent the tiny card collapse */
  display: flex;
  flex-direction: column;
}

/* DO NOT force description to bottom (this was causing the row to grow visually) */
.page-tools .category-grid > a.card .muted {
  margin-top: 10px;            /* small consistent breathing room */
}



/* === ScopedLabs: Upgrade page card CTA alignment ===
   Forces the “Unlock … Pro” buttons to sit evenly at the bottom of each category card.
   Safe: scoped to /upgrade page + #choose section only.
*/
.page-upgrade #choose .upgrade-grid .card{
  display:flex;
  flex-direction:column;
}

.page-upgrade #choose .upgrade-grid .card > a.btn{
  order: 90;
  margin-top: auto;   /* push CTA to bottom */
}

.page-upgrade #choose .upgrade-grid .card > .muted[style*="font-size:.85rem"],
.page-upgrade #choose .upgrade-grid .card > .muted[style*="font-size: .85rem"]{
  order: 80;          /* keep the “future Pro tools” note just above CTA */
  margin-top: .6rem;
  margin-bottom: .6rem;
}

/* If any card ends up with the note as the last child, this keeps spacing consistent. */
.page-upgrade #choose .upgrade-grid .card > .muted:last-child{
  order: 80;
  margin-bottom: .6rem;
}

/* ==========================
   Upgrade page: align CTAs
   ========================== */
.page-upgrade .upgrade-grid { align-items: stretch; }

.page-upgrade .upgrade-card{
  display: flex;
  flex-direction: column;
}

/* Push CTA block to the bottom of each card */
.page-upgrade .upgrade-card .upgrade-cta{
  margin-top: auto;
  padding-top: 1rem;
}

/* Make buttons line up nicely + fill width */
.page-upgrade .upgrade-card .upgrade-cta .btn{
  width: 100%;
  text-align: center;
}

/* === ScopedLabs patch: keep primary buttons green even when using class="btn primary" === */
.btn.primary{
  border-color:rgba(83,255,61,.30);
  background: linear-gradient(180deg, rgba(83,255,61,.22), rgba(83,255,61,.08));
  box-shadow:0 0 0 6px rgba(83,255,61,.05);
}
.btn.primary:hover{
  border-color:rgba(83,255,61,.45);
  background: linear-gradient(180deg, rgba(83,255,61,.24), rgba(83,255,61,.10));
  box-shadow:0 0 0 7px rgba(83,255,61,.06), 0 20px 50px rgba(0,0,0,.45);
}
/* ScopedLabs landing hero spacing fix */
.hero-actions { margin-bottom: 12px; }
.hero-note { margin-top: 12px; }

/* Landing footer polish */
.site-footer {
  margin-top: 24px;
  padding-top: 16px;
  opacity: 0.75;
}
.site-footer .footer-tagline {
  font-size: 12px;
}
.site-footer .footer-links a {
  font-size: 12px;
}
/* =========================================================
   HEADER NAV POLISH (GLOBAL)
========================================================= */

.site-header nav {
  display: flex;
  gap: 22px;              /* spacing between buttons */
  align-items: center;
}

.site-header nav a {
  color: #cfead0;
  text-decoration: none;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  transition:
    color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.site-header nav a:hover {
  color: #9dff9d;
  background: rgba(120, 255, 120, 0.08);
  box-shadow: 0 0 10px rgba(120,255,120,0.55);
}

/* =========================================================
   ScopedLabs: NAV + TOOL ACTION SPACING (global patch)
   Put this at the VERY END of /assets/style.css
   ========================================================= */

/* --- NAV pills: consistent spacing + rounded pills + hover glow --- */
.site-header .header-inner {
  gap: 16px;
}

.site-header .site-nav {
  display: flex;
  align-items: center;
  gap: 14px;               /* prevents crammed links */
  flex-wrap: wrap;         /* avoids smashing on smaller widths */
}

.site-header .site-nav a,
.site-header .site-nav .nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;    /* true pill */
  text-decoration: none;
  color: rgba(255,255,255,0.86);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(120,255,140,0.12);
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.site-header .site-nav a:hover,
.site-header .site-nav .nav-pill:hover {
  color: rgba(255,255,255,0.96);
  border-color: rgba(120,255,140,0.30);
  background: rgba(120,255,140,0.06);
  box-shadow: 0 0 0 3px rgba(120,255,140,0.08), 0 0 22px rgba(120,255,140,0.14);
  transform: translateY(-1px);
}

/* Optional "active" look if you add aria-current="page" or .active */
.site-header .site-nav a[aria-current="page"],
.site-header .site-nav a.active {
  color: rgba(255,255,255,0.98);
  border-color: rgba(120,255,140,0.45);
  background: rgba(120,255,140,0.10);
  box-shadow: 0 0 0 3px rgba(120,255,140,0.10), 0 0 24px rgba(120,255,140,0.16);
}

/* --- Tool form: stop buttons kissing the last input row --- */
.tool-card .form-grid,
.tool-card .form {
  margin-bottom: 14px;     /* space between fields and actions row */
}

.tool-card .actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* If your tool card uses labels directly (no .field wrappers), this still helps */
.tool-card label {
  display: block;
  margin-bottom: 10px;
}

/* Make primary buttons match pill/rounded style */
.btn,
.btn-primary,
.btn.btn-primary {
  border-radius: 999px;
}
/* ================================
   NAV BUTTON NORMALIZATION
   ================================ */

.nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 14px;
  border-radius: 999px;

  background: rgba(20, 30, 20, 0.55);
  border: 1px solid rgba(120, 255, 120, 0.25);

  color: #cfeecf;
  text-decoration: none;

  transition: all 0.2s ease;
}

.nav a:hover {
  background: rgba(90, 255, 90, 0.18);
  box-shadow: 0 0 14px rgba(90, 255, 90, 0.55);
  color: #ffffff;
}
/* =========================================================
   SCOPEDLABS HOTFIX — NAV + BUTTON VISUAL DRIFT (0203)
   Goal:
   - Remove "puke green" hover glow + default-looking nav pills
   - Make primary buttons behave like Reset (no halo/double-layer)
   - Keep the same overall neon theme, but without heavy glow
   ========================================================= */

/* -------- Buttons: kill the halo / double-layer effect -------- */
.btn-primary,
.btn.primary{
  /* The big "ring" (0 0 0 6px / 7px) reads like a second button behind it */
  box-shadow: none !important;
}

.btn-primary:hover,
.btn.primary:hover{
  /* Match Reset hover behavior: no big glow, just subtle border + tint */
  box-shadow: none !important;
  border-color: rgba(83,255,61,.22) !important;
  background: rgba(83,255,61,.06) !important;
}

/* If you still want primary to look "primary" at rest, keep it slightly tinted */
.btn-primary,
.btn.primary{
  border-color: rgba(83,255,61,.28) !important;
  background: linear-gradient(180deg, rgba(83,255,61,.16), rgba(83,255,61,.06)) !important;
}

/* -------- Header nav: normalize to the original .nav-link look -------- */
/* Some later patches add large glow shadows on hover; remove that globally */
.site-header nav a:hover,
.site-header .site-nav a:hover,
.nav a:hover{
  box-shadow: none !important;
  transform: none !important;
}

/* Keep nav pills consistent and subtle (no neon blast) */
.site-header nav a,
.site-header .site-nav a,
.nav a{
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(233,240,236,.86) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
}

.site-header nav a:hover,
.site-header .site-nav a:hover,
.nav a:hover{
  border-color: rgba(83,255,61,.18) !important;
  background: rgba(83,255,61,.06) !important;
  color: rgba(233,240,236,.92) !important;
}

/* Active state (optional): support aria-current="page" without extra glow */
.site-header nav a[aria-current="page"],
.site-header .site-nav a[aria-current="page"],
.nav a[aria-current="page"],
.site-header nav a.active,
.site-header .site-nav a.active,
.nav a.active{
  border-color: rgba(83,255,61,.28) !important;
  background: rgba(83,255,61,.10) !important;
  box-shadow: none !important;
}
/* --- Tool spacing polish --- */

/* Space below Calculate / Reset buttons */
.actions {
  margin-bottom: 1.25rem;
}

/* Space above Results box */
.results {
  margin-top: 1.25rem;
}

/* Lock icon next to Pro tool titles */
.lock {
  margin-left: 6px;
  font-size: 0.9em;
  opacity: 0.8;
  color: var(--green);
}
/* Lock icon before Pro tool titles */
.lock-icon::before {
  content: "🔒";
  margin-right: 6px;
}
/* Force consistent category card title sizing */
.category-grid .card .h2,
.category-grid .card h2 {
  font-size: 1.25rem;
  line-height: 1.2;
}
/* Lock category page title size to Power style */
.page-head h1,
.page-head .h1 {
  font-size: 2rem;
  line-height: 1.2;
}
/* Checkout pills: Selected + Change match */
.checkout-pill,
.checkout-change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  height: 30px;
}

/* Status pill */
.checkout-pill {
  background: rgba(0, 255, 120, 0.12);
  border: 1px solid rgba(0, 255, 120, 0.35);
  color: #7CFFB2;
}

/* Change button styled same size */
.checkout-change {
  background: rgba(0, 255, 120, 0.08);
  border: 1px solid rgba(0, 255, 120, 0.35);
  color: #9CFFD0;
  cursor: pointer;
}

.checkout-change:hover {
  background: rgba(0, 255, 120, 0.16);
}
/* ===========================
   Upgrade / Checkout pill-row
   =========================== */

#checkout #sl-category-pill,
#checkout a.btn[href*="#choose"]{
  height: 30px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Make the link-button stop behaving like a “big button” */
#checkout a.btn[href*="#choose"]{
  min-height: 30px;
  width: auto;
}
.pill-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
}
.pill-link:hover{
  filter: brightness(1.05);
}
/* Make entire cards clickable */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(0,255,140,0.35),
              0 12px 30px rgba(0,0,0,0.4);
}
.sl-category-card.is-selected {
  outline: 2px solid rgba(80,255,120,.65);
  box-shadow:
    0 0 0 4px rgba(80,255,120,.12),
    0 0 18px rgba(80,255,120,.25);
}
/* Upgrade page – Selected category card width clamp */
#checkout .pro-category-card,
#checkout .selected-category-card {
  max-width: 420px;
  width: 100%;
}

/* Center it nicely in its column */
#checkout .pro-category-card {
  margin-left: auto;
  margin-right: auto;
}
/* Upgrade checkout: clamp the INNER preview card width */
#checkout .card .card {
  max-width: 520px;
  width: 100%;
}
#checkout .selected-category-card {
  max-width: 520px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Checkout selected category preview sizing */
.selected-category-preview-wrapper {
  max-width: 640px;
}

.selected-category-preview-wrapper .card {
  margin-top: .5rem;
}
/* Upgrade checkout: keep preview card pinned to the top-right */
#sl-checkout-grid {
  align-items: flex-start;
}

#selected-category-preview {
  align-self: flex-start;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If the injected preview uses a .card wrapper, kill any top margin it brings */
#selected-category-preview .card {
  margin-top: 0 !important;
}
/* Upgrade category card CTA normalization */
.upgrade-card .upgrade-cta a.btn,
.upgrade-card .upgrade-cta a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  white-space: normal;
  text-align: center;
}
/* === UPGRADE: Normalize all category CTA buttons === */
#categories .upgrade-cta a,
#categories a.btn,
#categories a.btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}
/* =========================================
   ScopedLabs Upgrade Card Alignment Fix
   ========================================= */

/* Make upgrade cards use vertical layout */
.upgrade-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Allow text content to expand */
.upgrade-card p,
.upgrade-card ul{
  flex-grow:0;
}

/* Push CTA section to bottom */
.upgrade-card .upgrade-cta{
  margin-top:auto;
}

/* Keep buttons consistent width */
.upgrade-card .btn{
  width:100%;
}
.checkout-grid {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.is-hidden { display: none !important; }

.unlocked-pill {
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.6);
  color: #22c55e;
  font-weight: 600;
}
.tool-best-for{
  font-size:0.9rem;
  color:#9aa5b1;
  margin-top:4px;
}

/* =========================================
 /* =========================================
   Pipeline Status Bar
========================================= */

.pipeline-bar {
  margin: 18px 0 28px 0;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}

.pipeline-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a8a8a;
  margin-bottom: 8px;
}

.pipeline-steps {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: auto;
}

.pipe-step,
.pipe-arrow {
  position: relative;
  z-index: 1;
}

.pipe-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #777;
}

.pipe-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #444;
  flex: 0 0 auto;
}

.pipe-arrow {
  color: #444;
}

.pipe-step.active {
  color: #fff;
}

.pipe-step.active .pipe-dot {
  background: #00ff9c;
  box-shadow: 0 0 10px rgba(0,255,156,.8);
}

.pipe-step.complete {
  color: #a8ffd8;
}

.pipe-step.complete .pipe-dot {
  background: #00ff9c;
}

.pipeline-steps::before{
  content: none !important;
  display: none !important;
}

/* Shared design pipeline */
.sl-pipeline {
  margin-top: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
}

.sl-pipeline-title {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}

.sl-pipeline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sl-pipeline-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: rgba(255,255,255,0.72);
  font-size: 0.97rem;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.sl-pipeline-step:hover {
  color: rgba(255,255,255,0.92);
  transform: translateY(-1px);
}

.sl-pipeline-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}

.sl-pipeline-step.is-complete .sl-pipeline-dot,
.sl-pipeline-step.is-current .sl-pipeline-dot {
  background: #2cff9b;
  box-shadow:
    0 0 0 1px rgba(44,255,155,0.18),
    0 0 10px rgba(44,255,155,0.35);
}

.sl-pipeline-step.is-current {
  color: #ffffff;
}

.sl-pipeline-step.is-complete {
  color: rgba(255,255,255,0.9);
}

.sl-pipeline-sep {
  color: rgba(255,255,255,0.28);
  font-size: 0.9rem;
  margin: 0 2px;
}

@media (max-width: 640px) {
  .sl-pipeline {
    padding: 12px 14px;
  }

  .sl-pipeline-row {
    gap: 6px;
  }

  .sl-pipeline-step {
    font-size: 0.92rem;
  }
}

.best-for {
  margin: 12px 0 14px;
  color: rgba(220, 235, 225, 0.78);
  font-size: 0.98rem;
  line-height: 1.5;
}

.best-for strong {
  color: #dfeee5;
  font-weight: 700;
}

.page-head .best-for {
  margin: 12px 0 14px;
  color: rgba(220, 235, 225, 0.78) !important;
  font-size: 0.98rem;
  line-height: 1.5;
}

.page-head .best-for strong {
  color: #dfeee5 !important;
  font-weight: 700;
}

.page-head .best-for {
  margin-top: 10px;
  color: var(--text-muted, rgba(255,255,255,0.72));
  font-size: 0.98rem;
  line-height: 1.55;
}

.page-head .best-for strong {
  color: inherit;
  font-weight: 700;
}

/* =========================================
   ScopedLabs brand lockup upgrade
   dot + icon + wordmark
   ========================================= */

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-dot{
  width:8px;
  height:8px;
  min-width:8px;
  min-height:8px;
  border-radius:50%;
  background:#6dff4a;
  box-shadow:0 0 8px rgba(109,255,74,.7);
  flex:0 0 auto;
}

.brand-icon-wrap{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(120,255,140,.14);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 18px rgba(120,255,140,.08);
  flex:0 0 auto;
}

.brand-icon{
  width:28px;
  height:28px;
  display:block;
  object-fit:contain;
}

.brand-name{
  font-weight:700;
  letter-spacing:.2px;
  color:var(--text);
  font-size:1.05rem;
}

/* tighten on smaller screens */
@media (max-width: 640px){
  .brand{
    gap:8px;
  }

  .brand-icon-wrap{
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .brand-icon{
    width:24px;
    height:24px;
  }

  .brand-name{
    font-size:1rem;
  }
}

/* =========================================
   ScopedLabs nav brand polish
   remove icon outline box + tighten spacing
   ========================================= */

.brand{
  display:flex;
  align-items:center;
  gap:8px; /* slightly tighter overall */
}

.brand-dot{
  margin-right: 4px; /* tiny breathing room after the dot */
}

.brand-icon-wrap{
  width:auto;
  height:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0;
  flex:0 0 auto;
}

.brand-icon{
  width:26px;
  height:26px;
  display:block;
  object-fit:contain;
}

.brand-name{
  font-weight:700;
  letter-spacing:.2px;
  color:var(--text);
  font-size:1.05rem;
  margin-left: 2px; /* keeps it close to the icon */
}

@media (max-width: 640px){
  .brand{
    gap:7px;
  }

  .brand-icon{
    width:23px;
    height:23px;
  }

  .brand-name{
    font-size:1rem;
    margin-left: 1px;
  }
}

/* =========================================
   ScopedLabs nav brand final override
   ========================================= */

.site-header .brand{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}

.site-header .brand-dot{
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  margin-right:4px !important;
  flex:0 0 auto !important;
}

.site-header .brand-icon-wrap{
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:none !important;
  outline:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.site-header .brand-icon{
  width:26px !important;
  height:26px !important;
  display:block !important;
  object-fit:contain !important;
}

.site-header .brand-name{
  margin-left:0 !important;
  font-size:1.05rem !important;
  font-weight:700 !important;
  letter-spacing:.2px !important;
}


/* SCOPEDLABS FINAL NAV OVERRIDE - START */

/*
  Final browser-tab nav skin.
  This intentionally overrides legacy .site-nav / nav-pill rules,
  including older border-radius: 999px !important styles.
*/

.site-header {
  position: relative !important;
  z-index: 40 !important;
  border-bottom: 1px solid rgba(120, 255, 120, 0.22) !important;
  background:
    radial-gradient(circle at 28% 0%, rgba(80,255,120,0.075), transparent 34%),
    linear-gradient(180deg, rgba(5,12,12,0.98), rgba(3,8,9,0.96)) !important;
}

.site-header .header-inner {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-height: 72px !important;
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}

.site-header .brand {
  align-self: center !important;
  margin-bottom: 12px !important;
  flex: 0 0 auto !important;
}

/* tab strip */
.site-header nav.nav-tabs,
.site-header .nav.nav-tabs,
.site-header .site-nav.nav-tabs,
.site-header .nav.site-nav.nav-tabs {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 0 !important;

  align-self: flex-end !important;
  margin-left: auto !important;
  margin-bottom: -1px !important;
  padding: 0 !important;
  min-height: 40px !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* hard browser-tab shape */
.site-header nav.nav-tabs a.nav-tab,
.site-header .nav.nav-tabs a.nav-tab,
.site-header .site-nav.nav-tabs a.nav-tab,
.site-header .nav.site-nav.nav-tabs a.nav-tab {
  box-sizing: border-box !important;
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 104px !important;
  height: 40px !important;
  padding: 0 18px !important;
  margin: 0 0 0 -1px !important;

  color: rgba(245,255,248,0.92) !important;
  text-decoration: none !important;
  font-size: 0.94rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.026)),
    linear-gradient(180deg, rgba(28,39,39,0.96), rgba(9,17,17,0.98)) !important;

  border: 1px solid rgba(255,255,255,0.15) !important;
  border-bottom-color: rgba(4,10,10,0.98) !important;

  /* this is the important part that beats old pill rules */
  border-radius: 13px 13px 0 0 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(120,255,120,0.045),
    0 8px 18px rgba(0,0,0,0.22) !important;

  outline: none !important;
  isolation: isolate !important;
  overflow: visible !important;
  transform: none !important;
  clip-path: none !important;

  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease !important;
}

/* kill old pseudo/pill/trapezoid effects */
.site-header nav.nav-tabs a.nav-tab::before,
.site-header nav.nav-tabs a.nav-tab::after,
.site-header .site-nav.nav-tabs a.nav-tab::before,
.site-header .site-nav.nav-tabs a.nav-tab::after {
  content: none !important;
  display: none !important;
  clip-path: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* hover polish */
.site-header nav.nav-tabs a.nav-tab:hover,
.site-header nav.nav-tabs a.nav-tab:focus-visible,
.site-header .site-nav.nav-tabs a.nav-tab:hover,
.site-header .site-nav.nav-tabs a.nav-tab:focus-visible {
  color: #ffffff !important;

  background:
    linear-gradient(180deg, rgba(180,255,190,0.16), rgba(120,255,120,0.035)),
    linear-gradient(180deg, rgba(30,55,40,0.98), rgba(10,25,17,0.99)) !important;

  border-color: rgba(120,255,120,0.42) !important;
  border-bottom-color: rgba(10,25,17,0.99) !important;
  border-radius: 13px 13px 0 0 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(120,255,120,0.10),
    0 0 0 1px rgba(120,255,120,0.07),
    0 0 18px rgba(120,255,120,0.18),
    0 8px 18px rgba(0,0,0,0.26) !important;

  transform: none !important;
}

/* mobile fallback only */
@media (max-width: 860px) {
  .site-header .header-inner {
    align-items: center !important;
    gap: 10px !important;
  }

  .site-header .brand {
    margin-bottom: 0 !important;
  }

  .site-header nav.nav-tabs,
  .site-header .nav.nav-tabs,
  .site-header .site-nav.nav-tabs,
  .site-header .nav.site-nav.nav-tabs {
    width: 100% !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 8px !important;
  }

  .site-header nav.nav-tabs a.nav-tab,
  .site-header .site-nav.nav-tabs a.nav-tab {
    min-width: auto !important;
    height: 36px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    font-size: 0.86rem !important;
    border-radius: 999px !important;
    border-bottom-color: rgba(255,255,255,0.15) !important;
  }
}

/* SCOPEDLABS FINAL NAV OVERRIDE - END */


/* SCOPEDLABS ACTIVE NAV TAB MATCHES HOVER - START */
.site-header nav.nav-tabs a.nav-tab[aria-current="page"],
.site-header .site-nav.nav-tabs a.nav-tab[aria-current="page"],
.site-header .nav-tabs a.nav-tab[aria-current="page"] {
  color: #ffffff !important;

  background:
    linear-gradient(180deg, rgba(180,255,190,0.16), rgba(120,255,120,0.035)),
    linear-gradient(180deg, rgba(30,55,40,0.98), rgba(10,25,17,0.99)) !important;

  border-color: rgba(120,255,120,0.42) !important;
  border-bottom-color: rgba(10,25,17,0.99) !important;
  border-radius: 13px 13px 0 0 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(120,255,120,0.10),
    0 0 0 1px rgba(120,255,120,0.07),
    0 0 18px rgba(120,255,120,0.18),
    0 8px 18px rgba(0,0,0,0.26) !important;

  transform: none !important;
}
/* SCOPEDLABS ACTIVE NAV TAB MATCHES HOVER - END */


/* SCOPEDLABS ACTIVE TAB FINAL OVERRIDE - START */
.site-header nav.nav-tabs a.nav-tab[aria-current="page"],
.site-header nav.nav-tabs a.nav-tab.is-active,
.site-header .site-nav.nav-tabs a.nav-tab[aria-current="page"],
.site-header .site-nav.nav-tabs a.nav-tab.is-active,
.site-header .nav.site-nav.nav-tabs a.nav-tab[aria-current="page"],
.site-header .nav.site-nav.nav-tabs a.nav-tab.is-active {
  color: #ffffff !important;

  background:
    linear-gradient(180deg, rgba(180,255,190,0.16), rgba(120,255,120,0.035)),
    linear-gradient(180deg, rgba(30,55,40,0.98), rgba(10,25,17,0.99)) !important;

  border-color: rgba(120,255,120,0.42) !important;
  border-bottom-color: rgba(10,25,17,0.99) !important;
  border-radius: 13px 13px 0 0 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(120,255,120,0.10),
    0 0 0 1px rgba(120,255,120,0.07),
    0 0 18px rgba(120,255,120,0.18),
    0 8px 18px rgba(0,0,0,0.26) !important;

  transform: none !important;
  clip-path: none !important;
}

.site-header nav.nav-tabs a.nav-tab[aria-current="page"]::before,
.site-header nav.nav-tabs a.nav-tab[aria-current="page"]::after,
.site-header nav.nav-tabs a.nav-tab.is-active::before,
.site-header nav.nav-tabs a.nav-tab.is-active::after {
  content: none !important;
  display: none !important;
}
/* SCOPEDLABS ACTIVE TAB FINAL OVERRIDE - END */


/* SCOPEDLABS MOBILE NAV STRIP - START */

/*
  Mobile nav:
  - keep browser-tab look
  - no wrapping into stacked rows
  - horizontal swipe when needed
  - overrides old mobile pill fallback
*/

@media (max-width: 700px) {
  .site-header .header-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
  }

  .site-header .brand {
    align-self: flex-start !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    transform: scale(0.92);
    transform-origin: left center;
  }

  .site-header nav.nav-tabs,
  .site-header .nav.nav-tabs,
  .site-header .site-nav.nav-tabs,
  .site-header .nav.site-nav.nav-tabs {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    margin-left: 0 !important;
    margin-bottom: -1px !important;
    padding: 4px 0 0 0 !important;
    min-height: 39px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .site-header nav.nav-tabs::-webkit-scrollbar,
  .site-header .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .site-header nav.nav-tabs a.nav-tab,
  .site-header .nav.nav-tabs a.nav-tab,
  .site-header .site-nav.nav-tabs a.nav-tab,
  .site-header .nav.site-nav.nav-tabs a.nav-tab {
    flex: 0 0 auto !important;

    min-width: 92px !important;
    height: 38px !important;
    padding: 0 14px !important;
    margin: 0 0 0 -1px !important;

    font-size: 0.86rem !important;
    font-weight: 750 !important;
    line-height: 1 !important;

    color: rgba(245,255,248,0.92) !important;

    background:
      linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.026)),
      linear-gradient(180deg, rgba(28,39,39,0.96), rgba(9,17,17,0.98)) !important;

    border: 1px solid rgba(255,255,255,0.15) !important;
    border-bottom-color: rgba(4,10,10,0.98) !important;
    border-radius: 12px 12px 0 0 !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 -1px 0 rgba(120,255,120,0.045),
      0 8px 18px rgba(0,0,0,0.22) !important;

    clip-path: none !important;
    transform: none !important;
  }

  .site-header nav.nav-tabs a.nav-tab::before,
  .site-header nav.nav-tabs a.nav-tab::after,
  .site-header .site-nav.nav-tabs a.nav-tab::before,
  .site-header .site-nav.nav-tabs a.nav-tab::after {
    content: none !important;
    display: none !important;
  }

  .site-header nav.nav-tabs a.nav-tab:hover,
  .site-header nav.nav-tabs a.nav-tab:focus-visible,
  .site-header nav.nav-tabs a.nav-tab[aria-current="page"],
  .site-header nav.nav-tabs a.nav-tab.is-active,
  .site-header .site-nav.nav-tabs a.nav-tab:hover,
  .site-header .site-nav.nav-tabs a.nav-tab:focus-visible,
  .site-header .site-nav.nav-tabs a.nav-tab[aria-current="page"],
  .site-header .site-nav.nav-tabs a.nav-tab.is-active {
    color: #ffffff !important;

    background:
      linear-gradient(180deg, rgba(180,255,190,0.16), rgba(120,255,120,0.035)),
      linear-gradient(180deg, rgba(30,55,40,0.98), rgba(10,25,17,0.99)) !important;

    border-color: rgba(120,255,120,0.42) !important;
    border-bottom-color: rgba(10,25,17,0.99) !important;
    border-radius: 12px 12px 0 0 !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(120,255,120,0.10),
      0 0 0 1px rgba(120,255,120,0.07),
      0 0 18px rgba(120,255,120,0.18),
      0 8px 18px rgba(0,0,0,0.26) !important;

    transform: none !important;
  }
}

@media (max-width: 390px) {
  .site-header nav.nav-tabs a.nav-tab,
  .site-header .site-nav.nav-tabs a.nav-tab {
    min-width: 84px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 0.82rem !important;
  }
}

/* SCOPEDLABS MOBILE NAV STRIP - END */


/* SCOPEDLABS STICKY HEADER - START */

/*
  Keeps the main ScopedLabs header/nav visible while scrolling.
  Uses sticky instead of fixed so the page does not jump or hide content.
*/

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 12px 34px rgba(0,0,0,0.28),
    inset 0 -1px 0 rgba(120,255,120,0.16) !important;
}

/* Prevent anchor jumps from hiding content behind the sticky header */
html {
  scroll-padding-top: 92px;
}

@media (max-width: 700px) {
  html {
    scroll-padding-top: 122px;
  }

  .site-header {
    z-index: 999 !important;
  }
}

/* SCOPEDLABS STICKY HEADER - END */

/* ScopedLabs global result-row safety normalization */
.results .result-row,
.results-grid .result-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(120, 255, 120, 0.14);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.results .result-label,
.results-grid .result-label {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.94rem;
  line-height: 1.35;
}

.results .result-value,
.results-grid .result-value {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 750;
  text-align: right;
  line-height: 1.35;
}

.results,
.results-grid {
  display: grid;
  gap: 10px;
}

@media (max-width: 640px) {
  .results .result-row,
  .results-grid .result-row {
    display: grid;
    gap: 6px;
  }

  .results .result-value,
  .results-grid .result-value {
    text-align: left;
  }
}

/* Hide legacy inline help hint buttons now that KB/guide cards exist */
.label-row .hint,
.field .hint,
label .hint,
button.hint {
  display: none !important;
}

/* Remove leftover spacing where hint buttons used to sit */
.label-row {
  gap: 0 !important;
}


/* ScopedLabs fixed header override — nav-tabs-021 */
:root {
  --sl-fixed-header-height: 96px;
}

html {
  scroll-padding-top: calc(var(--sl-fixed-header-height) + 18px);
}

body {
  padding-top: var(--sl-fixed-header-height);
}

.site-header {
  position: fixed !important;
  top: 0 !important;
  inset-inline: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  transform: none !important;
}

@media (max-width: 720px) {
  :root {
    --sl-fixed-header-height: 118px;
  }
}




/* === ScopedLabs Physical Security action button shape normalization v027 === */
body[data-tool="area-planner"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="scene-illumination"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="mounting-height"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="field-of-view"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="camera-coverage-area"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="camera-spacing"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="blind-spot-check"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="pixel-density"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="face-recognition-range"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="license-plate-range"] .btn:not(.nav-tab):not(.pill):not(.pill-link) {
  border-radius: 10px !important;
  min-height: 38px;
  min-width: 124px;
  justify-content: center;
  letter-spacing: 0.01em;
}

body[data-tool="area-planner"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="scene-illumination"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="mounting-height"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="field-of-view"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="camera-coverage-area"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="camera-spacing"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="blind-spot-check"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="pixel-density"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="face-recognition-range"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="license-plate-range"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link) {
  border-radius: 10px !important;
  box-shadow: none !important;
}

body[data-tool="area-planner"] .btn:not(.nav-tab):not(.pill):not(.pill-link):hover,
body[data-tool="scene-illumination"] .btn:not(.nav-tab):not(.pill):not(.pill-link):hover,
body[data-tool="mounting-height"] .btn:not(.nav-tab):not(.pill):not(.pill-link):hover,
body[data-tool="field-of-view"] .btn:not(.nav-tab):not(.pill):not(.pill-link):hover,
body[data-tool="camera-coverage-area"] .btn:not(.nav-tab):not(.pill):not(.pill-link):hover,
body[data-tool="camera-spacing"] .btn:not(.nav-tab):not(.pill):not(.pill-link):hover,
body[data-tool="blind-spot-check"] .btn:not(.nav-tab):not(.pill):not(.pill-link):hover,
body[data-tool="pixel-density"] .btn:not(.nav-tab):not(.pill):not(.pill-link):hover,
body[data-tool="face-recognition-range"] .btn:not(.nav-tab):not(.pill):not(.pill-link):hover,
body[data-tool="license-plate-range"] .btn:not(.nav-tab):not(.pill):not(.pill-link):hover {
  border-color: rgba(118, 255, 151, 0.38) !important;
}


/* === ScopedLabs Physical Security action button tone normalization v028 === */
/* Keep Physical Security action text consistent across local tool styles. */
body[data-category="physical-security"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="area-planner"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="scene-illumination"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="mounting-height"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="field-of-view"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="camera-coverage-area"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="camera-spacing"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="blind-spot-check"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="pixel-density"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="face-recognition-range"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="license-plate-range"] .btn:not(.nav-tab):not(.pill):not(.pill-link) {
  font-weight: 650 !important;
}

/* Coverage Area had one local class making Reset/Back read like primary actions. */
body[data-tool="camera-coverage-area"] #reset.coverage-action-btn,
body[data-tool="camera-coverage-area"] a.coverage-action-btn:not(#continue),
body[data-tool="camera-coverage-area"] #saveSnapshot.coverage-action-btn {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)) !important;
  color: rgba(235, 245, 238, 0.92) !important;
  box-shadow: none !important;
}

body[data-tool="camera-coverage-area"] #reset.coverage-action-btn:hover,
body[data-tool="camera-coverage-area"] a.coverage-action-btn:not(#continue):hover,
body[data-tool="camera-coverage-area"] #saveSnapshot.coverage-action-btn:hover {
  border-color: rgba(118, 255, 151, 0.28) !important;
  background: rgba(83,255,61,.06) !important;
}

/* Keep Coverage's primary flow actions visually green. */
body[data-tool="camera-coverage-area"] #calc.coverage-action-btn,
body[data-tool="camera-coverage-area"] #continue.coverage-action-btn {
  border-color: rgba(125, 255, 152, 0.52) !important;
  background: linear-gradient(180deg, rgba(25, 129, 56, 0.96), rgba(10, 91, 40, 0.94)) !important;
  color: rgba(246, 255, 249, 0.98) !important;
}


/* === ScopedLabs Coverage Area action button tone v029 === */
/* Coverage Area only: soften primary action tone and keep secondary actions dark. */
body[data-tool="camera-coverage-area"] #calc.coverage-action-btn,
body[data-tool="camera-coverage-area"] #continue.coverage-action-btn {
  border-radius: 10px !important;
  border-color: rgba(118, 255, 151, 0.34) !important;
  background: linear-gradient(180deg, rgba(42, 116, 55, 0.50), rgba(16, 68, 30, 0.62)) !important;
  color: rgba(246, 255, 249, 0.98) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(83,255,61,.055) !important;
  transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

body[data-tool="camera-coverage-area"] #calc.coverage-action-btn:hover,
body[data-tool="camera-coverage-area"] #continue.coverage-action-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(176, 255, 196, 0.58) !important;
  background: linear-gradient(180deg, rgba(56, 142, 70, 0.66), rgba(21, 86, 37, 0.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(118,255,151,.10) !important;
}

body[data-tool="camera-coverage-area"] #reset.coverage-action-btn,
body[data-tool="camera-coverage-area"] a.coverage-action-btn:not(#continue),
body[data-tool="camera-coverage-area"] #exportReport.coverage-action-btn,
body[data-tool="camera-coverage-area"] #saveSnapshot.coverage-action-btn {
  border-radius: 10px !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)) !important;
  color: rgba(235, 245, 238, 0.94) !important;
  box-shadow: none !important;
  transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

body[data-tool="camera-coverage-area"] #reset.coverage-action-btn:hover,
body[data-tool="camera-coverage-area"] a.coverage-action-btn:not(#continue):hover,
body[data-tool="camera-coverage-area"] #exportReport.coverage-action-btn:not(:disabled):hover,
body[data-tool="camera-coverage-area"] #saveSnapshot.coverage-action-btn:not(:disabled):hover {
  transform: translateY(-1px) !important;
  border-color: rgba(120, 255, 150, 0.34) !important;
  background: linear-gradient(180deg, rgba(83,255,61,0.085), rgba(255,255,255,0.032)) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.22) !important;
}

body[data-tool="camera-coverage-area"] #exportReport.coverage-action-btn:disabled,
body[data-tool="camera-coverage-area"] #saveSnapshot.coverage-action-btn:disabled {
  opacity: 0.56 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: saturate(0.82) !important;
}


/* === ScopedLabs Physical Security card shell rhythm v030 === */
/* Shared Physical Security card/title rhythm, based on accepted Coverage Area shell. */
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .container > section.card,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) #toolCard,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) #lockedCard,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .sl-help-card {
  margin-top: 22px !important;
}

body[data-category="physical-security"]:not([data-tool="lens-selection"]) .container > section.card > h2.h3,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .container > section.card > h2.card-title,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) #toolCard > h2.card-title,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .container > section.card > h3.h3,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .sl-help-title {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 1.24rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
}

body[data-category="physical-security"]:not([data-tool="lens-selection"]) .container > section.card > p.muted,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) #toolCard > p.muted,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .sl-help-summary {
  color: rgba(226, 232, 240, 0.74) !important;
  line-height: 1.55 !important;
}

/* Remove decorative card badges while preserving status pills/chips elsewhere. */
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .sl-help-card .pill,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .sl-help-card .badge,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .sl-help-card .chip,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .sl-help-kicker,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .sl-help-eyebrow,
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .sl-help-label {
  display: none !important;
}

/* KB card CTA should visually match Coverage's rectangular action button rhythm. */
body[data-category="physical-security"]:not([data-tool="lens-selection"]) .sl-help-card .btn {
  min-height: 38px !important;
  min-width: 124px !important;
  border-radius: 10px !important;
  justify-content: center !important;
  letter-spacing: 0.01em !important;
}

/* Keep locked-card headings from becoming oversized visual anchors. */
body[data-category="physical-security"]:not([data-tool="lens-selection"]) #lockedCard > h2.h2 {
  font-size: 1.24rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

/* physical-security-button-polish-001
   Shared Physical Security CTA polish:
   - rectangular CTA buttons for modernized tool pages
   - disabled export/snapshot buttons visibly greyed out
   - disabled export/snapshot buttons show not-allowed cursor on hover
*/
body[data-category="physical-security"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-category="physical-security"] button.btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="lens-selection"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="lens-selection"] button:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="pixel-density"] .btn:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="pixel-density"] button:not(.nav-tab):not(.pill):not(.pill-link) {
  border-radius: 10px !important;
  min-height: 38px;
  min-width: 124px;
  justify-content: center;
  letter-spacing: 0.01em;
  font-weight: 650 !important;
}

body[data-category="physical-security"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-category="physical-security"] button.btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="lens-selection"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="lens-selection"] button.btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="pixel-density"] .btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link),
body[data-tool="pixel-density"] button.btn.btn-primary:not(.nav-tab):not(.pill):not(.pill-link) {
  border-radius: 10px !important;
  box-shadow: none !important;
}

body[data-category="physical-security"] #exportReport:disabled,
body[data-category="physical-security"] #saveSnapshot:disabled,
body[data-tool="lens-selection"] #exportReport:disabled,
body[data-tool="lens-selection"] #saveSnapshot:disabled,
body[data-tool="pixel-density"] #exportReport:disabled,
body[data-tool="pixel-density"] #saveSnapshot:disabled {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: grayscale(0.35) saturate(0.62) !important;
  color: rgba(226, 232, 240, 0.62) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(148, 163, 184, 0.08) !important;
  box-shadow: none !important;
}

body[data-category="physical-security"] #exportReport:disabled:hover,
body[data-category="physical-security"] #saveSnapshot:disabled:hover,
body[data-tool="lens-selection"] #exportReport:disabled:hover,
body[data-tool="lens-selection"] #saveSnapshot:disabled:hover,
body[data-tool="pixel-density"] #exportReport:disabled:hover,
body[data-tool="pixel-density"] #saveSnapshot:disabled:hover {
  cursor: not-allowed !important;
  transform: none !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(148, 163, 184, 0.08) !important;
  box-shadow: none !important;
}


/* =========================
   Tools landing cleanup 026
   ========================= */
.page-tools main.container {
  padding-top: 34px;
  padding-bottom: 58px;
}

.page-tools .crumbs {
  padding-top: 6px;
}

.page-tools .page-head {
  padding: 18px 0 20px;
}

.page-tools .page-head .h1 {
  margin-bottom: 8px;
}

.page-tools .page-head .subhead {
  max-width: 62ch;
}

.page-tools .category-grid {
  gap: 1rem;
  padding: 16px 0 12px;
}

.page-tools .category-grid > a.card {
  min-height: 174px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  border-color: rgba(83,255,61,.13);
  background:
    linear-gradient(180deg, rgba(83,255,61,.035), rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.10));
}

.page-tools .category-grid > a.card::after {
  content: "";
  position: absolute;
  inset: auto 18px 0 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(83,255,61,.32), transparent);
  opacity: 0;
  transition: opacity .18s ease;
}

.page-tools .category-grid > a.card:hover,
.page-tools .category-grid > a.card:focus-visible {
  border-color: rgba(83,255,61,.34);
  box-shadow: 0 24px 62px rgba(0,0,0,.62), 0 0 0 1px rgba(83,255,61,.07);
  transform: translateY(-2px);
}

.page-tools .category-grid > a.card:hover::after,
.page-tools .category-grid > a.card:focus-visible::after {
  opacity: 1;
}

.page-tools .category-grid > a.card .card-top {
  margin-bottom: 10px;
}

.page-tools .category-grid > a.card .h2 {
  margin-bottom: 10px;
}

.page-tools .category-grid > a.card .muted {
  margin-top: 0;
  max-width: 31ch;
}

.page-tools .category-card-cta {
  align-items: center;
  color: rgba(140,255,170,.88);
  display: inline-flex;
  font-size: .86rem;
  font-weight: 750;
  gap: .35rem;
  letter-spacing: .01em;
  margin-top: auto;
  padding-top: 1rem;
}

.page-tools .category-card-cta span {
  transform: translateY(-1px);
}

.page-tools .site-footer {
  padding-top: 30px;
}

@media (max-width: 900px) {
  .page-tools main.container {
    padding-top: 26px;
  }

  .page-tools .category-grid > a.card {
    min-height: 168px;
  }
}

@media (max-width: 620px) {
  .page-tools .category-grid {
    gap: .85rem;
  }

  .page-tools .category-grid > a.card .muted {
    max-width: none;
  }
}


/* tools-landing-cta-centered-027 */
.page-tools .category-card-cta {
  justify-content: center;
  text-align: center;
  width: 100%;
}

.page-tools .category-card-cta span {
  display: none;
}


/* tools-landing-no-breadcrumb-pills-028 */
.page-tools .crumbs,
.page-tools .category-grid > a.card .card-top {
  display: none;
}

.page-tools .page-head {
  padding-top: 10px;
}

.page-tools .category-grid > a.card .h2 {
  margin-top: 0;
}


/* landing-page-chrome-polish-001
   Landing/guide chrome only. Do not use this scope on calculators. */
body.landing-chrome-polish .btn,
body.landing-chrome-polish .btn-primary,
body.landing-chrome-polish .btn.btn-primary,
body.landing-chrome-polish .btn.primary,
body.landing-chrome-polish .btn-ghost {
  border-radius: 9px !important;
  min-height: 40px;
}

body.landing-chrome-polish .hero-actions .btn,
body.landing-chrome-polish .actions .btn,
body.landing-chrome-polish .btn-row .btn,
body.landing-chrome-polish a.btn {
  padding: 10px 16px !important;
}

body.landing-chrome-polish .btn-primary,
body.landing-chrome-polish .btn.primary {
  box-shadow: none !important;
}

body.landing-chrome-polish .btn-primary:hover,
body.landing-chrome-polish .btn.primary:hover,
body.landing-chrome-polish .btn-ghost:hover {
  transform: translateY(-1px);
}

body.landing-chrome-polish .hero-actions,
body.landing-chrome-polish .actions,
body.landing-chrome-polish .btn-row {
  gap: 10px;
}


/* landing-card-button-polish-v2-001
   Landing/guide pages only. Keeps calculators and tool engines untouched. */
body.landing-chrome-polish .btn,
body.landing-chrome-polish .btn-primary,
body.landing-chrome-polish .btn.btn-primary,
body.landing-chrome-polish .btn.primary,
body.landing-chrome-polish .btn-ghost {
  border-radius: 7px !important;
  min-height: 40px;
}

body.landing-chrome-polish .hero-actions .btn,
body.landing-chrome-polish .actions .btn,
body.landing-chrome-polish .btn-row .btn,
body.landing-chrome-polish a.btn {
  padding: 10px 15px !important;
}

body.landing-chrome-polish .card,
body.landing-chrome-polish .card-link,
body.landing-chrome-polish main > section.card,
body.landing-chrome-polish .category-grid > a.card,
body.landing-chrome-polish .tool-row,
body.landing-chrome-polish .tool-feature,
body.landing-chrome-polish .note {
  border-radius: 14px !important;
}

body.landing-chrome-polish .page-head {
  padding-top: 12px;
}

body.landing-chrome-polish .category-grid,
body.landing-chrome-polish .grid {
  gap: 0.95rem;
}

body.landing-tools .category-grid > a.card,
body.landing-guides .category-grid > a.card {
  min-height: 164px;
}

body.category-landing-page .tool-row--center {
  min-height: 96px;
}

body.landing-chrome-polish .category-card-cta {
  border-radius: 6px;
}

body.landing-chrome-polish .btn-primary,
body.landing-chrome-polish .btn.primary {
  border-color: rgba(83,255,61,.34);
}

body.landing-chrome-polish .btn:hover,
body.landing-chrome-polish .btn-primary:hover,
body.landing-chrome-polish .btn.primary:hover,
body.landing-chrome-polish .btn-ghost:hover,
body.landing-chrome-polish .card-link:hover,
body.landing-chrome-polish .category-grid > a.card:hover,
body.landing-chrome-polish .tool-row:hover {
  transform: translateY(-1px);
}


/* homepage-product-story-001
   Homepage-only product story polish. */
body.homepage-product-story .homepage-main {
  overflow: hidden;
}

body.homepage-product-story .homepage-hero {
  padding: 84px 0 58px;
}

body.homepage-product-story .homepage-hero-grid {
  align-items: center;
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
}

body.homepage-product-story .homepage-hero-copy {
  max-width: 760px;
}

body.homepage-product-story .homepage-hero .hero-title {
  max-width: 900px;
}

body.homepage-product-story .homepage-hero .hero-subtitle {
  max-width: 760px;
}

body.homepage-product-story .homepage-hero-actions {
  flex-wrap: wrap;
  margin-top: 20px;
}

body.homepage-product-story .homepage-hero-note {
  color: var(--muted);
  font-size: .96rem;
  margin: 18px 0 0;
  max-width: 720px;
}

body.homepage-product-story .homepage-hero-panel {
  border: 1px solid rgba(83,255,61,.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(83,255,61,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.18));
  box-shadow: 0 26px 70px rgba(0,0,0,.42);
  padding: 22px;
}

body.homepage-product-story .homepage-panel-label,
body.homepage-product-story .homepage-card-eyebrow {
  color: rgba(140,255,170,.86);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.homepage-product-story .homepage-flow-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

body.homepage-product-story .homepage-flow-step {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  display: grid;
  gap: 4px;
  padding: 14px;
}

body.homepage-product-story .homepage-flow-step span {
  color: rgba(83,255,61,.76);
  font-size: .78rem;
  font-weight: 900;
}

body.homepage-product-story .homepage-flow-step strong {
  color: var(--text);
  font-size: 1rem;
}

body.homepage-product-story .homepage-flow-step small,
body.homepage-product-story .homepage-category-card small,
body.homepage-product-story .homepage-start-card small {
  color: var(--muted);
  line-height: 1.5;
}

body.homepage-product-story .homepage-section-tight {
  padding-top: 54px;
  padding-bottom: 54px;
}

body.homepage-product-story .homepage-category-grid,
body.homepage-product-story .homepage-start-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.homepage-product-story .homepage-category-card,
body.homepage-product-story .homepage-start-card {
  display: grid;
  gap: 10px;
  min-height: 168px;
  padding: 22px;
}

body.homepage-product-story .homepage-category-card strong,
body.homepage-product-story .homepage-start-card strong {
  color: var(--text);
  font-size: 1.08rem;
}

body.homepage-product-story .homepage-more-row {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

body.homepage-product-story .homepage-proof-grid {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

body.homepage-product-story .homepage-proof-card {
  padding: 24px;
}

body.homepage-product-story .homepage-proof-list {
  display: grid;
  gap: 12px;
}

body.homepage-product-story .homepage-proof-item {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  display: grid;
  gap: 5px;
  padding: 17px 18px;
}

body.homepage-product-story .homepage-proof-item strong {
  color: var(--text);
}

body.homepage-product-story .homepage-proof-item span {
  color: var(--muted);
  line-height: 1.5;
}


@media (max-width: 900px) {
  body.homepage-product-story .homepage-hero {
    padding-top: 58px;
  }

  body.homepage-product-story .homepage-hero-grid,
  body.homepage-product-story .homepage-proof-grid {
    grid-template-columns: 1fr;
  }

  body.homepage-product-story .homepage-category-grid,
  body.homepage-product-story .homepage-start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body.homepage-product-story .homepage-category-grid,
  body.homepage-product-story .homepage-start-grid {
    grid-template-columns: 1fr;
  }

  body.homepage-product-story .homepage-category-card,
  body.homepage-product-story .homepage-start-card {
    min-height: 0;
  }
}


/* homepage-product-story-004-analytics-dashboard-panel
   Homepage-only spacing trim below protected hero. */
body.homepage-product-story .homepage-hero {
  padding-bottom: 34px;
}

body.homepage-product-story .homepage-section-tight:first-of-type {
  padding-top: 34px;
}


/* homepage-product-story-004-analytics-dashboard-panel
   ScopedLabs-native inline analytics dashboard for lower homepage proof band.
   Hero remains protected. */
body.homepage-product-story .homepage-proof-band {
  padding-top: 42px;
  padding-bottom: 46px;
  position: relative;
}

body.homepage-product-story .homepage-proof-band::before {
  background:
    radial-gradient(circle at 26% 24%, rgba(83,255,61,.14), transparent 30%),
    radial-gradient(circle at 78% 48%, rgba(31,230,201,.08), transparent 30%),
    linear-gradient(90deg, rgba(83,255,61,.055), transparent 60%);
  content: "";
  inset: 0;
  opacity: .86;
  pointer-events: none;
  position: absolute;
}

body.homepage-product-story .homepage-proof-band > .container {
  position: relative;
  z-index: 1;
}

body.homepage-product-story .homepage-proof-head {
  margin-bottom: 20px;
}

body.homepage-product-story .homepage-proof-grid-visual {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
}

body.homepage-product-story .homepage-proof-card-feature {
  background:
    radial-gradient(circle at top left, rgba(83,255,61,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.20));
  border-color: rgba(83,255,61,.18);
  min-height: 260px;
}

body.homepage-product-story .homepage-proof-bullets {
  color: rgba(225,255,231,.88);
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding-left: 20px;
}

body.homepage-product-story .homepage-analytics-visual {
  min-width: 0;
}

body.homepage-product-story .homepage-analytics-dashboard {
  filter: drop-shadow(0 24px 70px rgba(0,0,0,.56));
  margin: -26px -34px -30px -10px;
  max-width: 620px;
  transform: perspective(1000px) rotateX(1deg) rotateY(-2deg);
  transform-origin: center;
}

body.homepage-product-story .homepage-analytics-svg {
  display: block;
  height: auto;
  max-width: 100%;
  overflow: visible;
  width: 100%;
}

@media (max-width: 1000px) {
  body.homepage-product-story .homepage-proof-grid-visual {
    grid-template-columns: 1fr;
  }

  body.homepage-product-story .homepage-analytics-dashboard {
    margin: 0 auto;
    max-width: 680px;
    transform: none;
  }
}

@media (max-width: 620px) {
  body.homepage-product-story .homepage-proof-band {
    padding-top: 34px;
  }

  body.homepage-product-story .homepage-analytics-dashboard {
    margin-left: -16px;
    margin-right: -16px;
    max-width: none;
    width: calc(100% + 32px);
  }
}





/* homepage-product-story-007-stacked-proof-panel
   Tightens the homepage CAD proof band, darkens the background, balances the grid,
   and uses the physical-security camera-library style marker inside the SVG. */
body.homepage-product-story .homepage-cad-proof-band {
  padding-top: 40px;
  padding-bottom: 44px;
  position: relative;
}

body.homepage-product-story .homepage-cad-proof-band::before {
  background:
    radial-gradient(circle at 24% 28%, rgba(83,255,61,.06), transparent 32%),
    linear-gradient(90deg, rgba(83,255,61,.025), transparent 62%);
  content: "";
  inset: 0;
  opacity: .58;
  pointer-events: none;
  position: absolute;
}

body.homepage-product-story .homepage-cad-proof-band > .container {
  position: relative;
  z-index: 1;
}

body.homepage-product-story .homepage-proof-grid-cad {
  align-items: stretch;
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}

body.homepage-product-story .homepage-proof-card-feature {
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(0,0,0,.14));
  border-color: rgba(83,255,61,.14);
  min-height: 100%;
}

body.homepage-product-story .homepage-proof-bullets {
  color: rgba(225,255,231,.86);
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding-left: 20px;
}

body.homepage-product-story .homepage-cad-coverage-panel {
  align-self: stretch;
  filter: drop-shadow(0 18px 46px rgba(0,0,0,.34));
  min-width: 0;
}

body.homepage-product-story .homepage-cad-coverage-svg {
  display: block;
  height: auto;
  width: 100%;
}

@media (max-width: 1000px) {
  body.homepage-product-story .homepage-proof-grid-cad {
    grid-template-columns: 1fr;
  }

  body.homepage-product-story .homepage-cad-coverage-panel {
    margin: 0 auto;
    max-width: 720px;
  }
}

@media (max-width: 620px) {
  body.homepage-product-story .homepage-cad-proof-band {
    padding-top: 34px;
    padding-bottom: 38px;
  }

  body.homepage-product-story .homepage-cad-coverage-panel {
    margin-left: -8px;
    margin-right: -8px;
    width: calc(100% + 16px);
  }
}


/* homepage-product-story-007-stacked-proof-panel
   Stacks the proof card and CAD graph so the graph can breathe.
   Hero remains protected. */
body.homepage-product-story .homepage-proof-grid-cad {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr !important;
}

body.homepage-product-story .homepage-proof-card-feature {
  max-width: 880px;
  min-height: 0;
}

body.homepage-product-story .homepage-cad-coverage-panel {
  max-width: 980px;
  width: 100%;
}

body.homepage-product-story .homepage-cad-coverage-svg {
  width: 100%;
}


/* homepage-product-story-010-proof-width-and-graph-fit */
body.homepage-product-story .homepage-proof-grid-cad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: stretch;
}

body.homepage-product-story .homepage-proof-card-feature,
body.homepage-product-story .homepage-cad-coverage-panel {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
}

body.homepage-product-story .homepage-proof-card-feature {
  min-height: 0;
}

body.homepage-product-story .homepage-cad-coverage-panel {
  padding: 20px 22px;
}

body.homepage-product-story .homepage-cad-coverage-svg,
body.homepage-product-story .homepage-cad-coverage-panel svg {
  display: block;
  width: 92%;
  max-width: 920px;
  margin-inline: auto;
  height: auto;
}

body.homepage-product-story .homepage-cad-coverage-panel .graph-caption,
body.homepage-product-story .homepage-cad-coverage-panel .panel-subtitle {
  max-width: 92%;
  margin-inline: auto;
}


/* homepage-product-story-011-graph-inner-fit
   Keeps the proof card and CAD container equal width while shrinking only the internal graph geometry.
   Hero remains protected. */
body.homepage-product-story .homepage-proof-card-feature,
body.homepage-product-story .homepage-cad-coverage-panel {
  width: 100%;
  max-width: 980px !important;
  margin-left: auto;
  margin-right: auto;
}

body.homepage-product-story .homepage-cad-coverage-svg,
body.homepage-product-story .homepage-cad-coverage-panel svg {
  width: 100% !important;
  max-width: 980px !important;
  margin-left: auto;
  margin-right: auto;
}


/* homepage-product-story-012-match-proof-card-to-graph
   Aligns the top proof card width to the visible CAD graph frame.
   Graph/SVG internals remain untouched. */
body.homepage-product-story .homepage-proof-card-feature {
  max-width: 940px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* homepage-product-story-013-proof-card-graph-frame-match
   Narrows only the top proof text card to visually match the CAD graph frame.
   Graph/SVG internals remain untouched. */
body.homepage-product-story .homepage-proof-card-feature {
  max-width: 860px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* homepage-product-story-014-proof-card-final-width
   Final small width nudge for the proof text card only.
   CAD graph/SVG remains untouched. */
body.homepage-product-story .homepage-proof-card-feature {
  max-width: 820px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* homepage-product-story-015-proof-gap-width-balance
   Balances top proof card width and reduces the gap to the CAD graph.
   Graph/SVG internals remain untouched. */
body.homepage-product-story .homepage-proof-grid-cad {
  gap: 12px !important;
}

body.homepage-product-story .homepage-proof-card-feature {
  max-width: 900px !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.homepage-product-story .homepage-cad-coverage-panel {
  margin-top: -4px;
}


/* homepage-product-story-016-proof-header-spacing
   Adds breathing room below the proof-section intro text.
   CAD graph and proof card sizing remain untouched. */
body.homepage-product-story .homepage-cad-proof-band .homepage-proof-head {
  margin-bottom: 28px !important;
}

body.homepage-product-story .homepage-cad-proof-band .section-subtitle {
  margin-bottom: 0;
}


/* homepage-product-story-017-proof-header-extra-spacing
   Adds a little more breathing room below the proof intro text.
   Graph and proof card layout remain untouched. */
body.homepage-product-story .homepage-cad-proof-band .homepage-proof-head {
  margin-bottom: 38px !important;
}


/* homepage-product-story-018-hide-header-divider
   Removes the full-width header divider line on the homepage only.
   Nav tabs, hero, proof card, and CAD graph remain untouched. */
body.homepage-product-story .site-header {
  border-bottom-color: transparent !important;
}

body.homepage-product-story .site-header::before,
body.homepage-product-story .site-header::after {
  display: none !important;
}


/* homepage-product-story-019-remove-header-inset-line
   Removes the homepage-only full-width header divider by killing the sticky header inset line.
   Nav tabs, hero, proof card, and CAD graph remain untouched. */
body.homepage-product-story .site-header {
  border-bottom: 0 !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.22) !important;
}

body.homepage-product-story .site-header::before,
body.homepage-product-story .site-header::after {
  content: none !important;
  display: none !important;
}


/* homepage-product-story-020-remove-proof-band-stripe
   Removes the full-width proof-band background stripe behind the CAD graph section.
   Graph/SVG, hero, nav, and card layout remain untouched. */
body.homepage-product-story .homepage-cad-proof-band::before,
body.homepage-product-story .homepage-proof-band::before {
  background: none !important;
  content: none !important;
  display: none !important;
}

body.homepage-product-story .homepage-cad-proof-band {
  background: transparent !important;
}


/* homepage-product-story-021-top-mid-scale-tuning
   Tunes the accepted homepage top/mid scale without redesigning the hero or CAD graph.
   - Shrinks Planning workflow card.
   - Shrinks CAD graph container.
   - Leaves graph geometry and section copy intact. */
body.homepage-product-story .homepage-hero-grid {
  grid-template-columns: minmax(0, 1.42fr) minmax(230px, .58fr) !important;
  gap: 28px !important;
  align-items: center;
}

body.homepage-product-story .homepage-hero-panel {
  justify-self: end;
  max-width: 320px;
  padding: 16px !important;
}

body.homepage-product-story .homepage-flow-list {
  gap: 9px !important;
  margin-top: 12px !important;
}

body.homepage-product-story .homepage-flow-step {
  gap: 2px !important;
  padding: 10px 11px !important;
}

body.homepage-product-story .homepage-flow-step span {
  font-size: .72rem !important;
}

body.homepage-product-story .homepage-flow-step strong {
  font-size: .94rem !important;
}

body.homepage-product-story .homepage-flow-step small {
  font-size: .78rem !important;
  line-height: 1.34 !important;
}

body.homepage-product-story .homepage-cad-coverage-panel {
  max-width: 860px !important;
  padding: 14px 16px !important;
}

body.homepage-product-story .homepage-cad-coverage-svg,
body.homepage-product-story .homepage-cad-coverage-panel svg {
  max-width: 860px !important;
  width: 100% !important;
}

@media (max-width: 900px) {
  body.homepage-product-story .homepage-hero-panel {
    justify-self: stretch;
    max-width: none;
  }
}


/* homepage-product-story-022-workflow-card-smaller-only
   Shrinks only the homepage Planning Workflow card.
   No vertical nudge. Hero copy, CTAs, CAD graph, graph labels, and bottom section remain untouched. */
body.homepage-product-story .homepage-hero-panel {
  max-width: 285px !important;
  padding: 12px !important;
  transform: none !important;
}

body.homepage-product-story .homepage-hero-panel .section-kicker,
body.homepage-product-story .homepage-hero-panel .eyebrow {
  font-size: .68rem !important;
  letter-spacing: .14em !important;
}

body.homepage-product-story .homepage-flow-list {
  gap: 7px !important;
  margin-top: 9px !important;
}

body.homepage-product-story .homepage-flow-step {
  gap: 2px !important;
  padding: 8px 9px !important;
  border-radius: 11px !important;
}

body.homepage-product-story .homepage-flow-step span {
  font-size: .66rem !important;
}

body.homepage-product-story .homepage-flow-step strong {
  font-size: .84rem !important;
}

body.homepage-product-story .homepage-flow-step small {
  font-size: .72rem !important;
  line-height: 1.22 !important;
}

@media (max-width: 900px) {
  body.homepage-product-story .homepage-hero-panel {
    max-width: none !important;
    transform: none !important;
  }
}






/* homepage-product-story-025-remove-workflow-halo
   Removes the Planning Workflow halo experiment.
   Smaller workflow card sizing remains intact. */








/* homepage-product-story-029-remove-workflow-streak
   Removes the Planning Workflow single-streak experiment.
   Smaller workflow card sizing remains intact. */


/* homepage-product-story-030-cad-graph-container-scale
   Moderately scales down only the homepage CAD graph container.
   SVG geometry, descriptor labels, proof text card, hero, and bottom section remain untouched. */
body.homepage-product-story .homepage-cad-coverage-panel {
  max-width: 760px !important;
  padding: 12px 14px !important;
}

body.homepage-product-story .homepage-cad-coverage-svg,
body.homepage-product-story .homepage-cad-coverage-panel svg {
  max-width: 760px !important;
  width: 100% !important;
}


/* homepage-product-story-031-proof-card-side-layout
   Moves the existing proof text card to the right of the CAD graph on desktop.
   Existing text is preserved. CAD graph SVG, labels, geometry, hero, and bottom section remain untouched. */
body.homepage-product-story .homepage-proof-grid-cad {
  display: grid !important;
  grid-template-columns: minmax(0, 760px) minmax(260px, 320px) !important;
  gap: 22px !important;
  align-items: center !important;
  justify-content: center !important;
}

body.homepage-product-story .homepage-cad-coverage-panel {
  order: 1;
  margin: 0 !important;
  max-width: 760px !important;
}

body.homepage-product-story .homepage-proof-card-feature {
  order: 2;
  max-width: 320px !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-self: center;
}

@media (max-width: 1080px) {
  body.homepage-product-story .homepage-proof-grid-cad {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  body.homepage-product-story .homepage-cad-coverage-panel {
    order: 1;
    width: 100%;
    max-width: 760px !important;
  }

  body.homepage-product-story .homepage-proof-card-feature {
    order: 2;
    width: 100%;
    max-width: 760px !important;
  }
}


/* homepage-product-story-032-proof-card-title-accent
   Gives only the existing proof text card title a neon-green accent.
   No size, weight, spacing, graph, SVG, hero, or bottom-section changes. */
body.homepage-product-story .homepage-proof-card-feature > .card-title {
  color: var(--accent) !important;
}

/* homepage-product-story-034-final-cta-closeout
   Homepage final CTA closeout: makes the last section a real conversion panel
   while preserving the accepted hero, category, proof graph, and nav behavior. */
body.homepage-product-story .homepage-final-cta-section {
  padding-top: 42px;
  padding-bottom: 54px;
}

body.homepage-product-story .homepage-final-cta {
  align-items: stretch;
  background:
    radial-gradient(circle at 12% 0%, rgba(83,255,61,.13), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(0,0,0,.22));
  border-color: rgba(83,255,61,.18) !important;
  box-shadow: 0 28px 72px rgba(0,0,0,.34);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
  overflow: hidden;
  padding: 26px !important;
}

body.homepage-product-story .homepage-final-copy {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

body.homepage-product-story .homepage-final-copy .card-title {
  color: var(--text);
  font-size: clamp(1.22rem, 2.1vw, 1.62rem);
  line-height: 1.18;
}

body.homepage-product-story .homepage-final-copy .card-text {
  color: rgba(230,245,236,.82);
  line-height: 1.55;
  max-width: 720px;
}

body.homepage-product-story .homepage-final-path {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

body.homepage-product-story .homepage-final-path span {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(83,255,61,.14);
  border-radius: 999px;
  color: rgba(230,255,238,.78);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 7px 10px;
}

body.homepage-product-story .homepage-final-actions {
  align-content: center;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  display: grid;
  gap: 10px;
  justify-items: stretch;
  min-width: 0;
  padding: 16px;
}

body.homepage-product-story .homepage-final-actions .btn {
  justify-content: center;
  text-align: center;
  width: 100%;
}

@media (max-width: 900px) {
  body.homepage-product-story .homepage-final-cta {
    grid-template-columns: 1fr;
  }

  body.homepage-product-story .homepage-final-actions {
    align-content: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body.homepage-product-story .homepage-final-actions .btn {
    width: auto;
  }
}

@media (max-width: 620px) {
  body.homepage-product-story .homepage-final-cta {
    padding: 22px !important;
  }

  body.homepage-product-story .homepage-final-actions .btn {
    width: 100%;
  }
}

/* homepage-product-story-035-final-cta-arrow-path
   Final CTA closeout polish only.
   Keeps the accepted hero, category cards, CAD proof graph, and alternate-start section intact. */
body.homepage-product-story .homepage-final-copy > .card-title {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
}

body.homepage-product-story .homepage-final-path {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

body.homepage-product-story .homepage-final-path .homepage-final-path-step {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(230,255,238,.78);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 0;
}

body.homepage-product-story .homepage-final-path .homepage-final-path-step + .homepage-final-path-step::before {
  color: rgba(255,255,255,.32);
  content: "\2192";
  display: inline-block;
  font-weight: 800;
  margin: 0 9px 0 2px;
}

body.homepage-product-story .homepage-final-actions .btn {
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* homepage-product-story-036-final-cta-type-match
   Final CTA typography match only.
   Keeps final CTA structure/buttons, accepted proof graph, hero, category cards, and alternate-start section intact. */
body.homepage-product-story .homepage-final-copy > .card-title {
  color: var(--text);
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.28 !important;
}

body.homepage-product-story .homepage-final-path .homepage-final-path-step {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--accent) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

body.homepage-product-story .homepage-final-path .homepage-final-path-step + .homepage-final-path-step::before {
  color: rgba(255,255,255,.32);
  content: "\2192";
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 10px 0 3px;
  text-transform: none;
}

/* homepage-product-story-037-final-cta-muted-path
   Final CTA path label color only.
   Keeps the accepted final CTA layout/buttons and makes the flow labels quiet instead of neon green. */
body.homepage-product-story .homepage-final-path .homepage-final-path-step {
  color: rgba(230,245,236,.78) !important;
}

body.homepage-product-story .homepage-final-path .homepage-final-path-step + .homepage-final-path-step::before {
  color: rgba(255,255,255,.30) !important;
}


/* guides-hub-polish-002-guide-cta-match
   Guides landing hub only. Keeps calculators and accepted homepage sections untouched. */
body.guides-hub-polish .page-head {
  padding-top: 14px;
  padding-bottom: 22px;
}

body.guides-hub-polish .page-head .subhead {
  max-width: 76ch;
}

body.guides-hub-polish .hero-actions {
  flex-wrap: wrap;
}

body.guides-hub-polish .tool-feature {
  margin: 8px 0 20px;
  padding: 22px;
  border-color: rgba(83,255,61,.13);
  background:
    linear-gradient(180deg, rgba(83,255,61,.045), rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.10));
}

body.guides-hub-polish .tool-feature .h2 {
  font-size: 1.32rem;
  line-height: 1.25;
  margin-bottom: 10px;
  max-width: 780px;
}

body.guides-hub-polish .tool-feature .muted {
  line-height: 1.58;
  margin-bottom: 0;
  max-width: 82ch;
}

body.guides-hub-polish .guide-hub-feature {
  align-items: stretch;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  margin: 18px 0 24px;
  padding: 22px;
  border-color: rgba(83,255,61,.14);
  background:
    radial-gradient(circle at top left, rgba(83,255,61,.075), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(0,0,0,.13));
}

body.guides-hub-polish .guide-hub-feature .h2 {
  font-size: 1.32rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

body.guides-hub-polish .guide-hub-feature .muted {
  line-height: 1.58;
  margin-top: 0;
}

body.guides-hub-polish .guide-hub-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

body.guides-hub-polish .guide-hub-panel {
  display: grid;
  gap: 10px;
}

body.guides-hub-polish .guide-hub-step {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(0,0,0,.17);
  padding: 14px 15px;
}

body.guides-hub-polish .guide-hub-step strong {
  color: var(--text);
  display: block;
  font-size: .94rem;
  line-height: 1.25;
}

body.guides-hub-polish .guide-hub-step span {
  color: var(--muted);
  display: block;
  font-size: .88rem;
  line-height: 1.48;
  margin-top: 4px;
}

body.guides-hub-polish .guide-hub-section {
  padding: 12px 0 8px;
}

body.guides-hub-polish .guide-hub-section-head {
  margin: 0 0 16px;
  max-width: 74ch;
}

body.guides-hub-polish .guide-hub-section-head .h2 {
  font-size: 1.42rem;
  line-height: 1.25;
  margin-bottom: 8px;
}

body.guides-hub-polish .guide-hub-section-head .muted {
  line-height: 1.56;
  margin: 0;
}

body.guides-hub-polish .category-grid {
  padding: 0;
}

body.guides-hub-polish .category-grid > a.card {
  min-height: 186px;
  padding: 20px;
}

body.guides-hub-polish .category-grid > a.card .h2 {
  margin-bottom: 10px;
}

body.guides-hub-polish .category-grid > a.card .muted {
  line-height: 1.5;
  max-width: none;
}


body.guides-hub-polish .guide-hub-note {
  margin-top: 20px;
}

body.guides-hub-polish .guide-hub-note p {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  body.guides-hub-polish .guide-hub-feature {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body.guides-hub-polish .guide-hub-feature,
  body.guides-hub-polish .tool-feature {
    padding: 18px;
  }

  body.guides-hub-polish .guide-hub-feature-actions .btn {
    width: 100%;
  }
}


/* poe-guide-polish-001
   PoE Budget calculator guide only. Keeps tools, homepage, auth, export, snapshot, KB, and pipeline behavior untouched. */
body.poe-guide-polish .poe-guide-main {
  max-width: 1120px;
}

body.poe-guide-polish .poe-guide-hero {
  padding-bottom: 20px;
}

body.poe-guide-polish .guide-kicker {
  color: rgba(168,183,174,.88);
  font-size: .86rem;
  font-weight: 720;
  letter-spacing: .08em;
  margin: 18px 0 10px;
  text-transform: uppercase;
}

body.poe-guide-polish .guide-hero-actions {
  margin-top: 20px;
}

body.poe-guide-polish .guide-answer-card {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
  margin-top: 4px;
  padding: 22px;
  border-color: rgba(83,255,61,.15);
  background:
    radial-gradient(circle at top left, rgba(83,255,61,.07), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(0,0,0,.13));
}

body.poe-guide-polish .guide-answer-card .card-desc {
  line-height: 1.58;
  margin-bottom: 0;
}

body.poe-guide-polish .guide-answer-formula {
  border: 1px solid rgba(83,255,61,.14);
  border-radius: 15px;
  background: rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 16px;
}

body.poe-guide-polish .guide-answer-formula strong {
  color: var(--text);
  font-size: .94rem;
}

body.poe-guide-polish .guide-answer-formula span {
  color: rgba(230,245,236,.82);
  line-height: 1.45;
}

body.poe-guide-polish .guide-layout {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: 250px minmax(0, 1fr);
  margin-top: 20px;
}

body.poe-guide-polish .guide-toc {
  position: sticky;
  top: 96px;
  padding: 18px;
}

body.poe-guide-polish .guide-toc .h3 {
  margin-top: 0;
  margin-bottom: 12px;
}

body.poe-guide-polish .guide-toc a {
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(230,245,236,.78);
  display: block;
  font-size: .91rem;
  line-height: 1.35;
  padding: 10px 0;
}

body.poe-guide-polish .guide-toc a:hover {
  color: rgba(233,240,236,.96);
}

body.poe-guide-polish .guide-article {
  display: grid;
  gap: 18px;
}

body.poe-guide-polish .guide-article .card {
  margin-bottom: 0;
  padding: 22px;
}

body.poe-guide-polish .guide-article .card-title {
  margin-top: 0;
}

body.poe-guide-polish .guide-article p,
body.poe-guide-polish .guide-check-list li {
  line-height: 1.58;
}

body.poe-guide-polish .guide-step-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

body.poe-guide-polish .guide-step-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.17);
  padding: 15px;
}

body.poe-guide-polish .guide-step-card strong,
body.poe-guide-polish .guide-step-card span {
  display: block;
}

body.poe-guide-polish .guide-step-card strong {
  color: var(--text);
  line-height: 1.28;
}

body.poe-guide-polish .guide-step-card span {
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.48;
  margin-top: 6px;
}

body.poe-guide-polish .guide-table-wrap {
  overflow-x: auto;
  margin-top: 14px;
}

body.poe-guide-polish .guide-input-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
}

body.poe-guide-polish .guide-input-table th,
body.poe-guide-polish .guide-input-table td {
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

body.poe-guide-polish .guide-input-table th {
  color: rgba(233,240,236,.92);
  font-size: .9rem;
}

body.poe-guide-polish .guide-input-table td {
  color: rgba(168,183,174,.94);
  line-height: 1.48;
}

body.poe-guide-polish .guide-input-table td:first-child {
  color: rgba(233,240,236,.90);
  font-weight: 720;
  white-space: nowrap;
}

body.poe-guide-polish .guide-metric-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0;
}

body.poe-guide-polish .guide-metric-row div {
  border: 1px solid rgba(83,255,61,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  padding: 14px;
}

body.poe-guide-polish .guide-metric-row strong,
body.poe-guide-polish .guide-metric-row span {
  display: block;
}

body.poe-guide-polish .guide-metric-row strong {
  color: rgba(233,240,236,.96);
  font-size: 1.15rem;
}

body.poe-guide-polish .guide-metric-row span {
  color: var(--muted);
  font-size: .86rem;
  margin-top: 4px;
}

body.poe-guide-polish .guide-faq-list {
  display: grid;
  gap: 10px;
}

body.poe-guide-polish .guide-faq-list details {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  padding: 13px 15px;
}

body.poe-guide-polish .guide-faq-list summary {
  color: rgba(233,240,236,.94);
  cursor: pointer;
  font-weight: 740;
}

body.poe-guide-polish .guide-faq-list p {
  color: var(--muted);
  margin-bottom: 0;
}

body.poe-guide-polish .guide-disclaimer {
  margin-top: 0;
}

body.poe-guide-polish .guide-disclaimer p {
  margin-bottom: 0;
}

@media (max-width: 920px) {
  body.poe-guide-polish .guide-layout,
  body.poe-guide-polish .guide-answer-card {
    grid-template-columns: 1fr;
  }

  body.poe-guide-polish .guide-toc {
    position: static;
  }
}

@media (max-width: 680px) {
  body.poe-guide-polish .guide-step-grid,
  body.poe-guide-polish .guide-metric-row {
    grid-template-columns: 1fr;
  }

  body.poe-guide-polish .guide-hero-actions .btn,
  body.poe-guide-polish .guide-article .btn-row .btn {
    width: 100%;
  }
}


/* poe-guide-polish-002-clean-detail
   Top-up cleanup after PoE guide detail polish. */
body.poe-guide-clean-detail .guide-layout {
  grid-template-columns: 1fr;
}

body.poe-guide-clean-detail .guide-toc,
body.poe-guide-clean-detail .guide-kicker,
body.poe-guide-clean-detail .crumbs {
  display: none;
}


/* poe-guide-polish-003-planning-check-steps
   PoE guide Planning Check card. Keeps the card readable and avoids symbol-rendering issues. */
body.poe-guide-polish .guide-answer-formula {
  gap: 10px;
}

body.poe-guide-polish .guide-answer-steps {
  color: rgba(230,245,236,.84);
  display: grid;
  gap: 7px;
  line-height: 1.42;
  margin: 0;
  padding-left: 20px;
}

body.poe-guide-polish .guide-answer-steps li {
  padding-left: 2px;
}

body.poe-guide-polish .guide-answer-rule {
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(168,183,174,.96);
  display: block;
  font-size: .9rem;
  line-height: 1.45;
  margin-top: 2px;
  padding-top: 10px;
}


/* poe-guide-polish-004-ascii-title
   Cache bump for ASCII-safe PoE guide browser title and meta titles. */


/* network-guide-polish-001-clean-parent
   Network & Throughput parent guide only. No visible breadcrumbs, pills, or on-page menu. */
body.network-guide-polish .network-guide-main {
  max-width: 1120px;
}

body.network-guide-polish .network-guide-hero {
  padding-top: 46px;
  padding-bottom: 20px;
}

body.network-guide-polish .network-guide-hero .subhead {
  max-width: 74ch;
}

body.network-guide-polish .network-guide-answer {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
  margin-top: 4px;
  padding: 22px;
  border-color: rgba(83,255,61,.15);
  background:
    radial-gradient(circle at top left, rgba(83,255,61,.07), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(0,0,0,.13));
}

body.network-guide-polish .network-guide-answer .card-desc {
  line-height: 1.58;
  margin-bottom: 0;
}

body.network-guide-polish .network-flow-card {
  border: 1px solid rgba(83,255,61,.14);
  border-radius: 15px;
  background: rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px;
}

body.network-guide-polish .network-flow-card strong {
  color: var(--text);
  font-size: .94rem;
}

body.network-guide-polish .network-flow-list {
  color: rgba(230,245,236,.84);
  display: grid;
  gap: 7px;
  line-height: 1.42;
  margin: 0;
  padding-left: 20px;
}

body.network-guide-polish .network-guide-article {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

body.network-guide-polish .network-guide-article .card {
  margin-bottom: 0;
  padding: 22px;
}

body.network-guide-polish .network-guide-article .card-title {
  margin-top: 0;
}

body.network-guide-polish .network-guide-article p,
body.network-guide-polish .network-check-list li {
  line-height: 1.58;
}

body.network-guide-polish .network-step-grid,
body.network-guide-polish .network-support-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

body.network-guide-polish .network-step-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.network-guide-polish .network-support-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.network-guide-polish .network-step-card,
body.network-guide-polish .network-support-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.17);
  display: block;
  min-height: 100%;
  padding: 15px;
}

body.network-guide-polish .network-step-card:hover,
body.network-guide-polish .network-support-card:hover {
  border-color: rgba(83,255,61,.20);
  background: rgba(83,255,61,.045);
}

body.network-guide-polish .network-step-card strong,
body.network-guide-polish .network-step-card span,
body.network-guide-polish .network-support-card strong,
body.network-guide-polish .network-support-card span {
  display: block;
}

body.network-guide-polish .network-step-card strong,
body.network-guide-polish .network-support-card strong {
  color: var(--text);
  line-height: 1.28;
}

body.network-guide-polish .network-step-card span,
body.network-guide-polish .network-support-card span {
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.48;
  margin-top: 6px;
}

body.network-guide-polish .network-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

body.network-guide-polish .network-metric-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

body.network-guide-polish .network-metric-row div {
  border: 1px solid rgba(83,255,61,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  padding: 14px;
}

body.network-guide-polish .network-metric-row strong,
body.network-guide-polish .network-metric-row span {
  display: block;
}

body.network-guide-polish .network-metric-row strong {
  color: rgba(233,240,236,.96);
  font-size: 1.08rem;
}

body.network-guide-polish .network-metric-row span {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.42;
  margin-top: 4px;
}

body.network-guide-polish .network-faq-list {
  display: grid;
  gap: 10px;
}

body.network-guide-polish .network-faq-list details {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  padding: 13px 15px;
}

body.network-guide-polish .network-faq-list summary {
  color: rgba(233,240,236,.94);
  cursor: pointer;
  font-weight: 740;
}

body.network-guide-polish .network-faq-list p {
  color: var(--muted);
  margin-bottom: 0;
}

body.network-guide-polish .network-guide-disclaimer {
  margin-top: 0;
}

body.network-guide-polish .network-guide-disclaimer p {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  body.network-guide-polish .network-step-grid,
  body.network-guide-polish .network-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.network-guide-polish .network-guide-answer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body.network-guide-polish .network-step-grid,
  body.network-guide-polish .network-support-grid,
  body.network-guide-polish .network-metric-row {
    grid-template-columns: 1fr;
  }

  body.network-guide-polish .network-guide-actions .btn,
  body.network-guide-polish .network-guide-hero .btn {
    width: 100%;
  }
}


/* physical-security-guide-polish-001-category-story
   Physical Security parent guide only. No visible breadcrumbs, pills, or on-page menu. */
body.physical-security-guide-polish .physical-security-guide-main {
  max-width: 1120px;
}

body.physical-security-guide-polish .physical-security-guide-hero {
  padding-top: 46px;
  padding-bottom: 20px;
}

body.physical-security-guide-polish .physical-security-guide-hero .subhead {
  max-width: 74ch;
}

body.physical-security-guide-polish .physical-security-guide-answer {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
  margin-top: 4px;
  padding: 22px;
  border-color: rgba(83,255,61,.15);
  background:
    radial-gradient(circle at top left, rgba(83,255,61,.07), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(0,0,0,.13));
}

body.physical-security-guide-polish .physical-security-guide-answer .card-desc {
  line-height: 1.58;
  margin-bottom: 0;
}

body.physical-security-guide-polish .physical-security-flow-card {
  border: 1px solid rgba(83,255,61,.14);
  border-radius: 15px;
  background: rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px;
}

body.physical-security-guide-polish .physical-security-flow-card strong {
  color: var(--text);
  font-size: .94rem;
}

body.physical-security-guide-polish .physical-security-flow-list {
  color: rgba(230,245,236,.84);
  display: grid;
  gap: 7px;
  line-height: 1.42;
  margin: 0;
  padding-left: 20px;
}

body.physical-security-guide-polish .physical-security-guide-article {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

body.physical-security-guide-polish .physical-security-guide-article .card {
  margin-bottom: 0;
  padding: 22px;
}

body.physical-security-guide-polish .physical-security-guide-article .card-title {
  margin-top: 0;
}

body.physical-security-guide-polish .physical-security-guide-article p,
body.physical-security-guide-polish .physical-security-check-list li {
  line-height: 1.58;
}

body.physical-security-guide-polish .physical-security-step-grid,
body.physical-security-guide-polish .physical-security-specialty-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

body.physical-security-guide-polish .physical-security-step-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.physical-security-guide-polish .physical-security-specialty-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.physical-security-guide-polish .physical-security-step-card,
body.physical-security-guide-polish .physical-security-specialty-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.17);
  display: block;
  min-height: 100%;
  padding: 15px;
}

body.physical-security-guide-polish .physical-security-step-card:hover,
body.physical-security-guide-polish .physical-security-specialty-card:hover {
  border-color: rgba(83,255,61,.20);
  background: rgba(83,255,61,.045);
}

body.physical-security-guide-polish .physical-security-step-card strong,
body.physical-security-guide-polish .physical-security-step-card span,
body.physical-security-guide-polish .physical-security-specialty-card strong,
body.physical-security-guide-polish .physical-security-specialty-card span {
  display: block;
}

body.physical-security-guide-polish .physical-security-step-card strong,
body.physical-security-guide-polish .physical-security-specialty-card strong {
  color: var(--text);
  line-height: 1.28;
}

body.physical-security-guide-polish .physical-security-step-card span,
body.physical-security-guide-polish .physical-security-specialty-card span {
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.48;
  margin-top: 6px;
}

body.physical-security-guide-polish .physical-security-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

body.physical-security-guide-polish .physical-security-metric-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

body.physical-security-guide-polish .physical-security-metric-row div {
  border: 1px solid rgba(83,255,61,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  padding: 14px;
}

body.physical-security-guide-polish .physical-security-metric-row strong,
body.physical-security-guide-polish .physical-security-metric-row span {
  display: block;
}

body.physical-security-guide-polish .physical-security-metric-row strong {
  color: rgba(233,240,236,.96);
  font-size: 1.08rem;
}

body.physical-security-guide-polish .physical-security-metric-row span {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.42;
  margin-top: 4px;
}

body.physical-security-guide-polish .physical-security-faq-list {
  display: grid;
  gap: 10px;
}

body.physical-security-guide-polish .physical-security-faq-list details {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  padding: 13px 15px;
}

body.physical-security-guide-polish .physical-security-faq-list summary {
  color: rgba(233,240,236,.94);
  cursor: pointer;
  font-weight: 740;
}

body.physical-security-guide-polish .physical-security-faq-list p {
  color: var(--muted);
  margin-bottom: 0;
}

body.physical-security-guide-polish .physical-security-guide-disclaimer {
  margin-top: 0;
}

body.physical-security-guide-polish .physical-security-guide-disclaimer p {
  margin-bottom: 0;
}

@media (max-width: 1020px) {
  body.physical-security-guide-polish .physical-security-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.physical-security-guide-polish .physical-security-guide-answer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body.physical-security-guide-polish .physical-security-step-grid,
  body.physical-security-guide-polish .physical-security-specialty-grid,
  body.physical-security-guide-polish .physical-security-metric-row {
    grid-template-columns: 1fr;
  }

  body.physical-security-guide-polish .physical-security-guide-actions .btn,
  body.physical-security-guide-polish .physical-security-guide-hero .btn {
    width: 100%;
  }
}


/* homepage-product-story-038-footer-copy-path-weight
   Homepage footer copyright and final CTA path label weight only.
   Keeps accepted final CTA layout, muted label color, arrows, buttons, and proof area untouched. */
body.homepage-product-story .homepage-final-path .homepage-final-path-step {
  font-weight: 500 !important;
}


/* scopedlabs-local-assistant-001-proof
   Generic local assistant renderer used by one-tool Access Control proof. */
.scopedlabs-local-assistant-card {
  margin-top: 14px;
  border-color: rgba(83,255,61,.14);
  background:
    radial-gradient(circle at top left, rgba(83,255,61,.055), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(0,0,0,.13));
}

.scopedlabs-local-assistant-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.scopedlabs-local-assistant-kicker {
  color: rgba(168,183,174,.9);
  font-size: .78rem;
  font-weight: 740;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.scopedlabs-local-assistant-status {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: rgba(230,245,236,.86);
  font-size: .74rem;
  font-weight: 780;
  letter-spacing: .06em;
  padding: 5px 9px;
  text-transform: uppercase;
}

.scopedlabs-local-assistant-status[data-status="HEALTHY"] { border-color: rgba(83,255,61,.22); }
.scopedlabs-local-assistant-status[data-status="WATCH"] { border-color: rgba(255,197,92,.30); }
.scopedlabs-local-assistant-status[data-status="RISK"] { border-color: rgba(255,114,114,.30); }

.scopedlabs-local-assistant-card .h2 {
  margin-bottom: 8px;
  margin-top: 0;
}

.scopedlabs-local-assistant-summary {
  line-height: 1.56;
  margin-bottom: 14px;
}

.scopedlabs-local-assistant-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scopedlabs-local-assistant-panel {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  padding: 14px 15px;
}

.scopedlabs-local-assistant-panel h3 {
  font-size: .9rem;
  margin: 0 0 8px;
}

.scopedlabs-local-assistant-panel ul {
  color: var(--muted);
  line-height: 1.52;
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 760px) {
  .scopedlabs-local-assistant-grid { grid-template-columns: 1fr; }
}


/* access-control-fail-safe-factory-closeout-001
   Fail-Safe / Fail-Secure full factory closeout.
   Keeps legacy calculated outputs in the DOM as a hidden data source while the local assistant becomes the visible results experience. */
body[data-category="access-control"][data-step="fail-safe-fail-secure"] .crumbs,
body[data-category="access-control"][data-step="fail-safe-fail-secure"] > .pill-row {
  display: none !important;
}

body[data-category="access-control"][data-step="fail-safe-fail-secure"] .access-control-hidden-results-card[hidden] {
  display: none !important;
}

body[data-category="access-control"][data-step="fail-safe-fail-secure"] .access-control-local-assistant-mount {
  margin-top: 14px;
}

body[data-category="access-control"][data-step="fail-safe-fail-secure"] .scopedlabs-local-assistant-card {
  margin-top: 14px;
}

body[data-category="access-control"][data-step="fail-safe-fail-secure"] .scopedlabs-local-assistant-card .pill-row {
  margin-bottom: 10px;
}

body[data-category="access-control"][data-step="fail-safe-fail-secure"] .scopedlabs-local-assistant-card .h2 {
  margin-top: 0;
}

body[data-category="access-control"][data-step="fail-safe-fail-secure"] .scopedlabs-local-assistant-card .assistant-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

body[data-category="access-control"][data-step="fail-safe-fail-secure"] .scopedlabs-local-assistant-card .assistant-grid > div {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  padding: 14px 15px;
}

body[data-category="access-control"][data-step="fail-safe-fail-secure"] .scopedlabs-local-assistant-card .assistant-grid h3 {
  font-size: .9rem;
  margin: 0 0 8px;
}

body[data-category="access-control"][data-step="fail-safe-fail-secure"] .scopedlabs-local-assistant-card .assistant-grid ul {
  color: var(--muted);
  line-height: 1.52;
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 760px) {
  body[data-category="access-control"][data-step="fail-safe-fail-secure"] .scopedlabs-local-assistant-card .assistant-grid {
    grid-template-columns: 1fr;
  }
}