/* Vetero's page. Built from scratch in /horzono's mood, with a layout of
 * its own (build_vetero.py).
 *
 * Always light, on Adam's instruction (2026-09-26), and its one colour is
 * macOS Tahoe's blue: the light wallpaper the hero and the closing band
 * stand on, and --vo-blue, the wave's blue sampled from it (#076bd0 in sRGB,
 * white on it 5.2:1, and it on white the same), for the sky band, the Plus
 * tags and the theme colour. Type is the site's own: plain h1, h2 and p, which the
 * site's stylesheet sizes; the cards' headings are smaller. Pictures in a
 * box have /horzono's 18px corners.
 *
 * Every picture is a capture drawn at its own size (half its pixels, the
 * captures being 2x) or smaller, never larger. A crop wider than its slot
 * shows a window of it that cuts no word (windows.css), not shrunk: .vo-shot.
 *
 * Everything is scoped under .vo-page (on <body>) or .vo (on the content).
 */

.vo-page {
  --vo-ink: #000;
  --vo-muted: #595959;
  --vo-bg: #fff;
  --vo-blue: #076bd0;
  --vo-line: #e4e4e2;
  --vo-radius: 18px;
  /* the one contrast aid for white words on the wallpaper: a soft, close
     shadow, not a glow and not a veil */
  --vo-shadow: 0 1px 3px rgb(0 20 60 / 0.35);
  --vo-shadow-line: 0 1px 2px rgb(0 20 60 / 0.3);
  /* the header floats over the hero; vetero.js measures it, and these are
     its heights with the announcement bar for when the script does not run */
  --vo-head: 126px;
  color-scheme: light;
}

@media (min-width: 768px) {
  .vo-page { --vo-head: 171px; }
}

@media (min-width: 1024px) {
  .vo-page { --vo-head: 154px; }
}

@media (min-width: 1440px) {
  .vo-page { --vo-head: 193px; }
}

html:has(body.vo-page),
body.vo-page,
.vo-page #siteWrapper,
.vo-page #page {
  background-color: var(--vo-bg);
}

/* The header floats over the hero, as on /horzono, and on this page its
   words are white (Adam, 2026-09-27): the wordmark, the nav, the menu
   button, each with the hero's light shadow. It keeps Support's white
   theme otherwise, so its menu, once open, is the site's own. Nothing lies
   between it and the wallpaper: no veil, no fill. */
.vo-page .header {
  position: absolute;
}

.vo-page .header .header-background {
  background-color: transparent !important;
}

.vo-page #header .header-display-desktop .header-title-text a,
.vo-page #header .header-display-mobile .header-title-text a,
.vo-page #header .header-display-desktop .header-nav-item > a,
.vo-page #header .header-display-desktop .header-nav-item > a .mp-nav-out {
  color: #fff !important;
  text-shadow: var(--vo-shadow);
}

.vo-page #header .header-burger-btn .burger-inner > div,
.vo-page #header .header-burger-btn .burger-inner::before,
.vo-page #header .header-burger-btn .burger-inner::after {
  background-color: #fff !important;
  box-shadow: var(--vo-shadow-line);
}

.vo-page.header--menu-open #header .header-burger-btn .burger-inner > div,
.vo-page.header--menu-open #header .header-burger-btn .burger-inner::before,
.vo-page.header--menu-open #header .header-burger-btn .burger-inner::after {
  background-color: #000 !important;
  box-shadow: none;
}

.vo {
  color: var(--vo-ink);
}

.vo-page .vo h1,
.vo-page .vo h2,
.vo-page .vo h3,
.vo-page .vo p,
.vo-page .vo li {
  color: var(--vo-ink);
}

.vo-page .vo a {
  color: inherit;
}

.vo-wrap {
  box-sizing: border-box;
  width: min(1500px, 88vw);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .vo-wrap { width: min(1500px, 92vw); }
}

/* ------------------------------------------------------------------ pictures */

.vo-shot {
  position: relative;
  /* clip, not hidden: a hidden box can still be scrolled (scrollIntoView,
     find in page), which would slide the picture inside its window */
  overflow: clip;
  width: var(--sw, var(--w));
  height: var(--sh, var(--h));
  margin-inline: auto;
  /* --vo-corner: a picture's own corner where it has one (the welcome tour's
     window, measured by compose_vetero.py); a window cut out of a picture
     takes the page's radius back (windows.css) */
  border-radius: var(--vo-corner, var(--vo-radius));
  clip-path: inset(0 round var(--vo-corner, var(--vo-radius)));
}

/* A slot narrower than the picture shows a window of it (--sw wide, from
   --l across and --t down, --sh tall), never the picture shrunk: the
   windows are worked out so that no word is cut at their edges
   (compose_vetero.py) and written as container rules on the slot
   (windows.css, build_vetero.py). */
.vo-media,
.vo-card {
  container-type: inline-size;
}

.vo-shot > img,
.vo-shot > video {
  position: absolute;
  top: calc(-1 * var(--t, 0px));
  left: calc(-1 * var(--l, 0px));
  display: block;
  width: var(--w);
  height: var(--h);
  max-width: none;
  border-radius: inherit;
}

/* a slice of a settings pane, never wider than its card: the card's width
   on the site's light grey, the slice in its middle */
.vo-card .vo-shot--fill {
  width: 100%;
}

.vo-card .vo-shot--fill > img {
  left: calc((100% - var(--w)) / 2);
  top: calc((100% - var(--h)) / 2);
}

/* On the narrowest phones a row's picture is a little wider than the words'
   column, into the gutter, and never narrower than 314px, so a window that
   cuts no word always fits (compose_vetero.py) */
@media (max-width: 767px) {
  .vo-media {
    width: max(100%, min(100vw - 6px, 314px));
    justify-self: center;
  }
}

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

/* The hero is one window tall wherever the window can hold it, as on
   /horzono: the header, the popover and 2vmax above and below it (less than
   the site's small section padding, 3.3vmax, so the popover is drawn at
   1:1 in a 1440x900 window). The popover is drawn at 1:1, or smaller
   where the window is too short for that (never larger). From 768 up it
   stands at the page's right margin and hangs from the padding under the
   header, with the words beside it, centred on it; below 768 the words
   come first and the popover under them.

   The words and the popover are one composition, centred in the hero,
   64px apart from 768 up (the space between two of the site's widest
   columns at 1440 is 55px; a little more keeps the popover's shadow clear of
   the badge) and 3rem apart stacked below 768 (Adam, 2026-09-27: they had
   stood at the two margins with an empty middle).

   The wallpaper is macOS Tahoe's light desktop as the Mac draws it (the
   landscape video's resting frame, compose_vetero.py), drawn as macOS
   draws a desktop, to cover and centred, over the whole hero from the
   page's very top, under the announcement bar and the header, with nothing
   between: the words, the header's too, are white on it. A 1440x900 window
   shows what a 16:10 Mac's screen shows (the crest's arc, the sky and haze
   upper left, the navy trough low in the middle); a 16:9 one, the whole
   frame; a taller hero, a centred slice of it. The popover was captured
   over the square TahoeLight.heic's crest, so it reads a touch off the
   blue under it here. */
.vo-hero {
  --pad: 2vmax;
  --pop-w: min(var(--pw), calc((100svh - var(--vo-head) - 2 * var(--pad)) * var(--pw) / var(--ph)));
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--vo-head) + var(--pad));
  padding-bottom: var(--pad);
  overflow: hidden;
}

.vo-hero-bg {
  position: absolute;
  inset: 0;
}

.vo-hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

.vo-hero-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.vo-hero-words {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 34rem;
}

.vo-icon {
  display: block;
  width: 104px;
  height: 104px;
}

.vo-page .vo-hero h1 {
  margin: 0.1em 0 0;
  overflow-wrap: normal;
}

.vo-page .vo .vo-hero h1,
.vo-page .vo .vo-hero p.vo-lede {
  color: #fff;
  text-shadow: var(--vo-shadow);
}

.vo-page .vo-hero p.vo-lede {
  margin: 0.6em 0 1.6em;
  font-size: calc(var(--normal-text-size-value, 1.216) * 1rem * 1.2);
  line-height: 1.5;
}

.vo-hero-pop {
  flex: none;
}

.vo-hero-pop img {
  display: block;
  max-width: none;
  width: var(--pop-w);
  height: auto;
}

@media (min-width: 768px) {
  .vo-hero-in {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 64px;
    min-height: calc(100svh - var(--vo-head) - 2 * var(--pad));
  }
  .vo-hero-words {
    flex: 0 1 34rem;
    align-items: flex-start;
    text-align: left;
  }
  .vo-hero-pop {
    align-self: flex-start;
  }
  .vo-icon {
    width: 128px;
    height: 128px;
  }
}

@media (max-width: 767px) {
  .vo-hero {
    --pop-w: var(--pw);
  }
}

/* Apple's badge is one height at every width, the primary button's 59px,
   as /horzono's is; the Mac App Store's artwork is 3.9:1, so 230px wide. */
.vo-badge {
  display: block;
  flex: none;
  width: 230px;
  height: 59px;
}

.vo-badge img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------ rows */

/* A feature row: the words and the picture side by side from 768 up, the
   words centred on the picture (align-items), alternating sides; below 768
   the words, then the picture. */
.vo-row,
.vo-sky {
  padding-block: 6.6vmax;
}

.vo-row + .vo-row {
  padding-top: 0;
}

.vo-row-in {
  display: grid;
  gap: 2rem;
}

.vo-page .vo-words h2 {
  margin: 0 0 0.6em;
}

.vo-words p:last-child {
  margin-bottom: 0;
}

.vo-media {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

@media (min-width: 768px) {
  .vo-row-in {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    column-gap: 4vw;
  }
  /* the picture always has the wider column, whichever side it is on */
  .vo-row--left .vo-row-in,
  .vo-sky .vo-row-in {
    grid-template-columns: 7fr 5fr;
  }
  .vo-row--left .vo-words,
  .vo-sky .vo-words {
    order: 2;
  }
  .vo-row--left .vo-media,
  .vo-sky .vo-media {
    order: 1;
  }
}

.vo-plus {
  display: inline-block;
  margin-left: 0.25em;
  padding: 0 0.4em;
  border: 1px solid currentColor;
  border-radius: 5px;
  color: var(--vo-blue);
  font-size: 0.75em;
  line-height: 1.5;
  vertical-align: 0.1em;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ the reel */

/* One horizontal reel of cards, each a picture, a heading and a sentence,
   running off the page's right edge with a card partly showing there, as
   /batfi's (Adam, 2026-09-27; it replaced a grid of twelve). The reel is full
   bleed, its padding putting the first card on the text's left edge; it
   fades out at the right edge rather than stopping on a hard line, and at the
   left only once it is scrolled. No snapping, for /batfi's reason (snap and
   padding resolve percentages against different boxes). Its scrollbar is
   hidden; the buttons under it, the trackpad, shift and the wheel, touch and
   the keyboard (each card is a Tab stop) scroll it. */
.vo-cards {
  padding-block: 3.3vmax 6.6vmax;
  overflow-x: clip;
}

.vo-reel {
  --vo-reel-pad: max(20px, calc(50vw - 50%));
  /* the fade at the right edge: 120px, and on a phone a tenth of the
     window, so it lies over the next card and not the first card's words */
  --vo-reel-fade: min(120px, 10vw);
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--vo-reel-pad);
  /* room for a focused card's ring and the pictures' corners */
  padding-block: 4px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--vo-reel-pad),
      #000 calc(100% - var(--vo-reel-fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--vo-reel-pad),
      #000 calc(100% - var(--vo-reel-fade)), transparent 100%);
  scrollbar-width: none;
}

.vo-reel::-webkit-scrollbar {
  display: none;
}

.vo-page .vo ul.vo-reel-cards {
  flex: none;
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .vo-page .vo ul.vo-reel-cards { gap: 20px; }
}

/* A card is as wide as its picture at 1:1, 500px, narrower on a phone, and
   never narrower than 306px, the settings slices' width, so a window that
   cuts no word always fits (compose_vetero.py); on a phone the next card
   shows about 40px at the edge (44 at 390, 14 at 320). */
.vo-page .vo ul.vo-reel-cards > li.vo-card {
  flex: 0 0 clamp(306px, calc(100vw - 88px), 500px);
  margin: 0;
  padding: 0;
  border-radius: var(--vo-radius);
  outline: none;
}

.vo-page .vo ul.vo-reel-cards > li.vo-card:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vo-blue);
}

.vo-card .vo-shot {
  height: 240px;
  margin-block: 0 1.2rem;
}

.vo-page .vo .vo-cards h3 {
  margin: 0 0 0.4em;
  font-size: calc(var(--heading-4-size-value, 1.6) * 1rem);
  line-height: 1.2;
}

.vo-page .vo .vo-cards p {
  margin: 0;
  max-width: 30rem;
}

/* The two buttons: /batfi's pattern in this page's colours, right aligned
   under the reel, the site's 7.2px button radius. */
.vo-reel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 2rem;
}

.vo-reel-nav[hidden] {
  display: none;
}

.vo-reel-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.65rem;
  height: 3.65rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--vo-line);
  border-radius: 7.2px;
  background: #f4f4f3;
  color: var(--vo-ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.vo-reel-nav svg {
  display: block;
  width: 16px;
  height: 16px;
}

@media (hover: hover) {
  .vo-reel-nav button:not(:disabled):hover {
    background: #e4e4e2;
  }
}

.vo-reel-nav button:active:not(:disabled) {
  transform: translateY(1px);
}

.vo-reel-nav button:focus-visible {
  outline: 2px solid var(--vo-blue);
  outline-offset: 3px;
}

.vo-reel-nav button:disabled {
  color: #767676;
  opacity: 0.6;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .vo-reel-nav button {
    transition: none;
  }
}

/* ------------------------------------------------------------------ sky */

/* the welcome tour's sky on Tahoe's blue: white words, 5.2:1 */
.vo-sky {
  background: var(--vo-blue);
}

.vo-page .vo .vo-sky h2,
.vo-page .vo .vo-sky p {
  color: #fff;
}

.vo-shot--video {
  background: #1b2330;
}

/* ------------------------------------------------------------------ Plus */

.vo-plus-sec {
  padding-block: 6.6vmax;
}

.vo-page .vo .vo-plus-sec h2 {
  margin: 0 0 0.6em;
}

.vo-page .vo p.vo-plus-line {
  max-width: 44rem;
  margin: 0 0 2rem;
}

.vo-page .vo ul.vo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
}

@media (min-width: 740px) {
  .vo-page .vo ul.vo-list { grid-template-columns: repeat(2, 1fr); }
}

.vo-page .vo ul.vo-list li {
  margin: 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--vo-line);
  line-height: var(--body-font-line-height, 1.6);
}

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

/* The closing band and the footer are one section on the wallpaper, as on
   /horzono: its calm upper left, the sky going from blue to the pale gold of
   the horizon (compose_vetero.py), drawn to cover the pair and anchored at
   its foot, so the footer always lies on the gold. Words, badge and footer
   are black on it, the footer's icons the site's grey; each measured in
   Chrome, the lightest and darkest 5% under every glyph box, at 1920, 1440,
   1024, 768 and 390 (visual_audit.mjs). */
.vo-closing {
  position: relative;
  overflow: hidden;
}

.vo-closing-bg {
  position: absolute;
  inset: 0;
}

.vo-closing-bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 30% 100%;
}

.vo-band {
  position: relative;
  padding-block: 10vmax 4vmax;
  text-align: center;
}

.vo-band .vo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vo-page .vo .vo-band h2 {
  margin: 0 0 0.9em;
}

.vo-page .vo .vo-band p {
  margin: 1.2em 0 0;
}

.vo-page .vo .vo-band p + p {
  margin-top: 0.4em;
}

.vo-page .vo .vo-band a:not(.vo-badge) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.vo-closing > .vo-foot {
  position: relative;
}

.vo-foot .vo-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 160px;
}

@media (min-width: 768px) {
  .vo-foot .vo-wrap {
    min-height: calc(min(1500px, 92vw) * 0.0645 + 22px);
  }
}

.vo-page .vo a.vo-foot-mark {
  font-family: var(--site-title-font-font-family, "Lily Script One"), cursive;
  font-size: calc(0.012 * min(100vh, 900px) + 1rem);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--vo-ink);
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 768px), (orientation: landscape) {
  .vo-page .vo a.vo-foot-mark {
    font-size: min(calc(1.2vw + 1rem), max(calc(0.012 * 1440px + 1rem), 2rem));
  }
}

.vo-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
}

.vo-page .vo .vo-social li {
  margin: 0;
  padding: 0;
  border: 0;
}

/* grey at rest, black under the pointer and on keyboard focus, as on every
   footer of the site */
.vo-page .vo .vo-social a {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--vo-foot-icon, #595959);
  text-decoration: none;
  transition: color 0.15s ease;
}

.vo-page .vo .vo-social a:hover,
.vo-page .vo .vo-social a:focus-visible {
  color: var(--vo-ink);
}

@media (prefers-reduced-motion: reduce) {
  .vo-page .vo .vo-social a {
    transition: none;
  }
}

.vo-social svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}