: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;
}