/* Velum's page (build_velum.py), scoped to body.vl-page.
 *
 * Direction A (docs/superpowers/specs/2026-11-02-velum-page-design.md,
 * chosen by Adam on 2026-11-03): apple.com's dark product page grammar,
 * measured on its Final Cut Pro and Logic Pro pages (page #000, cards
 * #1d1d1f, text #f5f5f7, muted #86868b; the device first in the hero;
 * chapters of an eyebrow, a large heading and a grey paragraph with white emphasis; tiles on a ~1260px measure with 28px
 * corners and captions led in bold white; a large step between chapters),
 * fitted to the site's system: its two faces (Barlow Condensed as
 * din-condensed-web for display, IBM Plex Mono for text, tracked -0.04em),
 * its margins (6vw, 4vw from 768), its large section step (10vmax) and its
 * button geometry (7.2px corners, the primary at 59px). No accent: the
 * icon's blue (#2A97F2, the app's dark accent; lilac #9C82FF until Velum
 * turned blue, 2026-11-07) only as a faint light behind the hero device and
 * the closing block. Contrast on #000: #f5f5f7 19:1, #a1a1a6 8.3:1,
 * #86868b 5.8:1; on the tiles' #1d1d1f #86868b is 4.6:1.
 */

.vl-page {
  --vl-text: #f5f5f7;
  --vl-text-2: #a1a1a6;
  --vl-muted: #86868b;
  --vl-card: #1d1d1f;
  --vl-ring: #f5f5f7;
  --vl-m: 6vw;
  --vl-measure: 1260px;
  --vl-step: 10vmax;
  --vl-display: "din-condensed-web", "Barlow Condensed", sans-serif;
  --vl-sans: "ibm-plex-mono", ui-monospace, monospace;
  --vl-track: -0.04em;
}
@media (min-width: 768px) {
  .vl-page { --vl-m: 4vw; }
}

html:has(body.vl-page),
body.vl-page,
.vl-page #siteWrapper,
.vl-page #page {
  background-color: #000;
}

/* ------------------------------------------------------------------ chrome */

/* The header takes its own place in the flow, as on /herald, so the page
   starts under it and closes up when the announcement bar is dismissed. */
.vl-page #header {
  position: relative;
}
.vl-page .header .header-background,
.vl-page .header-menu .header-menu-bg {
  background-color: #000 !important;
}

/* ------------------------------------------------------------------ base */

.vl {
  color: var(--vl-muted);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.vl *,
.vl *::before,
.vl *::after {
  box-sizing: border-box;
}
.vl-wrap {
  width: calc(100% - 2 * var(--vl-m));
  max-width: var(--vl-measure);
  margin-inline: auto;
}
.vl-page .vl p,
.vl-page .vl h1,
.vl-page .vl h2,
.vl-page .vl h3,
.vl-page .vl figure,
.vl-page .vl ul {
  margin: 0;
}
.vl-page .vl p,
.vl-page .vl figcaption {
  font-family: var(--vl-sans);
  font-weight: 400;
  letter-spacing: var(--vl-track);
  text-transform: none;
}
.vl-page .vl b,
.vl-page .vl strong {
  font-weight: 500;
  color: var(--vl-text);
}
.vl-page .vl h1,
.vl-page .vl h2,
.vl-page .vl .vl-display,
.vl-page .vl .vl-tile-big {
  font-family: var(--vl-display);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vl-text);
}
.vl a:focus-visible {
  outline: 2px solid var(--vl-ring);
  outline-offset: 3px;
}
.vl img {
  display: block;
}

/* ------------------------------------------------------------------ pictures
   Every picture is a slot (shots.json): a device or window drawn at its own
   size or smaller, aspect kept; a crop drawn whole in its tile, at its size
   or smaller; a full-bleed crop never past its size. Until its capture exists
   a slot is a quiet frame with its id. */

.vl-slot {
  display: block;
  position: relative;
  background: #0b0b0c;
  color: #6e6e73;
}
.vl-slot[data-slot-empty] {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.vl-slot--device,
.vl-slot--video {
  width: 100%;
  max-width: calc(var(--vl-w) * 1px);
  height: auto;
  aspect-ratio: var(--vl-w) / var(--vl-h);
  margin-inline: auto;
}
img.vl-slot--device, .vl-slot--video { background: none; }
/* a crop is drawn whole in its tile: at its size or smaller, its shape
   kept, never cut and never past its pixels */
.vl-slot--crop {
  width: 100%;
  max-width: calc(var(--vl-w) * 1px);
  height: auto;
  aspect-ratio: var(--vl-w) / var(--vl-h);
  margin-inline: auto;
  border-radius: 12px;
}
.vl-slot--bleed {
  width: 100%;
  max-width: calc(var(--vl-w) * 1px);
  aspect-ratio: var(--vl-w) / var(--vl-h);
  margin-inline: auto;
  object-fit: cover;
}
@media (max-width: 767px) {
  /* a window of the crop, the full height a phone gives it, never scaled up */
  .vl-slot--bleed { aspect-ratio: auto; height: min(420px, calc(var(--vl-h) * 1px)); }
}
/* the frames of the empty slots, in the shape of what will fill them */
.vl-slot[data-slot="hero"][data-slot-empty],
.vl-slot[data-slot="control"][data-slot-empty],
.vl-slot[data-slot="picture"][data-slot-empty] { border-radius: 9.5% / 19.4%; }
.vl-slot[data-slot="pip"][data-slot-empty],
.vl-slot[data-slot="live-activity"][data-slot-empty] { border-radius: 19.4% / 9.5%; }
/* a slot drawn only at some widths (shots.json's media); a recording
   without its bezel, cropped, has rounded corners (none in use now: every
   recording is the whole iPhone at every width, scaled down on a phone) */
@media (max-width: 767px) {
  .vl-page .vl .vl-from768 { display: none; }
}
@media (min-width: 768px) {
  .vl-page .vl .vl-below768 { display: none; }
}
.vl-slot--video {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.vl-slot--video.vl-slot--clip {
  border-radius: 18px;
  object-fit: cover;
  background-color: #0b0b0c;
}
.vl-slot-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem;
  text-align: center;
}
.vl-slot--crop .vl-slot-label {
  inset: 0 auto auto 0;
  align-items: flex-start;
  padding: 1.25rem;
  text-align: left;
}
.vl-slot-id {
  font-family: var(--vl-display);
  font-size: 1.5rem;
  line-height: 1;
  color: #8e8e93;
}
.vl-slot-note {
  font-family: var(--vl-sans);
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: var(--vl-track);
}

.vl-device {
  display: block;
}

/* ------------------------------------------------------------------ hero */

.vl-hero {
  position: relative;
  padding: clamp(1rem, 2vh, 1.5rem) 0 var(--vl-step);
  text-align: center;
}
.vl-glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1500px, 160vw);
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(42, 151, 242, 0.13), rgba(42, 151, 242, 0.045) 36%, transparent 64%);
  pointer-events: none;
}
.vl-hero .vl-wrap {
  position: relative;
}
@media (max-width: 767px) {
  /* the scaled iPhone is short on a phone: the next chapter's own step is
     the only space under it */
  .vl-hero { padding-bottom: 0; }
}
/* apple.com's product-page order: the icon and the name
   small, the headline, the lede, the badge, all one centred column in the
   first window; then the iPhone as large as the column allows, never past
   its own size, running below the fold. */
.vl-page .vl .vl-device--hero {
  margin: clamp(2.5rem, 5vh, 3.5rem) auto 0;
}
.vl-page .vl .vl-device--hero .vl-slot[data-slot="hero"],
.vl-page .vl .vl-device--media .vl-slot[data-slot="picture"],
.vl-page .vl .vl-device--media .vl-slot[data-slot="control"] {
  max-width: min(calc(var(--vl-w) * 1px), 100%);
}
@media (min-width: 768px) {
  /* the same picture drawn smaller on a wider window: never past 880px
     wide or 55% of the window's height, so the hero's top shows in the
     first window under the badge at 1440x900; the picture and control
     chapters' iPhones the same */
  .vl-page .vl .vl-device--hero .vl-slot[data-slot="hero"],
  .vl-page .vl .vl-device--media .vl-slot[data-slot="picture"],
  .vl-page .vl .vl-device--media .vl-slot[data-slot="control"] {
    max-width: min(880px, calc(55vh * var(--vl-w) / var(--vl-h)), 100%);
    max-width: min(880px, calc(55svh * var(--vl-w) / var(--vl-h)), 100%);
  }
  /* its light in proportion to the smaller phone */
  .vl-hero > .vl-glow { width: min(1100px, 140vw); height: 680px; }
}
.vl-page .vl .vl-icon {
  margin: 0 auto 1rem;
}
.vl-hero-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.vl-page .vl .vl-hero-name .vl-icon {
  width: 40px;
  height: 40px;
  margin: 0;
}
.vl-page .vl .vl-name {
  font-size: 1.75rem;
  line-height: 1;
}
.vl-page .vl .vl-display {
  margin: 0.75rem auto 0;
  max-width: 18ch;
  font-size: clamp(3rem, 1.75rem + 5vw, 5.25rem);
  line-height: 0.96;
  text-wrap: balance;
}
.vl-page .vl .vl-hero .vl-display {
  margin-top: 1.1rem;
  max-width: 20ch;
}
.vl-page .vl .vl-lede {
  margin: 1.4rem auto 0;
  max-width: 36ch;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem);
  line-height: 1.45;
  color: var(--vl-muted);
  text-wrap: balance;
}
.vl-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
}
.vl-page .vl a.vl-badge {
  display: block;
  border-radius: 12px;
}
/* While Velum is a public TestFlight beta (2026-11-06, a proposal awaiting
   Adam): "Join on TestFlight" in place of each App Store badge, the site's
   primary geometry (59px, 7.2px corners, the display face at 1.5rem) in the
   next-app band's near-white with black words (19:1), the site's ↗ after the
   words as the band draws it. Hover darkens the fill, not its hue. */
.vl-page .vl a.vl-tf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 59px;
  padding: 1rem 3.1rem;
  border: 0;
  border-radius: 7.2px;
  font-family: var(--vl-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  background: #f2f2f0;
  color: #000;
  transition: background-color 0.15s ease;
}
.vl-page .vl a.vl-tf:hover {
  background: #d9d9d6;
}
.vl-page .vl a.vl-tf:focus-visible {
  outline-offset: 4px;
}
.vl-page .vl .vl-tf .vl-out {
  position: relative;
  top: -0.18em;
  margin-left: 0.15em;
  font-family: "ibm-plex-mono", monospace;
  font-size: 0.75em;
}
@media (prefers-reduced-motion: reduce) {
  .vl-page .vl a.vl-tf { transition: none; }
}
.vl-page .vl .vl-free {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--vl-muted);
}

/* ------------------------------------------------------------------ chapters */

.vl-chapter {
  padding-top: var(--vl-step);
}
.vl-head {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.vl-page .vl .vl-eyebrow {
  margin-bottom: 0.9rem;
  font-family: var(--vl-display);
  font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.75rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--vl-muted);
}
.vl-page .vl .vl-head h2 {
  max-width: 15ch;
  font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem);
  line-height: 0.98;
  text-wrap: balance;
}
.vl-page .vl .vl-lead {
  max-width: 44ch;
  margin-top: 1.6rem;
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.3rem);
  line-height: 1.45;
  color: var(--vl-muted);
  text-wrap: pretty;
}
.vl-head--centre {
  text-align: center;
}
.vl-page .vl .vl-head--centre h2,
.vl-page .vl .vl-head--centre .vl-lead {
  margin-inline: auto;
}
@media (max-width: 767px) {
  /* A looser phone layout, Adam's choice on 2026-11-07 (variant B): on a
     phone the hero and the chapters' leads read dense. More room between
     the hero's name, headline, lede, button, line and iPhone; the lede, the
     line under the button and the chapters' leads untracked and more
     leaded. Desktop unchanged. */
  .vl-page .vl .vl-hero .vl-display { margin-top: 2rem; }
  .vl-page .vl .vl-lede {
    margin-top: 1.75rem;
    line-height: 1.6;
    letter-spacing: 0;
  }
  .vl-cta { margin-top: 2.5rem; gap: 1.25rem; }
  .vl-page .vl .vl-free { letter-spacing: 0; line-height: 1.55; }
  .vl-page .vl .vl-device--hero { margin-top: 3.5rem; }
  .vl-page .vl .vl-lead { line-height: 1.6; letter-spacing: 0; }
}
.vl-page .vl .vl-bleed,
.vl-page .vl .vl-device--media,
.vl-page .vl .vl-device--library,
.vl-page .vl .vl-device--mac {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.vl-device--mac .vl-slot,
.vl-device--library .vl-slot {
  max-width: min(calc(var(--vl-w) * 1px), 100%);
}

/* ------------------------------------------------------------------ tiles
   Each chapter's tiles are the shared card reel (reel.py, reel.css,
   reel.js): below 1024 a horizontal reel, a card and a part of the next in
   view (Adam, 2026-11-08: from 768 the grid's two columns left a chapter
   of three with one tile alone); from 1024 up its list is laid out as the
   grid, the reel's scrolling, fade and buttons switched off (with nothing
   to scroll, reel.js keeps the buttons hidden).

   From 768 to 1023 a card is the column (92vw) less a gap over 1.75, so
   one card and three quarters of the next show (395px at 768, 529 at
   1023): every chapter, two tiles or more, runs off the edge and says
   there is more, as one card and a part does on a phone. */

.vl-tiles-frame .mp-reel-frame {
  --mp-reel-card: min(320px, calc(100vw - 88px));
  --mp-reel-gap: 12px;
  --mp-reel-fade: 48px;
}
@media (min-width: 768px) {
  .vl-tiles-frame .mp-reel-frame {
    --mp-reel-card: calc((92vw - 16px) / 1.75);
    --mp-reel-gap: 16px;
    --mp-reel-fade: 72px;
  }
}
.vl-tiles-frame .mp-reel-cards > li {
  display: flex;
}
.vl-tiles-frame .mp-reel:focus {
  outline: none;
}
.vl-tiles-frame .mp-reel:focus-visible .vl-tile {
  box-shadow: inset 0 0 0 2px var(--vl-ring);
}
.vl-page .vl .vl-reel-nav {
  margin-top: 1.25rem;
}
.vl-page .vl .vl-reel-nav button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #333336;
  color: var(--vl-text);
  transition: background-color 0.15s ease;
}
.vl-page .vl .vl-reel-nav button:disabled {
  background: #1d1d1f;
  color: #6e6e73;
}
.vl-page .vl .vl-reel-nav button:focus-visible {
  outline: 2px solid var(--vl-ring);
  outline-offset: 3px;
}
@media (hover: hover) {
  .vl-page .vl .vl-reel-nav button:not(:disabled):hover { background: #424245; }
}

@media (min-width: 1024px) {
  .vl-tiles-frame .mp-reel-mask {
    margin-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
    animation: none;
  }
  .vl-tiles-frame .mp-reel {
    display: block;
    overflow: visible;
    padding: 0;
  }
  .vl-tiles-frame .mp-reel > ul.mp-reel-cards {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    padding: 0;
  }
  .vl-tiles-frame .mp-reel > ul.mp-reel-cards > li {
    width: auto;
    grid-column: span 6;
  }
  .vl-page .vl .vl-reel-nav { display: none; }
  .vl-tiles-frame .mp-reel > ul.mp-reel-cards > li.vl-n { grid-column: span 4; }
  .vl-tiles-frame .mp-reel > ul.mp-reel-cards > li.vl-w { grid-column: span 8; }
}

.vl-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  background: var(--vl-card);
}
.vl-tile-pic {
  position: relative;
  padding: 2.25rem 2.25rem 0;
}
.vl-page .vl .vl-cap {
  padding: 1.5rem 2rem 2rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--vl-muted);
}
/* a picture tile's caption: its heading, a real h3, runs into its sentence
   as a bold lead */
.vl-page .vl .vl-cap h3,
.vl-page .vl .vl-cap p {
  display: inline;
  font-family: var(--vl-sans);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: var(--vl-track);
  text-transform: none;
}
.vl-page .vl .vl-cap h3 {
  font-weight: 500;
  color: var(--vl-text);
}
.vl-tile--words {
  padding: 2.25rem 2rem 2.25rem;
  min-height: 230px;
}
.vl-page .vl .vl-tile-big {
  font-size: clamp(1.75rem, 1.4rem + 0.8vw, 2.25rem);
  line-height: 1.02;
  text-wrap: balance;
}
.vl-page .vl .vl-tile-text {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--vl-muted);
  text-wrap: pretty;
}

/* the illustration over a word-only tile (velum_art.py): one height in
   every tile, drawn from its left edge, static */
.vl-art {
  height: 43px;
  margin-bottom: 0.8rem;
}
.vl-art-svg {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}
/* Display P3's colour wheel: every hue round the rim, at full strength
   there, softening into a light neutral centre; sRGB's primaries and
   secondaries, and where the screen shows P3, P3's own, which reach
   further */
.vl-art-p3 {
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(210 210 215) 0%, rgb(210 210 215 / 0.55) 38%, rgb(210 210 215 / 0) 100%),
    conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}
@media (color-gamut: p3) {
  @supports (color: color(display-p3 1 0 0)) {
    .vl-art-p3 {
      background:
        radial-gradient(closest-side, rgb(210 210 215) 0%, rgb(210 210 215 / 0.55) 38%, rgb(210 210 215 / 0) 100%),
        conic-gradient(in display-p3, color(display-p3 1 0 0), color(display-p3 1 1 0),
          color(display-p3 0 1 0), color(display-p3 0 1 1), color(display-p3 0 0 1),
          color(display-p3 1 0 1), color(display-p3 1 0 0));
    }
  }
}

@media (max-width: 767px) {
  .vl-tile { border-radius: 24px; }
  .vl-tile-pic { padding: 1.5rem 1.5rem 0; }
  .vl-page .vl .vl-cap { padding: 1.25rem 1.5rem 1.6rem; }
  .vl-tile--words { padding: 1.75rem 1.5rem; min-height: 0; }
  .vl-art { height: 36px; margin-bottom: 0.65rem; }
}

/* the two phones of "keep going", side by side, each with its caption */
.vl-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center;
  gap: clamp(24px, 6vw, 96px);
}
.vl-page .vl .vl-device--portrait .vl-cap {
  padding: 1.5rem 0 0;
  text-align: center;
}
@media (max-width: 559px) {
  .vl-pair { grid-template-columns: minmax(0, 300px); gap: 3rem; }
}

/* ------------------------------------------------------------------ questions */

.vl-page .vl .vl-faq h2 {
  margin-bottom: 2rem;
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem);
  line-height: 1;
}
.vl-q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.vl-q:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}
.vl-page .vl .vl-q h3 {
  font-family: var(--vl-sans);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: var(--vl-track);
  text-transform: none;
  color: var(--vl-text);
}
.vl-page .vl .vl-q p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--vl-text-2);
}
@media (max-width: 767px) {
  .vl-q { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
}

/* ------------------------------------------------------------------ closing */

.vl-close {
  position: relative;
  padding-block: var(--vl-step);
  text-align: center;
}
.vl-close .vl-glow {
  top: auto;
  bottom: -10%;
  height: 700px;
}
.vl-close .vl-wrap {
  position: relative;
}
.vl-page .vl .vl-close .vl-icon {
  margin-bottom: 1.6rem;
}
.vl-page .vl .vl-close .vl-display {
  margin-top: 0;
  font-size: clamp(3rem, 1.8rem + 4.4vw, 5.5rem);
  line-height: 1;
}
.vl-page .vl .vl-close-line {
  margin-top: 1rem;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.45;
  color: var(--vl-muted);
}

/* ------------------------------------------------------------------ motion
   A block below the window when the page opens fades up as it arrives
   (velum.js marks it .vl-wait and then .vl-in). Nothing without script,
   nothing under Reduce Motion, nothing at rest; anything with focus shows
   at once. */

.vl-motion .vl-wait {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.vl-motion .vl-wait.vl-in,
.vl-motion .vl-wait:focus-within {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .vl-motion .vl-wait { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ footer */

.vl-foot {
  padding-block: 40px;
}
.vl-foot .vl-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.vl-page .vl a.vl-foot-mark {
  font-family: var(--site-title-font-font-family, "Lily Script One"), cursive;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--vl-text);
  text-decoration: none;
  white-space: nowrap;
}
.vl-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
}
.vl-page .vl .vl-social li {
  margin: 0;
}
.vl-page .vl .vl-social a {
  display: block;
  width: 24px;
  height: 24px;
  color: #6d6d6d;
  text-decoration: none;
  transition: color 0.15s;
}
.vl-page .vl .vl-social a:hover,
.vl-page .vl .vl-social a:focus-visible {
  color: var(--vl-text);
}
.vl-social svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@media (max-width: 767px) {
  /* the footer under the band is one row (next.css); the wordmark as large
     as the row allows, up to 2rem, as on /legilo */
  .vl-page .vl #mp-next + footer a.vl-foot-mark {
    font-size: min(2rem, calc(17.6vw - 41px));
  }
}
@media (max-width: 374px) {
  .vl-page .vl #mp-next + footer a.vl-foot-mark {
    font-size: min(25px, calc(17.6vw - 34px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .vl-page .vl .vl-social a {
    transition: none;
  }
}

/* The blue light sits behind the iPhone, under the words */
.vl-hero > .vl-glow { top: auto; bottom: -12%; }
/* A recording in the bezel, masked to the phone's shape by its
   poster's alpha (the video's own corners are black) */
.vl-slot--video {
  -webkit-mask-image: var(--vl-mask);
  mask-image: var(--vl-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}