/* WSS Fleet Design 1.0.1 — Precision Guild & Liquid Glass.
 * Scoped to existing widget roots + data-wss-fleet-design-* only.
 * No resets, no universal selectors, no imported or remote stylesheets.
 * Motion: transform/opacity only; reduced-motion => static.
 * Never sets display on [hidden] roots. Color comes from the bound palette.
 */

/* ---------------- tokens ----------------
 * Rail: its own inline --wss-rail-* (renderer-bound). Beta: its bound --wss-beta-theme-*.
 * Sibling roots (real videos, map, chat) never inherit those; they read
 * --wss-fleet-design-* written by paletteCarrier() from the SAME resolved release
 * palette verdict. With no admitted accent everything falls back to neutral graphite. */
.wss-trust-rail[data-wss-fleet-design-skin],
[data-wss-fleet-design-skin],
#wss-customer-videos.wss-customer-videos,
#wss-beta-demo-videos.wss-beta-videos,
.wss-geo[data-geo-experience] {
  --wfd-accent: var(--wss-rail-accent, var(--wss-beta-theme-accent, var(--wss-fleet-design-accent, #4B5563)));
  --wfd-ink: var(--wss-rail-ink, var(--wss-beta-theme-ink, var(--wss-fleet-design-ink, #14201b)));
  --wfd-detail: var(--wss-rail-detail, var(--wss-beta-theme-detail, var(--wss-fleet-design-detail, #3a4a44)));
  --wfd-lens: var(--wss-rail-surface, var(--wss-beta-theme-surface, var(--wss-fleet-design-surface, #ffffff)));
  --wfd-raised: var(--wss-rail-raised, var(--wss-beta-theme-raised, var(--wss-fleet-design-raised, #ffffff)));
  --wfd-gilt: color-mix(in oklab, var(--wfd-accent) 40%, #c9a24e 60%);
  --wfd-glow: color-mix(in oklab, var(--wfd-accent) 42%, transparent);
  --wfd-r: var(--wss-rail-radius, 14px);
  --wfd-px: 0;
  --wfd-py: 0;
}

/* ---------------- trust rail ---------------- */
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-rail-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: clamp(.75rem, 1.6vw, 1.15rem);
  align-items: stretch;
}
@media (min-width: 900px) {
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-rail-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem 1.05rem .85rem;
  border-radius: calc(var(--wfd-r) + 6px);
  border: 1px solid color-mix(in oklab, var(--wfd-accent) 30%, transparent);
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--wfd-raised) 92%, #fff 8%), color-mix(in oklab, var(--wfd-raised) 80%, var(--wfd-accent) 6%));
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff 70%, transparent),
    inset 0 -1px 0 color-mix(in oklab, var(--wfd-accent) 18%, transparent),
    0 18px 44px -22px var(--wfd-glow),
    0 2px 6px -2px color-mix(in oklab, var(--wfd-ink) 18%, transparent);
  overflow: hidden;
}
/* liquid-glass edge light: a soft sheen that drifts across (transform only, slow) */
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, color-mix(in oklab, #fff 55%, transparent), transparent);
  opacity: .5;
  transform: translateX(0) rotate(12deg);
  animation: wfd-sheen 11s ease-in-out infinite;
  pointer-events: none;
}
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--wfd-accent) 16%, transparent), transparent 70%);
  pointer-events: none;
}

/* emblem stage: the PRIMARY mark is semantic (destination brand, BBB wordmark,
 * license or coverage medal). The trade engraving sits in the small rim coin. */
.wss-fleet-design-emblem {
  position: relative;
  display: grid;
  place-items: center;
  height: 112px;
  margin: 0;
  transform: translate3d(calc(var(--wfd-px) * 4px), calc(var(--wfd-py) * 4px), 0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.wss-fleet-design-float {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  animation: wfd-float 6s ease-in-out infinite;
  filter: drop-shadow(0 10px 16px var(--wfd-glow));
}
.wss-fleet-design-medal { display: block; width: 104px; height: 104px; }
.wss-fleet-design-medal > svg { display: block; width: 100%; height: 100%; }
.wss-fleet-design-brand-plate {
  display: grid;
  place-items: center;
  min-width: 132px;
  height: 84px;
  padding: 0 22px;
  border-radius: 22px;
  background: linear-gradient(170deg, #fff, color-mix(in oklab, #fff 90%, var(--wfd-accent) 10%));
  border: 1px solid color-mix(in oklab, var(--wfd-accent) 34%, transparent);
  box-shadow: inset 0 1px 0 #fff, inset 0 -8px 18px -10px color-mix(in oklab, var(--wfd-accent) 30%, transparent), 0 0 0 5px color-mix(in oklab, var(--wfd-accent) 9%, transparent);
}
.wss-fleet-design-brand-img { display: block; height: 54px; width: auto; max-width: 176px; object-fit: contain; }
.wss-fleet-design-wordmark {
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 196px;
  height: 84px;
  padding: 0 16px;
  border-radius: 22px;
  color: var(--wfd-ink);
  background: linear-gradient(170deg, #fff, color-mix(in oklab, #fff 88%, var(--wfd-accent) 12%));
  border: 1px solid color-mix(in oklab, var(--wfd-accent) 34%, transparent);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 5px color-mix(in oklab, var(--wfd-accent) 9%, transparent);
}
.wss-fleet-design-wordmark > b { font: 900 2.35rem/1 var(--wss-rail-font, var(--client-display, system-ui, sans-serif)); letter-spacing: .06em; }
.wss-fleet-design-wordmark > i { font: 700 .6rem/1.1 var(--wss-rail-font, var(--client-body, system-ui, sans-serif)); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.wss-fleet-design-rim {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--wfd-accent) 14%, #fff), transparent);
  filter: drop-shadow(0 4px 8px var(--wfd-glow));
}
.wss-fleet-design-rim > svg { display: block; width: 100%; height: 100%; }
.wss-fleet-design-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--wfd-glow), transparent 72%);
  opacity: .55;
  animation: wfd-halo 6s ease-in-out infinite;
}
.wss-fleet-design-state {
  position: absolute;
  left: calc(50% + 34px);
  bottom: 2px;
  width: 34px;
  height: 34px;
  display: none;
  border-radius: 50%;
  background: var(--wfd-lens);
  box-shadow: 0 4px 14px -4px var(--wfd-glow);
}
.wss-fleet-design-emblem[data-wss-fleet-design-mark="brand"] .wss-fleet-design-state,
.wss-fleet-design-emblem[data-wss-fleet-design-mark="bbb"] .wss-fleet-design-state { left: calc(50% + 62px); }
.wss-fleet-design-emblem[data-wss-fleet-design-mark="bbb"] .wss-fleet-design-state { left: calc(50% + 90px); bottom: 34px; }
.wss-fleet-design-state > svg { display: block; width: 100%; height: 100%; }
/* r4: the badge tick (status cue) and outbound arrow (action cue) are drawn in the measured ink on an
 * opaque badge, never the raw accent (yellow-on-cream measured 1.2:1). CSS stroke overrides the 1.0.1
 * SVG presentation attributes, so the installed artwork bytes stay unchanged. Accent stays as the halo. */
.wss-trust-rail[data-wss-fleet-design-skin] .wss-fleet-design-state { background-color: var(--wfd-raised); box-shadow: 0 0 0 2px color-mix(in oklab, var(--wfd-accent) 65%, transparent), 0 4px 14px -4px var(--wfd-glow); }
.wss-trust-rail[data-wss-fleet-design-skin] .wss-fleet-design-state > svg > path,
.wss-trust-rail[data-wss-fleet-design-skin] .wss-fleet-design-state > svg > circle:first-of-type { stroke: var(--wfd-ink); }
/* Evidence gate: positive ring exists only while the existing runtime keeps the
 * card positive. Browser neutralization sets data-positive="false" and
 * data-status-state, which hides it in the same frame. */
.wss-trust-card[data-positive="true"]:not([data-status-state]) .wss-fleet-design-state-record { display: block; }
.wss-trust-card:not([data-evidence="typed"]) .wss-fleet-design-state-link { display: block; }

/* replace the generic DETAILS shield visually (node retained, still aria-hidden) */
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-art-depth { display: none; }
/* the genuine destination mark is shown large in the stage; its small duplicate in the link is not painted (node kept) */
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card:has(> .wss-fleet-design-emblem[data-wss-fleet-design-mark="brand"]) .wss-trust-card-link .wss-brand-mark { display: none; }

/* compact phone rail: small stage left, words right — six cards stay compact before the media */
@media (max-width: 599px) {
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-rail-inner { padding-inline: 0; }
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-rail-links { gap: .5rem; }
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: .65rem;
    row-gap: 0;
    padding: .55rem .6rem .1rem .5rem;
  }
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-fleet-design-emblem { grid-row: 1 / span 2; height: 64px; align-self: start; margin-top: .2rem; }
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-link,
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-detail { grid-column: 2; }
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-link { position: relative; padding-right: 1.4rem; gap: 0; grid-template-columns: minmax(0, 1fr); }
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-arrow { position: absolute; right: 0; top: .3rem; }
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-label { font-size: 1rem; }
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-sub { font-size: .8rem; line-height: 1.32; }
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-detail { font-size: .78rem; }
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-detail summary { min-height: 44px; }
  .wss-fleet-design-medal { width: 58px; height: 58px; }
  .wss-fleet-design-brand-plate, .wss-fleet-design-wordmark { min-width: 0; width: 60px; height: 48px; padding: 0 6px; border-radius: 14px; box-shadow: inset 0 1px 0 #fff, 0 0 0 3px color-mix(in oklab, var(--wfd-accent) 9%, transparent); }
  .wss-fleet-design-brand-img { height: 26px; max-width: 50px; }
  .wss-fleet-design-wordmark > b { font-size: 1.25rem; }
  .wss-fleet-design-wordmark > i { display: none; }
  .wss-fleet-design-rim { width: 24px; height: 24px; top: -4px; right: -6px; }
  .wss-fleet-design-halo { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
  .wss-fleet-design-state, .wss-fleet-design-emblem[data-wss-fleet-design-mark] .wss-fleet-design-state { left: auto; right: -6px; bottom: 0; width: 22px; height: 22px; }
}

/* link + copy: bold, readable, OUTSIDE the art */
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  color: var(--wfd-ink);
  text-decoration: none;
  border-radius: var(--wfd-r);
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: .25rem 0;
}
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-link:hover .wss-trust-card-label { text-decoration: underline; text-underline-offset: 3px; }
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-link:focus-visible {
  outline: 3px solid var(--wfd-accent);
  outline-offset: 3px;
}
.wss-trust-rail[data-wss-fleet-design-skin] .wss-brand-mark,
.wss-trust-rail[data-wss-fleet-design-skin] .wss-third-party-mark {
  height: 30px;
  width: auto;
  max-width: 108px;
  object-fit: contain;
  padding: 5px 8px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .14);
}
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-label {
  font-family: var(--wss-rail-font, var(--client-display, inherit));
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--wfd-ink);
}
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-sub {
  font-size: .86rem;
  line-height: 1.4;
  color: var(--wfd-detail);
}
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-record-accent {
  display: inline-grid;
  place-items: center;
  margin-left: .4rem;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  font-size: .8em;
  /* r4: status cue must read on any card. Badge = measured ink (>=7:1 vs the card), glyph = card tone;
   * the accent stays as a ring only (decorative). Exists only while the engine keeps the card positive. */
  background: var(--wfd-ink);
  color: var(--wfd-raised);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--wfd-accent) 70%, transparent);
  vertical-align: .1em;
}
/* r4: the outbound arrow is an action cue: measured ink, not the raw accent. */
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card-arrow { color: var(--wfd-ink); font-weight: 800; }
/* r4: rail contact CTA on the accent uses the renderer's own measured on-accent tone. */
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-rail-cta-primary { background: var(--wfd-accent); color: var(--wss-rail-on-accent, #101820); }
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-rail-cta-secondary { background: var(--wfd-raised); color: var(--wfd-ink); }
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-detail { margin-top: auto; font-size: .84rem; color: var(--wfd-detail); }
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-detail summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  color: var(--wfd-ink);
}
.wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-detail summary:focus-visible { outline: 3px solid var(--wfd-accent); outline-offset: 2px; border-radius: 6px; }

/* ---------------- video bezels (real and demo roots are separate) ----------------
 * Geometry law: the ornaments are 34px squares at -12px, the bezel padding is 22px,
 * so each ornament ends exactly where the footage begins (zero-area intersection).
 * Nothing is ever painted over a face, the footage or a baked-in disclosure. */
#wss-customer-videos.wss-customer-videos .wss-customer-video,
#wss-beta-demo-videos.wss-beta-videos .wss-beta-clip {
  position: relative;
  margin: 0;
  padding: 22px 22px 14px;
  border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--wfd-raised, #fff) 94%, #fff 6%), color-mix(in oklab, var(--wfd-raised, #fff) 82%, var(--wfd-accent, #4B5563) 8%));
  border: 1px solid color-mix(in oklab, var(--wfd-accent, #4B5563) 28%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 22px 50px -28px var(--wfd-glow, rgb(75 85 99 / .4));
  isolation: isolate;
}
#wss-customer-videos.wss-customer-videos .wss-customer-video::before,
#wss-customer-videos.wss-customer-videos .wss-customer-video::after,
#wss-beta-demo-videos.wss-beta-videos .wss-beta-clip::before,
#wss-beta-demo-videos.wss-beta-videos .wss-beta-clip::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  z-index: 2;
  background: var(--wfd-frame-paint, transparent);
  -webkit-mask: var(--wfd-frame-url) center / contain no-repeat;
  mask: var(--wfd-frame-url) center / contain no-repeat;
  pointer-events: none;
  opacity: .95;
  inset: auto;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
#wss-customer-videos.wss-customer-videos .wss-customer-video::before,
#wss-beta-demo-videos.wss-beta-videos .wss-beta-clip::before { left: -12px; top: -12px; }
#wss-customer-videos.wss-customer-videos .wss-customer-video::after,
#wss-beta-demo-videos.wss-beta-videos .wss-beta-clip::after { right: -12px; top: -12px; transform: scaleX(-1); }

/* compact 2–3 across on desktop, one swipeable column-row on phones. Never on [hidden]. */
#wss-customer-videos.wss-customer-videos:not([hidden]),
#wss-beta-demo-videos.wss-beta-videos:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 15.5rem));
  justify-content: center;
  align-items: start;
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
#wss-customer-videos.wss-customer-videos > .wss-customer-videos-head,
#wss-customer-videos.wss-customer-videos > .wss-customer-videos-note,
#wss-beta-demo-videos.wss-beta-videos > .wss-customer-videos-head { grid-column: 1 / -1; text-align: center; }
/* r4: the section heading sat on the unknown page canvas (1.28:1 on a dark canvas). It now sits on its own
 * opaque glass plate painted with the carried raised tone, so ink/detail are measured on known paint. */
#wss-customer-videos.wss-customer-videos > .wss-customer-videos-head,
#wss-beta-demo-videos.wss-beta-videos > .wss-customer-videos-head {
  justify-self: center;
  max-width: 44rem;
  padding: .85rem 1.25rem;
  border-radius: 18px;
  background-color: var(--wfd-raised, #fff);
  border: 1px solid color-mix(in oklab, var(--wfd-accent, #4B5563) 28%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 14px 34px -24px var(--wfd-glow, rgb(75 85 99 / .4));
  color: var(--wfd-ink, #14201b);
}
#wss-customer-videos.wss-customer-videos > .wss-customer-videos-head h2 { color: var(--wfd-ink, #14201b); }
#wss-customer-videos.wss-customer-videos .wss-customer-videos-intro { color: var(--wfd-detail, #3a4a44); margin-bottom: 0; }
#wss-customer-videos.wss-customer-videos .wss-customer-video[data-wss-fleet-design-orientation="landscape"] { grid-column: span 2; }
@media (max-width: 599px) {
  #wss-customer-videos.wss-customer-videos:not([hidden]),
  #wss-beta-demo-videos.wss-beta-videos:not([hidden]) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 15rem);
    justify-content: start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  #wss-customer-videos.wss-customer-videos > .wss-customer-videos-head,
  #wss-customer-videos.wss-customer-videos > .wss-customer-videos-note,
  #wss-beta-demo-videos.wss-beta-videos > .wss-customer-videos-head { grid-column: 1 / -1; grid-row: 1; position: sticky; left: 0; }
  #wss-customer-videos.wss-customer-videos > .wss-customer-videos-note { grid-row: 3; }
  #wss-customer-videos.wss-customer-videos .wss-customer-video,
  #wss-beta-demo-videos.wss-beta-videos .wss-beta-clip { grid-row: 2; scroll-snap-align: center; }
  #wss-customer-videos.wss-customer-videos .wss-customer-video[data-wss-fleet-design-orientation="landscape"] { grid-column: auto; }
}

/* The design skin supersedes the generic corner clip-art inside the media. The existing node is kept; only it is not painted. */
#wss-customer-videos.wss-customer-videos .wss-cv-frame,
#wss-beta-demo-videos.wss-beta-videos .wss-cv-frame { display: none; }

/* full-subject media: never stretch, never crop faces or burned-in disclosures */
#wss-customer-videos.wss-customer-videos .wss-cv-media,
#wss-beta-demo-videos.wss-beta-videos .wss-cv-media {
  display: block;
  aspect-ratio: 4 / 7;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in oklab, var(--wfd-ink, #14201b) 92%, var(--wfd-accent, #4B5563));
}
#wss-customer-videos.wss-customer-videos .wss-customer-video[data-wss-fleet-design-orientation="landscape"] .wss-cv-media { aspect-ratio: 16 / 9; }
#wss-customer-videos.wss-customer-videos .wss-cv-media > video,
#wss-customer-videos.wss-customer-videos .wss-cv-media > img,
#wss-beta-demo-videos.wss-beta-videos .wss-cv-media > video,
#wss-beta-demo-videos.wss-beta-videos .wss-cv-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
}
#wss-customer-videos.wss-customer-videos figcaption,
#wss-beta-demo-videos.wss-beta-videos figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  padding: .75rem .25rem .1rem;
  color: var(--wfd-ink, #14201b);
  font-size: .9rem;
}
#wss-customer-videos.wss-customer-videos figcaption strong,
#wss-beta-demo-videos.wss-beta-videos figcaption strong { font-weight: 800; letter-spacing: .01em; }
/* AI demo section: ONE clear section disclosure (existing label + intro), clean per-clip captions. */
#wss-beta-demo-videos.wss-beta-videos .wss-beta-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 auto .35rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wfd-ink, #14201b);
  background: color-mix(in oklab, var(--wfd-accent, #4B5563) 13%, #fff);
  border: 1px solid color-mix(in oklab, var(--wfd-accent, #4B5563) 40%, transparent);
}
#wss-beta-demo-videos.wss-beta-videos .wss-customer-videos-intro { max-width: 40rem; margin-inline: auto; font-size: .92rem; color: var(--wfd-detail, #3a4a44); }
.wss-fleet-design-ai-note {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--wfd-ink, #14201b);
  background: color-mix(in oklab, var(--wfd-accent, #4B5563) 12%, #fff);
  border: 1px solid color-mix(in oklab, var(--wfd-accent, #4B5563) 35%, transparent);
}

/* Map runtime slot: frame only, never overlays tiles, attribution or controls */
.wss-geo[data-geo-experience] .wss-geo-mapstage {
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--wfd-accent) 45%, transparent);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--wfd-accent) 9%, transparent), 0 24px 54px -30px color-mix(in oklab, var(--wfd-accent) 55%, transparent);
}

/* ---------------- chat launcher: liquid-glass paint only (geometry stays shell-owned) ---------------- */
#wss-chat-root #wss-chat-launcher[data-tcl-enhanced] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 15%, color-mix(in oklab, #fff 46%, transparent), transparent 55%),
    linear-gradient(150deg, color-mix(in oklab, var(--wss-chat-brand, var(--wss-fleet-design-accent, #4B5563)) 82%, #fff 18%), var(--wss-chat-brand, var(--wss-fleet-design-accent, #4B5563)) 60%, color-mix(in oklab, var(--wss-chat-brand, var(--wss-fleet-design-accent, #4B5563)) 80%, #000 20%));
  color: var(--wss-chat-on-brand, #fff);
  border: 1px solid color-mix(in oklab, #fff 45%, transparent);
  box-shadow:
    inset 0 1px 1px color-mix(in oklab, #fff 75%, transparent),
    inset 0 -6px 14px -6px color-mix(in oklab, #000 35%, transparent),
    0 12px 30px -10px color-mix(in oklab, var(--wss-chat-brand, var(--wss-fleet-design-accent, #4B5563)) 65%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
#wss-chat-root #wss-chat-launcher[data-tcl-enhanced]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, color-mix(in oklab, #fff 40%, transparent) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: wfd-chat-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
#wss-chat-root #wss-chat-launcher[data-tcl-enhanced]:active { transform: scale(.95); }
#wss-chat-root #wss-chat-launcher[data-tcl-enhanced]:focus-visible { outline: 3px solid var(--wss-chat-brand, var(--wss-fleet-design-accent, #4B5563)); outline-offset: 3px; }

/* ---------------- keyframes ---------------- */
@keyframes wfd-float { 0%, 100% { transform: translate3d(0, -2px, 0); } 50% { transform: translate3d(0, 2px, 0); } }
@keyframes wfd-halo { 0%, 100% { opacity: .45; transform: scale(.97); } 50% { opacity: .8; transform: scale(1.03); } }
@keyframes wfd-sheen { 0%, 60% { transform: translateX(0) rotate(12deg); } 100% { transform: translateX(420%) rotate(12deg); } }
@keyframes wfd-chat-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* pause (set by optional JS when off-screen or tab hidden) */
html.wss-page-hidden .wss-fleet-design-float,
html.wss-page-hidden .wss-fleet-design-halo,
html.wss-page-hidden .wss-trust-card::before,
[data-wss-fleet-design-paused="true"] .wss-fleet-design-float,
[data-wss-fleet-design-paused="true"] .wss-fleet-design-halo,
[data-wss-fleet-design-paused="true"] .wss-trust-card::before,
#wss-chat-root[data-wss-fleet-design-paused="true"] #wss-chat-launcher[data-tcl-enhanced]::after { animation-play-state: paused; }

/* reduced motion: fully static */
@media (prefers-reduced-motion: reduce) {
  .wss-fleet-design-float, .wss-fleet-design-halo,
  .wss-trust-rail[data-wss-fleet-design-skin] .wss-trust-card::before,
  #wss-chat-root #wss-chat-launcher[data-tcl-enhanced]::after { animation: none; }
  .wss-fleet-design-emblem { transform: none; transition: none; }
  #wss-chat-root #wss-chat-launcher[data-tcl-enhanced] { transition: none; }
}
[data-wss-fleet-design-motion="reduced"] .wss-fleet-design-float,
[data-wss-fleet-design-motion="reduced"] .wss-fleet-design-halo,
[data-wss-fleet-design-motion="reduced"] .wss-trust-card::before { animation: none; }
[data-wss-fleet-design-motion="reduced"] .wss-fleet-design-emblem { transform: none; }

/* WSS Fleet Design 1.0.1 — roofing frame ornament (generated) */
[data-wss-fleet-design-skin="roofing"],#wss-customer-videos.wss-customer-videos[data-category="roofing"],#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"]{--wfd-frame-paint:var(--wfd-accent);--wfd-frame-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%20width%3D%22120%22%20height%3D%22120%22%20class%3D%22wfd-frame-art%22%20data-wfd-art%3D%22frame-corner%22%20data-wfd-slug%3D%22roofing%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20style%3D%22color%3A%2310231d%22%3E%20%3Cpath%20d%3D%22M6%20114V22A16%2016%200%200%201%2022%206H114%22%20fill%3D%22none%22%20stroke%3D%22%230E6B52%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M14%20114V28A14%2014%200%200%201%2028%2014H114%22%20fill%3D%22none%22%20stroke%3D%22%23c9a85a%22%20stroke-width%3D%22.9%22%20opacity%3D%22.8%22%2F%3E%20%3Cg%20transform%3D%22translate(28%204)%22%3E%3Cpath%20d%3D%22M0%200q6%208%2012%200M12%200q6%208%2012%200M24%200q6%208%2012%200M36%200q6%208%2012%200M48%200q6%208%2012%200M60%200q6%208%2012%200M72%200q6%208%2012%200M84%200q6%208%2012%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(4%2028)%20rotate(90)%22%3E%3Cpath%20d%3D%22M0%200q6%208%2012%200M12%200q6%208%2012%200M24%200q6%208%2012%200M36%200q6%208%2012%200M48%200q6%208%2012%200M60%200q6%208%2012%200M72%200q6%208%2012%200M84%200q6%208%2012%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(-50%20-50)%20scale(.62)%22%20opacity%3D%22.95%22%3E%20%3Cpath%20d%3D%22M150%20120L151.3%20120.9L151.9%20122.0L151.4%20122.9L150.0%20123.7L148.4%20124.5L147.5%20125.2L147.6%20126.1L148.5%20127.3L149.7%20128.6L150.3%20129.8L149.9%20130.7L148.5%20131.3L146.8%20131.6L145.5%20132L145.0%20132.7L145.4%20133.9L146.2%20135.5L146.7%20136.9L146.4%20137.9L145.2%20138.3L143.5%20138.2L141.9%20138.1L141.0%20138.5L140.8%20139.6L141.2%20141.2L141.4%20142.8L141.1%20144L140.1%20144.3L138.5%20143.9L136.9%20143.3L135.7%20143.1L135.1%20143.9L135.0%20145.3L134.9%20147.1L134.4%20148.4L133.5%20148.7L132.2%20148.2L130.7%20147.2L129.5%20146.5L128.6%20146.7L128.1%20147.8L127.5%20149.5L126.9%20150.9L125.9%20151.4L124.8%20150.7L123.7%20149.5L122.6%20148.3L121.7%20147.9L120.9%20148.6L120%20150L119.0%20151.3L117.9%20151.9L117.0%20151.4L116.2%20150.0L115.4%20148.4L114.7%20147.5L113.8%20147.6L112.6%20148.5L111.3%20149.7L110.1%20150.3L109.2%20149.9L108.6%20148.5L108.3%20146.8L108%20145.5L107.2%20145.0L106.0%20145.4L104.4%20146.2L103.0%20146.7L102.0%20146.4L101.6%20145.2L101.7%20143.5L101.8%20141.9L101.4%20141.0L100.4%20140.8L98.7%20141.2L97.1%20141.4L96%20141.1L95.7%20140.1L96.1%20138.5L96.6%20136.9L96.8%20135.7L96.1%20135.1L94.6%20135.0L92.8%20134.9L91.5%20134.4L91.2%20133.5L91.7%20132.2L92.7%20130.7L93.4%20129.5L93.2%20128.6L92.1%20128.1L90.4%20127.5L89.0%20126.9L88.6%20125.9L89.2%20124.8L90.4%20123.7L91.6%20122.6L92.0%20121.7L91.3%20120.9L90%20120L88.6%20119.0L88.0%20117.9L88.6%20117.0L89.9%20116.2L91.5%20115.4L92.4%20114.7L92.3%20113.8L91.4%20112.6L90.2%20111.3L89.6%20110.1L90.0%20109.2L91.4%20108.6L93.1%20108.3L94.4%20108L94.9%20107.2L94.5%20106.0L93.7%20104.4L93.2%20103.0L93.5%20102.0L94.7%20101.6L96.4%20101.7L98.0%20101.8L98.9%20101.4L99.1%20100.4L98.7%2098.7L98.5%2097.1L98.8%2096L99.8%2095.7L101.4%2096.1L103.0%2096.6L104.2%2096.8L104.8%2096.1L104.9%2094.6L105.0%2092.8L105.5%2091.5L106.4%2091.2L107.7%2091.7L109.2%2092.7L110.4%2093.4L111.3%2093.2L111.9%2092.1L112.4%2090.4L113.0%2089.0L114.0%2088.6L115.1%2089.2L116.2%2090.4L117.3%2091.6L118.2%2092.0L119.1%2091.3L120%2090L120.9%2088.6L122.0%2088.0L122.9%2088.6L123.7%2089.9L124.5%2091.5L125.2%2092.4L126.1%2092.3L127.3%2091.4L128.6%2090.2L129.8%2089.6L130.7%2090.0L131.3%2091.4L131.6%2093.1L132%2094.4L132.7%2094.9L133.9%2094.5L135.5%2093.7L136.9%2093.2L137.9%2093.5L138.3%2094.7L138.2%2096.4L138.1%2098.0L138.5%2098.9L139.6%2099.1L141.2%2098.7L142.8%2098.5L144%2098.8L144.3%2099.8L143.9%20101.4L143.3%20103.0L143.1%20104.2L143.9%20104.8L145.3%20104.9L147.1%20105.0L148.4%20105.5L148.7%20106.4L148.2%20107.7L147.2%20109.2L146.5%20110.4L146.7%20111.3L147.8%20111.9L149.5%20112.4L150.9%20113.0L151.4%20114.0L150.7%20115.1L149.5%20116.2L148.3%20117.3L147.9%20118.2L148.6%20119.1L150%20120Z%22%20fill%3D%22none%22%20stroke%3D%22%230E6B52%22%20stroke-width%3D%220.7%22%20opacity%3D%220.3%22%2F%3E%3Cpath%20d%3D%22M150%20120L148.6%20120.9L147.9%20121.7L148.3%20122.6L149.5%20123.7L150.7%20124.8L151.4%20125.9L150.9%20126.9L149.5%20127.5L147.8%20128.1L146.7%20128.6L146.5%20129.5L147.2%20130.7L148.2%20132.2L148.7%20133.5L148.4%20134.4L147.1%20134.9L145.3%20135.0L143.9%20135.1L143.1%20135.7L143.3%20136.9L143.9%20138.5L144.3%20140.1L144%20141.1L142.8%20141.4L141.2%20141.2L139.6%20140.8L138.5%20141.0L138.1%20141.9L138.2%20143.5L138.3%20145.2L137.9%20146.4L136.9%20146.7L135.5%20146.2L133.9%20145.4L132.7%20145.0L132%20145.5L131.6%20146.8L131.3%20148.5L130.7%20149.9L129.8%20150.3L128.6%20149.7L127.3%20148.5L126.1%20147.6L125.2%20147.5L124.5%20148.4L123.7%20150.0L122.9%20151.4L122.0%20151.9L120.9%20151.3L120%20150L119.1%20148.6L118.2%20147.9L117.3%20148.3L116.2%20149.5L115.1%20150.7L114.0%20151.4L113.0%20150.9L112.4%20149.5L111.9%20147.8L111.3%20146.7L110.4%20146.5L109.2%20147.2L107.7%20148.2L106.4%20148.7L105.5%20148.4L105.0%20147.1L104.9%20145.3L104.8%20143.9L104.2%20143.1L103.0%20143.3L101.4%20143.9L99.8%20144.3L98.8%20144L98.5%20142.8L98.7%20141.2L99.1%20139.6L98.9%20138.5L98.0%20138.1L96.4%20138.2L94.7%20138.3L93.5%20137.9L93.2%20136.9L93.7%20135.5L94.5%20133.9L94.9%20132.7L94.4%20132L93.1%20131.6L91.4%20131.3L90.0%20130.7L89.6%20129.8L90.2%20128.6L91.4%20127.3L92.3%20126.1L92.4%20125.2L91.5%20124.5L89.9%20123.7L88.6%20122.9L88.0%20122.0L88.6%20120.9L90%20120L91.3%20119.1L92.0%20118.2L91.6%20117.3L90.4%20116.2L89.2%20115.1L88.6%20114.0L89.0%20113.0L90.4%20112.4L92.1%20111.9L93.2%20111.3L93.4%20110.4L92.7%20109.2L91.7%20107.7L91.2%20106.4L91.5%20105.5L92.8%20105.0L94.6%20104.9L96.1%20104.8L96.8%20104.2L96.6%20103.0L96.1%20101.4L95.7%2099.8L96%2098.8L97.1%2098.5L98.7%2098.7L100.4%2099.1L101.4%2098.9L101.8%2098.0L101.7%2096.4L101.6%2094.7L102.0%2093.5L103.0%2093.2L104.4%2093.7L106.0%2094.5L107.2%2094.9L108%2094.4L108.3%2093.1L108.6%2091.4L109.2%2090.0L110.1%2089.6L111.3%2090.2L112.6%2091.4L113.8%2092.3L114.7%2092.4L115.4%2091.5L116.2%2089.9L117.0%2088.6L117.9%2088.0L119.0%2088.6L120%2090L120.9%2091.3L121.7%2092.0L122.6%2091.6L123.7%2090.4L124.8%2089.2L125.9%2088.6L126.9%2089.0L127.5%2090.4L128.1%2092.1L128.6%2093.2L129.5%2093.4L130.7%2092.7L132.2%2091.7L133.5%2091.2L134.4%2091.5L134.9%2092.8L135.0%2094.6L135.1%2096.1L135.7%2096.8L136.9%2096.6L138.5%2096.1L140.1%2095.7L141.1%2096L141.4%2097.1L141.2%2098.7L140.8%20100.4L141.0%20101.4L141.9%20101.8L143.5%20101.7L145.2%20101.6L146.4%20102.0L146.7%20103.0L146.2%20104.4L145.4%20106.0L145.0%20107.2L145.5%20108L146.8%20108.3L148.5%20108.6L149.9%20109.2L150.3%20110.1L149.7%20111.3L148.5%20112.6L147.6%20113.8L147.5%20114.7L148.4%20115.4L150.0%20116.2L151.4%20117.0L151.9%20117.9L151.3%20119.0L150%20120Z%22%20fill%3D%22none%22%20stroke%3D%22%230E6B52%22%20stroke-width%3D%220.7%22%20opacity%3D%220.8%22%2F%3E%20%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%2222%22%20fill%3D%22%23fff%22%20stroke%3D%22%230E6B52%22%20stroke-width%3D%222%22%2F%3E%20%3Cg%20transform%3D%22translate(120%20120)%20scale(.3)%20translate(-120%20-120)%22%3E%3Cpath%20d%3D%22M50%2092q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M68%2092q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M86%2092q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M104%2092q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M122%2092q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M140%2092q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M158%2092q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M176%2092q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M194%2092q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M48%2092H194%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M59%20105q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M77%20105q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M95%20105q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M113%20105q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M131%20105q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M149%20105q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M167%20105q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M185%20105q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M48%20105H194%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M50%20118q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M68%20118q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M86%20118q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M104%20118q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M122%20118q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M140%20118q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M158%20118q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M176%20118q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M194%20118q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M48%20118H194%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M59%20131q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M77%20131q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M95%20131q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M113%20131q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M131%20131q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M149%20131q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M167%20131q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M185%20131q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M48%20131H194%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M50%20144q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M68%20144q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M86%20144q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M104%20144q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M122%20144q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M140%20144q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M158%20144q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M176%20144q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M194%20144q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M48%20144H194%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M59%20157q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M77%20157q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M95%20157q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M113%20157q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M131%20157q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M149%20157q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M167%20157q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M185%20157q9%2011%2018%200%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M48%20157H194%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%220.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M58%2092L120%2052L182%2092L170%2092L120%2062L70%2092Z%22%20fill%3D%22%230E6B52%22%20%2F%3E%3Cpath%20d%3D%22M58%2092L120%2052L182%2092%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%2F%3E%3Cpath%20d%3D%22M120%2052V44M112%2046h16%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%2F%3E%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E")}

/* FleetArt bridge 2.1.0 · release-scoped roofing · selector "roofing" */
/* FleetArt 2.0.0 roofing */
/* roofing — Shingle courses, ridge-cap chevron */
.wss-trust-rail[data-wss-fleet-design-skin="roofing"],
#wss-customer-videos.wss-customer-videos,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"],
.wss-geo[data-geo-experience] .wss-geo-map,
[data-wss-fleet-art-photo="roofing"]{--wfa-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E");--wfa-corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 46V2h44' stroke-width='2.2'/%3E%3Cpath d='M8 46V8h38' stroke-width='.9'/%3E%3Ccircle cx='18' cy='4' r='1.3' fill='%23000'/%3E%3Ccircle cx='4' cy='18' r='1.3' fill='%23000'/%3E%3Ccircle cx='27' cy='4' r='1.3' fill='%23000'/%3E%3Ccircle cx='4' cy='27' r='1.3' fill='%23000'/%3E%3Ccircle cx='36' cy='4' r='1.3' fill='%23000'/%3E%3Ccircle cx='4' cy='36' r='1.3' fill='%23000'/%3E%3Cg transform='translate(9 9) scale(.62)'%3E%3Cpath d='M2 13 12 4l10 9'/%3E%3Cpath d='M5 11v9h14v-9'/%3E%3Cpath d='M5 15h14M9 15v5M15 15v5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");--wfa-crest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='60' r='44' stroke-width='1'/%3E%3Ccircle cx='60' cy='60' r='40' stroke-width='.6' stroke-dasharray='1.5 2.5'/%3E%3Cg transform='rotate(0.00 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(22.50 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(45.00 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(67.50 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(90.00 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(112.50 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(135.00 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(157.50 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(180.00 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(202.50 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(225.00 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(247.50 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(270.00 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(292.50 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(315.00 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='rotate(337.50 60 60) translate(54 4) scale(.5)'%3E%3Cpath d='M0 7h24M0 15h24M0 23h24M6 0v7M18 0v7M0 7v8M12 7v8M24 7v8M6 15v8M18 15v8'/%3E%3Cpath d='M2 5.5 6 2l4 3.5M14 5.5 18 2l4 3.5' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='translate(42 42) scale(1.5)'%3E%3Cpath d='M2 13 12 4l10 9'/%3E%3Cpath d='M5 11v9h14v-9'/%3E%3Cpath d='M5 15h14M9 15v5M15 15v5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");--wfa-display:'Francois One','Plus Jakarta Sans',system-ui,sans-serif;--wfa-r:10px;--wfa-band:12px;}

/* ===== video frames: ornament band lives in the bezel, strictly outside the footage ===== */
#wss-customer-videos.wss-customer-videos .wss-customer-video,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  padding: calc(var(--wfa-band) + 12px) calc(var(--wfa-band) + 12px) 14px;
  border-radius: calc(var(--wfa-r) + 10px);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 75%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--wfd-accent) 22%, transparent),
    0 1px 2px color-mix(in oklab, var(--wfd-ink) 14%, transparent), 0 16px 32px -18px color-mix(in oklab, var(--wfd-accent) 34%, transparent), 0 42px 70px -44px color-mix(in oklab, var(--wfd-ink) 55%, transparent);
  transform: translate3d(0, calc(var(--wfa-py, 0) * -3px), 0) rotateX(calc(var(--wfa-py, 0) * 2deg)) rotateY(calc(var(--wfa-px, 0) * -2deg));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
#wss-customer-videos.wss-customer-videos .wss-customer-video .wss-cv-frame,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip .wss-cv-frame {
  display: block; position: relative; inset: auto; width: auto; height: auto; grid-area: 1 / 1; margin: calc(var(--wfa-band) * -1); z-index: 0; pointer-events: none;
  border-radius: calc(var(--wfa-r) + 4px);
  background: linear-gradient(115deg, var(--wfd-accent) 0 38%, color-mix(in oklab, var(--wfd-accent) 45%, #fff) 50%, var(--wfd-accent) 62% 100%) 0 0 / 260% 100%;
  -webkit-mask: var(--wfa-tile) 0 0 / calc(var(--wfa-band) * 2) repeat; mask: var(--wfa-tile) 0 0 / calc(var(--wfa-band) * 2) repeat;
  opacity: .78;
}
#wss-customer-videos.wss-customer-videos .wss-customer-video .wss-cv-frame::before,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip .wss-cv-frame::before, #wss-customer-videos.wss-customer-videos .wss-customer-video .wss-cv-frame::after,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip .wss-cv-frame::after { content: none; display: none; animation: none; }
#wss-customer-videos.wss-customer-videos .wss-customer-video .wss-cv-media,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip .wss-cv-media {
  grid-area: 1 / 1; position: relative; z-index: 1; border-radius: calc(var(--wfa-r) * .6 + 4px);
  box-shadow: 0 0 0 1.5px var(--wfd-accent), 0 0 0 5px var(--wfd-raised), 0 0 0 6px color-mix(in oklab, var(--wfd-accent) 40%, transparent), 0 14px 28px -14px color-mix(in oklab, var(--wfd-ink) 60%, transparent);
}
#wss-customer-videos.wss-customer-videos .wss-customer-video figcaption,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip figcaption { grid-row: 2; position: relative; z-index: 1; margin-top: calc(var(--wfa-band) + 10px); }
/* sole text-colour exception: caption line uses the R4 carrier's measured detail token (passes on both painted card stops);
   the inherited engine tint measured 4.48:1 on the auto-repair composite. */
#wss-customer-videos.wss-customer-videos .wss-customer-video figcaption span,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip figcaption span { color: var(--wfd-detail); }
#wss-customer-videos.wss-customer-videos .wss-customer-video::before,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip::before,
#wss-customer-videos.wss-customer-videos .wss-customer-video::after,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip::after {
  background: var(--wfd-accent); -webkit-mask: var(--wfa-corner) center / contain no-repeat; mask: var(--wfa-corner) center / contain no-repeat;
  width: calc(var(--wfa-band) + 20px); height: calc(var(--wfa-band) + 20px); top: -10px; filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--wfd-accent) 34%, transparent));
}
#wss-customer-videos.wss-customer-videos .wss-customer-video::before,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip::before { left: -10px; }
#wss-customer-videos.wss-customer-videos .wss-customer-video::after,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip::after { right: -10px; }
#wss-customer-videos.wss-customer-videos .wss-customer-videos-head h2,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-customer-videos-head h2 { font-family: var(--client-display, var(--wfa-display)); letter-spacing: -.01em; }
#wss-customer-videos.wss-customer-videos .wss-customer-videos-head::after,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-customer-videos-head::after {
  content: ""; display: block; height: 14px; width: min(168px, 60%); margin-top: .5rem; background: var(--wfd-accent);
  -webkit-mask: var(--wfa-tile) 0 50% / 14px repeat-x; mask: var(--wfa-tile) 0 50% / 14px repeat-x; opacity: .8;
}

/* ===== record / profile plaques: prestige frame + static trade crest (no new animated layer) ===== */
.wss-trust-rail[data-wss-fleet-design-skin="roofing"] .wss-trust-card {
  border-radius: calc(var(--wfa-r) + 8px);
  outline: 1px solid color-mix(in oklab, var(--wfd-accent) 26%, transparent); outline-offset: -7px;
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 80%, transparent), inset 0 -1px 0 color-mix(in oklab, var(--wfd-accent) 20%, transparent),
    0 1px 2px color-mix(in oklab, var(--wfd-ink) 16%, transparent), 0 22px 40px -24px color-mix(in oklab, var(--wfd-accent) 34%, transparent), 0 48px 80px -50px color-mix(in oklab, var(--wfd-ink) 50%, transparent);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
.wss-trust-rail[data-wss-fleet-design-skin="roofing"] .wss-trust-card::after {
  inset: 0 0 auto 0; height: 118px; background: var(--wfd-accent); opacity: .16; animation: none;
  -webkit-mask: var(--wfa-tile) 0 0 / 20px repeat, linear-gradient(#000, transparent); -webkit-mask-composite: source-in;
  mask: var(--wfa-tile) 0 0 / 20px repeat, linear-gradient(#000, transparent); mask-composite: intersect;
}
.wss-trust-rail[data-wss-fleet-design-skin="roofing"] .wss-fleet-design-halo {
  animation: none; opacity: .42; border-radius: 0; background: var(--wfd-accent);
  -webkit-mask: var(--wfa-crest) center / contain no-repeat; mask: var(--wfa-crest) center / contain no-repeat;
}
@media (max-width: 640px) {
  .wss-trust-rail[data-wss-fleet-design-skin="roofing"] .wss-trust-card::after { inset: 0 auto 0 0; width: 86px; height: auto;
    -webkit-mask: var(--wfa-tile) 0 0 / 16px repeat, linear-gradient(90deg, #000, transparent); mask: var(--wfa-tile) 0 0 / 16px repeat, linear-gradient(90deg, #000, transparent); }
}

/* ===== source-bound map stage (opt-in hook): band OUTSIDE the stage; Google attribution never covered ===== */
.wss-geo[data-geo-experience] .wss-geo-map { position: relative; padding: calc(var(--wfa-band) + 4px); border-radius: calc(var(--wfa-r) + 10px);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--wfd-accent) 26%, transparent), 0 26px 50px -30px color-mix(in oklab, var(--wfd-accent) 34%, transparent); isolation: isolate; }
.wss-geo[data-geo-experience] .wss-geo-map::before { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: inherit; background: var(--wfd-accent); opacity: .5;
  -webkit-mask: var(--wfa-tile) 0 0 / calc(var(--wfa-band) * 2) repeat; mask: var(--wfa-tile) 0 0 / calc(var(--wfa-band) * 2) repeat; pointer-events: none; }
.wss-geo[data-geo-experience] .wss-geo-map .wss-geo-mapstage { position: relative; z-index: 1; border-radius: calc(var(--wfa-r) * .6 + 4px); overflow: hidden; }

/* ===== native photo frame (opt-in hook on a figure/span wrapping an <img>; image never cropped) ===== */
[data-wss-fleet-art-photo="roofing"] { position: relative; display: inline-grid; padding: calc(var(--wfa-band) + 6px); border-radius: calc(var(--wfa-r) + 8px); isolation: isolate;
  background: linear-gradient(160deg, color-mix(in oklab, var(--wfd-raised, #fff) 94%, #fff 6%), var(--wfd-raised, #fff));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in oklab, var(--wfd-accent, #4B5563) 24%, transparent), 0 26px 48px -28px color-mix(in oklab, var(--wfd-accent, #4B5563) 40%, transparent); }
[data-wss-fleet-art-photo="roofing"]::before { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: inherit; background: var(--wfd-accent, #4B5563); opacity: .7;
  -webkit-mask: var(--wfa-tile) 0 0 / calc(var(--wfa-band) * 2) repeat; mask: var(--wfa-tile) 0 0 / calc(var(--wfa-band) * 2) repeat; pointer-events: none; }
[data-wss-fleet-art-photo="roofing"] > img { display: block; max-width: 100%; height: auto; border-radius: calc(var(--wfa-r) * .6 + 3px); box-shadow: 0 0 0 1.5px var(--wfd-accent, #4B5563), 0 0 0 5px var(--wfd-raised, #fff); }

/* ===== source-driven rating (rendered only by ratingBadge(); never inside footage) ===== */
.wss-fleet-art-rating { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; padding: .2rem .55rem; border-radius: 999px;
  background: var(--wfd-ink, #14201b); color: var(--wfd-raised, #fff); font: 700 .78rem/1.3 var(--client-body, system-ui, sans-serif); }
.wss-fleet-art-rating > svg { display: block; height: 14px; width: auto; }
.wss-fleet-art-rating[data-sample="true"] { background: transparent; color: var(--wfd-ink, #14201b); box-shadow: inset 0 0 0 1.5px var(--wfd-ink, #14201b); }

/* ===== motion: one luminous layer (frame sheen); pointer parallax via JS vars; nothing under reduced motion ===== */
@keyframes wfa-sheen { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@media (prefers-reduced-motion: no-preference) {
  #wss-customer-videos.wss-customer-videos .wss-customer-video .wss-cv-frame,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip .wss-cv-frame { animation: wfa-sheen 10s ease-in-out infinite; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wss-trust-rail[data-wss-fleet-design-skin="roofing"] .wss-trust-card:hover, .wss-trust-rail[data-wss-fleet-design-skin="roofing"] .wss-trust-card:focus-within { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  #wss-customer-videos.wss-customer-videos .wss-customer-video,
#wss-beta-demo-videos.wss-beta-videos[data-category="roofing"] .wss-beta-clip, .wss-trust-rail[data-wss-fleet-design-skin="roofing"] .wss-trust-card { transform: none !important; transition: none; }
}
.wss-geo[data-geo-experience] .wss-geo-map > .wss-geo-map-bottom { position: relative; z-index: 1; background: inherit; }
#wss-customer-videos.wss-customer-videos > .wss-customer-videos-note { justify-self: center; padding: 6px 12px; border-radius: 999px; background: var(--wfd-raised); color: var(--wfd-ink); box-shadow: 0 0 0 1px color-mix(in oklab, var(--wfd-ink) 12%, transparent); }