:root {
      --primary: #1b4965;
      --secondary: #62b6cb;
      --accent: #bee9e8;
      --dark: #1e293b;
      --light: #f8fafc;
      --border: #e2e8f0;
      --card-bg: #ffffff;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--dark); background: var(--light); }

    /* Navigation & Header */
    header {
      background: #fff;
      border-bottom: 1px solid var(--border);
      padding: 1rem 1.5rem;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
    }

    .logo {
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--primary);
      text-decoration: none;
    }

    /* Mobile Hamburger Button */
    .menu-toggle {
      display: none;
      background: none;
      border: none;
      font-size: 1.5rem;
      color: var(--primary);
      cursor: pointer;
      padding: 0.25rem 0.5rem;
    }

    #primaryNav {
      display: flex;
      align-items: center;
    }

    #primaryNav a {
      margin-left: 1.5rem;
      text-decoration: none;
      color: var(--dark);
      font-weight: 500;
      font-size: 0.95rem;
    }

    #primaryNav a:hover {
      color: var(--primary);
    }

    /* Hero Section */
    .hero { background: linear-gradient(135deg, var(--primary) 0%, #0d2838 100%); color: #fff; padding: 4.5rem 1.5rem; text-align: center; }
    .hero h1 { font-size: 2.5rem; max-width: 900px; margin: 0 auto 1.5rem; line-height: 1.2; }
    .hero p { font-size: 1.15rem; max-width: 700px; margin: 0 auto 2rem; color: var(--accent); }

    /* Content Layout */
    .container { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1.5rem; }
    h2 { font-size: 1.85rem; color: var(--primary); margin-bottom: 1rem; }
    p.lead { font-size: 1.1rem; margin-bottom: 2rem; color: #475569; }

    /* Image Enhancements */
    .section-image {
      width: 100%;
      height: 380px;
      object-fit: cover;
      border-radius: 8px;
      margin: 1.5rem 0 2rem 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      display: block;
    }

    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
    .card { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); padding: 1.75rem; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
    .card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--primary); }

    /* Table Responsive Wrapper */
    .table-container {
      width: 100%;
      overflow-x: auto;
      margin: 2rem 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fff;
    }
    table { width: 100%; border-collapse: collapse; min-width: 600px; }
    th, td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border); }
    th { background: #f1f5f9; font-weight: 600; color: var(--primary); }

    .checklist { list-style: none; margin: 1.5rem 0; }
    .checklist li { padding: 0.6rem 0; display: block; }
    .checklist li::before { content: "✓"; color: #059669; font-weight: bold; margin-right: 0.75rem; }

    .warning-box { background: #fffbeb; border-left: 4px solid #f59e0b; padding: 1.25rem; margin: 2rem 0; border-radius: 0 8px 8px 0; }

    footer { background: var(--dark); color: #94a3b8; padding: 3rem 1.5rem; font-size: 0.9rem; margin-top: 4rem; }
    .footer-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }

    /* Mobile Breakpoint */
    @media (max-width: 768px) {
      .menu-toggle {
        display: block;
      }

      #primaryNav {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: calc(100% + 1rem);
        left: 0;
        background: #ffffff;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        padding: 1rem 0;
      }

      #primaryNav.active {
        display: flex;
      }

      #primaryNav a {
        margin: 0;
        padding: 0.75rem 1.5rem;
        width: 100%;
      }

      #primaryNav a:hover {
        background-color: var(--light);
      }

      .hero h1 {
        font-size: 1.85rem;
      }

      .hero p {
        font-size: 1rem;
      }

      .section-image {
        height: 220px;
      }
    }
  
    html { scroll-padding-top: 6rem; }
    a { color: #145573; text-underline-offset: .18em; }
    a:focus-visible, button:focus-visible { outline: 3px solid #d97706; outline-offset: 4px; }
    .skip-link { position: absolute; left: 1rem; top: -6rem; z-index: 200; background: white; padding: .75rem; }
    .skip-link:focus { top: .5rem; }
    .spaced { margin-top: 4rem; }
    .card + .card { margin-top: 0; }
    .faq-card { margin-bottom: 1.5rem; }
    .policy { max-width: 850px; }
    .policy h1 { color: var(--primary); font-size: 2.4rem; line-height: 1.2; margin-bottom: 1rem; }
    .policy h2 { font-size: 1.4rem; margin-top: 2rem; }
    .policy p, .policy ul { margin-bottom: 1rem; }
    .policy ul, .sources { padding-left: 1.5rem; }
    .updated { color: #475569; margin: 1rem 0; }
    footer, footer a { color: #dbe7f1; }
    footer a { display: inline-block; padding: .4rem 0; margin-right: 1rem; }
    .contact { overflow-wrap: anywhere; }
    .notice { padding: 1.5rem; border-left: 4px solid var(--primary); background: #eaf4f7; margin-bottom: 2rem; }
    .table-container:focus-visible { outline: 3px solid #d97706; }
    @media (max-width: 768px) {
      #primaryNav { display: flex; position: static; box-shadow: none; border: 0; }
      .nav-container { flex-wrap: wrap; }
      .menu-toggle { display: none; }
      .js .menu-toggle { display: block; }
      .js #primaryNav { display: none; position: absolute; }
      .js #primaryNav.active { display: flex; }
      .hero { padding: 3rem 1.25rem; }
      .container { padding: 2.5rem 1.25rem; }
      .grid { grid-template-columns: minmax(0, 1fr); }
      .policy h1 { font-size: 2rem; }
    }

footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

.article {max-width:900px;} .article p {margin:1rem 0;} .article h2 {margin-top:2.5rem;} .article img {display:block;max-width:100%;height:auto;margin:2rem auto;border-radius:12px;} .article ul {padding-left:1.5rem;} .toc {padding:1rem;background:#eaf4f7;border-radius:8px;} .toc a {display:inline-block;margin:.35rem .8rem .35rem 0;} details {padding:1rem;border:1px solid #e2e8f0;border-radius:8px;margin:.75rem 0;} summary {font-weight:700;cursor:pointer;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

#primaryNav {display:flex;position:static;flex-wrap:wrap;box-shadow:none;} .nav-container {flex-wrap:wrap;gap:.5rem;} @media(max-width:768px){header{position:static;} #primaryNav {flex-direction:row;padding:0;} #primaryNav a {width:auto;padding:.5rem .7rem;} }
