/*
 * Vestra Transmissions: Veriwell (`hero: veriwell`, and the `verifyflow` / `datamap` components).
 * Loaded only by pages that use them, after news.css.
 *
 * Veriwell's own look: a white page with a faint dotted grid, near-black ink, one blue
 * (#2563eb), emerald for "done", and a touch of the logo's cyan. The article is light; the
 * "More transmissions" block and the corp footer stay dark, as on every other Vestra page.
 */

/* ------------------------------------------------------------ Palette */

.news-veriwell {
  --bg: #ffffff;
  --bg-2: #f7f8fa;
  --surface: #f6f7f9;
  --surface-2: #eef0f3;
  --ink: #0a0a0a;
  --ink-2: #3f3f46;
  --muted: #62626b;             /* 5.9:1 on white */
  --line: rgba(10, 10, 10, 0.08);
  --line-2: rgba(10, 10, 10, 0.15);
  --accent: #2563eb;            /* white text on it: 5.2:1 */
  --accent-hover: #1d4ed8;
  --signal: #1d4ed8;            /* blue as text on white: 6.7:1 */
  --vw-blue: #2563eb;
  --vw-blue-ink: #1d4ed8;
  --vw-blue-tint: #eff6ff;
  --vw-cyan: #22d3ee;
  --vw-ok: #10b981;
  --vw-ok-ink: #047857;         /* 5.5:1 on white */
  --vw-ok-tint: #ecfdf5;
  --vw-dots: radial-gradient(rgba(37, 99, 235, 0.16) 1px, transparent 1.4px);
  background: var(--bg);
  color: var(--ink);
}

html:has(> body.news-veriwell) {
  color-scheme: light;
  background: #ffffff;
}

.news-veriwell ::selection {
  background: rgba(37, 99, 235, 0.18);
}

/* Site nav: light glass over the page (always, without JavaScript, which marks the scroll). */
html:not(.js) .news-veriwell .nav,
.news-veriwell .nav.is-scrolled,
.news-veriwell .launch-nav {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: var(--line);
}

.news-veriwell .nav-section {
  color: var(--muted);
}

.news-veriwell .launch-nav-list a.is-active {
  background: var(--vw-blue-tint);
  color: var(--vw-blue-ink);
}

.news-veriwell .btn-ghost {
  background: #fff;
  border-color: var(--line-2);
}

.news-veriwell .launch-ctas .btn-ghost {
  background: rgba(255, 255, 255, 0.8);
}

@media (hover: hover) {
  .news-veriwell .btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
}

.news-veriwell :focus-visible {
  outline-color: var(--vw-blue);
}

/* After the article: back to the dark Vestra site for related posts and the footer. */
.news-veriwell .related,
.news-veriwell .footer {
  --bg: #000;
  --surface: #0d0f13;
  --surface-2: #14171c;
  --ink: #f2f4f7;
  --ink-2: #b9c0ca;
  --muted: #8c95a2;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.17);
  background: #000;
  color: var(--ink);
  color-scheme: dark;
}

.news-veriwell .related {
  margin-top: clamp(5rem, 3rem + 6vw, 9rem);
  padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}

/* --------------------------------------------------------------- Hero */

.vw-hero {
  position: relative;
}

.vw-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  min-height: min(100svh, 60rem);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
  overflow: clip;
  background: linear-gradient(to bottom, #fbfcfe 0%, #f5f7fb 70%, #ffffff 100%);
}

/* The dotted grid, fading out towards the edges. */
.vw-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--vw-dots) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
}

.vw-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vw-title {
  grid-row: 1;
  align-self: end;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.6rem, 1.4rem + 9vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-align: center;
  color: var(--ink);
  will-change: transform, opacity;
}

.vw-line {
  grid-row: 3;
  align-self: end;
  max-width: 26em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 1rem + 1.9vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  word-spacing: 0.06em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}

.vw-cap,
.vw-scroll {
  display: none;
}

/* The drawing. Hairlines stay hairlines at any scale. */
.vw-art :is(rect, circle, ellipse, path) {
  vector-effect: non-scaling-stroke;
}

.vw-doc-card { fill: #fff; stroke: var(--vw-blue); stroke-width: 1.6; }
.vw-doc-band { fill: var(--vw-blue-tint); }
.vw-doc-photo { fill: #f1f5fe; stroke: rgba(37, 99, 235, 0.35); stroke-width: 1; }
.vw-doc-person { fill: none; stroke: var(--vw-blue); stroke-width: 1.4; stroke-linecap: round; }
.vw-doc-lab { fill: rgba(10, 10, 10, 0.14); }
.vw-doc-val { fill: rgba(37, 99, 235, 0.22); }
.vw-doc-mrzbg { fill: #f6f8fc; }
.vw-mrz {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  fill: #1e3a8a;
  opacity: 0.55;
  transition: fill 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.vw-art.is-read .vw-mrz { fill: var(--vw-blue); opacity: 1; }
.vw-flash { fill: #fff; opacity: 0; }
.vw-bk { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s var(--ease-out); }
.vw-art.is-locked .vw-bk { stroke: var(--vw-ok); }

.vw-ring-bg { fill: rgba(255, 255, 255, 0.85); }
.vw-ring { fill: none; stroke: rgba(10, 10, 10, 0.22); stroke-width: 2; transition: stroke 0.3s var(--ease-out); }
.vw-art.is-face .vw-ring { stroke: var(--vw-blue); }
.vw-art.is-found .vw-ring,
.vw-face.is-done .vw-ring { stroke: var(--vw-ok); }
.vw-body,
.vw-neck { fill: none; stroke: rgba(37, 99, 235, 0.45); stroke-width: 1.4; stroke-linecap: round; }
.vw-skull { fill: none; stroke: var(--vw-blue); stroke-width: 1.4; }
.vw-brow,
.vw-nose,
.vw-mouth { fill: none; stroke: #1e3a8a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vw-eye { fill: #fff; stroke: #1e3a8a; stroke-width: 1.4; }
.vw-pupil { fill: #1e3a8a; }
.vw-lm { fill: var(--vw-cyan); opacity: 0.9; }
.vw-lms .vw-lm:nth-child(3n) { fill: var(--vw-blue); }
.vw-pip { fill: #e4e7ec; transition: fill 0.25s var(--ease-out); }
.vw-pip.is-done,
.vw-face.is-done .vw-pip { fill: var(--vw-ok); }
.vw-cue-spk { fill: var(--vw-blue); }
.vw-cue-wave { fill: none; stroke: var(--vw-blue); stroke-width: 2; stroke-linecap: round; }

.vw-seal-bg { fill: var(--vw-ok-tint); }
/* Solid by default: veriwell-hero.js dashes the ring and the tick only while they draw in, then
   takes the dashes off, so at rest both are always whole. */
.vw-art .vw-seal-ring { fill: none; stroke: var(--vw-ok); stroke-width: 3; vector-effect: none; }
.vw-art .vw-tick { fill: none; stroke: var(--vw-ok-ink); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
.vw-age {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 76px;
  letter-spacing: -0.05em;
  fill: var(--ink);
}
.vw-link { fill: none; stroke: rgba(37, 99, 235, 0.45); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }

/* Without the sequence (no JavaScript, reduced motion): the title over one still row. */
.vw-hero:not(.is-sequence) .vw-title {
  margin-bottom: clamp(9rem, 2rem + 26vw, 22rem);
}

.vw-hero:not(.is-sequence) .vw-stage {
  min-height: min(100svh, 56rem);
}

@media (max-width: 759px) {
  .vw-hero:not(.is-sequence) .vw-title { margin-bottom: 9.5rem; }
}

/* With the script: a long scroll with the stage pinned while the check plays out. */
.vw-hero.is-sequence {
  height: 380vh;
}

.vw-hero.is-sequence .vw-stage {
  position: sticky;
  top: 0;
  grid-template-rows: 1fr;
  height: 100svh;
  min-height: 0;
  padding-bottom: 0;
}

.vw-hero.is-sequence .vw-title {
  grid-row: 1;
  align-self: center;
  margin-top: -4vh;
}

.vw-hero.is-sequence .vw-line {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(2.5rem, 9vh, 6.5rem);
  margin-inline: auto;
  opacity: 0;
  visibility: hidden;
}

.vw-hero.is-sequence .vw-cap {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 7vh, 4.5rem);
  display: block;
  max-width: calc(100% - 2 * var(--gutter));
  padding: 0.7rem 1.15rem;
  border-radius: 14px;
  background: rgba(9, 9, 11, 0.86);
  color: #fff;
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 0.5rem);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.vw-hero.is-sequence .vw-cap.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Spoken prompts get a small speaker. */
.vw-cap.is-voice::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin: 0 0.5em -0.16em 0;
  background: var(--vw-cyan);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 6h2.5l3.5-3v10l-3.5-3H2.5z'/%3E%3Cpath d='M11 5.5q2 2.5 0 5M12.8 3.6q3.6 4.4 0 8.8' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 6h2.5l3.5-3v10l-3.5-3H2.5z'/%3E%3Cpath d='M11 5.5q2 2.5 0 5M12.8 3.6q3.6 4.4 0 8.8' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 520px) {
  .vw-hero.is-sequence .vw-cap { white-space: normal; width: max-content; }
}

.vw-hero.is-sequence .vw-scroll {
  position: absolute;
  bottom: clamp(1.25rem, 3.5vh, 2.25rem);
  left: 50%;
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(37, 99, 235, 0), rgba(37, 99, 235, 0.7));
}

.vw-hero.is-moved .vw-scroll {
  opacity: 0;
  animation: none !important;
  transition: opacity 0.4s var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .vw-hero.is-sequence .vw-scroll { animation: cue 2.4s var(--ease-out) infinite; transform-origin: top; }
}

.vw-intro .launch-dek {
  color: var(--ink);
}

.vw-intro {
  position: relative;
  background: #fff;
}

/* ------------------------------------------------ Body: quiet light touches */

.news-veriwell .launch-body {
  padding-top: clamp(3rem, 2rem + 3vw, 5.5rem);
}

.news-veriwell .prose a:not(.anchor) {
  color: var(--vw-blue-ink);
  text-decoration-color: rgba(29, 78, 216, 0.35);
}

@media (hover: hover) {
  .news-veriwell .prose a:not(.anchor):hover { text-decoration-color: var(--vw-blue-ink); }
}

.news-veriwell .c-callout {
  border-color: rgba(37, 99, 235, 0.16);
  background: var(--vw-blue-tint);
}

.news-veriwell .c-callout-icon {
  color: var(--vw-blue);
}

.news-veriwell .c-step::before {
  border-color: var(--vw-blue);
  background: #fff;
}

.news-veriwell .c-step:last-child::before {
  border-color: var(--vw-ok);
  background: var(--vw-ok);
}

.news-veriwell .c-step-when {
  color: var(--vw-blue-ink);
  font-weight: 600;
}

.news-veriwell .post-end {
  border-top-color: var(--line);
}

/* --------------------------------------------- verifyflow: the phone demo */

.c-vwf {
  --vwf-w: 250px;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    var(--vw-dots, radial-gradient(rgba(37, 99, 235, 0.16) 1px, transparent 1.4px)) 0 0 / 22px 22px,
    linear-gradient(to bottom, #fbfcfe, #f4f6fa);
}

.vwf-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  letter-spacing: -0.03em;
  color: var(--ink);
}

.prose .c-vwf ol,
.prose .c-vwf ul,
.prose .c-vwd ul {
  padding-left: 0;
  list-style: none;
}

.prose .c-vwf li + li,
.prose .c-vwd li + li {
  margin-top: 0;
}

.prose .c-vwf * + .vwf-steps {
  margin-top: 1.5rem;
}

/* Storyboard (no JavaScript): every step, phone beside its words. */
.vwf-steps {
  display: grid;
  gap: 2.5rem 2rem;
}

@media (min-width: 900px) {
  .vwf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vwf-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 599px) {
  .vwf-step { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}

.c-vwf:not(.is-live) .vwf-device {
  --vwf-w: clamp(170px, 46vw, 200px);
}

.vwf-text {
  min-width: 0;
  font-size: 0.98rem;
  line-height: 1.6;
}

.vwf-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--vw-blue-ink);
  font-variant-numeric: tabular-nums;
}

.vwf-of {
  color: var(--muted);
  font-weight: 500;
}

.prose .c-vwf .vwf-title {
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.prose .c-vwf .vwf-title + * {
  margin-top: 0.55rem;
}

.vwf-text > p + p {
  margin-top: 0.6rem;
}

.vwf-cues {
  display: grid;
  gap: 0.45rem;
  margin-top: 1rem;
}

.prose .c-vwf .vwf-cues {
  margin-top: 1rem;
}

.vwf-cues li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.vwf-cues svg {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--vw-blue);
}

.vwf-cues .is-voice span {
  font-weight: 600;
  color: var(--ink);
}

/* ---- The phone itself. Everything inside scales with its width (cqw). */
.vwf-device {
  justify-self: center;
}

.vwf-phone {
  position: relative;
  width: var(--vwf-w);
  padding: calc(var(--vwf-w) * 0.03);
  border-radius: calc(var(--vwf-w) * 0.16);
  background: linear-gradient(to bottom, #2a2a2e, #141416);
  box-shadow: 0 40px 70px -34px rgba(15, 23, 42, 0.55), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
}

.vwf-phone::before {
  content: "";
  position: absolute;
  top: calc(var(--vwf-w) * 0.058);
  left: 50%;
  z-index: 2;
  width: 31%;
  height: calc(var(--vwf-w) * 0.085);
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}

.vwf-screen {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 375 / 790;
  overflow: hidden;
  border-radius: calc(var(--vwf-w) * 0.13);
  background: #fff;
  color: #0a0a0a;
  font-family: var(--font-text);
  line-height: 1.45;
  text-align: left;
}

.vwf-screen > * {
  font-size: 3.73cqw; /* 14px on a 375pt screen; the em values below follow the real flow */
}

.vwf-screen p,
.vwf-screen li,
.vwf-screen ol,
.vwf-screen span,
.vwf-screen b,
.vwf-screen small {
  margin: 0;
  font-size: inherit;
}

.prose .vwf-screen * + * {
  margin-top: 0;
}

.vwf-sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.85em;
  padding: 0.3em 2.3em 0;
  font-size: 4cqw !important;
  font-weight: 600;
}

.vwf-sb-i {
  display: flex;
  gap: 0.2em;
  align-items: flex-end;
}

.vwf-sb-i i {
  display: block;
  width: 0.24em;
  border-radius: 1px;
  background: currentColor;
}

.vwf-sb-i i:nth-child(1) { height: 0.4em; }
.vwf-sb-i i:nth-child(2) { height: 0.6em; }
.vwf-sb-i i:nth-child(3) { height: 0.8em; }

.vwf-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.2em 1.4em 1.1em !important;
}

.vwf-screen img.vwf-mark {
  display: block;
  width: auto;
  max-width: none;
  height: 1.55em;
  border-radius: 0;
}

.vwf-cancel {
  font-size: 0.86em !important;
  font-weight: 500;
}

.vwf-prog {
  margin: 0 1.15em 1em !important;
  padding: 0.85em;
  border: 1px solid #e4e4e7;
  border-radius: 1.15em;
  background: rgba(255, 255, 255, 0.75);
}

.vwf-prog p {
  display: flex;
  justify-content: space-between;
  font-size: 0.79em !important;
  font-weight: 600;
  color: #71717a;
}

.vwf-prog ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3em;
  margin-top: 0.55em !important;
}

.vwf-prog li {
  font-size: 0.64em !important;
  color: #a1a1aa;
}

.vwf-prog li i {
  display: block;
  height: 0.6em;
  margin-bottom: 0.5em;
  border-radius: 999px;
  background: #e4e4e7;
}

.vwf-prog li.is-done i,
.vwf-prog li.is-on i { background: #2563eb; }
.vwf-prog li.is-on { font-weight: 600; color: #27272a; }

.vwf-card {
  margin: 0 1.15em !important;
  padding: 1.5em 1.45em;
  border: 1px solid #e4e4e7;
  border-radius: 0.85em;
  background: #fff;
  box-shadow: 0 1.7em 5em -2.1em rgba(24, 24, 27, 0.3);
}

.vwf-k {
  font-weight: 600;
  color: #1d4ed8;
}

.vwf-h {
  margin-top: 0.3em !important;
  font-size: 1.9em !important;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.vwf-p {
  margin-top: 0.75em !important;
  line-height: 1.6;
  color: #52525b;
}

.vwf-p b { font-weight: 600; color: #27272a; }

.vwf-ol {
  margin-top: 1.1em !important;
  font-weight: 500;
}

.vwf-ol li + li { margin-top: 0.6em !important; }

.vwf-agree {
  display: flex;
  gap: 0.75em;
  margin-top: 1.2em !important;
  padding: 0.95em;
  border: 1px solid #e4e4e7;
  border-radius: 1.1em;
  font-size: 0.93em !important;
  line-height: 1.5;
}

.vwf-box {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.1em !important;
  border-radius: 0.3em;
  background: #0a0a0a;
  color: #fff;
}

.vwf-box svg { width: 90%; height: 90%; }

.vwf-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.4em;
  margin-top: 1.1em !important;
  border-radius: 0.85em;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
}

.vwf-btn.is-off { opacity: 0.45; }
.vwf-btn.is-dark { background: #0a0a0a; }

.vwf-opt {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-top: 0.85em !important;
  padding: 1.1em 1.2em;
  border: 1px solid #e4e4e7;
  border-radius: 1.1em;
  background: #fafafa;
}

.vwf-p + .vwf-opt { margin-top: 1.6em !important; }

.vwf-opt.is-picked {
  border-color: #93c5fd;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.vwf-glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  border-radius: 0.8em;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(228, 228, 231, 0.8);
  color: #1d4ed8;
}

.vwf-glyph svg { width: 66%; height: 66%; }

.vwf-opt b {
  display: block;
  font-size: 1.1em !important;
  font-weight: 600;
}

.vwf-opt small {
  display: block;
  margin-top: 0.2em !important;
  font-size: 0.9em !important;
  line-height: 1.35;
  color: #71717a;
}

/* Camera plates. */
.vwf-cam {
  position: relative;
  margin-top: 1.25em !important;
  overflow: hidden;
  border-radius: 1.7em;
  background: #09090b;
}

.vwf-cam.is-doc { aspect-ratio: 4 / 3; background: linear-gradient(160deg, #7d6450 0%, #5d4636 45%, #3c2c21 100%); }
.vwf-cam.is-face { aspect-ratio: 1; background: radial-gradient(70% 60% at 50% 35%, #3a3f4a, #16181d 75%); }
.vwf-cam.is-full {
  position: absolute !important;
  inset: 0;
  margin: 0 !important;
  border-radius: 0;
  background: radial-gradient(90% 60% at 50% 40%, #2a2f38, #0b0c0f 80%);
}

.vwf-sound {
  position: absolute;
  top: 0.75em;
  right: 0.75em;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.vwf-sound svg { width: 55%; height: 55%; }

.vwf-docwrap {
  position: absolute;
  inset: 14% 10%;
  display: grid;
  place-items: center;
}

.vwf-doc {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.6em 0.8em rgba(0, 0, 0, 0.5));
  transform: rotate(-2.5deg);
}

.vwf-doc .vw-doc-card { fill: #f4ecf2; stroke: none; }
.vwf-doc .vw-doc-band { fill: #e6d6e3; }
.vwf-doc .vw-doc-photo { fill: #dfe4ea; stroke: none; }
.vwf-doc .vw-doc-person { stroke: #7b6a88; stroke-width: 6; }
.vwf-doc .vw-doc-lab { fill: #c9b8d2; }
.vwf-doc .vw-doc-val { fill: #6d5c7d; opacity: 0.55; }
.vwf-doc .vw-doc-mrzbg { fill: rgba(255, 255, 255, 0.55); }
.vwf-doc .vw-mrz { font-family: var(--font-mono); font-size: 13px; font-weight: 700; fill: #2b2140; }
.vwf-doc .vw-scan,
.vwf-doc .vw-flash { display: none; }

.vwf-glare {
  position: absolute;
  top: 18%;
  left: 52%;
  width: 34%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4) 55%, rgba(255, 255, 255, 0));
  opacity: 0;
}

.vwf-cam.is-frame .vwf-glare { opacity: 0.9; }

.vwf-guide {
  position: absolute;
  inset: 12%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 1em;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
}

.vwf-cam.is-capture .vwf-guide { border-color: #34d399; }

.vwf-pill {
  position: absolute !important;
  left: 1.1em;
  right: 1.1em;
  bottom: 1.1em;
  z-index: 2;
  padding: 0.8em 1em;
  border-radius: 1.1em;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  font-weight: 600;
  line-height: 1.3;
}

.vwf-pill small {
  display: block;
  margin-top: 0.3em !important;
  font-size: 0.82em !important;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

.vwf-pill small.is-ok { color: #6ee7b7; }

.vwf-pill.is-link {
  left: 50%;
  right: auto;
  bottom: 18%;
  padding: 0.6em 1.1em;
  border-radius: 999px;
  background: rgba(250, 250, 250, 0.92);
  color: #0a0a0a;
  transform: translateX(-50%);
}

.vwf-pill.is-link span::before {
  content: "↗ ";
  color: #2563eb;
}

/* Messages: one at a time, stacked in one place. Without JS (and before playing) the
   middle message and the last count show. */
.vwf-stack {
  display: grid;
}

.vwf-stack.is-inline {
  display: inline-grid;
  vertical-align: bottom;
}

.vwf-stack > * {
  grid-area: 1 / 1;
  font-style: normal;
  opacity: 0;
}

.vwf-msgs .vwf-msg.is-b,
.vwf-stack.is-inline > i:last-child {
  opacity: 1;
}

.vwf-captured {
  position: absolute !important;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5em;
  background: rgba(2, 44, 34, 0.82);
  color: #fff;
  font-weight: 600;
}

.vwf-captured svg { width: 3em; height: 3em; }

.vwf-wait {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  margin-top: 1em !important;
  font-weight: 500;
  color: #52525b;
}

.vwf-spin {
  width: 1.1em;
  height: 1.1em;
  border: 2px solid #bfdbfe;
  border-top-color: #2563eb;
  border-radius: 999px;
}

@media (prefers-reduced-motion: no-preference) {
  .vwf-spin { animation: vwf-spin 0.9s linear infinite; }
}

@keyframes vwf-spin { to { transform: rotate(1turn); } }

/* The face on the selfie camera: the hero's drawing, light on dark. */
.vwf-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vwf-face .vw-ring-bg { fill: none; }
.vwf-face .vw-ring { stroke: rgba(255, 255, 255, 0.85); stroke-width: 2; }
.vwf-cam.is-face .vwf-face .vw-ring { stroke: #34d399; }
.vwf-face .vw-skull { stroke: rgba(226, 232, 240, 0.85); fill: rgba(148, 163, 184, 0.12); }
.vwf-face .vw-body,
.vwf-face .vw-neck { stroke: rgba(226, 232, 240, 0.5); }
.vwf-face .vw-brow,
.vwf-face .vw-nose,
.vwf-face .vw-mouth { stroke: rgba(241, 245, 249, 0.9); }
.vwf-face .vw-eye { fill: rgba(255, 255, 255, 0.9); stroke: none; }
.vwf-face .vw-pupil { fill: #0f172a; }
.vwf-face .vw-lm { fill: #67e8f9; opacity: 0.75; }
.vwf-face .vw-cue { display: none; }
.vwf-face [data-vw-feat],
.vwf-face [data-vw-head],
.vwf-face [data-vw-eye],
.vwf-face [data-vw-mouth] {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* Each pose, as the phone shows it once found. */
.vwf-face[data-pose="left"] [data-vw-feat] { transform: translateX(-28px); }
.vwf-face[data-pose="left"] [data-vw-head] { transform: translateX(-8px) scaleX(0.9); }
.vwf-face[data-pose="right"] [data-vw-feat] { transform: translateX(28px); }
.vwf-face[data-pose="right"] [data-vw-head] { transform: translateX(8px) scaleX(0.9); }
.vwf-face[data-pose="blink"] [data-vw-eye] { transform: translateY(-22px) scaleY(0.12) translateY(22px); }
.vwf-face[data-pose="smile"] [data-vw-mouth="n"] { opacity: 0; }
.vwf-face[data-pose="smile"] [data-vw-mouth="s"] { opacity: 1; }

.vwf-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45em;
  margin-top: 1em !important;
}

.vwf-chips span {
  padding: 0.4em 0.8em;
  border-radius: 999px;
  background: #f4f4f5;
  color: #71717a;
  font-size: 0.82em !important;
  font-weight: 600;
}

.vwf-chips .is-done { background: #d1fae5; color: #047857; }
.vwf-chips .is-on { background: #dbeafe; color: #1d4ed8; }

/* QR: the desktop handoff page in a browser window, and the phone in front of it, its camera
   on the code. Sized from the phone width, so it sits where a phone would. */
.vwf-desk {
  --vwf-mini: calc(var(--vwf-w) * 0.56);
  position: relative;
  width: calc(var(--vwf-w) * 1.5);
  height: calc(var(--vwf-w) * 2.04);
}

.vwf-browser {
  position: absolute;
  top: 12%;
  left: 0;
  width: 84%;
  overflow: hidden;
  border: 1px solid #d4d4d8;
  border-radius: calc(var(--vwf-w) * 0.035);
  background: #f7f8fa;
  box-shadow: 0 30px 60px -34px rgba(15, 23, 42, 0.5);
}

.vwf-bbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: calc(var(--vwf-w) * 0.075);
  padding: 0 calc(var(--vwf-w) * 0.035);
  border-bottom: 1px solid #e4e4e7;
  background: #fff;
}

.vwf-bbar i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #e4e4e7;
}

.vwf-bbar span {
  flex: 1;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: calc(var(--vwf-w) * 0.036);
  color: #52525b;
  text-align: center;
}

.vwf-bpage {
  container-type: inline-size;
  display: grid;
  justify-items: center;
  padding: 5% 6% 7%;
  color: #0a0a0a;
  font-family: var(--font-text);
  line-height: 1.4;
  text-align: center;
}

.vwf-bpage > *,
.vwf-bpage p {
  margin: 0;
  font-size: 3.7cqw;
}

.vwf-bpage .vwf-l-card { width: 72%; }
.vwf-bpage .vwf-qr { width: 9em; height: 9em; }

.vwf-bpage img.vwf-l-mark {
  display: block;
  width: auto;
  max-width: none;
  height: 1.5em;
  border-radius: 0;
}

.vwf-l-card {
  display: grid;
  justify-items: center;
  gap: 0.45em;
  width: 74%;
  margin-top: 0.7em !important;
  padding: 1em 0.8em 1.1em;
  border: 1px solid #e4e4e7;
  border-radius: 0.7em;
  background: #fff;
  box-shadow: 0 1.4em 3em -1.6em rgba(24, 24, 27, 0.34);
}

.vwf-l-plate {
  position: relative;
  padding: 0.7em;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 0.8em 2em -1em rgba(24, 24, 27, 0.45), 0 0 0 1px #e4e4e7;
}

.vwf-l-plate::before,
.vwf-l-plate::after {
  content: "";
  position: absolute;
  width: 0.7em;
  height: 0.7em;
  border: 0 solid #3b82f6;
}

.vwf-l-plate::before { top: 0.2em; left: 0.2em; border-width: 2px 0 0 2px; border-top-left-radius: 0.35em; }
.vwf-l-plate::after { right: 0.2em; bottom: 0.2em; border-width: 0 2px 2px 0; border-bottom-right-radius: 0.35em; }

.vwf-qr {
  display: block;
  width: 6.2em;
  height: 6.2em;
  border-radius: 1px;
}

.vwf-l-badge {
  margin-top: 0.35em !important;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 0.6em !important;
  font-weight: 600;
  color: #3f3f46;
}

.vwf-l-h {
  font-weight: 600;
  font-size: 0.95em !important;
  letter-spacing: -0.02em;
}

.vwf-l-s {
  padding: 0.45em 0.9em;
  border-radius: 0.5em;
  background: #2563eb;
  font-size: 0.62em !important;
  font-weight: 600;
  color: #fff;
}

/* The phone in front: its camera view, the code found (yellow), the link it offers. */
.vwf-device .vwf-phone.is-mini {
  --vwf-w: var(--vwf-mini);
  position: absolute;
  right: 0;
  bottom: 0;
  transform: rotate(3deg);
  box-shadow: 0 30px 50px -24px rgba(15, 23, 42, 0.6), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
}

/* What the camera sees: the bright computer screen, slightly out of focus round the code. */
.vwf-cam.is-scan {
  background: radial-gradient(95% 65% at 50% 42%, #f4f5f8 0%, #dfe2e8 55%, #b8bdc7 100%);
}

.vwf-cam.is-scan::before {
  content: "";
  position: absolute;
  top: 9%;
  left: 18%;
  right: 18%;
  height: 4%;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.12);
  filter: blur(3px);
}

.vwf-scan-view {
  position: absolute;
  top: 24%;
  left: 50%;
  width: 72%;
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.vwf-scan-plate {
  position: absolute;
  inset: 8%;
  display: grid;
  place-items: center;
  border-radius: 10%;
  background: #fff;
}

.vwf-qr.is-cam {
  width: 80%;
  height: 80%;
}

.vwf-found {
  position: absolute;
  inset: 0;
  border: 2px solid #facc15;
  border-radius: 14%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.12);
}

.vwf-cam.is-scan .vwf-pill.is-link { bottom: 22%; }

.vwf-screen:has(.vwf-cam.is-full) .vwf-sb {
  position: relative;
  z-index: 2;
  color: #18181b;
}

/* Result. */
.vwf-done {
  padding-top: 2em;
  text-align: center;
}

.vwf-ok {
  display: grid;
  place-items: center;
  width: 5.7em;
  height: 5.7em;
  margin: 0 auto 1.4em !important;
  border-radius: 1.7em;
  background: #d1fae5;
  color: #047857;
}

.vwf-ok svg { width: 50%; height: 50%; }

.vwf-sid {
  margin-top: 1.4em !important;
  padding: 1em;
  border-radius: 1.1em;
  background: #fafafa;
  text-align: left;
}

.vwf-sid small {
  display: block;
  font-size: 0.78em !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #71717a;
}

.vwf-sid code {
  display: block;
  margin-top: 0.3em;
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: #3f3f46;
  word-break: break-all;
}

/* ---- Player (veriwell-demo.js): one phone, the words beside it, controls under. */
.c-vwf.is-live .vwf-steps {
  display: block;
}

.c-vwf.is-live {
  --vwf-w: clamp(190px, 52vw, 250px);
}

.c-vwf.is-live .vwf-step {
  display: none;
}

.c-vwf.is-live .vwf-step.is-on {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.c-vwf.is-live .vwf-text {
  max-width: 30rem;
}

@media (max-width: 699px) {
  .c-vwf.is-live .vwf-step.is-on {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1.5rem;
  }
  .c-vwf.is-live .vwf-text { min-height: 15rem; }
}

@media (min-width: 700px) {
  .c-vwf.is-live .vwf-text { min-height: 20rem; }
  .c-vwf.is-live .vwf-step.is-on { padding-left: clamp(0rem, -6rem + 12vw, 5rem); }
}

.vwf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.vwf-ctl {
  display: flex;
  gap: 0.4rem;
}

.vwf-ctl button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.vwf-ctl button[data-act="play"] {
  min-width: 6.5rem;
  border-color: var(--vw-blue);
  background: var(--vw-blue);
  color: #fff;
}

.vwf-ctl button[data-act="prev"],
.vwf-ctl button[data-act="next"] {
  width: 40px;
  padding: 0;
  justify-content: center;
}

.vwf-ctl svg {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  .vwf-ctl button:hover { border-color: var(--ink); }
  .vwf-ctl button[data-act="play"]:hover { background: var(--vw-blue-ink); border-color: var(--vw-blue-ink); }
}

.vwf-ctl button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* The steps, as a row of labelled ticks you can jump between. */
.vwf-track {
  display: flex;
  flex: 1;
  gap: 4px;
  min-width: 12rem;
}

.vwf-track button {
  position: relative;
  flex: 1;
  height: 32px;
  border-radius: 6px;
}

.vwf-track button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 999px;
  background: #dfe3ea;
  transition: background-color 0.3s var(--ease-out);
}

.vwf-track button.is-past::after { background: rgba(37, 99, 235, 0.45); }
.vwf-track button[aria-current="step"]::after { background: var(--vw-blue); }
.vwf-track button.is-group::before {
  content: attr(data-group);
  position: absolute;
  left: 0;
  bottom: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
}

.vwf-track button:focus-visible {
  outline-offset: 2px;
}

@media (max-width: 699px) {
  .vwf-track { order: 3; flex-basis: 100%; }
  .vwf-track button.is-group::before { display: none; }
}

.vwf-status {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Motion inside the phone while a step is on (not for reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .c-vwf.is-live .vwf-step.is-on .vwf-screen > * { animation: vwf-in 0.45s var(--ease-out) both; }
  .c-vwf.is-live .vwf-step.is-on .vwf-text { animation: vwf-in 0.45s var(--ease-out) both; }

  .c-vwf.is-live .is-on .vwf-cam.is-frame .vwf-doc { animation: vwf-doc-in 2.4s var(--ease-out) both; }
  .c-vwf.is-live .is-on .vwf-cam.is-frame .vwf-glare { animation: vwf-glare 2.4s var(--ease-out) both; }
  .c-vwf.is-live .is-on .vwf-cam.is-frame .vwf-guide { animation: vwf-guide-ok 2.4s steps(1, end) both; }
  .c-vwf.is-live .is-on .vwf-msgs .vwf-msg { animation: vwf-show 2.4s linear both; }
  .c-vwf.is-live .is-on .vwf-msgs .is-a { animation-name: vwf-msg-a; }
  .c-vwf.is-live .is-on .vwf-msgs .is-b { animation-name: vwf-msg-b; }
  .c-vwf.is-live .is-on .vwf-msgs .is-c { animation-name: vwf-msg-c; }

  .c-vwf.is-live .is-on .vwf-count .vwf-n i { animation: vwf-count 2.1s linear both; }
  .c-vwf.is-live .is-on .vwf-count .vwf-n i:nth-child(1) { animation-name: vwf-c1; }
  .c-vwf.is-live .is-on .vwf-count .vwf-n i:nth-child(2) { animation-name: vwf-c2; }
  .c-vwf.is-live .is-on .vwf-count .vwf-n i:nth-child(3) { animation-name: vwf-c3; }
  .c-vwf.is-live .is-on .vwf-captured { animation: vwf-captured 2.4s var(--ease-out) both; }

  .c-vwf.is-live .is-on .vwf-face [data-vw-feat],
  .c-vwf.is-live .is-on .vwf-face [data-vw-head],
  .c-vwf.is-live .is-on .vwf-face [data-vw-eye] { animation: vwf-pose 0.7s var(--ease-out) 0.35s both reverse; }
  .c-vwf.is-live .is-on .vwf-face[data-pose="smile"] [data-vw-mouth="n"] { animation: vwf-mouth-n 0.5s var(--ease-out) 0.45s both; }
  .c-vwf.is-live .is-on .vwf-face[data-pose="smile"] [data-vw-mouth="s"] { animation: vwf-mouth-s 0.5s var(--ease-out) 0.45s both; }
  .c-vwf.is-live .is-on .vwf-cam.is-face .vw-ring { animation: vwf-ring 1.2s steps(1, end) both; }
  .c-vwf.is-live .is-on .vwf-sound { animation: vwf-pulse 0.9s var(--ease-out) 1.15s 2; }

  .c-vwf.is-live .is-on .vwf-cues li { animation: vwf-cue 0.5s var(--ease-out) both; }
  .c-vwf.is-live .is-on .vwf-cues .is-voice { animation-delay: 0.15s; }
  .c-vwf.is-live .is-on .vwf-cues .is-tick { animation-delay: 1.1s; }
  .c-vwf.is-live .is-on .vwf-cues .is-chime,
  .c-vwf.is-live .is-on .vwf-cues .is-shutter { animation-delay: 2s; }
  .c-vwf.is-live .is-on .vwf-cues .is-buzz { animation-delay: 2.2s; }
}

@keyframes vwf-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes vwf-doc-in {
  0% { transform: translate(6%, 10%) rotate(7deg) scale(0.86); }
  60% { transform: translate(1%, 2%) rotate(-1deg) scale(0.98); }
  100% { transform: rotate(-2.5deg); }
}
@keyframes vwf-glare { 0%, 45% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes vwf-guide-ok { 0% { border-color: rgba(255, 255, 255, 0.8); } 82% { border-color: #34d399; } }
@keyframes vwf-msg-a { 0%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes vwf-msg-b { 0%, 34% { opacity: 0; } 35%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes vwf-msg-c { 0%, 71% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes vwf-c1 { 0%, 32% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes vwf-c2 { 0%, 32% { opacity: 0; } 33%, 65% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes vwf-c3 { 0%, 65% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes vwf-captured { 0%, 82% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vwf-pose { to { transform: none; } }
@keyframes vwf-mouth-n { from { opacity: 1; } to { opacity: 0; } }
@keyframes vwf-mouth-s { from { opacity: 0; } to { opacity: 1; } }
@keyframes vwf-ring { 0% { stroke: rgba(255, 255, 255, 0.85); } 80% { stroke: #34d399; } }
@keyframes vwf-pulse { 50% { box-shadow: 0 0 0 0.5em rgba(103, 232, 249, 0.35); background: #0891b2; } }
@keyframes vwf-cue { from { opacity: 0.25; transform: translateX(-4px); } }

/* ------------------------------------------------- datamap: who gets what */

.c-vwd {
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 60px -40px rgba(15, 23, 42, 0.25);
}

.vwd-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Without JS: the three summaries side by side. With JS: the toggle picks one. */
.vwd-views {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (min-width: 760px) {
  .vwd-views { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vwd-view {
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: var(--surface);
}

.vwd-view-name {
  font-weight: 600;
  color: var(--ink);
}

.vwd-view-text {
  margin-top: 0.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.vwd-view[data-view="website"] { background: var(--vw-blue-tint); }
.vwd-view[data-view="kept"] { background: #f1f5f9; }
.vwd-view[data-view="never"] { background: var(--vw-ok-tint); }

.vwd-items {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .vwd-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .vwd-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vwd-item {
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.vwd-name {
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.prose .c-vwd .vwd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.vwd-badges li {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

.vwd-badges .is-website { background: var(--vw-blue-tint); color: var(--vw-blue-ink); }
.vwd-badges .is-no { background: #f4f4f5; color: #52525b; }
.vwd-badges .is-kept { background: #f1f5f9; color: #334155; box-shadow: inset 0 0 0 1px #e2e8f0; }
.vwd-badges .is-never { background: var(--vw-ok-tint); color: var(--vw-ok-ink); }

.vwd-detail {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* With JS: one view at a time; matching items come forward, the rest step back. */
.vwd-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
}

.vwd-seg {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  gap: 2px;
  overflow-x: auto;
  border-radius: 999px;
  background: #f1f2f5;
  scrollbar-width: none;
}

.vwd-seg::-webkit-scrollbar { display: none; }

.vwd-seg button {
  position: relative;
  z-index: 1;
  flex: none;
  min-height: 36px;
  padding: 0 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-2);
  transition: color 0.3s var(--ease-out);
}

.vwd-seg button[aria-selected="true"] { color: #fff; }

/* Phones: the three choices share the row (two lines if needed), and only the matching items show. */
@media (max-width: 559px) {
  .vwd-bar { display: block; }
  .vwd-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    border-radius: 16px;
  }
  .vwd-seg button {
    min-height: 46px;
    padding: 0.3rem 0.45rem;
    font-size: 0.84rem;
    line-height: 1.2;
    white-space: normal;
    border-radius: 12px;
  }
  .vwd-seg .vwd-seg-ind { border-radius: 12px; }
  .vwd-count { margin-top: 0.6rem; }
  .c-vwd.is-live .vwd-item.is-out { display: none; }
}

.vwd-seg-ind {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  border-radius: 999px;
  background: var(--ink);
  transition: transform 0.45s var(--ease-expo), width 0.45s var(--ease-expo), background-color 0.3s var(--ease-out);
}

.c-vwd[data-on="website"] .vwd-seg-ind { background: var(--vw-blue); }
.c-vwd[data-on="kept"] .vwd-seg-ind { background: #334155; }
.c-vwd[data-on="never"] .vwd-seg-ind { background: var(--vw-ok-ink); }

.c-vwd.is-live .vwd-views {
  display: block;
}

.c-vwd.is-live .vwd-view { display: none; }
.c-vwd.is-live .vwd-view.is-on { display: block; }

.c-vwd.is-live .vwd-item.is-out {
  opacity: 0.38;
}

.c-vwd.is-live .vwd-item.is-in {
  border-color: rgba(10, 10, 10, 0.18);
  box-shadow: 0 14px 30px -22px rgba(15, 23, 42, 0.45);
}

.c-vwd[data-on="website"] .vwd-item.is-in { border-color: rgba(37, 99, 235, 0.45); }
.c-vwd[data-on="kept"] .vwd-item.is-in { border-color: rgba(51, 65, 85, 0.4); }
.c-vwd[data-on="never"] .vwd-item.is-in { border-color: rgba(4, 120, 87, 0.4); }

.vwd-count {
  font-size: 0.88rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .c-vwd.is-live .vwd-item.is-in { transform: translateY(-2px); }
}