/* Paid landing pages (intent 2026-10-25-weave-site-paid-landing-fact-strip, DESIGN.md beside its spec).
   The fact strip sits in the hero for every visitor; the bar shows on paid arrivals at 760 px and under.
   Separators are pseudo-elements: css/refresh-integration.css resets every border on a list item inside
   main with !important, so a border on the item itself never renders. Every item carries one separator
   at its left edge, one pixel outside the item; the list is pulled left by that much and clips, so the
   first item of every row (the strip wraps in the hero column) shows no separator. */
.care-refresh .care-hero .fact-strip {
  display:flex; flex-wrap:wrap; column-gap:16px; row-gap:8px;
  list-style:none; margin:22px 0 0 -17px; padding:0; overflow:hidden;
  color:#fff; font-size:17px; font-weight:500; line-height:1.45;
  font-variant-numeric:tabular-nums lining-nums;
}
.care-refresh .care-hero .fact-strip li {
  position:relative; display:block;
  margin:0; padding:0 0 0 17px; color:inherit; font-size:17px; font-weight:500; line-height:1.45;
}
.care-refresh .care-hero .fact-strip li::before {
  content:""; position:absolute; left:-1px; top:50%; width:1px; height:1.1em;
  transform:translateY(-50%); background:rgba(255,255,255,.35);
}
@media (max-width:520px) {
  .care-refresh .care-hero .fact-strip { flex-direction:column; row-gap:0; margin-left:0; overflow:visible; }
  .care-refresh .care-hero .fact-strip li { padding:8px 0; }
  .care-refresh .care-hero .fact-strip li::before {
    position:static; display:block; width:100%; height:0; margin:0 0 8px; transform:none;
    background:none; border-top:1px dashed rgba(255,255,255,.35);
  }
  .care-refresh .care-hero .fact-strip li:first-child::before { display:none; }
}

.wv-bar { display:none; }
@media (max-width:760px) {
  html[data-wv-paid] .wv-bar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:82;
    align-items:center; gap:14px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--cloth); color:var(--ink-2); border-top:1px solid var(--hairline);
    box-sizing:border-box;
  }
  html[data-wv-paid] .wv-bar a { flex:0 0 auto; min-height:50px; }
  html[data-wv-paid] .wv-bar p { flex:1 1 auto; min-width:0; margin:0; font-size:16px; line-height:1.4; }
  /* The reserved height is the bar's measured height (the script writes --wv-bar-h on the root
     after it appends the bar and on resize); 88px plus the safe area until it is measured. */
  html[data-wv-paid] body { padding-bottom:var(--wv-bar-h, calc(88px + env(safe-area-inset-bottom))); }
  html[data-wv-paid] #weave-cookie-panel { bottom:calc(16px + var(--wv-bar-h, calc(88px + env(safe-area-inset-bottom)))); }
}
/* Under 360px the button alone fills a row, so the reply line goes under it (the measured
   reserve above follows the taller bar). */
@media (max-width:360px) {
  html[data-wv-paid] .wv-bar { flex-wrap:wrap; row-gap:6px; }
  html[data-wv-paid] .wv-bar p { flex:1 1 100%; }
}
@media print { .wv-bar { display:none !important; } }