:root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --ink:#0f172a;
    --muted:#475569;
    --line:#e5e7eb;
  
    --brand:#163b6f;
    --accent:#16a34a;   /* calm green */
    --accent2:#0ea5e9;  /* soft blue */
  
    --soft:#f1f5f9;
    --soft2:#ecfdf5;
  
    --warn-bg:#fff7ed;
    --warn-bd:#fed7aa;
    --warn:#b45309;
  
    --danger-bg:#fef2f2;
    --danger-bd:#fecaca;
    --danger:#b91c1c;
  
    --radius:18px;
    --shadow:0 10px 30px rgba(15,23,42,.08);
  }

  section {
    padding: 10px 0;
  }
  
 .article__body.post-content a{ color:inherit; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
 .article__body.post-content a:hover{ text-decoration-color:var(--accent); }
  
  .wrap{
    max-width:1120px;
    margin:0 auto;
  }
  
  .article{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px 18px;
  }
  
  @media (min-width:768px){
    .article{ padding:30px 30px; }
  }
  
  /* Header accent (NO gradients) */
  .hero{
    position:relative;
    padding-bottom:14px;
    margin-bottom:14px;
    border-bottom:1px solid var(--line);
  }
  .hero:before{
    content:"";
    display:block;
    height:6px;
    width:100%;
    border-radius:999px;
    background:rgba(22,163,74,.18);
    margin-bottom:14px;
  }
  
  /* Headings */
  h1,h2,h3{
    color:var(--ink);
    margin:0 0 10px;
    line-height:1.25;
  }
  h1{
    font-size:34px;
    letter-spacing:-0.02em;
  }
  h2{
    font-size:24px;
    margin-top:26px;
    padding-top:12px;
    border-top:1px solid var(--line);
    position:relative;
  }
  h2:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    transform:translateY(-1px);
    width:56px;
    height:3px;
    border-radius:999px;
    background:rgba(22,163,74,.45);
  }
  h3{
    font-size:18px;
    margin-top:16px;
  }
  
  p{ margin:0 0 12px; color:var(--ink); }
  .lead{ font-size:18px; color:var(--muted); }
  
  /* Meta badges with subtle accents */
  .meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
    margin:12px 0 14px;
    color:var(--muted);
    font-size:13px;
  }
  .badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 11px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--muted);
    font-size:13px;
  }
  .badge strong{ color:var(--ink); font-weight:900; }
  .badge .dot{
    width:10px; height:10px; border-radius:999px; flex:0 0 10px;
    background:rgba(22,163,74,.55);
    border:1px solid rgba(15,23,42,.10);
  }
  .badge--brand{ border-color:rgba(22,59,111,.25); background:rgba(22,59,111,.06); }
  .badge--brand .dot{ background:rgba(22,59,111,.55); }
  .badge--green{ border-color:rgba(22,163,74,.25); background:rgba(22,163,74,.07); }
  .badge--green .dot{ background:rgba(22,163,74,.55); }
  .badge--blue{ border-color:rgba(14,165,233,.25); background:rgba(14,165,233,.07); }
  .badge--blue .dot{ background:rgba(14,165,233,.55); }
  
  /* TOC */
  .toc{
    background:var(--soft);
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 14px;
    margin:14px 0 18px;
    position:relative;
  }
  .toc:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:100%;
    border-top-left-radius:14px;
    border-bottom-left-radius:14px;
    background:rgba(14,165,233,.18);
  }
  .toc h2{
    border-top:none;
    margin:0 0 10px;
    padding:0;
    font-size:18px;
  }
  .toc h2:before{ display:none; }
  .toc ol{ margin:0; padding-left:18px; }
  .toc li{ margin:6px 0; color:var(--muted); }
  .toc a{ color:var(--ink); text-decoration:none; }
  .toc a:hover{ text-decoration:underline; text-decoration-color:var(--accent); }
  
  /* Notes */
  .note{
    border:1px solid var(--line);
    background:var(--soft);
    border-radius:14px;
    padding:14px 14px;
    margin:14px 0;
  }
  .note .title{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-weight:900;
    color:var(--ink);
    margin:0 0 8px;
    font-size:15px;
  }
  .note .title:before{
    content:"";
    width:10px;
    height:10px;
    border-radius:999px;
    margin-top:4px;
    background:rgba(22,163,74,.55);
    border:1px solid rgba(15,23,42,.10);
    flex:0 0 10px;
  }
  .note p{ color:var(--muted); }
  .note ul{ margin:8px 0 0; padding-left:18px; color:var(--muted); }
  .note li{ margin:6px 0; }
  
  .note.safe{ background:var(--soft2); border-color:#bbf7d0; }
  .note.safe .title{ color:#065f46; }
  .note.safe .title:before{ background:rgba(22,163,74,.65); }
  
  .note.warn{ background:var(--warn-bg); border-color:var(--warn-bd); }
  .note.warn .title{ color:var(--warn); }
  .note.warn .title:before{ background:rgba(180,83,9,.55); }
  
  .note.danger{ background:var(--danger-bg); border-color:var(--danger-bd); }
  .note.danger .title{ color:var(--danger); }
  .note.danger .title:before{ background:rgba(185,28,28,.55); }
  
  .hr{
    height:1px;
    background:var(--line);
    border:0;
    margin:18px 0;
  }
  
  .klist{ margin:10px 0 0; padding-left:18px; }
  .klist li{ margin:8px 0; color:var(--muted); }
  
  /* Steps/cards */
  .steps{
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 14px;
    margin:12px 0;
    background:#fff;
  }
  .steps h3{ margin-top:0; }
  
  .pills{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:10px 0 0;
  }
  .pill{
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--muted);
    font-size:13px;
  }
  .pill strong{ color:var(--ink); }
  
  .callout{
    border-left:6px solid rgba(22,163,74,.75);
    background:#f8fafc;
    border-radius:14px;
    padding:12px 14px;
    margin:12px 0;
  }
  .callout--blue{ border-left-color:rgba(14,165,233,.75); }
  .callout h3{ margin:0 0 6px; }
  .callout p{ color:var(--muted); }
  
  /* TABLES (desktop) */
  .table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:14px;
  }
  .table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    margin:12px 0 8px;
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    background:#fff;
  }
  .table th{
    text-align:left;
    background:var(--soft);
    color:var(--ink);
    font-weight:900;
    font-size:13px;
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    white-space:nowrap;
  }
  .table td{
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    vertical-align:top;
    color:var(--muted);
    font-size:14px;
    word-break:break-word;
  }
  .table tr:last-child td{ border-bottom:none; }
  .table td strong{ color:var(--ink); }
  
  /* MOBILE: tables → cards */
  @media (max-width:640px){
    .table-wrap{ overflow:visible; }
    .table{
      border:none;
      background:transparent;
      margin:10px 0 0;
    }
    .table thead{ display:none; }
    .table tbody{ display:block; }
    .table tr{
      display:block;
      border:1px solid var(--line);
      border-radius:14px;
      overflow:hidden;
      background:#fff;
      margin:10px 0;
    }
    .table td{
      display:block;
      border-bottom:1px solid var(--line);
      padding:12px 12px;
    }
    .table td:last-child{ border-bottom:none; }
  
    /* label on each "row" item */
    .table td[data-label]::before{
      content:attr(data-label);
      display:block;
      font-size:12px;
      font-weight:900;
      color:var(--ink);
      margin:0 0 4px;
    }
  }
  
  /* Worksheets */
  .worksheets{ margin-top:10px; }
  .ws{
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 14px;
    margin:12px 0;
    background:#fff;
  }
  .ws h3{ margin-top:0; }
  .ws .meta-line{ margin:6px 0 10px; color:var(--muted); font-size:13px; }
  .ws .box{
    border:2px dashed #cbd5e1;
    border-radius:12px;
    padding:12px;
    margin:10px 0;
    color:var(--muted);
    min-height:72px;
  }
  .ws .custom-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .ws .mini{
    flex:1 1 180px;
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px;
    background:var(--soft);
    color:var(--muted);
    min-height:70px;
  }
  .ws .mini strong{ color:var(--ink); }
  
  /* FAQ */
  .faq{ margin-top:10px; }
  .faq details{
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px 14px;
    background:#fff;
    margin:10px 0;
  }
  .faq summary{
    cursor:pointer;
    font-weight:900;
    color:var(--ink);
    list-style:none;
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq .ans{ margin-top:10px; color:var(--muted); }
  
  /* Sources */
  .sources{ margin-top:10px; padding-left:18px; color:var(--muted); }
  .sources li{ margin:8px 0; }
  .sources a{ color:var(--ink); }
  .sources a:hover{ text-decoration-color:rgba(14,165,233,.7); }
  
  .small{ font-size:12px; color:var(--muted); }
  
  /* Print */
  @media print{
    body{ background:#fff; }
    .wrap{ max-width:none; padding:0; }
    .article{ box-shadow:none; border:none; border-radius:0; padding:0; }
    .toc{ display:none; }
    a{ text-decoration:none; }
    .ws{ page-break-inside:avoid; }
    .ws.print-break{ page-break-before:always; }
    .hero:before{ display:none; }
  }