/* product / hero-product
   A keynote on black. One object, spot-lit from above and dissolving into the dark (the
   studio product shot when the brief has one, else the hero art), enormous thin silver
   type, spec callouts drawn to the object with hairline leaders, the features as callouts
   round a polished lens, figures set huge and thin like a spec page. Restrained: one
   accent (the brand's); everything else black, white and grey. */

:root {
  --v-bg: #000000;
  --v-fg: #f5f5f7;
  --v-soft: #a1a1a6;
  --v-faint: #6e6e73;
  --v-line: rgb(255 255 255 / 0.1);
  --v-line-strong: rgb(255 255 255 / 0.22);
  --v-surface: #0b0b0d;
  --v-surface-2: #1c1c1e;
  --v-card-bg: #0d0d0f;
  --v-accent: var(--wl-accent-on-dark);
  --v-accent-text: var(--wl-accent-on-dark);
  --v-on-accent: var(--wl-on-accent);
  --v-secondary: var(--wl-secondary-on-dark);
  --v-seg-1: var(--wl-accent-on-dark);
  --v-seg-2: var(--wl-secondary-on-dark);
  --v-seg-3: #f5f5f7;
  --v-seg-4: #8e8e93;
  --v-seg-5: color-mix(in srgb, var(--wl-accent-on-dark) 45%, #1c1c1e);
  --v-seg-6: #3a3a3c;
  --v-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif;
  --v-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI Variable Display", "Segoe UI", Roboto, Arial, sans-serif;
  --v-font-mono: "SF Mono", ui-monospace, Menlo, "Cascadia Mono", Consolas, monospace;
  --v-display-weight: 600;
  --v-display-tracking: -0.035em;
  --v-display-case: none;
  --v-display-lh: 1.05;
  --v-title-size: clamp(2.5rem, 5.6vw, 5rem);
  --v-body-size: clamp(1.02rem, 0.3vw + 0.95rem, 1.18rem);
  --v-radius: 28px;
  --v-radius-sm: 18px;
  --v-radius-lg: 36px;
  --v-border: 1px solid var(--v-line);
  --v-shadow: none;
  --v-card-pad: clamp(24px, 3vw, 40px);
  --v-maxw: 1120px;
  --v-sec-gap: clamp(110px, 14vw, 200px);
  --v-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --v-spring: cubic-bezier(0.3, 1.3, 0.5, 1);

  /* the keynote's silver: every big heading is set in it */
  --hp-silver: linear-gradient(180deg, #ffffff 0%, #ececf0 42%, #a4a4ab 100%);
  --hp-glow: color-mix(in srgb, var(--wl-accent) 42%, transparent);

  --wl-label-lore: "The idea";
  --wl-label-features: "Design";
  --wl-label-supply: "Tech specs";
  --wl-label-flow: "How it works";
  --wl-label-timeline: "Milestones";
  --wl-label-comparison: "Compare";
  --wl-label-stats: "In figures";
  --wl-label-tweet: "Heard on X";
  --wl-label-gallery: "Gallery";
  --wl-label-facts: "Verified";
  --wl-label-quotes: "Voices";
  --wl-label-faq: "FAQ";
  --wl-label-access: "Availability";

  /* layout knobs */
  --pd-top-h: 52px;
  --pd-hero-areas: "copy" "object";
  --pd-hero-rows: auto minmax(0, 1fr);
  --pd-hero-gap: 14px;
  --pd-hero-pt: clamp(34px, 5.5vh, 56px);
  --pd-hero-pb: 0px;
  --pd-obj-w: min(1000px, calc((100svh - 330px) * 2));
}

html { background: #000; color-scheme: dark; }
body { background: #000; }
::selection { background: color-mix(in srgb, var(--wl-accent) 45%, transparent); color: #fff; }

/* ------------------------------------------------------------ local nav: short nouns, a pill */
.pd-top {
  background: rgb(0 0 0 / 0.72);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid rgb(255 255 255 / 0.09);
}
.pd-brand__mark { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18); }
.pd-brand__name { font-family: var(--v-font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; color: #f5f5f7; }
.pd-brand__tick { font-size: 0.78rem; color: var(--v-faint); letter-spacing: 0.01em; }
.pd-top__nav { gap: 2px; }
.pd-top__nav .wl-nav__link:first-child { margin-left: auto; } /* the links sit right while they fit */
.pd-top__nav .wl-nav__link { padding: 6px 11px; font-size: 0; color: #d2d2d7; opacity: 0.8; transition: opacity 0.2s, color 0.2s; }
.pd-top__nav .wl-nav__link::after { font-size: 0.76rem; letter-spacing: -0.005em; }
.pd-top__nav .wl-nav__link--lore::after { content: var(--wl-label-lore); }
.pd-top__nav .wl-nav__link--features::after { content: var(--wl-label-features); }
.pd-top__nav .wl-nav__link--infographic::after { content: var(--wl-label-supply); }
.pd-top__nav .wl-nav__link--tweet::after { content: var(--wl-label-tweet); }
.pd-top__nav .wl-nav__link--timeline::after { content: var(--wl-label-timeline); }
.pd-top__nav .wl-nav__link--gallery::after { content: var(--wl-label-gallery); }
.pd-top__nav .wl-nav__link--facts::after { content: var(--wl-label-facts); }
.pd-top__nav .wl-nav__link--quotes::after { content: var(--wl-label-quotes); }
.pd-top__nav .wl-nav__link--faq::after { content: var(--wl-label-faq); }
.pd-top__nav .wl-nav__link--access { display: none; }
.pd-top__nav .wl-nav__link:hover, .pd-top__nav .wl-nav__link.is-active { opacity: 1; color: #fff; }
.pd-top__cta {
  margin-left: 14px; padding: 5px 14px; border-radius: 999px;
  background: var(--wl-accent); color: var(--wl-on-accent);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.01em;
  transition: filter 0.2s;
}
.pd-top__cta:hover { filter: brightness(1.12); }
@media (max-width: 1080px) { .pd-top__cta { margin-left: auto; } }

/* ------------------------------------------------------------ hero: the keynote slide */
.pd-hero { justify-items: center; text-align: center; }
.pd-hero__light::before {
  /* the spotlight: a cone from above, falling onto the object */
  content: ""; position: absolute; left: 50%; top: -14%;
  width: min(1500px, 150vw); height: 122%;
  transform: translateX(-50%);
  background: conic-gradient(from 153deg at 50% 0%, transparent 0deg, rgb(255 255 255 / 0.05) 11deg, rgb(255 255 255 / 0.15) 27deg, rgb(255 255 255 / 0.05) 43deg, transparent 54deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 22%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 22%, transparent 92%);
  filter: blur(24px);
  animation: hp-light 1.4s var(--v-ease) both;
}
.pd-hero__light::after {
  /* where the light lands: a warm pool on the stage floor */
  content: ""; position: absolute; left: 50%; bottom: -30%;
  width: min(1200px, 110vw); height: 66%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 40% at 50% 50%, var(--hp-glow), transparent 70%);
  filter: blur(30px); opacity: 0.6;
  animation: hp-light 1.3s var(--v-ease) 0.2s both;
}

.pd-hero__kicker { margin-bottom: 10px; animation: hp-rise 0.9s var(--v-ease) both; }
.pd-hero__kicker-text { font-family: var(--v-font-display); font-weight: 600; font-size: clamp(1.02rem, 1.5vw, 1.32rem); letter-spacing: -0.01em; color: var(--v-accent-text); }

.pd-hero__headline {
  margin-inline: auto;
  max-width: 14.5em;
  font-family: var(--v-font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 6.6vw, 6.1rem);
  line-height: 1.02;
  letter-spacing: -0.048em;
  color: #f5f5f7;
}
/* a long headline sets smaller so the object still stands on the first screen (app.js: data-pd-len) */
@media (min-width: 761px) {
  .pd-hero[data-pd-len="l"] .pd-hero__headline { max-width: 17em; font-size: clamp(2.4rem, 4.9vw, 4.5rem); }
  .pd-hero[data-pd-len="xl"] .pd-hero__headline { max-width: 19em; font-size: clamp(2.1rem, 4vw, 3.7rem); }
}
.pd-hero__headline .wl-w {
  /* each word carries the silver and a sheen that sweeps it on a staggered clock */
  padding: 0.06em 0.02em 0.14em; margin: -0.06em -0.02em -0.14em;
  background-image: linear-gradient(104deg, transparent 38%, rgb(255 255 255 / 0.95) 50%, transparent 62%), var(--hp-silver);
  background-size: 280% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: hp-word 0.95s var(--v-ease) both, hp-sheen 9s linear infinite;
  animation-delay: calc(min(var(--i, 0) * 70ms, 0.5s) + 100ms), calc(var(--i, 0) * 110ms + 1.3s);
}
.pd-hero__subhead {
  margin: 18px auto 0; max-width: 34em;
  font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.42; letter-spacing: -0.005em;
  color: var(--v-soft);
  animation: hp-rise 0.9s var(--v-ease) 0.38s both;
}
.pd-hero__cta { position: relative; z-index: 4; justify-content: center; margin-top: 24px; gap: 14px; animation: hp-rise 0.9s var(--v-ease) 0.5s both; }
.pd-hero__cta .wl-btn__ca { display: none; }

/* buttons: pills */
.wl-btn {
  padding: 0.72em 1.35em; border-radius: 999px; border: 1px solid var(--v-accent);
  background: rgb(0 0 0 / 0.35); color: var(--v-accent-text);
  font-family: var(--v-font-body); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em;
}
.wl-btn .wl-glyph { display: none; }
.wl-btn:hover { transform: none; border-color: var(--v-accent); background: color-mix(in srgb, var(--wl-accent) 12%, transparent); }
.wl-btn--primary { background: var(--wl-accent); border-color: var(--wl-accent); color: var(--wl-on-accent); }
.wl-btn--primary:hover { background: var(--wl-accent); filter: brightness(1.1); box-shadow: 0 10px 40px -12px var(--wl-accent); }

/* the object: the art, lit from above, dissolving into the dark */
.pd-object { margin-top: -38px; animation: hp-emerge 1.2s var(--v-ease) 0.15s both; }
.pd-object__halo { inset: 6% 10% 0; filter: blur(64px) saturate(1.6); opacity: 0.5; }
.pd-object__art {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, rgb(0 0 0 / 0.55) 62%, transparent 84%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, rgb(0 0 0 / 0.55) 62%, transparent 84%);
  transform: perspective(1800px) rotateX(var(--pd-tilt-x, 0deg)) rotateY(var(--pd-tilt-y, 0deg));
  transition: transform 1.4s var(--v-ease);
}
.pd-object__media .wl-hero-img { filter: saturate(1.08) contrast(1.04); }
.pd-object__glass {
  /* the spot hitting the object's top (it follows the pointer), and shade underneath */
  background:
    radial-gradient(ellipse 34% 26% at var(--pd-glint-x, 50%) 8%, rgb(255 255 255 / 0.16), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgb(0 0 0 / 0.35), transparent 70%);
  mix-blend-mode: screen;
}
.pd-object__glass::after {
  /* a glint that crosses the object now and then */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 42%, rgb(255 255 255 / 0.14) 50%, transparent 58%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  animation: hp-glint 10s var(--v-ease) 2.4s infinite;
}
.pd-object__floor {
  left: 16%; right: 16%; bottom: 3%; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.45), transparent);
  box-shadow: 0 0 22px 4px rgb(255 255 255 / 0.06);
}
/* a square product shot (or pfp) stands in the middle of the stage, the callouts either side */
.pd-object:has(.pd-object__media:is([class*="wl-media--product-"], .wl-media--pfp, .wl-media--pfp-animated)) .pd-object__media { left: 25%; right: 25%; }
.pd-object:has(.pd-object__media:is([class*="wl-media--product-"], .wl-media--pfp, .wl-media--pfp-animated)) .pd-object__art {
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 64%, rgb(0 0 0 / 0.6) 84%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 64%, rgb(0 0 0 / 0.6) 84%, transparent 100%);
}
.pd-object:has(.pd-object__media:is([class*="wl-media--product-"], .wl-media--pfp, .wl-media--pfp-animated)) .pd-object__halo { inset: 4% 22% 0; }
.pd-object:has(.pd-object__media:is([class*="wl-media--product-"], .wl-media--pfp, .wl-media--pfp-animated)) .pd-object__floor { left: 26%; right: 26%; bottom: 7%; }

/* callouts: a small grey label, the value in white, a hairline to the object */
.pd-callout__k { font-size: 0.78rem; font-weight: 500; color: #86868b; letter-spacing: 0.005em; }
.pd-callout__v { font-family: var(--v-font-display); font-size: clamp(1.1rem, 1.55vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; color: #f5f5f7; }
code.pd-callout__v { font-family: var(--v-font-mono); font-size: clamp(0.86rem, 1.1vw, 1.02rem); font-weight: 500; letter-spacing: 0; }
.pd-callout__box { text-shadow: 0 1px 18px rgb(0 0 0 / 0.9); }
.pd-lead__path { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 0.22; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pd-lead__dot { fill: #fff; r: 0.85px; transform-box: fill-box; transform-origin: center; }
.pd-lead__ping { fill: none; stroke: #fff; stroke-width: 0.25; r: 0.85px; transform-box: fill-box; transform-origin: center; opacity: 0; }
.pd-callout--ticker { --k: 0; }
.pd-callout--network { --k: 1; }
.pd-callout--contract { --k: 2; }
.pd-callout--x { --k: 3; }
.pd-lead__path { animation: hp-draw 0.7s var(--v-ease) both; animation-delay: calc(var(--k) * 90ms + 0.5s); }
.pd-lead__dot { animation: hp-pop 0.35s var(--v-spring) both; animation-delay: calc(var(--k) * 90ms + 0.9s); }
.pd-lead__ping { animation: hp-ping 3.2s ease-out infinite; animation-delay: calc(var(--k) * 0.8s + 1.8s); }
.pd-callout__box { animation: hp-fade 0.6s var(--v-ease) both; animation-delay: calc(var(--k) * 90ms + 0.62s); }

/* no art: the callouts become a spec strip under the buttons */
.pd-object:has(.wl-media--none) .pd-callouts { gap: 0; }
.pd-object:has(.wl-media--none) .pd-callout__box { justify-items: center; text-align: center; padding: 4px clamp(18px, 3vw, 40px); border-left: 1px solid rgb(255 255 255 / 0.14); }
.pd-object:has(.wl-media--none) .pd-callout:first-child .pd-callout__box { border-left: 0; }

@media (min-width: 761px) {
  .pd-callout--ticker .pd-callout__box, .pd-callout--network .pd-callout__box { right: 77%; text-align: right; justify-items: end; }
  .pd-callout--contract .pd-callout__box, .pd-callout--x .pd-callout__box { left: 77%; text-align: left; justify-items: start; }
  .pd-callout--ticker .pd-callout__box, .pd-callout--contract .pd-callout__box { top: 30%; transform: translateY(-50%); }
  .pd-callout--network .pd-callout__box, .pd-callout--x .pd-callout__box { top: 70%; transform: translateY(-50%); }
  .pd-callout__box { max-width: 21%; }
}

/* ------------------------------------------------------------ the slogan band */
.pd-band {
  padding: clamp(22px, 3.4vw, 40px) 0;
  font-family: var(--v-font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, 3.1rem); letter-spacing: -0.035em;
  color: #3a3a3d;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.pd-band .wl-marquee__item { padding: 0 0.5em; }
.pd-band .wl-marquee__item::after { content: "\2022"; margin-left: 1em; color: color-mix(in srgb, var(--wl-accent) 65%, #3a3a3d); }

/* ------------------------------------------------------------ section heads */
.wl-sec__head { margin: 0 auto clamp(44px, 6vw, 84px); max-width: 60rem; text-align: center; }
.wl-kicker {
  justify-content: center; margin-bottom: 0.7em;
  font-family: var(--v-font-display); font-size: clamp(1rem, 1.35vw, 1.22rem); font-weight: 600;
  letter-spacing: -0.01em; text-transform: none; color: var(--v-accent-text);
}
.wl-kicker .wl-ord { display: none; }
.wl-sec__title {
  padding-bottom: 0.08em;
  background: var(--hp-silver);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------------------------------------ the features stage: a lens and its callouts */
.pd-stage { padding-top: clamp(56px, 8vw, 110px); }
.pd-stage .wl-sec { padding-top: 0; }
.pd-stage .wl-features::before, .pd-stage .wl-features::after {
  content: ""; display: block; grid-row: 1; grid-column: 1; justify-self: center;
  width: min(72%, 280px); aspect-ratio: 1; margin: 0 0 36px;
  border-radius: 50%;
}
.pd-stage .wl-features::before {
  /* the image itself is wired by skeleton.css; this is its glass: a highlight and a vignette */
  border: 11px solid transparent;
  background-color: #111113;
  background-origin: padding-box; background-clip: padding-box;
  box-shadow:
    inset 26px 34px 46px -30px rgb(255 255 255 / 0.42),
    inset 0 0 64px 10px rgb(0 0 0 / 0.55),
    0 60px 140px -40px var(--hp-glow),
    0 40px 80px -30px rgb(0 0 0 / 0.95);
}
.pd-stage .wl-features::after {
  /* the polished bezel: a conic sheen cut to a ring */
  pointer-events: none;
  padding: 11px;
  background: conic-gradient(from 210deg, #1d1d20, #d7d7dc 11%, #4e4e53 24%, #f2f2f5 38%, #333337 53%, #c3c3c8 68%, #29292c 83%, #9c9ca1 94%, #1d1d20);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.pd-stage.wl-bg--none .wl-features::before, .pd-stage.wl-bg--none .wl-features::after { display: none; }
.pd-stage .wl-feature {
  padding: 0; background: none; border: 0; border-radius: 0;
  display: grid; justify-items: start; align-content: start;
}
.pd-stage .wl-feature:hover { transform: none; }
.pd-stage .wl-feature .wl-ord { display: none; }
.pd-stage .wl-feature__icon {
  width: 52px; height: 52px; margin-bottom: 18px; border-radius: 14px;
  background: #1c1c1e; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 34px -14px var(--hp-glow);
}
.pd-stage .wl-feature__title { font-family: var(--v-font-display); font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 600; letter-spacing: -0.022em; color: #f5f5f7; }
.pd-stage .wl-feature__text { color: #86868b; font-size: 1.02rem; line-height: 1.5; max-width: 22em; }

@media (min-width: 761px) {
  .pd-stage .wl-features {
    --hp-gap: clamp(48px, 6vw, 96px);
    grid-template-columns: minmax(0, 1fr) min(var(--hp-lens, 420px), 36vw) minmax(0, 1fr);
    grid-template-rows: repeat(var(--hp-rows, 1), auto);
    column-gap: var(--hp-gap); row-gap: 56px;
    align-items: center;
  }
  .pd-stage .wl-features[data-count="3"], .pd-stage .wl-features[data-count="4"] { --hp-rows: 2; }
  .pd-stage .wl-features[data-count="5"], .pd-stage .wl-features[data-count="6"] { --hp-rows: 3; }
  .pd-stage .wl-features[data-count="7"], .pd-stage .wl-features[data-count="8"] { --hp-rows: 4; }
  .pd-stage .wl-features::before, .pd-stage .wl-features::after { grid-column: 2; grid-row: 1 / -1; margin: 0; width: 100%; }
  .pd-stage .wl-feature:nth-child(odd) { grid-column: 1; justify-items: end; text-align: right; }
  .pd-stage .wl-feature:nth-child(even) { grid-column: 3; }
  .pd-stage .wl-features[data-count="3"] .wl-feature:nth-child(2) { grid-row: 1 / span 2; }
  /* the leader: from the icon's centre line, across the gap, onto the lens. It draws when
     the section is revealed (a transition, so a re-created leader is simply drawn). */
  .pd-stage .wl-feature::after {
    content: ""; position: absolute; z-index: 2; top: 26px; height: 1px;
    width: calc(var(--hp-gap) + 40px);
    background: linear-gradient(90deg, rgb(255 255 255 / 0.25), rgb(255 255 255 / 0.75));
    transform: scaleX(0);
    transition: transform 0.9s var(--v-ease) calc(var(--i, 0) * 160ms + 0.45s);
  }
  .pd-stage .wl-feature::before {
    content: ""; position: absolute; z-index: 2; top: 22px; width: 9px; height: 9px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.14), 0 0 18px 2px rgb(255 255 255 / 0.4);
    opacity: 0; scale: 0;
    transition: opacity 0.3s linear calc(var(--i, 0) * 160ms + 1.2s), scale 0.5s var(--v-spring) calc(var(--i, 0) * 160ms + 1.2s);
  }
  .pd-stage .wl-in .wl-feature::after { transform: none; }
  .pd-stage .wl-in .wl-feature::before { opacity: 1; scale: 1; }
  /* five or more: too many to orbit one lens; it stands above them and they line up */
  .pd-stage .wl-features:is([data-count="5"], [data-count="6"], [data-count="7"], [data-count="8"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; row-gap: 48px; align-items: start;
  }
  .pd-stage .wl-features:is([data-count="5"], [data-count="6"], [data-count="7"], [data-count="8"])::before,
  .pd-stage .wl-features:is([data-count="5"], [data-count="6"], [data-count="7"], [data-count="8"])::after {
    grid-column: 1 / -1; grid-row: 1; width: min(360px, 60%); margin: 0 auto 24px;
  }
  .pd-stage .wl-features:is([data-count="5"], [data-count="6"], [data-count="7"], [data-count="8"]) .wl-feature {
    grid-column: auto; grid-row: auto; justify-items: start; text-align: left;
  }
  .pd-stage .wl-features:is([data-count="5"], [data-count="6"], [data-count="7"], [data-count="8"]) .wl-feature::before,
  .pd-stage .wl-features:is([data-count="5"], [data-count="6"], [data-count="7"], [data-count="8"]) .wl-feature::after { display: none; }
  .pd-stage .wl-feature:nth-child(odd)::after { left: calc(100% + 14px); transform-origin: left center; }
  .pd-stage .wl-feature:nth-child(odd)::before { left: calc(100% + 14px + var(--hp-gap) + 36px); }
  .pd-stage .wl-feature:nth-child(even)::after { right: calc(100% + 14px); transform-origin: right center; background: linear-gradient(270deg, rgb(255 255 255 / 0.25), rgb(255 255 255 / 0.75)); }
  .pd-stage .wl-feature:nth-child(even)::before { right: calc(100% + 14px + var(--hp-gap) + 36px); }
}
@media (max-width: 760px) {
  .pd-stage .wl-feature { padding: 22px 0 0; border-top: 1px solid var(--v-line); }
}

/* ------------------------------------------------------------ lore: the big statement */
.wl-sec--lore .wl-lore { margin-inline: auto; max-width: 50rem; text-align: center; }
.wl-lore__lead {
  font-family: var(--v-font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.9vw, 2.45rem); line-height: 1.18; letter-spacing: -0.026em;
  color: #f5f5f7;
}
.wl-lore__p { margin-inline: auto; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.5; color: #86868b; }

/* ------------------------------------------------------------ figures: a spec page on black */
.wl-infographic { gap: clamp(20px, 3vw, 36px); }
.wl-graphic--supply, .wl-graphic--comparison {
  position: relative; overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  background: radial-gradient(ellipse 70% 60% at 30% 0%, color-mix(in srgb, var(--wl-accent) 9%, transparent), transparent 70%), #0b0b0d;
  border-radius: var(--v-radius-lg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px rgb(255 255 255 / 0.05);
}
@media (min-width: 761px) {
  /* chart on the left; rings above the legend on the right */
  .wl-graphic--supply { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "chart rings" "chart legend"; column-gap: clamp(32px, 6vw, 90px); row-gap: 40px; }
  .wl-graphic--supply:not(:has(.wl-rings)) { grid-template-areas: "chart legend"; }
  .wl-graphic--supply:not(:has(.wl-legend)) { grid-template-areas: "chart rings"; }
  .wl-graphic--supply .wl-donut { display: contents; }
  .wl-graphic--supply .wl-donut__chart { grid-area: chart; justify-self: center; }
  .wl-graphic--supply .wl-legend { grid-area: legend; align-self: start; width: 100%; }
  .wl-graphic--supply .wl-rings { grid-area: rings; align-self: end; }
}
.wl-donut__svg { filter: drop-shadow(0 0 26px var(--hp-glow)); }
.wl-donut__track { stroke: #1c1c1e; stroke-width: 16; }
.wl-donut__seg { stroke-width: 16; }
.wl-donut__ticks line { stroke: rgb(255 255 255 / 0.16); stroke-width: 1; }
.wl-donut__value {
  font-weight: 300; font-size: clamp(1.1rem, 2.5vw, 1.85rem); letter-spacing: -0.03em;
  background: var(--hp-silver); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wl-donut__label, .wl-ring__label, .wl-stat__label {
  font-family: var(--v-font-body); font-size: 0.82rem; letter-spacing: 0; text-transform: none; color: #86868b;
}
.wl-legend__item { border-bottom-color: rgb(255 255 255 / 0.1); padding-bottom: 14px; font-size: 1.05rem; }
.wl-legend__swatch { width: 10px; height: 10px; border-radius: 50%; }
.wl-legend__value { font-family: var(--v-font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.wl-rings { gap: clamp(20px, 3vw, 40px); }
.wl-ring__track { stroke: #1c1c1e; stroke-width: 5; }
.wl-ring__fill { stroke-width: 5; filter: drop-shadow(0 0 8px var(--hp-glow)); }
.wl-ring__value, .wl-stat__value {
  font-weight: 300; letter-spacing: -0.05em;
  background: var(--hp-silver); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wl-ring__value { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.wl-unit { font-weight: 400; opacity: 1; }
.wl-stats { background: rgb(255 255 255 / 0.1); border: 0; border-radius: var(--v-radius); }
.wl-stat { background: #000; padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); text-align: center; align-items: center; }
.wl-stat__value { font-size: clamp(2.2rem, 4.8vw, 4rem); padding-bottom: 0.06em; }
.wl-stat--word .wl-stat__value { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.025em; }
.wl-caption { text-align: center; color: #6e6e73; font-size: 0.86rem; }

.wl-bar { grid-template-columns: minmax(90px, 200px) 1fr auto; }
.wl-bar__label { font-weight: 500; color: #d2d2d7; }
.wl-bar__track { height: 10px; }
.wl-bar__bg { fill: #1c1c1e; }
.wl-bar__value { font-family: var(--v-font-display); font-weight: 300; font-size: 1.8rem; letter-spacing: -0.04em; }
.wl-table-wrap { border-color: rgb(255 255 255 / 0.1); border-radius: var(--v-radius-sm); }
.wl-table th, .wl-table td { border-bottom-color: rgb(255 255 255 / 0.08); }

.wl-node__card { background: #0d0d0f; border: 0; border-radius: var(--v-radius); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07); }
.wl-node__card .wl-ord { background: none; color: var(--v-accent-text); border: 1px solid var(--v-accent); width: 34px; height: 34px; }
.wl-node__title { font-weight: 600; letter-spacing: -0.02em; }
.wl-node__text { color: #86868b; }
.wl-edge__line { stroke: rgb(255 255 255 / 0.4); stroke-dasharray: 2 5; }
.wl-edge__head { stroke: rgb(255 255 255 / 0.5); }

.wl-milestones::before { background: linear-gradient(var(--v-accent), rgb(255 255 255 / 0.08)); width: 1px; left: 13.5px; }
.wl-ms__ring { fill: #000; stroke-width: 1.5; }
.wl-ms__when { font-family: var(--v-font-body); letter-spacing: 0; text-transform: none; font-weight: 600; }
.wl-ms__title { font-weight: 600; letter-spacing: -0.02em; }
.wl-ms__text { color: #86868b; }

/* ------------------------------------------------------------ product shots */
.wl-gallery { gap: clamp(14px, 1.6vw, 22px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wl-gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.wl-gallery .wl-shot:first-child { grid-column: 1 / -1; }
.wl-gallery .wl-shot:nth-child(even):last-child { grid-column: 1 / -1; }
.wl-shot { background: none; border-radius: 0; overflow: visible; }
.wl-shot img {
  height: auto; aspect-ratio: 16 / 9; border-radius: var(--v-radius);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 40px 90px -50px var(--hp-glow);
}
.wl-shot:hover img { transform: scale(1.012); }
.wl-shot__caption {
  position: static; padding: 14px 6px 0; border-radius: 0; background: none; backdrop-filter: none;
  color: #86868b; font-size: 0.92rem; text-align: center;
}

/* ------------------------------------------------------------ quotes, facts, questions */
.wl-quotes { gap: clamp(14px, 1.6vw, 22px); }
.wl-quote {
  padding: calc(var(--v-card-pad) + 40px) var(--v-card-pad) var(--v-card-pad);
  background: linear-gradient(180deg, #121214, #0a0a0b); border: 0; border-radius: var(--v-radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
}
.wl-quote::before {
  top: 14px; left: calc(var(--v-card-pad) - 4px);
  font-family: Georgia, "Times New Roman", serif; font-size: 5.4rem; font-weight: 400;
  background: linear-gradient(180deg, var(--v-accent), color-mix(in srgb, var(--wl-accent) 35%, #000));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wl-quote__text { font-family: var(--v-font-display); font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #f5f5f7; }
.wl-quote__who { font-family: var(--v-font-body); font-size: 0.9rem; color: #86868b; }

.wl-facts { margin-inline: auto; max-width: 44rem; gap: 0; }
.wl-fact {
  grid-template-columns: 30px 1fr; gap: 18px; padding: 22px 4px;
  background: none; border: 0; border-radius: 0; border-bottom: 1px solid rgb(255 255 255 / 0.1);
  font-family: var(--v-font-display); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 500; letter-spacing: -0.015em;
}
.wl-fact__mark { width: 30px; height: 30px; background: none; color: var(--v-accent-text); box-shadow: inset 0 0 0 1.5px var(--v-accent); }
.wl-fact__mark .wl-glyph { width: 15px; height: 15px; }

.wl-faq { margin-inline: auto; max-width: 48rem; gap: 0; }
.wl-qa { background: none; border: 0; border-radius: 0; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.wl-qa:first-child { border-top: 1px solid rgb(255 255 255 / 0.12); }
.wl-qa__q { padding: 26px 4px; font-family: var(--v-font-display); font-size: clamp(1.12rem, 1.6vw, 1.38rem); font-weight: 600; letter-spacing: -0.02em; }
.wl-qa__sign { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
.wl-qa__sign::before, .wl-qa__sign::after { left: 7px; right: 7px; height: 1.5px; }
.wl-qa[open] .wl-qa__sign { box-shadow: inset 0 0 0 1px var(--v-accent); color: var(--v-accent-text); }
.wl-qa__a { padding: 0 4px 28px; max-width: 40rem; color: #a1a1a6; font-size: 1.08rem; }

.wl-post { background: #0d0d0f; border: 0; border-radius: var(--v-radius); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07); margin-inline: auto; }
.wl-post__text { font-family: var(--v-font-display); letter-spacing: -0.015em; }

/* ------------------------------------------------------------ availability */
.wl-sec--access .wl-sec__inner {
  position: relative; overflow: hidden;
  padding: clamp(48px, 7vw, 100px) clamp(22px, 5vw, 72px);
  border-radius: var(--v-radius-lg);
  background: radial-gradient(ellipse 60% 70% at 50% 0%, color-mix(in srgb, var(--wl-accent) 16%, transparent), transparent 70%), #0b0b0d;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}
.wl-access { margin-inline: auto; justify-items: center; text-align: center; }
.wl-access__net { font-family: var(--v-font-body); font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: #86868b; }
.wl-ca {
  width: min(100%, 44rem); padding: 8px 8px 8px 24px;
  border: 1px solid rgb(255 255 255 / 0.14); border-radius: 999px; background: #000;
}
.wl-ca__label { font-family: var(--v-font-body); font-size: 0.78rem; letter-spacing: 0.02em; text-transform: none; color: #86868b; }
.wl-ca__value { color: #f5f5f7; text-align: left; }
.wl-ca .wl-copy { border-radius: 999px; padding: 12px 22px; background: var(--wl-accent); color: var(--wl-on-accent); font-weight: 600; }
.wl-ca .wl-copy .wl-glyph { width: 16px; height: 16px; }
.wl-links { justify-content: center; }
.wl-link { padding: 12px 20px; border: 1px solid rgb(255 255 255 / 0.16); background: none; font-weight: 500; color: #f5f5f7; }
.wl-link:hover { transform: none; border-color: var(--v-accent); color: var(--v-accent-text); }
.wl-link .wl-glyph { color: var(--v-accent-text); }

/* ------------------------------------------------------------ footer */
.pd-footer { border-top: 1px solid rgb(255 255 255 / 0.1); color: #86868b; font-size: 0.8rem; max-width: calc(var(--v-maxw) + 2 * var(--v-pad-x)); margin: 0 auto; }
.wl-foot__name { font-family: var(--v-font-display); font-weight: 600; font-size: 1rem; color: #f5f5f7; letter-spacing: -0.015em; }
.wl-foot__net, .wl-foot__nfa { color: #6e6e73; font-size: 0.8rem; }
.wl-foot .wl-link { padding: 6px 12px; font-size: 0.8rem; }

/* ------------------------------------------------------------ motion */
@keyframes hp-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes hp-fade { from { opacity: 0; filter: blur(6px); } }
@keyframes hp-word { from { opacity: 0; translate: 0 0.22em; filter: blur(12px); } }
@keyframes hp-sheen { 0% { background-position: 100% 0, 0 0; } 16%, 100% { background-position: 0% 0, 0 0; } }
@keyframes hp-emerge { from { opacity: 0; scale: 0.93; filter: blur(10px) brightness(0.4); } }
@keyframes hp-light { from { opacity: 0; } }
@keyframes hp-draw { from { stroke-dashoffset: 1; } }
@keyframes hp-pop { from { opacity: 0; scale: 0; } }
@keyframes hp-ping { 0% { opacity: 0.9; scale: 1; } 70%, 100% { opacity: 0; scale: 4.2; } }
@keyframes hp-dim { to { opacity: 0.25; } }
@keyframes hp-glint { 0% { background-position: 130% 0; } 22%, 100% { background-position: -30% 0; } }

/* calm reveal: long, soft, a touch of scale, like a slide change */
.wl-motion-calm[data-wl-reveal="on"] .wl-reveal { transform: translateY(56px) scale(0.985); transition-duration: 1.2s; }
.wl-motion-calm[data-wl-reveal="on"] .wl-reveal.wl-in { transform: none; }
.pd-stage .wl-in .wl-feature { animation-name: hp-rise; animation-duration: 1s; }

/* less motion asked for: the stage's leaders are simply there (no drawing, no wait) */
@media (prefers-reduced-motion: reduce) {
  .pd-stage .wl-feature::before, .pd-stage .wl-feature::after { transition: none !important; }
}

/* scrolling away from the hero dims the spotlight */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html:not(.wl-still) .pd-hero__light { animation: hp-dim linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  }
}

/* ------------------------------------------------------------ phone */
@media (max-width: 760px) {
  .pd-hero__headline { font-size: clamp(2.5rem, 12vw, 3.4rem); letter-spacing: -0.042em; }
  .pd-hero:is([data-pd-len="l"], [data-pd-len="xl"]) .pd-hero__headline { font-size: clamp(2.05rem, 9.4vw, 2.7rem); }
  .pd-hero__cta { gap: 10px; }
  .pd-hero__cta .wl-btn { font-size: 0.94rem; padding: 0.66em 1.15em; }
  .pd-object { margin-top: 6px; }
  .pd-object__halo { inset: 0 0 auto; aspect-ratio: 2 / 1; }
  .pd-object__floor { display: none; }
  /* on a phone a square product shot takes the width: no gutters to keep for callouts */
  .pd-object:has(.pd-object__media:is([class*="wl-media--product-"], .wl-media--pfp, .wl-media--pfp-animated)) { --pd-art-ratio: 1 / 1; }
  .pd-object:has(.pd-object__media:is([class*="wl-media--product-"], .wl-media--pfp, .wl-media--pfp-animated)) .pd-object__art { width: 86%; margin-inline: auto; }
  .pd-object:has(.pd-object__media:is([class*="wl-media--product-"], .wl-media--pfp, .wl-media--pfp-animated)) .pd-object__media { left: 0; right: 0; }
  .pd-object:has(.pd-object__media:is([class*="wl-media--product-"], .wl-media--pfp, .wl-media--pfp-animated)) .pd-object__halo { inset: 0 12% auto; aspect-ratio: 1; }
  .pd-callouts { gap: 18px 14px; }
  .pd-callout__box { text-align: left; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.14); }
  .wl-gallery { grid-template-columns: minmax(0, 1fr); }
  .wl-ca { border-radius: var(--v-radius); padding: 16px; }
}