/* Layout glue for the stitched page (README.md, "How the page is stitched").
   Inversa laid its page out as a fixed <main> holding a fixed, scrolling div (.scroll). The stitched
   page scrolls the window instead, so those boxes become normal flow. `overflow: clip` (not hidden)
   keeps the original clipping without creating a scroll container, so every position:sticky scene
   (hero, system-cycle, Aaru how) still sticks to the viewport. */
#__nuxt main {
  position: relative;
  inset: auto;
  overflow: clip;
}
#__nuxt .scroll[data-v-e0515711] {
  position: relative;
  inset: auto;
  overflow: clip;
}
#__nuxt .content[data-v-e0515711] {
  contain: none;
}

/* Header: the "Open app" button sits next to the menu button and reuses its styles
   (class .menu-button + the MenuButton scope attribute, set in build/patches.mjs). */
#__nuxt .header .lev-actions {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--font-s));
}
#__nuxt .header .lev-open-app {
  text-decoration: none;
}

/* Footer: the CTA heading's top line is the LEVERAGED wordmark (same font and colour as the
   heading it replaces, set larger); the logo slot is a text wordmark; the mailing-list slot
   holds the risk notice. */
#__aaru .footer .lev-wordmark {
  font-weight: 500;
  font-size: 2.6rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
#__aaru .footer .lev-risk-text {
  margin-top: 1.2rem;
  max-width: 36rem;
  font-size: 1.6rem;
  line-height: 1.35;
}
#__aaru .footer .top .split-title > span:first-child {
  display: block;
  font-size: min(12.5vw, 19rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin-bottom: 0.12em;
  margin-left: -0.05em;
}

/* ---- LEVERAGED brand (lendshare/brand/BRAND.md) ---------------------------------------------
   The mark is /brand/mark.svg used as a mask, so it takes the text colour of wherever it sits
   (the header switches creme / black over light sections). Mark aspect is 700 x 640. */
:root {
  --lev-mark: url(/brand/mark.svg);
}
.lev-mark-mask,
#__aaru .footer .lev-wordmark::before,
#__aaru .footer .top .split-title > span:first-child::before {
  content: "";
  display: inline-block;
  flex: none;
  aspect-ratio: 700 / 640;
  background: currentColor;
  -webkit-mask: var(--lev-mark) center / contain no-repeat;
  mask: var(--lev-mark) center / contain no-repeat;
}

/* Header: Inversa's corner-to-corner header is replaced by the floating pill (#lev-bar, build.mjs) */
#__nuxt .header[data-v-4c41aba7] {
  display: none !important;
}

/* Footer: the small logo, and the giant wordmark with the mark in front of it */
#__aaru .footer .lev-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
#__aaru .footer .lev-wordmark::before {
  height: 0.8em;
}
#__aaru .footer .top .split-title > span:first-child {
  white-space: nowrap;
  font-size: min(10.4vw, 16rem); /* smaller than the text-only wordmark: the mark now sits in front */
  margin-left: 0;
}
#__aaru .footer .top .split-title > span:first-child::before {
  height: 0.7em;
  margin-right: 0.12em;
  vertical-align: -0.02em;
}
/* the footer's 14rem top margin let the page wrapper's own tone (#0B0B0D dark / #F4F4F2 light) show as a band
   between the black cases rail and the footer; the cases rail's own 100px bottom padding is the gap now */
#__aaru .footer[data-v-741d0d1c] { margin-top: 0; }

/* footer photo: a <picture> in the old <img>'s place (build/patches.mjs) */
#__aaru .footer picture.bg {
  display: block;
}
#__aaru .footer picture.bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section markers: the blinking lime squares become a small chevron pair, still */
#__nuxt .title[data-v-e3dfbc2d]::before,
#__nuxt [data-v-ad5b1d06] .component .title::before,
#__nuxt .subtitle[data-v-2b7efdfb]::before {
  animation: none;
  background: currentColor;
  -webkit-mask: var(--lev-mark) center / contain no-repeat;
  mask: var(--lev-mark) center / contain no-repeat;
  width: calc(0.8 * var(--font-s));
  height: calc(0.73 * var(--font-s));
}
#__nuxt [data-v-ad5b1d06] .component .title::before,
#__nuxt .subtitle[data-v-2b7efdfb]::before {
  background: #7b8cff;
}
@media (min-width: 601px) {
  #__nuxt .title[data-v-e3dfbc2d]::before,
  #__nuxt [data-v-ad5b1d06] .component .title::before,
  #__nuxt .subtitle[data-v-2b7efdfb]::before {
    width: calc(0.9 * var(--font-s));
    height: calc(0.82 * var(--font-s));
  }
}

/* "In the app" cards: our overlays are full-card transparent images (media-src/compose.py), so the
   source's per-mockup frosted box and blend are not used */
#__nuxt .slide[class*="is-mock-"] .background {
  display: none;
}
#__nuxt .slide[class*="is-mock-"] .img {
  mix-blend-mode: normal;
}

/* ---- Brand opening (#lev-loader, every load, build.mjs): the closed X (two chevrons tip to tip) on one
   black cover. It holds until the page has loaded; then (.lev-go) the cover fades as one piece and the X,
   still one piece, grows onto the hero drawing and fades into it (~0.85 s). The header's small mark settles
   last. Never takes pointer events. Inversa's own loader still runs underneath but is not shown. */
#__nuxt .loader {
  opacity: 0 !important;
}
#lev-loader {
  --lev-s: clamp(96px, 10vw, 176px);
  --lev-ease: cubic-bezier(0.76, 0, 0.24, 1);
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
}
#lev-loader .lev-door {
  position: absolute;
  inset: 0;
  background: #000;
}
#lev-loader.lev-go .lev-door {
  animation: lev-lift 0.8s cubic-bezier(0.33, 0, 0.2, 1) 0.1s both;
}
@keyframes lev-lift {
  to { opacity: 0; }
}
#lev-loader .lev-open-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--lev-s);
  aspect-ratio: 700 / 640;
  margin: calc(var(--lev-s) * -0.4571) 0 0 calc(var(--lev-s) * -0.5);
  color: #f2f2f2;
  /* each chevron is 43.5 % of the mark wide with a 10.8 % gap: moving both 5.4 % inwards closes it, tip to tip */
  --sh: calc(var(--lev-s) * 0.054);
  transform: translateX(var(--sh));
  transform-origin: 50% 51%;
  will-change: transform, opacity;
  animation: lev-press 0.35s ease-out both;
}
#lev-loader .lev-open-r {
  --sh: calc(var(--lev-s) * -0.054);
}
/* both chevrons get the same move, so the X stays one piece; the script sets --cx / --ly / --k from the hero
   drawing (the middle of its two breakwater tips); without them the X just grows and fades in place */
#lev-loader.lev-go .lev-open-mark {
  animation: lev-open 0.85s var(--lev-ease) both, lev-ink 0.35s linear 0.05s both;
}
@keyframes lev-open {
  from { transform: translate(0px, 0px) scale(1) translateX(var(--sh)); }
  55% { opacity: 1; }
  to { transform: translate(var(--cx, 0px), var(--ly, 0px)) scale(var(--k, 1.6)) translateX(var(--sh)); opacity: 0; }
}
@keyframes lev-ink {
  to { color: var(--lev-ink); }
}
#lev-loader .lev-chev {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
@keyframes lev-press {
  from { opacity: 0; scale: 0.86; }
}
.lev-opening:not(.lev-go) .lev-bar-mark {
  opacity: 0;
}
.lev-opening.lev-go .lev-bar-mark {
  animation: lev-settle 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
@keyframes lev-settle {
  from { opacity: 0; transform: translateX(0.4em) scale(0.6); }
}

/* ---- App tour (section.software): each step is one screen, its card fits the screen (it was
   97.2 x 84.2 rem, taller than any wide desktop screen), label + text sit centred beside it */
@media (min-width: 601px) {
  #__nuxt .software .block[data-v-148f49f8] {
    min-height: 100svh;
    margin: 0;
  }
  #__nuxt .software .assets[data-v-148f49f8] {
    flex: none;
    height: min(calc(97.2 * var(--font-s)), calc(100svh - 16 * var(--font-s)));
    width: auto;
    aspect-ratio: 842 / 972;
  }
  #__nuxt .software .head[data-v-148f49f8] {
    padding-bottom: calc(4 * var(--font-s));
  }
}
/* the recordings end in the app's own footer: fade the card's lower part to black, where the
   callout card sits */
#__nuxt .software .assets[data-v-148f49f8]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 50%, rgb(0 0 0 / 0.85) 72%, #000 86%);
}
#__nuxt .software .video[data-v-148f49f8] {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Hero photo of the origin-demo scene ("Real-time yield for your USDG."), replacing the
   dithered map (build/patches.mjs): 16 % overscan for the scroll parallax (boot.js), a tone pass
   (darker towards the headline, cobalt-tinted shadows) and a fine moving film grain */
#__nuxt .origin-demo .lev-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #05060b;
}
#__nuxt .origin-demo .lev-hero-photo {
  position: absolute;
  left: 0;
  right: 0;
  top: -8%;
  height: 116%;
  display: block;
  will-change: transform;
}
#__nuxt .origin-demo .lev-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.06) brightness(0.8);
}
#__nuxt .origin-demo .lev-tone,
#__nuxt .origin-demo .lev-tone::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#__nuxt .origin-demo .lev-tone {
  background:
    radial-gradient(ellipse 58% 42% at 50% 50%, rgb(3 4 12 / 0.62), rgb(3 4 12 / 0.28) 62%, rgb(3 4 12 / 0) 100%),
    linear-gradient(to bottom, rgb(3 4 12 / 0.55), rgb(3 4 12 / 0) 28%, rgb(3 4 12 / 0) 62%, rgb(3 4 12 / 0.7));
}
#__nuxt .origin-demo .lev-tone::before {
  content: "";
  background: #16207a;
  mix-blend-mode: lighten;
  opacity: 0.32;
}
#__nuxt .origin-demo .lev-grain {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: lev-grain 1s steps(8) infinite;
}
@keyframes lev-grain {
  0% { transform: translate(0, 0); }
  12% { transform: translate(-7%, 4%); }
  25% { transform: translate(5%, -6%); }
  37% { transform: translate(-3%, 8%); }
  50% { transform: translate(8%, 2%); }
  62% { transform: translate(-8%, -3%); }
  75% { transform: translate(3%, 7%); }
  87% { transform: translate(-5%, -8%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #__nuxt .origin-demo .lev-grain {
    animation: none;
  }
  #__nuxt .origin-demo .lev-hero-photo {
    transform: none !important;
  }
}

/* ---- Scroll scene under the hero (section.home-hero, "Your USDG. Their buying power. Your yield."): the motion
   is the original's (pinned for 400svh; the picture pans, the frame closes to a window and opens again while the
   three slides pass). Only the look changes: two pencil drawings instead of photos, shown the right way up, a
   plain rounded window instead of the pixel-stepped one, no dot pattern, grid, hotspots or grey filter, and text
   that fades before it reaches the header. */
#__nuxt .home-hero .wrapper[data-v-0ae0c188] { background-image: none; }
#__nuxt .home-hero :is(.raster, .grid-svg, .hotspots-svg, .filter, .hotspot, .specialist)[data-v-0ae0c188] { display: none !important; }
#__nuxt .home-hero .img[data-v-0ae0c188] { transform: none; }
#__nuxt .home-hero .mask[data-v-0ae0c188] {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 701'%3E%3Crect width='1030' height='701' rx='22' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 701'%3E%3Crect width='1030' height='701' rx='22' fill='%23000'/%3E%3C/svg%3E");
}
/* portrait screens: the window keeps a phone's shape (the landscape one left a thin strip between two voids) */
@media (max-aspect-ratio: 1/1) {
  #__nuxt .home-hero .mask[data-v-0ae0c188] {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 1300'%3E%3Crect width='600' height='1300' rx='22' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 1300'%3E%3Crect width='600' height='1300' rx='22' fill='%23000'/%3E%3C/svg%3E");
  }
}
#__nuxt .home-hero[data-v-0ae0c188] { background: var(--lev-paper-2); color: var(--lev-ink); }
#__nuxt .home-hero .overlay[data-v-0ae0c188] { background: var(--lev-paper); }
#__nuxt .home-hero .title[data-v-0ae0c188] { color: var(--lev-accent); }
#__nuxt .home-hero .progress[data-v-0ae0c188] { background: var(--lev-accent); }
#__nuxt .home-hero .indicator[data-v-0ae0c188] { background: var(--lev-faint); color: var(--lev-ink); }
#__nuxt .home-hero :is(.text, .heading)[data-v-0ae0c188] { color: var(--lev-ink); }
/* the drawings are graphite on dark paper (#0b0b0d, the dark page); in light mode the picture is inverted to
   graphite on the light paper (#f4f4f2), so the hero and the scene are one drawing on one sheet */
@media (prefers-color-scheme: light) {
  #__nuxt .home-hero .map[data-v-0ae0c188] { filter: invert(1) hue-rotate(180deg); }
}
/* each slide's text sits on its own dark plate, so strokes never run through the letters; boot.js fades it out
   before it slides under the pill header */
#__nuxt .home-hero .slide .content[data-v-0ae0c188] {
  padding: calc(1.6 * var(--font-s)) calc(2 * var(--font-s));
  border-radius: 14px;
  background: color-mix(in srgb, var(--lev-paper) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#__nuxt .home-hero .slide:first-child .heading[data-v-0ae0c188] { margin-bottom: calc(1.2 * var(--font-s)); }

/* ---- Section colours: the hero and the scroll scene are one sheet in the page tone (light or dark); every
   section below keeps the mirrors' own backgrounds (values creme, system-cycle and origin-demo #181815,
   software on the scroll wrapper's #13140E, how / featured / cases #000, the Aaru footer's own), as at
   f3d9a48. The owner's rule (26 Sep): never change an original section's background unless the owner names it;
   the notched cards in system-cycle have cutouts painted in #181815 and only blend on the original band. */
html,
body,
#__nuxt,
#__nuxt main.main {
  background: var(--lev-page) !important;
}
/* 390: the last tour step's bottom margin (62px) collapsed through the software section; the section contains
   its margins so the steps' spacing stays inside it */
#__nuxt .software[data-v-148f49f8] { display: flow-root; }
/* "One click to 3x buying power": the original Inversa scrub (windows, connector lines, moving node, pulse,
   hotspots) kept as is, re-skinned. The band is the page's own tone; the windows keep the original dark card (the videos' own #161714 ground);
   cobalt only on the pulse, one hotspot, the step title and the progress bar. The pencil water stays in the
   hero and the scroll scene; the band keeps the source's topographic map (.pattern, media-src/make-art.py) and
   its motion. */
#__nuxt .system-cycle .invasive-hotspots-svg[data-v-2b7efdfb] circle:nth-of-type(18) { fill: #7b8cff; }
#__nuxt .system-cycle .title[data-v-2b7efdfb],
#__nuxt .system-cycle .effect-pulse[data-v-2b7efdfb] { color: #7b8cff; }
#__nuxt .system-cycle .progress[data-v-2b7efdfb] { background: #7b8cff; }
/* the headline sits on the steps' content column (the blocks' 8.3 font-s padding), not at the viewport edge */
@media (min-width: 601px) {
  #__nuxt .system-cycle .heading[data-v-2b7efdfb] { left: calc(8.3 * var(--font-s)); }
}
#__nuxt .software .title[data-v-148f49f8] { color: #7b8cff; }
#__nuxt .origin-demo[data-v-369a8a9b] { border-bottom: 0; margin-bottom: 0 !important; }
/* the photo slide's headline sits in the lower third, just above the fade, so the scene's end has no empty
   half-screen under its buttons */
#__nuxt .origin-demo .slide[data-v-369a8a9b]:has(.lev-hero-media) { justify-content: flex-end; padding-bottom: 30svh; box-sizing: border-box; }
/* the yield photo melts into the black "how" band below it, so the scene ends in one piece */
#__nuxt .origin-demo .lev-hero-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.72) 55%, #000);
  pointer-events: none;
}
#__aaru .how .layout[data-v-2ceb9590] { padding-top: 10rem; }
@media (max-width: 767.98px) {
  #__aaru .how .layout[data-v-2ceb9590] { padding-top: 8rem; }
}

/* section seams: the sections' own edges (system-cycle keeps the source's own top / bottom borders); the
   hand-drawn wave lines were removed on 26 Sep 2026. */
#__nuxt .home-hero[data-v-0ae0c188],
#__nuxt .values[data-v-9ef87c4b],
#__nuxt .system-cycle[data-v-2b7efdfb],
#__nuxt .software[data-v-148f49f8],
#__aaru .how[data-v-2ceb9590] {
  position: relative;
}

/* the water: one faint pencil tile over the hero, the bridge seam and the scroll scene only (boot.js sizes it to
   the scene's bottom), fading out over its last 150 px; every section below has its plain background. Ink tile
   in light, white tile in dark, no blend or filter. The inner layer is moved by transform so the water scrolls
   at a third of the page's speed; its ::before drifts slowly. */
.lev-water-page {
  position: absolute;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  height: var(--lev-water-h, 400svh);
  overflow: hidden;
  pointer-events: none;
  opacity: 0.05;
  -webkit-mask: linear-gradient(#000 calc(100% - 150px), transparent);
  mask: linear-gradient(#000 calc(100% - 150px), transparent);
}
.lev-water-in {
  position: absolute;
  inset: -480px -240px;
  will-change: transform;
}
.lev-water-in::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/media/water-tile.svg) 0 0 / 480px 480px repeat;
  will-change: transform;
  animation: lev-water-drift 60s linear infinite alternate;
}
@media (prefers-color-scheme: dark) {
  .lev-water-page { opacity: 0.06; }
  .lev-water-in::before { background-image: url(/media/water-tile-dark.svg); }
}
@keyframes lev-water-drift {
  to { transform: translate3d(120px, 0, 0); }
}

/* ---- Cases rail: our photos, not the reference's live 3D shapes (teapot, rings) drawn over them */
#__aaru .card .image .live[data-v-336ab4d4] {
  display: none !important;
}
#__aaru .card .image img[data-v-336ab4d4] {
  opacity: 1 !important;
}

/* ---- Cases rail: live pencil drawings in the cards (scripts/pencil-art.py case-*, boot.js section 10) on the
   card's dark surface, graphite ink and one Cobalt accent. They draw themselves in once when the card comes on
   screen, then loop gently on their own composited layers (transform / opacity only); off screen they pause. */
#__aaru .card .image.has-lev-art img[data-v-336ab4d4] { visibility: hidden; }
.lev-case-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #111113;
  color: #e8e8e2;
  pointer-events: none;
}
.lev-case-art svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.lev-case-art :is(.p, .q) { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.lev-case-art .p.acc,
.lev-case-art .q.acc { stroke: #7b8cff; stroke-opacity: 1; }
.lev-case-art .q { stroke-width: 0.62; }
.lev-case-art .q.lt { stroke-width: 0.52; }
.lev-case-art .q0 { stroke-opacity: 0.62; }
.lev-case-art .q1 { stroke-opacity: 0.46; }
.lev-case-art .q2 { stroke-opacity: 0.32; }
.lev-case-art .lev-ca-l { will-change: transform, opacity; backface-visibility: hidden; }
.lev-case-art.is-armed :is(.p, .q) { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.lev-case-art.is-armed.is-drawn :is(.p, .q) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset calc(var(--t, 1.2) * 1s) cubic-bezier(0.4, 0.1, 0.5, 1) calc(var(--d, 0) * 1s);
}
/* the loops start once the drawing is done (its longest stroke ends ~2.6 s in) */
.lev-case-art { --lev-ca-in: 2.6s; }
.lev-case-art.is-drawn .lev-ca-water { animation: lev-ca-shimmer 8s ease-in-out var(--lev-ca-in) infinite alternate; }
.lev-case-art.is-drawn .lev-ca-drop { animation: lev-ca-drop 4.8s cubic-bezier(0.5, 0, 0.7, 1) var(--lev-ca-in) infinite both; }
.lev-case-art.is-drawn :is(.lev-ca-ripple0, .lev-ca-ripple1, .lev-ca-ripple2) { opacity: 0; animation: lev-ca-ripple 4.8s ease-out infinite both; }
.lev-case-art.is-drawn .lev-ca-ripple0 { animation-delay: calc(var(--lev-ca-in) + 1.45s); }
.lev-case-art.is-drawn .lev-ca-ripple1 { animation-delay: calc(var(--lev-ca-in) + 2.05s); }
.lev-case-art.is-drawn .lev-ca-ripple2 { animation-delay: calc(var(--lev-ca-in) + 2.65s); }
.lev-case-borrow.is-drawn .lev-ca-boat { animation: lev-ca-ahead 5s ease-in-out var(--lev-ca-in) infinite alternate; }
.lev-case-borrow.is-drawn .lev-ca-crest { animation: lev-ca-trail 2.6s linear var(--lev-ca-in) infinite; }
.lev-case-art.is-drawn .lev-ca-rope0 { animation: lev-ca-sway 4.2s ease-in-out var(--lev-ca-in) infinite alternate; }
.lev-case-art.is-drawn .lev-ca-rope1 { animation: lev-ca-sway 4.2s ease-in-out calc(var(--lev-ca-in) - 1.4s) infinite alternate; }
.lev-case-art.is-drawn .lev-ca-rope2 { animation: lev-ca-sway 4.2s ease-in-out calc(var(--lev-ca-in) - 2.8s) infinite alternate; }
.lev-case-rates.is-drawn .lev-ca-level { animation: lev-ca-level 6s ease-in-out var(--lev-ca-in) infinite alternate; }
.lev-case-reserve.is-drawn .lev-ca-level { animation: lev-ca-level 7s ease-in-out var(--lev-ca-in) infinite alternate-reverse; }
.lev-case-reserve.is-drawn .lev-ca-swell { animation: lev-ca-swell 6s ease-in-out var(--lev-ca-in) infinite alternate; }
.lev-case-liquidation.is-drawn .lev-ca-wave { animation: lev-ca-wave 5s ease-in var(--lev-ca-in) infinite both; }
.lev-case-liquidation.is-drawn .lev-ca-spray { opacity: 0; animation: lev-ca-spray 5s ease-out var(--lev-ca-in) infinite both; }
.lev-case-withdrawals.is-drawn .lev-ca-gate-l { animation: lev-ca-gate-l 8s ease-in-out var(--lev-ca-in) infinite both; }
.lev-case-withdrawals.is-drawn .lev-ca-gate-r { animation: lev-ca-gate-r 8s ease-in-out var(--lev-ca-in) infinite both; }
.lev-case-withdrawals.is-drawn .lev-ca-boat { animation: lev-ca-out 8s ease-in-out var(--lev-ca-in) infinite both; }
.lev-case-art.is-paused .lev-ca-l { animation-play-state: paused !important; }
@keyframes lev-ca-shimmer { from { transform: translate3d(-0.6%, 0, 0); } to { transform: translate3d(0.6%, 0, 0); } }
@keyframes lev-ca-drop {
  0% { transform: translate3d(0, -22%, 0); opacity: 0; }
  8% { opacity: 1; }
  30% { transform: translate3d(0, 0, 0); opacity: 1; }
  42% { transform: translate3d(0, 1%, 0); opacity: 0; }
  100% { transform: translate3d(0, 1%, 0); opacity: 0; }
}
@keyframes lev-ca-ripple {
  0% { transform: scale(0.45); opacity: 0; }
  10% { opacity: 0.9; }
  60% { opacity: 0.35; }
  80%, 100% { transform: scale(1.7); opacity: 0; }
}
@keyframes lev-ca-ahead { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(1.6%, -2.1%, 0); } }
@keyframes lev-ca-trail {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  100% { transform: translate3d(-3.2%, 4.1%, 0); opacity: 0.1; }
}
@keyframes lev-ca-sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
@keyframes lev-ca-level { from { transform: translate3d(0, 2.6%, 0); } to { transform: translate3d(0, -2.6%, 0); } }
@keyframes lev-ca-swell { from { transform: translate3d(-2%, 0.5%, 0); } to { transform: translate3d(2%, -0.5%, 0); } }
@keyframes lev-ca-wave {
  0% { transform: translate3d(-2.4%, 7%, 0); opacity: 0; }
  20% { opacity: 1; }
  60% { transform: translate3d(0, 0, 0); opacity: 1; }
  78%, 100% { transform: translate3d(0.4%, -1.2%, 0); opacity: 0; }
}
@keyframes lev-ca-spray {
  0%, 56% { transform: translate3d(0, 0, 0); opacity: 0; }
  64% { opacity: 1; }
  90%, 100% { transform: translate3d(0, -3%, 0); opacity: 0; }
}
@keyframes lev-ca-gate-l { 0%, 22% { transform: rotate(0); } 40%, 84% { transform: rotate(72deg); } 98%, 100% { transform: rotate(0); } }
@keyframes lev-ca-gate-r { 0%, 22% { transform: rotate(0); } 40%, 84% { transform: rotate(-72deg); } 98%, 100% { transform: rotate(0); } }
@keyframes lev-ca-out {
  0%, 40% { transform: translate3d(0, 0, 0); opacity: 1; }
  74% { transform: translate3d(0, 24%, 0); opacity: 1; }
  80% { transform: translate3d(0, 28%, 0); opacity: 0; }
  81% { transform: translate3d(0, -4%, 0); opacity: 0; }
  96%, 100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
/* desktop: the pinned rail (boot.js sets the sticky offsets); the section grows by the sideways distance */
#__aaru .cases.lev-pinned[data-v-351521c8]::after { content: ""; display: block; height: var(--lev-pin-d, 0px); }
#__aaru .cases.lev-pinned.is-dragging { cursor: grabbing; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .lev-case-art .lev-ca-l { animation: none !important; }
}

/* ---- Top of the page: our own hero and the floating pill header (markup: build/build.mjs) ------------
   Both sit outside the two Nuxt apps and follow the system light / dark setting (BRAND.md tokens). The
   hero is a pencil drawing (scripts/pencil-art.py -> assets/art/harbour.svg, inlined) under a centred
   headline. The pill is the LEVERAGED app's header (lendshare/app/src/routes/+layout.svelte): inset 24px
   from the top (16px on phones), 52px tall, radius 12, blur 24, no border, no shadow in dark. */
@font-face { font-family: "Lev Sans"; src: url(/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lev Sans"; src: url(/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lev Sans"; src: url(/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
html,
body {
  margin: 0;
}
:root {
  /* the page palette (report 26 Sep): paper for the pencil sections, cobalt ink for two feature bands, night
     only for the examples and risks */
  --lev-page: #f4f4f2;
  --lev-paper: #f4f4f2;
  --lev-paper-2: #e9e9e5;
  --lev-cobalt-ink: #0b1230;
  --lev-night: #0a0a0b;
  --lev-ink: #0a0a0b;
  --lev-muted: rgba(10, 10, 11, 0.62);
  --lev-faint: rgba(10, 10, 11, 0.45);
  --lev-fill-2: rgba(10, 10, 11, 0.07);
  --lev-accent: #2e4bff;
  --lev-accent-ink: #ffffff;
  --lev-bar-bg: rgba(243, 244, 246, 0.72);
  --lev-bar-link: rgba(10, 10, 11, 0.68);
  --lev-sheet: #ffffff;
  --lev-sheet-shadow: 0 1px 2px rgba(10, 10, 11, 0.05), 0 28px 60px -30px rgba(10, 10, 11, 0.34);
  --lev-sans: "Lev Sans", "Hanken Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lev-page: #0b0b0d;
    --lev-paper: #0b0b0d;
    --lev-paper-2: #000000;
    --lev-night: #000000;
    --lev-ink: #f2f2f2;
    --lev-muted: rgba(242, 242, 242, 0.62);
    --lev-faint: rgba(242, 242, 242, 0.42);
    --lev-fill-2: rgba(255, 255, 255, 0.08);
    --lev-accent: #7b8cff;
    --lev-accent-ink: #000000;
    --lev-bar-bg: rgba(255, 255, 255, 0.06);
    --lev-bar-link: rgba(242, 242, 242, 0.7);
    --lev-sheet: #161616;
    --lev-sheet-shadow: none;
  }
  /* over the creme sections the dark glass would put light text on a light ground: use the light pill */
  .lev-bar.is-over-light-never {
    --lev-ink: #0a0a0b;
    --lev-fill-2: rgba(10, 10, 11, 0.07);
    --lev-accent: #2e4bff;
    --lev-accent-ink: #ffffff;
    --lev-bar-bg: rgba(243, 244, 246, 0.72);
    --lev-bar-link: rgba(10, 10, 11, 0.68);
  }
}
/* the pill */
.lev-bar {
  position: fixed;
  z-index: 60;
  top: calc(24px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 48px);
  font-family: var(--lev-sans);
  -webkit-font-smoothing: antialiased;
}
.lev-bar-in {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 4px 4px 4px 20px;
  border-radius: 12px;
  background: var(--lev-bar-bg);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: var(--lev-ink);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.lev-bar a {
  color: inherit;
  text-decoration: none;
}
.lev-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 128px;
}
.lev-bar-mark {
  display: block;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--lev-mark) center / contain no-repeat;
  mask: var(--lev-mark) center / contain no-repeat;
}
.lev-word {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.lev-links {
  display: flex;
  gap: 6px;
  margin-left: 24px;
}
.lev-links a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--lev-bar-link);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.lev-links a:hover,
.lev-links a:focus-visible {
  color: var(--lev-ink);
  background: var(--lev-fill-2);
}
.lev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-family: var(--lev-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.lev-btn:active {
  transform: translateY(1px);
}
.lev-btn-accent {
  background: var(--lev-accent);
  color: var(--lev-accent-ink) !important;
}
.lev-btn-accent:hover {
  background: color-mix(in srgb, var(--lev-accent) 88%, var(--lev-ink));
}
.lev-btn-quiet {
  background: var(--lev-fill-2);
  color: var(--lev-ink) !important;
}
.lev-btn-quiet:hover {
  background: color-mix(in srgb, var(--lev-ink) 12%, transparent);
}
.lev-bar-cta {
  margin-left: 24px;
}
.lev-burger {
  display: none;
}
.lev-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--lev-sheet);
  box-shadow: var(--lev-sheet-shadow);
  animation: lev-drop 0.25s ease-in-out both;
}
.lev-menu a {
  display: flex;
  justify-content: center;
  padding: 9px 0;
  border-radius: 8px;
  color: var(--lev-ink);
  font-size: 17px;
  font-weight: 500;
}
.lev-menu a:hover {
  background: var(--lev-fill-2);
}
.lev-menu[hidden] {
  display: none;
}
@keyframes lev-drop {
  from { opacity: 0; transform: translateY(-6px); }
}
@media (max-width: 991px) {
  .lev-bar {
    left: 24px;
    right: 24px;
    transform: none;
    width: auto;
    max-width: none;
  }
  .lev-bar-in {
    padding: 4px;
  }
  .lev-brand {
    min-width: 0;
    padding: 0 10px;
  }
  .lev-links {
    display: none;
  }
  .lev-bar-cta {
    margin-left: auto;
  }
  .lev-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--lev-ink);
    cursor: pointer;
  }
  .lev-burger span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  .lev-bar.is-open .lev-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .lev-bar.is-open .lev-burger span:nth-child(2) { opacity: 0; }
  .lev-bar.is-open .lev-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 479px) {
  .lev-bar {
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: 16px;
    right: 16px;
  }
  .lev-word {
    display: none;
  }
}

/* the hero's one button (27 Sep: replaced the deposit card); 56 px tall, which --lev-copy-h counts */
.lev-hero-cta {
  display: flex;
  justify-content: center;
  height: 56px;
  margin: clamp(18px, 2.6svh, 28px) auto 0;
}
.lev-hero-open {
  height: 56px;
  padding: 0 34px;
  border-radius: 999px;
  font-size: 17px;
}

/* the hero */
.lev-hero {
  /* where the copy ends (padding, headline lines, sub-line, deposit card; the numbers of the rules below) */
  --lev-h1-lines: 1;
  --lev-copy-h: calc(76px + clamp(28px, 7svh, 88px) + var(--lev-h1-lines) * clamp(40px, 5.1vw, 100px) + clamp(14px, 1.6vw, 22px) + 1.4 * clamp(17px, 1.3vw, 21px) + clamp(18px, 2.6svh, 28px) + 56px);
  /* the last term keeps the tips of the X (17 % down the drawing at the resting tilt, 12 % with Reduce Motion's flat
     view: --lev-art-fit = 1 / (1 - that)) at least 16 px under the deposit card. It only binds where the card would
     reach the X (short windows, and wide ones where the headline takes two lines). */
  --lev-art-fit: 1.2;
  --lev-art-h: max(260px, min(66svh, 62vw, calc(100svh - 280px), calc((max(100svh, 620px) - var(--lev-copy-h) - 16px) * var(--lev-art-fit))));
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--lev-page);
  color: var(--lev-ink);
  font-family: var(--lev-sans);
  -webkit-font-smoothing: antialiased;
  text-align: center;
}
/* the headline wraps to two lines from about 1578 px (it is 5.1vw wide in a 1120 px column) */
@media (min-width: 1570px) {
  .lev-hero { --lev-h1-lines: 2; }
}
.lev-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: calc(76px + clamp(28px, 7svh, 88px) + env(safe-area-inset-top, 0px)) 24px 0;
}
.lev-hero h1 {
  margin: 0;
  font-family: "NB International Pro", var(--lev-sans);
  font-size: clamp(40px, 5.1vw, 100px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.lev-hero-sub {
  margin: clamp(14px, 1.6vw, 22px) auto 0;
  max-width: 34em;
  color: var(--lev-muted);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.4;
  text-wrap: balance;
}
/* the deposit card under the sub-line: live supply APY, an amount and one button (connect, test USDG, approve,
   deposit). build.mjs writes its static first frame; the live card (lendshare/app/src/widget, boot.js section 11)
   takes over with the same markup. Fixed height, so nothing moves while it loads or while its status changes; on
   desktop it ends above the tips of the harbour's X. */
.lev-deposit {
  --lev-dep-bg: rgba(10, 10, 11, 0.05);
  --lev-dep-bg-on: rgba(10, 10, 11, 0.075);
  --lev-dep-line: rgba(10, 10, 11, 0.08);
  --lev-dep-bad: #c8322b;
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: 60px 18px;
  align-items: center;
  row-gap: 12px;
  width: min(560px, 100%);
  height: 90px;
  margin: clamp(18px, 2.6svh, 28px) auto 0;
  color: var(--lev-ink);
  font-family: var(--lev-sans);
  text-align: left;
}
/* one borderless capsule: amount, rate, button; the status line sits under it, only when there is something to say */
.lev-deposit::before {
  content: "";
  grid-area: 1 / 1 / 2 / -1;
  height: 100%;
  border-radius: 999px;
  background: var(--lev-dep-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: background-color 0.2s ease;
}
.lev-deposit:focus-within::before {
  background: var(--lev-dep-bg-on);
}
@media (prefers-color-scheme: dark) {
  .lev-deposit {
    --lev-dep-bg: rgba(255, 255, 255, 0.07);
    --lev-dep-bg-on: rgba(255, 255, 255, 0.1);
    --lev-dep-line: rgba(255, 255, 255, 0.08);
    --lev-dep-bad: #ff8a80;
  }
}
.lev-deposit > * { position: relative; }
.lev-dep-field { grid-area: 1 / 1; }
.lev-dep-apy { grid-area: 1 / 2; }
.lev-dep-btn { grid-area: 1 / 3; }
.lev-dep-apy {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 18px 0 4px;
  white-space: nowrap;
}
.lev-dep-rate {
  order: 0;
  color: var(--lev-accent);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.lev-dep-label {
  order: 1;
  color: var(--lev-muted);
  font-size: 13px;
}
.lev-dep-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 60px;
  box-sizing: border-box;
  padding: 0 8px 0 26px;
  cursor: text;
}
.lev-dep-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--lev-ink);
  font: 400 22px/1 var(--lev-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.lev-dep-input::placeholder {
  color: var(--lev-faint);
}
.lev-dep-unit {
  color: var(--lev-muted);
  font-size: 14px;
}
.lev-dep-max,
.lev-dep-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lev-accent);
  font: inherit;
  cursor: pointer;
}
.lev-dep-max {
  font-size: 13px;
  font-weight: 500;
}
.lev-dep-max:disabled {
  opacity: 0.45;
  cursor: default;
}
.lev-dep-btn {
  min-width: 148px;
  height: 48px;
  margin-right: 6px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.lev-dep-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.lev-dep-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--lev-muted);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}
.lev-dep-meta > span:empty { display: none; }
.lev-dep-l:not(:empty) + .lev-dep-r:not(:empty)::before { content: "· "; }
.lev-dep-meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lev-dep-meta a {
  color: var(--lev-accent);
  text-decoration: none;
}
.lev-dep-meta a:hover,
.lev-dep-link:hover {
  text-decoration: underline;
}
.lev-dep-bad {
  color: var(--lev-dep-bad);
}
/* the wallet choice (Privy or a browser wallet), under the button */
.lev-dep-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(300px, 100%);
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid var(--lev-dep-line);
  border-radius: 12px;
  background: var(--lev-sheet);
  box-shadow: var(--lev-sheet-shadow);
  animation: lev-drop 0.25s ease-in-out both;
}
.lev-dep-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lev-ink);
  font: 500 15px/1.25 var(--lev-sans);
  text-align: left;
  cursor: pointer;
}
.lev-dep-menu button:hover,
.lev-dep-menu button:focus-visible {
  background: var(--lev-fill-2);
  outline: 0;
}
.lev-dep-menu small {
  display: block;
  color: var(--lev-muted);
  font-size: 12px;
  font-weight: 400;
}
.lev-dep-menu img,
.lev-dep-mark {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.lev-dep-mark {
  background: var(--lev-accent);
  -webkit-mask: var(--lev-mark) center / 16px no-repeat;
  mask: var(--lev-mark) center / 16px no-repeat;
}
@media (max-width: 600px) {
  .lev-deposit {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 56px 52px 18px;
    row-gap: 10px;
    width: auto;
    height: 156px;
  }
  .lev-deposit::before { grid-area: 1 / 1 / 2 / -1; }
  .lev-dep-field { height: 56px; padding-left: 22px; }
  .lev-dep-btn { grid-area: 2 / 1 / 3 / -1; height: 52px; margin: 0; }
  .lev-dep-meta { grid-row: 3; }
  .lev-dep-l:not(:empty) + .lev-dep-r:not(:empty)::before { content: none; }
  .lev-dep-meta:has(.lev-dep-r:not(:empty)) .lev-dep-l { display: none; }
}
.lev-hero-art {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  height: var(--lev-art-h);
  aspect-ratio: 1200 / 640;
  transform: translateX(-50%);
  /* the camera: the drawing is a ground plane seen through this perspective (boot.js tilts it) */
  perspective: 1200px;
  perspective-origin: 50% 40%;
  /* the drawing's top rows melt into the page so the copy above never sits on strokes */
  -webkit-mask: linear-gradient(to bottom, transparent, #000 14%);
  mask: linear-gradient(to bottom, transparent, #000 14%);
}
/* the ground plane: at the top of the page the camera looks straight down (no transform); scrolling through the
   hero tilts it back to an oblique view around the gap between the heads, and it leans a few degrees toward
   the pointer (boot.js). Its layers keep one 3D space: the water bands sit a little below the stone, the boat
   a little above it, and the two lighthouse towers stand up from their bases. */
.lev-art {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 50.3%;
  /* first paint = boot.js's resting tilt, so nothing jumps when the script takes over */
  transform: rotateX(24deg);
  will-change: transform;
}
.lev-art .lev-w0 { translate: 0 0 -3px; }
.lev-art .lev-w1 { translate: 0 0 -6px; }
.lev-art .lev-w2 { translate: 0 0 -9px; }
.lev-art .lev-boat-l { translate: 0 0 2px; }
.lev-art .lev-lh {
  position: absolute;
  transform: rotateX(-24deg);
  will-change: transform;
  backface-visibility: hidden;
}
.lev-art .lev-pt { position: absolute; width: 0; height: 0; }
.lev-art svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* the moving parts are their own composited layers (build.mjs splits the drawing): after the draw-in they move
   by transform / opacity only and nothing in the drawing repaints */
.lev-art .lev-art-l {
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.lev-art :is(.p, .q) {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lev-art .p.acc {
  stroke: var(--lev-accent);
  stroke-opacity: 1;
}
.lev-art .q { stroke-width: 0.62; }
.lev-art .q.lt { stroke-width: 0.52; }
.lev-art .q0 { stroke-opacity: 0.62; }
.lev-art .q1 { stroke-opacity: 0.46; }
.lev-art .q2 { stroke-opacity: 0.32; }
/* the draw-in, once per page load: every stroke has pathLength="1", its own start (--d) and duration (--t);
   --lev-draw is the whole drawing's start (later when the brand opening runs) */
.lev-art.is-armed :is(.p, .q) {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.lev-art.is-armed.is-drawn :is(.p, .q) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset calc(var(--t, 1.2) * 1s) cubic-bezier(0.4, 0.1, 0.5, 1) calc(var(--lev-draw, 0s) + var(--d, 0) * 1s);
}
/* after the draw-in the drawing keeps living, slowly: the boat (hull filled with the page colour, so the water
   passes under it) sails out through the gap with its wake, fades past the heads and comes back in from the
   bottom; the three water layers shimmer sideways out of step. 3.4 s = the longest stroke's end (3.22 s). */
.lev-art .lev-boat-fill {
  fill: var(--lev-page);
  stroke: none;
}
.lev-art.is-drawn .lev-boat-l {
  animation: lev-sail 28s linear calc(var(--lev-draw, 0s) + 3.4s) infinite;
}
.lev-art.is-drawn .lev-w0 { animation: lev-shimmer 7s ease-in-out calc(var(--lev-draw, 0s) + 3.4s) infinite alternate; }
.lev-art.is-drawn .lev-w1 { animation: lev-shimmer 9s ease-in-out calc(var(--lev-draw, 0s) + 2.2s) infinite alternate-reverse; }
.lev-art.is-drawn .lev-w2 { animation: lev-shimmer 11s ease-in-out calc(var(--lev-draw, 0s) + 3s) infinite alternate; }
/* the hero off screen or the tab hidden: every loop stops (boot.js sets .is-paused) */
.lev-hero.is-paused .lev-art-l { animation-play-state: paused !important; }
/* percentages of the drawing's height (640 units): -270, -318, +170, +90 units */
@keyframes lev-sail {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  56% { transform: translate3d(0, -42.19%, 0); opacity: 1; }
  66% { transform: translate3d(0, -49.69%, 0); opacity: 0; }
  66.01% { transform: translate3d(0, 26.56%, 0); opacity: 0; }
  80% { transform: translate3d(0, 14.06%, 0); opacity: 1; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes lev-shimmer {
  0% { transform: translate3d(-0.3%, 0, 0); opacity: 1; }
  50% { opacity: 0.8; }
  100% { transform: translate3d(0.3%, 0, 0); opacity: 1; }
}
/* depth: the far shore behind the harbour, the harbour, and a bollard and a buoy at the frame's edges; each moves
   at its own speed on scroll and a little with the pointer (boot.js) */
.lev-art-layer { position: absolute; pointer-events: none; will-change: transform; }
.lev-art-layer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lev-art-layer :is(.p, .q) { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.lev-art-layer .p.acc { stroke: var(--lev-accent); }
.lev-art-layer .q { stroke-width: 0.62; }
.lev-hero-far {
  z-index: 0;
  left: 0;
  right: 0;
  bottom: calc(var(--lev-art-h) * 0.62);
  height: calc(var(--lev-art-h) * 0.3);
  opacity: 0.38;
  -webkit-mask: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.lev-showcase-art-in { position: relative !important; width: 100%; height: 100%; opacity: 0.55; color: var(--lev-ink); }
.lev-hero-near { z-index: 2; bottom: -2%; width: clamp(150px, 24vw, 420px); aspect-ratio: 480 / 260; opacity: 0.9; }
.lev-hero-near-l { left: -2%; }
.lev-hero-near-r { right: 0; aspect-ratio: 420 / 260; }
@media (max-width: 767px) {
  .lev-hero-near { width: 34vw; opacity: 0.75; }
}
/* the bridge over the seam: fitted by boot.js between the right breakwater's lower arm and the marina's
   breakwater in the scene below; it draws itself in as you scroll from the hero into the scene */
/* overflow-x: clip keeps the bridge from widening the page on phones; y stays visible (the seam is 0 px tall) */
.lev-seam { position: relative; z-index: 3; height: 0; overflow-x: clip; }
.lev-bridge {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 80px;
  transform-origin: 20px 30px;
  color: var(--lev-ink);
  pointer-events: none;
}
.lev-bridge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lev-bridge :is(.p, .q) {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - min(1, max(0, (var(--p, 1) - var(--d, 0)) / var(--t, 0.2))));
}
.lev-bridge .q { stroke-width: 0.62; stroke-opacity: 0.5; }
@media (max-width: 767px), (orientation: portrait) {
  .lev-hero {
    --lev-art-h: max(220px, min(44svh, calc(100svh - 440px)));
    min-height: 600px;
  }
  .lev-hero-copy {
    padding-top: calc(68px + clamp(24px, 5svh, 48px) + env(safe-area-inset-top, 0px));
  }
}
/* short phones (under ~680 px tall): the hero grows a little past the screen so the X keeps its size and stays under
   the deposit card (170 px tall here); its lower arm ends run below the fold instead */
@media (max-width: 600px) {
  .lev-hero {
    min-height: 680px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lev-hero {
    --lev-art-fit: 1.13;
  }
  .lev-art {
    transform: none !important;
  }
  .lev-art .lev-art-l {
    animation: none !important;
  }
  .lev-art-layer {
    transform: none !important;
  }
  .lev-water-in::before {
    animation: none;
  }
  .lev-menu {
    animation: none;
  }
  .lev-dep-menu {
    animation: none;
  }
  .lev-dep-btn,
  .lev-dep-btn:active {
    transition: none;
    transform: none;
  }
}