@layer pages {
/* ==========================================================
   RouterHaus Journal — Revolutionary Blog Design (2025)
   FIXED VERSION - Bugs resolved and harmonized with main.css
   ========================================================== */
/* Buttons centralized in main.css (2025-02-14).
   Local .btn overrides removed; use .btn, .btn-secondary, .btn-ghost, sizes .btn-sm/.btn-lg. */

/* ---------- Local tokens (derived from main.css) ---------- */
:root {
  --rev-blue: var(--primary, #6f7dff);
  --rev-purple: var(--accent, #ff8df3);
  --rev-pink: #ec4899;
  --rev-green: #10b981;
  --rev-orange: #ff6b35;
  --rev-curve: cubic-bezier(.33,1,.68,1);
}

/* ---------- Reading Progress ---------- */
.reading-progress{
  position:fixed; top:0; left:0; height:4px; width:0;
  background:linear-gradient(90deg,var(--hero-start),var(--hero-end));
  z-index:999; /* below navbar (1000) */
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transform-origin:0 50%;
  transition:width .1s ease;
}

/* ---------- Layout ---------- */
.post-shell{
  width:min(1120px, calc(100% - 2rem));
  margin-inline:auto;
  padding: clamp(1.5rem, 3vw, 3rem) 0;
  display:grid;
  grid-template-columns: 300px 1fr;
  grid-auto-flow: row dense;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
/* FIX: Aligned breakpoints with main.css (768px) */
@media (max-width:768px){
  .post-shell{ 
    grid-template-columns: 1fr; 
    grid-auto-flow: row;
  }
}

/* ---------- Navigation Sidebar (ToC) ---------- */
.toc{
  position:sticky; top:calc(72px + 16px);
  align-self:start;
  background: var(--card);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--rev-curve);
}
.toc strong{
  font-size: 1.05rem;
  font-weight: 800;
  display:block;
  margin-bottom:.75rem;
  color: var(--text-primary);
}
.toc ul{ list-style:none; padding:0; margin:0; }
.toc li{ margin: .35rem 0; }
.toc a{
  display:block;
  padding:.5rem .75rem;
  border-radius:12px;
  color: var(--text-muted);
  transition: all .2s ease;
  position:relative;
  font-weight:600;
}
.toc a::before{
  content:"";
  position:absolute; top:0; left:0;
  width:3px; height:100%;
  background: var(--rev-blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--rev-curve);
  border-radius:2px;
}
.toc a:hover,
.toc a.active{
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  transform: translateX(4px);
}
.toc a:hover::before,
.toc a.active::before{ transform: scaleY(1); }

/* FIX: Hide TOC below 900px to match main.css */
@media (max-width:900px){ 
  .toc{ display:none; } 
}

/* ---------- Hero ---------- */
.post-hero{
  grid-column:1 / -1;
  display:flex; flex-direction:column; gap:.8rem;
  padding: clamp(24px, 5vw, 56px);
  color:#fff;
  background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
.post-hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 220px at 20% 10%, rgba(255,255,255,.18), transparent),
    radial-gradient(800px 320px at 80% 10%, rgba(255,255,255,.12), transparent);
  mix-blend-mode: screen;
}
.post-hero .post-meta{ color: rgba(255,255,255,.85); font-size: var(--fs-500); }
.post-hero h1{
  margin:0; font-weight:900; letter-spacing:-.01em; line-height:1.12;
  font-size: var(--fs-900);
}
.post-cover{
  margin:0; border-radius: var(--radius-lg); overflow:hidden;
  background: var(--card); border: var(--card-border); box-shadow: var(--shadow-sm);
}
.post-cover img{ width:100%; height:auto; display:block; }
.post-cover figcaption{
  padding:.7rem 1rem; font-size:.95rem; color: var(--text-muted);
  border-top: 1px solid color-mix(in oklab, var(--text-muted) 14%, transparent);
}

/* ---------- Article Body ---------- */
.post-body{ max-width: 75ch; }
.post-body h2{
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 800;
  margin: 2.2rem 0 1rem;
  position: relative;
  color: var(--text-primary);
  padding-top: .9rem;
  line-height:1.2;
  letter-spacing:-.01em;
}
.post-body h2::before{
  content:""; position:absolute; top:0; left:0;
  width:60px; height:4px;
  background: linear-gradient(90deg, var(--rev-blue), var(--rev-purple));
  border-radius:2px;
}
.post-body h3{
  font-size: var(--fs-700);
  font-weight: 800;
  margin: 1.4rem 0 .6rem;
}
.post-body p{
  font-size: var(--fs-600);
  line-height:1.7;
  color: var(--text-primary);
  margin-bottom: 1.1rem;
}
.post-body a{
  color: var(--rev-blue);
  font-weight: 600;
  position: relative;
  text-decoration: none;
}
.post-body a::after{
  content:"";
  position:absolute; bottom:-2px; left:0;
  width:0; height:2px; background: var(--rev-blue);
  transition: width .2s ease;
}
.post-body a:hover{ color: var(--rev-purple); }
.post-body a:hover::after{ width:100%; }
.post-body hr{
  border:0; height:1px; margin: clamp(20px, 4vw, 36px) 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--primary) 35%, var(--border-color)), transparent);
}

/* ---------- Callouts / Info Cards ---------- */
.callout, .info-card{
  margin: 1.8rem 0;
  padding: 1.25rem 1.4rem;
  background: var(--card);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.callout::before, .info-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--rev-blue), var(--rev-purple), var(--rev-pink));
  border-radius: 2px 2px 0 0;
}
.callout.warn::before{ background: linear-gradient(90deg, var(--rev-orange), var(--rev-pink)); }

/* ---------- Speed Comparison Cards (optional) ---------- */
.speed-comparison{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:1rem;
  margin:1.8rem 0;
}
.speed-card{
  padding:1.25rem 1.4rem;
  background: var(--card);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  text-align:center;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: transform .4s var(--rev-curve), box-shadow .4s var(--rev-curve), border-color .3s ease;
  cursor:pointer;
  box-shadow: var(--shadow-sm);
}
.speed-card:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 40px color-mix(in oklab, var(--primary) 28%, transparent);
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
}
.speed-number{
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
  font-weight:900;
  background: linear-gradient(135deg, var(--rev-blue), var(--rev-purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:.35rem;
}
.speed-label{
  font-size:.9rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--text-muted);
  margin-bottom:.25rem;
}

/* ---------- Code Container (optional) ---------- */
.code-container{
  margin:1.8rem 0;
  border-radius:16px;
  overflow:hidden;
  background: var(--surface);
  border: var(--card-border);
  box-shadow: var(--shadow-sm);
}
.code-header{
  display:flex; align-items:center;
  padding:.85rem 1rem;
  background: color-mix(in oklab, var(--text-muted) 10%, transparent);
}
.code-dots{ display:flex; gap:.5rem; }
.code-dots .dot{
  width:12px; height:12px; border-radius:50%;
  background:rgba(0,0,0,.15);
}
.dot.red{ background:#ff5f56; }
.dot.yellow{ background:#ffbd2e; }
.dot.green{ background:#27ca3f; }
.copy-button, .copy-btn{
  margin-left:auto;
  padding:.4rem .8rem;
  font-size:.8rem;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  border-radius:8px;
  color: var(--rev-blue);
  cursor:pointer;
}
.copy-button:hover, .copy-btn:hover{
  background: color-mix(in oklab, var(--primary) 20%, transparent);
}
.code-content{
  padding:1rem 1.1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.95rem;
  color: var(--text-primary);
  overflow-x:auto;
}

/* Also style plain <pre><code> blocks */
.post-body pre{
  position:relative; margin:1.2rem 0; padding:1rem 1.1rem;
  background: var(--surface);
  color: var(--text-primary);
  border: var(--card-border);
  border-radius: 14px;
  overflow:auto;
  box-shadow: var(--shadow-sm);
}
.post-body pre code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.92em;
}

/* ---------- Tables ---------- */
.post-body table, .data-table{
  width:100%;
  margin:1.6rem 0;
  border-collapse:collapse;
  background: var(--card);
  border-radius:20px;
  overflow:hidden;
  border: var(--card-border);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.data-table thead{
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 20%, transparent), color-mix(in oklab, var(--accent) 20%, transparent));
}
.data-table th{
  padding:1rem; text-align:left; font-weight:800; font-size:.8rem; text-transform:uppercase; color: var(--text-primary);
}
.data-table td{
  padding:1rem; border-bottom:1px solid color-mix(in oklab, var(--text-muted) 14%, transparent);
  color: var(--text-primary);
}
.data-table tr:hover td{ background: color-mix(in oklab, var(--primary) 8%, transparent); }
/* Mobile table scroll */
@media (max-width:768px){ .post-body table{ display:block; overflow-x:auto; } }

/* ---------- Share / Tags / Author ---------- */
.post-share{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  padding:.9rem;
  border:1px dashed var(--border-color);
  border-radius: var(--radius);
  background: var(--surface);
  margin: clamp(20px, 4vw, 36px) 0 .9rem;
}
.post-share .btn-like{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; border-radius:999px; padding:.6rem .95rem; cursor:pointer;
  border:2px solid var(--primary); color: var(--primary); background:transparent;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.post-share .btn-like:hover{ background: color-mix(in oklab, var(--primary) 12%, transparent); }

.post-tags{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0 clamp(20px,4vw,36px);
}
.post-tags .chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:999px;
  background: color-mix(in oklab, var(--text-muted) 10%, transparent);
  border: 1px solid var(--border-color);
  color: var(--text-primary); font-size:.95rem; font-weight:600;
}

.author-card{
  display:grid; grid-template-columns:64px 1fr; gap:1rem;
  padding:1rem; border: var(--card-border); background: var(--card);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.author-card img{
  width:64px; height:64px; border-radius:50%;
  border:2px solid var(--primary); object-fit:cover; background: var(--surface);
}
.author-card .name{ font-weight:800; }
.author-card .bio{ color: var(--text-muted); font-size:.95rem; }

/* ---------- Post Navigation ---------- */
.post-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin: clamp(24px, 5vw, 48px) 0 .9rem;
}
.post-nav a{
  display:block; padding:1rem; border-radius: var(--radius-lg);
  background: var(--card); border: var(--card-border); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-nav a:hover{
  transform: translateY(-4px); box-shadow: var(--shadow);
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
}
.post-nav .meta{ color: var(--text-muted); font-size:.95rem; margin-bottom:.25rem; }
.post-nav .title{ font-weight:800; }
@media (max-width:768px){ .post-nav{ grid-template-columns:1fr; } }

/* ---------- Reveal Animation ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition: all .6s var(--rev-curve); }
.reveal.in-view{ opacity:1; transform:none; }

/* ---------- Dark Mode refinements ---------- */
html[data-theme="dark"] .toc,
html[data-theme="dark"] .callout,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .post-share,
html[data-theme="dark"] .author-card,
html[data-theme="dark"] .post-nav a,
html[data-theme="dark"] .code-container,
html[data-theme="dark"] .post-body pre{
  box-shadow: var(--shadow-lg);
}

/* ===== Desktop layout: TOC left, hero & content right ===== */
@media (min-width: 901px){
  .post-shell{
    grid-template-columns: 300px 1fr;
    grid-auto-flow: row dense;
  }
  .breadcrumb{ grid-column: 1 / -1; }
  .post-hero{ grid-column: 2 / -1; }
  .toc{
    grid-column: 1 / 2;
    grid-row: auto;
    display: block;
    max-height: calc(100vh - 96px);
    overflow: auto;
  }
  .post-body{ grid-column: 2 / -1; }
  .newsletter{ grid-column: 2 / -1; }
}

@media (min-width: 1280px){
  .post-hero{ padding: clamp(24px, 3.5vw, 44px); }
}

/* ==========================================================
   Bottleneck Comparison — Grid Cards (no HTML edits)
   Targets the first table after <h2 id="bottleneck">
   ========================================================== */

@keyframes bt-shimmer {
  0% { background-position: -120% 0, 0 0; }
  100% { background-position: 120% 0, 0 0; }
}

.post-body h2#bottleneck ~ table{
  /* Base tokens */
  --bt-radius: 24px;
  --bt-track: color-mix(in oklab, var(--text-muted) 12%, transparent);
  --bt-sep: color-mix(in oklab, var(--text-muted) 14%, transparent);
  --elev: color-mix(in oklab, var(--card) 85%, var(--surface) 15%);
  --glow: 0 0 20px rgba(111, 125, 255, 0.28);

  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}

/* ---------- Desktop: table -> 3-column card grid ---------- */
@media (min-width: 901px){
  .post-body h2#bottleneck ~ table{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
  .post-body h2#bottleneck ~ table thead{ display:none; }
  .post-body h2#bottleneck ~ table tbody{ display: contents; }

  .post-body h2#bottleneck ~ table tr{
    display: block;
    background: var(--elev);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: var(--card-border);
    border-radius: var(--bt-radius);
    padding: 1.6rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1);
  }
  .post-body h2#bottleneck ~ table tr:hover{
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
  }

  /* Top accent rail */
  .post-body h2#bottleneck ~ table tr::before{
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: var(--card-gradient, linear-gradient(90deg, #64748b, #94a3b8));
    opacity: .6;
  }

  /* Row themes (1: Wi-Fi 5, 2: Wi-Fi 6/6E, 3: Wi-Fi 7) */
  .post-body h2#bottleneck ~ table tbody tr:nth-child(1){
    --card-gradient: linear-gradient(90deg, #ef4444, #f87171);
    --badge: "Legacy";
    --badge-bg: linear-gradient(135deg, #fecaca, #ef4444);
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(2){
    --card-gradient: linear-gradient(90deg, #f59e0b, #fbbf24);
    --badge: "Current";
    --badge-bg: linear-gradient(135deg, #fed7aa, #f59e0b);
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3){
    --card-gradient: linear-gradient(90deg, var(--rev-blue), var(--rev-purple));
    --badge: "Next-Gen";
    --badge-bg: linear-gradient(135deg, var(--primary), var(--accent));
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--primary) 8%, var(--elev)),
      color-mix(in oklab, var(--accent) 6%, var(--elev))
    );
    box-shadow: var(--shadow-lg), var(--glow);
    transform: scale(1.02);
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3):hover{
    transform: translateY(-8px) scale(1.02);
  }
  .post-body h2#bottleneck ~ table tr:nth-child(3)::before{
    height: 6px; opacity: 1;
  }

  /* Performance badge */
  .post-body h2#bottleneck ~ table tr::after{
    content: var(--badge);
    position: absolute; top: 1rem; right: 1rem;
    padding: .5rem 1rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #fff; background: var(--badge-bg);
    box-shadow: 0 4px 14px rgba(111, 125, 255, .15);
  }

  /* Cells become stacked spec items */
  .post-body h2#bottleneck ~ table td{
    display: block;
    padding: .9rem 0;
    border: 0;
    color: var(--text-primary);
    position: relative;
  }

  /* Labels for each column */
  .post-body h2#bottleneck ~ table td::before{
    display: block; margin: 0 0 .35rem;
    font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-muted);
    content: var(--label);
  }
  .post-body h2#bottleneck ~ table td:nth-child(1){ --label:"Generation"; font-weight: 900; font-size: 1.1rem; letter-spacing: -.01em; }
  .post-body h2#bottleneck ~ table td:nth-child(2){ --label:"Max Channel Width"; }
  .post-body h2#bottleneck ~ table td:nth-child(3){ --label:"6 GHz Support"; padding-left: 2rem; }
  .post-body h2#bottleneck ~ table td:nth-child(4){ --label:"Typical Throughput"; padding-bottom: 2rem; }
  .post-body h2#bottleneck ~ table td:nth-child(5){ --label:"Latency"; }

  /* ✅ FIX: remove boxy containers around "Max Channel Width" & "Performance" */
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(2),
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(4){
    background: none !important;
    border: 0 !important;
    padding: .9rem 0 !important;
    box-shadow: none !important;
  }
  /* optional subtle underline for emphasis without a box */
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(2){
    background-image: linear-gradient(90deg, var(--rev-blue), var(--rev-purple));
    background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 100%;
  }

  /* 6 GHz icons (✖ / – / ✓) with fallback text */
  .post-body h2#bottleneck ~ table td:nth-child(3)::after{
    content:""; position:absolute; left:.25rem; top:calc(50% + .2rem); transform:translateY(-50%);
    width:20px; height:20px; border-radius:10px;
    -webkit-mask-size: contain; mask-size: contain; 
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    background: currentColor; box-shadow: 0 2px 4px rgba(0,0,0,.08);
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(3){ color:#ef4444; }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(3)::after{
    -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M18.3 5.71L12 12.01L5.7 5.7L4.29 7.11L10.59 13.41L4.29 19.71L5.7 21.12L12 14.82L18.3 21.12L19.71 19.71L13.41 13.41L19.71 7.11z"/></svg>');
            mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M18.3 5.71L12 12.01L5.7 5.7L4.29 7.11L10.59 13.41L4.29 19.71L5.7 21.12L12 14.82L18.3 21.12L19.71 19.71L13.41 13.41L19.71 7.11z"/></svg>');
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(3){ color:#f59e0b; }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(3)::after{
    -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M19 13H5v-2h14z"/></svg>');
            mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M19 13H5v-2h14z"/></svg>');
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(3){ color:#10b981; }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(3)::after{
    -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>');
            mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>');
  }

  /* Throughput bar with shimmer */
  .post-body h2#bottleneck ~ table td:nth-child(4) span{ display:none; }
  .post-body h2#bottleneck ~ table td:nth-child(4){
    --bar: 0%;
    --pct: "0%";
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(4){ --bar: 55%; --pct:"55%"; }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(4){ --bar: 78%; --pct:"78%"; }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(4){ --bar: 96%; --pct:"96%"; }

  .post-body h2#bottleneck ~ table td:nth-child(4)::before{
    content: "Performance  " var(--pct);
    display: flex; justify-content: space-between;
    color: var(--text-muted);
    font-weight: 700; font-size: .85rem;
    margin-bottom: .55rem;
  }
  .post-body h2#bottleneck ~ table td:nth-child(4)::after{
    content: "";
    position: absolute; left: 0; right: 0; bottom: .6rem;
    height: 12px; border-radius: 999px; overflow: hidden;
    background:
      linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent) 0 0 / 50% 100% no-repeat, /* shimmer */
      var(--fill, linear-gradient(90deg, var(--rev-blue), var(--rev-purple))) 0 0 / var(--bar) 100% no-repeat,
      color-mix(in oklab, var(--text-muted) 12%, transparent); /* track */
    box-shadow: 0 0 20px color-mix(in oklab, var(--primary) 28%, transparent), inset 0 2px 4px rgba(0,0,0,.06);
    animation: bt-shimmer 2s infinite linear;
  }
}

/* ---------- Mobile (≤768px): true cards ---------- */
@media (max-width: 768px){
  .post-body h2#bottleneck ~ table,
  .post-body h2#bottleneck ~ table thead,
  .post-body h2#bottleneck ~ table tbody,
  .post-body h2#bottleneck ~ table th,
  .post-body h2#bottleneck ~ table td,
  .post-body h2#bottleneck ~ table tr{ display:block; }

  .post-body h2#bottleneck ~ table thead{ display:none; }

  .post-body h2#bottleneck ~ table tr{
    background: var(--elev);
    border: var(--card-border);
    border-radius: 20px;
    padding: 1.25rem 1rem 1.6rem;
    margin: 1rem 0;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .post-body h2#bottleneck ~ table tr:hover{ transform: none; box-shadow: var(--shadow); }

  .post-body h2#bottleneck ~ table tr::before{
    content:""; position:absolute; left:0; right:0; top:0; height:4px;
    background: var(--card-gradient, linear-gradient(90deg,#64748b,#94a3b8)); opacity:.7;
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3){
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--primary) 8%, var(--elev)),
      color-mix(in oklab, var(--accent) 6%, var(--elev))
    );
    box-shadow: var(--shadow-lg), var(--glow);
  }
  .post-body h2#bottleneck ~ table tr:nth-child(3)::before{ height:6px; opacity:1; }

  /* badge */
  .post-body h2#bottleneck ~ table tr::after{
    content: var(--badge);
    position: absolute; top: .8rem; right: .9rem;
    padding: .4rem .8rem; border-radius: 999px; font-size: .7rem;
    font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color:#fff;
    background: var(--badge-bg, linear-gradient(135deg,#64748b,#94a3b8));
    box-shadow: 0 4px 14px rgba(111,125,255,.15);
  }

  /* labels + spec stacks */
  .post-body h2#bottleneck ~ table td{ border:0; padding:.75rem 0; position:relative; }
  .post-body h2#bottleneck ~ table td::before{
    display:block; margin:0 0 .35rem; font-size:.8rem; font-weight:800;
    letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted);
    content: var(--label);
  }
  .post-body h2#bottleneck ~ table td:nth-child(1){ --label:"Generation"; font-weight:900; font-size:1.12rem; }
  .post-body h2#bottleneck ~ table td:nth-child(2){ --label:"Max Channel Width"; }
  .post-body h2#bottleneck ~ table td:nth-child(3){ --label:"6 GHz Support"; padding-left:1.9rem; }
  .post-body h2#bottleneck ~ table td:nth-child(4){ --label:"Typical Throughput"; padding-bottom:2.1rem; }
  .post-body h2#bottleneck ~ table td:nth-child(5){ --label:"Latency"; }

  /* icons with fallback support */
  .post-body h2#bottleneck ~ table td:nth-child(3)::after{
    content:""; position:absolute; left:0; top:calc(50% + .2rem); transform:translateY(-50%);
    width:18px; height:18px; border-radius:9px; background: currentColor;
    -webkit-mask-size:contain; mask-size:contain; 
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position: center; mask-position: center;
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(3){ color:#ef4444; }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(3)::after{
    -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M18.3 5.71L12 12.01L5.7 5.7L4.29 7.11L10.59 13.41L4.29 19.71L5.7 21.12L12 14.82L18.3 21.12L19.71 19.71L13.41 13.41L19.71 7.11z"/></svg>');
            mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M18.3 5.71L12 12.01L5.7 5.7L4.29 7.11L10.59 13.41L4.29 19.71L5.7 21.12L12 14.82L18.3 21.12L19.71 19.71L13.41 13.41L19.71 7.11z"/></svg>');
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(3){ color:#f59e0b; }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(3)::after{
    -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M19 13H5v-2h14z"/></svg>');
            mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M19 13H5v-2h14z"/></svg>');
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(3){ color:#10b981; }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(3)::after{
    -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>');
            mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>');
  }

  /* throughput bar + percent */
  .post-body h2#bottleneck ~ table td:nth-child(4) span{ display:none; }
  .post-body h2#bottleneck ~ table td:nth-child(4){ --bar: 0%; --pct:"0%"; }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(4){ --bar: 55%; --pct:"55%"; --fill: linear-gradient(90deg,#ef4444,#f87171); }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(4){ --bar: 78%; --pct:"78%"; --fill: linear-gradient(90deg,#f59e0b,#fbbf24); }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(4){ --bar: 96%; --pct:"96%"; --fill: linear-gradient(90deg,var(--rev-blue),var(--rev-purple)); }

  .post-body h2#bottleneck ~ table td:nth-child(4)::before{
    content: "Performance  " var(--pct);
    display:flex; justify-content:space-between; color:var(--text-muted);
    font-weight:700; font-size:.82rem; margin-bottom:.55rem;
  }
  .post-body h2#bottleneck ~ table td:nth-child(4)::after{
    content:""; position:absolute; left:0; right:0; bottom:.6rem; height:10px; border-radius:999px;
    background:
      linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent) 0 0 / 50% 100% no-repeat,
      var(--fill, linear-gradient(90deg,var(--rev-blue),var(--rev-purple))) 0 0 / var(--bar) 100% no-repeat,
      var(--bt-track);
    box-shadow: 0 0 20px color-mix(in oklab, var(--primary) 28%, transparent), inset 0 2px 4px rgba(0,0,0,.06);
    animation: bt-shimmer 2s infinite linear;
  }
}

/* ---------- Browser Fallbacks for CSS Masks ---------- */
@supports not (mask-image: url("data:")) {
  .post-body h2#bottleneck ~ table td:nth-child(3)::after {
    content: "";
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(3)::after{ content: "✖"; }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(3)::after{ content: "−"; }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(3)::after{ content: "✓"; }
}

/* ---------- Dark mode tweaks ---------- */
html[data-theme="dark"] .post-body h2#bottleneck ~ table td:nth-child(4)::after{
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent) 0 0 / 50% 100% no-repeat,
    var(--fill, linear-gradient(90deg,var(--rev-blue),var(--rev-purple))) 0 0 / var(--bar) 100% no-repeat,
    color-mix(in oklab, var(--text-muted) 28%, transparent);
}

/* Breadcrumb polish */
.breadcrumb { margin: .5rem 0 0; font-size: var(--fs-500); color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--primary); }

/* Bulleted helper used in “Related searches” */
.bulleted { list-style: disc; padding-left: 1.25rem; }
.bulleted li { margin: .35rem 0; }

/* Anchor offset for sticky headers (ToC targets) */
.post-body h2[id], .post-body h3[id] { scroll-margin-top: 96px; }

/* Callout icon alignment (if you want tighter layout) */
.callout { display: grid; grid-template-columns: 28px 1fr; gap: .75rem; align-items: start; }
.callout .icon { display:flex; align-items:center; justify-content:center; color: var(--primary); }

/* Accessibility helper (only if not already in main.css) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }


/* ---------- Focus States for Accessibility ---------- */
.toc a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
}
.post-nav a:focus-visible,
.speed-card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
.copy-button:focus-visible,
.copy-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- Performance Optimizations ---------- */
.toc a,
.speed-card,
.post-nav a {
  will-change: transform;
}
.post-body h2#bottleneck ~ table tr {
  will-change: transform;
}

/* Reduced motion: disable shimmer animation fully */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .toc a,
  .speed-card,
  .post-nav a,
  .post-body h2#bottleneck ~ table tr {
    transition: none;
  }
  .post-body h2#bottleneck ~ table td:nth-child(4)::after{
    animation: none;
    background:
      var(--fill, linear-gradient(90deg,var(--rev-blue),var(--rev-purple))) 0 0 / var(--bar) 100% no-repeat,
      color-mix(in oklab, var(--text-muted) 12%, transparent);
  }
}
/* ===== Bottleneck desktop fine-tuning (drop-in overrides) ===== */
@media (min-width: 901px){

  /* 1) Grid: equal heights + nicer spacing */
  .post-body h2#bottleneck ~ table{
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.4vw, 28px);
    grid-auto-rows: 1fr;               /* equal-height cards */
    align-items: stretch;
  }

  /* 2) Card internals: consistent rhythm + badge clearance */
  .post-body h2#bottleneck ~ table tr{
    /* keep your visual style, but refine spacing */
    padding: clamp(20px, 1.6vw, 24px) clamp(18px, 1.5vw, 22px) clamp(22px, 1.6vw, 26px);
    padding-top: calc(clamp(20px,1.6vw,24px) + 14px); /* room for badge */
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;      /* puts latency at bottom; perf row aligns */
    border-color: color-mix(in oklab, var(--text-muted) 10%, transparent);
  }

  /* 3) Badge positions consistent on all three cards */
  .post-body h2#bottleneck ~ table tr::after{
    top: clamp(10px, .9vw, 14px);
    right: clamp(10px, .9vw, 14px);
  }

  /* 4) Internal spacing trims */
  .post-body h2#bottleneck ~ table td{ padding: .65rem 0; position: relative; }
  .post-body h2#bottleneck ~ table td:nth-child(1){ margin-top:.2rem; font-size:1.02rem; }
  .post-body h2#bottleneck ~ table td:nth-child(4){ margin-top:.6rem; }  /* performance block */
  .post-body h2#bottleneck ~ table td:nth-child(5){ margin-top:.8rem; }  /* latency */

  /* 5) Subtle baseline and bar polish */
  .post-body h2#bottleneck ~ table td:nth-child(4)::before{
    margin-bottom:.5rem;                /* slightly tighter label */
  }
  .post-body h2#bottleneck ~ table td:nth-child(4)::after{
    bottom:.4rem;                       /* aligns bars across cards */
  }

  /* 6) Remove any residual “boxed highlight” styling (defensive) */
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(2),
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(4){
    background:none !important;
    border:0 !important;
    padding:.65rem 0 !important;
    box-shadow:none !important;
  }
  .post-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(2){
    background-image: linear-gradient(90deg, var(--rev-blue), var(--rev-purple));
    background-repeat:no-repeat; background-size:100% 2px; background-position:0 100%;
  }
}

/* Optional: slightly tighter gap to section title on very wide screens */
@media (min-width: 1200px){
  .post-body h2#bottleneck{ margin-bottom: .75rem; }
}
}