/* SalesJury — "Jury Chamber"
   Dark ink chamber, gold as the single accent, verdict red only for flags.
   Frosted glass is reserved for "exhibits": nav, verdict card, chips, calculator. */

:root {
  /* Ground and surfaces */
  --ink-0: #0b0d11;
  --ink-1: #11141a;
  --ink-2: #181c24;
  --ink-3: #222733;

  /* Text */
  --text: #f4f2ed;
  --text-2: #c8ccd4;
  --text-3: #9298a3;

  /* Accent and verdict */
  --gold: #e3b341;
  --gold-hi: #f0c65c;
  --gold-ink: #15120a;
  --gold-soft: rgba(227, 179, 65, 0.14);
  --red: #ff5a4f;
  --red-text: #fda29b;
  --red-soft: rgba(240, 68, 56, 0.12);
  --red-line: rgba(240, 68, 56, 0.4);

  /* Paper (the resume) */
  --paper: #fbfaf7;
  --paper-2: #f1eee7;
  --paper-ink: #121418;
  --paper-muted: #4a4f57;
  --paper-faint: #6b6f76;
  --paper-gold: #8a6410;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-strong: rgba(22, 26, 34, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.11);
  --glass-hi: rgba(255, 255, 255, 0.14);
  --glass-blur: 20px;

  /* Type */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: 1.0625rem;
  --fs-lede: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-h1: clamp(2.375rem, 1.35rem + 4vw, 4.4rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.5vw, 3.4rem);
  --fs-h2-xl: clamp(2.5rem, 1.4rem + 4.4vw, 5.2rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);

  /* Space and shape */
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --section-y: clamp(88px, 10vw, 152px);
  --radius: 20px;
  --radius-sm: 12px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: dark;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
b { font-weight: 700; color: var(--text); }
i { font-style: italic; }
::selection { background: var(--gold); color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--gold); color: var(--gold-ink); font-weight: 700;
  padding: 10px 16px; border-radius: 999px; text-decoration: none;
  transition: top 160ms var(--ease-out);
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

/* Ambient light: soft gold fields that give the glass something to bend */
.glow {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--s, 600px);
  aspect-ratio: 1;
  max-width: 160vw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.glow-gold { background: radial-gradient(closest-side, rgba(227, 179, 65, 0.2), rgba(227, 179, 65, 0.06) 55%, transparent); }
.glow-ember { background: radial-gradient(closest-side, rgba(214, 120, 52, 0.16), rgba(214, 120, 52, 0.04) 55%, transparent); }

/* Glass material */
.glass {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 40px 80px -40px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--ink-2); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--ink-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Type */
.display, .h2, .h3, h3 {
  font-family: var(--font-display);
  font-stretch: 112%;
  text-wrap: balance;
}
.display {
  font-size: var(--fs-h1);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: 850;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.h2-xl { font-size: var(--fs-h2-xl); line-height: 0.98; letter-spacing: -0.04em; }
h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero .display { text-wrap: pretty; }
/* Headline highlights: red for the problem, gold for the promise */
.hl-red { color: var(--red); }
.hl-gold { color: var(--gold); }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--text-2); max-width: 44ch; }
.section-sub { font-size: var(--fs-lede); line-height: 1.55; color: var(--text-2); max-width: 62ch; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition:
    transform 160ms var(--ease-out),
    translate 200ms var(--ease-out),
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: 0.9375rem; }
.btn-lg { min-height: 56px; padding: 16px 30px; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn-gold {
  background: var(--gold);
  color: var(--gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-outline {
  background: rgba(227, 179, 65, 0.06);
  color: var(--gold);
  border-color: var(--gold);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .js .reveal.is-in.btn:hover { translate: 0 -2px; }
  .btn-gold:hover { background: var(--gold-hi); }
  .btn-outline:hover { background: var(--gold); color: var(--gold-ink); }
}

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--glass-edge);
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(11, 13, 17, 0.55);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transition: background-color 240ms ease, border-color 240ms ease;
}
.site-header.is-scrolled { background: rgba(11, 13, 17, 0.78); border-bottom-color: rgba(255, 255, 255, 0.08); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
.brand { display: inline-flex; flex-shrink: 0; border-radius: 6px; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  color: var(--text-2);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 8px 0;
  transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--text); } }
.nav-toggle { display: none; }

/* Hero */
.hero { position: relative; overflow: clip; padding-block: clamp(48px, 7vw, 104px) clamp(88px, 10vw, 136px); }
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.hero-note { font-size: 0.9375rem; color: var(--text-3); }

/* Verdict card */
.verdict-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 50px 100px -40px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(227, 179, 65, 0.05);
}
.vc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vc-title {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 850;
  font-size: 0.875rem;
  letter-spacing: 0.18em;
}
.vc-candidate {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.vc-person { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-label { font-size: 0.8125rem; color: var(--text-3); }
.vc-name { font-weight: 700; font-size: 1.1875rem; }
.vc-role { font-size: 0.875rem; color: var(--text-2); }
.stamp {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--red);
  border: 3px solid var(--red);
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transform: rotate(-6deg);
  background: rgba(240, 68, 56, 0.08);
}
.vc-compare { display: flex; flex-direction: column; gap: 14px; }
.vc-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.vc-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9375rem;
  padding-left: 14px;
  border-left: 2px solid var(--red-line);
}
.vc-saw { color: var(--text-3); }
.vc-jury { font-weight: 600; color: var(--text); }
.vc-foot {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--red-text);
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* Logos */
.logos { position: relative; background: var(--ink-1); padding-block: 44px; --logo-gap: clamp(64px, 7vw, 112px); }
.logos-inner { display: flex; flex-direction: column; align-items: center; margin-bottom: 26px; }
.logos-title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-3);
  text-align: center;
}
/* Static row (no JS or reduced motion); main.js turns it into a looping ticker */
.logo-ticker { padding-left: var(--gutter); padding-right: var(--gutter-r); }
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px var(--logo-gap);
}
.logo-row li { display: flex; align-items: center; justify-content: center; height: 48px; flex-shrink: 0; }

.logo-ticker.is-ticking {
  padding: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-ticker.is-ticking .logo-track {
  display: flex;
  width: max-content;
  animation: logo-ticker var(--ticker-duration, 40s) linear infinite;
}
.logo-ticker.is-ticking .logo-row {
  flex-wrap: nowrap;
  gap: var(--logo-gap);
  padding-right: var(--logo-gap);
}
@keyframes logo-ticker {
  to { transform: translateX(calc(-1 * var(--ticker-shift, 50%))); }
}
@media (hover: hover) and (pointer: fine) {
  .logo-ticker.is-ticking:hover .logo-track { animation-play-state: paused; }
}
.logo-row img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.62;
  transition: opacity 200ms ease, filter 200ms ease;
}
.logo-row img.logo-mark { height: 44px; }
.logo-row img.logo-tall { height: 46px; }
@media (hover: hover) and (pointer: fine) {
  .logo-row img:hover { opacity: 1; }
}

/* Sections */
.section { position: relative; overflow: clip; padding-block: var(--section-y); }
.section > .container { position: relative; z-index: 1; }
.section-head { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }

/* Reality */
.reality .section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stat { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 10px; }
.stat-num {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 900;
  font-size: clamp(3.5rem, 2.4rem + 4vw, 6.25rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 1.0625rem; color: var(--text); }
.reality-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  margin-top: clamp(40px, 5vw, 64px);
}
.reality-close p { font-size: var(--fs-lede); max-width: 54ch; color: var(--text); }

/* Difference */
.difference { background: var(--ink-1); }
.difference .section-head { margin-bottom: clamp(48px, 6vw, 80px); max-width: 940px; }

/* What you see / What we see */
.wv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 22px;
  align-items: center;
}
.wv-legend, .wv-pair { display: contents; }
.wv-hd {
  grid-row: 1;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wv-hd-see { grid-column: 1; justify-self: end; color: var(--text-3); }
.wv-hd-we { grid-column: 3; justify-self: start; color: var(--gold); }

.wv-res {
  grid-column: 2;
  grid-row: 2 / span 4;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  position: relative;
  z-index: 1;
}
.res-top { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid #e4e1da; }
.res-avatar {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--paper-muted);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
}
.res-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res-name { font-family: var(--font-display); font-stretch: 112%; font-weight: 900; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.01em; }
.res-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-gold); }
.res-block { display: flex; flex-direction: column; gap: 6px; }
.res-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-faint); }
.res-text { color: var(--paper-muted); }
.res-job { display: flex; flex-direction: column; gap: 3px; }
.res-job + .res-job { margin-top: 8px; }
.res-job-head { display: flex; justify-content: space-between; gap: 8px; }
.res-job-title { font-weight: 700; }
.res-date { color: var(--paper-faint); white-space: nowrap; }
.res-hl {
  background-image: linear-gradient(rgba(227, 179, 65, 0.5), rgba(227, 179, 65, 0.5));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
  color: var(--paper-ink);
}
.res-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.res-tags span { background: var(--paper-2); border-radius: 999px; padding: 3px 10px; font-size: 0.75rem; }

.wv-c, .wv-f {
  grid-row: var(--row);
  position: relative;
  display: flex;
  gap: 10px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.wv-c {
  grid-column: 1;
  justify-self: end;
  align-items: center;
  font-size: 1.0625rem;
  color: var(--text);
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.wv-c svg { flex-shrink: 0; color: var(--text-3); }
.wv-f {
  grid-column: 3;
  justify-self: start;
  align-items: flex-start;
  max-width: 380px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--red-text);
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  box-shadow: inset 0 1px 0 rgba(255, 180, 170, 0.12);
}
.wv-f svg { flex-shrink: 0; margin-top: 2px; color: var(--red); }

/* Connectors to the resume */
.wv-c::after, .wv-f::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 56px;
  height: 1.5px;
}
.wv-c::after { left: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12)); transform-origin: left; }
.wv-f::before { right: 100%; background: linear-gradient(90deg, rgba(240, 68, 56, 0.25), rgba(240, 68, 56, 0.7)); transform-origin: right; }

/* Jurors */
.jurors { margin-top: clamp(56px, 7vw, 96px); display: flex; flex-direction: column; gap: 40px; }
.jurors-text { font-size: var(--fs-lede); color: var(--text-2); max-width: 70ch; }
.jurors-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.statement {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 34ch;
  text-wrap: balance;
}

/* Full cycle */
.fullcycle .section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 1080px; }
.calc .section-head { max-width: 1040px; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.compare-card {
  position: relative;
  overflow: clip;
  border-radius: var(--radius);
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.compare-card > * { position: relative; z-index: 1; }
.compare-card > .glow { position: absolute; z-index: 0; }
.compare-card p { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.55; }
.compare-usual { background: var(--ink-1); border: 1px solid rgba(255, 255, 255, 0.06); }
.compare-usual p { color: var(--text-2); }
.compare-sj { border-color: rgba(227, 179, 65, 0.35); }
.compare-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.compare-usual .compare-label { color: var(--text-3); }
.compare-usual .compare-label svg { color: var(--red); }
.compare-sj .compare-label { color: var(--gold); }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; margin-top: auto; padding-top: 6px; }
.chain li {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}
.chain li.chain-end { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 700; }
.chain li:not(.chain-end)::after {
  content: "";
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%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 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* How it works */
.how .section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.step { padding: clamp(26px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.step-num {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 2.75rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  margin-bottom: 8px;
  position: relative;
  align-self: flex-start;
}
.step-num::after {
  content: attr(data-num);
  position: absolute;
  inset: 0;
  color: var(--gold);
  -webkit-text-stroke: 0;
  clip-path: inset(0 0 0 0);
}
.step p { color: var(--text-2); }
.step-feature { border-color: rgba(227, 179, 65, 0.35); background: linear-gradient(180deg, rgba(227, 179, 65, 0.12), rgba(227, 179, 65, 0.03)); }
.how-cta { margin-top: clamp(36px, 4vw, 52px); }

/* Verdict report */
.report { background: var(--ink-1); }
.report-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.report-head { position: sticky; top: 120px; }
.report-items { display: flex; flex-direction: column; }
.report-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  padding-block: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.report-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.report-item h3 { margin-bottom: 8px; }
.report-item p { color: var(--text-2); max-width: 52ch; }
.report-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid rgba(227, 179, 65, 0.25);
}
.report-icon-red { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }

/* Finalists */
.finalists { position: relative; padding-block: clamp(64px, 7vw, 104px) 0; }
.finalists-card {
  overflow: clip;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: 28px;
  border-color: rgba(227, 179, 65, 0.3);
}
.finalists-card > .glow { position: absolute; }
.finalists-copy { position: relative; z-index: 1; flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.finalists-copy p { font-size: var(--fs-lede); color: var(--text-2); max-width: 58ch; }
.finalists-card .btn { position: relative; z-index: 1; flex: 0 0 auto; }

/* Calculator */
.calc .section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.calc-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: stretch; }
.calc-inputs { padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 34px; justify-content: center; }
.field { display: flex; flex-direction: column; gap: 12px; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field label { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.field output {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Range input */
input[type="range"] {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0 var(--fill), rgba(255, 255, 255, 0.12) var(--fill) 100%);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--gold); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--text);
  border: 5px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  transition: transform 160ms var(--ease-out);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  border: 5px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  transition: transform 160ms var(--ease-out);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(227, 179, 65, 0.35), 0 4px 14px rgba(0, 0, 0, 0.5); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(227, 179, 65, 0.35), 0 4px 14px rgba(0, 0, 0, 0.5); }

.calc-result {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #1d1a12, #13120f);
  border: 1px solid rgba(227, 179, 65, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.12), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.calc-total {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 900;
  font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--red);
}
.calc-lines { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.calc-lines > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.calc-lines dt { color: var(--text-2); }
.calc-lines dd { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-note { font-size: 0.8125rem; color: var(--text-3); }
.calc-result .btn { margin-top: auto; }

/* FAQ */
.faq { background: var(--ink-1); }
.faq-inner { max-width: 940px; display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq details {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.faq details[open] { background: rgba(255, 255, 255, 0.06); border-color: rgba(227, 179, 65, 0.28); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 {
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  transition: transform 240ms var(--ease-out), background-color 200ms ease;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: translate(-50%, -50%);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq-icon { transform: rotate(45deg); background: var(--gold-soft); }
.faq details p { padding: 0 24px 24px; color: var(--text-2); max-width: 68ch; }
.faq details[open] p { animation: faq-in 260ms var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
@media (hover: hover) and (pointer: fine) {
  .faq details:not([open]):hover { background: rgba(255, 255, 255, 0.055); }
}

/* Footer */
.site-footer { position: relative; overflow: clip; padding-block: clamp(80px, 9vw, 128px) calc(40px + env(safe-area-inset-bottom, 0px)); }
.site-footer > .container { position: relative; z-index: 1; }
.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.footer-cta .h2 { flex: 999 1 460px; max-width: 18ch; font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4rem); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.875rem;
  color: var(--text-3);
}
.footer-bottom img { height: 26px; width: auto; }
.footer-bottom a { color: var(--text-2); }
@media (hover: hover) and (pointer: fine) { .footer-bottom a:hover { color: var(--gold); } }

/* ---------- Legal pages (privacy policy) ---------- */
.legal { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 120px); }
.legal-inner { max-width: 820px; display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); }
.legal-head { display: flex; flex-direction: column; gap: 14px; }
.legal-updated { font-size: 0.9375rem; color: var(--text-3); }
.legal-lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--text-2); max-width: 64ch; }
.legal-toc { padding: 22px 26px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); }
.legal-toc-title { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.legal-toc ol { columns: 2; column-gap: 32px; list-style: decimal; padding-left: 1.2em; color: var(--text-3); }
.legal-toc li { break-inside: avoid; padding-block: 3px; }
.legal-toc a { color: var(--text-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .legal-toc a:hover { color: var(--gold); } }
.legal section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 96px; }
.legal section h2 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.legal section p, .legal section li { color: var(--text-2); max-width: 70ch; }
.legal section ul { list-style: disc; padding-left: 1.25em; display: flex; flex-direction: column; gap: 10px; }
.legal section li::marker { color: var(--gold); }
.legal strong { color: var(--text); font-weight: 600; }
.legal section a { color: var(--gold); text-underline-offset: 3px; overflow-wrap: anywhere; }
.site-footer[id="contact-footer"] { padding-top: 0; }
@media (max-width: 720px) {
  .legal-toc ol { columns: 1; }
}

/* ---------- Motion ----------
   Everything plays once, animates only transform/translate/opacity/clip-path
   (plus two small paint-only sweeps), and is complete at rest without JS. */

/* Section reveals use the individual `translate` property so `transform` stays free for the tilt */
.js .reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; translate: none; }

/* Headline highlights: the phrase sweeps from white into its colour after the line lands */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .js .reveal .hl-red, .js .reveal .hl-gold {
    color: transparent;
    background-image: linear-gradient(90deg, var(--hl) 0 50%, var(--text) 50% 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-position 1000ms var(--ease-in-out);
    transition-delay: calc(var(--d, 0ms) + 450ms);
  }
  .js .reveal .hl-red { --hl: var(--red); }
  .js .reveal .hl-gold { --hl: var(--gold); }
  .js .reveal.is-in .hl-red, .js .reveal.is-in .hl-gold { background-position: 0 0; }
}

/* Verdict card: evidence rows are read out one by one, then the stamp lands */
.js .verdict-card .vc-row, .js .verdict-card .vc-foot {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out);
}
.js .verdict-card .vc-row:nth-child(2) { transition-delay: calc(var(--d, 0ms) + 350ms); }
.js .verdict-card .vc-row:nth-child(3) { transition-delay: calc(var(--d, 0ms) + 600ms); }
.js .verdict-card .vc-row:nth-child(4) { transition-delay: calc(var(--d, 0ms) + 850ms); }
.js .verdict-card .vc-foot { transition-delay: calc(var(--d, 0ms) + 1650ms); }
.js .verdict-card.is-in .vc-row, .js .verdict-card.is-in .vc-foot { opacity: 1; translate: none; }
.js .verdict-card .stamp { opacity: 0; transform: rotate(-14deg) scale(1.9); }
.js .verdict-card.is-in .stamp {
  animation: stamp-in 520ms var(--ease-out) calc(var(--d, 0ms) + 1150ms) forwards;
}
@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-14deg) scale(1.9); }
  60% { opacity: 1; transform: rotate(-5deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}

/* Resume graphic: claim chip, then its proof gets highlighted on the resume, then the red flag */
.js .wv .wv-c, .js .wv .wv-f, .js .wv .wv-res, .js .wv .wv-hd {
  opacity: 0;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .wv .wv-res { transform: translateY(24px) scale(0.98); }
.js .wv .wv-c { transform: translateX(-24px); }
.js .wv .wv-f { transform: translateX(24px); }
.js .wv .wv-c::after, .js .wv .wv-f::before { transform: scaleX(0); transition: transform 500ms var(--ease-out); transition-delay: calc(var(--d, 0ms) + 250ms); }
.js .wv.is-in .wv-c, .js .wv.is-in .wv-f, .js .wv.is-in .wv-res, .js .wv.is-in .wv-hd { opacity: 1; transform: none; }
.js .wv.is-in .wv-c::after, .js .wv.is-in .wv-f::before { transform: scaleX(1); }
.js .wv .res-hl {
  color: inherit;
  background-size: 0% 100%;
  transition: background-size 650ms var(--ease-out), color 650ms ease;
  transition-delay: var(--d, 0ms);
}
.js .wv.is-in .res-hl { background-size: 100% 100%; color: var(--paper-ink); }

/* Process chain lights up left to right, ending on the gold pill */
.js .compare-sj .chain li { opacity: 0.25; translate: 0 6px; transition: opacity 450ms var(--ease-out), translate 450ms var(--ease-out), scale 450ms var(--ease-out); }
.js .compare-sj .chain li.chain-end { scale: 0.9; }
.js .compare-sj .chain li:nth-child(1) { transition-delay: calc(var(--d, 0ms) + 350ms); }
.js .compare-sj .chain li:nth-child(2) { transition-delay: calc(var(--d, 0ms) + 500ms); }
.js .compare-sj .chain li:nth-child(3) { transition-delay: calc(var(--d, 0ms) + 650ms); }
.js .compare-sj .chain li:nth-child(4) { transition-delay: calc(var(--d, 0ms) + 800ms); }
.js .compare-sj .chain li:nth-child(5) { transition-delay: calc(var(--d, 0ms) + 1000ms); }
.js .compare-sj.is-in .chain li { opacity: 1; translate: none; scale: 1; }

/* How it works: each outlined number fills with gold from the bottom as its card arrives */
.js .step:not(.is-in) .step-num::after { clip-path: inset(100% 0 0 0); }
.js .step .step-num::after { transition: clip-path 800ms var(--ease-in-out); transition-delay: calc(var(--d, 0ms) + 300ms); }

/* Glass card tilt (mouse devices only, driven by main.js) */
[data-tilt] { transform-origin: center; }
[data-tilt].is-tilting { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .wv .wv-c, .js .wv .wv-f, .js .wv .wv-res, .js .wv .wv-hd,
  .js .verdict-card .vc-row, .js .verdict-card .vc-foot, .js .compare-sj .chain li {
    transform: none !important;
    translate: none !important;
    scale: none !important;
    transition: opacity 300ms ease;
  }
  .js .reveal .hl-red, .js .reveal .hl-gold { transition: none; background-position: 0 0; }
  .js .wv .res-hl { transition: none; background-size: 100% 100%; }
  .js .step:not(.is-in) .step-num::after { clip-path: none; }
  .js .wv .wv-c::after, .js .wv .wv-f::before { transform: none; transition: none; }
  .js .verdict-card .stamp { opacity: 1; transform: rotate(-6deg); }
  .js .verdict-card.is-in .stamp { animation: none; }
  .faq details[open] p { animation: none; }
  .logo-track { animation: none !important; }
  .btn:active { transform: none; }
  .btn:hover { translate: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .verdict-card { max-width: 520px; }
  .report-grid { grid-template-columns: minmax(0, 1fr); }
  .report-head { position: static; }
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .wv { grid-template-columns: minmax(0, 1fr); row-gap: 0; column-gap: 0; }
  .wv-res { grid-column: 1; grid-row: auto; max-width: 440px; width: 100%; justify-self: center; margin-bottom: 36px; }
  .wv-legend {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    max-width: 560px;
    width: 100%;
    justify-self: center;
    margin-bottom: 14px;
  }
  .wv-hd-see, .wv-hd-we { justify-self: auto; }
  .wv-pair {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 560px;
    width: 100%;
    justify-self: center;
    gap: 14px;
    margin-bottom: 18px;
  }
  .wv-pair:last-child { margin-bottom: 0; }
  .wv-c, .wv-f { grid-column: auto; grid-row: auto; justify-self: stretch; max-width: none; }
  .wv-c { border-radius: 14px; }
  /* Vertical connector: claim on top, its red flag directly below */
  .wv-c::after { left: 30px; top: 100%; width: 1.5px; height: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(240, 68, 56, 0.7)); transform-origin: top; }
  .wv-f::before { display: none; }
  .js .wv .wv-c::after { transform: scaleY(0); }
  .js .wv.is-in .wv-c::after { transform: scaleY(1); }
  .js .wv .wv-c, .js .wv .wv-f { transform: translateY(16px); }
}

@media (max-width: 1080px) {
  .logo-ticker:not(.is-ticking) .logo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; width: 100%; max-width: 620px; margin-inline: auto; }
}

@media (max-width: 860px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { flex-direction: row; align-items: center; gap: 22px; }
  .stat-num { min-width: 3.1ch; }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .nav { gap: 10px; }
  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--glass-edge);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 160ms var(--ease-out), background-color 200ms ease;
  }
  .nav-toggle:active { transform: scale(0.94); }
  .nav-toggle path { transition: transform 240ms var(--ease-out); transform-origin: 12px 12px; }
  .nav-toggle[aria-expanded="true"] .l1 { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .l2 { transform: translateY(-4px) rotate(-45deg); }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--gutter);
    right: var(--gutter-r);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    border-radius: 18px;
    background: var(--ink-2);
    border: 1px solid var(--glass-edge);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-links a { padding: 14px 16px; border-radius: 12px; font-size: 1.0625rem; color: var(--text); }
  .nav-links a:active { background: rgba(255, 255, 255, 0.06); }
  .header-inner { position: relative; min-height: 64px; }
  .brand img { height: 26px; }

  .hero-actions .btn { width: 100%; }
  .hero-note { width: 100%; text-align: center; }
  .reality-close .btn, .jurors-close .btn, .how-cta .btn, .footer-cta .btn, .finalists-card .btn { width: 100%; }
  .finalists-card .btn { flex: 1 1 100%; }
  .logos { --logo-gap: 56px; }
  .logo-row img { height: 24px; }
  .logo-row img.logo-mark { height: 38px; }
  .logo-row img.logo-tall { height: 40px; }
  .calc-lines > div { flex-direction: column; gap: 2px; }
  .calc-result .btn { white-space: normal; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .vc-candidate { flex-direction: column; align-items: flex-start; }
  .stamp { align-self: flex-end; margin-top: -6px; }
  .stat { flex-direction: column; align-items: flex-start; gap: 8px; }
  .res-job-head { flex-direction: column; gap: 0; }
  .wv-res { padding: 22px; }
}