.elementor-1377 .elementor-element.elementor-element-3b10e6f1{text-align:left;width:var( --container-widget-width, 88.61% );max-width:88.61%;--container-widget-width:88.61%;--container-widget-flex-grow:0;}.elementor-1377 .elementor-element.elementor-element-017131d .elementor-image-box-wrapper{text-align:justify;}.elementor-1377 .elementor-element.elementor-element-017131d.elementor-position-right .elementor-image-box-img{margin-left:0px;}.elementor-1377 .elementor-element.elementor-element-017131d.elementor-position-left .elementor-image-box-img{margin-right:0px;}.elementor-1377 .elementor-element.elementor-element-017131d.elementor-position-top .elementor-image-box-img{margin-bottom:0px;}.elementor-1377 .elementor-element.elementor-element-017131d .elementor-image-box-wrapper .elementor-image-box-img{width:21%;}.elementor-1377 .elementor-element.elementor-element-017131d .elementor-image-box-img img{transition-duration:0.3s;}.elementor-1377 .elementor-element.elementor-element-017131d .elementor-image-box-title{margin-bottom:54px;}@media(max-width:767px){.elementor-1377 .elementor-element.elementor-element-017131d .elementor-image-box-img{margin-bottom:0px;}}/* Start custom CSS for text-editor, class: .elementor-element-3b10e6f1 */:root{
  /* Brand palette (professional, calm, high contrast) */
  --brand:#0B5FFF;        /* primary blue */
  --brand2:#00A3A3;       /* teal accent */
  --ink:#0F172A;          /* near-black */
  --muted:#475569;        /* slate */
  --bg:#F6F8FC;           /* page */
  --card:#FFFFFF;         /* cards */
  --border:rgba(15,23,42,.12);
  --shadow:0 16px 40px rgba(15,23,42,.10);
  --radius:18px;
  --max:1040px;

  --ok:#047857;
  --bad:#B42318;
  --warn:#B54708;

  --codebg:rgba(15,23,42,.05);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  line-height:1.72;
  background:
    radial-gradient(1100px 520px at 10% -10%, rgba(11,95,255,.12), transparent 60%),
    radial-gradient(900px 420px at 95% 0%, rgba(0,163,163,.10), transparent 55%),
    var(--bg);
}

a{color:var(--brand); text-underline-offset:3px}
a:hover{opacity:.92}

.container{padding:28px 14px 64px; display:flex; justify-content:center}
.shell{
  width:min(var(--max), 100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Top navigation */
.topbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(90deg, rgba(11,95,255,.07), rgba(0,163,163,.06));
  border-bottom:1px solid var(--border);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:900;
  letter-spacing:-0.01em;
}
.brand .dot{
  width:10px; height:10px; border-radius:999px;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow:0 0 0 4px rgba(11,95,255,.12);
}

.nav{display:flex; flex-wrap:wrap; gap:10px}
.nav a{
  display:inline-flex;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  text-decoration:none;
  background:rgba(15,23,42,.02);
  color:var(--ink);
  font-weight:800;
}
.nav a[aria-current="page"]{
  border-color:rgba(11,95,255,.35);
  background:rgba(11,95,255,.09);
}

/* Hero */
.hero{padding:18px 18px 6px}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:900;
  color:rgba(11,95,255,.95);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.82rem;
}
.kicker .mini{
  width:10px; height:10px; border-radius:999px;
  background:var(--brand2);
  box-shadow:0 0 0 4px rgba(0,163,163,.14);
}
h1{
  margin:.45rem 0 .65rem;
  line-height:1.12;
  letter-spacing:-0.02em;
  font-size:clamp(26px, 4.1vw, 44px);
}
.subtitle{
  color:var(--muted);
  margin:0 0 10px;
  max-width:85ch;
}

/* Content blocks */
.content{padding:8px 18px 22px}
.block{padding:2px 0 2px}
h2{
  margin:1.55rem 0 .65rem;
  padding-top:1.1rem;
  border-top:1px solid var(--border);
  font-size:clamp(18px, 2.6vw, 30px);
  line-height:1.22;
  letter-spacing:-0.01em;
}
h3{
  margin:1.05rem 0 .55rem;
  font-size:clamp(16px, 2.1vw, 22px);
  line-height:1.28;
}
h4{
  margin:1rem 0 .45rem;
  font-size:1.02rem;
  letter-spacing:-0.005em;
}
p{margin:0 0 12px}
ul,ol{margin:10px 0 18px 20px; padding:0}
li{margin:6px 0}

blockquote{
  margin:14px 0 16px;
  padding:14px 14px;
  border-left:4px solid rgba(11,95,255,.35);
  border-radius:14px;
  background:rgba(11,95,255,.06);
}
blockquote p{margin:0; color:rgba(15,23,42,.92)}

.callout{
  margin:16px 0 18px;
  padding:14px;
  border:1px solid var(--border);
  border-left:4px solid rgba(0,163,163,.45);
  border-radius:14px;
  background:rgba(0,163,163,.06);
}
.callout strong{font-weight:950}

.tableWrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
  margin:12px 0 18px;
}
table{width:100%; border-collapse:collapse; min-width:760px}
thead{background:rgba(11,95,255,.08)}
th,td{
  padding:12px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
  text-align:left;
}
tbody tr:nth-child(even){background:rgba(15,23,42,.02)}
th{font-weight:950}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:12px 0 18px;
}
@media (min-width: 900px){
  .grid{grid-template-columns:1fr 1fr}
}

.card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:#fff;
}

.pair{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:12px 0 18px;
}
@media (min-width: 900px){
  .pair{grid-template-columns:1fr 1fr}
}

/* Pills / labels */
.pill, .label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:950;
  font-size:.82rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.02);
  margin-bottom:10px;
}
.pill.bad, .label.bad{color:var(--bad)}
.pill.good{color:var(--ok)}
.pill.warn{color:var(--warn)}
.label.fix{color:var(--ok)}

/* Utility colors */
.bad{color:var(--bad)}
.good{color:var(--ok)}
.warn{color:var(--warn)}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.95em;
  background:var(--codebg);
  padding:2px 6px;
  border-radius:8px;
}

/* Footer */
.footer{
  padding:16px 18px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.98rem;
  background:linear-gradient(90deg, rgba(15,23,42,.00), rgba(15,23,42,.02));
}

/* Small-screen spacing */
@media (max-width: 520px){
  .topbar{padding:12px 14px}
  .hero{padding:16px 14px 6px}
  .content{padding:8px 14px 18px}
}

/* --- nav button unify --- */
.nav a{
  appearance:none;
}
section {
        padding: 0.2rem 0;
    }    :root{
      /* Peninsula Electronics-inspired primary (blue) + neutrals */
      --pe-primary:#0a5bd4; /* primary blue */
      --pe-primary-strong:#084bb0;

      /* Accent follows primary */
      --pe-accent:var(--pe-primary);
      --pe-accent-strong:var(--pe-primary-strong);

      --pe-ink:#32373c;
      --pe-muted:#69727d;
      --pe-bg:#dcd7ca;
      --pe-surface:#ffffff;
      --pe-border:rgba(50,55,60,.14);
      --pe-shadow:0 10px 30px rgba(0,0,0,.08);
      --pe-radius:16px;
      --pe-max:920px;

      /* Utility colors for callouts */
      --pe-danger:#d83a3a;
      --pe-success:#2f8f3a;
      --pe-danger-bg:rgba(216,58,58,.07);
      --pe-success-bg:rgba(47,143,58,.08);
      --pe-info-bg:rgba(10,91,212,.04);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--pe-ink);
      background:
        radial-gradient(1200px 600px at 20% -10%, rgba(10,91,212,.10), transparent 60%),
        radial-gradient(1000px 500px at 100% 0%, rgba(10,91,212,.08), transparent 55%),
        var(--pe-bg);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      line-height:1.6;
    }
    .article{
      width:min(var(--pe-max),100%);
      background:var(--pe-surface);
      border:1px solid var(--pe-border);
      border-radius:var(--pe-radius);
      box-shadow:var(--pe-shadow);
      padding:clamp(20px,4vw,44px);
    }

    /* Typography */
    h1,h2,h3{
      line-height:1.2;
      letter-spacing:-0.01em;
      margin:1.2em 0 .5em;
    }
    h1{
      margin-top:0;
      font-size:clamp(28px,4vw,40px);
    }
    h2{
      font-size:clamp(20px,2.6vw,28px);
      padding-top:10px;
      border-top:1px solid var(--pe-border);
    }
    h3{
      font-size:clamp(18px,2.2vw,22px);
    }
    p{
      margin:0 0 14px;
      color:var(--pe-ink);
      overflow-wrap:anywhere;
    }
    p.spacer{
      margin:0 0 14px;
      height:8px;
    }

    /* Auto “quote” look for paragraphs starting with a quote mark */
    p[data-leading-quote="true"]{
      border-left:4px solid rgba(10,91,212,.35);
      padding:10px 14px;
      background:rgba(10,91,212,.06);
      border-radius:12px;
    }

    /* Links (if any) */
    a{
      color:var(--pe-accent);
      text-decoration:underline;
      text-underline-offset:3px;
    }
    a:hover{color:var(--pe-accent-strong)}

    /* Lists */
    .list{
      margin:8px 0 18px 22px;
      padding:0;
    }
    .list li{
      margin:6px 0;
      padding-left:2px;
    }
    .list.level-1{margin-left:26px}
    .list.level-2{margin-left:30px}

   /* ------------------------------------------------------------------ */
    /* 4. The "Dirty Dozen" section styling (light red for mistakes, green for fixes) */
    /* NOTE: This targets the exact paragraph range for that section (p 27..75). */

    .article h2:nth-of-type(5){
      border-top:0;
      padding:14px 16px;
      background:linear-gradient(90deg, rgba(10,91,212,.12), rgba(10,91,212,.03));
      border:1px solid var(--pe-border);
      border-radius:14px;
    }

    /* Base card style for all paragraphs in the Dirty Dozen section */
    .article p:nth-of-type(n+27):nth-of-type(-n+75){
      margin:10px 0;
      padding:10px 14px;
      background:var(--pe-info-bg);
      border-left:4px solid rgba(10,91,212,.28);
      border-radius:12px;
    }

    /* Mistake title lines */
    .article p:nth-of-type(4n):nth-of-type(n+28):nth-of-type(-n+72){
      font-weight:700;
      background:rgba(216,58,58,.09);
      border-left-color:rgba(216,58,58,.40);
    }

    /* The Error + The Consequence lines */
    .article p:nth-of-type(4n+1):nth-of-type(n+29):nth-of-type(-n+73),
    .article p:nth-of-type(4n+2):nth-of-type(n+30):nth-of-type(-n+74){
      background:var(--pe-danger-bg);
      border-left-color:rgba(216,58,58,.35);
    }

    /* The Fix lines */
    .article p:nth-of-type(4n+3):nth-of-type(n+31):nth-of-type(-n+75){
      background:var(--pe-success-bg);
      border-left-color:rgba(47,143,58,.38);
    }

    /* ------------------------------------------------------------------ */
    /* Final Thoughts section - visually separated as its own block */

    .article h2:last-of-type{
      border-top:0;
      margin-top:34px;
      padding:16px 18px;
      background:linear-gradient(90deg, rgba(10,91,212,.14), rgba(10,91,212,.03));
      border:1px solid var(--pe-border);
      border-bottom:0;
      border-radius:14px 14px 0 0;
    }

    .article h2:last-of-type ~ p{
      margin:0;
      padding:12px 18px;
      background:rgba(10,91,212,.02);
      border-left:1px solid var(--pe-border);
      border-right:1px solid var(--pe-border);
    }

    .article h2:last-of-type ~ p:last-of-type{
      padding-bottom:18px;
      border-bottom:1px solid var(--pe-border);
      border-radius:0 0 14px 14px;
    }

    @media (max-width:640px){
      .page{padding:18px 12px 42px}
      .article{padding:18px 16px}
      .list{margin-left:18px}
      table{min-width:520px}
    }/* End custom CSS */