/* GENERATED by scripts/build-blog-chrome.mjs. Do not edit. */
:root {
  --button-outline: rgba(0,0,0, .10);
  --badge-outline: rgba(0,0,0, .05);
  --opaque-button-border-intensity: -8;
  --elevate-1: rgba(0,0,0, .03);
  --elevate-2: rgba(0,0,0, .08);

  --background: 40 20% 97%;
  --foreground: 240 10% 10%;
  --border: 40 10% 85%;

  --card: 0 0% 100%;
  --card-foreground: 240 10% 10%;
  --card-border: 40 10% 85%;

  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 10%;
  --popover-border: 40 10% 85%;

  --primary: 15 95% 55%;
  --primary-foreground: 0 0% 100%;
  
  --secondary: 240 10% 15%;
  --secondary-foreground: 0 0% 100%;

  --muted: 40 10% 90%;
  --muted-foreground: 240 5% 40%;

  --accent: 45 93% 47%;
  --accent-foreground: 240 10% 10%;

  --destructive: 348 83% 53%;
  --destructive-foreground: 0 0% 100%;

  --input: 40 10% 80%;
  --ring: 15 95% 55%;

  --app-font-sans: 'Inter', sans-serif;
  --app-font-display: 'Bricolage Grotesque', sans-serif;
  --app-font-serif: Georgia, serif;
  --app-font-mono: 'IBM Plex Mono', monospace;
  
  --radius: 0.5rem;
  
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);

  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
}
/* src/styles/tokens.css */
/* PaintballGuns.net design tokens. Single source of truth */
:root {
  /* Brand */
  --brand-base: #0E1013;
  --brand-surface: #13161A;
  --brand-surface-2: #1A1D22;
  --brand-orange: #FF6A1A;
  --brand-blue:   #1FB6FF;
  --brand-green:  #B4F13B;
  --brand-yellow: #FFC91E;
  --brand-white:  #F4F4F5;

  /* Category accents. Apply via .cat-* classes */
  --cat-accent-gun:      var(--brand-orange);
  --cat-accent-mask:     var(--brand-blue);
  --cat-accent-hopper:   var(--brand-green);
  --cat-accent-tank:     var(--brand-yellow);
  --cat-accent-barrel:   #C084FC; /* light purple ONLY for barrel category accent */
  --cat-accent-paintball:var(--brand-green);
  --cat-accent-default:  var(--brand-orange);

  /* Aurora RGB triples (no # prefix, used in rgba() inside keyframes) */
  --aurora-rgb-gun:     255,106,26;
  --aurora-rgb-mask:    31,182,255;
  --aurora-rgb-hopper:  180,241,59;
  --aurora-rgb-tank:    255,201,30;
  --aurora-rgb-barrel:  192,132,252;
  --aurora-rgb-default: 255,106,26;

  /* Glows */
  --glow-orange: 0 0 20px rgba(255,106,26,.40), 0 0 60px rgba(255,106,26,.12);
  --glow-blue:   0 0 20px rgba(31,182,255,.40),  0 0 60px rgba(31,182,255,.12);
  --glow-green:  0 0 20px rgba(180,241,59,.40),  0 0 60px rgba(180,241,59,.12);
  --glow-yellow: 0 0 20px rgba(255,201,30,.40),  0 0 60px rgba(255,201,30,.12);
  --glow-sm-orange: 0 0 10px rgba(255,106,26,.35);
  --glow-sm-blue:   0 0 10px rgba(31,182,255,.35);
  --glow-sm-green:  0 0 10px rgba(180,241,59,.35);
  --glow-sm-yellow: 0 0 10px rgba(255,201,30,.35);

  /* Glass */
  --glass-bg:       rgba(255,255,255,.03);
  --glass-border:   1px solid rgba(255,255,255,.08);
  --glass-bg-md:    rgba(255,255,255,.05);
  --glass-bg-lg:    rgba(255,255,255,.07);

  /* Score ring */
  --score-high:  var(--brand-green);
  --score-mid:   var(--brand-yellow);
  --score-low:   var(--brand-orange);
  --score-track: rgba(255,255,255,.08);

  /* Type scale. Fluid, clamp-based */
  --text-2xs:  clamp(.625rem,  .5rem  + .3vw, .7rem);
  --text-xs:   clamp(.75rem,   .65rem + .3vw, .875rem);
  --text-sm:   clamp(.875rem,  .8rem  + .2vw, 1rem);
  --text-md:   clamp(1rem,     .9rem  + .3vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem   + .5vw, 1.375rem);
  --text-xl:   clamp(1.25rem,  1rem   + 1vw,  1.75rem);
  --text-2xl:  clamp(1.5rem,   1rem   + 2vw,  2.5rem);
  --text-3xl:  clamp(2rem,     1rem   + 4vw,  4rem);
  --text-stat: clamp(2.5rem,   2rem   + 3vw,  4.5rem);

  /* Spacing */
  --sp-1:2px; --sp-2:4px; --sp-3:8px; --sp-4:12px;
  --sp-6:16px; --sp-8:24px; --sp-10:32px; --sp-12:40px; --sp-16:56px;

  /* Radii */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:9999px;

  /* Transitions */
  --tx-fast:  150ms ease;
  --tx-card:  160ms cubic-bezier(.16,1,.3,1);
  --tx-slow:  400ms ease;

  /* SVG grain noise for glass panels */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* Public editorial tokens. Scoped so admin keeps its existing look. */
:root {
  --font-mono-plex: 'IBM Plex Mono', monospace;
  --font-display: var(--app-font-display);
}

/* Preserve the existing admin monospace face. */
.pb-admin {
  --app-font-mono: Menlo, monospace;
}

.pb-public {
  /* Ink ramp */
  --ink-900: 240 10% 10%;
  --ink-700: 240 6% 28%;
  --ink-500: 240 5% 38%;   /* 6.5:1 on white, 6.1:1 on page */
  --ink-300: 240 5% 72%;   /* decorative only */
  /* Surfaces */
  --page: 45 22.222% 96.471%;
  --surface: 0 0% 100%;
  --surface-sunken: 40 18% 94%;
  --hairline: 40 10% 85%;
  --line-strong: 40 8% 70%;
  /* Brand orange: decorative bright, strong for text and filled buttons */
  --primary-bright: 15 95% 55%;
  --primary-strong: 17 88% 40%;   /* 5.0:1 with white */
  --fill-strong: 17 88% 40%;      /* filled buttons, constant in every context */
  --fill-strong-hover: 17 88% 35%;
  /* Tiers: tinted bg plus AA text */
  --tier-budget-bg: 142 45% 93%;  --tier-budget-fg: 145 63% 22%;
  --tier-mid-bg: 210 70% 94%;     --tier-mid-fg: 212 70% 30%;
  --tier-high-bg: 24 90% 93%;     --tier-high-fg: 17 88% 32%;
  --tier-premium-bg: 268 60% 95%; --tier-premium-fg: 268 50% 36%;
  /* Shapes */
  --r-chip: 6px; --r-input: 10px; --r-tile: 10px; --r-card: 14px; --r-feature: 20px;
  /* Shadows, warm ink 17 17 20 */
  --shadow-1: 0 0 0 1px rgb(17 17 20 / .06), 0 1px 2px rgb(17 17 20 / .06);
  --shadow-2: 0 1px 2px rgb(17 17 20 / .05), 0 8px 24px rgb(17 17 20 / .08);
  --shadow-3: 0 2px 6px rgb(17 17 20 / .08), 0 16px 40px rgb(17 17 20 / .14);
  --shadow-offset: 4px 4px 0 hsl(var(--ink-900));
  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 280ms;
  /* Controls (step 2 shared components) */
  --ctl-sm: 32px; --ctl-md: 40px; --ctl-lg: 48px; --ctl-input: 44px;
  --icon-sm: 16px; --icon-faq: 20px;
  --on-fill: 0 0% 100%;
  /* Fixed: never flipped by .pb-on-dark */
  --fill-white-fixed: 0 0% 100%;
  --ink-dark-fixed: 240 6% 10%;
  --hover-darken: brightness(.94);
  --ring-soft: 0 0 0 3px hsl(var(--primary-bright) / .28);
  --shadow-feature: 2px 2px 0 hsl(var(--ink-900) / .2);
  --r-pop: 10px;
  --disabled-opacity: .45;
  --dur-shimmer: 1400ms;

  /* Remap shared shadcn tokens for public only so existing utilities pass AA */
  --foreground: var(--ink-900);
  --muted-foreground: var(--ink-500);
  --primary: var(--primary-strong);
  --ring: var(--primary-strong);
  --border: var(--hairline);
}

/* Semantic tones (text AA on page and sunken, tinted bg for chips) */
.pb-public {
  --tone-positive: 145 63% 24%;  --tone-positive-bg: 142 45% 93%;
  --tone-negative: 0 70% 38%;    --tone-negative-bg: 0 80% 96%;
  --tone-caution: 30 90% 28%;    --tone-caution-bg: 40 95% 92%;
  --tone-info: 212 70% 32%;      --tone-info-bg: 210 70% 94%;
}
/* Explicit dark context. Lighter tones and inks so text stays AA on brand-base */
.pb-public .pb-on-dark {
  --ink-900: 240 5% 96%;
  --ink-700: 240 5% 82%;
  --ink-500: 240 4% 70%;
  --ink-300: 240 4% 40%;
  --hairline: 220 10% 20%;
  --foreground: var(--ink-900);
  --muted-foreground: var(--ink-500);
  --primary-strong: 20 100% 60%;  /* text accent on brand-base */
  --primary: var(--fill-strong);   /* bg-primary fills keep white text AA */
  --ring: 0 0% 98%;
  --tone-positive: 84 80% 60%;
  --tone-negative: 0 90% 72%;
  --tone-caution: 45 100% 60%;
  --tone-info: 200 100% 65%;
}

/* Layout and dark-level tokens (step 3 chrome) */
.pb-public {
  --wrap-wide: 1280px; --wrap-standard: 1120px; --wrap-reading: 720px;
  --gutter: 16px; --section-y: 64px; --page-top: 48px;
  --header-h: 64px;
  /* Dark levels, white on brand-base. 60% clears 4.5:1 on #0E1013 */
  --on-dark-1: 0 0% 100% / .92;
  --on-dark-2: 0 0% 100% / .72;
  --on-dark-3: 0 0% 100% / .60;
  --on-dark-line: 0 0% 100% / .10;
}
@media (min-width: 768px) { .pb-public { --gutter: 24px; } }
@media (min-width: 1024px) { .pb-public { --gutter: 32px; --section-y: 96px; } }

/* Brand logo tiles (step 5b). Reusable across nav, footer, hero, gun pages. */
.pb-public {
  --logo-tile-light-bg: 0 0% 100%;
  --logo-tile-light-line: var(--hairline);
  --logo-tile-dark-bg: 210 13% 10%;          /* near #16191D */
  --logo-tile-dark-line: 0 0% 100% / .10;
  --logo-tile-line-strong: var(--line-strong);
  --logo-tile-radius: 10px;
  --logo-tile-lift: -1px;
  --logo-ink-opacity: .86;
  --logo-inverse-opacity: .92;
  --logo-fallback-font: var(--app-font-display);
}

/* src/styles/public.css */
/* Public editorial system. Scoped to .pb-public (SPA shell for non admin
   routes and the prerendered static body). Admin routes never get this class. */

.pb-public {
  font-feature-settings: "cv05" 1;
  accent-color: hsl(var(--primary-strong));
  caret-color: hsl(var(--primary-strong));
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--line-strong)) transparent;
}

html:has(.pb-public) { scroll-behavior: smooth; scroll-padding-top: 120px; }

.pb-public .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; }

@layer base {
  .pb-public ::selection { background: hsl(24 100% 88%); color: hsl(var(--ink-900)); }
  .pb-public :focus-visible {
    outline: 2px solid hsl(var(--primary-strong));
    outline-offset: 2px;
  }
  .pb-public .dark :focus-visible, .pb-public [data-surface="dark"] :focus-visible { outline-color: hsl(0 0% 98%); }
  .pb-public :target, .pb-public [id] { scroll-margin-top: 120px; }
  .pb-public :where(h1,h2,h3,h4) { text-wrap: balance; line-height: 1.1; }
  .pb-public :where(p,li) { text-wrap: pretty; }
  .pb-public :where(img,video) { max-width: 100%; height: auto; }
  .js-ready .pb-public :where(img[loading="lazy"]:not([data-loaded])) { background: hsl(var(--surface-sunken)); }
  .pb-public :where(hr) { border: 0; border-top: 1px solid hsl(var(--hairline)); margin: 2rem 0; }
  .pb-public :where(kbd) {
    font: 500 .8em var(--font-mono-plex); padding: .1em .4em; border-radius: var(--r-chip);
    border: 1px solid hsl(var(--line-strong)); border-bottom-width: 2px; background: hsl(var(--surface-sunken));
  }
  .pb-public :where(code):not(pre code) {
    font: 500 .88em var(--font-mono-plex); padding: .1em .35em; border-radius: var(--r-chip);
    background: hsl(var(--surface-sunken)); color: hsl(var(--ink-900));
  }
  .pb-public :where(abbr[title], .glossary-term) {
    text-decoration: underline dotted hsl(var(--ink-300)); text-underline-offset: .2em; cursor: help;
  }
  .pb-public :where(table) { font-variant-numeric: tabular-nums; }
  .pb-public ::-webkit-scrollbar { width: 10px; height: 10px; }
  .pb-public ::-webkit-scrollbar-thumb { background: hsl(var(--line-strong)); border-radius: 9999px; border: 3px solid transparent; background-clip: content-box; }
}

@layer components {
  /* Skip link */
  .pb-skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 1000;
    padding: .6rem 1.1rem; border-radius: 9999px;
    background: hsl(var(--ink-900)); color: hsl(0 0% 98%);
    font: 600 14px var(--app-font-sans); box-shadow: var(--shadow-3);
    transform: translateY(-160%); opacity: 0;
  }
  .pb-skip-link:focus, .pb-skip-link:focus-visible { transform: none; opacity: 1; outline-color: hsl(0 0% 98%); }

  /* Type roles */
  .pb-public .t-display-xl { font: 800 clamp(2.5rem, 1.6rem + 4vw, 4.5rem)/1.05 var(--app-font-display); letter-spacing: -.02em; text-wrap: balance; }
  .pb-public .t-display-l  { font: 800 clamp(2rem, 1.4rem + 2.6vw, 3.25rem)/1.08 var(--app-font-display); letter-spacing: -.02em; text-wrap: balance; }
  .pb-public .t-section    { font: 800 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.1 var(--app-font-display); letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
  .pb-public .t-card       { font: 700 clamp(1.125rem, 1rem + .4vw, 1.25rem)/1.15 var(--app-font-display); }
  .pb-public .t-lead       { font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem); line-height: 1.55; color: hsl(var(--ink-700)); }
  .pb-public .t-body       { font-size: 1rem; line-height: 1.6; }
  .pb-public .t-small      { font-size: .875rem; line-height: 1.5; }
  .pb-public .t-caption    { font-size: clamp(.75rem, .72rem + .1vw, .8125rem); line-height: 1.45; color: hsl(var(--ink-500)); }
  .pb-public .t-eyebrow    { font: 500 11px/1.3 var(--font-mono-plex); text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--ink-500)); }
  .pb-public .t-eyebrow--strong { color: hsl(var(--primary-strong)); }
  .pb-public .t-label      { font: 600 12px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }
  .pb-public .t-stat       { font-family: 'Barlow Condensed', var(--app-font-display), sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
  .pb-public .t-num, .pb-public .font-stat, .pb-public .mono-num, .pb-public .stat-num { font-variant-numeric: tabular-nums; }

  /* CTA link with trailing arrow */
  .pb-public .pb-cta { color: hsl(var(--primary-strong)); font-weight: 600; display: inline-flex; align-items: center; gap: .35em; }
  .pb-public .pb-cta::after { content: "\2192"; transition: transform var(--dur-2) var(--ease); }
  .pb-public .pb-cta:hover::after { transform: translateX(2px); }

  /* Tier and status chips */
  .pb-public .tier-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-chip); font: 600 12px/1.5 var(--app-font-sans); }
  .pb-public .tier-budget  { background: hsl(var(--tier-budget-bg));  color: hsl(var(--tier-budget-fg)); }
  .pb-public .tier-mid     { background: hsl(var(--tier-mid-bg));     color: hsl(var(--tier-mid-fg)); }
  .pb-public .tier-high-end{ background: hsl(var(--tier-high-bg));    color: hsl(var(--tier-high-fg)); }
  .pb-public .tier-premium { background: hsl(var(--tier-premium-bg)); color: hsl(var(--tier-premium-fg)); }
  .pb-public .status-discontinued { background: hsl(var(--surface-sunken)); color: hsl(var(--ink-700)); }
  .pb-public .status-legacy { color: hsl(var(--ink-700)); border: 1px dashed hsl(var(--line-strong)); }

  /* Surfaces */
  .pb-public .pb-sunken { background: hsl(var(--surface-sunken)); }
}

/* Public overrides of legacy shared classes (motion and AA) */
.pb-public .card-lift { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.pb-public .card-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pb-public .card-lift:active { transform: translateY(1px); }
.pb-public .card-lift:hover .card-img { transform: scale(1.02); }
.pb-public .funnel-card:hover { transform: translateY(-2px); }
.pb-public [class*="cat-"]:hover { box-shadow: var(--shadow-2); }
.pb-public .spec-datasheet th { color: hsl(var(--ink-500)) !important; font-size: 11px !important; }
.pb-public .spec-datasheet td { color: hsl(var(--ink-900)) !important; font-variant-numeric: tabular-nums; }
.pb-public .spec-part-code { color: hsl(var(--ink-500)); font-size: 11px; }
.pb-public .insight-pullquote p { color: hsl(var(--ink-700)); }
.pb-public .insight-pullquote cite { color: hsl(var(--primary-strong)); }
.pb-public .retro-chip { font-size: 11px; }

/* Static prerender body: give crawler/no-JS markup the same roles */
.pb-static main { display: block; max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; font: 400 1rem/1.6 var(--app-font-sans); color: hsl(var(--ink-900)); }
.pb-static main > nav:first-child { font: 500 11px/1.4 var(--font-mono-plex); text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--ink-500)); margin-bottom: 1rem; }
.pb-static main h1 { font: 800 clamp(2rem, 1.4rem + 2.6vw, 3.25rem)/1.08 var(--app-font-display); letter-spacing: -.02em; margin: 0 0 1rem; }
.pb-static main h2 { font: 700 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.15 var(--app-font-display); margin: 2rem 0 .75rem; }
.pb-static main h3 { font: 700 1.125rem/1.2 var(--app-font-display); margin: 1.5rem 0 .5rem; }
.pb-static main ul { padding-left: 1.25rem; list-style: disc; }
.pb-static main table { width: 100%; border-collapse: collapse; }
.pb-static main :where(th,td) { padding: .5rem .75rem; border-bottom: 1px solid hsl(var(--hairline)); text-align: left; }
.pb-static main img { border-radius: var(--r-card); }

@media (prefers-reduced-motion: reduce) {
  html:has(.pb-public) { scroll-behavior: auto; }
  .pb-public *, .pb-public *::before, .pb-public *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
  .pb-public .card-lift:hover, .pb-public .card-lift:active, .pb-public .funnel-card:hover,
  .pb-public .pb-cta:hover::after, .pb-public .card-lift:hover .card-img { transform: none; }
  .pb-public .hero-media { animation: none !important; transform: none !important; }
}

@layer components {
  .pb-public .tone-positive { color: hsl(var(--tone-positive)); }
  .pb-public .tone-negative { color: hsl(var(--tone-negative)); }
  .pb-public .tone-caution  { color: hsl(var(--tone-caution)); }
  .pb-public .tone-info     { color: hsl(var(--tone-info)); }
  .pb-public .tone-accent   { color: hsl(var(--primary-strong)); }
  .pb-public .chip-positive { background: hsl(var(--tone-positive-bg)); color: hsl(var(--tone-positive)); border-color: transparent; }
  .pb-public .chip-negative { background: hsl(var(--tone-negative-bg)); color: hsl(var(--tone-negative)); border-color: transparent; }
  .pb-public .chip-caution  { background: hsl(var(--tone-caution-bg));  color: hsl(var(--tone-caution));  border-color: transparent; }
  .pb-public .chip-info     { background: hsl(var(--tone-info-bg));     color: hsl(var(--tone-info));     border-color: transparent; }
  .pb-on-dark { color: hsl(var(--ink-900)); }
  .pb-on-dark :focus-visible { outline-color: hsl(0 0% 98%); }

  /* Glossary chips: dotted ink-300 underline, CSS tooltip on hover and focus */
  .pb-public abbr.gloss {
    position: relative;
    border-bottom: 0;
    color: inherit;
    text-decoration: underline dotted hsl(var(--ink-300));
    text-decoration-thickness: 1.5px;
    text-underline-offset: .2em;
    border-radius: 2px;
  }
  .pb-public abbr.gloss:hover { color: inherit; text-decoration-color: hsl(var(--primary-strong)); }
  .pb-public abbr.gloss[data-gloss]::after {
    content: attr(data-gloss);
    position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 50;
    width: max-content; max-width: min(18rem, 80vw);
    padding: .5rem .7rem; border-radius: var(--r-input);
    background: hsl(240 10% 10%); color: hsl(0 0% 97%);
    font: 400 13px/1.45 var(--app-font-sans); letter-spacing: 0; text-transform: none; white-space: normal;
    box-shadow: var(--shadow-3);
    opacity: 0; pointer-events: none; transform: translateY(2px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .pb-public abbr.gloss:hover::after, .pb-public abbr.gloss:focus-visible::after { opacity: 1; transform: none; }
}

/* Long-form prose. Unlayered so it wins over @tailwindcss/typography. */

.pb-prose :where(h2,h3,h4) { font-family: var(--app-font-display); font-weight: 700; letter-spacing: -.01em; text-transform: none; }
.pb-prose :where(p,ul,ol), .pb-static main :where(p,ul,ol) { max-width: 68ch; }
.pb-prose :where(table,figure,.callout,.grid), .pb-static main :where(table,figure) { max-width: none; }
.pb-prose :where(p,li) a:not([class]), .pb-static main :where(p,li) a {
  color: hsl(var(--ink-900));
  text-decoration: underline 1px hsl(var(--primary-bright));
  text-underline-offset: .18em;
  transition: text-decoration-thickness var(--dur-1) var(--ease);
}
.pb-prose :where(p,li) a:not([class]):hover, .pb-static main :where(p,li) a:hover { text-decoration-thickness: 2px; }

/* Shapes, depth and controls. Unlayered and scoped so they win over utility
   radii on public pages while the shared ui primitives stay untouched for admin. */
/* Radius, hairline width and depth only, so utility hover border colors still apply */
.pb-public .pb-card {
  border-width: 1px;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.pb-public a.pb-card:hover, .pb-public .group.pb-card:hover { box-shadow: var(--shadow-2); }
.pb-public .pb-card--raised { box-shadow: var(--shadow-2); }
.pb-public .pb-feature {
  border-width: 1px;
  border-color: hsl(var(--ink-900));
  border-radius: var(--r-feature);
  box-shadow: var(--shadow-offset);
}
.pb-public .pb-tile { border-radius: var(--r-tile); }
.pb-public :is([role="menu"], [role="listbox"], [data-radix-popper-content-wrapper] > *) { box-shadow: var(--shadow-3); }

/* Shared Button (buttonVariants signature) becomes a pill on public pages */
.pb-public .hover-elevate.active-elevate-2.whitespace-nowrap:not(.rounded-none) { border-radius: 9999px; }
.pb-public :is(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select, [role="combobox"]) {
  border-radius: var(--r-input);
}
.pb-public .pb-filter { border-radius: 9999px; }

/* Standalone public buttons live in components.css */

/* Dark context: filled controls keep the strong fill, text accents go light */
.pb-public .pb-on-dark .text-primary { color: hsl(var(--primary-strong)); }
.pb-public .pb-on-dark :focus-visible { outline-color: hsl(0 0% 98%); }


/* CTA links that already carry an icon keep it; no doubled arrow */
.pb-public .pb-cta:has(svg)::after { content: none; }
.pb-public .pb-cta svg { transition: transform var(--dur-2) var(--ease); }
.pb-public .pb-cta:hover svg { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .pb-public .pb-cta:hover svg { transform: none; }
}

/* Static parity for hub and home markup. Semantic selectors map the existing
   prerender structure onto the same roles, shapes and depth as the SPA. Layout
   is simpler than the SPA; typography, tokens, chips and surfaces match. */
.pb-static main section[id] > h2,
.pb-static main section.category-hub-hero ~ section > h2 {
  font: 800 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.1 var(--app-font-display);
  letter-spacing: -.02em; text-transform: uppercase;
}
.pb-static .category-hub-hero h1 { font: 800 clamp(2.5rem, 1.6rem + 4vw, 4.5rem)/1.05 var(--app-font-display); letter-spacing: -.02em; text-transform: none; }
.pb-static .hub-stats dt { font: 500 11px/1.3 var(--font-mono-plex); text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--ink-500)); }
.pb-static .hub-stats dd { font-family: 'Barlow Condensed', var(--app-font-display), sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 2rem; line-height: 1; }
.pb-static :is(.hub-gun-card, .hub-type-cards article, details.faq-native) {
  background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline));
  border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: 1rem;
}
.pb-static :is(.hub-gun-card, .hub-type-cards article) h3 { font: 700 clamp(1.125rem, 1rem + .4vw, 1.25rem)/1.15 var(--app-font-display); }
.pb-static .hub-card-chips span { display: inline-flex; padding: 2px 8px; border-radius: var(--r-chip); font: 600 12px/1.5 var(--app-font-sans); margin-right: .35rem; }
.pb-static main :where(dd, td, .t-num) { font-variant-numeric: tabular-nums; }
.pb-static main figure img { background: hsl(var(--surface)); }
.pb-static main figcaption { font-size: .8125rem; color: hsl(var(--ink-500)); margin-top: .4rem; }
.pb-static main :where(input, select, textarea) { border-radius: var(--r-input); }

/* Shared product card sets an inline 3px hover lift; cap it at 2px on public pages */
.pb-public .product-card:hover { transform: translateY(-2px) !important; }
.pb-public .product-card:active { transform: translateY(1px) !important; }
.pb-public :focus-visible {
  outline: 2px solid hsl(var(--primary-strong)) !important;
  outline-offset: 2px !important;
}
.pb-public :is(.pb-on-dark, .dark, [data-surface="dark"]) :focus-visible {
  outline-color: white !important;
}
@media (prefers-reduced-motion: reduce) {
  .pb-public *, .pb-public *::before, .pb-public *::after {
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    scroll-behavior: auto !important;
  }
  .pb-public .product-card, .pb-public .product-card:hover, .pb-public .product-card:active { transform: none !important; }
}

/* src/styles/components.css */
/* Shared public components (step 2). Scoped to .pb-public, unlayered so the
   roles win over utilities. Every value comes from tokens.css. Admin untouched. */

/* 1. Buttons ---------------------------------------------------------- */
.pb-public .pb-btn {
  --btn-h: var(--ctl-md);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: var(--btn-h); padding: 0 calc(var(--btn-h) * .45);
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  font: 600 14px/1.2 var(--app-font-sans); letter-spacing: 0; text-transform: none;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: transform var(--dur-1) var(--ease), filter var(--dur-1) var(--ease),
    background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.pb-public .pb-btn svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.pb-public .pb-btn--sm { --btn-h: var(--ctl-sm); font-size: 13px; }
.pb-public .pb-btn--md { --btn-h: var(--ctl-md); }
.pb-public .pb-btn--lg { --btn-h: var(--ctl-lg); font-size: 15px; }
.pb-public .pb-btn--block { width: 100%; }
.pb-public .pb-btn:hover { filter: var(--hover-darken); }
.pb-public .pb-btn:active { transform: translateY(1px); }
.pb-public .pb-btn:is(:disabled, [aria-disabled="true"]) {
  opacity: var(--disabled-opacity); cursor: not-allowed; filter: none; transform: none;
}
.pb-public .pb-btn-primary { background: hsl(var(--fill-strong)); color: hsl(var(--on-fill)); }
.pb-public .pb-btn-secondary { background: hsl(var(--surface)); color: hsl(var(--ink-900)); border-color: hsl(var(--line-strong)); }
.pb-public .pb-btn-dark { background: hsl(var(--ink-900)); color: hsl(var(--surface)); }
/* Inverse: on dark heroes. White fill, dark ink, both fixed tokens so
   .pb-on-dark cannot flip them. */
.pb-public .pb-btn-inverse, .pb-public .pb-btn-ghost-dark {
  background: hsl(var(--fill-white-fixed)); color: hsl(var(--ink-dark-fixed)); border-color: hsl(var(--fill-white-fixed));
}
.pb-public .pb-btn-ghost { background: transparent; color: hsl(var(--ink-900)); }
.pb-public .pb-btn-ghost:hover { background: hsl(var(--surface-sunken)); filter: none; }
.pb-public .pb-btn-link {
  min-height: auto; padding: 0; background: none; border: 0; color: hsl(var(--primary-strong));
  text-decoration: underline 1px transparent; text-underline-offset: .2em;
}
.pb-public .pb-btn-link:hover { filter: none; text-decoration-color: currentColor; }
.pb-public .pb-btn-arrow { transition: transform var(--dur-2) var(--ease); }
.pb-public .pb-btn:hover .pb-btn-arrow { transform: translateX(2px); }
.pb-public .pb-btn--desktop { display: none; }
@media (min-width: 1024px) {
  .pb-public .pb-btn--desktop { display: inline-flex; }
  .pb-public .pb-btn--mobile { display: none; }
}

/* 2. Badges ----------------------------------------------------------- */
.pb-public .pb-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 22px; padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--r-pill);
  font: 600 11.5px/1 var(--app-font-sans); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  background: hsl(var(--surface-sunken)); color: hsl(var(--ink-700));
}
.pb-public .pb-badge--lg { height: 24px; }
.pb-public .pb-badge--primary { background: hsl(var(--tier-high-bg)); color: hsl(var(--primary-strong)); }
.pb-public .pb-badge--budget { background: hsl(var(--tier-budget-bg)); color: hsl(var(--tier-budget-fg)); }
.pb-public .pb-badge--mid { background: hsl(var(--tier-mid-bg)); color: hsl(var(--tier-mid-fg)); }
.pb-public .pb-badge--high { background: hsl(var(--tier-high-bg)); color: hsl(var(--tier-high-fg)); }
.pb-public .pb-badge--premium { background: hsl(var(--tier-premium-bg)); color: hsl(var(--tier-premium-fg)); }
.pb-public .pb-badge--dashed { background: transparent; border: 1px dashed hsl(var(--line-strong)); color: hsl(var(--ink-700)); }
.pb-public .pb-badge--quiet { background: transparent; border-color: hsl(var(--hairline)); color: hsl(var(--ink-500)); }
.pb-public .pb-badge--positive { background: hsl(var(--tone-positive-bg)); color: hsl(var(--tone-positive)); }
.pb-public .pb-badge--negative { background: hsl(var(--tone-negative) / .1); color: hsl(var(--tone-negative)); }
.pb-public .pb-badge--caution { background: hsl(var(--tone-caution-bg)); color: hsl(var(--tone-caution)); }

/* Toggle filter pill */
.pb-public .pb-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--ctl-sm); padding: 0 var(--sp-4);
  border: 1px solid hsl(var(--hairline)); border-radius: var(--r-pill);
  background: hsl(var(--surface)); color: hsl(var(--ink-700));
  font: 600 13px/1 var(--app-font-sans); white-space: nowrap; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.pb-public .pb-pill:hover { border-color: hsl(var(--line-strong)); }
.pb-public .pb-pill svg { width: 14px; height: 14px; }
.pb-public .pb-pill[aria-pressed="true"] { background: hsl(var(--fill-strong)); border-color: hsl(var(--fill-strong)); color: hsl(var(--on-fill)); }
.pb-public .pb-pill-count { font-variant-numeric: tabular-nums; color: hsl(var(--ink-500)); font-weight: 500; }
.pb-public .pb-pill[aria-pressed="true"] .pb-pill-count { color: hsl(var(--on-fill) / .8); }

/* Filter rows: label column sized to the longest label */
.pb-public .pb-filter-grid {
  display: grid; grid-template-columns: max-content 1fr; column-gap: var(--sp-6); row-gap: var(--sp-4); align-items: start;
}
.pb-public .pb-filter-grid > .pb-filter-label { padding-top: 8px; }
.pb-public .pb-filter-label { font: 600 12px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); white-space: nowrap; }
.pb-public .pb-filter-options { display: flex; flex-wrap: wrap; gap: var(--sp-3); min-width: 0; }
@media (max-width: 640px) {
  .pb-public .pb-filter-grid { grid-template-columns: 1fr; row-gap: var(--sp-3); }
  .pb-public .pb-filter-grid > .pb-filter-label { padding-top: var(--sp-3); }
}

/* 3. Inputs ----------------------------------------------------------- */
.pb-public .pb-field { display: grid; gap: var(--sp-2); }
.pb-public .pb-field-label { font: 600 13px/1.3 var(--app-font-sans); color: hsl(var(--ink-700)); }
.pb-public .pb-control { position: relative; display: flex; align-items: center; }
.pb-public .pb-control > svg, .pb-public .pb-control-prefix {
  position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%);
  width: var(--icon-sm); height: var(--icon-sm); color: hsl(var(--ink-500)); pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center; font: 500 14px/1 var(--app-font-sans);
}
.pb-public :is(.pb-input, .pb-select) {
  width: 100%; height: var(--ctl-input); padding: 0 var(--sp-4);
  border: 1px solid hsl(var(--line-strong)); border-radius: var(--r-input);
  background-color: hsl(var(--surface)); color: hsl(var(--ink-900));
  font: 400 15px/1.2 var(--app-font-sans);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.pb-public :is(.pb-input, .pb-select).pb-compact { height: var(--ctl-md); font-size: 14px; }
.pb-public .pb-control > svg ~ .pb-input,
.pb-public .pb-control-prefix ~ .pb-input { padding-left: calc(var(--sp-4) + var(--icon-sm) + var(--sp-3)); }
.pb-public .pb-input::placeholder { color: hsl(var(--ink-500)); }
.pb-public :is(.pb-input, .pb-select):focus,
.pb-public :is(.pb-input, .pb-select):focus-visible {
  outline: none !important; border-color: hsl(var(--primary-strong)); box-shadow: var(--ring-soft);
}
.pb-public :is(.pb-input, .pb-select)[aria-invalid="true"] { border-color: hsl(var(--tone-negative)); }
.pb-public .pb-input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 40px hsl(var(--surface)); -webkit-text-fill-color: hsl(var(--ink-900)); }
.pb-public .pb-select {
  appearance: none; padding-right: calc(var(--sp-4) * 2 + 10px); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, hsl(var(--ink-500)) 50%), linear-gradient(135deg, hsl(var(--ink-500)) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.pb-public .pb-field-msg { font: 400 13px/1.4 var(--app-font-sans); color: hsl(var(--ink-500)); }
.pb-public .pb-field-msg--error { color: hsl(var(--tone-negative)); }
.pb-public .pb-field-msg--success { color: hsl(var(--tone-positive)); }

/* Header search: sunken pill, slash hint, clear button */
.pb-public .pb-search .pb-input {
  border-radius: var(--r-pill); background-color: hsl(var(--surface-sunken)); border-color: transparent; padding-right: 40px;
}
.pb-public .pb-search .pb-input:focus { background-color: hsl(var(--surface)); }
.pb-public .pb-search .pb-input::-webkit-search-cancel-button { appearance: none; }
.pb-public .pb-search-hint, .pb-public .pb-search-clear {
  position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%);
}
.pb-public .pb-search-hint {
  min-width: 20px; height: 20px; display: inline-grid; place-items: center; pointer-events: none;
  border: 1px solid hsl(var(--line-strong)); border-radius: var(--r-chip);
  font: 500 11px/1 var(--font-mono-plex); color: hsl(var(--ink-500)); background: hsl(var(--surface));
}
.pb-public .pb-search-clear {
  width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: var(--r-pill);
  color: hsl(var(--ink-500)); background: transparent; cursor: pointer;
}
.pb-public .pb-search-clear:hover { background: hsl(var(--hairline)); color: hsl(var(--ink-900)); }
.pb-public .pb-search-clear svg { width: 14px; height: 14px; }

/* 4. Gun card --------------------------------------------------------- */
.pb-public .pb-gun-card {
  display: flex; flex-direction: column; overflow: hidden; height: 100%;
  background: hsl(var(--surface)); color: hsl(var(--ink-900));
  border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.pb-public .pb-gun-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: hsl(var(--line-strong)); }
.pb-public .pb-gun-card--feature { border-color: hsl(var(--ink-900) / .2); box-shadow: var(--shadow-feature); }
.pb-public .pb-gun-card-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; padding: var(--sp-6);
  background: hsl(var(--surface)); border-bottom: 1px solid hsl(var(--hairline));
  display: flex; align-items: center; justify-content: center;
}
.pb-public .pb-gun-card-media img {
  width: 100%; height: 100%; object-fit: contain; background: transparent;
  transition: transform var(--dur-3) var(--ease);
}
.pb-public .pb-gun-card:hover .pb-gun-card-media img { transform: scale(1.03); }
.pb-public .pb-gun-card-media-overlay { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 1; }
.pb-public .pb-gun-card-body { display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); padding: var(--sp-6); }
.pb-public .pb-gun-card-brand { font: 500 11px/1.3 var(--font-mono-plex); text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--ink-500)); }
.pb-public .pb-gun-card-title { font: 700 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.2 var(--app-font-display); color: hsl(var(--ink-900)); margin: 0; }
.pb-public .pb-gun-card-desc {
  font-size: 14px; line-height: 1.5; color: hsl(var(--ink-700)); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pb-public .pb-gun-card-spec { font-size: 12px; color: hsl(var(--ink-500)); margin: 0; }
.pb-public .pb-chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pb-public .pb-gun-card-foot {
  margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid hsl(var(--hairline));
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.pb-public .pb-price { font: 700 15px/1.2 var(--app-font-sans); font-variant-numeric: tabular-nums; color: hsl(var(--ink-900)); display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pb-public .pb-price--empty { font-weight: 500; color: hsl(var(--ink-500)); }
.pb-public .pb-gun-card-cta { font: 600 13px/1 var(--app-font-sans); color: hsl(var(--primary-strong)); display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.pb-public .pb-gun-card-cta svg { width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease); }
.pb-public .pb-gun-card:hover .pb-gun-card-cta svg { transform: translateX(2px); }

/* Failed image */
.pb-public .pb-photo-fallback {
  width: 100%; height: 100%; display: grid; place-items: center; text-align: center;
  background: hsl(var(--surface-sunken)); border-radius: var(--r-tile);
  font: 500 11px/1.3 var(--font-mono-plex); text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--ink-500));
}

/* 6. FAQ (SPA and prerender share the class) ------------------------- */
.pb-public details.faq-native {
  background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card);
  box-shadow: none; padding: 0; margin: 0 0 var(--sp-3); overflow: hidden;
  transition: border-color var(--dur-2) var(--ease);
}
.pb-public details.faq-native[open] { border-color: hsl(var(--primary-strong)); }
.pb-public details.faq-native > summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8); background: transparent; border-radius: 0;
  font: 700 16px/1.35 var(--app-font-display); color: hsl(var(--ink-900));
}
.pb-public details.faq-native > summary::-webkit-details-marker { display: none; }
.pb-public details.faq-native > summary::marker { content: ""; }
.pb-public .faq-plus { flex: none; width: var(--icon-faq); height: var(--icon-faq); margin-top: calc((1.35em - var(--icon-faq)) / 2); margin-left: auto; color: hsl(var(--primary-strong)); transition: transform var(--dur-2) var(--ease); }
/* One icon only: the inline SVG. No pseudo-element plus marks anywhere. */
.pb-public details.faq-native > summary::before,
.pb-public details.faq-native > summary::after { content: none !important; display: none !important; }
.pb-public details.faq-native[open] > summary .faq-plus { transform: rotate(45deg); }
.pb-public details.faq-native > :not(summary) {
  padding: 0 var(--sp-8) var(--sp-8); color: hsl(var(--ink-700)); max-width: 68ch; line-height: 1.6;
}
@supports (interpolate-size: allow-keywords) {
  .pb-public details.faq-native { interpolate-size: allow-keywords; }
  .pb-public details.faq-native::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-3) var(--ease), content-visibility var(--dur-3) allow-discrete; }
  .pb-public details.faq-native[open]::details-content { block-size: auto; }
}

/* 7. Specs and compare ------------------------------------------------ */
.pb-public .pb-specs { width: 100%; border-collapse: collapse; }
.pb-public .pb-specs :is(th, td) { padding: var(--sp-4) 0; border-bottom: 1px solid hsl(var(--hairline)); text-align: left; vertical-align: top; }
.pb-public .pb-specs th { width: 38%; padding-right: var(--sp-6); font: 600 12px/1.4 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }
.pb-public .pb-specs td { font: 500 15px/1.45 var(--app-font-sans); font-variant-numeric: tabular-nums; color: hsl(var(--ink-900)); overflow-wrap: anywhere; }
.pb-public .pb-specs td code, .pb-public .pb-specs .spec-part-code { font-family: var(--app-font-sans); white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pb-public .pb-specs tr { display: block; padding: var(--sp-4) 0; border-bottom: 1px solid hsl(var(--hairline)); }
  .pb-public .pb-specs :is(th, td) { display: block; width: auto; padding: 0; border: 0; }
  .pb-public .pb-specs th { margin-bottom: var(--sp-2); }
}
.pb-public .pb-compare-wrap { overflow: auto; max-height: 80vh; border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); }
.pb-public .pb-compare { border-collapse: separate; border-spacing: 0; min-width: 100%; background: hsl(var(--surface)); }
.pb-public .pb-compare :is(th, td) { padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid hsl(var(--hairline)); text-align: left; font-variant-numeric: tabular-nums; }
.pb-public .pb-compare thead th { position: sticky; top: 0; z-index: 2; background: hsl(var(--surface)); font: 700 14px/1.3 var(--app-font-display); }
.pb-public .pb-compare tbody th { position: sticky; left: 0; z-index: 1; background: inherit; font: 600 12px/1.4 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }
.pb-public .pb-compare thead th:first-child { left: 0; z-index: 3; }
.pb-public .pb-compare tbody tr { background: hsl(var(--surface)); }
.pb-public .pb-compare tbody tr:nth-child(even) { background: color-mix(in srgb, hsl(var(--surface-sunken)) 50%, hsl(var(--surface))); }
.pb-public .pb-compare .is-best { color: hsl(var(--tone-positive)); font-weight: 700; }
.pb-public .pb-compare .is-best svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: var(--sp-2); }

/* 8. Breadcrumbs ------------------------------------------------------ */
.pb-public .pb-crumbs { font: 400 13px/1.4 var(--app-font-sans); color: hsl(var(--ink-500)); }
.pb-public .pb-crumbs > a { color: hsl(var(--ink-500)); }
.pb-public .pb-crumbs > a:hover { color: hsl(var(--ink-900)); }
.pb-public .pb-crumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; font: 400 13px/1.4 var(--app-font-sans); color: hsl(var(--ink-500)); }
.pb-public .pb-crumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.pb-public .pb-crumbs a { color: hsl(var(--ink-500)); text-decoration: underline 1px transparent; text-underline-offset: .2em; transition: text-decoration-color var(--dur-1) var(--ease); }
.pb-public .pb-crumbs a:hover { text-decoration-color: currentColor; }
.pb-public .pb-crumbs svg { width: 12px; height: 12px; color: hsl(var(--ink-300)); flex: none; }
.pb-public .pb-crumbs [aria-current="page"] { color: hsl(var(--ink-900)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-public .pb-crumbs-ellipsis { display: none; }
@media (max-width: 640px) {
  .pb-public .pb-crumbs ol { flex-wrap: nowrap; }
  .pb-public .pb-crumbs li.is-middle { display: none; }
  .pb-public .pb-crumbs-ellipsis { display: inline-flex; }
}

/* 9. Sticky section nav ----------------------------------------------- */
.pb-public .pb-subnav {
  position: sticky; top: 64px; z-index: 40; background: hsl(var(--page)); border-bottom: 1px solid hsl(var(--hairline));
}
.pb-public .pb-subnav-scroll {
  display: flex; gap: var(--sp-8); overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(90deg, transparent, hsl(var(--ink-900)) 24px, hsl(var(--ink-900)) calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, hsl(var(--ink-900)) 24px, hsl(var(--ink-900)) calc(100% - 24px), transparent);
  padding: 0 var(--sp-6);
}
.pb-public .pb-subnav-scroll::-webkit-scrollbar { display: none; }
.pb-public .pb-subnav-link {
  position: relative; display: inline-flex; align-items: center; height: var(--ctl-lg); white-space: nowrap;
  font: 600 13px/1 var(--app-font-sans); text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--ink-700));
  background: none; border: 0; cursor: pointer; transition: color var(--dur-1) var(--ease);
}
.pb-public .pb-subnav-link:hover { color: hsl(var(--ink-900)); }
.pb-public .pb-subnav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: hsl(var(--primary-bright));
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease);
}
.pb-public .pb-subnav-link[aria-current="true"] { color: hsl(var(--ink-900)); }
.pb-public .pb-subnav-link[aria-current="true"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .pb-public .pb-subnav-scroll { scroll-behavior: auto; } }

/* 10. Popovers, tooltips, menus --------------------------------------- */
.pb-public .pb-pop,
.pb-public :is([role="menu"], [role="listbox"], [data-radix-popper-content-wrapper] > *, [data-slot="tooltip-content"], [data-slot="popover-content"], [data-slot="dropdown-menu-content"], [data-slot="select-content"], [data-slot="hover-card-content"]):not(.pb-pop-skip),
body.pb-public > [data-radix-popper-content-wrapper] > * {
  background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-pop);
  box-shadow: var(--shadow-3); padding: var(--sp-3);
}
.pb-public .pb-pop { animation: pb-pop-in var(--dur-1) var(--ease); }
@keyframes pb-pop-in { from { opacity: 0; } to { opacity: 1; } }

/* 11. Skeletons and empty states -------------------------------------- */
.pb-public .pb-skel { background: hsl(var(--surface-sunken)); border-radius: var(--r-chip); position: relative; overflow: hidden; }
.pb-public .pb-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, hsl(var(--surface) / .6), transparent);
  animation: pb-shimmer var(--dur-shimmer) var(--ease) infinite;
}
@keyframes pb-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .pb-public .pb-skel::after { animation: none; display: none; } }
.pb-public .pb-skel-card { pointer-events: none; }
.pb-public .pb-skel-card .pb-gun-card-media { padding: 0; }
.pb-public .pb-skel-card .pb-gun-card-media .pb-skel { width: 100%; height: 100%; border-radius: 0; }
.pb-public .pb-empty {
  display: grid; justify-items: center; gap: var(--sp-4); padding: var(--sp-16) var(--sp-8); text-align: center;
  border: 1px dashed hsl(var(--line-strong)); border-radius: var(--r-card); background: hsl(var(--surface-sunken) / .5);
}
.pb-public .pb-empty p { margin: 0; color: hsl(var(--ink-700)); }

/* Trailing icon nudge for buttons that already carry an arrow icon */
.pb-public .pb-btn > svg:last-child:not(:first-child) { transition: transform var(--dur-2) var(--ease); }
.pb-public .pb-btn:hover > svg:last-child:not(:first-child) { transform: translateX(2px); }

/* Reduced motion: every shared component holds still */
@media (prefers-reduced-motion: reduce) {
  .pb-public :is(.pb-btn, .pb-gun-card, .pb-pill, .pb-subnav-link, .pb-pop, .faq-plus, .pb-gun-card-media img, .pb-btn-arrow, .pb-gun-card-cta svg) {
    transition: none !important; animation: none !important; transform: none !important;
  }
  .pb-public .pb-btn > svg, .pb-public .pb-subnav-link::after { transition: none !important; }
  .pb-public details.faq-native::details-content { transition: none !important; }
}

/* Card in selection mode: outer article, CTA is the only button */
.pb-public .pb-gun-card--select { cursor: default; }
.pb-public .pb-gun-card--select[aria-current="true"] { border-color: hsl(var(--fill-strong)); box-shadow: var(--ring-soft); }
.pb-public .pb-gun-card-title a { color: inherit; text-decoration: none; }
.pb-public .pb-gun-card-title a:hover { color: hsl(var(--primary-strong)); }
.pb-public .pb-btn--icon { padding: 0; width: var(--btn-h); }

/* Panels: the quiet counterpart to .pb-feature (one feature per page) */
.pb-public .pb-panel { border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.pb-public .pb-selected-ring { box-shadow: var(--ring-soft); }
.pb-public .pb-btn.vn-section-trigger { width: 100%; justify-content: space-between; border-radius: var(--r-input); }

/* Prerender spec facts list: label/value styling shared with .pb-specs */
.pb-public .pb-specs-list { list-style: none; margin: 0; padding: 0; }
.pb-public .pb-specs-list li { padding: var(--sp-4) 0; border-bottom: 1px solid hsl(var(--hairline)); font: 500 15px/1.45 var(--app-font-sans); font-variant-numeric: tabular-nums; color: hsl(var(--ink-900)); }
.pb-public .pb-specs-list strong { display: inline-block; min-width: 38%; padding-right: var(--sp-6); font: 600 12px/1.4 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }

/* Brand logos (step 5b). Display-only CSS treatment of manifest art. */
.pb-public .pb-logo { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-3); vertical-align: middle; color: inherit; text-decoration: none; }
.pb-public .pb-logo-tile {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  border-radius: var(--logo-tile-radius); background: hsl(var(--logo-tile-light-bg)); border: 1px solid hsl(var(--logo-tile-light-line));
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.pb-public .pb-logo-tile--xs { border-radius: 6px; }
.pb-public .pb-logo-tile--dark { background: hsl(var(--logo-tile-dark-bg)); border-color: hsl(var(--logo-tile-dark-line)); }
.pb-public .pb-logo-img { display: block; width: auto; max-width: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity var(--dur-2) var(--ease); }
.pb-public .pb-logo-tile[data-tone="native"] .pb-logo-img { filter: none; }
.pb-public .pb-logo-tile[data-tone="ink"] .pb-logo-img { filter: brightness(0); opacity: var(--logo-ink-opacity); }
.pb-public .pb-logo-tile[data-tone="multiply"] .pb-logo-img { filter: grayscale(1) contrast(1.35); mix-blend-mode: multiply; }
.pb-public .pb-logo-tile[data-tone="inverse"] .pb-logo-img { filter: brightness(0) invert(1); opacity: var(--logo-inverse-opacity); }
.pb-public .pb-logo-tile[data-tone="invert-screen"] .pb-logo-img { filter: invert(1); mix-blend-mode: screen; }
.pb-public .pb-logo-fallback {
  font: 800 13px/1.05 var(--logo-fallback-font); text-transform: uppercase; letter-spacing: .02em; text-align: center;
  color: hsl(var(--ink-dark-fixed)); overflow-wrap: anywhere;
}
.pb-public .pb-logo-tile--dark .pb-logo-fallback { color: hsl(var(--fill-white-fixed)); }
.pb-public .pb-logo-tile--xs .pb-logo-fallback { font-size: 9px; white-space: nowrap; }
.pb-public .pb-logo-tile--md .pb-logo-fallback { font-size: 16px; }
.pb-public .pb-logo-tile--lg .pb-logo-fallback { font-size: 22px; }
.pb-public .pb-logo-label { font: 600 13px/1.3 var(--app-font-sans); color: hsl(var(--ink-700)); text-align: center; }
.pb-public .pb-logo--md .pb-logo-label { font: 700 14px/1.3 var(--app-font-display); color: hsl(var(--ink-900)); }
.pb-public .pb-logo--link:hover .pb-logo-tile { border-color: hsl(var(--logo-tile-line-strong)); box-shadow: var(--shadow-2); transform: translateY(var(--logo-tile-lift)); }
.pb-public .pb-logo--link:hover .pb-logo-tile--dark { border-color: hsl(0 0% 100% / .28); }
.pb-public .pb-logo--link:hover .pb-logo-tile[data-tone="ink"] .pb-logo-img { opacity: 1; }
.pb-public .pb-logo--link:hover .pb-logo-label { color: hsl(var(--ink-900)); }
.pb-public .pb-logo-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); }
@media (prefers-reduced-motion: reduce) {
  .pb-public .pb-logo-tile, .pb-public .pb-logo-img { transition: none; }
  .pb-public .pb-logo--link:hover .pb-logo-tile { transform: none; }
}
/* Inline xs mark before a brand name. */
.pb-public .pb-brand-inline { display: inline-flex; align-items: center; gap: var(--sp-3); vertical-align: middle; }
/* Brand hero lockup: lg tile beside the eyebrow. */
.pb-public .pb-brand-lockup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); margin-bottom: var(--sp-6); }
/* Footer strip */
.pb-public .pb-footer-logos { padding-block: var(--sp-10) var(--sp-8); }
.pb-public .pb-footer-logos .pb-eyebrow { display: block; margin: 0 0 var(--sp-6); }

/* Step 5b. Tabular figures only on figures. Text cells stay proportional;
   prices, counts and measurements opt in via .t-num (see lib/numeric.mjs). */
.pb-public :is(.pb-fact-value, .pb-specs td, .pb-compare th, .pb-compare td, .pb-specs-list li, .pb-prose table, .spec-datasheet td, table td),
.pb-static main :is(dd, td) {
  font-variant-numeric: normal; font-feature-settings: "tnum" 0;
}
.pb-public .t-num, .pb-static .t-num, .pb-public .pb-price .t-num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* Guns index (/guns): toolbar, chips, grid, pager, unreviewed panel ------ */
.pb-public .pb-guns-label { margin: var(--sp-6) 0 0; font: 500 12px/1.4 var(--font-mono-plex); text-transform: uppercase; letter-spacing: .1em; color: hsl(var(--ink-500)); font-variant-numeric: tabular-nums; }
/* Responsive visibility: one breakpoint (1024px), both rules media-scoped so
   source order can never show both toolbars. */
@media (max-width: 1023.98px) { .pb-public .pb-guns-toolbar { display: none; } }
@media (min-width: 1024px) {
  .pb-public .pb-guns-toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: nowrap; }
  .pb-public .pb-guns-mobile { display: none; }
}
.pb-public .pb-guns-toolbar .pb-control { flex: 1 1 260px; min-width: 200px; max-width: 340px; }
.pb-public .pb-guns-toolbar .pb-sort { margin-left: auto; }
.pb-public .pb-facet-btn[data-active="true"] { border-color: hsl(var(--fill-strong)); color: hsl(var(--ink-900)); }
.pb-public .pb-facet-btn svg.pb-caret { width: 14px; height: 14px; color: hsl(var(--ink-500)); }
@media (max-width: 1023.98px) { .pb-public .pb-guns-mobile { display: flex; flex-direction: column; gap: var(--sp-4); } }
.pb-public .pb-guns-mobile-row { display: flex; gap: var(--sp-3); }
.pb-public .pb-guns-mobile-row > * { flex: 1; min-height: var(--ctl-input); }
.pb-public .pb-guns-strip { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
.pb-public .pb-guns-strip > div { display: flex; gap: var(--sp-3); width: max-content; padding-bottom: var(--sp-2); }
.pb-public .pb-active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.pb-public .pb-active-chip svg:last-child { opacity: .8; }
.pb-public .pb-guns-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-6); }

/* Popover surface (portalled, so it carries its own .pb-public scope) */
.pb-public.pb-pop {
  width: min(92vw, 340px); padding: var(--sp-6); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-pop);
  background: hsl(var(--surface)); color: hsl(var(--ink-900)); box-shadow: var(--shadow-3);
}
.pb-public.pb-pop .pb-pop-title { margin: 0 0 var(--sp-4); font: 600 12px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }
.pb-public.pb-pop .pb-pop-title + .pb-filter-options { margin-bottom: var(--sp-6); }
.pb-public.pb-pop .pb-filter-options:last-child { margin-bottom: 0; }
.pb-public.pb-pop--menu { width: 240px; padding: var(--sp-3); }
.pb-public .pb-pop-option {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--ctl-md); padding: 0 var(--sp-4);
  border: 0; border-radius: var(--r-input); background: transparent; color: hsl(var(--ink-700));
  font: 500 14px/1.2 var(--app-font-sans); text-align: left; cursor: pointer;
}
.pb-public .pb-pop-option:hover { background: hsl(var(--surface-sunken)); color: hsl(var(--ink-900)); }
.pb-public .pb-pop-option[aria-checked="true"] { color: hsl(var(--ink-900)); font-weight: 600; }
.pb-public .pb-pop-option svg { width: 16px; height: 16px; margin-left: auto; color: hsl(var(--primary-strong)); }

.pb-public .pb-guns-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 400px) { .pb-public .pb-guns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .pb-public .pb-guns-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); } }
@media (min-width: 1024px) { .pb-public .pb-guns-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pb-public .pb-guns-grid > * { height: 100%; min-width: 0; }
.pb-static main ul.pb-guns-grid { list-style: none; padding: 0; }

.pb-public .pb-guns-pager { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-10); }
.pb-public .pb-guns-pager p { margin: 0; font-size: 13px; color: hsl(var(--ink-500)); font-variant-numeric: tabular-nums; }

.pb-public .pb-unreviewed {
  margin-top: var(--sp-12); padding: var(--sp-8);
  background: hsl(var(--surface-sunken)); border: 1px dashed hsl(var(--line-strong)); border-radius: var(--r-card);
}
.pb-public .pb-unreviewed h2 { margin: 0 0 var(--sp-3); font: 700 1.125rem/1.25 var(--app-font-display); color: hsl(var(--ink-900)); }
.pb-public .pb-unreviewed > p { margin: 0 0 var(--sp-6); max-width: 62ch; font-size: 14px; line-height: 1.55; color: hsl(var(--ink-700)); }
.pb-public .pb-unreviewed-links { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.9; color: hsl(var(--ink-700)); }
.pb-public .pb-unreviewed-links li { display: inline; }
.pb-public .pb-unreviewed-links li + li::before { content: "\00b7"; margin: 0 var(--sp-3); color: hsl(var(--ink-300)); }
.pb-public .pb-unreviewed-links a { color: hsl(var(--ink-900)); text-decoration: underline; text-decoration-color: hsl(var(--line-strong)); text-underline-offset: 3px; }
.pb-public .pb-unreviewed-links a:hover { text-decoration-color: hsl(var(--primary-strong)); }
@media (max-width: 767px) { .pb-public .pb-unreviewed { padding: var(--sp-6); } }
.pb-public .pb-guns-meta { flex-wrap: wrap; }
.pb-public .pb-guns-caption { margin: 0; font-size: 13px; color: hsl(var(--ink-500)); }

/* 4b. SCAN gun card: default browse card. Exact name, role, price, done. */
.pb-public .pb-scan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 400px) { .pb-public .pb-scan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .pb-public .pb-scan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); } }
@media (min-width: 1024px) { .pb-public .pb-scan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pb-public .pb-scan-grid > * { min-width: 0; height: 100%; }
.pb-static main ul.pb-scan-grid { list-style: none; padding: 0; margin: 0; }
.pb-public .pb-gun-card--scan { position: relative; text-decoration: none; }
.pb-public .pb-gun-card--scan .pb-gun-card-media { padding: 20px; background: hsl(var(--fill-white-fixed)); }
.pb-public .pb-gun-card--scan .pb-gun-card-body { gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-4); }
.pb-public .pb-gun-card-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 22px; }
.pb-public .pb-gun-card-eyebrow .pb-gun-card-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-public .pb-gun-card-tier { flex: none; }
.pb-public .pb-gun-card--scan .pb-gun-card-title {
  font-size: 18px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pb-public .pb-gun-card-role { font: 500 13px/1.4 var(--app-font-sans); color: hsl(var(--ink-500)); margin: 0; }
.pb-public .pb-gun-card--scan .pb-gun-card-foot { padding-top: var(--sp-3); margin-top: auto; }
.pb-public .pb-gun-card-foot-tier { display: none; }
.pb-public .pb-gun-card--scan .pb-gun-card-cta { margin-left: auto; }
/* Selection mode: the title link stretches over the card; the button sits above it. */
.pb-public .pb-gun-card--scan.pb-gun-card--select .pb-gun-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pb-public .pb-gun-card--scan.pb-gun-card--select .pb-gun-card-select { position: relative; z-index: 2; margin-left: auto; }
.pb-public .pb-gun-card--scan.pb-gun-card--select { cursor: pointer; }
.pb-public .pb-gun-card--scan.pb-gun-card--select:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: hsl(var(--line-strong)); }
.pb-public .pb-gun-card--scan.pb-gun-card--select:hover .pb-gun-card-media img { transform: scale(1.03); }
.pb-public .pb-gun-card--scan:focus-visible, .pb-public .pb-gun-card--scan:has(.pb-gun-card-link:focus-visible) { outline: 2px solid hsl(var(--primary-strong)); outline-offset: 2px; }

/* Compact phones: two columns only, 400 to 767 */
@media (min-width: 400px) and (max-width: 767px) {
  .pb-public .pb-scan-grid .pb-gun-card--scan .pb-gun-card-media { padding: 12px; }
  .pb-public .pb-scan-grid .pb-gun-card--scan .pb-gun-card-body { padding: var(--sp-3); gap: 6px; }
  .pb-public .pb-scan-grid .pb-gun-card--scan .pb-gun-card-brand { font-size: 10px; }
  .pb-public .pb-scan-grid .pb-gun-card--scan .pb-gun-card-tier,
  .pb-public .pb-scan-grid .pb-gun-card--scan .pb-gun-card-role,
  .pb-public .pb-scan-grid .pb-gun-card--scan .pb-gun-card-cta { display: none; }
  .pb-public .pb-scan-grid .pb-gun-card--scan .pb-gun-card-title { font-size: 15px; }
  .pb-public .pb-scan-grid .pb-gun-card--scan .pb-gun-card-foot { flex-wrap: wrap; gap: 4px var(--sp-2); padding-top: var(--sp-2); }
  .pb-public .pb-scan-grid .pb-gun-card--scan .pb-price { font-size: 13px; gap: var(--sp-2); }
  .pb-public .pb-scan-grid .pb-gun-card--scan .pb-gun-card-foot-tier { display: inline; font: 500 11px/1.2 var(--app-font-sans); color: hsl(var(--ink-500)); }
  .pb-public .pb-scan-grid .pb-gun-card--scan .pb-gun-card-select { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-public .pb-gun-card--scan, .pb-public .pb-gun-card--scan:hover, .pb-public .pb-gun-card--scan .pb-gun-card-media img, .pb-public .pb-gun-card--scan .pb-gun-card-cta svg { transition: none !important; transform: none !important; }
}

/* /guns crawler list of every reviewed gun */
.pb-public .pb-guns-all { margin-top: var(--sp-12); }
.pb-public .pb-guns-all h2 { font: 700 18px/1.3 var(--app-font-display); margin: 0 0 var(--sp-3); }
.pb-public .pb-guns-all ul { list-style: none; padding: 0; margin: 0; columns: 2 220px; column-gap: var(--sp-8); }
.pb-public .pb-guns-all li { break-inside: avoid; padding: 2px 0; font-size: 14px; }
.pb-public .pb-guns-all a { color: hsl(var(--ink-700)); }

/* Gun-page "How the X compares" table. Horizontal overflow lives on the table
   wrapper only; the row labels and the This gun column stay pinned on an
   opaque surface. >= 1024px shows the gun plus up to five competitors. */
.pb-public .pb-gcmp-wrap { --gcmp-label: 112px; --gcmp-col: 148px; container-type: inline-size; max-height: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.pb-public .pb-gcmp { table-layout: fixed; width: max-content; min-width: 100%; }
.pb-public .pb-gcmp :is(th, td) { padding: var(--sp-3) var(--sp-4); vertical-align: top; width: var(--gcmp-col); min-width: var(--gcmp-col); max-width: var(--gcmp-col); overflow-wrap: anywhere; }
.pb-public .pb-gcmp :is(thead th:first-child, tbody th) { width: var(--gcmp-label); min-width: var(--gcmp-label); max-width: var(--gcmp-label); position: sticky; left: 0; }
.pb-public .pb-gcmp thead th { position: relative; top: auto; z-index: 1; font-size: 13px; line-height: 1.3; }
.pb-public .pb-gcmp thead th:first-child { position: sticky; z-index: 4; background: hsl(var(--surface)); }
.pb-public .pb-gcmp tbody th { z-index: 2; font-size: 11px; }
.pb-public .pb-gcmp .pb-gcmp-gun { position: sticky; left: var(--gcmp-label); z-index: 2; background: color-mix(in srgb, hsl(var(--primary)) 6%, hsl(var(--surface))); box-shadow: inset -1px 0 0 hsl(var(--hairline)); }
.pb-public .pb-gcmp thead th.pb-gcmp-gun { z-index: 3; }
.pb-public .pb-gcmp tbody tr:nth-child(even) .pb-gcmp-gun { background: color-mix(in srgb, hsl(var(--primary)) 9%, hsl(var(--surface))); }
.pb-public .pb-gcmp-thumb { display: block; width: 100%; max-width: 112px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; margin-bottom: var(--sp-2); }
.pb-public .pb-gcmp-brand { display: block; font: 600 11px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }
.pb-public .pb-gcmp-name { display: block; font-weight: 700; color: hsl(var(--ink-900)); }
.pb-public a.pb-gcmp-name:hover, .pb-public .pb-gcmp-full:hover, .pb-public .pb-gcmp-deep a:hover { text-decoration: underline; }
.pb-public .pb-gcmp-this { display: inline-block; margin-top: var(--sp-1); font: 700 10px/1.4 var(--app-font-sans); text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--primary)); }
.pb-public .pb-gcmp-full { display: inline-block; margin-top: var(--sp-2); font: 600 12px/1.3 var(--app-font-sans); color: hsl(var(--primary)); }
.pb-public .pb-gcmp-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: hsl(var(--ink-500)); }
.pb-public .pb-gcmp-deep { margin-top: var(--sp-4); font-weight: 600; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.pb-public .pb-gcmp-deep a { color: hsl(var(--primary)); display: inline-flex; align-items: center; gap: var(--sp-2); }
.pb-public .pb-gcmp td.is-best, .pb-public .pb-gcmp tbody tr:nth-child(even) td.is-best { background: hsl(var(--tone-positive-bg)); }
@media (max-width: 640px) {
  .pb-public .pb-gcmp-wrap { --gcmp-label: 92px; --gcmp-col: 124px; }
  .pb-public .pb-gcmp-thumb { max-width: 72px; }
}
@media (min-width: 1024px) {
  .pb-public .pb-gcmp-wrap { --gcmp-label: 140px; --gcmp-col: calc((100cqw - var(--gcmp-label)) / 6); }
  .pb-public .pb-gcmp { width: max-content; }
}

/* src/components/visual-nav.css */
.vn-root {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Mobile styles (default) */
.vn-section {
  border-bottom: 1px solid hsl(var(--border));
}
.vn-section:last-of-type {
  border-bottom: none;
}
.vn-section-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  background: none;
  border: none;
  color: hsl(var(--foreground));
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.vn-section-trigger svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 260ms ease;
  color: hsl(var(--muted-foreground));
}
.vn-section-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.vn-section-content {
  display: grid;
  min-height: 0;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.vn-section-trigger[aria-expanded="true"] + .vn-section-content {
  grid-template-rows: 1fr;
}
.vn-section-inner {
  min-height: 0;
  overflow: hidden;
}

.vn-grid {
  display: grid;
  gap: 0.5rem;
  padding-bottom: 1.25rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 480px) {
  .vn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.vn-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  min-height: 48px;
  background: transparent;
  transition: none;
}
.vn-section-content[inert] {
  pointer-events: none;
}
.vn-tile:hover, .vn-tile:focus-visible {
  background-color: hsl(var(--muted));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.vn-tile:focus-visible {
  outline: 2px solid hsl(var(--primary));
}

.vn-img-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--card));
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px hsl(var(--border));
  transition: transform 150ms ease-out;
}
.vn-tile:hover .vn-img-wrap, .vn-tile:focus-visible .vn-img-wrap {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.vn-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vn-img-brand {
  width: 104px;
  height: 64px;
  padding: 8px;
}
.vn-img-product {
  width: 104px;
  height: 64px;
  background: #fff;
}

.vn-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}
.vn-label-small {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
  display: none;
}

@media (max-width: 1023px) {
  .vn-section-trigger[aria-expanded="false"] + .vn-section-content {
    visibility: hidden;
    transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 250ms;
  }
  .vn-section-trigger[aria-expanded="true"] + .vn-section-content {
    visibility: visible;
    transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
  }
  .vn-section-trigger[aria-expanded="true"] + .vn-section-content .vn-tile {
    animation: vn-fade-in 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
  }
}
@keyframes vn-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Desktop Mega Menu Layout */
.vn-desktop-root {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 2fr);
  gap: 1.5rem;
  width: 100%;
}
@media (max-width: 1200px) {
  .vn-desktop-root {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 1rem;
  }
}

.vn-desktop-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vn-desktop-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  border-bottom: 2px solid hsl(var(--border));
  padding-bottom: 0.5rem;
}
.vn-grid-desktop-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.vn-grid-desktop-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

/* Desktop Tile styles (Opaque surface, vertical stack) */
.vn-tile-desktop {
  display: block;
  text-decoration: none;
  border-radius: 0.5rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.vn-tile-desktop:focus-visible {
  outline-color: hsl(var(--primary));
}
.vn-tile-desktop-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.vn-tile-desktop:hover .vn-tile-desktop-inner,
.vn-tile-desktop:focus-visible .vn-tile-desktop-inner {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border-color: hsl(var(--primary));
}

.vn-img-wrap-desktop {
  height: 64px;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f6f8;
  border-bottom: 1px solid hsl(var(--border));
  padding: 0.5rem;
}
.vn-see-all-wrap {
  background-color: transparent;
}
.vn-img-wrap-desktop img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.vn-text-only .vn-label-surface {
  min-height: 104px;
}
.vn-tile.vn-text-only {
  padding: 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}
.vn-text-only .vn-label,
.vn-text-only .vn-label-desktop {
  font-family: var(--font-sans);
  font-weight: 600;
}
.vn-product-tile .vn-img-wrap-desktop {
  background: #fff;
  padding: 4px;
}

.vn-label-surface {
  padding: 0.5rem;
  background: hsl(var(--card));
  min-height: 40px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vn-label-desktop {
  font-size: 0.75rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  line-height: 1.2;
}

.vn-drawer a, .vn-drawer button, .vn-drawer input { min-height: 48px; }
.vn-drawer > button { min-width: 48px; }
.vn-mega-content { padding-top: 20px; padding-bottom: 20px; }
.vn-mega-footer { margin-top: 20px; padding-top: 16px; }
.vn-mega-scrim { height: max(0px, calc(100dvh - var(--vn-header-height, 64px))); }
@media (max-height: 700px) and (min-width: 1024px) {
  .vn-grid-desktop-2 > :nth-child(n+4):not(:last-child),
  .vn-grid-desktop-4 > :nth-child(n+9):not(:last-child) { display: none; }
  .vn-mega-content { padding-top: 12px; padding-bottom: 12px; }
}
@media (max-height: 480px) and (min-width: 1024px) {
  .vn-img-wrap-desktop { display: none; }
  .vn-text-only .vn-label-surface { min-height: 40px; }
  .vn-mega-footer { margin-top: 12px; padding-top: 12px; }
}
@media (max-height: 320px) and (min-width: 1024px) {
  .vn-grid-desktop-2 > :not(:last-child),
  .vn-grid-desktop-4 > :not(:last-child),
  .vn-mega-footer { display: none; }
}
.prerender-navigation { padding: 12px 24px; border-bottom: 1px solid #ddd; }
.prerender-navigation summary { min-height: 48px; cursor: pointer; font-weight: 700; }
.prerender-navigation .vn-section-content { grid-template-rows: 1fr !important; visibility: visible !important; }
.prerender-navigation .vn-section-trigger { display: none; }
.prerender-navigation .vn-label-small { display: block !important; }

/* Standalone brand grid */
.vn-standalone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.vn-standalone-grid .vn-tile {
  flex-direction: column;
  text-align: center;
  padding: 1.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.vn-standalone-grid .vn-img-wrap {
  width: 120px;
  height: 80px;
  margin-bottom: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .vn-root *, .vn-desktop-root *, .vn-standalone-grid *, .vn-drawer, .vn-drawer *,
  .header-desktop-nav *, [data-state].fixed.inset-0 {
    animation: none !important;
    transition: none !important;
  }
  .vn-root .vn-tile, .vn-desktop-root .vn-tile-desktop { opacity: 1 !important; }
  .vn-img-wrap, .vn-tile-desktop-inner { transform: none !important; }
  .vn-section-content, 
  .vn-section-trigger svg, 
  .vn-tile,
  .vn-tile:hover,
  .vn-tile:focus-visible,
  .vn-tile-desktop:hover .vn-tile-desktop-inner,
  .vn-tile-desktop:focus-visible .vn-tile-desktop-inner {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
  }
}
/* Brands: all 15 sm logo tiles plus a real "See all brands" link.
   Never subject to the short-viewport hide rules above. */
.vn-brand-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.75rem; justify-items: center; align-items: start; }
.vn-desktop-root .vn-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vn-brand-grid > li { display: flex; justify-content: center; min-width: 0; width: 100%; }
.vn-brand-grid .pb-logo-tile { max-width: 100%; }
.vn-brand-grid-all { align-self: stretch; }
.vn-brand-see-all { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; width: 100%; min-height: 56px; padding: 0 0.5rem; border-radius: var(--logo-tile-radius, 8px); border: 1px dashed hsl(var(--line-strong, var(--border))); font: 700 13px/1.25 var(--app-font-sans); color: hsl(var(--primary-strong, var(--primary))); text-align: center; text-decoration: none; }
.vn-brand-see-all:hover { border-style: solid; }
.vn-brand-see-all:focus-visible { outline: 2px solid hsl(var(--primary-strong, var(--primary))); outline-offset: 2px; }

/* src/styles/chrome.css */
.pb-public .pb-typeahead { position: relative; min-width: 0; }
/* Step 3 public chrome: containers, header, mega menu, drawer, footer, home
   and dark levels. Scoped to .pb-public, every value from tokens.css. */

html:has(.pb-public), body.pb-public { overflow-x: clip; }

/* 1. Containers ------------------------------------------------------- */
.pb-public .pb-wrap {
  width: 100%; max-width: calc(var(--wrap-standard) + var(--gutter) * 2);
  margin-inline: auto; padding-inline: var(--gutter); min-width: 0;
}
.pb-public .pb-wrap--wide { max-width: calc(var(--wrap-wide) + var(--gutter) * 2); }
.pb-public .pb-wrap--standard { max-width: calc(var(--wrap-standard) + var(--gutter) * 2); }
.pb-public .pb-wrap--reading { max-width: calc(var(--wrap-reading) + var(--gutter) * 2); }
.pb-public .pb-page { padding-top: var(--page-top); padding-bottom: var(--section-y); }
.pb-public .pb-section { padding-block: var(--section-y); }
.pb-public .pb-section + .pb-section { padding-top: 0; }

/* Static body: map the prerender main onto the same containers */
.pb-static > main.pb-prose-root {
  width: 100%; max-width: calc(var(--wrap-standard) + var(--gutter) * 2);
  margin-inline: auto; padding: var(--page-top) var(--gutter) var(--section-y);
}

/* 2. Header ----------------------------------------------------------- */
.pb-public .pb-header {
  position: sticky; top: 0; z-index: 50;
  background: hsl(var(--surface) / .88);
  -webkit-backdrop-filter: saturate(1.8) blur(12px); backdrop-filter: saturate(1.8) blur(12px);
  border-bottom: 1px solid hsl(var(--hairline));
  box-shadow: none; transition: box-shadow var(--dur-2) var(--ease);
}
.pb-public .pb-header[data-scrolled="true"] { box-shadow: var(--shadow-1); }
.pb-public .pb-header-bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.pb-public .pb-wordmark { font: 900 clamp(1.25rem, 1rem + 1vw, 1.5rem)/1 var(--app-font-display); letter-spacing: -.02em; display: flex; align-items: center; min-height: var(--ctl-lg); flex: none; margin-right: var(--sp-4); text-decoration: none; }
.pb-public .pb-wordmark-net { color: hsl(var(--ink-900)); margin-left: 2px; }
.pb-public .pb-wm-red { color: #ef4444; }
.pb-public .pb-wm-orange { color: #f97316; }
.pb-public .pb-wm-yellow { color: #eab308; }
.pb-public .pb-wm-green { color: #22c55e; }
.pb-public .pb-wm-blue { color: #3b82f6; }
.pb-public .pb-wm-purple { color: #a855f7; }
.pb-public .pb-nav { display: flex; align-items: center; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.pb-public .pb-nav-link {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--ctl-md); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-input);
  background: transparent; cursor: pointer; text-decoration: none;
  font: 500 14px/1 var(--app-font-sans); color: hsl(var(--ink-700));
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.pb-public .pb-nav-link:hover, .pb-public .pb-nav-link[aria-expanded="true"], .pb-public .pb-nav-link[data-state="open"] {
  background: hsl(var(--surface-sunken)); color: hsl(var(--ink-900));
}
.pb-public .pb-nav-link::after {
  content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 2px; height: 2px;
  background: hsl(var(--primary-bright)); border-radius: 2px; transform: scaleX(0);
  transition: transform var(--dur-2) var(--ease);
}
.pb-public .pb-nav-link[aria-current="page"] { color: hsl(var(--ink-900)); }
.pb-public .pb-nav-link[aria-current="page"]::after { transform: scaleX(1); }
.pb-public .pb-nav-chevron { width: 12px; height: 12px; transition: transform var(--dur-2) var(--ease); }
.pb-public [aria-expanded="true"] > .pb-nav-chevron { transform: rotate(180deg); }

/* Static header output is generated from the shared Header component. */
.pb-public .pb-static-header { position: sticky; }
.pb-public .pb-static-header summary { list-style: none; }
.pb-public .pb-static-header summary::-webkit-details-marker { display: none; }
.pb-public .pb-static-header summary::marker { content: ""; }
.pb-public .pb-static-desktop-nav { display: none; }
.pb-public .pb-static-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); flex: 1; min-width: 0; }
.pb-public .pb-static-header-actions > .pb-typeahead { display: none; width: min(16rem, 34vw); flex: none; }
.pb-public .pb-static-mobile-menu { position: relative; }
.pb-public .pb-static-mobile-menu > summary { display: grid; place-items: center; min-width: 48px; min-height: 48px; cursor: pointer; }
.pb-public .pb-static-mobile-menu > summary svg { width: 20px; height: 20px; }
.pb-public .pb-static-mobile-panel { position: fixed; top: var(--header-h); right: 0; height: calc(100dvh - var(--header-h)); z-index: 60; width: min(340px, 100vw); overflow-y: auto; background: hsl(var(--surface)); box-shadow: var(--shadow-3); border-left: 1px solid hsl(var(--hairline)); }
.pb-public .pb-static-mobile-menu:not([open]) > .pb-static-mobile-panel { display: none; }
.pb-public .pb-static-mobile-head { position: sticky; top: 0; z-index: 1; display: grid; gap: var(--sp-3); padding: var(--sp-6) var(--sp-8); border-bottom: 1px solid hsl(var(--hairline)); background: hsl(var(--surface)); }
.pb-public .pb-static-mobile-head .pb-search { width: 100%; }
.pb-public .pb-static-mobile-head .pb-btn { width: 100%; }
.pb-public .pb-static-mobile-panel .pb-drawer-scroll { padding: var(--sp-4) var(--sp-6) var(--sp-10); }
.pb-public .pb-static-mobile-panel .pb-static-mobile-blog { margin-bottom: var(--sp-3); }
.pb-public .pb-static-mobile-panel .vn-section-content { display: none; }
.pb-public .pb-static-mobile-panel .vn-section[open] > .vn-section-content { display: block; }
.pb-public .pb-static-mobile-panel .vn-section-inner { overflow: visible; }
.pb-public .pb-static-mobile-panel .vn-section-trigger { width: 100%; min-height: var(--ctl-lg); justify-content: space-between; }
.pb-public .pb-static-mobile-panel .vn-section[open] > .vn-section-trigger svg { transform: rotate(180deg); }
.pb-public .pb-static-mobile-panel .vn-brand-grid { grid-template-columns: 1fr; }
.pb-public .pb-static-mobile-panel .pb-logo { min-height: 48px; }
.pb-public .pb-static-mobile-panel .pb-drawer-section { border-bottom: 1px solid hsl(var(--hairline)); padding-block: var(--sp-3); }
.pb-public .pb-static-mobile-panel .pb-drawer-section .pb-drawer-link { min-height: 48px; }
.pb-public .pb-static-desktop-nav details { position: relative; }
.pb-public .pb-static-desktop-nav details.pb-static-guns-menu { position: static; }
.pb-public .pb-static-desktop-nav details:not([open]) > div { display: none; }
.pb-public .pb-static-desktop-nav > .pb-nav > li > details > summary { cursor: pointer; }
.pb-public .pb-static-guns-panel { position: absolute; top: 100%; left: 0; right: 0; width: 100%; max-height: calc(100vh - var(--header-h)); overflow-y: auto; border: 1px solid hsl(var(--hairline)); box-shadow: var(--shadow-3); }
.pb-public .pb-static-guns-panel .vn-mega-content { padding-block: var(--sp-8); }
.pb-public .pb-static-guns-panel .vn-mega-footer { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid hsl(var(--hairline)); }
.pb-public .pb-static-community-panel { position: absolute; top: calc(100% + var(--sp-3)); right: 0; display: grid; min-width: 180px; gap: var(--sp-1); padding: var(--sp-2); background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-pop); box-shadow: var(--shadow-3); }
.pb-public .pb-static-community-panel a { min-height: 40px; padding: var(--sp-3); border-radius: var(--r-chip); color: hsl(var(--ink-700)); text-decoration: none; }
.pb-public .pb-static-community-panel a:hover { background: hsl(var(--surface-sunken)); color: hsl(var(--ink-900)); }
.pb-public .pb-static-header a[data-site-blog-link][aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 1024px) {
  .pb-public .pb-static-desktop-nav { display: block; }
  .pb-public .pb-static-header-actions > .pb-typeahead { display: block; }
  .pb-public .pb-static-mobile-menu { display: none; }
}
@media (max-width: 1023.98px) {
  .pb-public .pb-static-header .pb-header-bar { gap: var(--sp-3); }
  .pb-public .pb-static-header .pb-wordmark { margin-right: 0; }
  .pb-public .pb-static-header-actions > .pb-btn--desktop { display: none; }
}

/* 3. Mega menu -------------------------------------------------------- */
.pb-public .pb-mega {
  position: relative; z-index: 20; background: hsl(var(--surface));
  border-top: 1px solid hsl(var(--hairline)); box-shadow: var(--shadow-3);
  animation: pb-mega-in var(--dur-2) var(--ease);
}
@keyframes pb-mega-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pb-public .pb-mega-scrim { background: hsl(var(--ink-900) / .25); animation: pb-pop-in var(--dur-2) var(--ease); }
.pb-public .vn-desktop-heading,
.pb-public .pb-eyebrow {
  font: 500 11px/1.3 var(--font-mono-plex); text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--ink-500));
}
.pb-public .vn-tile-desktop-inner { border-radius: var(--r-tile); }
.pb-public .vn-mega-footer { border-color: hsl(var(--hairline)); }

/* 4. Drawer ----------------------------------------------------------- */
.pb-public .vn-drawer, body.pb-public .vn-drawer { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pb-drawer-head { flex: none; padding: var(--sp-8) var(--sp-8) var(--sp-6); border-bottom: 1px solid hsl(var(--hairline)); background: hsl(var(--surface)); }
.pb-drawer-scroll { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-8) var(--sp-10); overscroll-behavior: contain; }
.pb-drawer-section { border-bottom: 1px solid hsl(var(--hairline)); padding-block: var(--sp-3); }
.pb-drawer-link {
  display: flex; align-items: center; min-height: var(--ctl-lg); padding: 0 var(--sp-4); border-radius: var(--r-input);
  font: 500 15px/1.2 var(--app-font-sans); color: hsl(var(--ink-700)); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.pb-drawer-link:hover { background: hsl(var(--surface-sunken)); color: hsl(var(--ink-900)); }
.pb-drawer-link[aria-current="page"] { color: hsl(var(--ink-900)); font-weight: 600; box-shadow: inset 2px 0 0 hsl(var(--primary-bright)); }
.vn-drawer .vn-section { border-bottom: 1px solid hsl(var(--hairline)); }
.vn-drawer .pb-btn.vn-section-trigger { min-height: var(--ctl-lg); font: 600 13px/1.2 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }

/* 5. Footer ----------------------------------------------------------- */
.pb-public .pb-footer { margin-top: auto; background: hsl(var(--surface-sunken)); border-top: 1px solid hsl(var(--hairline)); }
.pb-public .pb-footer-logos { min-height: var(--sp-16); }
.pb-public .pb-footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-8); padding-block: var(--sp-12); }
@media (min-width: 768px) { .pb-public .pb-footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pb-public .pb-footer-cols h3 { margin: 0 0 var(--sp-6); }
.pb-public .pb-footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.pb-public .pb-footer-link { font: 400 14px/1.4 var(--app-font-sans); color: hsl(var(--ink-700)); text-decoration: underline 1px transparent; text-underline-offset: .2em; transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease); }
.pb-public .pb-footer-link:hover { color: hsl(var(--ink-900)); text-decoration-color: currentColor; }
.pb-public .pb-footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); padding-block: var(--sp-8); border-top: 1px solid hsl(var(--hairline)); font: 400 13px/1.5 var(--app-font-sans); color: hsl(var(--ink-500)); }
.pb-public .pb-footer-brand { display: grid; gap: var(--sp-2); }
.pb-public .pb-footer-brand strong { font: 900 18px/1 var(--app-font-display); color: hsl(var(--ink-900)); letter-spacing: -.01em; }
.pb-public .pb-footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; }

/* 6. Home ------------------------------------------------------------- */
.pb-public .pb-band { background: var(--brand-base); color: hsl(var(--on-dark-1)); }
.pb-public .pb-band :is(.pb-dark-1) { color: hsl(var(--on-dark-1)); }
.pb-public .pb-dark-1 { color: hsl(var(--on-dark-1)); }
.pb-public .pb-dark-2 { color: hsl(var(--on-dark-2)); }
.pb-public .pb-dark-3 { color: hsl(var(--on-dark-3)); }
.pb-public .pb-band .funnel-card { border-color: hsl(var(--on-dark-line)); background: transparent; }
.pb-public .pb-band .stat-counter-strip { border-top: 1px solid hsl(var(--on-dark-line)); margin-top: var(--sp-12); }
.pb-public .pb-band .stat-num { color: hsl(var(--on-dark-1)); }
.pb-public .pb-band .stat-lbl { font: 600 12px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--on-dark-3)); }
.pb-public .pb-cat-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); box-shadow: var(--shadow-1); text-decoration: none; color: hsl(var(--ink-900)); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.pb-public .pb-cat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: hsl(var(--line-strong)); }
.pb-public .pb-cat-media { aspect-ratio: 4 / 3; overflow: hidden; background: hsl(var(--surface)); border-bottom: 1px solid hsl(var(--hairline)); }
.pb-public .pb-cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.pb-public .pb-cat-card:hover .pb-cat-media img { transform: scale(1.03); }
.pb-public .pb-cat-body { display: grid; gap: var(--sp-2); padding: var(--sp-6); position: relative; }
.pb-public .pb-cat-title { font: 700 17px/1.2 var(--app-font-display); padding-right: var(--sp-10); }
.pb-public .pb-cat-meta { font: 400 14px/1.4 var(--app-font-sans); color: hsl(var(--ink-500)); font-variant-numeric: tabular-nums; }

.pb-public .pb-guide { max-width: 68ch; }
.pb-public .pb-callout { margin-top: var(--sp-8); padding: var(--sp-8); background: hsl(var(--surface-sunken)); border-radius: var(--r-card); }
.pb-public .pb-callout .pb-eyebrow { margin: 0 0 var(--sp-6); }
.pb-public .pb-callout ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.pb-public .pb-callout li { position: relative; padding-left: var(--sp-8); font-size: 15px; line-height: 1.6; color: hsl(var(--ink-700)); }
.pb-public .pb-callout li::before { content: ""; position: absolute; left: 4px; top: calc(.8em - 3px); width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--primary-bright)); }
.pb-public .pb-figure { margin: var(--sp-8) 0 0; }
.pb-public .pb-figure img { width: 100%; border-radius: var(--r-card); border: 1px solid hsl(var(--hairline)); }
.pb-public .pb-figure figcaption { margin-top: var(--sp-3); font: 400 13px/1.5 var(--app-font-sans); color: hsl(var(--ink-500)); }

/* 7. Listing ---------------------------------------------------------- */
.pb-public .pb-result-count { font: 600 12px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); font-variant-numeric: tabular-nums; }
.pb-public .pb-pill, .pb-public .pb-specs td, .pb-public .pb-specs-list li { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .pb-public :is(.pb-header, .pb-mega, .pb-mega-scrim, .pb-nav-link, .pb-nav-link::after, .pb-nav-chevron, .pb-cat-card, .pb-cat-media img) { animation: none !important; transition: none !important; }
}

/* Static parity for home category list and stat strip */
.pb-static main ul:has(> li > .pb-cat-card) { list-style: none; padding: 0; display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.pb-static main .stat-counter-strip { display: flex; flex-wrap: wrap; gap: var(--sp-10); margin: var(--sp-10) 0; }
.pb-static main .stat-counter-item { display: flex; flex-direction: column-reverse; margin: 0; }
.pb-static main .stat-counter-item dd { margin: 0; color: hsl(var(--ink-900)); }
.pb-static main .stat-counter-item dt { font: 600 12px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }
.pb-drawer-eyebrow { margin: var(--sp-4) var(--sp-4) var(--sp-2); }

/* src/styles/detail.css */
/* Step 4 detail templates. Public only, built from tokens.css. */

/* Shared eyebrow and meta */
.pb-public .pb-eyebrow { display: inline-block; margin-bottom: var(--sp-4); font: 600 12px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--primary-strong)); }
.pb-public .pb-meta-line, .pb-public .pb-meta-read { font: 500 13px/1.4 var(--app-font-sans); color: hsl(var(--ink-500)); font-variant-numeric: tabular-nums; }
.pb-public .pb-meta-line { margin: 0 0 var(--sp-4); }

/* 1. Gun page ---------------------------------------------------------- */
.pb-public .pb-brand-link { font-weight: 600; color: hsl(var(--ink-700)); text-decoration: underline 1px hsl(var(--line-strong)); text-underline-offset: .2em; }
.pb-public .pb-brand-link:hover { color: hsl(var(--ink-900)); text-decoration-color: currentColor; }
.pb-public .pb-hero-well { position: relative; padding: var(--sp-6); background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.pb-public .pb-hero-well::before, .pb-public .pb-hero-well::after { content: none !important; }
.pb-public .pb-hero-well img, .pb-public .pb-hero-well video { object-fit: contain !important; background: transparent; }
.pb-public .pb-hero-well > div { border: 0 !important; background: transparent !important; }

.pb-public .pb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-left: 0; margin-right: 0; }
.pb-public .pb-fact { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-tile); }
.pb-public .pb-fact-label { font: 600 12px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }
.pb-public .pb-fact-value { margin: 0; font: 600 15px/1.35 var(--app-font-sans); color: hsl(var(--ink-900)); font-variant-numeric: tabular-nums; }

.pb-public .pb-market { background: hsl(var(--surface)); }
.pb-public .pb-market-checked { font: 500 13px/1.4 var(--app-font-sans); color: hsl(var(--ink-500)); font-variant-numeric: tabular-nums; }
.pb-public .pb-market .font-display.text-3xl { font-family: var(--app-font-sans); font-variant-numeric: tabular-nums; }
.pb-public .pb-market form { align-items: flex-end; }

.pb-public .pb-proscons { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .pb-public .pb-proscons { grid-template-columns: 1fr 1fr; } }
.pb-public .pb-pc { padding: var(--sp-8); background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); }
.pb-public .pb-pc-title { margin: 0 0 var(--sp-6); font: 700 17px/1.3 var(--app-font-display); color: hsl(var(--ink-900)); }
.pb-public .pb-pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.pb-public .pb-pc-list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-4); align-items: start; font: 400 15px/1.5 var(--app-font-sans); color: hsl(var(--ink-700)); }
.pb-public .pb-pc-icon { width: 20px; height: 20px; margin-top: calc((1.5em - 20px) / 2); border-radius: var(--r-pill); display: inline-grid; place-items: center; }
.pb-public .pb-pc--pro .pb-pc-icon { background: hsl(var(--tone-positive-bg)); color: hsl(var(--tone-positive)); }
.pb-public .pb-pc--con .pb-pc-icon { background: hsl(var(--tone-negative-bg)); color: hsl(var(--tone-negative)); }

.pb-public .pb-used-row { display: flex; gap: var(--sp-4); height: 100%; padding: var(--sp-4); background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-tile); transition: border-color var(--dur-2) var(--ease); }
.pb-public .pb-used-row:hover { border-color: hsl(var(--line-strong)); }
.pb-public .pb-used-row .font-display { font-family: var(--app-font-sans); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-public .pb-used-row > div:first-child { background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); }

/* 2. Brand hero and timeline ------------------------------------------ */
.pb-public .pb-brand-hero { display: grid; gap: var(--sp-8); overflow: hidden; padding: var(--sp-10) var(--sp-8); border-radius: var(--r-feature);
  background: linear-gradient(120deg, hsl(var(--surface)) 0%, hsl(var(--surface)) 45%, hsl(var(--surface-sunken)) 100%); }
@media (min-width: 900px) { .pb-public .pb-brand-hero { grid-template-columns: 1.1fr 1fr; align-items: center; padding: var(--sp-16); } }
.pb-public .pb-brand-hero-text { min-width: 0; }
.pb-public .pb-brand-lead { margin: 0 0 var(--sp-6); max-width: 36ch; font: 500 var(--text-lg)/1.4 var(--app-font-sans); color: hsl(var(--ink-700)); text-transform: none; }
.pb-public .pb-brand-intro { display: grid; gap: var(--sp-4); max-width: 60ch; }
.pb-public .pb-brand-intro p { margin: 0; font-size: 16px; line-height: 1.65; color: hsl(var(--ink-700)); }
.pb-public .pb-brand-hero-media { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.pb-public .pb-brand-hero-media img { width: 100%; height: 100%; object-fit: contain; }
.pb-public .pb-timeline { position: relative; display: grid; gap: var(--sp-10); padding-left: var(--sp-10); border-left: 1px solid hsl(var(--hairline)); }
.pb-public .pb-timeline-node { position: absolute; left: calc(-1 * var(--sp-10) - 6px); top: var(--sp-8); width: 11px; height: 11px; border-radius: var(--r-pill); background: hsl(var(--primary-bright)); box-shadow: 0 0 0 4px hsl(var(--page)); }

/* 3. Unified long-form prose ------------------------------------------ */
.pb-public .pb-prose { max-width: 68ch; color: hsl(var(--ink-700)); font: 400 17px/1.7 var(--app-font-sans); }
.pb-public .pb-prose.max-w-none { max-width: 68ch; }
.pb-public .pb-prose > * + * { margin-top: 1.1em; }
.pb-public .pb-prose :is(h2, h3, h4) { color: hsl(var(--ink-900)); font-family: var(--app-font-display); font-weight: 700; text-transform: none; letter-spacing: -.01em; line-height: 1.25; margin: 2em 0 .6em; }
.pb-public .pb-prose h2 { font-size: var(--text-xl); }
.pb-public .pb-prose h3 { font-size: var(--text-lg); }
.pb-public .pb-prose :is(h2, h3, h4) + * { margin-top: 0; }
.pb-public .pb-prose a { color: hsl(var(--primary-strong)); text-underline-offset: .2em; }
.pb-public .pb-prose ul { list-style: none; padding-left: 1.25em; }
.pb-public .pb-prose ul > li { position: relative; }
.pb-public .pb-prose ul > li::before { content: ""; position: absolute; left: -1.05em; top: .72em; width: 6px; height: 6px; border-radius: var(--r-pill); background: hsl(var(--primary-bright)); }
.pb-public .pb-prose ol { padding-left: 1.5em; }
.pb-public .pb-prose ol > li::marker { font-variant-numeric: tabular-nums; color: hsl(var(--ink-500)); font-weight: 600; }
.pb-public .pb-prose li + li { margin-top: .4em; }
.pb-public .pb-prose blockquote { margin-left: 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid hsl(var(--primary-bright)); color: hsl(var(--ink-900)); font-style: normal; quotes: none; }
.pb-public .pb-prose blockquote p::before, .pb-public .pb-prose blockquote p::after { content: none; }
.pb-public .pb-prose figure { margin: 2em 0; }
.pb-public .pb-prose figure img { max-width: 100%; height: auto; object-fit: contain; border-radius: var(--r-tile); }
.pb-public .pb-prose figcaption { margin-top: var(--sp-3); font: 400 13px/1.5 var(--app-font-sans); color: hsl(var(--ink-500)); }
.pb-public .pb-prose img { max-width: 100%; height: auto; object-fit: contain; }
.pb-public .pb-prose table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.pb-public .pb-prose :is(th, td) { padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid hsl(var(--hairline)); text-align: left; vertical-align: top; }
.pb-public .pb-prose th { font: 600 12px/1.4 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }
.pb-public .pb-prose :is(.callout, aside, .note) { padding: var(--sp-6) var(--sp-8); background: hsl(var(--surface-sunken)); border-radius: var(--r-card); }
.pb-public .pb-prose code { font-family: var(--font-mono-plex); font-size: .9em; padding: .1em .35em; background: hsl(var(--surface-sunken)); border-radius: 4px; }
.pb-public .pb-prose pre { overflow-x: auto; padding: var(--sp-6); background: hsl(var(--surface-sunken)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-tile); font: 400 13.5px/1.6 var(--font-mono-plex); }
.pb-public .pb-prose pre code { padding: 0; background: none; }

/* 4. Compare ---------------------------------------------------------- */
.pb-public .pb-compare-heads { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.pb-public .pb-compare-head .pb-gun-card-body { padding: var(--sp-4) var(--sp-6); }
.pb-public .pb-compare .is-best svg { width: 12px; height: 12px; }
.pb-public .pb-compare-scroll { position: relative; }
.pb-public .pb-compare-note { margin: calc(-1 * var(--sp-4)) 0 var(--sp-8); font: 400 13px/1.5 var(--app-font-sans); color: hsl(var(--ink-500)); }
@media (max-width: 767px) {
  .pb-public .pb-compare-scroll::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 28px; pointer-events: none; border-radius: 0 var(--r-card) var(--r-card) 0; background: linear-gradient(90deg, transparent, hsl(var(--surface))); }
  .pb-public .pb-compare { min-width: 560px; }
}

/* 5. Quiz ------------------------------------------------------------- */
.pb-public .pb-quiz { display: grid; gap: var(--sp-8); }
.pb-public .pb-quiz-progress { display: grid; gap: var(--sp-3); }
.pb-public .pb-quiz-step { font: 600 12px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); font-variant-numeric: tabular-nums; }
.pb-public .pb-quiz-track { height: 4px; border-radius: var(--r-pill); background: hsl(var(--surface-sunken)); overflow: hidden; }
.pb-public .pb-quiz-fill { display: block; height: 100%; background: hsl(var(--primary-bright)); transform-origin: left; transition: transform var(--dur-3) var(--ease); }
.pb-public .pb-quiz-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pb-public .pb-quiz-legend { padding: 0; margin-bottom: var(--sp-6); }
.pb-public .pb-quiz-options { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .pb-public .pb-quiz-options { grid-template-columns: 1fr 1fr; } }
.pb-public .pb-quiz-option { position: relative; display: flex; align-items: center; min-height: 56px; padding: var(--sp-4) var(--sp-10) var(--sp-4) var(--sp-6); cursor: pointer;
  background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-tile); transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.pb-public .pb-quiz-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pb-public .pb-quiz-option:hover { border-color: hsl(var(--line-strong)); }
.pb-public .pb-quiz-option-label { font: 500 15px/1.35 var(--app-font-sans); color: hsl(var(--ink-900)); }
.pb-public .pb-quiz-check { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 20px; height: 20px; border-radius: var(--r-pill); display: grid; place-items: center; background: hsl(var(--fill-strong)); color: hsl(var(--on-fill)); opacity: 0; transform: scale(.8); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.pb-public .pb-quiz-option:has(input:checked) { border: 2px solid hsl(var(--primary-strong)); padding: calc(var(--sp-4) - 1px) calc(var(--sp-10) - 1px) calc(var(--sp-4) - 1px) calc(var(--sp-6) - 1px); background: hsl(var(--tier-high-bg) / .6); }
.pb-public .pb-quiz-option:has(input:checked) .pb-quiz-check { opacity: 1; transform: none; }
.pb-public .pb-quiz-option:has(input:focus-visible) { box-shadow: var(--ring-soft); border-color: hsl(var(--primary-strong)); }
.pb-public .pb-quiz-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; }
.pb-public .pb-quiz-continue { flex: 1; }
@media (min-width: 640px) { .pb-public .pb-quiz-continue { flex: none; min-width: 220px; } }

/* 6. Typeahead -------------------------------------------------------- */
.pb-public .pb-ta-eyebrow { padding: var(--sp-3) var(--sp-4) var(--sp-2); font: 600 11px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--ink-500)); }
.pb-public .pb-ta-title { font: 500 14px/1.35 var(--app-font-sans); color: hsl(var(--ink-900)); }
.pb-public .pb-hl { background: transparent; color: inherit; font-weight: 600; padding: 0; }
.pb-public .pb-ta-active { background: hsl(var(--surface-sunken)); border-radius: var(--r-chip); }
.pb-public .pb-ta-hover:hover { background: hsl(var(--surface-sunken) / .6); border-radius: var(--r-chip); }
.pb-public .pb-ta-empty { display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--sp-4); }
.pb-public .pb-ta-empty p { margin: 0; font-size: 14px; color: hsl(var(--ink-700)); }

/* 7. Community -------------------------------------------------------- */
.pb-public .pb-post-card { background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.pb-public .pb-post-card > aside { background: hsl(var(--surface-sunken) / .5) !important; }
.pb-public .pb-avatar { flex: none; width: 48px; height: 48px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: hsl(var(--tier-high-bg)); color: hsl(var(--tier-high-fg)); font: 700 15px/1 var(--app-font-sans); letter-spacing: .02em; }
.pb-public .pb-post-card time { font-variant-numeric: tabular-nums; }

/* 8. 404 -------------------------------------------------------------- */
.pb-public .pb-404-friendly { margin: 0 0 var(--sp-6); font-size: 16px; color: hsl(var(--ink-700)); }
.pb-public .pb-404-search { display: flex; gap: var(--sp-3); max-width: 520px; width: 100%; margin: 0 auto var(--sp-10); }
.pb-public .pb-404-search .pb-control { flex: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pb-public :is(.pb-quiz-fill, .pb-quiz-check, .pb-quiz-option, .pb-used-row) { transition: none !important; }
}

/* 9. Print: gun, guide, compare, prose -------------------------------- */
@media print {
  .pb-public { --page: 0 0% 100%; background: hsl(var(--fill-white-fixed)) !important; color: hsl(var(--ink-dark-fixed)) !important; }
  .pb-public :is(.pb-header, header[role="banner"], footer, .pb-subnav, nav[aria-label="On this page"], video, iframe, form, .pb-search, .pb-quiz-actions, .pb-404-search, [data-print="hide"], .pb-btn) { display: none !important; }
  .pb-public, .pb-public * { color: hsl(var(--ink-dark-fixed)) !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; }
  .pb-public img { filter: none !important; }
  .pb-public :is(.pb-gun-card, .pb-pc, .pb-fact, .pb-panel, figure, table, tr, .pb-specs, .pb-compare-wrap, details, .pb-used-row, .pb-post-card) { break-inside: avoid; page-break-inside: avoid; }
  .pb-public :is(.pb-gun-card, .pb-pc, .pb-fact, .pb-hero-well, .pb-compare-wrap) { border: 1px solid hsl(var(--ink-dark-fixed) / .4) !important; }
  .pb-public .pb-compare-wrap { max-height: none !important; overflow: visible !important; }
  .pb-public .pb-compare :is(th, td) { position: static !important; }
  .pb-public .pb-compare-scroll::after { display: none !important; }
  .pb-public details > :not(summary) { display: block !important; }
  .pb-public :is(.pb-prose, main) a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  .pb-public a[rel~="sponsored"] { display: none !important; }
  .pb-public h1, .pb-public h2, .pb-public h3 { break-after: avoid; }
}

/* 10. Community lists, members, search results ------------------------- */
.pb-public .pb-comm-group { background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); overflow: hidden; }
.pb-public .pb-comm-group-head { padding: var(--sp-6) var(--sp-8) var(--sp-4); border-bottom: 1px solid hsl(var(--hairline)); }
.pb-public .pb-comm-group-head .pb-eyebrow { margin: 0; }
.pb-public .pb-comm-thead { padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid hsl(var(--hairline)); font: 600 12px/1.3 var(--app-font-sans); text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }
.pb-public .pb-comm-list > * + * { border-top: 1px solid hsl(var(--hairline)); }
.pb-public .pb-comm-list--gap { display: grid; gap: var(--sp-3); }
.pb-public .pb-comm-list--gap > * + * { border-top: 0; }
.pb-public .pb-comm-row { padding: var(--sp-4) var(--sp-6); transition: background-color var(--dur-1) var(--ease); }
.pb-public .pb-comm-row:hover { background: hsl(var(--surface-sunken) / .5); }
.pb-public .pb-comm-row.is-sticky { background: hsl(var(--tier-high-bg) / .35); }
.pb-public .pb-comm-card { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-6); background: hsl(var(--surface)); }
.pb-public .pb-comm-list--gap > .pb-comm-card, .pb-public .pb-comm-card--link, .pb-public .pb-comm-profile, .pb-public li > .pb-comm-card { border: 1px solid hsl(var(--hairline)); border-radius: var(--r-tile); }
.pb-public .pb-comm-card--link { transition: border-color var(--dur-1) var(--ease); }
.pb-public .pb-comm-card--link:hover { border-color: hsl(var(--line-strong)); }
.pb-public .pb-comm-profile { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-10); border-radius: var(--r-card); }
.pb-public .pb-comm-title { display: block; font: 600 16px/1.35 var(--app-font-sans); color: hsl(var(--ink-900)); }
.pb-public a.pb-comm-title:hover, .pb-public .pb-comm-card--link:hover .pb-comm-title { color: hsl(var(--primary-strong)); }
.pb-public .pb-comm-desc { margin: var(--sp-2) 0 0; font: 400 14px/1.5 var(--app-font-sans); color: hsl(var(--ink-500)); }
.pb-public .pb-comm-meta { margin: var(--sp-2) 0 0; font: 500 13px/1.4 var(--app-font-sans); color: hsl(var(--ink-500)); font-variant-numeric: tabular-nums; }
.pb-public .pb-comm-stats { display: flex; gap: var(--sp-6); margin-left: auto; font-size: 13px; color: hsl(var(--ink-500)); font-variant-numeric: tabular-nums; }
.pb-public .pb-avatar--sm { width: 36px; height: 36px; font-size: 13px; }
.pb-public .pb-avatar--lg { width: 96px; height: 96px; font-size: 30px; }
.pb-public .pb-stamp { font-variant-numeric: tabular-nums; }
.pb-public .pb-meta-sep { margin: 0 .5em; }
.pb-public .pb-meta-line > span + span { margin-left: 0; }
.pb-public .pb-search-results { display: grid; gap: var(--sp-12); }
.pb-public .pb-search-results .pb-eyebrow { display: flex; align-items: center; gap: var(--sp-2); }
.pb-public .pb-suggest { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-10); }
.pb-public .pb-suggest .pb-eyebrow { margin: 0; }
.pb-public .pb-brand-name { font-weight: 600; color: hsl(var(--ink-700)); }

/* Forum quoted replies: importer emits <blockquote class="bb-quote"><cite>Name wrote:</cite>... */
.pb-public blockquote.bb-quote { margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-6); background: hsl(var(--surface-sunken)); border-left: 3px solid hsl(var(--line-strong)); border-radius: 0 var(--r-tile) var(--r-tile) 0; color: hsl(var(--ink-700)); font-size: .95em; }
.pb-public blockquote.bb-quote > cite { display: block; margin-bottom: var(--sp-2); font: 600 12px/1.3 var(--app-font-sans); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--ink-500)); }
.pb-public blockquote.bb-quote blockquote.bb-quote { background: hsl(var(--surface)); }

/* Market: quiet price formatter, retention row, alert baseline */
.pb-public .pb-market-price { font: 700 28px/1.15 var(--app-font-sans); color: hsl(var(--ink-900)); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pb-public .pb-market-price-ctx { font: 500 14px/1 var(--app-font-sans); color: hsl(var(--ink-500)); }
.pb-public .pb-market-retention { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-6); background: hsl(var(--surface-sunken)); border-radius: var(--r-tile); font: 500 14px/1.4 var(--app-font-sans); color: hsl(var(--ink-700)); font-variant-numeric: tabular-nums; }
.pb-public .pb-market-retention svg { color: hsl(var(--ink-500)); }
.pb-public .pb-market-retention-link { margin-left: auto; color: hsl(var(--primary-strong)); text-decoration: underline 1px; text-underline-offset: .2em; }
.pb-public .pb-market-alert { padding: var(--sp-6); background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-tile); }
.pb-public .pb-market-alert-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.pb-public .pb-market-alert-row > button { align-self: flex-end; }
@media print { .pb-public :is(.pb-comm-card, .pb-comm-group, blockquote.bb-quote) { break-inside: avoid; } }
.pb-public .pb-callout { padding: var(--sp-4) var(--sp-6); background: hsl(var(--surface-sunken)); border-radius: var(--r-tile); font: 500 14px/1.5 var(--app-font-sans); color: hsl(var(--ink-700)); }

/* Step 5b. Product wells: WHITE once loaded (and without JS). Sunken only
   while a product photo is still loading. Photos stay object-fit: contain,
   never cropped, recoloured or filtered. */
.pb-public :is(.pb-gun-card-media, .category-hub-card-image, .category-hub-related-image, .pb-cat-media, .pb-hero-well, .pb-gallery-frame, .vn-img-product, .vn-img-wrap-desktop) { background-color: hsl(var(--fill-white-fixed)); }
.js-ready .pb-public :is(.pb-gun-card-media, .category-hub-card-image, .category-hub-related-image, .pb-cat-media, .pb-gallery-frame):has(img:not([data-loaded]):not(.pb-logo-img)) { background-color: hsl(var(--surface-sunken)); }
.pb-public :is(.pb-gun-card-media, .category-hub-card-image, .category-hub-related-image, .pb-cat-media, .pb-gallery-frame) img { object-fit: contain; filter: none; mix-blend-mode: normal; }
.pb-public .pb-logo-img { background: transparent !important; }

/* Step 5b. Gun hero: ONE frame. The well is the only border; the gallery
   inside carries no second frame and no trailing empty band. */
.pb-public .pb-hero-well .pb-gallery { margin: 0; }
.pb-public .pb-hero-well .pb-gallery-frame { border: 0 !important; border-radius: calc(var(--r-card) - 6px); background-color: hsl(var(--fill-white-fixed)); margin: 0; }
.pb-public .pb-hero-well .pb-gallery-thumbs { margin-top: var(--sp-4); }
.pb-public .pb-hero-well > :last-child, .pb-public .pb-hero-well .pb-gallery > :last-child { margin-bottom: 0 !important; }

/* Step 5b. Quick facts: one balanced column count, no spanning rows. */
.pb-public .pb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-public .pb-facts > .pb-fact, .pb-public .pb-facts > .pb-fact:last-child { grid-column: auto !important; }
@media (min-width: 768px) {
  .pb-public .pb-facts, .pb-public .pb-facts[class*="pb-facts--n"] { grid-template-columns: repeat(var(--facts-cols-md, 2), minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pb-public .pb-facts, .pb-public .pb-facts[class*="pb-facts--n"] { grid-template-columns: repeat(var(--facts-cols, 4), minmax(0, 1fr)); }
}

/* Step 6. Public polish ------------------------------------------------- */
/* H1s render exactly as authored: never transformed. H2 section titles keep their own case rules. */
.pb-public h1, .pb-static h1 { text-transform: none !important; }

/* Dark surfaces: orange headings, eyebrows and accents use the bright brand
   orange. --primary-strong stays the light-surface accent only. */
.pb-public :is(.pb-on-dark, .pb-band, .category-hub-hero) :is(.text-primary, .tone-accent, .t-eyebrow--strong, .hub-h1-accent, .pb-eyebrow:not(.tone-info):not(.tone-positive)) { color: hsl(var(--primary-bright)); }
.pb-public .pb-philosophy { background: var(--brand-base); color: hsl(var(--on-dark-1)); border-color: hsl(var(--on-dark-line)); }
.pb-public .pb-philosophy .pb-philosophy-title { color: hsl(var(--primary-bright)); }

/* Image wells: white once loaded, sunken only while loading. Full well width,
   object-fit: contain, photos never cropped or recoloured. */
.pb-public :is(.pb-img-well, .pb-brand-hero-media) { background-color: hsl(var(--fill-white-fixed)); }
.pb-public .pb-brand-hero-media { border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); padding: var(--sp-6); }
.pb-public :is(.pb-img-well, .pb-brand-hero-media) img { width: 100%; height: 100%; object-fit: contain !important; filter: none; mix-blend-mode: normal; }
.js-ready .pb-public .pb-img-well:has(img:not([data-loaded]):not(.pb-logo-img)) { background-color: hsl(var(--surface-sunken)); }
.pb-public img[data-loaded] { background: transparent; }

/* Phones: readable leads, nothing clipped; hero CTAs stack full width. */
@media (max-width: 639px) {
  .pb-public :is(.t-lead, .pb-brand-lead, .pb-hero-lead), .pb-static .category-hub-hero p {
    font-size: 17px !important; line-height: 1.55 !important; overflow: visible; -webkit-line-clamp: unset; display: block; max-width: 100%; overflow-wrap: anywhere;
  }
  .pb-public .pb-hero-ctas { flex-direction: column; align-items: stretch; }
  .pb-public .pb-hero-ctas > * { width: 100%; justify-content: center; }
}
@media (min-width: 640px) { .pb-public .pb-hero-ctas > * { width: auto; } }

/* src/styles/blog.css */
/* Blog templates use the same public tokens and surfaces as the gun pages. */
.pb-blog {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: hsl(var(--page));
  color: hsl(var(--ink-900));
  font-family: var(--app-font-sans);
  line-height: 1.6;
}
.pb-blog *, .pb-blog *::before, .pb-blog *::after { box-sizing: border-box; }
.pb-blog .pb-static { display: flex; flex-direction: column; min-height: 100vh; background: hsl(var(--page)); color: hsl(var(--ink-900)); }
.pb-blog .blog-main { width: 100%; max-width: calc(var(--wrap-standard) + var(--gutter) * 2); flex: 1; margin: 0 auto; padding: var(--page-top) var(--gutter) var(--section-y); }
.pb-blog .blog-main > .blog-crumbs { margin: 0 0 var(--sp-6); }
.pb-blog .blog-main--post > .blog-crumbs { width: 100%; max-width: calc(var(--wrap-reading) + var(--gutter) * 2); margin-inline: auto; }
.pb-blog .blog-empty a { color: hsl(var(--ink-900)); text-decoration: underline 1px hsl(var(--primary-strong)); text-underline-offset: .18em; }
.pb-blog .blog-kicker { margin: 0 0 var(--sp-3); font: 500 11px/1.3 var(--font-mono-plex); letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--primary-strong)); }
.pb-blog .blog-title { margin: 0 0 var(--sp-6); font: 800 clamp(2rem, 1.4rem + 2.6vw, 3.25rem)/1.08 var(--app-font-display); letter-spacing: -.02em; color: hsl(var(--ink-900)); text-wrap: balance; }
.pb-blog .blog-lede { max-width: 68ch; margin: 0 0 var(--sp-8); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: hsl(var(--ink-700)); }
.pb-blog .blog-main > .blog-crumbs + .blog-kicker,
.pb-blog .blog-main > .blog-crumbs + .blog-archive-badge { margin-top: 0; }
.pb-blog .blog-article { width: 100%; max-width: var(--wrap-reading); margin-inline: auto; }
.pb-blog .blog-article > .blog-title { max-width: 22ch; }
.pb-blog .blog-article > .blog-crumbs { margin-bottom: var(--sp-6); }
.pb-blog .blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin: 0 0 var(--sp-8); font: 400 13px/1.45 var(--font-mono-plex); color: hsl(var(--ink-500)); }
.pb-blog .blog-meta time, .pb-blog time { font-variant-numeric: tabular-nums; }
.pb-blog .blog-byline { display: inline-flex; align-items: center; gap: var(--sp-2); color: hsl(var(--ink-700)); }
.pb-blog .blog-byline a { color: hsl(var(--ink-900)); font-family: var(--app-font-sans); font-weight: 600; }
.pb-blog .blog-date-label { display: inline-flex; align-items: baseline; gap: .3em; }
.pb-blog .blog-date-label time { color: hsl(var(--ink-700)); }
.pb-blog .blog-archive-badge { margin: 0 0 var(--sp-4); }

/* Index and author cards */
.pb-blog .blog-feature { margin: 0 0 var(--sp-6); }
.pb-blog .blog-list { display: grid; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.pb-blog .blog-card { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.7fr); min-width: 0; overflow: hidden; gap: var(--sp-6); padding: var(--sp-4); background: hsl(var(--surface)); color: hsl(var(--ink-900)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.pb-blog .blog-card:hover { transform: translateY(-2px); border-color: hsl(var(--line-strong)); box-shadow: var(--shadow-2); }
.pb-blog .blog-card-thumb { display: block; min-width: 0; align-self: stretch; overflow: hidden; aspect-ratio: 4 / 3; background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-tile); }
.pb-blog .blog-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pb-blog .blog-card-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--sp-3) var(--sp-2); }
.pb-blog .blog-card-kicker { margin: 0 0 var(--sp-2); font: 500 11px/1.3 var(--font-mono-plex); letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--ink-500)); }
.pb-blog .blog-card h2 { margin: 0 0 var(--sp-3); font: 700 clamp(1.125rem, 1rem + .4vw, 1.25rem)/1.15 var(--app-font-display); text-wrap: balance; }
.pb-blog .blog-card h2 a { color: hsl(var(--ink-900)); text-decoration: none; }
.pb-blog .blog-card h2 a:hover { color: hsl(var(--primary-strong)); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.pb-blog .blog-card-excerpt { max-width: 60ch; margin: 0 0 var(--sp-4); color: hsl(var(--ink-700)); line-height: 1.55; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.pb-blog .blog-card-date { margin: auto 0 0; padding-top: var(--sp-3); font: 500 11px/1.4 var(--font-mono-plex); letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--ink-500)); }
.pb-blog .blog-card--text-only { grid-template-columns: minmax(0, 1fr); }
.pb-blog .blog-card--feature { grid-template-columns: minmax(280px, 1.25fr) minmax(0, 1fr); padding: var(--sp-6); }
.pb-blog .blog-card--feature .blog-card-thumb { align-self: center; }
.pb-blog .blog-card--feature h2 { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); }
.pb-blog .blog-empty { margin-top: var(--sp-6); padding: var(--sp-8); background: hsl(var(--surface)); border: 1px dashed hsl(var(--line-strong)); border-radius: var(--r-card); color: hsl(var(--ink-700)); text-align: center; }
.pb-blog .blog-empty strong { display: block; margin-bottom: var(--sp-2); font: 700 1.25rem/1.2 var(--app-font-display); color: hsl(var(--ink-900)); }
.pb-blog .blog-empty p { margin: 0; }
.pb-blog .blog-archive { margin-top: var(--section-y); padding-top: var(--sp-8); border-top: 1px solid hsl(var(--hairline)); }
.pb-blog .blog-archive > h2 { margin: 0 0 var(--sp-6); font: 800 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.1 var(--app-font-display); letter-spacing: -.02em; text-transform: uppercase; }
.pb-blog .blog-archive-year { padding: var(--sp-6) 0; border-top: 1px solid hsl(var(--hairline)); }
.pb-blog .blog-archive-year h3 { margin: 0 0 var(--sp-3); font: 500 11px/1.3 var(--font-mono-plex); letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--ink-500)); }
.pb-blog .blog-archive-year ul { display: grid; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.pb-blog .blog-archive-year li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-6); color: hsl(var(--ink-700)); }
.pb-blog .blog-archive-year li a { color: hsl(var(--ink-900)); text-decoration: underline 1px hsl(var(--primary-strong) / .35); text-underline-offset: .18em; }
.pb-blog .blog-archive-year li time { color: hsl(var(--ink-500)); font: 400 12px/1.5 var(--font-mono-plex); }
.pb-blog .blog-archive-year details { margin-top: var(--sp-3); }
.pb-blog .blog-archive-year details > summary { width: fit-content; color: hsl(var(--primary-strong)); cursor: pointer; font: 600 14px/1.5 var(--app-font-sans); }
.pb-blog .blog-archive-year details > ul { margin-top: var(--sp-3); }

/* Post template and editorial content */
.pb-blog .blog-disclosure { margin: 0 0 var(--sp-6); padding: var(--sp-4) var(--sp-6); background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-tile); color: hsl(var(--ink-700)); font-size: 14px; }
.pb-blog .blog-quick { margin: 0 0 var(--sp-8); padding: var(--sp-6) var(--sp-8); background: hsl(var(--surface-sunken)); border: 1px solid hsl(var(--hairline)); border-left: 3px solid hsl(var(--primary-bright)); border-radius: var(--r-card); }
.pb-blog .blog-quick h2 { margin: 0 0 var(--sp-2); color: hsl(var(--primary-strong)); font: 500 11px/1.3 var(--font-mono-plex); letter-spacing: .12em; text-transform: uppercase; }
.pb-blog .blog-quick p { margin: 0; max-width: 68ch; color: hsl(var(--ink-700)); }
.pb-blog .blog-hero { margin: 0 0 var(--sp-6); }
.pb-blog .blog-hero img { display: block; width: 100%; height: auto; background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); }
.pb-blog .blog-hero figcaption, .pb-blog .blog-author-photo figcaption { margin-top: var(--sp-3); color: hsl(var(--ink-500)); font: 400 13px/1.5 var(--app-font-sans); }
.pb-blog .blog-changes { margin: 0 0 var(--sp-8); padding: var(--sp-4) 0; border-top: 1px solid hsl(var(--hairline)); border-bottom: 1px solid hsl(var(--hairline)); }
.pb-blog .blog-changes h2 { margin: 0 0 var(--sp-3); color: hsl(var(--primary-strong)); font: 500 11px/1.3 var(--font-mono-plex); letter-spacing: .12em; text-transform: uppercase; }
.pb-blog .blog-changes ul { display: grid; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.pb-blog .blog-changes li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--sp-3); color: hsl(var(--ink-700)); font-size: 14px; }
.pb-blog .blog-changes time { color: hsl(var(--ink-500)); font: 500 12px/1.5 var(--font-mono-plex); }
.pb-blog .blog-content { max-width: 68ch; color: hsl(var(--ink-700)); font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.pb-blog .blog-content :where(p, ul, ol) { max-width: 68ch; }
.pb-blog .blog-content :where(p, ul, ol, blockquote, figure, table) { margin-block: var(--sp-6); }
.pb-blog .blog-content :where(h2, h3, h4) { color: hsl(var(--ink-900)); font-family: var(--app-font-display); font-weight: 700; letter-spacing: -.01em; text-transform: none; text-wrap: balance; }
.pb-blog .blog-content h2 { margin: var(--sp-10) 0 var(--sp-3); font-size: clamp(1.5rem, 1.2rem + .8vw, 1.875rem); line-height: 1.12; }
.pb-blog .blog-content h3 { margin: var(--sp-8) 0 var(--sp-3); font-size: 1.375rem; line-height: 1.15; }
.pb-blog .blog-content h4 { margin: var(--sp-6) 0 var(--sp-2); font-size: 1.125rem; line-height: 1.2; }
.pb-blog .blog-content a { color: hsl(var(--ink-900)); text-decoration: underline 1px hsl(var(--primary-strong)); text-underline-offset: .18em; }
.pb-blog .blog-content a:hover { text-decoration-thickness: 2px; }
.pb-blog .blog-content ul { list-style: none; padding-left: 0; }
.pb-blog .blog-content ul > li { position: relative; padding-left: var(--sp-6); }
.pb-blog .blog-content ul > li::before { content: ""; position: absolute; top: .7em; left: 4px; width: 6px; height: 6px; border-radius: var(--r-pill); background: hsl(var(--primary-bright)); }
.pb-blog .blog-content ol { padding-left: 1.75rem; }
.pb-blog .blog-content ol > li::marker { color: hsl(var(--ink-500)); font: 500 .9em var(--font-mono-plex); font-variant-numeric: tabular-nums; }
.pb-blog .blog-content li + li { margin-top: var(--sp-2); }
.pb-blog .blog-content blockquote { padding: var(--sp-2) 0 var(--sp-2) var(--sp-6); border-left: 3px solid hsl(var(--primary-bright)); color: hsl(var(--ink-700)); }
.pb-blog .blog-content img, .pb-blog .blog-content video { display: block; max-width: 100%; height: auto; }
.pb-blog .blog-content figure { margin-inline: 0; }
.pb-blog .blog-content figure:not(.figure-wide):not(.pick) { width: fit-content; max-width: 100%; text-align: left; }
.pb-blog .blog-content figure:not(.figure-wide):not(.pick) img { width: auto; max-width: 100%; height: auto; margin-inline: 0; }
.pb-blog .blog-content figcaption { margin-top: var(--sp-3); color: hsl(var(--ink-500)); font: 400 13px/1.5 var(--app-font-sans); }
.pb-blog .blog-content .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid hsl(var(--hairline)); border-radius: var(--r-tile); background: hsl(var(--surface)); }
.pb-blog .blog-content .table-wrap table { width: 100%; min-width: 36rem; margin: 0; border-collapse: collapse; font-size: 14px; }
.pb-blog .blog-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pb-blog .blog-content caption { padding: var(--sp-3) var(--sp-4); color: hsl(var(--ink-500)); font: 500 11px/1.4 var(--font-mono-plex); text-align: left; }
.pb-blog .blog-content th, .pb-blog .blog-content td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid hsl(var(--hairline)); text-align: left; vertical-align: top; }
.pb-blog .blog-content th { background: hsl(var(--surface-sunken)); color: hsl(var(--ink-700)); font: 600 12px/1.4 var(--app-font-sans); }
.pb-blog .blog-content details { margin-block: var(--sp-4); padding: var(--sp-4) var(--sp-6); background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); }
.pb-blog .blog-content details > summary { color: hsl(var(--ink-900)); cursor: pointer; font-weight: 600; }
.pb-blog .blog-content .table-wrap table { max-width: none; }
.pb-blog .blog-content .pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); width: min(var(--wrap-standard), calc(100vw - var(--gutter) * 2)); margin-block: var(--sp-8); margin-left: calc((100% - min(var(--wrap-standard), calc(100vw - var(--gutter) * 2))) / 2); }
.pb-blog .blog-content figure.pick { display: flex; flex-direction: column; min-width: 0; margin: 0; background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; }
.pb-blog .blog-content figure.pick img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--sp-4); background: hsl(var(--surface)); border-bottom: 1px solid hsl(var(--hairline)); }
.pb-blog .blog-content figure.pick figcaption { padding: var(--sp-3) var(--sp-4); color: hsl(var(--ink-700)); font-size: 14px; }
.pb-blog .blog-content ul.sources { list-style: none; padding: var(--sp-4) 0 0; border-top: 1px solid hsl(var(--hairline)); color: hsl(var(--ink-500)); font-size: 14px; }
.pb-blog .blog-content ul.sources li { padding-left: 0; overflow-wrap: anywhere; }
.pb-blog .blog-content ul.sources li::before { display: none; }
.pb-blog .blog-content p.note { padding-left: var(--sp-4); border-left: 3px solid hsl(var(--line-strong)); color: hsl(var(--ink-500)); font-size: 14px; }
.pb-blog .blog-content .callout, .pb-blog .blog-content .callout-warn, .pb-blog .blog-content .callout-tip, .pb-blog .blog-content .tip { display: flex; align-items: flex-start; gap: var(--sp-3); margin-block: var(--sp-6); padding: var(--sp-4) var(--sp-6); background: hsl(var(--surface-sunken)); border: 1px solid hsl(var(--hairline)); border-left: 3px solid hsl(var(--primary-bright)); border-radius: var(--r-card); color: hsl(var(--ink-700)); }
.pb-blog .blog-content .callout-warn { border-left-color: hsl(var(--tone-caution)); }
.pb-blog .blog-content .callout-tip, .pb-blog .blog-content .tip { border-left-color: hsl(var(--tone-positive)); }
.pb-blog .blog-content .callout > :last-child, .pb-blog .blog-content .callout-warn > :last-child, .pb-blog .blog-content .callout-tip > :last-child, .pb-blog .blog-content .tip > :last-child { margin-bottom: 0; }
.pb-blog .blog-content .callout > svg, .pb-blog .blog-content .callout-warn > svg, .pb-blog .blog-content .callout-tip > svg, .pb-blog .blog-content .tip > svg { flex: none; }
.pb-blog .blog-content .figure-wide { width: min(var(--wrap-standard), calc(100vw - var(--gutter) * 2)); margin-block: var(--sp-8); margin-left: calc((100% - min(var(--wrap-standard), calc(100vw - var(--gutter) * 2))) / 2); }
.pb-blog .blog-content .figure-wide img { display: block; width: 100%; height: auto; border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); }
.pb-blog .blog-content .figure-wide figcaption { color: hsl(var(--ink-500)); font-size: 13px; }

/* Shared FAQ, series and author surfaces */
.pb-blog .blog-faq, .pb-blog .blog-series { margin-top: var(--sp-10); }
.pb-blog .blog-faq > h2, .pb-blog .blog-series > h2, .pb-blog .blog-section-title { margin: 0 0 var(--sp-4); font: 800 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.1 var(--app-font-display); letter-spacing: -.02em; text-transform: uppercase; color: hsl(var(--ink-900)); }
.pb-blog .blog-faq details.faq-native { margin-bottom: var(--sp-3); }
.pb-blog .blog-faq details.faq-native > summary { gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); }
.pb-blog .blog-faq .faq-answer { padding: 0 var(--sp-6) var(--sp-4); color: hsl(var(--ink-700)); }
.pb-blog .blog-faq .faq-answer p { margin: 0; }
.pb-blog .blog-series { padding: var(--sp-6); background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.pb-blog .blog-series ol { list-style: none; margin: 0; padding: 0; counter-reset: series; }
.pb-blog .blog-series li { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid hsl(var(--hairline)); counter-increment: series; }
.pb-blog .blog-series li::before { content: counter(series, decimal-leading-zero); color: hsl(var(--ink-500)); font: 500 12px/1.5 var(--font-mono-plex); }
.pb-blog .blog-series li:first-child { border-top: 0; }
.pb-blog .blog-series a { display: inline-flex; align-items: center; gap: var(--sp-2); color: hsl(var(--primary-strong)); font-weight: 600; }
.pb-blog .blog-series a svg { width: 16px; height: 16px; }
.pb-blog .blog-series [aria-current="page"] { color: hsl(var(--ink-900)); font-weight: 600; }
.pb-blog .blog-authorbox { display: flex; align-items: flex-start; gap: var(--sp-4); margin-top: var(--sp-10); padding: var(--sp-6); background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.pb-blog .blog-authorbox p { margin: 0; color: hsl(var(--ink-700)); font-size: 14px; }
.pb-blog .blog-authorbox .blog-authorbox-name { margin-bottom: var(--sp-2); color: hsl(var(--ink-900)); font: 700 18px/1.2 var(--app-font-display); }
.pb-blog .blog-authorbox-name a { color: inherit; }
.pb-blog .blog-avatar, .pb-blog .blog-avatar-photo, .pb-blog .blog-byline-photo { display: grid; place-items: center; flex: none; border-radius: var(--r-pill); }
.pb-blog .blog-avatar { width: 72px; height: 72px; background: hsl(var(--surface-sunken)); color: hsl(var(--ink-700)); border: 1px solid hsl(var(--hairline)); font: 600 14px/1 var(--font-mono-plex); }
.pb-blog .blog-avatar--sm { width: 28px; height: 28px; font-size: 10px; }
.pb-blog .blog-avatar--lg { width: 240px; height: 240px; font-size: 32px; }
.pb-blog .blog-byline-photo { width: 28px; height: 28px; object-fit: cover; }
.pb-blog .blog-avatar-photo { width: 72px; height: 72px; object-fit: cover; }
.pb-blog .blog-author { display: flex; align-items: flex-start; gap: var(--sp-6); margin: 0 auto var(--sp-10); max-width: var(--wrap-standard); }
.pb-blog .blog-author > p { max-width: 68ch; margin: 0; color: hsl(var(--ink-700)); font-size: 16px; line-height: 1.6; }
.pb-blog .blog-author-photo { flex: none; width: 240px; margin: 0; }
.pb-blog .blog-author-photo img { display: block; width: 240px; height: 240px; object-fit: cover; border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); background: hsl(var(--surface)); }

/* Disclosure, preview and 404 states */
.pb-blog .blog-preview-bar { display: flex; align-items: center; gap: var(--sp-3); max-width: var(--wrap-reading); margin: 0 auto var(--sp-6); padding: var(--sp-3) var(--sp-4); border: 1px solid hsl(var(--tone-info)); border-radius: var(--r-tile); background: hsl(var(--tone-info-bg)); color: hsl(var(--tone-info)); font-size: 14px; }
.pb-blog .blog-preview-bar svg { width: 18px; height: 18px; flex: none; }
.pb-blog .blog-error-page { max-width: calc(var(--wrap-reading) + var(--gutter) * 2); }
.pb-blog .blog-not-found-search { display: flex; align-items: center; gap: var(--sp-3); max-width: 32rem; margin: var(--sp-6) 0 var(--sp-8); }
.pb-blog .blog-not-found-search .pb-input { min-width: 0; flex: 1; }
.pb-blog .blog-not-found-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pb-blog .blog-not-found-links .pb-btn { text-decoration: none; }

/* Footer and embedded shopping content */
.pb-blog .pb-footer { margin-top: auto; background: hsl(var(--surface-sunken)); border-top: 1px solid hsl(var(--hairline)); }
.pb-blog .pb-footer a, .pb-blog .pb-footer a.pb-footer-link { color: hsl(var(--ink-700)); }
.pb-blog .pb-footer a:hover { color: hsl(var(--ink-900)); }
.pb-blog .pb-footer-logos { padding-block: var(--sp-8); }
.pb-blog .pb-footer-logos .pb-logo-strip { margin-top: var(--sp-4); }
.pb-blog .blog-content .prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--sp-4); width: min(var(--wrap-standard), calc(100vw - var(--gutter) * 2)); margin-block: var(--sp-8); margin-left: calc((100% - min(var(--wrap-standard), calc(100vw - var(--gutter) * 2))) / 2); }
.pb-blog .blog-content .prod { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; background: hsl(var(--surface)); border: 1px solid hsl(var(--hairline)); border-radius: var(--r-card); box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.pb-blog .blog-content .prod:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pb-blog .blog-content .prod-img { display: block; height: 180px; padding: var(--sp-3); background: hsl(var(--surface)); border-bottom: 1px solid hsl(var(--hairline)); }
.pb-blog .blog-content .prod-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pb-blog .blog-content .prod-body { display: flex; flex: 1; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.pb-blog .blog-content .prod-name { margin: 0; color: hsl(var(--ink-900)); font: 700 16px/1.25 var(--app-font-display); }
.pb-blog .blog-content .prod-name a { color: inherit; }
.pb-blog .blog-content .prod-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin: 0; }
.pb-blog .blog-content .prod-price .now { color: hsl(var(--ink-900)); font: 800 28px/1.1 var(--app-font-display); font-variant-numeric: tabular-nums; }
.pb-blog .blog-content .prod-price .was { color: hsl(var(--ink-500)); font-size: 14px; text-decoration: line-through; }
.pb-blog .blog-content .prod-where { margin: 0; color: hsl(var(--ink-500)); font: 400 12px/1.45 var(--font-mono-plex); }
.pb-blog .blog-content .prod-tag { align-self: flex-start; margin: var(--sp-2) 0 0; padding: 0 var(--sp-3); border-left: 3px solid hsl(var(--line-strong)); color: hsl(var(--ink-700)); font-size: 12px; }
.pb-blog .blog-content .prod-tag.good { border-left-color: hsl(var(--tone-positive)); color: hsl(var(--tone-positive)); }
.pb-blog .blog-content .prod-tag.flat { border-left-color: hsl(var(--line-strong)); color: hsl(var(--ink-500)); }
.pb-blog .blog-content .prod-tag.open { border-left-color: hsl(var(--tone-caution)); color: hsl(var(--tone-caution)); }
.pb-blog .blog-content .prod-tag.base { padding-left: 0; border-left: 0; color: hsl(var(--ink-500)); }
.pb-blog .blog-content .prod-credit { margin: auto 0 0; padding-top: var(--sp-3); color: hsl(var(--ink-500)); font-size: 11px; overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .pb-blog .blog-content .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pb-blog .blog-card, .pb-blog .blog-card--feature { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4); }
  .pb-blog .blog-card-thumb { width: 100%; }
  .pb-blog .blog-card-copy { padding: var(--sp-2); }
  .pb-blog .blog-card-excerpt { -webkit-line-clamp: 3; }
  .pb-blog .blog-content .pick-grid { grid-template-columns: minmax(0, 1fr); }
  .pb-blog .blog-author { flex-direction: column; }
  .pb-blog .blog-author-photo, .pb-blog .blog-author-photo img { width: min(240px, 100%); height: auto; aspect-ratio: 1; }
  .pb-blog .blog-not-found-search { flex-direction: column; align-items: stretch; }
  .pb-blog .blog-not-found-search .pb-btn { align-self: flex-start; }
}
@media (max-width: 480px) {
  .pb-blog .blog-changes li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pb-blog .blog-content .prod-grid { gap: var(--sp-3); }
  .pb-blog .blog-content .prod-img { height: 130px; padding: var(--sp-2); }
  .pb-blog .blog-content .prod-price .now { font-size: 22px; }
  .pb-blog .blog-content .prod-body { padding: var(--sp-3); }
  .pb-blog .blog-authorbox { gap: var(--sp-3); padding: var(--sp-4); }
  .pb-blog .blog-authorbox .blog-avatar, .pb-blog .blog-authorbox .blog-avatar-photo { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-blog *, .pb-blog *::before, .pb-blog *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: 0s !important; }
  .pb-blog .blog-card:hover, .pb-blog .blog-content .prod:hover { transform: none; }
}