html, body { background: var(--slate-50); }

  .container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
  main.container { padding-top: 4px; padding-bottom: 32px; }

  /* ============================================================
     BREADCRUMB
     ============================================================ */
  .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--slate-500); padding: 16px 0 4px; flex-wrap: wrap; }
  .breadcrumb a { color: var(--slate-500); transition: color .15s var(--ease); }
  .breadcrumb a:hover { color: var(--green-dark); }
  .breadcrumb .sep { color: var(--slate-300); }
  .breadcrumb .current { color: var(--slate-900); font-weight: 500; }

  /* ============================================================
     ARTICLE HERO
     ============================================================ */
  .article-hero {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 24px;
  }
  .article-hero-image {
    aspect-ratio: 21 / 9;
    background: var(--slate-100) center/cover;
    background-image: url('https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=1400&h=600&fit=crop');
  }
  .article-hero-meta {
    padding: 24px 32px 28px;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
  .article-cat-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .article-cat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    font-size: 12px;
    color: var(--slate-700);
    font-weight: 500;
  }
  .article-cat-meta {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--slate-500);
    font-size: 12px;
  }
  .article-cat-meta .meta-dot { width: 3px; height: 3px; background: var(--slate-300); border-radius: 50%; }
  .article-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--slate-900);
    letter-spacing: -.022em;
    line-height: 1.15;
    max-width: 760px;
    margin-bottom: 14px;
  }
  .article-tagline {
    font-size: 16px;
    color: var(--slate-600);
    line-height: 1.55;
    max-width: 680px;
  }
  .article-actions {
    display: flex; gap: 8px;
    flex-shrink: 0;
  }
  .btn-action {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px;
    padding: 0 14px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-700);
    cursor: pointer;
    transition: all .15s var(--ease);
  }
  .btn-action:hover { border-color: var(--slate-300); color: var(--slate-900); }
  .btn-action svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .btn-primary-action {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px;
    padding: 0 16px;
    background: var(--green);
    border: 1px solid var(--green);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    transition: all .15s var(--ease);
  }
  .btn-primary-action:hover { background: var(--green-hover); }
  .btn-primary-action svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* ============================================================
     LAYOUT
     ============================================================ */
  .layout {
    display: grid;
    /* minmax(0,…) (not bare 1fr) so the column can shrink BELOW its content's
       min-content. Without it, an overflow-x:auto child (e.g. .product-gallery-strip,
       whose non-shrinking tiles sum to ~520px) floors the track at its own width and
       blows the whole page past the mobile viewport instead of scrolling internally. */
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
  }
  /* Grid items default to min-width:auto (won't shrink below content); zero it so
     they honor the minmax(0,…) track and contain their own horizontal overflow. */
  .layout > * { min-width: 0; }
  @media (max-width: 1024px) { .layout { grid-template-columns: minmax(0, 1fr); } }

  .card {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 18px;
  }
  .card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--slate-100);
    gap: 12px;
  }
  .card-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-900);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .card-title svg { width: 14px; height: 14px; stroke: var(--slate-500); fill: none; stroke-width: 2; }
  .card-action-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--green-dark);
    transition: color .15s var(--ease);
  }
  .card-action-link:hover { color: var(--green); }
  .card-action-link svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
  .card-body { padding: 22px; }

  /* ============================================================
     ARTICLE BODY (rich content)
     ============================================================ */
  .article-body {
    padding: 24px 32px 30px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--slate-700);
  }
  .article-body p { margin-bottom: 16px; }
  .article-body h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--slate-900);
    letter-spacing: -.012em;
    margin: 28px 0 12px;
  }
  .article-body h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--slate-900);
    margin: 22px 0 8px;
  }
  .article-body ul, .article-body ol { margin: 0 0 16px 24px; }
  .article-body li { margin-bottom: 6px; }
  .article-body a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
  .article-body blockquote {
    border-left: 3px solid var(--green);
    padding: 4px 0 4px 20px;
    margin: 18px 0;
    font-style: italic;
    color: var(--slate-600);
  }
  .article-body img { border-radius: var(--radius-md); margin: 18px 0; }

  /* Pros / Cons inline */
  .pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 22px 0;
    padding: 20px;
    background: var(--slate-50);
    border-radius: var(--radius-md);
  }
  @media (max-width: 600px) { .pros-cons { grid-template-columns: 1fr; gap: 14px; } }
  .pc-col { display: flex; flex-direction: column; gap: 8px; }
  .pc-col h4 {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .pc-col.is-pro h4 { color: var(--green-dark); }
  .pc-col.is-con h4 { color: #B45309; }
  .pc-col h4 svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; }
  .pc-col ul { margin: 0 0 0 20px; padding: 0; }
  .pc-col li { font-size: 14px; color: var(--slate-700); line-height: 1.5; }

  /* ============================================================
     RATINGS BAR (5 criteria)
     ============================================================ */
  /* Two-column layout on desktop: average + stars + review count on the LEFT,
     per-criterion bar list on the RIGHT, with a subtle vertical divider
     between them. Both columns center-aligned vertically so the visual
     weight balances regardless of how many criteria are listed. */
  .ratings-card-body {
    padding: 28px 26px;
    display: grid;
    grid-template-columns: minmax(170px, 200px) 1fr;
    gap: 36px;
    align-items: center;
  }
  /* Visual divider between the two columns — subtle, matches card borders. */
  .ratings-card-body > .criteria-list {
    position: relative;
    padding-left: 28px;
    border-left: 1px solid var(--slate-100);
  }
  .ratings-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
  }
  /* The big number can stay flush left — bumps the visual rhythm with the
     star row directly under it, no extra horizontal offset. */
  .ratings-summary .rating-summary-meta {
    min-width: 0;
    flex: 0 1 auto;
    width: 100%;
  }
  .rating-big-num {
    font-size: 56px; font-weight: 800;
    color: var(--slate-900);
    letter-spacing: -.024em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .rating-summary-meta { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
  /* Stars sized to match the visual weight of the 56px number above. Smaller
     icons (18px) felt disconnected; 22px reads as part of the same "summary
     block" without overpowering the number. */
  .rating-stars-big { display: inline-flex; gap: 3px; }
  .rating-stars-big svg { width: 22px; height: 22px; fill: var(--amber-500); }
  .rating-stars-big svg.is-empty { fill: var(--slate-200); }
  .rating-summary-count { font-size: 13px; color: var(--slate-500); line-height: 1.4; }
  .rating-summary-count b { color: var(--slate-700); font-weight: 600; }

  .criteria-list { display: flex; flex-direction: column; gap: 11px; }
  .criterion-row {
    display: grid;
    /* Narrower name column + bar fills remaining space + tight value column.
       Previous 200px name column left the bar very stretched; 140-180px range
       lets longer labels still fit (Communication, Conformity) but keeps the
       bar at a readable length. */
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) 36px;
    gap: 14px;
    align-items: center;
  }
  .criterion-name {
    font-size: 13px;
    color: var(--slate-600);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .criterion-bar {
    height: 8px;
    background: var(--slate-100);
    border-radius: 999px;
    overflow: hidden;
  }
  .criterion-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--green-light), var(--green));
    border-radius: 999px;
    transition: width .8s var(--ease-out);
  }
  .criterion-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--slate-900);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 700px) {
    /* Below 700px: collapse the 2-column layout back to vertical stack.
       Reset the desktop-only vertical divider (border-left + padding-left
       on .criteria-list) that was causing the broken visual on mobile. */
    .ratings-card-body {
      grid-template-columns: 1fr;
      gap: 18px;
      padding: 20px 18px;
      align-items: stretch;
    }
    .ratings-card-body > .criteria-list {
      padding-left: 0;
      border-left: none;
    }
    .ratings-summary {
      flex-direction: row;
      align-items: center;
      gap: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--slate-100);
      flex-wrap: wrap;
    }
    .rating-big-num { font-size: 44px; }
    .rating-stars-big svg { width: 18px; height: 18px; }

    /* Criterion rows: compact 2-line layout —
       Row 1: [Name              Value]   (label + numeric, no bar)
       Row 2: [══════════════════════]    (bar fills full row width)
       Tight 4px gap between row 1 and row 2 so they read as one unit;
       11px gap between criteria. Previous mobile rule had a bar-full-width
       layout with no clear grouping — name appeared isolated above an
       empty space, then the bar+value showed up below. */
    .criterion-row {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "name value"
        "bar bar";
      column-gap: 12px;
      row-gap: 5px;
    }
    .criterion-name {
      grid-area: name;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
    }
    .criterion-value { grid-area: value; font-size: 13px; }
    .criterion-bar   { grid-area: bar; height: 6px; }
  }

  /* ============================================================
     REVIEW CARD
     ============================================================ */
  .review-list { display: flex; flex-direction: column; }
  .review-item {
    padding: 20px 22px;
    border-bottom: 1px solid var(--slate-100);
    display: flex; flex-direction: column; gap: 10px;
    /* v1.2.104 (G6): nicer landing offset when a Most-positive / Most-critical
       highlight card deep-links to #review-{ID}. No sticky nav on this page so
       a small breathing room is enough — no need for the company page's 96px. */
    scroll-margin-top: 24px;
  }
  .review-item:last-child { border-bottom: none; }
  .review-head {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
  }
  .review-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-light), var(--green-dark));
    color: var(--white);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .review-author { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 140px; }
  .review-name {
    font-size: 14px; font-weight: 700; color: var(--slate-900);
    display: flex; align-items: center; gap: 6px;
  }
  .verified-tick { width: 13px; height: 13px; fill: var(--green); }
  .review-meta { font-size: 12px; color: var(--slate-500); }
  .review-stars { display: inline-flex; gap: 2px; }
  .review-stars svg { width: 14px; height: 14px; fill: var(--amber-400); }
  .review-stars svg.is-empty { fill: var(--slate-200); }
  .review-vendor-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    font-size: 12px;
    color: var(--slate-700);
    font-weight: 500;
  }
  .review-vendor-tag .va {
    width: 16px; height: 16px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--white);
    flex-shrink: 0;
  }
  .review-vendor-tag .va img { width: 100%; height: 100%; object-fit: cover; }
  .review-title { font-size: 15px; font-weight: 700; color: var(--slate-900); line-height: 1.4; }
  .review-body { font-size: var(--fs-xl); color: var(--slate-700); line-height: var(--lh-relaxed); /* v1.2.51: 14→16 / 1.6→1.7 per PDF audit */ }
  .review-foot {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
  }
  .review-helpful {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent;
    border: 1px solid var(--slate-200);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--slate-700);
    cursor: pointer;
    transition: all .15s var(--ease);
  }
  .review-helpful:hover { background: var(--slate-50); border-color: var(--slate-300); }
  .review-helpful svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  .review-reply {
    margin-top: 4px;
    padding: 14px 16px;
    background: var(--green-50);
    border-left: 3px solid var(--green);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }
  .review-reply-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    color: var(--green-dark);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .review-reply-head svg { width: 13px; height: 13px; fill: var(--green); }
  .review-reply-body { font-size: 13px; color: var(--slate-700); line-height: 1.55; }

  /* Most-critical / Most-positive highlight cards */
  .highlight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  @media (max-width: 700px) { .highlight-grid { grid-template-columns: 1fr; } }
  /* v1.2.103 (C14): highlight-card is now an <a> (was <div>) so the whole card
     deep-links to the review below. Reset anchor styling + add affordance hover. */
  .highlight-card {
    border: 1px solid;
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform .12s var(--ease), box-shadow .12s var(--ease);
  }
  .highlight-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px -4px rgba(15,23,42,.10); }
  .highlight-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  .highlight-card.is-positive { background: var(--green-50); border-color: var(--green-200); }
  .highlight-card.is-critical { background: #FEF2F2; border-color: #FECACA; }
  .highlight-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .highlight-card.is-positive .highlight-eyebrow { color: var(--green-dark); }
  .highlight-card.is-critical .highlight-eyebrow { color: var(--red-600); }
  .highlight-eyebrow svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; }
  .highlight-stars { display: inline-flex; gap: 2px; }
  .highlight-stars svg { width: 13px; height: 13px; fill: var(--amber-400); }
  .highlight-stars svg.is-empty { fill: var(--slate-200); }
  .highlight-text { font-size: 14px; color: var(--slate-700); line-height: 1.55; font-style: italic; }
  .highlight-author { font-size: 12px; color: var(--slate-500); margin-top: auto; }

  /* ============================================================
     RELATED PRODUCTS (small card grid in body)
     ============================================================ */
  .rel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  @media (max-width: 760px) { .rel-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .rel-grid { grid-template-columns: 1fr; } }
  .rel-card {
    background: var(--white);
    border: 1px solid var(--slate-100);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all .15s var(--ease);
  }
  .rel-card:hover { border-color: var(--green-200); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .rel-image { aspect-ratio: 16 / 10; background: var(--slate-100); overflow: hidden; border-radius: 12px; margin: 10px 10px 0; }
  .rel-image img { width: 100%; height: 100%; object-fit: cover; }
  .rel-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
  .rel-title { font-size: 13px; font-weight: 600; color: var(--slate-900); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rel-meta { font-size: 11px; color: var(--slate-500); display: inline-flex; align-items: center; gap: 4px; }
  .rel-meta svg { width: 11px; height: 11px; fill: var(--amber-400); }
  .rel-vendor {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--slate-100);
    font-size: 11px;
    color: var(--slate-500);
  }
  .rel-vendor-stack {
    display: inline-flex; align-items: center;
    flex-shrink: 0;
  }
  .rel-vendor-avatar {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--white);
    background: var(--white);
    box-shadow: 0 0 0 1px rgba(15,23,42,.06);
    overflow: hidden;
    margin-left: -4px;
    flex-shrink: 0;
  }
  .rel-vendor-stack > .rel-vendor-avatar:first-child { margin-left: 0; }
  .rel-vendor-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .rel-vendor-avatar.is-overflow {
    background: var(--green);
    color: var(--white);
    font-size: 8px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .rel-vendor-name {
    color: var(--slate-700);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ============================================================
     SIDEBAR
     ============================================================ */
  .sidebar { display: flex; flex-direction: column; gap: 16px; align-self: start; }

  .sb-card {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .sb-section { padding: 18px 20px; }
  .sb-section + .sb-section { border-top: 1px solid var(--slate-100); }
  .sb-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
  }
  .sb-label svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

  /* Vendor block in sidebar */
  .sb-vendor {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--slate-100);
    border-radius: var(--radius-md);
    transition: all .15s var(--ease);
    margin-bottom: 8px;
  }
  .sb-vendor:last-child { margin-bottom: 0; }
  .sb-vendor:hover { border-color: var(--green-200); background: var(--green-50); }
  .sb-vendor-logo {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--slate-200);
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sb-vendor-logo img { width: 100%; height: 100%; object-fit: cover; }
  .sb-vendor-meta { flex: 1; min-width: 0; }
  .sb-vendor-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-900);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  /* Verified checkmark — same circular green badge as on the complaint detail
     vendor block. Replaces the old "· Verified" text in the rating row. */
  .sb-vendor-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--green-600);
    color: var(--white);
    flex-shrink: 0;
  }
  .sb-vendor-check svg {
    width: 9px; height: 9px;
    stroke: currentColor; fill: none; stroke-width: 3;
  }
  /* Rating row — switched from "FB Score 8.0 · Verified" text to icon+number
     stat chips. Mirror of public-complaint.css; keep both in sync if changed. */
  .sb-vendor-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--slate-700);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .sb-vendor-stat {
    display: inline-flex; align-items: center; gap: 4px;
  }
  .sb-vendor-stat--muted {
    color: var(--slate-500);
    font-weight: 400;
  }
  .sb-vendor-fb-mark {
    width: 14px; height: 14px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .sb-vendor-rating .sb-vendor-stat svg {
    width: 12px; height: 12px;
    fill: var(--amber-500);
    flex-shrink: 0;
  }
  .sb-vendor-arrow { width: 14px; height: 14px; stroke: var(--slate-400); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* v1.2.105 (C16): mobile-only self-rating clone — desktop hides it (the
     sidebar's is-self-rating block carries the canonical render). At ≤1024px
     the sidebar reflows below content; we then swap: hide the sidebar copy,
     show the inline clone right after the hero so the rating is visible
     without scrolling past the entire article. Wraps in a card-like shell so
     it visually matches the surrounding sections. */
  .self-rating-mobile { display: none; }
  @media (max-width: 1024px) {
    .self-rating-mobile {
      display: block;
      margin-bottom: 16px;
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-radius: var(--radius-md);
    }
    .sidebar .sb-section.is-self-rating { display: none; }
  }

  /* Author rating mini */
  .author-rating-block {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: var(--green-50);
    border: 1px solid var(--green-100);
    border-radius: var(--radius-md);
  }
  .author-rating-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--green-dark);
    line-height: 1;
    min-width: 36px;
  }
  .author-rating-label { display: flex; flex-direction: column; gap: 2px; }
  .author-rating-stars { display: inline-flex; gap: 2px; }
  .author-rating-stars svg { width: 12px; height: 12px; fill: var(--green-dark); }
  .author-rating-stars svg.is-empty { fill: var(--green-200); }
  .author-rating-text { font-size: 12px; color: var(--slate-600); line-height: 1.4; }

  /* User aggregate rating mini */
  .user-rating-block {
    display: flex; align-items: center; gap: 12px;
  }
  .user-rating-num {
    font-size: 28px;
    font-weight: 800;
    color: var(--slate-900);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .user-rating-meta { display: flex; flex-direction: column; gap: 2px; }
  .user-rating-stars { display: inline-flex; gap: 2px; }
  .user-rating-stars svg { width: 13px; height: 13px; fill: var(--amber-400); }
  .user-rating-stars svg.is-empty { fill: var(--slate-200); }
  .user-rating-count { font-size: 12px; color: var(--slate-500); }

  /* Action buttons stacked */
  .sb-actions { display: flex; flex-direction: column; gap: 8px; }
  .sb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s var(--ease);
    border: 1px solid;
  }
  .sb-btn.is-primary { background: var(--green); color: var(--white); border-color: var(--green); }
  .sb-btn.is-primary:hover { background: var(--green-hover); }
  .sb-btn.is-secondary { background: var(--white); color: var(--slate-700); border-color: var(--slate-200); }
  .sb-btn.is-secondary:hover { border-color: var(--slate-300); color: var(--slate-900); }
  .sb-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* ============================================================
     COMPLAINT ROW (mini)
     ============================================================ */
  .complaint-mini {
    padding: 14px 22px;
    border-bottom: 1px solid var(--slate-100);
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
  }
  .complaint-mini:last-child { border-bottom: none; }
  .complaint-mini-text {
    flex: 1; min-width: 200px;
  }
  .complaint-mini-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-900);
  }
  .complaint-mini-meta {
    font-size: 12px;
    color: var(--slate-500);
    margin-top: 2px;
  }
  /* .complaint-status removed — mini-list pills route through the canonical
     `.badge .badge-<status>` in design-system.css now. */
  /* ============================================================
     ARTICLE HERO CTAs (mobile-only)
     ============================================================
     Mirror of the sidebar's three action buttons. On desktop the
     sticky sb-card sits right of the hero, so users see CTAs the
     moment they land. On mobile the sidebar reflows below the
     article column and CTAs disappear far below the fold — so we
     surface the same three buttons inside the hero meta block. */
  .article-hero-actions { display: none; }
  @media (max-width: 700px) {
    .article-hero-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 18px;
    }
  }

  /* ============================================================
     MOBILE — comprehensive padding/gap pass
     ============================================================
     Goal: consistent rhythm across the page. Container is 16px
     (matches public-company.css). Card chrome compresses from
     22px → 16px. Section padding compresses from 18-20px → 16px.
     Removes hardcoded min-widths that broke wrapping on narrow
     phones (review-author, complaint-mini-text). */
  @media (max-width: 600px) {
    /* Page chrome */
    .container { padding: 0 16px; }
    .layout { gap: 14px; }
    .sidebar { gap: 14px; }

    /* Article hero */
    .article-hero { border-radius: var(--radius-lg); margin-bottom: 14px; }
    .article-hero-meta { padding: 18px 16px 20px; flex-direction: column; align-items: stretch; gap: 0; }
    .article-cat-row { gap: 6px 8px; margin-bottom: 10px; }
    .article-cat-pill { font-size: 11px; padding: 3px 9px; }
    .article-cat-meta { font-size: 11px; }
    .article-title { font-size: 24px; margin-bottom: 10px; }
    .article-tagline { font-size: 14px; }
    .article-actions { width: 100%; }

    /* Cards */
    .card { margin-bottom: 14px; border-radius: var(--radius-lg); }
    .card-header { padding: 14px 16px; flex-wrap: wrap; gap: 6px 10px; }
    .card-title { font-size: 13px; }
    .card-action-link { font-size: 12px; }
    .card-body { padding: 16px; }

    /* Article body */
    .article-body { padding: 18px 16px 20px; font-size: 15px; }
    .article-body h2 { font-size: 19px; margin: 22px 0 10px; }
    .article-body h3 { font-size: 16px; margin: 18px 0 6px; }

    /* Pros/cons */
    .pros-cons { padding: 16px; margin: 18px 0; }

    /* Reviews */
    .review-item { padding: 16px; gap: 8px; }
    .review-head { gap: 8px; }
    /* min-width:140px was forcing the author column to push vendor-tag +
       stars into a third row on narrow phones — drop it on mobile so
       everything wraps naturally. */
    .review-author { min-width: 0; flex: 1 1 auto; }
    .review-title { font-size: 14px; }
    .review-body { font-size: var(--fs-lg); /* 15px on mobile — v1.2.51 was 13px */ }

    /* Complaint mini */
    .complaint-mini { padding: 12px 16px; gap: 10px; }
    .complaint-mini-text { min-width: 0; flex: 1 1 100%; }

    /* Highlights */
    .highlight-card { padding: 14px; gap: 8px; }

    /* Sidebar (when stacked below content on mobile) */
    .sb-section { padding: 16px; }
    .sb-vendor { padding: 10px 12px; gap: 10px; }
    .sb-vendor-logo { width: 34px; height: 34px; }
    .sb-vendor-name { font-size: 13px; }
    .sb-actions { gap: 8px; }
    .author-rating-block { padding: 10px 12px; gap: 8px; }
    .user-rating-block { gap: 10px; }
    .user-rating-num { font-size: 24px; }
  }


/* #16: product gallery merged into the description as a horizontal scrollable strip
   (replaces the old standalone "Gallery" card the client found "detached from the text"). */
.product-gallery-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	margin-top: 18px;
	padding-bottom: 6px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.product-gallery-strip .pg-tile {
	flex: 0 0 auto;
	width: 150px;
	height: 150px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--slate-200);
	scroll-snap-align: start;
	background: var(--slate-50);
	cursor: zoom-in;
}
.product-gallery-strip .pg-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .2s ease;
}
.product-gallery-strip .pg-tile:hover img { transform: scale(1.04); }
@media (max-width: 600px) {
	.product-gallery-strip { gap: 8px; margin-top: 14px; }
	.product-gallery-strip .pg-tile { width: 124px; height: 124px; border-radius: 10px; }
}