/* ============================================================
   REVIEW SECTION STYLES
   Shared by index.html and confirmed.html, which render the same
   proof section. Extracted from index.html 2026-08-30 so the two
   pages cannot drift apart. The markup and the 183-review data live
   in reviews.js.

   Depends on the host page's custom properties: --accent, --panel,
   --line, --line-soft, --text, --muted, --dim, --mono.
   ============================================================ */

  /* ---------- stars ---------- */
  .stars{display:flex;gap:.28rem;line-height:0}
  .stars svg{width:17px;height:17px;fill:var(--accent);filter:drop-shadow(0 0 5px rgba(227,146,68,.35))}
  .ticker .stars svg{width:13px;height:13px;filter:none}

  /* ---------- review ticker ---------- */
  .tickwrap{
    margin-top:1rem;position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  }
  .ticker{overflow:hidden}
  .ticker.row2{margin-top:1rem}
  .ticker-track{
    display:flex;gap:1rem;width:max-content;
    animation:slide 90s linear infinite;
  }
  .tickwrap:hover .ticker-track{animation-play-state:paused}
  @keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  .chip{
    width:330px;flex:none;border:1px solid var(--line);background:var(--panel);
    padding:1.05rem 1.15rem;display:flex;flex-direction:column;gap:.7rem;text-align:left;
  }
  .chip q{quotes:none;font-size:.86rem;line-height:1.55;color:var(--muted);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    min-height:calc(3 * 1.55 * .86rem);}
  .chip .cf{
    margin-top:auto;
    display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
    font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--dim);border-top:1px solid var(--line-soft);padding-top:.7rem;
  }
  .chip .cf b{color:var(--text);font-weight:500}
  .chip .cf .jt{color:var(--dim);text-transform:none;letter-spacing:.02em;font-size:.74rem;text-align:right;max-width:58%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .chip .cf i{font-style:normal;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:.78rem}
  .tickhead{
    display:flex;align-items:center;gap:1rem;
    margin:clamp(2.25rem,4vw,3rem) 0 0;
    font-family:var(--mono);font-size:.74rem;font-weight:500;
    letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
  }
  .tickhead span{flex:1;height:1px;background:var(--line)}
  .tickfoot{
    margin:1.1rem 0 0;text-align:center;font-family:var(--mono);font-size:.74rem;
    letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  }
  .tickwrap{content-visibility:auto;contain-intrinsic-size:auto 420px}
  .ticker-track{animation-play-state:paused}
  .tickwrap.running .ticker-track{animation-play-state:running}
  @media (prefers-reduced-motion:reduce){.ticker-track{animation:none}.ticker{overflow-x:auto}}
  /* A 330px card does not fit a phone. The ticker window is 335px at 375px
     wide and the mask fades 17px at each end, so one edge of every card sat
     under the fade and read as cut off. Size the card to the window and the
     whole thing clears, with the neighbours peeking either side. */
  @media (max-width:700px){
    .chip{width:min(330px,calc(100vw - 5.5rem))}
  }

  /* ---------- stat readout (rebuilt 2026-08-29) ----------
     Four across at every width, including 375px. The old version was a
     filled panel of 2x2 boxes about 300px tall; this is a hairline strip
     around 120px. Labels carry a 3-line min-height so the numbers sit on
     one baseline no matter how many lines each label wraps to. */
  .stats{
    margin:clamp(1.75rem,3vw,2.5rem) 0 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .stat{
    padding:clamp(1.1rem,2.6vw,1.7rem) clamp(.4rem,1.4vw,1rem);
    display:flex;flex-direction:column;align-items:center;gap:.55rem;
    text-align:center;min-width:0;
    border-right:1px solid var(--line-soft);
    transition:background .18s ease;
  }
  .stat:last-child{border-right:0}
  .stat:hover{background:var(--panel)}
  .stat b{
    display:block;font-family:var(--mono);font-weight:500;
    font-size:clamp(1.45rem,5.4vw,2.5rem);letter-spacing:-.03em;
    color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;
  }
  .stat span{
    display:block;font-family:var(--mono);font-weight:500;
    font-size:clamp(.7rem,1.9vw,.78rem);
    letter-spacing:.09em;text-transform:uppercase;line-height:1.35;
    color:var(--muted);min-height:calc(1.35em * 3);
  }
  .stat-foot{
    margin:0;padding:.8rem 1rem;text-align:center;
    border-top:1px solid var(--line-soft);
    font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
    text-transform:uppercase;color:var(--dim);line-height:1.5;
  }
  /* Only below a Fold-width screen does four across stop working. */
  @media (max-width:359px){
    .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .stat:nth-child(2n){border-right:0}
    .stat:nth-child(n+3){border-top:1px solid var(--line-soft)}
    .stat span{min-height:calc(1.35em * 2)}
  }