@layer pages {
/* ==========================================================
   RouterHaus — Pillars (Premium Desktop-First Design)
   Modern, sophisticated, and visually stunning
   (Harmonized with post.css layout & rhythm)
   ========================================================== */
/* Buttons centralized in main.css (2025-02-14).
   Local .btn overrides removed; use .btn, .btn-secondary, .btn-ghost, sizes .btn-sm/.btn-lg. */

/* ---- Enhanced Design Tokens ---- */
:root {
  --hero-start: #6366f1;
  --hero-mid: #8b5cf6;
  --hero-end: #ec4899;
  --glow-primary: rgba(99, 102, 241, 0.4);
  --glow-accent: rgba(236, 72, 153, 0.3);

  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --header-h: 72px;
  --content-max: 840px; /* kept for internal sections; body uses 75ch like post.css */
  --toc-width: 300px;  /* align with post.css */
  --pillar-gap: 64px;

  /* Premium shadows */
  --shadow-subtle: 0 1px 3px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-soft: 0 10px 40px rgba(0,0,0,0.04), 0 2px 10px rgba(0,0,0,0.06);
  --shadow-elevated: 0 20px 60px rgba(0,0,0,0.08), 0 10px 30px rgba(0,0,0,0.05);
  --shadow-dramatic: 0 30px 90px rgba(0,0,0,0.12), 0 15px 35px rgba(0,0,0,0.08);

  /* Glass morphism */
  --glass-white: rgba(255,255,255,0.7);
  --glass-blur: 20px;
  --glass-border: rgba(255,255,255,0.2);

  /* Grid system */
  --grid-12: repeat(12, 1fr);
  --grid-gap: 32px;
}

/* Dark mode sophistication */
html[data-theme="dark"] {
  --glass-white: rgba(10,10,20,0.6);
  --glass-border: rgba(255,255,255,0.06);
  --shadow-soft: 0 10px 40px rgba(0,0,0,0.3);
  --shadow-elevated: 0 20px 60px rgba(0,0,0,0.4);
  --glow-primary: rgba(139, 92, 246, 0.3);
  --glow-accent: rgba(236, 72, 153, 0.25);
}

/* ---- Premium Progress Indicator ---- */
.pillar-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--hero-start) 0%, var(--hero-mid) 50%, var(--hero-end) 100%);
  z-index: 10000;
  transition: width 0.3s var(--ease-out-expo);
  transform-origin: left center;
}
.pillar-progress::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 100px; height: 100%;
  background: inherit;
  filter: blur(10px) brightness(1.5);
  opacity: 0.8;
  animation: progressPulse 1.5s ease-in-out infinite;
}
@keyframes progressPulse { 0%,100%{opacity:.8} 50%{opacity:1} }

/* ==========================================================
   Layout (Harmonized with post.css)
   - Desktop: 2 columns (TOC | Content)
   - Rail stacks below content as cards
   ========================================================== */
.pillar-shell{
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 3rem) 0;
  display: grid;
  grid-template-columns: var(--toc-width) 1fr;
  grid-auto-flow: row dense;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
/* Tablet/Mobile collapse (match post.css) */
@media (max-width:768px){
  .pillar-shell{
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    padding: clamp(1rem, 3vw, 2rem) 0;
  }
}

/* ---- Elevated Breadcrumb (unchanged by request) ---- */
.breadcrumb { grid-column: 1 / -1; margin-bottom: 32px; position: relative; overflow: hidden; }
.breadcrumb::before{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background: linear-gradient(90deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
}
.breadcrumb ol{
  display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0;
  font-size:.875rem; font-weight:500;
}
.breadcrumb li{ display:flex; align-items:center; }
.breadcrumb li:not(:last-child)::after{
  content:''; width:20px; height:20px; margin:0 8px;
  background:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6L15 12L9 18' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.4;
}
.breadcrumb a{
  color:var(--text-muted); text-decoration:none; padding:6px 12px; border-radius:8px;
  transition: all .2s ease; position:relative;
}
.breadcrumb a:hover{
  color: var(--primary);
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 5%, transparent), color-mix(in oklab, var(--primary) 10%, transparent));
}

/* ---- Spectacular Hero Section (downsized to post.css scale) ---- */
.pillar-hero{
  grid-column: 1 / -1;
  display:flex; flex-direction:column; justify-content:center; gap:.8rem;
  padding: clamp(24px, 5vw, 56px);
  color:#fff;
  background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-mid) 50%, var(--hero-end) 100%);
  border-radius: var(--radius-lg, 20px);
  position:relative; overflow:hidden;
  margin-bottom: clamp(20px, 4vw, 36px);
  box-shadow: var(--shadow, 0 10px 40px rgba(0,0,0,.08));
}
/* Animated mesh gradient */
.pillar-hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(255,255,255,0.1) 0%, transparent 50%);
  animation: meshFlow 20s ease-in-out infinite;
}
.pillar-hero::after{
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity:.4; animation: patternDrift 30s linear infinite;
}
@keyframes meshFlow{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-20px,-20px) scale(1.1)} 66%{transform:translate(20px,-10px) scale(.95)} }
@keyframes patternDrift{ 0%{transform:translate(0,0)} 100%{transform:translate(60px,60px)} }

.pillar-title{
  position:relative; z-index:1; margin:0 0 .6rem;
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
  font-weight:900; line-height:1.12; letter-spacing:-.01em;
  text-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: titleReveal .8s var(--ease-out-expo);
}
@keyframes titleReveal{ 0%{opacity:0; transform:translateY(40px)} 100%{opacity:1; transform:translateY(0)} }

.pillar-meta{
  position:relative; z-index:1; color:rgba(255,255,255,.9);
  font-size:.95rem; font-weight:600; display:flex; gap:1rem; align-items:center; margin-bottom:.9rem;
  animation: metaReveal .8s .1s var(--ease-out-expo) both;
}
@keyframes metaReveal{ 0%{opacity:0; transform:translateY(20px)} 100%{opacity:1; transform:translateY(0)} }
.pillar-meta span{ display:flex; align-items:center; gap:8px; }
.pillar-meta span::before{ content:'•'; opacity:.5; }
.pillar-meta span:first-child::before{ display:none; }

.pillar-hero .lede{
  position:relative; z-index:1; font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
  line-height:1.6; max-width:75ch; opacity:.95; font-weight:400;
  animation: ledeReveal .8s .2s var(--ease-out-expo) both;
}
@keyframes ledeReveal{ 0%{opacity:0; transform:translateY(30px)} 100%{opacity:.95; transform:translateY(0)} }

/* Cinematic Cover Image (reduced height) */
.pillar-cover{
  position:relative; z-index:1; margin-top: clamp(12px, 2vw, 16px);
  border-radius: var(--radius-lg, 16px); overflow:hidden;
  background: var(--card);
  border: var(--card-border, 1px solid rgba(255,255,255,0.2));
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,0.08));
  animation: coverReveal .8s .3s var(--ease-out-expo) both;
}
@keyframes coverReveal{ 0%{opacity:0; transform:translateY(40px) scale(.95)} 100%{opacity:1; transform:translateY(0) scale(1)} }
.pillar-cover img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; transition: transform .6s var(--ease-out-expo); }
.pillar-cover:hover img{ transform: scale(1.04); }
.pillar-cover figcaption{
  padding:.7rem 1rem; font-size:.95rem; font-weight:500; color: var(--text-muted);
  background: none; backdrop-filter: none;
  border-top: 1px solid color-mix(in oklab, var(--text-muted) 14%, transparent);
}
/* Responsive hero paddings */
@media (max-width:1024px){ .pillar-hero{ padding: clamp(20px, 4vw, 40px); } }
@media (max-width:768px){ .pillar-hero{ padding: 24px; border-radius: 16px; } }

/* ---- Premium TOC Sidebar (match post.css behavior) ---- */
.pillar-toc{
  grid-column: 1 / 2;
  position: sticky; top: calc(var(--header-h) + 16px);
  align-self:start;
  max-height: calc(100vh - 96px); overflow:auto; overscroll-behavior:contain;
  background: var(--card); backdrop-filter: blur(var(--glass-blur));
  border: var(--card-border, 1px solid var(--border-color));
  border-radius: var(--radius-lg, 16px);
  padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.06));
}
/* Scrollbar */
.pillar-toc::-webkit-scrollbar{ width:6px; } .pillar-toc::-webkit-scrollbar-track{ background:transparent; }
.pillar-toc::-webkit-scrollbar-thumb{ background: color-mix(in oklab, var(--primary) 30%, transparent); border-radius:3px; }
.pillar-toc::-webkit-scrollbar-thumb:hover{ background: color-mix(in oklab, var(--primary) 50%, transparent); }
.pillar-toc strong{
  display:block; font-size:1.05rem; font-weight:800;
  color: var(--text-primary); margin-bottom:.75rem;
}
.pillar-toc ul{ list-style:none; margin:0; padding:0; }
.pillar-toc li{ margin:.35rem 0; }
.pillar-toc a{
  display:block; padding:.5rem .75rem; border-radius:12px; color: var(--text-muted);
  font-size:.95rem; font-weight:600; text-decoration:none; position:relative; transition: all .2s ease;
}
.pillar-toc a::before{
  content:''; position:absolute; left:0; top:0; width:3px; height:100%;
  background: var(--primary);
  transform: scaleY(0); transform-origin: top; transition: transform .3s cubic-bezier(.33,1,.68,1); border-radius:2px;
}
.pillar-toc a:hover, .pillar-toc a.is-active{
  color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); transform: translateX(4px);
}
.pillar-toc a:hover::before, .pillar-toc a.is-active::before{ transform: scaleY(1); }
/* Hide TOC ≤900px (post.css parity) */
@media (max-width:900px){ .pillar-toc{ display:none; } }

/* ---- Article Body Excellence (aligned to 75ch like post.css) ---- */
.pillar-body{
  grid-column: 1 / -1;
  max-width: 75ch;
  font-size: var(--fs-600, 1.0625rem);
  line-height:1.7; color: var(--text-primary);
}
@media (max-width:768px){ .pillar-body{ order:3; font-size:1rem; line-height:1.7; } }

.pillar-body h2{
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight:800; margin: 2.2rem 0 1rem; color: var(--text-primary);
  padding-top:.9rem; line-height:1.2; letter-spacing:-.01em;
  scroll-margin-top: 96px;
}
.pillar-body h2::before{
  content:''; position:absolute; left:0; top:0; width:60px; height:4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius:2px;
}
.pillar-body h2:first-of-type{ margin-top:0; }

.pillar-body h3{
  font-size: var(--fs-700, 1.25rem); font-weight:800; margin: 1.4rem 0 .6rem; color: var(--text-primary);
  scroll-margin-top: 96px;
}
.pillar-body p{ margin-bottom:1.1rem; color: var(--text-primary); }
.pillar-body ul, .pillar-body ol{ margin:1.2rem 0 1.6rem; padding-left:1.25rem; }
.pillar-body li{ margin:.6rem 0; }
.pillar-body ul li::marker{ color: var(--primary); }

/* Links -> underline hover like post.css */
.pillar-body a{
  color: var(--primary); font-weight:600; text-decoration:none; position:relative; background:none;
}
.pillar-body a::after{
  content:""; position:absolute; bottom:-2px; left:0; width:0; height:2px; background: var(--primary);
  transition: width .2s ease;
}
.pillar-body a:hover{ color: var(--accent); }
.pillar-body a:hover::after{ width:100%; }

/* ---- Premium Data Tables (token parity) ---- */
.pillar-body .data-table,
.data-table{
  width:100%; margin:1.6rem 0; border-collapse:separate; border-spacing:0;
  background: var(--card); border-radius:20px; overflow:hidden; box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.06));
  border: var(--card-border, 1px solid var(--border-color));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font-size:.9375rem;
}
.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; color: var(--text-primary);
  border-bottom:1px solid color-mix(in oklab, var(--text-muted) 14%, transparent);
}
.data-table tbody tr{ transition: background-color .2s ease; }
.data-table tbody tr:hover td{ background: color-mix(in oklab, var(--primary) 8%, transparent); }
/* Mobile table */
@media (max-width:768px){
  .pillar-body table{ display:block; overflow-x:auto; }
  .pillar-body .data-table{ font-size:.875rem; }
}

/* ---- Premium Card Grid ---- */
.pillar-body .cards-3{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2.4vw, 28px); margin: clamp(24px, 4vw, 48px) 0;
}
.pillar-body .card{
  background: var(--card); border:1px solid var(--border-color); border-radius:20px;
  padding:32px; position:relative; overflow:hidden; transition: all .4s var(--ease-out-expo); cursor:default;
  box-shadow: var(--shadow-soft);
}
.pillar-body .card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease-out-expo);
}
.pillar-body .card::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at center, color-mix(in oklab, var(--primary) 5%, transparent), transparent);
  opacity:0; transition: opacity .4s ease;
}
.pillar-body .card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-dramatic); border-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.pillar-body .card:hover::before{ transform: scaleX(1); }
.pillar-body .card:hover::after{ opacity:1; }
.pillar-body .card h3{ margin:0 0 16px; font-size:1.25rem; font-weight:700; position:relative; z-index:1; }
.pillar-body .card .list{ list-style:none; padding:0; margin:0; position:relative; z-index:1; }
.pillar-body .card .list li{
  position:relative; padding-left:28px; margin:12px 0; color: var(--text-muted); font-size:.9375rem;
}
.pillar-body .card .list li::before{
  content:''; position:absolute; left:0; top:8px; width:16px; height:16px;
  background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius:50%;
}
.pillar-body .card .list li::after{
  content:'✓'; position:absolute; left:5px; top:5px; color:#fff; font-size:10px; font-weight:bold;
}

/* ---- Elevated Callouts ---- */
.pillar-callout{
  margin:1.8rem 0; padding:1.25rem 1.4rem;
  background: var(--glass-white); backdrop-filter: blur(var(--glass-blur));
  border:1px solid var(--glass-border); border-radius:20px; box-shadow: var(--shadow-soft);
  position:relative; overflow:hidden;
}
.pillar-callout::before{
  content:''; position:absolute; left:0; top:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.pillar-callout::after{
  content:''; position:absolute; top:-50%; right:-50%; width:200%; height:200%;
  background: radial-gradient(circle, color-mix(in oklab, var(--primary) 5%, transparent), transparent 70%);
  animation: calloutGlow 10s ease-in-out infinite; pointer-events:none;
}
@keyframes calloutGlow{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,-20px)} }
.pillar-callout.warn::before{ background: linear-gradient(90deg, #f59e0b, #ef4444); }
.pillar-callout p{ position:relative; z-index:1; margin:0; font-size:1.0625rem; line-height:1.7; }

/* ---- Premium Code Blocks ---- */
.pillar-code{
  margin:1.8rem 0; border-radius:16px; overflow:hidden;
  background: var(--surface); border:1px solid var(--border-color); box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.06));
}
.pillar-code .code-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:.85rem 1rem;
  background: color-mix(in oklab, var(--text-muted) 10%, transparent);
  border-bottom:1px solid var(--border-color);
}
.pillar-code .dots{ display:flex; gap:.45rem; align-items:center; }
.pillar-code .dot{ width:10px; height:10px; border-radius:50%; background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.pillar-code .dot.red{ background:#ff5f56; } .pillar-code .dot.yellow{ background:#ffbd2e; } .pillar-code .dot.green{ background:#27ca3f; }

.pillar-code .code-actions{ display:flex; align-items:center; gap:8px; }
.pillar-code .copy-btn{
  appearance:none; border:none; cursor:pointer;
  padding:.4rem .8rem; border-radius:8px; font-size:.8rem; font-weight:700;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  transition: transform .2s var(--ease-out-expo), box-shadow .2s var(--ease-out-expo), background .2s ease;
}
.pillar-code .copy-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-subtle); }
.pillar-code .copy-btn:active{ transform: translateY(0); }

.pillar-code pre{
  margin:0; padding:1rem 1.1rem; overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.95rem; line-height:1.7; color: var(--text-primary);
  background: var(--surface);
}
/* lightweight syntax tint (optional) */
.pillar-code code .k{ color:#8b5cf6; }  /* keyword */
.pillar-code code .s{ color:#10b981; }  /* string */
.pillar-code code .n{ color: var(--text-primary); } /* name */
.pillar-code code .c{ color:#94a3b8; font-style:italic; } /* comment */

/* ---- Right Rail (Quick actions / resources) ---- */
.pillar-rail{
  grid-column: 1 / -1; position:sticky; top: calc(var(--header-h) + 32px); display:grid; gap:24px;
}
.rail-card{
  background: var(--card); border:1px solid var(--border-color); border-radius:20px; padding:20px 24px;
  box-shadow: var(--shadow-soft);
}
.rail-card h3{ margin:0 0 .5rem; font-weight:800; }
.rail-links{ list-style:none; padding:0; margin:.25rem 0 0; }
.rail-links li{ margin:.25rem 0; }
.rail-links a{ color: var(--text-muted); text-decoration:none; transition: color .2s ease; }
.rail-links a:hover{ color: var(--primary); }

/* Tablet stacking for rail */
@media (max-width:1280px){
  .pillar-rail{ position:static; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:768px){
  .pillar-rail{ grid-template-columns: 1fr; order:4; }
}

/* ---- Share / tags / author / nav ---- */
.pillar-share{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; padding:.8rem;
  border:1px dashed var(--border-color); border-radius: var(--radius, 12px); background: var(--surface);
  margin: clamp(20px, 4vw, 36px) 0 .9rem;
}
.pillar-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0 clamp(20px,4vw,36px); }
.pillar-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;
}
.pillar-author{
  display:grid; grid-template-columns:64px 1fr; gap:1rem; padding:1rem;
  border:1px solid var(--border-color); background: var(--card); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.06));
}
.pillar-author img{ width:64px; height:64px; border-radius:50%; border:2px solid var(--primary); object-fit:cover; background: var(--surface); }
.pillar-author .name{ font-weight:800; }
.pillar-author .bio{ color: var(--text-muted); font-size:.95rem; }

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

/* ---- Newsletter CTA ---- */
.pillar-shell .newsletter{
  grid-column: 1 / -1;
  grid-column: 2 / -1;
  margin: clamp(28px, 6vw, 52px) 0 clamp(20px, 5vw, 40px);
  padding: clamp(24px, 4vw, 36px);
  position: relative;
  overflow: hidden;
}
.pillar-shell .newsletter::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--primary) 16%, transparent) 0%, transparent 60%),
              radial-gradient(circle at 100% 100%, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 60%);
  opacity:.4;
  pointer-events:none;
}
.pillar-shell .nlc{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap: clamp(0.85rem, 2vw, 1.4rem);
}
.pillar-shell .nlc h2{
  margin:0;
  font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.15rem);
  font-weight:900;
  background: linear-gradient(120deg, var(--primary), var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.pillar-shell .nlc p{
  margin:0;
  color: var(--text-muted);
  font-size:1.05rem;
  line-height:1.6;
}
.pillar-shell .nl-form{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: clamp(0.65rem, 2vw, 0.95rem);
}
.pillar-shell #nlEmail{
  flex:1 1 260px;
  min-width:220px;
  height:52px;
  border-radius: 999px;
  border:1px solid var(--border-color);
  background: var(--surface);
  padding:0 1.25rem;
  font-size:1rem;
  color: var(--text-primary);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pillar-shell #nlEmail:focus{
  outline:none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 28%, transparent);
}
.pillar-shell .nl-form .btn{
  --btn-radius:999px;
  --btn-padding-y:.62rem;
  --btn-padding-x:clamp(1.35rem, 3vw, 1.75rem);
  --btn-font-size:1rem;
  --btn-gap:.4rem;
  font-weight:700;
  white-space:nowrap;
}
.pillar-shell #nlMsg{
  flex-basis:100%;
  margin:0;
  color: var(--text-muted);
  font-size:.9rem;
}

@media (max-width:768px){
  .pillar-shell .newsletter{
    grid-column: 1 / -1;
    order:5;
    margin: clamp(24px, 6vw, 40px) 0 clamp(16px, 5vw, 32px);
  }
}

@media (max-width:600px){
  .pillar-shell .nl-form{
    flex-direction:column;
    align-items:stretch;
  }
  .pillar-shell #nlEmail{
    min-width:0;
    width:100%;
  }
  .pillar-shell .nl-form .btn{
    width:100%;
  }
  .pillar-shell #nlMsg{
    margin-top:.35rem;
  }
}

/* ---- CTA Buttons ---- */
.pillar-cta{ display:flex; gap:12px; margin-top: 12px; flex-wrap:wrap; }
.pillar-btn{
  display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px;
  text-decoration:none; font-weight:700; border:1px solid var(--border-color); background:#fff; color:#111827;
  transition: transform .22s var(--ease-out-expo), box-shadow .22s var(--ease-out-expo);
}
.pillar-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.pillar-btn.primary{
  background: linear-gradient(90deg, var(--primary), var(--accent)); color:#fff; border:none;
  box-shadow:0 10px 24px rgba(111,125,255,.25);
}

/* ---- Reveal & Focus ---- */
.pillar-reveal{ opacity:0; transform:translateY(12px); transition: opacity .32s var(--ease-out-expo), transform .32s var(--ease-out-expo); }
.pillar-reveal.in-view{ opacity:1; transform:none; }
.pillar-toc a:focus-visible, .pillar-nav a:focus-visible, .pillar-btn:focus-visible, .copy-btn:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}

/* ==========================================================
   Bottleneck table → cards (desktop 3-up, mobile stacked)
   ========================================================== */
@keyframes bt-shimmer {
  0% { background-position: -120% 0, 0 0; }
  100% { background-position: 120% 0, 0 0; }
}

.pillar-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){
  .pillar-body h2#bottleneck ~ table{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 28px);
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
  .pillar-body h2#bottleneck ~ table thead{ display:none; }
  .pillar-body h2#bottleneck ~ table tbody{ display: contents; }

  .pillar-body h2#bottleneck ~ table tr{
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    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: clamp(20px, 1.6vw, 24px) clamp(18px, 1.5vw, 22px) clamp(22px, 1.6vw, 26px);
    padding-top: calc(clamp(20px,1.6vw,24px) + 14px); /* badge clearance */
    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);
    border-color: color-mix(in oklab, var(--text-muted) 10%, transparent);
  }
  .pillar-body h2#bottleneck ~ table tr:hover{
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
  }

  /* Top accent rail */
  .pillar-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) */
  .pillar-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);
  }
  .pillar-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);
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(3){
    --card-gradient: linear-gradient(90deg, var(--primary), var(--accent));
    --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);
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(3):hover{
    transform: translateY(-8px) scale(1.02);
  }
  .pillar-body h2#bottleneck ~ table tr:nth-child(3)::before{
    height: 6px; opacity: 1;
  }

  /* Badge */
  .pillar-body h2#bottleneck ~ table tr::after{
    content: var(--badge);
    position: absolute; top: clamp(10px, .9vw, 14px); right: clamp(10px, .9vw, 14px);
    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 */
  .pillar-body h2#bottleneck ~ table td{
    display: block; padding: .65rem 0; border: 0; color: var(--text-primary); position: relative;
  }

  /* Labels for each column */
  .pillar-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);
  }
  .pillar-body h2#bottleneck ~ table td:nth-child(1){ --label:"Generation"; font-weight:900; font-size:1.02rem; letter-spacing:-.01em; margin-top:.2rem; }
  .pillar-body h2#bottleneck ~ table td:nth-child(2){ --label:"Max Channel Width"; }
  .pillar-body h2#bottleneck ~ table td:nth-child(3){ --label:"6 GHz Support"; padding-left: 2rem; }
  .pillar-body h2#bottleneck ~ table td:nth-child(4){ --label:"Typical Throughput"; margin-top:.6rem; }
  .pillar-body h2#bottleneck ~ table td:nth-child(5){ --label:"Latency"; margin-top:.8rem; }

  /* ✅ Remove boxed highlights on row 3 specific cells */
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(2),
  .pillar-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;
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(2){
    background-image: linear-gradient(90deg, var(--primary), var(--accent));
    background-repeat:no-repeat; background-size:100% 2px; background-position:0 100%;
  }

  /* 6 GHz icons (✖ / – / ✓) with fallback text */
  .pillar-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);
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(3){ color:#ef4444; }
  .pillar-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>');
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(3){ color:#f59e0b; }
  .pillar-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>');
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(3){ color:#10b981; }
  .pillar-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 */
  .pillar-body h2#bottleneck ~ table td:nth-child(4) span{ display:none; }
  .pillar-body h2#bottleneck ~ table td:nth-child(4){
    --bar: 0%;
    --pct: "0%";
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(4){ --bar: 55%; --pct:"55%"; }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(4){ --bar: 78%; --pct:"78%"; }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(4){ --bar: 96%; --pct:"96%"; }

  .pillar-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;
  }
  .pillar-body h2#bottleneck ~ table td:nth-child(4)::after{
    content: "";
    position: absolute; left: 0; right: 0; bottom: .4rem;
    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(--primary), var(--accent))) 0 0 / var(--bar) 100% no-repeat,
      var(--bt-track); /* 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){
  .pillar-body h2#bottleneck ~ table,
  .pillar-body h2#bottleneck ~ table thead,
  .pillar-body h2#bottleneck ~ table tbody,
  .pillar-body h2#bottleneck ~ table th,
  .pillar-body h2#bottleneck ~ table td,
  .pillar-body h2#bottleneck ~ table tr{ display:block; }

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

  .pillar-body h2#bottleneck ~ table tr{
    background: color-mix(in oklab, var(--card) 85%, var(--surface) 15%);
    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;
  }
  .pillar-body h2#bottleneck ~ table tr:hover{ transform: none; box-shadow: var(--shadow); }

  .pillar-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;
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(3){
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--primary) 8%, color-mix(in oklab, var(--card) 85%, var(--surface) 15%)),
      color-mix(in oklab, var(--accent) 6%, color-mix(in oklab, var(--card) 85%, var(--surface) 15%))
    );
    box-shadow: var(--shadow-lg), 0 0 20px rgba(111,125,255,.28);
  }
  .pillar-body h2#bottleneck ~ table tr:nth-child(3)::before{ height:6px; opacity:1; }

  /* badge */
  .pillar-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 */
  .pillar-body h2#bottleneck ~ table td{ border:0; padding:.75rem 0; position:relative; }
  .pillar-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);
  }
  .pillar-body h2#bottleneck ~ table td:nth-child(1){ --label:"Generation"; font-weight:900; font-size:1.12rem; }
  .pillar-body h2#bottleneck ~ table td:nth-child(2){ --label:"Max Channel Width"; }
  .pillar-body h2#bottleneck ~ table td:nth-child(3){ --label:"6 GHz Support"; padding-left:1.9rem; }
  .pillar-body h2#bottleneck ~ table td:nth-child(4){ --label:"Typical Throughput"; padding-bottom:2.1rem; }
  .pillar-body h2#bottleneck ~ table td:nth-child(5){ --label:"Latency"; }

  /* icons with fallback support */
  .pillar-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;
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(3){ color:#ef4444; }
  .pillar-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>');
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(3){ color:#f59e0b; }
  .pillar-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>');
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(3){ color:#10b981; }
  .pillar-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 */
  .pillar-body h2#bottleneck ~ table td:nth-child(4) span{ display:none; }
  .pillar-body h2#bottleneck ~ table td:nth-child(4){ --bar: 0%; --pct:"0%"; }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(4){ --bar: 55%; --pct:"55%"; --fill: linear-gradient(90deg,#ef4444,#f87171); }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(4){ --bar: 78%; --pct:"78%"; --fill: linear-gradient(90deg,#f59e0b,#fbbf24); }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(4){ --bar: 96%; --pct:"96%"; --fill: linear-gradient(90deg,var(--primary),var(--accent)); }

  .pillar-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;
  }
  .pillar-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,.35), transparent) 0 0 / 50% 100% no-repeat,
      var(--fill, linear-gradient(90deg,var(--primary),var(--accent))) 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:")) {
  .pillar-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;
  }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(1) td:nth-child(3)::after{ content: "✖"; }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(2) td:nth-child(3)::after{ content: "−"; }
  .pillar-body h2#bottleneck ~ table tbody tr:nth-child(3) td:nth-child(3)::after{ content: "✓"; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .pillar-body h2#bottleneck ~ table td:nth-child(4)::after{
    animation: none;
    background:
      var(--fill, linear-gradient(90deg,var(--primary),var(--accent))) 0 0 / var(--bar) 100% no-repeat,
      color-mix(in oklab, var(--text-muted) 12%, transparent);
  }
}

/* ---- Desktop placement notes ---- */
@media (min-width:901px){
  .breadcrumb{ grid-column: 1 / -1; }
  .pillar-hero{ grid-column: 1 / -1; }
  .pillar-body{ grid-column: 2 / -1; }
  .pillar-rail{ grid-column: 2 / -1; }
  .pillar-shell .newsletter{ grid-column: 2 / -1; }
}
}