/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


/* =====================================
   Universal Table Styling for Blog
   Class: tech-table
   ===================================== */

.tech-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 16px;
    font-family: inherit;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Table Header */

.tech-table thead {
    background: #2c7be5;
    color: #ffffff;
}

.tech-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Table Body */

.tech-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e8eef5;
    color: #333333;
}

/* Zebra Row Effect */

.tech-table tbody tr:nth-child(even) {
    background-color: #f6f9fc;
}

/* Hover Effect */

.tech-table tbody tr:hover {
    background-color: #eef4ff;
    transition: background 0.2s ease;
}

/* Last Row Border Fix */

.tech-table tbody tr:last-child td {
    border-bottom: none;
}

/* Responsive Tables */

@media (max-width: 768px) {

.tech-table {
    font-size: 14px;
}

.tech-table th,
.tech-table td {
    padding: 10px;
}

}

/* Embedded pill-style meta bar (light + dark) */

.eightonetech-entry-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    padding: 0.35rem 0.75rem;
    margin: 0.75rem 0 1.25rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #f7f7fb, #e3e7ff);
    color: #1f2933;
    font-size: 13px;
    line-height: 1.4;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 18px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.6);
}

body.generatepress-dark-mode .eightonetech-entry-meta,
body[class*="dark"] .eightonetech-entry-meta {
    background: radial-gradient(circle at 10% 0%, #020617, #111827);
    color: #e5e7eb;
    border-color: rgba(148, 163, 184, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(148, 163, 184, 0.28),
        0 10px 24px rgba(0, 0, 0, 0.85);
}

.eightonetech-entry-meta .et-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.eightonetech-entry-meta .et-meta-separator {
    opacity: 0.6;
}

/* Optional Font Awesome icons if FA is loaded on the site */
.eightonetech-entry-meta .et-meta-published::before {
    content: "\f133";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 11px;
    opacity: 0.9;
}

.eightonetech-entry-meta .et-meta-updated::before {
    content: "\f021";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 11px;
    opacity: 0.9;
}

.eightonetech-entry-meta .et-meta-author::before {
    content: "\f007";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 11px;
    opacity: 0.9;
}

@media (max-width: 600px) {
    .eightonetech-entry-meta {
        border-radius: 12px;
        padding: 0.4rem 0.6rem;
    }
}

.cnet-style-price-table {
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto;
  border-collapse: separate;
  border-spacing: 0;
  background: #f8f9fa;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.95rem;
}

.cnet-style-price-table th {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  color: #1a1a1a;
  font-weight: 600;
  padding: 1.25rem 1rem;
  text-align: left;
  border-bottom: 2px solid #e9ecef;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cnet-style-price-table td {
  background: #ffffff;
  color: #333;
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  vertical-align: top;
}

.cnet-style-price-table th:first-child,
.cnet-style-price-table td:first-child {
  background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
  font-weight: 700;
  text-align: center;
  min-width: 180px;
}

.cnet-style-price-table tbody tr:hover td {
  background: #f8f9fa;
  transform: scale(1.01);
  transition: all 0.2s ease;
}

.cnet-style-price-table .price-highlight {
  font-size: 1.5rem;
  font-weight: 700;
  color: #007bff;
}

.cnet-style-price-table .feature-check {
  color: #28a745;
  font-weight: bold;
}

.cnet-style-price-table tfoot td {
  font-weight: 600;
  background: #f8f9fa;
  border-top: 3px solid #007bff;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .cnet-style-price-table {
    font-size: 0.9rem;
    border-radius: 8px;
  }
  
  .cnet-style-price-table th,
  .cnet-style-price-table td {
    padding: 0.75rem 0.5rem;
  }
  
  .cnet-style-price-table thead {
    display: none;
  }
  
  .cnet-style-price-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  
  .cnet-style-price-table td {
    display: block;
    text-align: right;
    border: none;
    position: relative;
    padding-left: 50%;
  }
  
  .cnet-style-price-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 0.75rem;
    width: 45%;
    font-weight: 600;
    color: #1a1a1a;
  }
}

/* EightOneTech Contact Form */

.eot-contact-box{
max-width:750px;
margin:40px auto;
padding:40px;
background:#fff;
border-radius:12px;
border:1px solid #e5e7eb;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.eot-contact-title{
font-size:32px;
text-align:center;
margin-bottom:10px;
}

.eot-contact-sub{
text-align:center;
color:#64748b;
margin-bottom:25px;
}

.eot-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

@media(max-width:640px){
.eot-row{grid-template-columns:1fr;}
}

.eot-field{
margin-bottom:18px;
display:flex;
flex-direction:column;
}

.eot-field label{
font-weight:600;
margin-bottom:5px;
}

.eot-field input,
.eot-field select,
.eot-field textarea{
padding:10px 12px;
border:1px solid #cbd5e1;
border-radius:8px;
font-size:14px;
}

.eot-field textarea{
min-height:120px;
resize:vertical;
}

.eot-submit{
width:100%;
padding:14px;
background:#2563eb;
border:none;
border-radius:8px;
color:#fff;
font-weight:700;
cursor:pointer;
}

.eot-submit:hover{
background:#1d4ed8;
}

.eot-success{
display:none;
margin-top:15px;
padding:12px;
background:#ecfdf5;
border:1px solid #a7f3d0;
border-radius:6px;
color:#065f46;
}

.eot-error{
display:none;
margin-top:15px;
padding:12px;
background:#fef2f2;
border:1px solid #fecaca;
border-radius:6px;
color:#991b1b;
}

.eot-whatsapp{
display:block;
margin-top:20px;
text-align:center;
background:#25D366;
color:#fff;
padding:12px;
border-radius:8px;
font-weight:600;
text-decoration:none;
}


    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:             #f0f4f9;
      --bg-alt:         #e4eaf3;
      --surface:        #ffffff;
      --surface-2:      #f8fafc;
      --border:         #d1d9e6;
      --border-focus:   #2563eb;

      --text-primary:   #0f172a;
      --text-body:      #1e293b;
      --text-secondary: #475569;
      --text-muted:     #94a3b8;

      --accent:         #2563eb;
      --accent-dark:    #1d4ed8;
      --accent-light:   #eff6ff;
      --accent-mid:     #dbeafe;

      --success:        #059669;
      --success-bg:     #ecfdf5;
      --success-border: #a7f3d0;
      --error:          #dc2626;
      --error-bg:       #fef2f2;
      --error-border:   #fecaca;
      --warn-bg:        #fffbeb;
      --warn-border:    #fde68a;
      --warn-text:      #92400e;
      --warn-icon:      #d97706;

      --radius-sm:  8px;
      --radius:     12px;
      --radius-lg:  18px;
      --shadow-sm:  0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
      --shadow-md:  0 4px 16px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
      --shadow-lg:  0 16px 48px rgba(15,23,42,0.10), 0 4px 14px rgba(15,23,42,0.06);
      --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
    }

    html { scroll-behavior: smooth; }

    

    .wrapper {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 700px;
    }

    /* ══ HEADER ══ */
    .brand {
      text-align: center;
      margin-bottom: 28px;
      animation: fadeDown 0.55s ease both;
    }

    .brand-logo {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 18px;
    }

    .logo-mark {
      width: 46px;
      height: 46px;
      background: var(--accent);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 15px;
      color: #fff;
      letter-spacing: -0.5px;
      box-shadow: 0 4px 14px rgba(37,99,235,0.32);
      flex-shrink: 0;
    }

    .brand-name {
      font-weight: 700;
      font-size: 20px;
      letter-spacing: -0.4px;
      color: var(--text-primary);
    }

    .brand-name em {
      font-style: normal;
      color: var(--accent);
    }

    .brand h1 {
      font-size: clamp(28px, 5vw, 40px);
      font-weight: 800;
      letter-spacing: -1.2px;
      line-height: 1.14;
      color: var(--text-primary);
      margin-bottom: 10px;
    }

    .brand h1 em {
      font-style: normal;
      color: var(--accent);
    }

    .brand .subtitle {
      font-size: 15.5px;
      color: var(--text-secondary);
      font-weight: 400;
      line-height: 1.65;
      max-width: 470px;
      margin: 0 auto;
    }

    /* ── Trust badges ── */
    .trust-bar {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    .trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      font-weight: 500;
      color: var(--text-secondary);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 5px 13px 5px 9px;
      box-shadow: var(--shadow-sm);
    }

    .trust-badge svg {
      width: 14px; height: 14px;
      stroke: var(--accent);
    }

    /* ══ CARD ══ */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: clamp(28px, 5vw, 50px);
      box-shadow: var(--shadow-lg);
      animation: fadeUp 0.55s 0.1s ease both;
      position: relative;
      overflow: hidden;
      margin-top: 22px;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--accent) 0%, #6366f1 100%);
    }

    /* ── Section label ── */
    .section-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.13em;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
    }

    .section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }



    /* ── Required legend ── */
    .req-legend {
      font-size: 12.5px;
      color: var(--text-muted);
      margin-bottom: 22px;
    }

    .req-legend .star { color: var(--error); font-weight: 600; }

    /* ══ FORM ══ */
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    @media (max-width: 520px) {
      .form-row { grid-template-columns: 1fr; }
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 20px;
    }

    label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-body);
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .star { color: var(--error); font-size: 14px; }

    .opt-tag {
      font-size: 10.5px;
      font-weight: 500;
      background: var(--bg-alt);
      color: var(--text-muted);
      border: 1px solid var(--border);
      padding: 2px 9px;
      border-radius: 100px;
      margin-left: 2px;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
      width: 100%;
      background: var(--surface-2);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 11px 14px;
      color: var(--text-primary);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14.5px;
      font-weight: 400;
      outline: none;
      transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
      -webkit-appearance: none;
    }

    input::placeholder, textarea::placeholder {
      color: var(--text-muted);
      font-weight: 300;
    }

    input:hover, textarea:hover {
      border-color: #aab4cc;
      background: var(--surface);
    }

    input:focus, textarea:focus {
      border-color: var(--border-focus);
      background: var(--surface);
      box-shadow: 0 0 0 3px rgba(37,99,235,0.13);
    }

    input.error, textarea.error {
      border-color: var(--error);
      background: var(--error-bg);
    }

    input.error:focus, textarea.error:focus {
      box-shadow: 0 0 0 3px rgba(220,38,38,0.10);
    }

    textarea {
      resize: vertical;
      min-height: 130px;
      line-height: 1.65;
    }

    .field-hint {
      font-size: 12px;
      color: var(--text-muted);
    }

    .error-msg {
      font-size: 12.5px;
      color: var(--error);
      font-weight: 500;
      display: none;
      align-items: center;
      gap: 5px;
    }

    .error-msg.show { display: flex; }
    .error-msg svg  { width: 13px; height: 13px; flex-shrink: 0; }

    /* ══ FILE UPLOAD ══ */
    .file-upload-wrapper { position: relative; }

    .file-zone {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: var(--surface-2);
      border: 1.5px dashed var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: border-color var(--transition), background var(--transition);
    }

    .file-zone:hover {
      border-color: var(--accent);
      background: var(--accent-light);
    }

    .file-zone:hover .file-icon { background: var(--accent-mid); }
    .file-zone:hover .file-icon svg { stroke: var(--accent); }

    .file-icon {
      width: 40px; height: 40px;
      background: var(--bg-alt);
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background var(--transition);
    }

    .file-icon svg {
      width: 20px; height: 20px;
      stroke: var(--text-secondary);
      transition: stroke var(--transition);
    }

    .file-text strong {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-body);
      margin-bottom: 2px;
    }

    .file-text small {
      font-size: 12px;
      color: var(--text-muted);
    }

    input[type="file"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
      width: 100%; height: 100%;
    }

    .file-selected {
      margin-top: 8px;
      font-size: 12.5px;
      font-weight: 500;
      color: var(--success);
      display: none;
      align-items: center;
      gap: 6px;
    }

    .file-selected.show { display: flex; }
    .file-selected svg  { width: 14px; height: 14px; flex-shrink: 0; }

    /* ══ BUTTON ══ */
    .btn-submit {
      width: 100%;
      padding: 14px 24px;
      background: var(--accent);
      border: none;
      border-radius: var(--radius-sm);
      color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
      margin-top: 8px;
      box-shadow: 0 2px 8px rgba(37,99,235,0.28);
    }

    .btn-submit:hover {
      background: var(--accent-dark);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(37,99,235,0.34);
    }

    .btn-submit:active  { transform: translateY(0); }
    .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

    .btn-inner {
      display: flex; align-items: center;
      justify-content: center; gap: 10px;
    }

    .btn-inner svg { width: 17px; height: 17px; transition: transform var(--transition); }
    .btn-submit:hover .btn-inner svg { transform: translateX(3px); }

    .spinner {
      width: 17px; height: 17px;
      border: 2.5px solid rgba(255,255,255,0.35);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      display: none;
    }

    /* ══ ALERTS ══ */
    .alert {
      display: none;
      padding: 13px 16px;
      border-radius: var(--radius-sm);
      font-size: 13.5px;
      font-weight: 500;
      line-height: 1.55;
      align-items: flex-start;
      gap: 10px;
      margin-top: 16px;
    }

    .alert.show { display: flex; }
    .alert svg  { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; }

    .alert-success {
      background: var(--success-bg);
      border: 1px solid var(--success-border);
      color: #065f46;
    }

    .alert-error {
      background: var(--error-bg);
      border: 1px solid var(--error-border);
      color: #991b1b;
    }

    .alert-error a { color: #991b1b; font-weight: 600; }

    /* ══ DIVIDER & FOOTER ══ */
    .divider {
      height: 1px;
      background: var(--border);
      margin: 28px 0;
    }

    .form-footer { text-align: center; }

    .contact-info {
      display: flex;
      justify-content: center;
      gap: 8px 22px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .contact-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .contact-pill svg { width: 14px; height: 14px; stroke: var(--accent); flex-shrink: 0; }

    .contact-pill a {
      color: inherit;
      text-decoration: none;
    }

    .contact-pill a:hover { color: var(--accent); text-decoration: underline; }

    .footer-note { font-size: 12px; color: var(--text-muted); }
    .footer-note a { color: var(--accent); font-weight: 500; text-decoration: none; }
    .footer-note a:hover { text-decoration: underline; }

    /* ══ KEYFRAMES ══ */
    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    @media (max-width: 480px) {
      .trust-bar    { gap: 8px; }
      .contact-info { flex-direction: column; align-items: center; gap: 10px; }
    }
  
  

    :root {
      --bg:           #f0f4f9;
      --bg-alt:       #e4eaf3;
      --surface:      #ffffff;
      --surface-2:    #f8fafc;
      --border:       #d1d9e6;

      --text-primary:   #0f172a;
      --text-body:      #1e293b;
      --text-secondary: #475569;
      --text-muted:     #94a3b8;

      --accent:       #2563eb;
      --accent-dark:  #1d4ed8;
      --accent-light: #eff6ff;
      --accent-mid:   #dbeafe;

      /* Category accent colours */
      --cat-cms:      #2563eb;
      --cat-hosting:  #0891b2;
      --cat-seo:      #059669;
      --cat-ai:       #7c3aed;
      --cat-hardware: #d97706;
      --cat-os:       #dc2626;
      --cat-visual:   #db2777;
      --cat-writing:  #065f46;

      --shadow-sm:  0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
      --shadow-md:  0 4px 16px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
      --shadow-lg:  0 16px 48px rgba(15,23,42,0.10), 0 4px 14px rgba(15,23,42,0.06);
      --radius-sm:  8px;
      --radius:     12px;
      --radius-lg:  18px;
      --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
    }

    html { scroll-behavior: smooth; }

   

    /* ══ PAGE WRAPPER ══ */
    .page {
      position: relative;
      z-index: 1;
      max-width: 1000px;
      margin: 0 auto;
      padding: 56px 24px 80px;
    }

    /* ══ HEADER ══ */
    .page-header {
      text-align: center;
      margin-bottom: 52px;
      animation: fadeDown 0.55s ease both;
    }

    .brand-logo {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 20px;
      text-decoration: none;
    }

    .logo-mark {
      width: 44px; height: 44px;
      background: var(--accent);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 15px; color: #fff;
      letter-spacing: -0.5px;
      box-shadow: 0 4px 14px rgba(37,99,235,0.30);
      flex-shrink: 0;
    }

    .brand-name {
      font-weight: 700; font-size: 19px;
      letter-spacing: -0.4px;
      color: var(--text-primary);
    }

    .brand-name em { font-style: normal; color: var(--accent); }

    .page-header h1 {
      font-size: clamp(30px, 5vw, 46px);
      font-weight: 800;
      letter-spacing: -1.3px;
      line-height: 1.13;
      color: var(--text-primary);
      margin-bottom: 14px;
    }

    .page-header h1 em {
      font-style: normal;
      color: var(--accent);
    }

    .page-header .lead {
      font-size: 16px;
      color: var(--text-secondary);
      font-weight: 400;
      line-height: 1.7;
      max-width: 620px;
      margin: 0 auto 24px;
    }

    /* Stats strip */
    .stats-strip {
      display: inline-flex;
      gap: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 100px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .stat-item {
      padding: 10px 22px;
      text-align: center;
      border-right: 1px solid var(--border);
    }

    .stat-item:last-child { border-right: none; }

    .stat-num {
      display: block;
      font-size: 18px;
      font-weight: 800;
      color: var(--accent);
      line-height: 1.2;
      letter-spacing: -0.5px;
    }

    .stat-lbl {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    /* ══ INTRO PROSE CARD ══ */
    .intro-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      border-left: 4px solid var(--accent);
      padding: 28px 32px;
      box-shadow: var(--shadow-md);
      margin-bottom: 48px;
      animation: fadeUp 0.5s 0.1s ease both;
    }

    .intro-card p {
      color: var(--text-body);
      font-size: 15.5px;
      line-height: 1.75;
      font-weight: 400;
    }

    .intro-card p + p { margin-top: 14px; }

    .intro-card strong { color: var(--text-primary); font-weight: 700; }

    /* ══ CATEGORY SECTIONS ══ */
    .cat-section {
      margin-bottom: 44px;
      animation: fadeUp 0.5s ease both;
    }

    .cat-section:nth-child(1) { animation-delay: 0.12s; }
    .cat-section:nth-child(2) { animation-delay: 0.18s; }
    .cat-section:nth-child(3) { animation-delay: 0.24s; }
    .cat-section:nth-child(4) { animation-delay: 0.30s; }
    .cat-section:nth-child(5) { animation-delay: 0.36s; }
    .cat-section:nth-child(6) { animation-delay: 0.42s; }
    .cat-section:nth-child(7) { animation-delay: 0.48s; }
    .cat-section:nth-child(8) { animation-delay: 0.54s; }

    .cat-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .cat-icon {
      width: 38px; height: 38px;
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .cat-title {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.4px;
      color: var(--text-primary);
    }

    .cat-subtitle {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.09em;
      margin-left: auto;
    }

    /* Tool grid */
    .tool-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
    }

    @media (max-width: 480px) {
      .tool-grid { grid-template-columns: 1fr 1fr; }
    }

    .tool-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 16px 14px;
      box-shadow: var(--shadow-sm);
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
      position: relative;
      overflow: hidden;
    }

    .tool-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--cat-color, var(--accent));
      opacity: 0;
      transition: opacity var(--transition);
    }

    .tool-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: color-mix(in srgb, var(--cat-color, var(--accent)) 30%, var(--border));
    }

    .tool-card:hover::before { opacity: 1; }

    .tool-emoji {
      font-size: 22px;
      margin-bottom: 8px;
      display: block;
      line-height: 1;
    }

    .tool-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 3px;
      line-height: 1.3;
    }

    .tool-desc {
      font-size: 12px;
      color: var(--text-secondary);
      font-weight: 400;
      line-height: 1.5;
    }

    .tool-badge {
      display: inline-block;
      margin-top: 8px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      padding: 2px 8px;
      border-radius: 100px;
      background: color-mix(in srgb, var(--cat-color, var(--accent)) 12%, transparent);
      color: var(--cat-color, var(--accent));
      border: 1px solid color-mix(in srgb, var(--cat-color, var(--accent)) 25%, transparent);
    }

    /* ══ CLOSING CTA CARD ══ */
    .cta-card {
      background: var(--accent);
      border-radius: var(--radius-lg);
      padding: 36px 40px;
      text-align: center;
      box-shadow: 0 8px 32px rgba(37,99,235,0.28);
      margin-top: 52px;
      animation: fadeUp 0.5s 0.6s ease both;
      position: relative;
      overflow: hidden;
    }

    .cta-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
    }

    .cta-card h2 {
      font-size: 24px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.5px;
      margin-bottom: 10px;
      position: relative;
    }

    .cta-card p {
      font-size: 15px;
      color: rgba(255,255,255,0.82);
      margin-bottom: 22px;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      line-height: 1.65;
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      color: var(--accent);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14.5px;
      font-weight: 700;
      padding: 12px 26px;
      border-radius: var(--radius-sm);
      text-decoration: none;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12);
      transition: transform var(--transition), box-shadow var(--transition);
      position: relative;
    }

    .cta-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    }

    .cta-btn svg { width: 15px; height: 15px; }

    /* ══ FOOTER ══ */
    .page-footer {
      text-align: center;
      margin-top: 36px;
      font-size: 12.5px;
      color: var(--text-muted);
    }

    .page-footer a { color: var(--accent); font-weight: 500; text-decoration: none; }
    .page-footer a:hover { text-decoration: underline; }

    /* ══ KEYFRAMES ══ */
    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 600px) {
      .stats-strip { flex-wrap: wrap; border-radius: var(--radius); }
      .stat-item   { border-right: none; border-bottom: 1px solid var(--border); width: 50%; }
      .stat-item:nth-child(odd)  { border-right: 1px solid var(--border); }
      .stat-item:last-child, .stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
      .cta-card { padding: 28px 22px; }
      .intro-card { padding: 22px 20px; }
    }

/* Silo sitemap */
    :root {
      --bg:          #f2f5fa;
      --bg-alt:      #e8edf5;
      --surface:     #ffffff;
      --border:      #dde3ef;
      --text-head:   #0c1523;
      --text-body:   #1e2d3d;
      --text-sec:    #4a5e78;
      --text-muted:  #8496ae;

      /* Silo 1 — Amber/Gold — EOL & Upgrades */
      --s1:          #b45309;
      --s1-mid:      #d97706;
      --s1-light:    #fef3c7;
      --s1-border:   #fcd34d;
      --s1-pill:     #fffbeb;

      /* Silo 2 — Teal/Emerald — Comparisons */
      --s2:          #0f766e;
      --s2-mid:      #14b8a6;
      --s2-light:    #ccfbf1;
      --s2-border:   #5eead4;
      --s2-pill:     #f0fdfa;

      /* Silo 3 — Rose/Red — Fixes & Errors */
      --s3:          #be123c;
      --s3-mid:      #e11d48;
      --s3-light:    #ffe4e6;
      --s3-border:   #fda4af;
      --s3-pill:     #fff1f2;

      /* Silo 4 — Indigo/Blue — Features */
      --s4:          #3730a3;
      --s4-mid:      #4f46e5;
      --s4-light:    #e0e7ff;
      --s4-border:   #a5b4fc;
      --s4-pill:     #eef2ff;

      --shadow-sm:   0 1px 3px rgba(12,21,35,0.07), 0 1px 2px rgba(12,21,35,0.04);
      --shadow-md:   0 4px 16px rgba(12,21,35,0.08), 0 2px 6px rgba(12,21,35,0.05);
      --shadow-lg:   0 12px 40px rgba(12,21,35,0.10), 0 4px 12px rgba(12,21,35,0.06);
      --radius:      12px;
      --radius-lg:   18px;
      --radius-sm:   7px;
      --transition:  0.2s cubic-bezier(0.4,0,0.2,1);
    }

    

    .page {
      position: relative;
      z-index: 1;
      max-width: 1120px;
      margin: 0 auto;
      padding: 56px 24px 88px;
    }

    /* ══ PAGE HEADER ══ */
    .page-header {
      text-align: center;
      margin-bottom: 56px;
      animation: fadeDown 0.6s ease both;
    }

    .brand-row {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 22px;
      text-decoration: none;
    }

    .logo-mark {
      width: 44px; height: 44px;
      background: #2563eb;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 15px; color: #fff;
      letter-spacing: -0.5px;
      box-shadow: 0 4px 14px rgba(37,99,235,0.30);
      flex-shrink: 0;
    }

    .brand-name {
      font-weight: 700; font-size: 19px;
      letter-spacing: -0.4px; color: var(--text-head);
    }

    .brand-name em { font-style: normal; color: #2563eb; }

    .page-header h1 {
      font-size: clamp(30px, 5vw, 48px);
      font-weight: 900;
      letter-spacing: -1.5px;
      line-height: 1.1;
      color: var(--text-head);
      margin-bottom: 14px;
    }

    .page-header h1 span { color: #2563eb; }

    .page-header .lead {
      font-size: 16px;
      color: var(--text-sec);
      max-width: 580px;
      margin: 0 auto 28px;
      line-height: 1.7;
      font-weight: 400;
    }

    /* Stats strip */
    .stats-strip {
      display: inline-flex;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 100px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .stat { padding: 10px 22px; border-right: 1px solid var(--border); text-align: center; }
    .stat:last-child { border-right: none; }
    .stat-n { display: block; font-size: 20px; font-weight: 800; color: #2563eb; line-height: 1.2; letter-spacing: -0.5px; }
    .stat-l { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

    /* ══ LEGEND ══ */
    .legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-bottom: 52px;
      animation: fadeUp 0.5s 0.1s ease both;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 6px 14px 6px 9px;
      font-size: 12.5px;
      font-weight: 500;
      color: var(--text-sec);
      box-shadow: var(--shadow-sm);
    }

    .legend-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .badge-legend {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 600;
      padding: 3px 9px; border-radius: 100px;
    }

    /* ══ SILO SECTIONS ══ */
    .silo-section {
      margin-bottom: 56px;
      animation: fadeUp 0.5s ease both;
    }

    .silo-section:nth-child(1) { animation-delay: 0.15s; }
    .silo-section:nth-child(2) { animation-delay: 0.22s; }
    .silo-section:nth-child(3) { animation-delay: 0.29s; }
    .silo-section:nth-child(4) { animation-delay: 0.36s; }

    /* Silo header band */
    .silo-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 24px;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      border: 1px solid transparent;
      border-bottom: none;
      position: relative;
    }

    .silo-icon {
      width: 46px; height: 46px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }

    .silo-meta { flex: 1; }

    .silo-num {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      opacity: 0.7;
      margin-bottom: 1px;
    }

    .silo-title {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.5px;
      line-height: 1.2;
    }

    .silo-count {
      font-size: 12px;
      font-weight: 500;
      opacity: 0.75;
      margin-top: 2px;
    }

    .silo-score {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .score-circle {
      width: 52px; height: 52px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 17px; font-weight: 800;
      border: 3px solid rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(4px);
    }

    .score-label {
      font-size: 9.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      opacity: 0.8;
    }

    /* Silo body */
    .silo-body {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
      border-top: none;
      padding: 28px 24px 24px;
      box-shadow: var(--shadow-lg);
    }

    /* ── PILLAR CARD ── */
    .pillar-card {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      border-radius: var(--radius);
      padding: 20px 22px;
      margin-bottom: 20px;
      border: 2px solid transparent;
      position: relative;
      overflow: hidden;
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .pillar-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .pillar-card::before {
      content: 'PILLAR PAGE';
      position: absolute;
      top: 12px; right: 14px;
      font-size: 9px; font-weight: 700;
      letter-spacing: 0.12em;
      padding: 3px 8px;
      border-radius: 100px;
    }

    .pillar-icon-wrap {
      width: 42px; height: 42px;
      border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      background: rgba(255,255,255,0.6);
    }

    .pillar-info { flex: 1; min-width: 0; }

    .pillar-title {
      font-size: 16px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: -0.3px;
      margin-bottom: 4px;
      text-decoration: none;
      display: block;
      transition: opacity var(--transition);
    }

    .pillar-title:hover { opacity: 0.75; }

    .pillar-desc {
      font-size: 13px;
      line-height: 1.55;
      opacity: 0.8;
      font-weight: 400;
    }

    /* ── CLUSTER GRID ── */
    .cluster-label {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.11em;
      color: var(--text-muted);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .cluster-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .cluster-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 11px;
    }

    /* Cluster card */
    .c-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 15px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
      position: relative;
      overflow: hidden;
    }

    .c-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--silo-accent, #2563eb);
      opacity: 0;
      transition: opacity var(--transition);
    }

    .c-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--silo-border, var(--border));
    }

    .c-card:hover::before { opacity: 1; }

    .c-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    .c-card-title {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-head);
      line-height: 1.4;
      letter-spacing: -0.2px;
      text-decoration: none;
      flex: 1;
      display: block;
      transition: color var(--transition);
    }

    .c-card-title:hover { color: var(--silo-accent, #2563eb); }

    .c-card-title.no-link {
      color: var(--text-sec);
      cursor: default;
      font-style: italic;
    }

    .c-type-badge {
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 2px 7px;
      border-radius: 100px;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .badge-cluster  { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
    .badge-bridge   { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
    .badge-new      { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
    .badge-flag     { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
    .badge-merge    { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

    .c-card-url {
      font-size: 11px;
      color: var(--text-muted);
      font-family: 'Courier New', monospace;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      margin-top: 1px;
    }

    .c-card-flag {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      color: #b45309;
      font-weight: 500;
      margin-top: 2px;
    }

    .c-card-flag svg { width: 11px; height: 11px; flex-shrink: 0; }

    /* ══ SILO 1 — AMBER ══ */
    .silo-1 .silo-header {
      background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
      border-color: #b45309;
      color: #fff;
    }
    .silo-1 .silo-icon { background: rgba(255,255,255,0.18); }
    .silo-1 .pillar-card {
      background: var(--s1-light);
      border-color: var(--s1-border);
      color: #78350f;
    }
    .silo-1 .pillar-card::before {
      background: rgba(120,53,15,0.12);
      color: #92400e;
    }
    .silo-1 .pillar-title { color: #78350f; }
    .silo-1 .c-card { --silo-accent: var(--s1-mid); --silo-border: var(--s1-border); }

    /* ══ SILO 2 — TEAL ══ */
    .silo-2 .silo-header {
      background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
      border-color: #0f766e;
      color: #fff;
    }
    .silo-2 .silo-icon { background: rgba(255,255,255,0.18); }
    .silo-2 .pillar-card {
      background: var(--s2-light);
      border-color: var(--s2-border);
      color: #134e4a;
    }
    .silo-2 .pillar-card::before {
      background: rgba(19,78,74,0.12);
      color: #115e59;
    }
    .silo-2 .pillar-title { color: #134e4a; }
    .silo-2 .c-card { --silo-accent: var(--s2-mid); --silo-border: var(--s2-border); }

    /* ══ SILO 3 — ROSE ══ */
    .silo-3 .silo-header {
      background: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
      border-color: #be123c;
      color: #fff;
    }
    .silo-3 .silo-icon { background: rgba(255,255,255,0.18); }
    .silo-3 .pillar-card {
      background: var(--s3-light);
      border-color: var(--s3-border);
      color: #881337;
    }
    .silo-3 .pillar-card::before {
      background: rgba(136,19,55,0.12);
      color: #9f1239;
    }
    .silo-3 .pillar-title { color: #881337; }
    .silo-3 .c-card { --silo-accent: var(--s3-mid); --silo-border: var(--s3-border); }

    /* ══ SILO 4 — INDIGO ══ */
    .silo-4 .silo-header {
      background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
      border-color: #3730a3;
      color: #fff;
    }
    .silo-4 .silo-icon { background: rgba(255,255,255,0.18); }
    .silo-4 .pillar-card {
      background: var(--s4-light);
      border-color: var(--s4-border);
      color: #312e81;
    }
    .silo-4 .pillar-card::before {
      background: rgba(49,46,129,0.12);
      color: #3730a3;
    }
    .silo-4 .pillar-title { color: #312e81; }
    .silo-4 .c-card { --silo-accent: var(--s4-mid); --silo-border: var(--s4-border); }

    /* ══ STANDALONE / ORPHAN SECTION ══ */
    .orphan-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 4px solid #dc2626;
      border-radius: var(--radius-lg);
      padding: 24px 26px;
      margin-bottom: 48px;
      box-shadow: var(--shadow-md);
      animation: fadeUp 0.5s 0.44s ease both;
    }

    .orphan-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 700;
      color: #dc2626;
      margin-bottom: 16px;
    }

    .orphan-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 10px;
    }

    .orphan-card {
      background: #fff5f5;
      border: 1px solid #fecaca;
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .orphan-icon { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
    .orphan-name { font-size: 13px; font-weight: 600; color: #7f1d1d; margin-bottom: 2px; }
    .orphan-action { font-size: 11.5px; color: #b91c1c; font-weight: 400; }

    /* ══ CONTENT GAP SECTION ══ */
    .gap-section {
      margin-bottom: 48px;
      animation: fadeUp 0.5s 0.5s ease both;
    }

    .gap-section-title {
      text-align: center;
      font-size: 22px;
      font-weight: 800;
      color: var(--text-head);
      letter-spacing: -0.5px;
      margin-bottom: 6px;
    }

    .gap-section-sub {
      text-align: center;
      font-size: 14px;
      color: var(--text-sec);
      margin-bottom: 28px;
    }

    .gap-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 12px;
    }

    .gap-card {
      background: var(--surface);
      border: 1.5px dashed var(--border);
      border-radius: var(--radius);
      padding: 16px 16px 14px;
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    .gap-card:hover {
      border-color: #a5b4fc;
      box-shadow: var(--shadow-sm);
    }

    .gap-silo-tag {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 2px 8px;
      border-radius: 100px;
      margin-bottom: 8px;
      display: inline-block;
    }

    .gap-title {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-head);
      line-height: 1.4;
      margin-bottom: 4px;
    }

    .gap-kw {
      font-size: 11.5px;
      color: var(--text-muted);
      font-family: 'Courier New', monospace;
    }

    .gap-type-icon {
      font-size: 16px;
      float: right;
      margin-left: 6px;
    }

    /* ══ PAGE FOOTER ══ */
    .page-footer {
      text-align: center;
      font-size: 12.5px;
      color: var(--text-muted);
      margin-top: 40px;
      padding-top: 28px;
      border-top: 1px solid var(--border);
    }

    .page-footer a { color: #2563eb; font-weight: 500; text-decoration: none; }
    .page-footer a:hover { text-decoration: underline; }

    /* ══ ANIMATIONS ══ */
    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ══ RESPONSIVE ══ */
    @media (max-width: 700px) {
      .cluster-grid, .gap-grid, .orphan-grid { grid-template-columns: 1fr; }
      .silo-header { flex-wrap: wrap; gap: 10px; }
      .silo-score { display: none; }
      .stats-strip { flex-wrap: wrap; border-radius: var(--radius); }
      .stat { border-bottom: 1px solid var(--border); width: 50%; border-right: none; }
      .stat:nth-child(odd) { border-right: 1px solid var(--border); }
    }

    @media (max-width: 480px) {
      .pillar-card { flex-direction: column; }
      .pillar-card::before { font-size: 8px; top: 8px; right: 10px; }
      .page { padding: 36px 16px 60px; }
    }
    
    
/* ============================================================
   EIGHTONETECH / WINDOWS BLOG — HEADING SYSTEM
   Microsoft Fluent Design–inspired | GeneratePress Compatible
   WCAG AA contrast compliant | Mobile-first responsive
   ============================================================ */

/* ── FONT STACK (Microsoft-native on Windows devices) ──────── */
:root {
    --font-heading:      "Segoe UI", "Segoe UI Variable", system-ui,
                         -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-body:         "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Microsoft Fluent colour tokens */
    --ms-blue:           #0078d4;   /* Microsoft brand blue */
    --ms-blue-dark:      #005a9e;   /* Hover / dark state */
    --ms-blue-light:     #eff6fc;   /* Tint background */
    --ms-blue-mid:       #cce4f6;   /* Border / accent */
    --ms-slate-900:      #0f172a;   /* H2 text */
    --ms-slate-800:      #1e293b;   /* H3 text */
    --ms-slate-700:      #334155;   /* H4 text */
    --ms-slate-600:      #475569;   /* H5 text */
    --ms-slate-500:      #64748b;   /* H6 text */
    --ms-border:         #e2e8f0;   /* Divider lines */
    --ms-bg-subtle:      #f8fafc;   /* Subtle section background */
}

/* ============================================================
   H2 — PRIMARY SECTION HEADING
   Bold landmark. Left accent bar. Strong visual anchor.
   ============================================================ */
.entry-content h2,
.page-content  h2,
article        h2,
.single        h2 {
    font-family:     var(--font-heading);
    font-size:       clamp(1.45rem, 2.5vw, 1.75rem);
    font-weight:     700;
    line-height:     1.25;
    letter-spacing:  -0.025em;
    color:           var(--ms-slate-900);

    /* Left accent bar — Microsoft blue */
    border-left:     4px solid var(--ms-blue);
    padding:         0.3em 0 0.3em 0.75em;
    margin:          2.25em 0 0.85em 0;

    /* Subtle background tint */
    background:      linear-gradient(
                         to right,
                         var(--ms-blue-light) 0%,
                         transparent 60%
                     );
    border-radius:   0 6px 6px 0;

    /* Smooth appearance */
    transition:      border-color 0.2s ease;
}

/* First H2 directly after post title — less top margin */
.entry-content h2:first-child,
.page-content  h2:first-child {
    margin-top: 1rem;
}

/* Hover: deepen the accent */
.entry-content h2:hover,
.page-content  h2:hover {
    border-left-color: var(--ms-blue-dark);
}

/* ============================================================
   H3 — SECONDARY SECTION HEADING
   Confident subheading with thin underline rule.
   ============================================================ */
.entry-content h3,
.page-content  h3,
article        h3,
.single        h3 {
    font-family:     var(--font-heading);
    font-size:       clamp(1.2rem, 2vw, 1.4rem);
    font-weight:     600;
    line-height:     1.3;
    letter-spacing:  -0.015em;
    color:           var(--ms-slate-800);

    /* Bottom rule — partial width creates editorial feel */
    border-bottom:   2px solid var(--ms-blue-mid);
    padding-bottom:  0.35em;
    margin:          1.9em 0 0.7em 0;

    /* Dot accent before text */
    display:         flex;
    align-items:     baseline;
    gap:             0.4em;
}

/* Blue decorative dot before H3 */
.entry-content h3::before,
.page-content  h3::before {
    content:         "";
    display:         inline-block;
    width:           8px;
    height:          8px;
    min-width:       8px;
    background:      var(--ms-blue);
    border-radius:   50%;
    margin-bottom:   0.1em;
    flex-shrink:     0;
}

/* ============================================================
   H4 — TERTIARY HEADING
   Grounded, badge-style label. Clear but contained.
   ============================================================ */
.entry-content h4,
.page-content  h4,
article        h4,
.single        h4 {
    font-family:     var(--font-heading);
    font-size:       clamp(1.05rem, 1.8vw, 1.2rem);
    font-weight:     600;
    line-height:     1.4;
    letter-spacing:  -0.01em;
    color:           var(--ms-slate-700);

    /* Inline pill background */
    background:      var(--ms-bg-subtle);
    border:          1px solid var(--ms-border);
    border-left:     3px solid var(--ms-blue);
    border-radius:   0 4px 4px 0;
    padding:         0.3em 0.75em;
    margin:          1.65em 0 0.6em 0;
    display:         inline-block;
    max-width:       100%;
}

/* ============================================================
   H5 — MINOR HEADING
   Subtle caps label — used for sub-labels, asides, callouts.
   ============================================================ */
.entry-content h5,
.page-content  h5,
article        h5,
.single        h5 {
    font-family:     var(--font-heading);
    font-size:       clamp(0.85rem, 1.5vw, 0.95rem);
    font-weight:     700;
    line-height:     1.5;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    color:           var(--ms-blue-dark);

    /* Flanking dash decorators */
    display:         flex;
    align-items:     center;
    gap:             0.6em;
    margin:          1.5em 0 0.5em 0;
}

.entry-content h5::after,
.page-content  h5::after {
    content:  "";
    flex:     1;
    height:   1px;
    background: linear-gradient(
        to right,
        var(--ms-blue-mid) 0%,
        transparent 100%
    );
}

/* ============================================================
   H6 — FINE LABEL / TAXONOMY HEADING
   Whisper-level label. De-emphasised, informational only.
   ============================================================ */
.entry-content h6,
.page-content  h6,
article        h6,
.single        h6 {
    font-family:     var(--font-heading);
    font-size:       clamp(0.78rem, 1.3vw, 0.85rem);
    font-weight:     600;
    line-height:     1.5;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--ms-slate-500);

    /* Dotted bottom rule */
    border-bottom:   1px dotted var(--ms-border);
    padding-bottom:  0.25em;
    margin:          1.3em 0 0.45em 0;
}

/* ============================================================
   DARK MODE — respects OS preference
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --ms-blue:       #4fc3f7;
        --ms-blue-dark:  #29b6f6;
        --ms-blue-light: #0d2137;
        --ms-blue-mid:   #1a3a52;
        --ms-slate-900:  #f1f5f9;
        --ms-slate-800:  #e2e8f0;
        --ms-slate-700:  #cbd5e1;
        --ms-slate-600:  #94a3b8;
        --ms-slate-500:  #64748b;
        --ms-border:     #1e293b;
        --ms-bg-subtle:  #0f1a2e;
    }
}

/* ============================================================
   HEADING ANCHOR LINKS (#) — Auto-generated by GeneratePress
   or plugins like Rank Math / Yoast
   ============================================================ */
.entry-content h2 .heading-anchor,
.entry-content h3 .heading-anchor,
.entry-content h4 .heading-anchor,
.entry-content h5 .heading-anchor,
.entry-content h6 .heading-anchor {
    opacity:     0;
    margin-left: 0.4em;
    color:       var(--ms-blue);
    font-weight: 400;
    font-size:   0.75em;
    transition:  opacity 0.15s ease;
    text-decoration: none;
}

.entry-content h2:hover .heading-anchor,
.entry-content h3:hover .heading-anchor,
.entry-content h4:hover .heading-anchor {
    opacity: 0.7;
}

/* ============================================================
   TABLE OF CONTENTS HEADING (if using a TOC plugin)
   Targets common TOC plugin heading wrappers
   ============================================================ */
.wp-block-rank-math-toc-block h2,
.rank-math-toc h2,
.ez-toc-title,
.table-of-contents h2 {
    font-size:    0.95rem !important;
    font-weight:  700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color:        var(--ms-blue-dark) !important;
    border-left:  none !important;
    background:   none !important;
    padding-left: 0 !important;
    margin-top:   0 !important;
}

/* ============================================================
   RESPONSIVE — tighten spacing on small screens
   ============================================================ */
@media (max-width: 768px) {
    .entry-content h2,
    .page-content  h2 {
        font-size:  1.35rem;
        margin-top: 1.75em;
    }

    .entry-content h3,
    .page-content  h3 {
        font-size:  1.15rem;
        margin-top: 1.5em;
    }

    .entry-content h4,
    .page-content  h4 {
        font-size:   1rem;
        padding:     0.25em 0.6em;
    }

    .entry-content h5,
    .page-content  h5 {
        font-size:  0.82rem;
    }
}

/* ============================================================
   PRINT — clean headings for printed posts
   ============================================================ */
@media print {
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .entry-content h5,
    .entry-content h6 {
        background:   none !important;
        border-left:  none !important;
        color:        #000 !important;
        padding-left: 0 !important;
    }

    .entry-content h2 { font-size: 16pt; }
    .entry-content h3 { font-size: 14pt; }
    .entry-content h4 { font-size: 13pt; }
    .entry-content h5 { font-size: 11pt; }
    .entry-content h6 { font-size: 10pt; }
}

/* ============================================
   STYLE 4: ms-stripe — High Readability Data Table
   Best for: Long spec lists, FAQ tables,
             feature comparison, data-heavy content
   Usage: <table class="ms-stripe">
   ============================================ */

.ms-stripe {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: #1b1b1b;
  margin: 32px 0;
  border-top: 3px solid #0078d4;
}

.ms-stripe thead tr {
  background-color: #f3f3f3;
  border-bottom: 2px solid #0078d4;
}

.ms-stripe thead th {
  padding: 13px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  color: #0078d4;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-bottom: 2px solid #0078d4;
}

.ms-stripe tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.ms-stripe tbody tr:nth-child(even) {
  background-color: #f7f9fd;
}

.ms-stripe tbody tr {
  border-bottom: 1px solid #e8edf5;
  transition: background-color 0.15s ease;
}

.ms-stripe tbody tr:hover {
  background-color: #deeeff;
}

.ms-stripe tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  line-height: 1.6;
}

.ms-stripe tbody td:first-child {
  font-weight: 600;
  color: #005a9e;
  width: 30%;
  border-right: 2px solid #e8edf5;
}

/* Tag/badge inside cells */
.ms-stripe .ms-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
}

.ms-stripe .ms-tag-blue {
  background-color: #dce9f8;
  color: #0078d4;
}

.ms-stripe .ms-tag-green {
  background-color: #dff2df;
  color: #107c10;
}

.ms-stripe .ms-tag-yellow {
  background-color: #fff4ce;
  color: #8a6400;
}

.ms-stripe .ms-tag-red {
  background-color: #fde7e9;
  color: #d13438;
}

/* Footer row for totals/summary */
.ms-stripe tfoot tr {
  background-color: #e8f0fb;
  border-top: 2px solid #0078d4;
  font-weight: 700;
}

.ms-stripe tfoot td {
  padding: 12px 16px;
  color: #005a9e;
}

/* Responsive */
@media (max-width: 680px) {
  .ms-stripe {
    font-size: 13px;
  }
  .ms-stripe thead th,
  .ms-stripe tbody td {
    padding: 10px 12px;
  }
  .ms-stripe tbody td:first-child {
    width: auto;
  }
}

/* ============================================
   STYLE 3: ms-verdict — Editorial Review Style
   Best for: Rated comparisons, review verdicts,
             scored product tables, pros/cons
   Usage: <table class="ms-verdict">
   ============================================ */

.ms-verdict {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: #2c2c2c;
  margin: 32px 0;
  border: 1px solid #d6d6d6;
  border-radius: 0;
}

.ms-verdict thead tr {
  background-color: #1b1b1b;
  color: #ffffff;
}

.ms-verdict thead th {
  padding: 15px 18px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-right: 1px solid #333333;
}

.ms-verdict thead th:last-child {
  border-right: none;
}

.ms-verdict tbody tr {
  border-bottom: 1px solid #e4e4e4;
  transition: background-color 0.12s ease;
}

.ms-verdict tbody tr:last-child {
  border-bottom: none;
}

.ms-verdict tbody tr:hover {
  background-color: #f6f6f6;
}

.ms-verdict tbody td {
  padding: 13px 18px;
  vertical-align: middle;
  border-right: 1px solid #e4e4e4;
  line-height: 1.55;
}

.ms-verdict tbody td:last-child {
  border-right: none;
}

.ms-verdict tbody td:first-child {
  font-weight: 700;
  background-color: #f8f8f8;
}

/* Score/rating cell */
.ms-verdict tbody td.ms-score {
  font-weight: 800;
  font-size: 16px;
  text-align: center;
  color: #107c10;
}

.ms-verdict tbody td.ms-score-high {
  color: #107c10;
  font-weight: 800;
}

.ms-verdict tbody td.ms-score-mid {
  color: #ffb900;
  font-weight: 800;
}

.ms-verdict tbody td.ms-score-low {
  color: #d13438;
  font-weight: 800;
}

/* Winner row highlight */
.ms-verdict tbody tr.ms-winner {
  background-color: #f0fff0;
  border-left: 4px solid #107c10;
}

.ms-verdict tbody tr.ms-winner td:first-child::after {
  content: " ✓ TOP PICK";
  font-size: 9px;
  font-weight: 800;
  background: #107c10;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: 0.4px;
  vertical-align: middle;
}

/* Subheader rows inside tbody */
.ms-verdict tbody tr.ms-subheader td {
  background-color: #f0f0f0;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555555;
  padding: 8px 18px;
}

/* Responsive */
@media (max-width: 680px) {
  .ms-verdict {
    font-size: 13px;
  }
  .ms-verdict thead th,
  .ms-verdict tbody td {
    padding: 10px 12px;
  }
}

/* ============================================
   STYLE 2: ms-pricing — Bold Pricing Table
   Best for: Pricing tiers, budget comparisons,
             product recommendation tables
   Usage: <table class="ms-pricing">
   ============================================ */

.ms-pricing {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: #1b1b1b;
  margin: 32px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.ms-pricing thead tr {
  background: linear-gradient(135deg, #005a9e 0%, #0078d4 100%);
  color: #ffffff;
}

.ms-pricing thead th {
  padding: 16px 20px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,0.15);
}

.ms-pricing thead th:last-child {
  border-right: none;
}

.ms-pricing tbody tr {
  border-bottom: 1px solid #ebebeb;
  transition: all 0.2s ease;
}

.ms-pricing tbody tr:last-child {
  border-bottom: none;
}

.ms-pricing tbody tr:hover {
  background-color: #f0f7ff;
  transform: scale(1.005);
  box-shadow: 0 2px 12px rgba(0, 120, 212, 0.1);
  position: relative;
  z-index: 1;
}

.ms-pricing tbody td {
  padding: 15px 20px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #ebebeb;
  line-height: 1.5;
}

.ms-pricing tbody td:last-child {
  border-right: none;
}

.ms-pricing tbody td:first-child {
  text-align: left;
  font-weight: 700;
  color: #1b1b1b;
  background-color: #fafafa;
}

/* Price column — make it stand out */
.ms-pricing tbody td.ms-price {
  font-weight: 700;
  font-size: 17px;
  color: #107c10;
}

/* Best value badge */
.ms-pricing tbody tr.ms-best-value {
  background-color: #fff8e1;
  border-left: 4px solid #ffb900;
}

.ms-pricing tbody tr.ms-best-value td:first-child::before {
  content: "BEST VALUE  ";
  display: inline-block;
  background: #ffb900;
  color: #1b1b1b;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 8px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* Responsive */
@media (max-width: 680px) {
  .ms-pricing {
    font-size: 13px;
  }
  .ms-pricing thead th,
  .ms-pricing tbody td {
    padding: 10px 12px;
  }
  .ms-pricing tbody td.ms-price {
    font-size: 15px;
  }
}

/* ============================================
   STYLE 1: ms-clean — Microsoft Fluent Inspired
   Best for: Spec comparisons, feature tables
   Usage: <table class="ms-clean">
   ============================================ */

.ms-clean {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: #1b1b1b;
  margin: 32px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ms-clean thead tr {
  background-color: #0078d4;
  color: #ffffff;
}

.ms-clean thead th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: none;
}

.ms-clean tbody tr {
  border-bottom: 1px solid #e8e8e8;
  transition: background-color 0.15s ease;
}

.ms-clean tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.ms-clean tbody tr:hover {
  background-color: #e8f4fd;
}

.ms-clean tbody td {
  padding: 13px 18px;
  vertical-align: middle;
  border: none;
  line-height: 1.5;
}

.ms-clean tbody td:first-child {
  font-weight: 600;
  color: #0078d4;
}

.ms-clean tbody tr:last-child {
  border-bottom: none;
}

/* Optional: highlight a recommended row */
.ms-clean tbody tr.ms-recommended {
  background-color: #e8f4fd;
  border-left: 4px solid #0078d4;
}

.ms-clean tbody tr.ms-recommended td:first-child::after {
  content: " ★";
  color: #0078d4;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 680px) {
  .ms-clean {
    font-size: 13px;
  }
  .ms-clean thead th,
  .ms-clean tbody td {
    padding: 10px 12px;
  }
}

/* ============================================
   BONUS: Universal helper row/cell classes
   Work alongside all 4 table styles above
   ============================================ */

/* Highlight any row in any table */
.ms-highlight-row {
  background-color: #fff8e1 !important;
  font-weight: 600;
}

/* Muted/disabled row */
.ms-muted-row td {
  color: #888888 !important;
  font-style: italic;
}

/* Center-align any cell */
.ms-center {
  text-align: center !important;
}

/* Right-align any cell (prices, numbers) */
.ms-right {
  text-align: right !important;
}

/* Green checkmark cell */
.ms-yes::before {
  content: "✓";
  color: #107c10;
  font-weight: 800;
  margin-right: 4px;
}

/* Red cross cell */
.ms-no::before {
  content: "✗";
  color: #d13438;
  font-weight: 800;
  margin-right: 4px;
}

/* ============================================
   RANK MATH FAQ — Microsoft Fluent Accordion
   Matches ms-clean / ms-pricing table styles
   Works with Rank Math's default FAQ block HTML
   ============================================ */

/* ── Wrapper ── */
.rank-math-faq-item {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  background-color: #ffffff;
}

.rank-math-faq-item:hover {
  box-shadow: 0 2px 12px rgba(0, 120, 212, 0.10);
}

/* Open state — elevate the active card */
.rank-math-faq-item.ms-faq-open {
  border-color: #0078d4;
  box-shadow: 0 2px 16px rgba(0, 120, 212, 0.14);
}

/* ── Question Row (the clickable trigger) ── */
.rank-math-faq-item .rank-math-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  cursor: pointer;
  user-select: none;
  background-color: #ffffff;
  transition: background-color 0.15s ease;
  list-style: none; /* removes marker if rendered as <details> */
}

.rank-math-faq-item .rank-math-question::-webkit-details-marker {
  display: none; /* hide native arrow in Chrome */
}

.rank-math-faq-item .rank-math-question:hover {
  background-color: #f0f7ff;
}

/* Active question background */
.rank-math-faq-item.ms-faq-open .rank-math-question {
  background-color: #f0f7ff;
  border-bottom: 1px solid #d0e8fa;
}

/* ── Question Text ── */
.rank-math-faq-item .rank-math-question h3,
.rank-math-faq-item .rank-math-question .rank-math-question-text {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: #1b1b1b;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  flex: 1;
  transition: color 0.15s ease;
}

.rank-math-faq-item.ms-faq-open .rank-math-question h3,
.rank-math-faq-item.ms-faq-open .rank-math-question .rank-math-question-text {
  color: #0078d4;
}

/* ── Plus / Minus Toggle Icon ── */
.ms-faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #0078d4;
  background-color: #ffffff;
  color: #0078d4;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.25s ease;
}

/* Rotate to minus when open */
.rank-math-faq-item.ms-faq-open .ms-faq-icon {
  background-color: #0078d4;
  color: #ffffff;
  transform: rotate(45deg); /* + becomes × */
}

/* ── Answer Panel ── */
.rank-math-faq-item .rank-math-answer {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: #3a3a3a;
  line-height: 1.75;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.35s ease,
    opacity 0.3s ease;
  opacity: 0;
}

/* Open state — answer visible */
.rank-math-faq-item.ms-faq-open .rank-math-answer {
  max-height: 800px;
  padding: 16px 20px 20px;
  opacity: 1;
}

/* ── Answer inner content styling ── */
.rank-math-faq-item .rank-math-answer p {
  margin: 0 0 10px;
}

.rank-math-faq-item .rank-math-answer p:last-child {
  margin-bottom: 0;
}

.rank-math-faq-item .rank-math-answer a {
  color: #0078d4;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rank-math-faq-item .rank-math-answer a:hover {
  color: #005a9e;
}

.rank-math-faq-item .rank-math-answer ul,
.rank-math-faq-item .rank-math-answer ol {
  padding-left: 20px;
  margin: 6px 0;
}

.rank-math-faq-item .rank-math-answer li {
  margin-bottom: 6px;
}

.rank-math-faq-item .rank-math-answer strong {
  color: #1b1b1b;
  font-weight: 700;
}

/* ── Section Heading above FAQ block (optional) ── */
.ms-faq-heading {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1b1b1b;
  margin: 40px 0 18px;
  padding-bottom: 10px;
  border-bottom: 3px solid #0078d4;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ms-faq-heading::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #0078d4;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ── Subtle divider between last item and content below ── */
.rank-math-faq-item:last-child {
  margin-bottom: 32px;
}

/* ── Focus accessibility ring ── */
.rank-math-faq-item .rank-math-question:focus-visible {
  outline: 2px solid #0078d4;
  outline-offset: -2px;
}

/* ── Responsive ── */
@media (max-width: 680px) {
  .rank-math-faq-item .rank-math-question {
    padding: 14px 16px;
  }

  .rank-math-faq-item .rank-math-question h3,
  .rank-math-faq-item .rank-math-question .rank-math-question-text {
    font-size: 14.5px;
  }

  .rank-math-faq-item.ms-faq-open .rank-math-answer {
    padding: 14px 16px 18px;
  }

  .rank-math-faq-item .rank-math-answer {
    font-size: 14px;
  }

  .ms-faq-icon {
    width: 24px;
    height: 24px;
    font-size: 16px;
  }

  .ms-faq-heading {
    font-size: 19px;
  }
}