/* ══════════════════════════════════════════════════════════════════════════
   pv-skin.css — the PREVIEW (feat/site-clarity, :8088) design rules the
   design-compare options need, ported from its clay.css + site.css and
   scoped so they apply only where a preview option is chosen:
     html[data-v-menu="b"]    the visible nav + frosted band (menu option b)
     html[data-v-heads="b"]   label-only section rules (heads option b)
     [data-kit="preview"]     a section rendered by site/kit_preview (its
                              section-head sub-lines, testimonial names, …)
   Loaded on every page while COMPARE_PANEL is on (site/variants.py). Warm
   literals of the source are written as clay.css tokens, so blue works.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── menu b: the band at rest is transparent; scrolled, it condenses and a
   blurred sheet of the ground (::before) sits under the logo, nav and CTA ── */
html[data-v-menu="b"] .hdr__in { position: relative; }
html[data-v-menu="b"] .hdr--stuck,
html[data-v-menu="b"] .hdr--stuck.hdr--over-dark {
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-v-menu="b"] .hdr::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0;
  background: rgba(var(--ground-rgb), .8);
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), .06);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  transition: opacity .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
html[data-v-menu="b"] .hdr--stuck::before { opacity: 1; }
html[data-v-menu="b"] .hdr--over-dark::before {
  background: rgba(var(--dark-rgb), .68);
  box-shadow: 0 1px 0 rgba(var(--cream-rgb), .08);
}
html[data-v-menu="b"] .hdr--drawer::before { opacity: 0; }
@media (max-width: 940px) {
  html[data-v-menu="b"] .hdr--stuck { height: var(--head-h); }
  html[data-v-menu="b"] .hdr--stuck .hdr__logo img { height: 26px; }
}

/* the nav itself: hidden unless menu b, centred in the band from 941px */
.hdr .nav[data-vg="menu"] { display: none; }
html[data-v-menu="b"] .nav__list { display: flex; align-items: center; gap: clamp(24px, 2.8vw, 44px);
  margin: 0; padding: 0; list-style: none; }
html[data-v-menu="b"] .nav__item { position: relative; }
html[data-v-menu="b"] .nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 10px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
  font: 500 14px/1 Inter, sans-serif; letter-spacing: .05em; color: var(--ink);
  text-decoration: none; white-space: nowrap;
  transition: color .28s var(--ease);
}
html[data-v-menu="b"] .nav__link[aria-current="page"] { background: transparent; box-shadow: none; }
html[data-v-menu="b"] .nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; opacity: .75;
  transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease);
}
html[data-v-menu="b"] .nav__link:hover::after, html[data-v-menu="b"] .nav__link[aria-expanded="true"]::after,
html[data-v-menu="b"] .nav__link[aria-current="page"]::after,
html[data-v-menu="b"] .nav__item[data-current="true"] > .nav__link::after { transform: scaleX(1); }
html[data-v-menu="b"] .nav__chev { opacity: .55; transition: transform .3s var(--ease); }
html[data-v-menu="b"] .nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
html[data-v-menu="b"] .hdr--over-dark .nav__link { color: rgba(var(--cream-rgb), .86); }
html[data-v-menu="b"] .hdr--over-dark .nav__link:hover, html[data-v-menu="b"] .hdr--over-dark .nav__link[aria-expanded="true"],
html[data-v-menu="b"] .hdr--over-dark .nav__link[aria-current="page"] { color: var(--cream); }
html[data-v-menu="b"] .nav__panel {
  position: absolute; left: -16px; top: calc(100% + 8px); z-index: 5; min-width: 236px;
  padding: 10px 8px; border-radius: var(--r);
  background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-943) 100%);
  box-shadow: var(--clay-lg);
  opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
html[data-v-menu="b"] .nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
html[data-v-menu="b"] .nav__panel[data-open="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
}
html[data-v-menu="b"] .nav__sub {
  display: block; padding: 11px 16px; border-radius: 14px;
  font: 500 14px/1.25 Inter, sans-serif; letter-spacing: .05em; color: var(--ink-muted);
  white-space: nowrap;
  transition: color .22s var(--ease), background-color .22s var(--ease), box-shadow .22s var(--ease);
}
html[data-v-menu="b"] .nav__sub:hover, html[data-v-menu="b"] .nav__sub:focus-visible {
  color: var(--ink); background: rgba(255, 255, 255, .6); box-shadow: var(--clay-in); outline: none; }
html[data-v-menu="b"] .nav__sub[aria-current="page"] { color: var(--bronze-deep); }
@media (min-width: 941px) {
  html[data-v-menu="b"] .hdr .nav[data-vg="menu"] { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  html[data-v-menu="b"] .burger { display: none; }
}
/* the preview's band carries no theme pill (the theme stays in the compare panel) */
html[data-v-menu="b"] .hdr__acts .theme-tog,
html[data-v-menu="b"] .drawer__theme { display: none; }
/* the preview's drawer: one size for every link */
html[data-v-menu="b"] .drawer__link { padding: 13px 0; font: 300 1.5rem/1.15 Newsreader, Georgia, serif; }
html[data-v-menu="b"] .drawer__link--sub { padding: 9px 0; }

/* ── heads b: section rules carry a label only ───────────────────────────── */
html[data-v-heads="b"] .chapter__rule > .chapter__no { display: none; }

/* ── sections rendered by the preview kit (its site.css "Round 2") ───────── */
[data-kit="preview"] .duet__sub { max-width: 52ch; }
[data-kit="preview"] .chapter__row > p { max-width: 44ch; }
[data-kit="preview"] .chapter__rule > .chapter__no { display: none; }
[data-kit="preview"] .testi__who { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
[data-kit="preview"] .testi__who b { font: 500 13.5px/1.4 Inter, sans-serif; color: var(--ink); }
[data-kit="preview"] .testi__who span { font: 400 12.5px/1.5 Inter, sans-serif; color: var(--ink-soft); }
.win-sec[data-kit="preview"] .win-sec__head { padding-top: clamp(56px, 7vw, 92px); padding-bottom: clamp(18px, 3vw, 36px); }
.win-sec[data-kit="preview"] .win-sec__head .chapter { margin-bottom: 0; }