/* Premium polish layer: global micro-interactions layered on top of the
   existing site. Purely additive — does not touch component markup. */

::selection {
  background: rgba(10, 61, 145, 0.28);
  color: #0f1a35;
}

html {
  scrollbar-color: #0a3d91 transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #0a3d91;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #06266b;
  background-clip: content-box;
}

:focus-visible {
  outline: 2px solid #0a3d91;
  outline-offset: 2px;
  border-radius: 4px;
}

#polish-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  background: linear-gradient(90deg, #0a3d91, #1e7fd6);
  z-index: 60;
  pointer-events: none;
}

/* Cursor-tracked spotlight on primary CTAs. Paints as a background-image
   layer, so it always sits behind existing button content automatically
   (no z-index/stacking risk with the button's own shine/arrow children). */
.polish-cta {
  transition: background-image 0.2s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.polish-cta:hover {
  background-image: radial-gradient(
    160px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.28),
    transparent 70%
  );
}

@media (prefers-reduced-motion: reduce) {
  #polish-progress {
    display: none;
  }
  .polish-cta,
  .polish-cta:hover {
    transition: none;
    background-image: none;
    transform: none !important;
  }
}

@media (pointer: coarse) {
  .polish-cta:hover {
    background-image: none;
  }
}

/* =========================================================================
   NAVBAR POLISH
   - Logo: DAVZON wordmark image, vertically centred
   - Hide on scroll down / reveal on scroll up (class toggled by polish.js)
   - Mobile: same frosted-glass look as the desktop pill, inside a rounded
     rectangle that holds the logo and the menu button
   Purely additive: targets the existing header markup, no markup changes.
   ========================================================================= */

/* ---- Logo: DAVZON wordmark image (all breakpoints) ---- */
header.fixed.inset-x-0.top-0 > div:first-child > a:first-child img {
  width: auto;
  height: 32px;
  display: block;
}

/* ---- Hide / reveal on scroll ---- */
header.fixed.inset-x-0.top-0.nav-ready {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease, visibility 0s linear 0s;
}
header.fixed.inset-x-0.top-0.nav-hidden {
  transform: translate3d(0, -140%, 0) !important;
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease, visibility 0s linear 0.55s;
}

/* ---- Desktop: logo sits in its own glass capsule, matching the nav pill ---- */
@media (min-width: 1024px) {
  header.fixed.inset-x-0.top-0 > div:first-child > a:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 55px;
    padding: 0 20px 0 14px;
    border-radius: 9999px;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(15, 23, 42, 0.03),
      0 8px 24px -16px rgba(15, 23, 42, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease,
      transform 0.2s var(--ease-out, ease);
  }
  header.fixed.inset-x-0.top-0.is-scrolled > div:first-child > a:first-child {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45),
      inset 0 -1px 0 rgba(15, 23, 42, 0.04),
      0 10px 34px -14px rgba(15, 23, 42, 0.28);
  }
  header.fixed.inset-x-0.top-0 > div:first-child > a:first-child::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
    pointer-events: none;
    z-index: -1;
  }
}

/* ---- Mobile / tablet: glass rounded-rectangle bar ---- */
@media (max-width: 1023.98px) {
  header.fixed.inset-x-0.top-0 {
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  header.fixed.inset-x-0.top-0 > div:first-child {
    min-height: 58px;
    padding: 8px 8px 8px 14px;
    border-radius: 22px;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
      inset 0 -1px 0 rgba(15, 23, 42, 0.04),
      0 10px 30px -16px rgba(15, 23, 42, 0.28);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  header.fixed.inset-x-0.top-0.is-scrolled > div:first-child {
    background: rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(15, 23, 42, 0.05),
      0 12px 34px -14px rgba(15, 23, 42, 0.32);
  }
  /* top sheen, same as the desktop pill */
  header.fixed.inset-x-0.top-0 > div:first-child::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
    pointer-events: none;
    z-index: 0;
  }

  /* compact logo so it never crowds the menu button (down to 320px) */
  header.fixed.inset-x-0.top-0 > div:first-child > a:first-child img {
    width: auto;
    height: 26px;
  }

  /* menu button: 44px tap target with a soft glass chip */
  header.fixed.inset-x-0.top-0 > div:first-child > button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6),
      0 4px 12px -6px rgba(15, 23, 42, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  header.fixed.inset-x-0.top-0 > div:first-child > button:active {
    transform: scale(0.94);
  }

  /* dropdown: same glass, same radius, hangs just under the bar */
  header.fixed.inset-x-0.top-0 #mobile-nav {
    margin-top: 0.5rem;
    padding-bottom: 28px;  /* room for the shadow inside the overflow-hidden wrapper */
    margin-bottom: -28px;
  }
  header.fixed.inset-x-0.top-0 #mobile-nav > nav {
    border-radius: 22px;
    padding: 0.5rem;
    gap: 0.125rem;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    backdrop-filter: blur(28px) saturate(1.6);
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55),
      0 18px 44px -18px rgba(15, 23, 42, 0.38);
    max-height: calc(100svh - 6.5rem);
    overflow-y: auto;
  }
  header.fixed.inset-x-0.top-0 #mobile-nav > nav > a:not(:last-child) {
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 500;
  }
  header.fixed.inset-x-0.top-0 #mobile-nav > nav > a:last-child {
    margin-top: 0.4rem;
    padding: 0.85rem 1rem;
  }
}

/* wider tablets: keep the bar from feeling stretched */
@media (min-width: 640px) and (max-width: 1023.98px) {
  header.fixed.inset-x-0.top-0 > div:first-child,
  header.fixed.inset-x-0.top-0 #mobile-nav {
    max-width: 720px;
  }
}

/* browsers without backdrop-filter: fall back to a more opaque surface */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1023.98px) {
    header.fixed.inset-x-0.top-0 > div:first-child { background: rgba(255, 255, 255, 0.9); }
    header.fixed.inset-x-0.top-0 #mobile-nav > nav { background: rgba(255, 255, 255, 0.96); }
  }
}

@media (prefers-reduced-motion: reduce) {
  header.fixed.inset-x-0.top-0.nav-ready,
  header.fixed.inset-x-0.top-0.nav-hidden {
    transition: opacity 0.01s linear, visibility 0s linear 0s;
  }
}

/* Home hero: the laptop photo carries the right-hand side, so the CV demo
   card is retired and the feature list becomes a row of glass pills. */
section:has(> img[src="/images/hero-laptop.webp"]) {
  --hero-pill-bg: rgba(255, 255, 255, 0.84);
}
section:has(> img[src="/images/hero-laptop.webp"]) > img[src="/images/hero-laptop.webp"] {
  object-position: 78% center;
}
section:has(> img[src="/images/hero-laptop.webp"]) > .max-w-content > div:nth-child(2) {
  display: none;
}
section:has(> img[src="/images/hero-laptop.webp"]) p:has(+ ul.mt-11) {
  display: none;
}
section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: none;
  margin-top: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li {
  flex: 1 1 calc(50% - 6px);
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  background: var(--hero-pill-bg);
  box-shadow: 0 14px 30px -18px rgba(10, 61, 145, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li > span:last-child {
  font-size: 14px;
  white-space: nowrap;
}
@media (min-width: 640px) {
  section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li {
    flex: 0 0 auto;
  }
}
@media (min-width: 1024px) {
  section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 {
    flex-wrap: nowrap;
    width: max-content;
  }
}
@media (min-width: 1280px) {
  section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li {
    padding: 11px 22px 11px 11px;
  }
  section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li > span:last-child {
    font-size: 15px;
  }
}
@media (max-width: 639px) {
  section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li {
    min-width: 0;
    gap: 10px;
    padding: 8px 12px 8px 8px;
  }
  section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li > span:last-child {
    font-size: 13px;
    white-space: normal;
  }
}
@media (max-width: 1023px) {
  section:has(> img[src="/images/hero-laptop.webp"]) > div.lg\:hidden {
    background: rgba(248, 250, 252, 0.74);
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  section:has(> img[src="/images/hero-laptop.webp"]) > div[style*="linear-gradient(90deg"] {
    background: linear-gradient(90deg, rgba(248, 250, 252, 0.93) 0%, rgba(248, 250, 252, 0.88) 45%, rgba(248, 250, 252, 0.55) 60%, transparent 70%) !important;
  }
}

/* Header "Log in" link: a glass pill that sits beside the dark Get in Touch
   CTA and matches the nav capsule's frosted look. Plain <a>, since /log-in is a
   static page outside the React router. */
.nav-login {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.15rem 0 1rem;
  border-radius: 9999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(15, 23, 42, 0.04),
    0 8px 24px -16px rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.nav-login svg {
  flex-shrink: 0;
  color: #0a3d91;
  transition: transform 0.2s ease;
}
.nav-login:hover {
  color: #0a3d91;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(10, 61, 145, 0.14), 0 12px 26px -14px rgba(10, 61, 145, 0.4);
  transform: translateY(-1px);
}
.nav-login:active {
  transform: scale(0.97);
}
.nav-login:focus-visible {
  outline: 2px solid #0a3d91;
  outline-offset: 2px;
}

/* 1024-1279px: the centred nav capsule needs the room, so Log in collapses to
   an icon button (the text stays in the accessible name). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-login {
    width: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
    font-size: 0;
  }
}

/* Mobile menu: full-width outline button above Get in Touch. */
.nav-login-m {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.nav-login-m svg {
  color: #0a3d91;
}
.nav-login-m:hover {
  border-color: #0a3d91;
  color: #0a3d91;
  background: #f8fafc;
}
.nav-login-m + * {
  margin-top: 0.5rem !important;
}

@media (prefers-reduced-motion: reduce) {
  .nav-login,
  .nav-login:hover,
  .nav-login:active {
    transition: none;
    transform: none;
  }
}

/* How It Works: "Schedule a meeting" call-to-action under the benefits row.
   Opens the Outlook Bookings page in a new tab. */
/* Meeting link sits under the How It Works subtitle */
.hiw-meet-top {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.hiw-meet-row {
  position: relative;
  z-index: 10;
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
@media (min-width: 640px) {
  .hiw-meet-row {
    margin-top: 3.5rem;
  }
}
.hiw-meet-lead {
  max-width: 22rem;
  text-wrap: balance;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #475569;
}
.hiw-meet {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 9999px;
  padding: 0.95rem 1.6rem 0.95rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #0a3d91;
  box-shadow: 0 14px 30px -12px rgba(10, 61, 145, 0.7);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hiw-meet:hover {
  background: #082d6e;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(10, 61, 145, 0.75);
}
.hiw-meet:active {
  transform: scale(0.97);
}
.hiw-meet:focus-visible {
  outline: 2px solid #0a3d91;
  outline-offset: 3px;
}
.hiw-meet-cal {
  flex-shrink: 0;
}
.hiw-meet-ext {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  opacity: 0.75;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hiw-meet:hover .hiw-meet-ext {
  opacity: 1;
  transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .hiw-meet,
  .hiw-meet:hover,
  .hiw-meet:active,
  .hiw-meet:hover .hiw-meet-ext {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Why DAVZON: sticky stacking cards (after kryloq.com "How it works").
   Each card sticks a little lower than the last, so earlier cards peek out as
   tabs. While the next card slides over, the covered card shrinks and dims.

   Performance: the shrink/dim is a scroll-driven CSS animation keyed to the
   NEXT card's own position (per-card view timelines), so it runs on the
   compositor, locked to the scroll, with no JavaScript. Browsers without
   scroll-driven animations get a light JS fallback (polish.js). Once a card is
   fully covered its contents are hidden, so the illustrations stacked under
   each other stop painting. Only transform, opacity and visibility animate.
   --------------------------------------------------------------------------- */
#why-davzon.wd-sec {
  overflow: clip; /* overflow:hidden would make the section a scroll container and break position:sticky */
}
.wdk-stack {
  position: relative;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  timeline-scope: --wdk1, --wdk2, --wdk3, --wdk4, --wdk5;
}
.wdk-card {
  position: sticky;
  top: calc(84px + var(--i) * 14px);
  padding-bottom: 16px;
  view-timeline-axis: block;
}
.wdk-card:nth-child(1) { view-timeline-name: --wdk1; }
.wdk-card:nth-child(2) { view-timeline-name: --wdk2; }
.wdk-card:nth-child(3) { view-timeline-name: --wdk3; }
.wdk-card:nth-child(4) { view-timeline-name: --wdk4; }
.wdk-card:nth-child(5) { view-timeline-name: --wdk5; }
/* Dwell: extra scroll room after each card, so it rests fully visible before
   the next card starts sliding over it. */
.wdk-card:not(:last-child) { padding-bottom: 24svh; }
@media (min-width: 1024px) {
  .wdk-card { top: calc(104px + var(--i) * 22px); padding-bottom: 20px; }
  .wdk-card:not(:last-child) { padding-bottom: 30svh; }
}

/* ---- surface ---- */
.wdk-inner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(24px, 2.4vw, 34px);
  border: 1px solid transparent;
  transform-origin: 50% 0;
  will-change: transform;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -20px 50px -30px rgba(0, 0, 0, 0.75),
    0 50px 90px -50px rgba(0, 0, 0, 0.9);
}
/* hairline gradient border: bright at the top edge, fading down */
.wdk-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(160, 200, 255, 0.3), rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.03));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* top light beam: a bright hairline with a soft blue bloom under it */
.wdk-inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  z-index: 3;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgb(150, 205, 255), transparent);
  box-shadow: 0 0 28px 4px rgba(80, 150, 255, 0.55);
  pointer-events: none;
}
/* every card: frosted-glass look. Opaque on purpose: a see-through card would show
   the card it slides over, and backdrop blur on four sticky layers costs frames. */
.wdk-card .wdk-inner {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    radial-gradient(70% 90% at 0% 0%, rgba(31, 107, 255, 0.38), transparent 62%),
    radial-gradient(55% 80% at 100% 100%, rgba(0, 180, 255, 0.2), transparent 62%),
    radial-gradient(45% 60% at 70% 0%, rgba(124, 92, 255, 0.16), transparent 65%),
    #0d1530;
}
.wdk-inner::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06) 40%, rgba(124, 196, 255, 0.2)) !important;
}
.wdk-inner::after { opacity: 0.5; }
/* stronger, more colourful glows behind the glass */
#why-davzon.wd-sec::before {
  background:
    radial-gradient(40% 40% at 20% 30%, #1f6bff88, #0000 70%),
    radial-gradient(40% 45% at 85% 70%, #00b4ff66, #0000 70%),
    radial-gradient(40% 40% at 60% 10%, #7c5cff55, #0000 70%);
}
.wdk-shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #020611;
  opacity: 0;
  pointer-events: none;
}

/* ---- layout ---- */
.wdk-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 32px;
  padding: 30px 24px;
}
/* fine film grain over the whole card */
.wdk-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");
  background-size: 180px;
  pointer-events: none;
}
@media (min-width: 768px) {
  .wdk-body { padding: 44px; }
}
@media (min-width: 1024px) {
  .wdk-body {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    /* header (104px) + four stacked tabs (4 x 22px) + breathing room = 230px */
    height: min(480px, max(380px, calc(100svh - 260px)));
    padding: clamp(32px, 5svh, 44px) 56px;
  }
}
.wdk-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.wdk-copy { margin-top: auto; }

/* Highlight stat: fills the space between the label and the headline */
.wdk-stat {
  display: flex;
  align-items: center;
  gap: 18px;
}
.wdk-stat b {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.6rem, min(6vw, 9.5svh), 5.4rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 20%, #a9bde6 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
  filter: drop-shadow(0 6px 30px rgba(80, 150, 255, 0.35));
}
.wdk-stat span {
  max-width: 21ch;
  text-wrap: balance;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(214, 228, 255, 0.78);
}
@media (max-width: 767px) {
  .wdk-text { gap: 22px; }
  .wdk-stat { gap: 14px; }
  .wdk-stat b { font-size: 2.5rem; }
  .wdk-stat span { font-size: 0.875rem; padding-left: 14px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .wdk-text { gap: 18px; }
}

/* ---- typography ---- */
.wdk-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(214, 228, 255, 0.75);
}
.wdk-label b {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border-radius: 9999px;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(80, 150, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(124, 196, 255, 0.4);
}
.wdk-label i { width: 36px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05)); }
.wdk-ico {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 17px;
  color: #9ad3ff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 24px -12px rgba(0, 0, 0, 0.6);
}
.wdk-ico svg { width: 24px; height: 24px; }
.wdk-title {
  max-width: 15ch;
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.9rem, min(4.1vw, 6.4svh), 3.6rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: #fff;
  background: linear-gradient(180deg, #ffffff 30%, #bcd6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
.wdk-desc {
  margin-top: 18px;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(222, 233, 255, 0.74);
}
.wdk-feats {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wdk-feats li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 7px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #e9f1ff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.wdk-feats svg {
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 5px;
  border-radius: 9999px;
  color: #66f0d0;
  background: rgba(102, 240, 208, 0.12);
}
.wdk-art { position: relative; display: none; }
@media (min-width: 1024px) {
  .wdk-art { display: flex; align-items: flex-end; justify-content: center; }
  /* soft light pool behind the illustration */
  .wdk-art::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 0;
    bottom: 4%;
    height: 70%;
    background: radial-gradient(closest-side, rgba(60, 140, 255, 0.28), transparent);
    pointer-events: none;
  }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .wdk-ico { display: none; }
  .wdk-desc { margin-top: 12px; }
  .wdk-feats { margin-top: 18px; }
}
/* big outlined step number */
.wdk-num {
  position: absolute;
  top: -10px;
  right: 0;
  font-size: clamp(6rem, 10.5vw, 9.5rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.16);
  pointer-events: none;
  user-select: none;
}
.wdk-stagewrap { position: relative; width: min(100%, 500px, calc((100svh - 380px) * 1.32)); }


/* ---- compact typography (option D): content grouped and centred, no dead gap ---- */
.wdk-copy { margin-top: 0; }
.wdk-text { gap: 22px; }
@media (min-width: 1024px) {
  .wdk-text { justify-content: center; }
  .wdk-ico { display: none; }
}
.wdk-stat b { font-weight: 700; font-size: clamp(2.2rem, 3vw, 3rem); }
.wdk-stat span { font-size: 0.85rem; }
.wdk-title {
  max-width: 20ch;
  font-weight: 700;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.wdk-desc { margin-top: 12px; font-size: 0.95rem; }
.wdk-feats { margin-top: 20px; gap: 8px 22px; }
.wdk-feats li {
  padding: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: #c9d6ee;
  background: none;
  box-shadow: none;
}

/* ---- covered-card depth (scroll-driven, compositor) ----
   Card N animates on card N+1's view timeline. The range starts when the next
   card's top reaches this card's bottom and ends when it reaches its own sticky
   spot, so the dim tracks the real overlap exactly. On desktop the card height
   is known in CSS; below 1024px the ramp uses an approximate 55svh. */
@keyframes wdk-recede { to { transform: scale(0.925); } }
@keyframes wdk-shade { to { opacity: 0.62; } }
@keyframes wdk-hide { to { opacity: 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wdk-card:not(:last-child) .wdk-inner,
    .wdk-card:not(:last-child) .wdk-shade,
    .wdk-card:not(:last-child) .wdk-body {
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      --wdk-start: calc(100vh - 98px - var(--i) * 14px - 55svh);
      --wdk-end: calc(100vh - 98px - var(--i) * 14px);
    }
    .wdk-card:not(:last-child) .wdk-inner { animation-name: wdk-recede; animation-range: cover var(--wdk-start) cover var(--wdk-end); }
    .wdk-card:not(:last-child) .wdk-shade { animation-name: wdk-shade; animation-range: cover var(--wdk-start) cover var(--wdk-end); }
    /* fully covered: stop painting this card's contents. Fires 3px before the
       next card settles (the timeline freezes once it sticks, so the very last
       pixel may never be reached); only the 22px tab is visible by then. */
    .wdk-card:not(:last-child) .wdk-body { animation-name: wdk-hide; animation-range: cover calc(var(--wdk-end) - 6px) cover calc(var(--wdk-end) - 3px); }
    .wdk-card:nth-child(1) > .wdk-inner, .wdk-card:nth-child(1) > * > * { animation-timeline: --wdk2; }
    .wdk-card:nth-child(2) > .wdk-inner, .wdk-card:nth-child(2) > * > * { animation-timeline: --wdk3; }
    .wdk-card:nth-child(3) > .wdk-inner, .wdk-card:nth-child(3) > * > * { animation-timeline: --wdk4; }
    .wdk-card:nth-child(4) > .wdk-inner, .wdk-card:nth-child(4) > * > * { animation-timeline: --wdk5; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .wdk-card:not(:last-child) .wdk-inner,
    .wdk-card:not(:last-child) .wdk-shade,
    .wdk-card:not(:last-child) .wdk-body {
      --wdk-start: calc(100vh - 104px - var(--i) * 22px - min(480px, max(380px, calc(100svh - 260px))) - 2px);
      --wdk-end: calc(100vh - 126px - var(--i) * 22px);
    }
  }
}

/* ---- entrance (html.wdk-anim is only set by polish.js) ---- */
.wdk-anim .wdk-card .wdk-label,
.wdk-anim .wdk-card .wdk-stat,
.wdk-anim .wdk-card .wdk-desc,
.wdk-anim .wdk-card .wdk-feats li,
.wdk-anim .wdk-card .wdk-actions {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.wdk-anim .wdk-card .wdk-ico {
  opacity: 0;
  transform: translateY(16px) scale(0.6);
  transition: opacity 0.6s ease 0.08s, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s;
}
.wdk-anim .wdk-card .wdk-title {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.7s ease 0.14s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.14s;
}
.wdk-anim .wdk-card .wdk-label i {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.wdk-anim .wdk-card .wdk-stat { transition-delay: 0.1s; }
.wdk-anim .wdk-card .wdk-desc { transition-delay: 0.26s; }
.wdk-anim .wdk-card .wdk-feats li:nth-child(1) { transition-delay: 0.36s; }
.wdk-anim .wdk-card .wdk-feats li:nth-child(2) { transition-delay: 0.44s; }
.wdk-anim .wdk-card .wdk-feats li:nth-child(3) { transition-delay: 0.52s; }
.wdk-anim .wdk-card .wdk-actions { transition-delay: 0.36s; }
.wdk-anim .wdk-card .wdk-stagewrap,
.wdk-anim .wdk-card .wdk-mark {
  opacity: 0;
  transform: translateY(30px) scale(0.92);
  transition: opacity 0.8s ease 0.2s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.wdk-anim .wdk-card .wdk-num {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s ease 0.1s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.wdk-anim .wdk-card.is-in .wdk-label,
.wdk-anim .wdk-card.is-in .wdk-stat,
.wdk-anim .wdk-card.is-in .wdk-ico,
.wdk-anim .wdk-card.is-in .wdk-title,
.wdk-anim .wdk-card.is-in .wdk-desc,
.wdk-anim .wdk-card.is-in .wdk-feats li,
.wdk-anim .wdk-card.is-in .wdk-actions,
.wdk-anim .wdk-card.is-in .wdk-stagewrap,
.wdk-anim .wdk-card.is-in .wdk-mark,
.wdk-anim .wdk-card.is-in .wdk-num {
  opacity: 1;
  transform: none;
}
.wdk-anim .wdk-card.is-in .wdk-label i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .wdk-rings { animation: none; }
}

/* ---- illustration motion (desktop art only) ----
   Entrances replay the scene when the card arrives (.is-in, set by polish.js,
   never set under reduced motion). CSS animations override the inline values
   framer-motion left behind from its one-off mount animation. Ambient loops
   pause with the stage's [data-offscreen]. */
@keyframes wdk-spin { to { transform: rotate(360deg); } }
@keyframes wdk-pulse { from { transform: scale(0.72); opacity: 0.7; } to { transform: scale(1.18); opacity: 0; } }
@keyframes wdk-pop { from { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes wdk-rise { from { opacity: 0; transform: translateY(2.2cqw) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes wdk-shackle { 0%, 40% { transform: translateY(-9px); } 70% { transform: translateY(1.5px); } 100% { transform: none; } }
@keyframes wdk-ping { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.4); opacity: 0; } }
@keyframes wdk-ring { from { stroke-dashoffset: 251.33px; } }
@keyframes wdk-grow { from { width: 0; } }
@keyframes wdk-growx { from { transform: scaleX(0); } }
@keyframes wdk-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@keyframes wdk-wiggle { 0%, 84%, 100% { transform: none; } 88% { transform: rotate(-12deg); } 92% { transform: rotate(10deg); } 96% { transform: rotate(-6deg); } }
@keyframes wdk-glowpulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* shared: the orbit turns with a light travelling on it and sends out a soft pulse */
  .wdk-card .wd-orbit { animation: wdk-spin 36s linear infinite; }
  .wdk-card .wd-orbit::after {
    content: "";
    position: absolute;
    top: -0.7cqw;
    left: calc(50% - 0.7cqw);
    width: 1.4cqw;
    height: 1.4cqw;
    border-radius: 50%;
    background: #9ad3ff;
    box-shadow: 0 0 1.4cqw 0.4cqw rgba(80, 160, 255, 0.85);
  }
  .wdk-card .wd-orbit::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(124, 196, 255, 0.45);
    animation: wdk-pulse 3.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
  }
  .wd-stage[data-offscreen] *,
  .wd-stage[data-offscreen] *::before,
  .wd-stage[data-offscreen] *::after { animation-play-state: paused !important; }

  /* shared: chips glide in one after another, then keep floating */
  .wdk-anim .wdk-card.is-in .wd-chip { animation: wdk-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both, wdfloat 5s ease-in-out infinite; }
  .wdk-anim .wdk-card.is-in .wd-c1 { animation-delay: 0.7s, 1.5s; }
  .wdk-anim .wdk-card.is-in .wd-c2 { animation-delay: 0.9s, 2.3s; }
  .wdk-anim .wdk-card.is-in .wd-c3 { animation-delay: 1.1s, 3.1s; }
  .wdk-anim .wdk-card.is-in .wd-ci { animation: wdk-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .wdk-anim .wdk-card.is-in .wd-c1 .wd-ci { animation-delay: 1s; }
  .wdk-anim .wdk-card.is-in .wd-c2 .wd-ci { animation-delay: 1.2s; }
  .wdk-anim .wdk-card.is-in .wd-c3 .wd-ci { animation-delay: 1.4s; }

  /* 01 shield: pops in, the lock shackle clicks shut, data strip and pill rise */
  .wdk-anim .wdk-t1.is-in .wd-stage > :nth-child(2) svg { animation: wdk-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards; }
  .wdk-t1 .wd-stage > :nth-child(2) svg path:nth-of-type(2) { transform-box: fill-box; }
  .wdk-anim .wdk-t1.is-in .wd-stage > :nth-child(2) svg path:nth-of-type(2) { animation: wdk-shackle 0.9s cubic-bezier(0.5, 0, 0.3, 1) 0.7s backwards; }
  .wdk-anim .wdk-t1.is-in .wd-stage > :nth-child(3) { animation: wdk-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s backwards; }
  .wdk-anim .wdk-t1.is-in .wd-stage > :nth-child(4) { animation: wdk-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.1s backwards; }
  .wdk-t1 .wd-stage > :nth-child(4) > span:first-child { animation: wdk-wiggle 4.5s ease-in-out 2.5s infinite; }

  /* 02 clock: the ring sweeps round, a radar glow turns, the bar fills and shines */
  .wdk-t2 .wd-stage > :nth-child(2)::after {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(102, 240, 208, 0.16) 50deg, transparent 52deg);
    mix-blend-mode: screen;
    animation: wdk-spin 4s linear infinite;
    pointer-events: none;
  }
  .wdk-anim .wdk-t2.is-in .wd-stage > :nth-child(2) circle[stroke^="url"] { animation: wdk-ring 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards; }
  .wdk-anim .wdk-t2.is-in .wd-stage > :nth-child(2) > div { animation: wdk-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards; }
  .wdk-anim .wdk-t2.is-in .wd-stage > :nth-child(3) { animation: wdk-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s backwards; }
  .wdk-t2 .wd-stage > :nth-child(3) .relative > div { overflow: hidden; }
  .wdk-anim .wdk-t2.is-in .wd-stage > :nth-child(3) .relative > div { animation: wdk-grow 1.6s cubic-bezier(0.65, 0, 0.35, 1) 1.1s backwards; }
  .wdk-t2 .wd-stage > :nth-child(3) .relative > div::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    animation: wdk-shine 3.2s ease-in-out 3s infinite;
    transform: translateX(-120%);
  }
  .wdk-t2 .wd-stage > :nth-child(3) .relative > span:last-child::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(102, 240, 208, 0.55); pointer-events: none; animation: wdk-ping 2.4s ease-out 2.8s infinite; opacity: 0; }

  /* 03 brand kit: logo and swatches pop, header bar and text lines draw in, a sheen passes */
  .wdk-anim .wdk-t3.is-in .wd-stage > :nth-child(2) { animation: wdk-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards; }
  .wdk-anim .wdk-t3.is-in .wd-stage > :nth-child(2) .grid > span { animation: wdk-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards; }
  .wdk-anim .wdk-t3.is-in .wd-stage span.ring-2 { animation: wdk-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .wdk-anim .wdk-t3.is-in .wd-stage span.ring-2:nth-child(1) { animation-delay: 0.8s; }
  .wdk-anim .wdk-t3.is-in .wd-stage span.ring-2:nth-child(2) { animation-delay: 0.9s; }
  .wdk-anim .wdk-t3.is-in .wd-stage span.ring-2:nth-child(3) { animation-delay: 1s; }
  .wdk-anim .wdk-t3.is-in .wd-stage span.ring-2:nth-child(4) { animation-delay: 1.1s; }
  .wdk-anim .wdk-t3.is-in .wd-stage .origin-left { animation: wdk-growx 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s backwards; }
  .wdk-anim .wdk-t3.is-in .wd-stage i.block { animation: wdk-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .wdk-anim .wdk-t3.is-in .wd-stage i.block:nth-child(1) { animation-delay: 1.45s; }
  .wdk-anim .wdk-t3.is-in .wd-stage i.block:nth-child(2) { animation-delay: 1.55s; }
  .wdk-anim .wdk-t3.is-in .wd-stage i.block:nth-child(3) { animation-delay: 1.65s; }
  .wdk-anim .wdk-t3.is-in .wd-stage i.block:nth-child(4) { animation-delay: 1.75s; }
  .wdk-anim .wdk-t3.is-in .wd-stage i.block:nth-child(5) { animation-delay: 1.85s; }
  .wdk-t3 .wd-stage .bg-white { position: relative; }
  .wdk-t3 .wd-stage .bg-white::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 35%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    animation: wdk-shine 4s ease-in-out 2.6s infinite;
    transform: translateX(-120%);
    pointer-events: none;
  }
  .wdk-t3 .wd-stage > :nth-child(2) > div:first-child > span:last-child { position: relative; }
  .wdk-t3 .wd-stage > :nth-child(2) > div:first-child > span:last-child::after { content: ""; position: absolute; inset: -0.6cqw; border-radius: inherit; box-shadow: 0 0 0 0.8cqw rgba(102, 240, 208, 0.14); pointer-events: none; opacity: 0; animation: wdk-glowpulse 2.6s ease-in-out 2.2s infinite; }

  /* 04 support chat: messages arrive in turn, QA approval lands, online dot pings */
  .wdk-anim .wdk-t4.is-in .wd-stage > :nth-child(2) { animation: wdk-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards; }
  .wdk-anim .wdk-t4.is-in .wd-stage > :nth-child(2) > div:nth-child(2) > * { animation: wdk-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .wdk-anim .wdk-t4.is-in .wd-stage > :nth-child(2) > div:nth-child(2) > :nth-child(1) { animation-delay: 0.8s; }
  .wdk-anim .wdk-t4.is-in .wd-stage > :nth-child(2) > div:nth-child(2) > :nth-child(2) { animation-delay: 1.7s; }
  .wdk-anim .wdk-t4.is-in .wd-stage > :nth-child(2) > div:nth-child(2) > :nth-child(3) { animation: wdk-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s backwards; }
  .wdk-t4 .wd-stage > :nth-child(2) > div:nth-child(2) > :nth-child(3) { position: relative; }
  .wdk-t4 .wd-stage > :nth-child(2) > div:nth-child(2) > :nth-child(3)::after { content: ""; position: absolute; inset: -0.6cqw; border-radius: 999px; box-shadow: 0 0 0 0.8cqw rgba(102, 240, 208, 0.14); pointer-events: none; opacity: 0; animation: wdk-glowpulse 2.6s ease-in-out 3.2s infinite; }
  .wdk-t4 .wd-stage span.absolute.bottom-0.right-0::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(102, 240, 208, 0.6); pointer-events: none; opacity: 0; animation: wdk-ping 2s ease-out 1s infinite; }
}

/* ---- "One CV, two outcomes": centred before/after slider ---- */
.ba-head {
  align-items: center;
  text-align: center;
}
.ba-head > * {
  align-self: center !important;
}
.ba-head > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ba-center {
  margin-top: 44px;
  display: flex;
  justify-content: center;
}
.ba-center > * {
  width: 100%;
}
/* The two CVs are short 5:4 pages (cv-*-v2.webp), shown whole and wide. */
.ba-sheet { aspect-ratio: 5 / 4; }
.ba-center .ba-frame {
  /* own GPU layer: the CVs + paper stack are drawn once and then just moved while
     scrolling (measured: slow frames 3-5 -> 0-1, GPU work ~850ms -> ~330ms) */
  will-change: transform;
  max-width: 100%;
  container-type: inline-size; /* 1cqw = 1% of the frame, used by the label wipe */
}
/* Sized from the screen height so the whole page always fits in the window
   (5:4 page; 64px leaves room above and below), capped per breakpoint. */
@media (min-width: 640px) {
  .ba-center .ba-frame { max-width: min(760px, calc((100svh - 64px) * 5 / 4)); }
}
@media (min-width: 1024px) {
  .ba-center .ba-frame { max-width: min(1000px, calc((100svh - 64px) * 5 / 4)); }
}
/* Paper-stack: two tilted sheets peeking out behind the CV */
.ba-center .ba-frame::before,
.ba-center .ba-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  border: 1px solid rgba(10, 61, 145, 0.08);
  box-shadow: 0 30px 60px -36px rgba(10, 61, 145, 0.35);
  pointer-events: none;
}
.ba-center .ba-frame::before { transform: translate(-3.2%, 1.6%) rotate(-3.2deg); }
.ba-center .ba-frame::after { transform: translate(3.4%, 2.4%) rotate(2.6deg); opacity: 0.85; }

/* Labels wipe with the handle: each is clipped exactly at the handle line
   (--n = handle position in %, set by the slider). */
.ba-frame .ba-tag-raw {
  left: 16px;
  clip-path: inset(-10px calc(100% - var(--n, 50) * 1cqw + 16px) -10px -10px);
}
.ba-frame .ba-tag-fmt {
  right: 16px;
  clip-path: inset(-10px -10px -10px calc(var(--n, 50) * 1cqw - 100cqw + 16px + 100%));
}

/* Section background (see below): replaces the section's own gradient layer. */
/* The section slides 120px up under the impact band, whose lower part is see-through,
   and the mesh fades in from white, so the two read as one continuous surface. */
section.ri-sec {
  position: relative;
  z-index: 2;
  background: linear-gradient(#fff calc(100% - 120px), transparent calc(100% - 120px));
}
section:has(.ba-center) {
  margin-top: -120px;
  padding-top: 120px;
  background: #fff;
}
section:has(.ba-center)::after,
section:has(.ba-center)::before {
  -webkit-mask-image: linear-gradient(transparent 40px, #000 280px);
  mask-image: linear-gradient(transparent 40px, #000 280px);
}
section:has(.ba-center) > div[aria-hidden] { display: none; }
/* "See the difference" pill removed */
section:has(.ba-center) .max-w-2xl > span.rounded-full:first-child { display: none; }
/* Background matches Templates: the Security & Compliance blue gradient (::after)
   with the blue / violet / mint orbs glowing on top (::before). Both fade in from
   white at the top, where the section tucks under the impact band. */
section:has(.ba-center)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, #dcebff 0%, #eaf3ff 45%, #f5f9ff 100%);
}
section:has(.ba-center)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(26% 38% at 32% 55%, rgba(59, 130, 246, 0.32), transparent 75%),
    radial-gradient(26% 38% at 52% 48%, rgba(139, 92, 246, 0.22), transparent 75%),
    radial-gradient(26% 38% at 70% 60%, rgba(45, 212, 191, 0.22), transparent 75%);
}
@media (max-width: 899px) {
  section:has(.ba-center)::before {
    background:
      radial-gradient(60% 26% at 30% 45%, rgba(59, 130, 246, 0.3), transparent 75%),
      radial-gradient(60% 26% at 70% 55%, rgba(139, 92, 246, 0.2), transparent 75%),
      radial-gradient(60% 26% at 40% 70%, rgba(45, 212, 191, 0.2), transparent 75%);
  }
}
/* Short phones (e.g. 375x667): drop the small icon so every card fits the screen */
@media (max-width: 767px) and (max-height: 720px) {
  .wdk-ico { display: none; }
}

/* ---- Templates showcase (replaced the interactive Template Studio) ----
   Three template previews (fanned, Custom Corporate raised in the middle) and
   a "bring your own" card; a 2x2 grid on small screens. */
/* Templates background: blurred blue, violet and mint orbs behind the cards on a
   pale base. Replaces the section's own gradient layer. */
#templates { background: #f6f8ff; }
#templates > div.pointer-events-none { display: none; }
#templates::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* wide soft gradients; no blur filter (a section-sized blur is costly to scroll) */
  background:
    radial-gradient(26% 38% at 32% 55%, rgba(59, 130, 246, 0.32), transparent 75%),
    radial-gradient(26% 38% at 52% 48%, rgba(139, 92, 246, 0.22), transparent 75%),
    radial-gradient(26% 38% at 70% 60%, rgba(45, 212, 191, 0.22), transparent 75%);
}
@media (max-width: 899px) {
  /* cards stack in a grid on smaller screens: spread the orbs taller */
  #templates::before {
    background:
      radial-gradient(60% 26% at 30% 45%, rgba(59, 130, 246, 0.3), transparent 75%),
      radial-gradient(60% 26% at 70% 55%, rgba(139, 92, 246, 0.2), transparent 75%),
      radial-gradient(60% 26% at 40% 70%, rgba(45, 212, 191, 0.2), transparent 75%);
  }
}
/* "Templates" pill above the heading removed */
#templates .max-w-4xl > span.rounded-full:first-child { display: none; }
.tpl-show { margin-top: 52px; }
.tpl-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 18px;
  max-width: 560px;
  margin: 0 auto;
}
.tpl-item { margin: 0; text-align: center; }
.tpl-cv {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 786 / 1089;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 50px -24px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.06);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.tpl-mid .tpl-cv { box-shadow: 0 40px 70px -30px rgba(10, 61, 145, 0.55), 0 0 0 2px #0a3d91; }
@media (min-width: 900px) {
  .tpl-row { display: flex; justify-content: center; align-items: flex-end; gap: 30px; max-width: none; }
  .tpl-item { width: 230px; }
  .tpl-item.tpl-mid { width: 262px; }
  .tpl-l .tpl-cv { transform: rotate(-3deg); }
  .tpl-r .tpl-cv { transform: rotate(3deg); }
  .tpl-mid .tpl-cv { transform: translateY(-18px); }
}
@media (hover: hover) and (min-width: 900px) {
  .tpl-item:hover .tpl-cv { transform: translateY(-8px) rotate(0deg); box-shadow: 0 40px 70px -30px rgba(10, 61, 145, 0.5), 0 0 0 1px rgba(15, 23, 42, 0.06); }
  .tpl-mid:hover .tpl-cv { transform: translateY(-26px); box-shadow: 0 46px 80px -30px rgba(10, 61, 145, 0.6), 0 0 0 2px #0a3d91; }
}
.tpl-item figcaption { margin-top: 18px; }
.tpl-item figcaption b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.tpl-item figcaption small {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
}
.tpl-pop {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #0a3d91;
  border-radius: 9999px;
  padding: 3px 8px;
}
.tpl-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  border: 2px dashed #9cc9f5;
  background: rgba(230, 244, 255, 0.6);
  box-shadow: none;
}
.tpl-up {
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #0a3d91;
  background: #fff;
  box-shadow: 0 12px 24px -12px rgba(10, 61, 145, 0.5);
}
.tpl-drop b { font-size: 15px; font-weight: 700; color: #0f172a; }
.tpl-drop span { margin-top: 5px; max-width: 16ch; font-size: 12.5px; line-height: 1.45; color: #475569; }
.tpl-yours:hover .tpl-drop { border-color: #0a3d91; background: rgba(230, 244, 255, 0.9); }
.tpl-strip {
  list-style: none;
  margin: 44px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
}
.tpl-strip li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: #1e293b;
}
.tpl-tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #059669;
  background: #dcfce7;
}
@media (max-width: 899px) {
  .tpl-item figcaption { margin-top: 12px; }
  .tpl-item figcaption b { font-size: 14.5px; flex-wrap: wrap; justify-content: center; }
  .tpl-strip { margin-top: 34px; gap: 12px 20px; }
  .tpl-strip li { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-cv { transition: none; }
}

/* Hero features: compact icon + label (no pill boxes, no badge circles) */
section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 {
  margin-top: 2.25rem;
  gap: 14px 30px;
}
section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li {
  flex: 0 0 auto;
  min-width: 0;
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li > span:first-child {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #0a3d91;
}
section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li > span:first-child svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.8;
}
section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li > span:last-child {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}
@media (max-width: 639px) {
  section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 14px 26px;
  }
  section:has(> img[src="/images/hero-laptop.webp"]) ul.mt-11 > li > span:last-child { font-size: 14px; }
}

/* ---- "Numbers that make a difference": centred stats + entrance ----
   Descriptions removed; stats centred vertically in the band. When the band
   comes into view (polish.js adds .is-in), icons pop in one by one and keep a
   soft glow ring, and the numbers count up. html.ri-anim is only set by JS. */
.ri-stats { align-items: center; }
/* Desktop: the stats take the whole width right of the intro (the third grid
   column used to sit empty over the map) */
@media (min-width: 1024px) {
  .ri-sec .ri-wrap { grid-template-columns: 28% minmax(0, 1fr); padding-right: 4%; }
  .ri-wrap > div:empty { display: none; }
  /* the stats now sit over the bright map; a soft dark halo keeps them legible */
  .ri-sec .ri-n, .ri-sec .ri-l { text-shadow: 0 2px 14px rgba(4, 18, 52, 0.95), 0 0 4px rgba(4, 18, 52, 0.6); }
}
.ri-stat { justify-content: center; padding-top: 6px; padding-bottom: 6px; }
.ri-bar { margin-bottom: 0; }
.ri-stat:nth-child(1) { --k: 0; }
.ri-stat:nth-child(2) { --k: 1; }
.ri-stat:nth-child(3) { --k: 2; }
.ri-stat:nth-child(4) { --k: 3; }
.ri-ic { position: relative; }
.ri-anim .ri-ic { opacity: 0; transform: translateY(10px) scale(0.5); }
.ri-anim .ri-n,
.ri-anim .ri-l,
.ri-anim .ri-bar { opacity: 0; transform: translateY(8px); }
.ri-anim .ri-stats.is-in .ri-ic {
  animation: ri-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--k) * 130ms);
}
.ri-anim .ri-stats.is-in .ri-n,
.ri-anim .ri-stats.is-in .ri-l,
.ri-anim .ri-stats.is-in .ri-bar {
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--k) * 130ms + 120ms);
  opacity: 1;
  transform: none;
}
.ri-stats.is-in .ri-ic::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  animation: ri-ring 3s ease-out infinite;
  animation-delay: calc(0.9s + var(--k) * 0.35s);
  pointer-events: none;
}
@keyframes ri-pop {
  0% { opacity: 0; transform: translateY(10px) scale(0.5); }
  100% { opacity: 1; transform: none; }
}
@keyframes ri-ring {
  0% { opacity: 0.55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.45); }
}
@media (prefers-reduced-motion: reduce) {
  .ri-stats.is-in .ri-ic::after { animation: none; }
}

/* ---- First Impressions: benefit cards sized to their content ----
   The column stacks four one-line cards; shrink the stack to its widest card
   and centre it in the column instead of stretching every card edge to edge. */
@media (min-width: 1024px) {
  .lg\:grid-cols-\[0\.9fr_1\.2fr_0\.85fr\] > div:last-child {
    width: max-content;
    max-width: 100%;
    justify-self: center;
    gap: 12px;
  }
  .lg\:grid-cols-\[0\.9fr_1\.2fr_0\.85fr\] > div:last-child > div {
    padding: 12px 26px 12px 12px;
  }
}

/* ---- Why DAVZON heading: pill row removed, "DAVZON" uses the same
   navy-to-cyan gradient as "Right Talent" in the strip section ---- */
#why-davzon .wd-pillrow { display: none; }
#why-davzon .wd-h { margin-top: 0; }
#why-davzon .wd-h span {
  /* navy end lifted to a brighter royal blue so it reads on the dark section */
  background: linear-gradient(to right, #3d7bff, #00b0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Why DAVZON: nav link lands exactly on the section ----
   In-page nav scrolls the section's h2 to 104px from the top, so the heading
   sits 104px into the section: the section's top edge then meets the window
   top and nothing of the previous section shows. Bottom trimmed so Templates
   follows without a dead band. */
#why-davzon.wd-sec { padding-top: 104px; padding-bottom: 36px; }
#templates > div.relative.z-10 { padding-top: 56px; }

/* ---- How It Works heading: eyebrow removed; tighter join with Templates ----
   The nav link scrolls the h2 to 104px from the top, so 104px of top padding
   lands the section's own top edge at the window top. */
#how-it-works .max-w-2xl > div:first-child { display: none; }
#how-it-works .max-w-2xl > h2 { margin-top: 0; }
#how-it-works > div.relative.z-10 { padding-top: 104px; }
#templates > div.relative.z-10 { padding-bottom: 56px; }

/* ---- Templates heading: subtitle removed ---- */
#templates .max-w-4xl > p { display: none; }
#templates .max-w-4xl > h2 { margin-top: 0; }
/* heading style C: light slate lead-in, bold navy-to-cyan payoff; cards pulled up */
#templates .max-w-4xl > h2 {
  font-weight: 400;
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #475569;
}
#templates .max-w-4xl > h2 span {
  font-weight: 700;
  white-space: nowrap; /* keep "one of ours." on one line */
  background: linear-gradient(to right, #0a3d91, #00b0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#templates .tpl-show { margin-top: 40px; }

/* ---- How It Works: four-benefit row under the step panel removed ---- */
#how-it-works > div.relative.z-10 > ul { display: none; }
#how-it-works > div.relative.z-10 { padding-bottom: 64px; }
/* tight vertical rhythm (top padding stays 104px for the nav landing) */
#how-it-works .max-w-2xl > p { margin-top: 10px; }
#how-it-works .hiw-meet-top { margin-top: 18px; }
#how-it-works > div.relative.z-10 > div:nth-child(2) { margin-top: 32px; }
#how-it-works > div.relative.z-10 > div:nth-child(3) { margin-top: 20px; }
@media (min-width: 640px) {
  #how-it-works > div.relative.z-10 > div:nth-child(3) > div { padding-top: 26px; padding-bottom: 26px; }
}
#how-it-works > div.relative.z-10 { padding-bottom: 44px; }

/* ---- Client logo marquee: edge fade without mask-image ----
   A mask on the parent of a 4000px strip that moves every frame makes the GPU
   re-mask the whole strip continuously. Two white gradient overlays give the
   same fade with no per-frame cost. */
section div:has(> .loop-marquee) {
  /* set inline by the component, hence !important */
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
section div:has(> .loop-marquee)::before,
section div:has(> .loop-marquee)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 10%;
  pointer-events: none;
}
section div:has(> .loop-marquee)::before { left: 0; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
section div:has(> .loop-marquee)::after { right: 0; background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0)); }

/* ---- DAVZON wordmark (from davzoncv.com) ---- */
.davzon-logo { width: auto; height: 32px; }
.davzon-logo-footer { height: 34px; }

/* ---- Security & Compliance: full-width band ----
   The right-hand 2x2 list is removed. Desktop: shield | eyebrow + heading | the four
   data-lifecycle steps stretched across the rest of the row (bigger icons, connectors
   that grow). The copy wrapper uses display:contents so its heading and step row can
   sit in separate grid columns. Below desktop everything stacks, centred. */
section .lg\:grid-cols-\[auto_1fr_auto\] > div:nth-child(3) { display: none; }
section:has(> div > .lg\:grid-cols-\[auto_1fr_auto\]) > div { padding-top: 56px; padding-bottom: 56px; }
section .lg\:grid-cols-\[auto_1fr_auto\] h2 > span { white-space: nowrap; } /* keep "safe with us." together */

@media (min-width: 640px) {
  /* bigger steps; connectors fill the space between them */
  section .lg\:grid-cols-\[auto_1fr_auto\] ol { width: 100%; gap: 0; margin-top: 28px; }
  section .lg\:grid-cols-\[auto_1fr_auto\] ol > li { flex: 1 1 0; gap: 10px; }
  section .lg\:grid-cols-\[auto_1fr_auto\] ol > li:last-child { flex: 0 0 auto; }
  section .lg\:grid-cols-\[auto_1fr_auto\] ol > li > div { width: auto; min-width: 6.5rem; gap: 10px; }
  section .lg\:grid-cols-\[auto_1fr_auto\] ol > li > div > span:first-child {
    width: 64px;
    height: 64px;
    box-shadow: 0 0 0 1px rgba(10, 61, 145, 0.08), 0 14px 30px -14px rgba(10, 61, 145, 0.5);
  }
  section .lg\:grid-cols-\[auto_1fr_auto\] ol > li > div > span:first-child svg { width: 26px; height: 26px; }
  section .lg\:grid-cols-\[auto_1fr_auto\] ol > li > div > span:last-child { font-size: 0.875rem; white-space: nowrap; }
  /* icon centre sits 32px from the top; the label below adds ~30px, so lift the line */
  section .lg\:grid-cols-\[auto_1fr_auto\] ol > li > span { flex: 1 1 auto; width: auto; min-width: 24px; margin-bottom: 30px; }
}

@media (min-width: 1024px) {
  section .lg\:grid-cols-\[auto_1fr_auto\] {
    grid-template-columns: auto minmax(0, 0.95fr) minmax(0, 1.25fr);
    grid-template-rows: auto auto;
    column-gap: 56px;
    row-gap: 0;
  }
  section .lg\:grid-cols-\[auto_1fr_auto\] > div:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  section .lg\:grid-cols-\[auto_1fr_auto\] > div:nth-child(2) { display: contents; }
  section .lg\:grid-cols-\[auto_1fr_auto\] > div:nth-child(2) > p { grid-column: 2; grid-row: 1; align-self: end; }
  section .lg\:grid-cols-\[auto_1fr_auto\] > div:nth-child(2) > h2 { grid-column: 2; grid-row: 2; align-self: start; font-size: clamp(1.75rem, 2.3vw, 2.25rem); }
  section .lg\:grid-cols-\[auto_1fr_auto\] > div:nth-child(2) > ol { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
}

@media (max-width: 1023.98px) {
  section .lg\:grid-cols-\[auto_1fr_auto\] > div:nth-child(2) { text-align: center; }
  section .lg\:grid-cols-\[auto_1fr_auto\] > div:nth-child(2) > ol { justify-content: center; }
}

/* ---- Templates background: the Security & Compliance gradient, with the
   blue / violet / mint orbs (#templates::before) still glowing on top ---- */
#templates { background: linear-gradient(115deg, #dcebff 0%, #eaf3ff 45%, #f5f9ff 100%); }

/* ---- Trust strip (client logo marquee) on the FAQ blue, merged with its neighbours ----
   One horizontal band (linear-gradient(90deg, #dcebff 0%, #eaf3ff 45%, #f5f9ff 100%)) is shared by three layers, so its colour at
   any x is identical everywhere and the joins cannot show:
   - the hero's bottom fade (was white) now dissolves the photo into the band;
   - the trust strip is the band itself;
   - First Impressions' photo fades in from the band over its top 200px.
   The fades are static layers (no per-frame cost). Marquee edge overlays take the
   band's colour at each side. */
section:has(> img[src="/images/hero-laptop.webp"]) > div.inset-x-0.bottom-0 {
  height: 160px;
  background: linear-gradient(90deg, #dcebff 0%, #eaf3ff 45%, #f5f9ff 100%);
  /* fade concentrated in the last ~90px so the mug's DAVZON mark stays readable */
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 40%, #000 100%);
}
section:has(div > .loop-marquee) {
  border-bottom: 0;
  background: linear-gradient(90deg, #dcebff 0%, #eaf3ff 45%, #f5f9ff 100%);
}
section div:has(> .loop-marquee)::before { background: linear-gradient(to right, #dcebff, rgba(220, 235, 255, 0)); }
section div:has(> .loop-marquee)::after { background: linear-gradient(to left, #f5f9ff, rgba(245, 249, 255, 0)); }
section:has(img[src^="/images/why-davzon-laptop.webp"]):not(:has(section))::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 200px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #dcebff 0%, #eaf3ff 45%, #f5f9ff 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 15%, transparent);
  mask-image: linear-gradient(to bottom, #000 15%, transparent);
}

/* ---- Why DAVZON cards: balanced halves (layout A) ----
   Desktop: a narrower card (1240px) with text and illustration in equal halves,
   both centred vertically, and a larger stat and headline. Card height is
   unchanged, so the stacking scroll timeline still lines up. */
@media (min-width: 1024px) {
  .wdk-stack { max-width: 1240px; margin-left: auto; margin-right: auto; }
  .wdk-body {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 40px 64px;
  }
  .wdk-text { justify-content: center; }
  .wdk-art { align-items: center; }
  .wdk-stat b { font-size: clamp(2.6rem, 3.4vw, 3.6rem); }
  .wdk-title { font-size: clamp(2rem, 2.5vw, 2.6rem); }
}

/* One CV slider: the "after" CV is revealed by an overflow-hidden wrapper and its
   content moving in opposite directions (both GPU layers), so moving the handle or
   the intro sweep never repaints the CV images. */
.ba-frame .ba-wipe { overflow: hidden; will-change: transform; }
.ba-frame .ba-wipe-in { will-change: transform; }

/* Pricing: extras under the plan cards (free trial, customised plan, Get a demo,
   Calculate ROI, refund policy), matching the davzoncv.com pricing page. */
.dz-px { margin-top: 28px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 28px;
  padding: 20px 24px; border-radius: 22px; background: #fff; border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 20px 50px -32px rgba(15,23,42,.28); }
.dz-px-info { display: grid; gap: 6px; }
.dz-px-info p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-brand-muted); }
.dz-px-info strong { color: var(--color-brand-dark); font-weight: 700; margin-right: 2px; }
.dz-px a { color: var(--color-brand-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(10,61,145,.3); }
.dz-px a:hover { text-decoration-color: currentColor; }
.dz-px-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.dz-px .dz-px-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px;
  border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--color-brand-primary); background: #fff; border: 1.5px solid rgba(10,61,145,.25);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease; }
.dz-px .dz-px-btn:hover { border-color: var(--color-brand-primary); transform: translateY(-1px); }
.dz-px .dz-px-btn--pri { color: #fff; background: var(--color-brand-primary); border-color: var(--color-brand-primary);
  box-shadow: 0 10px 24px -10px rgba(10,61,145,.6); }
.dz-px .dz-px-btn--pri:hover { background: #0b4bb3; box-shadow: 0 14px 28px -10px rgba(10,61,145,.7); }
.dz-px .dz-px-btn:focus-visible { outline: 2px solid var(--color-brand-secondary); outline-offset: 2px; }
.dz-px-fine { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px solid rgba(148,163,184,.2);
  font-size: 12.5px; color: var(--color-brand-gray); }
.dz-px-fine a { font-weight: 500; color: var(--color-brand-muted); }
@media (max-width: 767px) {
  .dz-px { grid-template-columns: 1fr; padding: 18px; }
  .dz-px-btns { justify-content: stretch; }
  .dz-px .dz-px-btn { flex: 1 1 140px; }
}

/* Legal pages (Privacy / Terms / Refund): content from davzoncv.com, new layout. */
.lg-page { background: #fff; }
.lg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.lg-hero { padding: 132px 0 40px; background: linear-gradient(115deg, #dcebff 0%, #eaf3ff 45%, #f5f9ff 100%);
  border-bottom: 1px solid rgba(148,163,184,.18); }
.lg-eb { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-brand-primary); }
.lg-page .lg-h1 { margin: 0; font-family: "Instrument Sans", system-ui, sans-serif; font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--color-brand-dark); }
.lg-upd { margin: 12px 0 0; font-size: 14px; color: var(--color-brand-muted); }
.lg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.lg-tabs a { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--color-brand-primary); background: rgba(255,255,255,.7); border: 1px solid rgba(10,61,145,.15);
  transition: background-color .15s ease, border-color .15s ease; }
.lg-tabs a:hover { border-color: var(--color-brand-primary); }
.lg-tabs a.is-on { color: #fff; background: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.lg-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding-top: 48px; padding-bottom: 88px; }
.lg-body:not(:has(.lg-toc)) { grid-template-columns: minmax(0, 760px); }
.lg-toc { position: sticky; top: 112px; align-self: start; max-height: calc(100vh - 136px); overflow: auto; }
.lg-toc p { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-brand-gray); }
.lg-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid #e2e8f0; }
.lg-toc a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: 13.5px;
  line-height: 1.35; color: var(--color-brand-muted); text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.lg-toc a:hover { color: var(--color-brand-primary); border-left-color: var(--color-brand-primary); }
.lg-doc { max-width: 760px; font-size: 15.5px; line-height: 1.75; color: #334155; }
.lg-doc > :first-child { margin-top: 0; }
.lg-doc p { margin: 0 0 16px; }
.lg-page .lg-doc h2 { margin: 44px 0 14px; padding-top: 28px; border-top: 1px solid #e2e8f0; font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--color-brand-dark); }
.lg-page .lg-doc h3 { margin: 28px 0 10px; font-family: "Instrument Sans", system-ui, sans-serif; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--color-brand-dark); }
.lg-page .lg-doc h4 { margin: 22px 0 8px; font-family: "Instrument Sans", system-ui, sans-serif; font-size: 1rem; font-weight: 700; color: var(--color-brand-primary); }
.lg-doc ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.lg-doc li { position: relative; padding-left: 22px; }
.lg-doc li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand-secondary); }
.lg-doc strong { color: var(--color-brand-dark); font-weight: 700; }
.lg-doc a { color: var(--color-brand-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(10,61,145,.3); }
.lg-doc a:hover { text-decoration-color: currentColor; }
@media (max-width: 1023px) {
  .lg-body { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 32px; padding-bottom: 64px; }
  .lg-toc { display: none; }
}
@media (max-width: 639px) {
  .lg-hero { padding: 112px 0 28px; }
  .lg-wrap { padding-left: 20px; padding-right: 20px; }
  .lg-doc { font-size: 15px; }
  .lg-page .lg-doc h2 { font-size: 1.3rem; margin-top: 36px; padding-top: 24px; }
}

/* Footer: 5th "Solutions" column (service, location, template and ROI pages). */
@media (min-width: 1024px) {
  footer .lg\:grid-cols-\[1\.4fr_1fr_1fr_1\.2fr\] { grid-template-columns: 1.3fr .9fr .9fr 1.15fr 1.25fr; column-gap: 28px; }
}

/* SEO landing pages (/cv-formatting-*, /template-gallery, /roi-calculator). */
.lp { background: #fff; color: #334155; }
.lp-wrap { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.lp-hero { padding: 128px 0 56px; background: linear-gradient(115deg, #dcebff 0%, #eaf3ff 45%, #f5f9ff 100%); border-bottom: 1px solid rgba(148,163,184,.18); }
.lp-crumb { display: flex; gap: 8px; font-size: 13px; color: var(--color-brand-muted); margin-bottom: 18px; }
.lp-crumb a { color: var(--color-brand-primary); font-weight: 600; text-decoration: none; }
.lp-eb { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-brand-primary); }
.lp .lp-h1 { margin: 0; max-width: 820px; font-family: "Instrument Sans", system-ui, sans-serif; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; color: var(--color-brand-dark); }
.lp-lead { margin: 18px 0 0; max-width: 720px; font-size: 1.125rem; line-height: 1.65; color: #475569; }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lp .lp-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; color: var(--color-brand-primary); background: #fff; border: 1.5px solid rgba(10,61,145,.25); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease; }
.lp .lp-btn:hover { border-color: var(--color-brand-primary); transform: translateY(-1px); }
.lp .lp-btn--pri { color: #fff; background: var(--color-brand-primary); border-color: var(--color-brand-primary); box-shadow: 0 10px 24px -10px rgba(10,61,145,.6); }
.lp .lp-btn--pri:hover { background: #0b4bb3; }
.lp-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; padding: 0; list-style: none; }
.lp-facts li { position: relative; padding-left: 22px; font-size: 14px; font-weight: 600; color: var(--color-brand-dark); }
.lp-facts li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--color-brand-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.lp-sec { padding: 64px 0; }
.lp-sec + .lp-sec { padding-top: 0; }
.lp-sec.lp-alt { background: #f6f9ff; padding: 56px 0; }
.lp-alt + .lp-sec { padding-top: 64px; }
.lp .lp-h2 { margin: 0 0 16px; font-family: "Instrument Sans", system-ui, sans-serif; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--color-brand-dark); }
.lp-prose { max-width: 820px; font-size: 16.5px; line-height: 1.75; }
.lp-wrap.lp-prose { max-width: 1120px; }
.lp-wrap.lp-prose > * { max-width: 820px; }
.lp-prose p { margin: 0 0 16px; }
.lp-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lp-list li { position: relative; padding-left: 28px; }
.lp-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: rgba(10,61,145,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5' fill='none' stroke='%230a3d91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.lp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.lp-card { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid rgba(148,163,184,.25); box-shadow: 0 18px 40px -30px rgba(15,23,42,.35); }
.lp .lp-card h3 { margin: 0 0 8px; font-family: "Instrument Sans", system-ui, sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--color-brand-dark); }
.lp-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #475569; }
.lp-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-gal figure { margin: 0; padding: 14px; border-radius: 20px; background: #f6f9ff; border: 1px solid rgba(148,163,184,.25); }
.lp-gal img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 16px 36px -22px rgba(15,23,42,.45); background: #fff; }
.lp-gal figcaption { display: grid; gap: 4px; padding: 14px 4px 2px; }
.lp-gal b { color: var(--color-brand-dark); font-size: 16px; }
.lp-gal span { font-size: 14px; color: #475569; }
.lp-fx { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.lp-fx-i { padding: 20px; border-radius: 16px; background: #f6f9ff; border: 1px solid rgba(148,163,184,.25); }
.lp .lp-fx-i h3 { margin: 0 0 8px; font-family: "Instrument Sans", system-ui, sans-serif; font-size: 1rem; font-weight: 700; color: var(--color-brand-dark); }
.lp-fx-f { margin: 0 0 8px; font-size: 14px; color: #475569; }
.lp-fx-e { margin: 0; font-size: 14px; font-weight: 700; color: var(--color-brand-primary); }
.lp-note { margin: 16px 0 0; font-size: 13.5px; color: var(--color-brand-muted); }
.lp-faq { max-width: 820px; display: grid; gap: 10px; }
.lp-faq details { border-radius: 14px; border: 1px solid rgba(148,163,184,.3); background: #fff; }
.lp-faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; position: relative; font-weight: 700; color: var(--color-brand-dark); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 500; color: var(--color-brand-primary); }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq details p { margin: 0; padding: 0 20px 18px; line-height: 1.7; color: #475569; }
.lp-end { padding-bottom: 80px; }
.lp-cta { padding: 40px; border-radius: 24px; color: #fff; background: radial-gradient(70% 120% at 0% 0%, rgba(56,132,255,.45), transparent 70%), linear-gradient(135deg, #0c1d47, #0a3d91); }
.lp .lp-cta h2 { margin: 0; font-family: "Instrument Sans", system-ui, sans-serif; font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; line-height: 1.2; color: #fff; }
.lp-cta p { margin: 10px 0 0; color: rgba(255,255,255,.8); }
.lp-cta .lp-ctas { margin-top: 22px; }
.lp .lp-cta .lp-btn--pri { background: #fff; color: var(--color-brand-dark); border-color: #fff; }
.lp .lp-cta .lp-btn:not(.lp-btn--pri) { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.lp-rel { margin-top: 32px; }
.lp-rel p { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand-gray); }
.lp-rel div { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-rel a { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--color-brand-primary); background: #f1f6ff; border: 1px solid rgba(10,61,145,.12); }
.lp-rel a:hover { border-color: var(--color-brand-primary); }
@media (max-width: 1023px) { .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-gal { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) {
  .lp-wrap { padding-left: 20px; padding-right: 20px; }
  .lp-hero { padding: 108px 0 40px; }
  .lp-sec { padding: 48px 0; }
  .lp-cards, .lp-gal { grid-template-columns: 1fr; }
  .lp-cta { padding: 28px 22px; }
  .lp .lp-ctas .lp-btn { flex: 1 1 100%; }
}

/* First Impressions benefit cards on phones: two per row as compact tiles
   (icon on top, title below) instead of four full-width rows. */
@media (max-width: 639px) {
  .lg\:grid-cols-\[0\.9fr_1\.2fr_0\.85fr\] > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .lg\:grid-cols-\[0\.9fr_1\.2fr_0\.85fr\] > div:last-child > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }
  .lg\:grid-cols-\[0\.9fr_1\.2fr_0\.85fr\] > div:last-child > div > span:nth-child(2) {
    width: 40px;
    height: 40px;
  }
  .lg\:grid-cols-\[0\.9fr_1\.2fr_0\.85fr\] > div:last-child > div span.block {
    font-size: 14px;
    line-height: 1.3;
  }
}

/* ---- Scroll smoothness pass 2 (2026-10-27) ----
   1. Why DAVZON: shorter rest after each stacked card (was 30svh desktop / 24svh
      phone), so the section no longer takes ~4 screens of scrolling. The dim/recede
      ranges are keyed to the next card's position, not to this padding.
   2. Phones & tablets: live backdrop blur is recomputed on every scroll frame and is
      the main source of scroll jitter on mobile GPUs (iOS especially). Replace it
      with near-opaque surfaces that look the same over these light backgrounds.
   3. Desktop header: smaller blur radius (cost grows with radius), slightly more
      opaque so the glass look is unchanged. */
.wdk-card:not(:last-child) { padding-bottom: 12svh; }
@media (min-width: 1024px) {
  .wdk-card:not(:last-child) { padding-bottom: 14svh; }
}

@media (max-width: 1023.98px), (pointer: coarse) {
  main [class*="backdrop-blur"],
  header [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* only the white-glass pieces get a firmer white; tinted cards keep their colour */
  main [class*="bg-white/"][class*="backdrop-blur"] { background-color: rgba(255, 255, 255, 0.94); }
}
@media (max-width: 1023.98px) {
  header.fixed.inset-x-0.top-0 > div:first-child {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.86);
  }
  header.fixed.inset-x-0.top-0.is-scrolled > div:first-child { background: rgba(255, 255, 255, 0.95); }
}
@media (min-width: 1024px) {
  header.fixed.inset-x-0.top-0 > div:first-child > a:first-child,
  header.fixed.inset-x-0.top-0 nav.backdrop-blur-2xl,
  header.fixed.inset-x-0.top-0 .nav-login {
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
  header.fixed.inset-x-0.top-0 nav.backdrop-blur-2xl { background-color: rgba(255, 255, 255, 0.5); }
  header.fixed.inset-x-0.top-0 > div:first-child > a:first-child { background-color: rgba(255, 255, 255, 0.5); }
}

/* Impact counters: fixed-width digits so the count-up never shifts the layout */
.ri-n { font-variant-numeric: tabular-nums; }