:root{
      --tps-blue:#3598db;
      --ink:#0b1b2b;
      --muted:#4b5b6b;
      --bg:#ffffff;
      --card:#f6fbff;
      --border:#d7e7f6;
      --focus:#ffbf47;
      --radius:14px;
      --shadow:0 8px 22px rgba(11,27,43,.10);
      --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    }
    .tps-article{
      font-family:var(--font);
      color:var(--ink);
      line-height:1.65;
      background:var(--bg);
      max-width:980px;
      margin:0 auto;
      padding:20px 16px 48px;
    }
    .skip-link{
      position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
    }
    .skip-link:focus{
      left:16px; top:16px; width:auto; height:auto;
      background:#fff; color:var(--ink);
      padding:10px 12px; border:2px solid var(--focus);
      border-radius:10px; z-index:9999;
    }
    a{ color:var(--tps-blue); text-decoration:underline; text-underline-offset:3px; }
    a:focus, button:focus{ outline:3px solid var(--focus); outline-offset:2px; border-radius:10px; }
    .hero{
      border:1px solid var(--border);
      background:linear-gradient(180deg, #f2faff 0%, #ffffff 70%);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:20px 18px;
    }
    .hero h1{
      margin:0 0 8px 0;
      font-size:clamp(28px, 3.2vw, 40px);
      line-height:1.15;
      letter-spacing:-.02em;
    }
    .hero p{
      margin:0 0 12px 0;
      color:var(--muted);
      font-size:1.05rem;
      max-width:76ch;
    }
    .badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 4px; }
    .badge{
      border:1px solid var(--border);
      background:#fff;
      border-radius:999px;
      padding:6px 10px;
      font-size:.92rem;
      color:var(--muted);
    }
    .cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:10px 14px;
      border-radius:12px;
      border:2px solid var(--tps-blue);
      background:var(--tps-blue);
      color:#fff;
      font-weight:700;
      text-decoration:none;
      box-shadow:0 6px 14px rgba(53,152,219,.22);
    }
    .btn.secondary{
      background:#fff;
      color:var(--tps-blue);
      box-shadow:none;
    }
    .btn .dot{
      width:10px; height:10px; border-radius:50%;
      background:#fff;
    }
    .btn.secondary .dot{ background:var(--tps-blue); }

    nav.toc{
      margin:18px 0 18px;
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:var(--card);
      padding:14px 14px 10px;
    }
    nav.toc h2{
      margin:0 0 8px 0;
      font-size:1.12rem;
    }
    nav.toc ol{
      margin:0;
      padding:0 0 0 20px;
    }
    nav.toc li{ margin:6px 0; }
    nav.toc a{ text-decoration:none; }
    nav.toc a:hover{ text-decoration:underline; }

    .section{
      margin-top:22px;
      padding-top:6px;
    }
    .section h2{
      margin:0 0 8px;
      font-size:1.6rem;
      letter-spacing:-.01em;
    }
    .section h3{
      margin:14px 0 6px;
      font-size:1.18rem;
    }
    .section p{ margin:0 0 10px; }
    .key-takeaways{
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:var(--card);
      padding:14px 14px 12px;
      margin:12px 0 14px;
    }
    .key-takeaways h3{ margin:0 0 8px; }
    .key-takeaways ul{ margin:0; padding-left:18px; }
    .key-takeaways li{ margin:7px 0; }

    .grid{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }
    @media (min-width:860px){
      .grid.two{ grid-template-columns:1fr 1fr; }
    }
    .card{
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:#fff;
      padding:14px 14px 12px;
      box-shadow:0 6px 16px rgba(11,27,43,.06);
    }
    .card h3{ margin-top:0; }
    .pill{
      display:inline-block;
      font-size:.9rem;
      padding:4px 10px;
      border-radius:999px;
      background:#eaf6ff;
      border:1px solid var(--border);
      color:#1f4d6d;
      margin:6px 0 10px;
    }

    figure{
      margin:14px 0 14px;
      border:1px solid var(--border);
      border-radius:var(--radius);
      overflow:hidden;
      background:#fff;
      box-shadow:0 6px 16px rgba(11,27,43,.06);
    }
    figure .fig-pad{ padding:10px; }
    figcaption{
      padding:10px 12px;
      background:var(--card);
      border-top:1px solid var(--border);
      color:var(--muted);
      font-size:.95rem;
    }

    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:#fff;
      box-shadow:0 6px 16px rgba(11,27,43,.06);
      margin:12px 0 14px;
    }
    th, td{
      padding:10px 10px;
      border-bottom:1px solid var(--border);
      vertical-align:top;
      text-align:left;
    }
    th{
      background:var(--card);
      font-weight:800;
    }
    tr:last-child td{ border-bottom:none; }

    .cta-box{
      margin:18px 0 0;
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:linear-gradient(180deg, #f6fbff 0%, #ffffff 70%);
      padding:14px 14px 12px;
    }
    .cta-box h3{ margin:0 0 6px; }
    .cta-box p{ color:var(--muted); margin:0 0 10px; }

    details{
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:#fff;
      padding:12px 12px 10px;
      margin:10px 0;
      box-shadow:0 6px 16px rgba(11,27,43,.06);
    }
    summary{
      cursor:pointer;
      font-weight:800;
      color:var(--ink);
    }
    .muted{ color:var(--muted); }
    .small{ font-size:.95rem; }