:root {
  /* What the sticky menu occupies, which is what the pieces' scene hangs from. */
  --primary-menu-height: 88px;
  --landing-ink: #080b1a;
  --landing-violet: #342cff;
  --landing-paper: #faf7f3;
  --landing-line: #ddd7d1;
  --landing-max: 1440px;
}

body {
  background:
    radial-gradient(circle at 92% 3%, rgba(198, 228, 249, .82), transparent 32rem),
    radial-gradient(circle at 6% 25%, rgba(218, 236, 249, .76), transparent 38rem),
    linear-gradient(135deg, #fbfaf8 2%, #fff 42%, #edf7fc 100%);
  background-attachment: fixed;
  color: var(--landing-ink);
}
.app { background: transparent; }
#landing {
  background: transparent;
  /* `clip` rather than `hidden`: both cut the decorative overflow, but `hidden`
     makes this a scroll container, and a scroll container is what the pieces'
     scene would then stick inside instead of inside the page. */
  overflow: clip;
}
.section-background { background-position: center; background-repeat: no-repeat; }

/* Every block below the opening moves by a role app.js gives it and a
   scroll-driven animation below (see "Motion"). Nothing is hidden by default,
   so a browser with no JavaScript, and a reader who has asked for less
   motion, is given the composition exactly as drawn. */

.section-kicker {
  color: var(--landing-violet);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .055em;
}

.ways > p,
.clarity-copy > p {
  font-size: 10px;
  line-height: 1.75;
}

.pill {
  background: #080b18;
  border: 0;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  min-height: 52px;
  padding: 0 34px;
}
/* The product pieces and the promise they sit around. */
.ways {
  --advance-scene-progress: 1;
  --reshuffle-progress: 0;
  /*
   * The depth in this section, in pixels, written by app.js from where the
   * scroll has reached and read by the layers below. A negative offset runs a
   * layer ahead of the page, a positive one lets it fall behind — the
   * introduction leads, the pieces follow it, and the wash behind both of them
   * trails. Nothing here moves anything on its own: zero is what a browser with
   * no JavaScript is given and what a reader who has asked for less motion
   * keeps, and at zero every layer sits exactly where the composition puts it.
   */
  --ways-lift: 0px;
  --ways-text-lift: 0px;
  --ways-backdrop-drift: 0px;
  /* The runway the re-shuffle is scrolled through. The scene inside sticks for
     its length, so the row is arrived at and then looked at rather than being
     assembled on its way off the top of the screen. It is longer than the
     travel strictly needs: the further a gesture has to carry the pieces, the
     less of the journey one notch of a wheel spends. */
  --ways-runway: 125vh;
  background: transparent;
  margin: 0 auto;
  max-width: none;
  min-height: calc(100vh + var(--ways-runway));
  /* The wash inside this section is a layer with a rate of its own, so it is
     cut larger than the scene it hangs in and reaches past it on every side.
     This is what keeps that overhang from painting over the section below:
     `clip` rather than `hidden` for the same reason `#landing` gives — `hidden`
     would make this a scroll container and the scene would stick inside it
     rather than inside the page. */
  overflow: clip;
  /* The stage carries five pieces across three columns now, so the section's
     own margin is the narrow one and `--landing-max` does the rest. */
  padding: 0 clamp(16px, 2.6vw, 54px) 18px;
  position: relative;
  text-align: center;
  z-index: 3;
}
.context-line {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--landing-max);
}
/*
 * The phone's carousel dots sit beside the stage rather than on it, but they
 * are the same foreground and have to leave with it — a row of cards lifting
 * away from the controls under it is the separation happening in the wrong
 * place. Carried on `transform`, like the stage, so that `translate` is left
 * free for the exit below.
 */
.ways-scene > .journey-carousel-controls { transform: translate3d(0, var(--ways-lift), 0); }
/*
 * The furthest layer, and the one everything else is read as moving against.
 *
 * It hangs inside the pinned scene rather than off the section, which is what
 * gives it a rate of its own. Stretched over the whole section it was simply
 * page: it slid past at exactly the speed of the scroll while the scene above
 * it stood still, so the only distance the eye could read in this section was
 * backwards — the background outrunning the words printed over it. Pinned with
 * the scene it starts at rest, and the drift app.js gives it is then the only
 * motion it has: a slow fall behind copy that is climbing, which is what a
 * near thing and a far thing look like when they pass the same window.
 *
 * It bleeds well past the scene on every side. This box is translated and
 * scaled while it is being looked at, and an edge coming into view is the
 * whole illusion gone.
 */
.ways-scene::before {
  background:
    radial-gradient(ellipse at 48% 21%, rgba(255, 255, 255, .9) 0 20%, rgba(255, 255, 255, .38) 48%, transparent 72%),
    radial-gradient(ellipse at 8% 69%, rgba(255, 255, 255, .58) 0 8%, rgba(214, 238, 251, .25) 24%, transparent 48%),
    linear-gradient(180deg, rgba(239, 249, 255, .16) 0, rgba(220, 239, 250, .2) 38%, rgba(190, 222, 241, .28) 72%, rgba(147, 199, 230, .34) 100%);
  content: '';
  /* `min()` because the drift is measured in pixels and the bleed in screen
     heights: on a short window a bleed stated only in `vh` can come out smaller
     than the drift, and the larger of the two is the one that keeps the edge
     out of sight. Comfortably past the furthest this layer travels, which is
     the pinned drift and the leaving drift added together. */
  inset: min(-22vh, -230px) -8vw min(-28vh, -250px);
  /* This is the section's only blue wash. Tying its complete fade to the same
     progress as the re-shuffle avoids a second, bottom-anchored wash suddenly
     appearing only after the sticky scene releases. */
  opacity: calc(.03 + var(--reshuffle-progress) * .77);
  pointer-events: none;
  position: absolute;
  transition: opacity 240ms linear;
  transform: translate3d(0, var(--ways-backdrop-drift), 0)
             scale(calc(.96 + var(--advance-scene-progress) * .04));
  transform-origin: center top;
  will-change: opacity, transform;
  z-index: -1;
}
.ways-intro {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding: clamp(8px, .9cqw, 22px);
  position: relative;
  text-align: center;
  transform-style: preserve-3d;
}
/*
 * A halo the words carry only while the pieces are passing under them. It is
 * drawn on the glyphs rather than behind the block: a panel of light wide
 * enough to cover a headline is wide enough to wash out the piece crossing
 * beneath it, and the piece is the thing being looked at.
 */
.ways-intro > .section-kicker,
.ways-intro > h1,
.ways-intro > p {
  text-shadow:
    0 0 10px rgba(246, 251, 255, calc(var(--crossing) * .96)),
    0 0 24px rgba(246, 251, 255, calc(var(--crossing) * .85)),
    0 0 44px rgba(246, 251, 255, calc(var(--crossing) * .7));
}

.ways-intro > * {
  --reveal: clamp(0, calc((var(--advance-scene-progress) - var(--reveal-at, .2)) * 3.4), 1);
  filter: blur(calc(7px - var(--reveal) * 7px));
  opacity: var(--reveal);
  transform: translateY(calc(28px - var(--reveal) * 28px));
  will-change: filter, opacity, transform;
}
.ways-intro > .section-kicker {
  --reveal-at: .12;
  background: linear-gradient(180deg, transparent 45%, #ffd97a 45%);
  padding: 0 4px;
}
.ways-intro > h1 { --reveal-at: .18; }
.ways-intro > .ways-ornament { --reveal-at: .28; }
.ways-intro > p { --reveal-at: .34; }
.ways-intro > .pill { --reveal-at: .42; }
.ways h2 {
  font: 400 clamp(25px, 2.4vw, 35px)/1.1 var(--font-serif);
  letter-spacing: -.022em;
  margin: 14px 0 11px;
}
.ways h1 {
  color: #07162f;
  font-family: var(--font-display);
  font-size: calc(clamp(20px, 2.9cqw, 48px) * (1 + .1 * var(--grid)));
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  margin: clamp(6px, .65cqw, 14px) 0 0;
}
.ways h1 mark { background: transparent; color: #e0a13a; padding: 0; }
.ways-intro > p { color: #5c6e88; font-size: clamp(9.5px, 1.08cqw, 18px); line-height: 1.45; margin: clamp(6px, .6cqw, 13px) auto clamp(7px, .7cqw, 15px); max-width: calc((44 + 26 * var(--grid)) * 1ch); }
.ways .section-kicker { color: #072a5e; font-size: clamp(8px, .95cqw, 16px); font-weight: 700; letter-spacing: .14em; }
.ways .pill { border: 1px solid #c7973b; border-radius: 9px; box-shadow: 0 8px 18px rgba(8, 25, 51, .15); font-size: clamp(11px, .95cqw, 17px); min-height: clamp(32px, 3.3cqw, 58px); padding: 0 clamp(17px, 2.15cqw, 38px); transition: box-shadow .25s ease, transform .25s ease; }
.ways .pill:hover { box-shadow: 0 10px 22px rgba(8, 25, 51, .18); transform: translateY(-1px); }
.ways .pill:active { box-shadow: 0 5px 12px rgba(8, 25, 51, .14); transform: translateY(1px); }
.ways .pill span { color: #d2a03d; font-size: clamp(16px, 1.5cqw, 26px); margin-left: clamp(8px, .75cqw, 13px); vertical-align: -2px; }
.ways-ornament { align-items: center; color: #cc9638; display: flex; gap: clamp(9px, .95cqw, 17px); margin-top: 4px; width: clamp(130px, 13cqw, 225px); }
.ways-ornament::before,
.ways-ornament::after { background: linear-gradient(90deg, transparent, #d4ae69); content: ''; height: 1px; width: clamp(45px, 5.2cqw, 90px); }
.ways-ornament::after { background: linear-gradient(90deg, #d4ae69, transparent); }
.ways-ornament img { height: clamp(16px, 1.65cqw, 28px); object-fit: contain; width: clamp(20px, 2.05cqw, 35px); }

/*
 * The product pieces
 * ------------------
 * Five products around one promise, and one gesture between two ways of
 * showing them. The scene opens scattered — the pieces tilted and interlocking
 * around the introduction, each one's tab reaching into a neighbour's blank —
 * and re-shuffles into a single aligned row as the visitor scrolls through it.
 *
 * Both states are the same five pieces. Nothing is swapped, cross-faded or
 * rebuilt: every number that differs between them is written here as a
 * scattered/aligned pair that `--grid` mixes, and app.js writes `--grid` from
 * how far the scene has been scrolled through. It stays 0 on a phone, which
 * shows one piece at a time in a carousel and has nothing to re-shuffle.
 *
 * The silhouettes are clipped in `objectBoundingBox` units, so a path is only
 * right for the box it was cut for — and these boxes change shape as they
 * travel. app.js recuts all five on every frame of the re-shuffle from the
 * same generator the flight's frame uses; what the document ships is the
 * scattered state, for a visitor with no JavaScript.
 */
.ways-scene {
  /*
   * Pinned under the menu rather than under the top of the screen. The menu is
   * itself sticky and 88px tall, so sticking to the same edge it ends on puts
   * the scene in one place: the same distance below it before a page has been
   * scrolled at all and after the scene has taken over the screen, instead of
   * clearing a menu that is not there yet with padding that never goes away.
   */
  align-content: start;
  display: grid;
  height: calc(100vh - var(--primary-menu-height));
  padding-top: 12px;
  position: sticky;
  top: var(--primary-menu-height);
}
.ways-stage {
  /*
   * Self-similar: the stage is one shape at every size, so a piece placed at a
   * percentage of it keeps its proportions and its neighbours — and so does
   * every word inside it, because the type below is sized in `cqw`, hundredths
   * of this box rather than of the window. That is what makes the composition
   * hold at any zoom: the whole scene is one drawing that scales, instead of a
   * layout in percentages with type in viewport units sliding through it.
   *
   * It takes the width the screen can give it. A wide window is limited by the
   * page's own measure; a shallow one by its height, because the scene is one
   * screen and the row has to be arrived at whole.
   */
  --stage-grid: 0;
  --grid: var(--stage-grid);
  /* Peaks half way through the re-shuffle and is 0 at both ends: what the
     pieces are doing in the middle of it is crossing the introduction. */
  --crossing: calc(4 * var(--stage-grid) * (1 - var(--stage-grid)));
  aspect-ratio: 2.05;
  container-type: inline-size;
  margin-inline: auto;
  position: relative;
  /* Everything drawn on the stage — the introduction and all five pieces —
     rides this one offset, so the row travels as a body rather than as five
     cards each finding a different speed. `.ways-intro` adds its own on top,
     which is the only place the two are allowed to part. */
  transform: translate3d(0, var(--ways-lift), 0);
  /* Let the completed five-card row use a little more of both wide and shallow
     screens without changing the card proportions or their interlocking seams. */
  width: min(98vw, 1840px, calc((100vh - 155px) * 2.05));
}
.journey-grid { display: contents; }
.journey-carousel-controls { display: none; }

.ways-intro {
  left: calc((33 - 25 * var(--grid)) * 1%);
  position: absolute;
  /* Keep the completed row's promise comfortably below the sticky menu. The
     intro used to finish at 2% of the stage while its depth layer lifted it
     even further, which let the menu cover the kicker and headline. */
  top: calc((7 - 2 * var(--grid)) * 1%);
  z-index: 3;
  /* On top of the stage's own offset, so the promise is always the fastest
     thing in the section: it is the nearest, and the pieces passing under it
     are what it is read as being nearer than. */
  transform: translate3d(0, var(--ways-text-lift), 0);
  width: calc((34 + 50 * var(--grid)) * 1%);
}

.journey {
  --card-progress: clamp(0, calc((var(--advance-scene-progress) - var(--card-reveal-at, .48)) * 3.2), 1);
  /* The row is not assembled all at once: each piece leaves a beat after the
     one before it, which is what makes this read as five pieces finding their
     places rather than one diagram redrawing itself. app.js writes this from
     the scene's progress, its delay and an easing, so a piece leans out of
     where it lies and settles into the row rather than starting and stopping
     the instant its turn begins; everything inside it inherits the result. */
  --grid: 0;
  /* Landscape with the copy beside the scene, portrait with the copy above it:
     the piece's own shape is the first thing the re-shuffle changes. */
  aspect-ratio: calc(1.42 - .6 * var(--grid));
  /* A silhouette with tabs and blanks cannot be given a `box-shadow`: the shadow
     is cast by the border box the clip has already cut away from. `drop-shadow`
     follows what is actually painted, which is the piece. */
  filter: drop-shadow(0 8px 14px rgba(23, 51, 84, .16));
  z-index: 2;
  left: calc((var(--at-left) + (var(--to-left) - var(--at-left)) * var(--grid-slide, var(--grid))) * 1%);
  opacity: var(--card-progress);
  position: absolute;
  top: calc((var(--at-top) + (var(--to-top) - var(--at-top)) * var(--grid-fall, var(--grid))) * 1%);
  transform: translateY(calc(58px - var(--card-progress) * 58px))
             rotate(calc(var(--piece-tilt, 0deg) * (1 - var(--grid))))
             scale(calc(.974 + var(--card-progress) * .026));
  transform-origin: center;
  transition: filter .4s ease;
  width: calc((var(--at-width) + (var(--to-width) - var(--at-width)) * var(--grid)) * 1%);
  will-change: opacity, transform;
}
/*
 * Where each piece lies scattered, and where it settles in the row. The aligned
 * lefts step by 18.03 for a piece 21.6 wide, so consecutive pieces overlap by
 * very nearly the depth a tab reaches — the row closes up on its joints rather
 * than lining up beside itself, and the half point of a percent left over is
 * the seam between them.
 *
 * VestStudio is the one piece with no tilt: it is where the opening artwork
 * docks, and the frame that flies into it is not rotated.
 */
.journey.call { --piece-delay: 0; --at-left: 1; --at-top: 3; --at-width: 28; --to-left: 3.15; --to-top: 44; --to-width: 21.6; --piece-tilt: -2.2deg; --card-reveal-at: .44; --piece-tint: #fff4de; }
.journey.folio { --piece-delay: .12; --at-left: 2; --at-top: 55; --at-width: 28; --to-left: 21.18; --to-top: 44; --to-width: 21.6; --piece-tilt: 1.4deg; --card-reveal-at: .5; --piece-tint: #dff1fd; }
.journey.studio { --piece-delay: .24; --at-left: 34; --at-top: 56; --at-width: 32; --to-left: 39.21; --to-top: 44; --to-width: 21.6; --card-reveal-at: .56; --piece-tint: #fff4e0; }
.journey.monitor { --piece-delay: .36; --at-left: 70.5; --at-top: 56; --at-width: 28; --to-left: 57.24; --to-top: 44; --to-width: 21.6; --piece-tilt: -1.6deg; --card-reveal-at: .62; --piece-tint: #e0f2ff; }
.journey.fire { --piece-delay: .48; --at-left: 71; --at-top: 1; --at-width: 28; --to-left: 75.27; --to-top: 44; --to-width: 21.6; --piece-tilt: 1.9deg; --card-reveal-at: .68; --piece-tint: #eef8f7; }

/*
 * A blur is re-computed on every frame of whatever it is attached to, and five
 * of them over five boxes that are changing shape at once is by far the most
 * expensive thing this page does — enough, on a software rasteriser, to drop
 * the re-shuffle from sixty frames a second to eight. The pieces wear their
 * shadow where it is doing work, which is standing still; while they travel
 * they are the only thing moving on the screen and nothing is reading their
 * depth. app.js carries the class for exactly as long as they are moving.
 */
.ways-stage.is-shuffling .journey { filter: none; }
.journey:hover { filter: drop-shadow(0 12px 20px rgba(23, 51, 84, .2)); }
.journey:hover .journey-piece { transform: translateY(-2px); }

/*
 * The whole piece is the control. There is no button on a card any more: a
 * card is one product, so the thing to click is the card, and what it says is
 * what the link is called.
 */
.journey-piece {
  background: var(--piece-tint);
  color: inherit;
  cursor: pointer;
  display: block;
  inset: 0;
  position: absolute;
  text-decoration: none;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.journey-piece:focus-visible { outline: 3px solid #1668e3; outline-offset: -3px; }
.folio .journey-piece { clip-path: url(#piece-folio); }
.call .journey-piece { clip-path: url(#piece-call); }
.fire .journey-piece { clip-path: url(#piece-fire); }
.studio .journey-piece { clip-path: url(#piece-studio); }
.monitor .journey-piece { clip-path: url(#piece-monitor); }

/*
 * Each piece's artwork is a 4K composite of the product in use, and each was
 * composed with a panel of its own in the left third. Scattered, the piece is
 * landscape and the page's panel is laid over exactly that third, so the scene
 * is zoomed to carry its subject clear of it and into the right half. Aligned,
 * the artwork is the band under the copy, and the crop walks right until the
 * composed panel is outside it altogether — which is the same move, continued.
 */
.journey-background {
  background-color: #dce9f3;
  /* The crop finishes its walk well before the piece finishes travelling. It
     has to: the scene's own panel is only hidden while the page's panel is over
     it, and the page's panel is on the move. */
  --art-shift: min(calc(var(--grid) * 1.7), 1);
  /* Aligned, the crop is a window on the person rather than on the scene: it
     opens just past the edge of the panel composed into the frame and closes
     on the dashboard beyond them, and lifts a little so the top of a head is
     never the thing the band cuts. */
  background-position: calc(var(--art-pan) * var(--art-shift) * 1%)
      calc((50 - (50 - var(--art-lift, 34)) * var(--art-shift)) * 1%);
  background-repeat: no-repeat;
  background-size: calc((var(--art-zoom) + (var(--art-zoom-aligned) - var(--art-zoom)) * var(--art-shift)) * 1%) auto;
  /* In the finished row the photograph is an inset middle panel, leaving the
     product summary above it and the short product promise below it. */
  border-radius: calc(var(--grid) * 1.15cqw);
  inset: calc(var(--grid) * 37%) calc(var(--grid) * .7cqw)
      calc(var(--grid) * 21%) calc(var(--grid) * .7cqw);
  position: absolute;
}
/*
 * Where the artwork begins under the copy, it begins in the piece's own colour
 * and comes up out of it. A band that starts on a hard line reads as two cards
 * stacked; this reads as one, and it is nothing at all until there is a row to
 * be part of.
 */
.journey-background::after {
  background: linear-gradient(to bottom, var(--piece-tint) 0, transparent 100%);
  content: '';
  height: calc(var(--grid) * 19%);
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.folio .journey-background {
  --art-zoom: 145; --art-zoom-aligned: 185; --art-pan: 65.7; --art-lift: 18;
  background-image: url('/images/generated/VestFolioBackground-640.webp');
  background-image: image-set(url('/images/generated/VestFolioBackground-420.avif') type('image/avif') 1x,
      url('/images/generated/VestFolioBackground-960.avif') type('image/avif') 2x,
      url('/images/generated/VestFolioBackground-1280.avif') type('image/avif') 3x,
      url('/images/generated/VestFolioBackground-420.webp') type('image/webp') 1x,
      url('/images/generated/VestFolioBackground-960.webp') type('image/webp') 2x,
      url('/images/generated/VestFolioBackground-1280.webp') type('image/webp') 3x);
}
.call .journey-background {
  --art-zoom: 145; --art-zoom-aligned: 185; --art-pan: 68.4; --art-lift: 18;
  background-image: url('/images/generated/VestCallBackground-640.webp');
  background-image: image-set(url('/images/generated/VestCallBackground-420.avif') type('image/avif') 1x,
      url('/images/generated/VestCallBackground-960.avif') type('image/avif') 2x,
      url('/images/generated/VestCallBackground-1280.avif') type('image/avif') 3x,
      url('/images/generated/VestCallBackground-420.webp') type('image/webp') 1x,
      url('/images/generated/VestCallBackground-960.webp') type('image/webp') 2x,
      url('/images/generated/VestCallBackground-1280.webp') type('image/webp') 3x);
}
.fire .journey-background {
  --art-zoom: 145; --art-zoom-aligned: 185; --art-pan: 65.7;
  background-image: url('/images/generated/VestFireBackground-640.webp');
  background-image: image-set(url('/images/generated/VestFireBackground-420.avif') type('image/avif') 1x,
      url('/images/generated/VestFireBackground-960.avif') type('image/avif') 2x,
      url('/images/generated/VestFireBackground-1280.avif') type('image/avif') 3x,
      url('/images/generated/VestFireBackground-420.webp') type('image/webp') 1x,
      url('/images/generated/VestFireBackground-960.webp') type('image/webp') 2x,
      url('/images/generated/VestFireBackground-1280.webp') type('image/webp') 3x);
}
.monitor .journey-background {
  --art-zoom: 115; --art-zoom-aligned: 140; --art-pan: 98; --art-lift: 26;
  background-image: url('/images/generated/VestMonitorBackground-640.webp');
  background-image: image-set(url('/images/generated/VestMonitorBackground-420.avif') type('image/avif') 1x,
      url('/images/generated/VestMonitorBackground-960.avif') type('image/avif') 2x,
      url('/images/generated/VestMonitorBackground-1280.avif') type('image/avif') 3x,
      url('/images/generated/VestMonitorBackground-420.webp') type('image/webp') 1x,
      url('/images/generated/VestMonitorBackground-960.webp') type('image/webp') 2x,
      url('/images/generated/VestMonitorBackground-1280.webp') type('image/webp') 3x);
}
.studio .journey-background {
  /*
   * VestStudio's artwork is the portrait the opening hero collapses into, and
   * the piece it lands on is landscape — so `cover` could only ever show a band
   * of her. This fits her height instead and stands her against the right edge,
   * which is where the other four scenes carry their subject, and paints the
   * rest of the frame with the gradient her own backdrop ends on. All of her is
   * on the card, and none of her is behind the panel.
   *
   * Aligned, the artwork is the band under the copy: a third of the height it
   * had, so the size doubles back up to cover it, and she moves to the middle.
   *
   * app.js reads this geometry back off the element rather than being told it,
   * because the frame flying in has to land on the crop the card is showing —
   * so moving anything here moves the flight with it.
   */
  background-image: url('/images/generated/vestmindCouplePortrait-512.webp'),
      linear-gradient(90deg, #cdeeff, #b8e6ff);
  background-image: image-set(url('/images/generated/vestmindCouplePortrait-512.avif') type('image/avif') 1x,
      url('/images/generated/vestmindCouplePortrait-1080.avif') type('image/avif') 2x,
      url('/images/generated/vestmindCouplePortrait-512.webp') type('image/webp') 1x,
      url('/images/generated/vestmindCouplePortrait-1080.webp') type('image/webp') 2x),
      linear-gradient(90deg, #cdeeff, #b8e6ff);
  background-position: calc((100 - 50 * var(--grid)) * 1%) calc((50 - 38 * var(--grid)) * 1%), center;
  background-size: auto calc((100 + 160 * var(--grid)) * 1%), cover;
}

.journey-panel {
  --panel-card: calc(1 - max(calc((var(--grid) - .62) * 2.64), 0));
  background: linear-gradient(168deg,
      rgba(255, 255, 255, var(--panel-card)) 6%,
      rgba(246, 250, 254, var(--panel-card)) 94%);
  border-radius: calc((1 - var(--grid)) * clamp(12px, 1.4cqw, 25px));
  box-shadow: 0 8px 20px rgba(16, 42, 74, calc(.12 * var(--panel-card))),
              inset 0 1px 0 rgba(255, 255, 255, calc(.9 * var(--panel-card)));
  display: flex;
  flex-direction: column;
  /*
   * The panel is the one part of a piece that does not change shape as the
   * piece does, and that is what keeps the re-shuffle smooth. A box stated as a
   * percentage of a piece whose width and aspect are both moving is re-measured
   * every frame, and re-measuring a box of type means breaking its lines and
   * shaping its glyphs again sixty times a second — which measured as nine
   * tenths of the whole gesture's layout cost. Stated in `cqw` against the
   * stage, which does not move, the box is laid out once; the piece is very
   * nearly the same panel-width in both states anyway, so what is left for the
   * travel is where the panel sits, and a translation moves it there without
   * asking the layout a single question.
   */
  height: calc((13.9 + 9.5 * var(--grid)) * 1cqw);
  left: 0;
  padding: clamp(10px, 1.15cqw, 21px) clamp(11px, 1.25cqw, 22px);
  position: absolute;
  text-align: left;
  top: 0;
  /* Scattered it sits in the left third of a landscape piece; aligned it is the
     head of a portrait card. Both are the same box, moved. */
  transform: translate(2.52cqw, calc((2.2 - .7 * var(--grid)) * 1cqw));
  width: calc((14.3 + 1.4 * var(--grid)) * 1cqw);
  z-index: 2;
}
.journey-panel > * {
  opacity: var(--card-progress);
  transform: translateY(calc(10px - var(--card-progress) * 10px));
}
.journey-head { align-items: center; display: flex; gap: clamp(6px, .75cqw, 13px); }
.journey-head i {
  color: #1668e3;
  display: block;
  height: clamp(16px, 1.6cqw, 28px);
  width: clamp(16px, 1.6cqw, 28px);
}
.journey-head svg { fill: none; height: 100%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 100%; }
.journey-head b {
  background: #eef3fb;
  border: 1px solid #dde7f5;
  border-radius: 999px;
  color: #12305c;
  font-size: clamp(8px, .73cqw, 13px);
  font-weight: 700;
  line-height: 1;
  padding: clamp(4px, .42cqw, 7px) clamp(7px, .7cqw, 12px);
}
.journey h3 {
  color: #0a1f3d;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.72cqw, 29px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  margin: clamp(4px, .65cqw, 12px) 0 0;
}
.journey h3 em { color: #e0a13a; font-style: normal; }
.journey-panel p {
  color: #41556e;
  font-size: clamp(9.5px, .8cqw, 14px);
  line-height: 1.36;
  margin: clamp(3px, .5cqw, 9px) 0 0;
}
/* The completed product row gets the same VestMind signature used beneath the
   introduction, without the old gold thread running behind the cards. */
.journey-ornament {
  left: 50%;
  margin: 0;
  opacity: clamp(0, calc((var(--grid) - .78) * 4.55), 1);
  pointer-events: none;
  position: absolute;
  top: 97%;
  transform: translate(-50%, -50%);
  width: clamp(150px, 15cqw, 260px);
  z-index: 3;
}
.journey-ornament img {
  height: clamp(20px, 2cqw, 34px);
  width: clamp(25px, 2.5cqw, 43px);
}

.journey-panel small {
  color: #62788f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(9px, .76cqw, 13.5px);
  margin-top: auto;
  padding: clamp(5px, .6cqw, 13px) calc(2.6cqw * var(--grid)) 0 0;
  position: relative;
  letter-spacing: .04em;
  line-height: 1.25;
}
.journey-panel small::after {
  align-items: center;
  border: 1.5px solid #1680dc;
  border-radius: 50%;
  bottom: 0;
  color: #0a315b;
  content: '→';
  display: flex;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.25cqw, 22px);
  font-weight: 700;
  height: clamp(25px, 2.25cqw, 40px);
  justify-content: center;
  opacity: var(--grid);
  position: absolute;
  right: 0;
  width: clamp(25px, 2.25cqw, 40px);
}

/*
 * Vestmind Lens, going from product to product like a bee among flowers.
 *
 * It lives on the stage, so it is sized in `cqw` with everything else and
 * rides the stage's own depth offset; app.js only ever writes where on the
 * stage it is, how it leans and how high it is flying. The box's origin is
 * the centre of the glass — the point it reads — which is why it is pulled up
 * and left by the glass's own offset inside the drawing (26 of 64 units).
 */
.vestmind-lens {
  --lens-size: clamp(48px, 5.4cqw, 98px);
  height: var(--lens-size);
  left: 0;
  margin: calc(var(--lens-size) * -.40625) 0 0 calc(var(--lens-size) * -.40625);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity .9s ease;
  width: var(--lens-size);
  will-change: transform;
  z-index: 6;
}
.vestmind-lens.is-awake { opacity: 1; }
.vestmind-lens__body,
.vestmind-lens__shadow { position: absolute; }
.vestmind-lens__body { inset: 0; transform-origin: 40.625% 40.625%; }
.vestmind-lens svg {
  display: block;
  filter: drop-shadow(0 2px 2.5px rgba(8, 26, 53, .2));
  height: 100%;
  overflow: visible;
  position: relative;
  width: 100%;
}
/* The glass is a glass: what is under it reads a shade clearer and richer.
   A sibling of the drawing rather than its parent, because a `filter` on an
   ancestor would leave the backdrop with nothing behind it to see. */
.vestmind-lens__glass,
.vestmind-lens__ripple,
.vestmind-lens__shadow {
  border-radius: 50%;
  height: 53.125%;
  left: 14.0625%;
  top: 14.0625%;
  width: 53.125%;
}
.vestmind-lens__glass {
  -webkit-backdrop-filter: saturate(1.35) contrast(1.06) brightness(1.04);
  backdrop-filter: saturate(1.35) contrast(1.06) brightness(1.04);
  position: absolute;
}
/* A gold ring let go of as the lens arrives: the moment it comes into focus. */
.vestmind-lens__ripple {
  border: 1.5px solid rgba(224, 161, 58, .7);
  opacity: 0;
  position: absolute;
}
/* Where the lens would fall on the card if the card were paper and the lens
   were held over it: close and crisp while it reads, wider and fainter while
   it flies. */
.vestmind-lens__shadow {
  background: radial-gradient(circle, rgba(8, 26, 53, .17) 0 46%, rgba(8, 26, 53, .07) 60%, transparent 71%);
}
.vestmind-lens__caption {
  align-items: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(204, 150, 56, .42);
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(8, 25, 51, .1);
  color: #072a5e;
  display: flex;
  font-size: clamp(7.5px, .56cqw, 10.5px);
  font-weight: 700;
  gap: .6em;
  left: 76%;
  letter-spacing: .16em;
  line-height: 1;
  opacity: 0;
  padding: .62em 1em .62em .85em;
  position: absolute;
  text-transform: uppercase;
  top: 40.625%;
  transform: translate(-6px, -50%);
  transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
  white-space: nowrap;
}
.vestmind-lens__caption::before {
  background: #e0a13a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(224, 161, 58, .18);
  content: '';
  height: .55em;
  width: .55em;
}
.vestmind-lens__caption em { color: #c7973b; font-style: normal; }
.vestmind-lens.is-reading .vestmind-lens__caption {
  opacity: 1;
  transform: translate(0, -50%);
  transition-delay: .3s, .3s;
}
/* The piece being read answers it: its name comes up a little under the glass,
   and its shadow warms towards the lens's gold. `scale` rather than
   `transform`, which the panel's reveal already owns. */
.journey h3 {
  scale: 1;
  transform-origin: left center;
  transition: scale .8s cubic-bezier(.22, 1, .36, 1);
}
.journey.is-under-lens h3 { scale: 1.06; }
.ways-stage:not(.is-shuffling) .journey.is-under-lens:not(:hover) { filter: drop-shadow(0 12px 22px rgba(150, 108, 34, .2)); }

/* The landing artwork begins as a full-viewport frame behind the primary menu,
   then travels into the Advance card. The portrait beneath it is revealed as
   the frame docks; app.js supplies exact geometry at every breakpoint. */
.advance-image-flight {
  /* The frame is clipped to the piece it is on its way to becoming — app.js
     redraws `#piece-flight` on every frame of the travel, from a rectangle at
     the viewport to VestStudio's silhouette at the card. A clipped box can
     carry neither a border radius nor a box shadow: both are drawn from the
     border box the clip has cut away from, so the silhouette is the only
     statement of this frame's shape. */
  clip-path: url(#piece-flight);
  height: var(--advance-flight-height, 0);
  left: var(--advance-flight-left, 0);
  opacity: var(--advance-flight-visibility, 0);
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  top: var(--advance-flight-top, 100vh);
  visibility: hidden;
  width: var(--advance-flight-width, 100vw);
  will-change: left, top, width, height, opacity;
  z-index: 4;
}
.journey-pieces { height: 0; pointer-events: none; position: absolute; width: 0; }
.advance-image-flight.is-travelling,
.advance-image-flight.is-docking { visibility: visible; }
.advance-image-flight.is-travelling:not(.is-docking) { pointer-events: auto; }
.advance-image-flight.is-docking { z-index: 2; }
.advance-image-flight picture { display: contents; }
.advance-image-flight img {
  height: 100%;
  object-fit: cover;
  /* `cover` fits the master to whichever axis the frame is short of and leaves
     the crop centred; the scale then narrows that crop and the translation
     slides it, both driven from app.js, which is the only place that knows
     where the Advance card's portrait sits inside this same master. The
     translations are percentages of this element, so they hold at every size
     the frame passes through on the way down. The resting values reproduce the
     opening composition exactly — a 1.045 overscale with the artwork 1.2% left
     and 1.46% low inside it — and by the time the frame reaches the card they
     have become the portrait's own crop. The origin picks which band of the
     master `cover` keeps, because the translation above can only slide the
     frame across that band as far as the overscale it carries — on a phone,
     less than half of what centring the subject asks for. */
  object-position: var(--advance-flight-image-origin, 50%) center;
  transform: translate(var(--advance-flight-image-x, -1.2%), var(--advance-flight-image-y, 1.46%))
             scale(var(--advance-flight-image-scale, 1.045));
  transform-origin: center;
  width: 100%;
  will-change: transform;
}
.advance-flight-copy {
  color: var(--landing-ink);
  left: calc(var(--public-hero-copy-left) - 48px);
  max-width: 460px;
  opacity: calc(1 - var(--advance-flight-progress, 0) * 1.75);
  position: absolute;
  text-shadow: none;
  top: var(--public-hero-copy-top);
  transform: translateY(calc(var(--advance-flight-progress, 0) * -24px));
  will-change: opacity, transform;
  z-index: 1;
}
.advance-flight-brand {
  align-items: center;
  background: rgba(226, 237, 255, .78);
  border-radius: 12px;
  color: #0758e8;
  display: flex;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  gap: 10px;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 18px;
  padding: 8px 12px;
  width: fit-content;
}
.advance-flight-brand svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 20px; }
.advance-flight-copy h2 {
  font: 700 clamp(42px, 4.2vw, 64px)/.98 var(--font-serif);
  letter-spacing: -.045em;
  margin: 0 0 16px;
}
.advance-flight-copy p { color: #344260; font-size: 13px; line-height: 1.55; margin: 0; max-width: 420px; }
.advance-chat-preview { margin-top: 14px; width: min(380px, 78vw); }
.advance-chat-form { max-width: 380px; }
.advance-chat-box {
  align-items: center;
  background: rgba(255, 255, 255, .82);
  border: 1px solid #ddd6ce;
  border-radius: 14px;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  min-height: 84px;
  padding: 14px;
  transition: border-color .25s, box-shadow .25s;
}
.advance-chat-box:focus-within { border-color: #9d8ae5; box-shadow: 0 0 0 3px rgba(99, 56, 238, .08); }
.advance-chat-box input { align-self: start; background: transparent; border: 0; color: #28263d; font: 13px var(--font-body); grid-column: 1 / -1; outline: 0; width: 100%; }
.advance-chat-box input::placeholder { color: #666681; opacity: 1; }
.advance-chat-send { background: transparent; border: 0; cursor: pointer; display: grid; place-items: center; }
.advance-chat-send { background: #0758ee; border-radius: 50%; box-shadow: 0 7px 16px rgba(7, 88, 238, .24); color: #fff; font-size: 17px; grid-column: 2; height: 36px; transition: transform .25s, box-shadow .25s; width: 36px; }
.advance-chat-send:hover { box-shadow: 0 10px 26px rgba(99, 56, 238, .34); transform: scale(1.06); }
.advance-chat-suggestions { display: grid; gap: 6px; margin-top: 10px; }
.advance-chat-suggestions button { align-items: center; background: rgba(255, 255, 255, .82); border: 1px solid rgba(215, 222, 233, .9); border-radius: 9px; color: #344260; cursor: pointer; display: grid; font: 11px var(--font-body); grid-template-columns: 20px 1fr auto; min-height: 36px; padding: 6px 12px; text-align: left; width: 300px; }
.advance-chat-suggestions button span { color: #274475; font-size: 15px; }
.advance-chat-suggestions button i { color: #17325e; font-size: 20px; font-style: normal; line-height: 1; }
.advance-chat-suggestions button:hover { background: #fff; border-color: #8c78df; color: #4f31dc; }
.advance-chat-status { color: var(--landing-ink); font-size: 11px; min-height: 17px; padding-top: 8px; }
@media (max-width: 640px) {
  /* Full-bleed on phones, so the card chrome that framed the old inset opening
     goes: the radius, border and shadow all belonged to a card with page
     showing around it. The base rule's shadow already fades in with progress,
     which is the only one that still makes sense once this is travelling. The
     flat blue is what paints under the artwork before it decodes, and matches
     the sky the composition opens on. */
  .advance-image-flight { background: #cce8f8; }
  .advance-flight-copy::before {
    background: linear-gradient(180deg, rgba(244, 250, 255, .18) 0%, rgba(244, 250, 255, .12) 46%, rgba(244, 250, 255, .06) 72%, rgba(244, 250, 255, .01) 100%);
    content: '';
    inset: -22px -20px -28px;
    pointer-events: none;
    position: absolute;
    z-index: -1;
  }
  /* The phone crop used to be an oversized image hung off the top of this
     frame, which is a second way of framing the artwork and could only ever
     agree with the docked crop by accident. It is now stated as the view
     app.js already speaks — PHONE_HEAD_IN_HERO, PHONE_HEAD_TOP,
     PHONE_FOOT_BLEED and PHONE_ANCHOR_X — and lands the same composition: her
     hair 92px below the top edge, clear of the menu floating over this frame,
     her foot 6px past the bottom so no sub-pixel seam shows as a bright line
     under her trousers, and 51% across so the artwork's white frame is carried
     beyond the right edge. Being one framing rather than two, it collapses
     into the card here exactly as it does on the desktop. */
  /* Span the frame so the conversation can be pinned to its foot: the
     introduction stays at the top and the artwork keeps the space between.
     The offsets were measured from the old inset card, so they carry its
     inset now that the frame is the viewport — 86px down is where the
     introduction already sat, and clears the menu floating above it. */
  .advance-flight-copy {
    --advance-mobile-copy-shift: clamp(100px, 16vh, 115px);
    bottom: 34px;
    display: flex;
    flex-direction: column;
    left: 24px;
    max-width: none;
    right: 24px;
    top: 86px;
    z-index: 2;
  }
  .advance-flight-brand {
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(7, 35, 69, .08);
    font-size: 11px;
    gap: 7px;
    margin: 0 auto 14px;
    padding: 7px 11px;
  }
  .advance-flight-brand svg { height: 17px; width: 17px; }
  .advance-flight-copy h2,
  .advance-flight-copy p {
    -webkit-text-stroke: .6px rgba(255, 255, 255, .92);
    color: #000;
    paint-order: stroke fill;
    text-align: center;
    text-shadow: 0 1px 3px rgba(255, 255, 255, .78);
  }
  .advance-flight-copy h2 {
    font-size: clamp(36px, 11.5vw, 44px);
    line-height: .96;
    margin-bottom: 22px;
    /* Keep the opening message below the subject's face without changing the
       desktop composition or moving the eyebrow badge. */
    transform: translateY(calc(-6px + var(--advance-mobile-copy-shift)));
  }
  .advance-flight-copy p { font-size: 12px; line-height: 1.45; margin-inline: auto; max-width: 100%; transform: translateY(calc(var(--advance-mobile-copy-shift) - 12px)); }
  .advance-flight-copy p {
    -webkit-text-stroke: .8px #000;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .72);
  }
  /* Sit at the foot of the card, leaving the portrait unobstructed between the
     introduction and the controls. */
  .advance-chat-preview { margin-top: auto; padding-top: 20px; width: 100%; }
  .advance-chat-form { max-width: none; }
  .advance-chat-box {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .98);
    box-shadow: 0 7px 22px rgba(7, 35, 69, .1);
    min-height: 72px;
    padding: 12px;
  }
  .advance-chat-box input,
  .advance-chat-box input::placeholder { color: #000; }
  .advance-chat-suggestions { display: grid; }
  .advance-chat-suggestions button {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .98);
    box-shadow: 0 4px 14px rgba(7, 35, 69, .08);
    min-height: 38px;
    text-align: left;
    width: 100%;
  }
  .advance-chat-suggestions button,
  .advance-chat-suggestions button span,
  .advance-chat-suggestions button i { color: #000; }
  .advance-chat-status { display: none; }
}
@media (max-width: 640px) and (max-height: 680px) {
  /* 8px used to mean 8px inside a frame that started below the menu. The frame
     is the viewport now, so this has to clear the menu on its own — it just
     buys back a little of the 86px the taller screens can afford. */
  .advance-flight-copy { top: 78px; }
  .advance-flight-brand { margin-bottom: 9px; }
  .advance-flight-copy h2 { font-size: 34px; margin-bottom: 16px; }
  .advance-flight-copy p { font-size: 11px; line-height: 1.35; }
  .advance-chat-preview { padding-top: 14px; }
  .advance-chat-box { min-height: 62px; }
  .advance-chat-suggestions { gap: 5px; margin-top: 7px; }
  .advance-chat-suggestions button { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .advance-chat-send { transition: none; } }

/* The closing line follows Vestmind Lens rather than the pinned row: once
   the products and the lens that reads the web for them have both been
   shown, it is the sentence that ties them together. */
.context-line {
  color: #07162f;
  font: 20px var(--font-serif);
  letter-spacing: var(--font-tracking-headline);
  margin-bottom: 0;
  margin-top: 0;
  padding: 6px 20px 64px;
  text-align: center;
}

/*
 * Motion.
 *
 * One language for the whole page below the pieces, stated once as tokens:
 * how far ahead of the scroll the copy runs, how far the cards run, how far
 * behind it the photographs trail, and how far a line rises as it arrives.
 * app.js gives each block its role (`data-motion`) and nothing else; every
 * movement is a scroll-driven animation, which the browser runs on its
 * compositor thread in the same frame as the scroll itself. Nothing is timed,
 * so it keeps the reader's pace and reverses exactly; nothing is scripted, so
 * it cannot fall a frame behind the page and shiver against it.
 *
 * Depth runs for the whole crossing (`cover`): a block enters pushed back by
 * its tier's distance, passes through the composition exactly as drawn with
 * its box centred on the screen, and leaves carried ahead by the same
 * distance — so over the same scroll the copy travels further than the page,
 * and the photograph under it less far.
 *
 * Everything here sits behind `prefers-reduced-motion: no-preference` and
 * `@supports (animation-timeline: view())`; outside them the page is simply
 * still, and app.js gives a browser without scroll timelines the same curves.
 */
:root {
  --motion-near: 12vh;
  --motion-mid: 6vh;
  --motion-photo: 10vh;
  --motion-rise: clamp(22px, 4.5vh, 44px);
}

/* The photograph a full-bleed section is printed on, as a layer of its own so
   it can trail the copy on the compositor rather than being repainted. It
   inherits the section's own picture — its ladder of widths, its crop and its
   position at every breakpoint — so there is still one place that says which
   picture a section shows. Without motion it is not drawn at all, and the
   section's own background is what shows. */
.section-photo { display: none; }

@keyframes motion-depth {
  from { translate: 0 var(--motion-depth); }
  to { translate: 0 calc(var(--motion-depth) * -1); }
}
@keyframes motion-depth-leaving {
  from { translate: 0 0; }
  to { translate: 0 calc(var(--motion-depth) * -1); }
}
/* The same depth on `transform`, for a block that also arrives: arrival owns
   `translate`, and the two properties compose rather than overwrite. */
@keyframes motion-depth-transform {
  from { transform: translateY(var(--motion-depth)); }
  to { transform: translateY(calc(var(--motion-depth) * -1)); }
}
/* Arrival and departure are one animation over the whole crossing rather
   than two: the browser will only run an element's animations on its
   compositor if no two of them touch the same property, and a pair of them
   each moving `opacity` and `translate` would put both back on the main
   thread. Each stretch carries its own easing — out on the way in, in on the
   way out — and the stretch between them holds the composition still. */
@keyframes motion-line {
  0% { animation-timing-function: cubic-bezier(.16, 1, .3, 1); opacity: 0; translate: 0 var(--motion-rise); }
  38% { opacity: 1; translate: 0 0; }
  70% { animation-timing-function: cubic-bezier(.5, 0, .75, 0); opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 calc(var(--motion-rise) * -.5); }
}
@keyframes motion-settle {
  from { opacity: 0; translate: 0 var(--motion-rise); }
  to { opacity: 1; translate: 0 0; }
}
@keyframes motion-frame {
  0% { animation-timing-function: cubic-bezier(.16, 1, .3, 1); opacity: 0; scale: .9; }
  40% { opacity: 1; scale: 1; }
  72% { animation-timing-function: cubic-bezier(.5, 0, .75, 0); opacity: 1; scale: 1; }
  100% { opacity: 0; scale: .94; }
}
@keyframes motion-window {
  from { translate: 0 -7%; }
  to { translate: 0 7%; }
}
@keyframes motion-ways-lead {
  from { translate: 0 0; }
  to { translate: 0 calc(var(--motion-mid) * -1.4); }
}
@keyframes motion-ways-trail {
  from { translate: 0 0; }
  to { translate: 0 var(--motion-photo); }
}
@keyframes motion-photo {
  from { translate: 0 calc(var(--motion-photo) * -1); }
  to { translate: 0 var(--motion-photo); }
}
@keyframes motion-photo-anchored {
  from { translate: 0 calc(var(--motion-photo) * -2); }
  to { translate: 0 0; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="near"] { --motion-depth: var(--motion-near); }
    [data-motion~="mid"] { --motion-depth: var(--motion-mid); }

    /* Depth: linear, because a plane travelling at its own steady rate is
       what near and far look like through a moving window. */
    [data-motion~="near"],
    [data-motion~="mid"],
    [data-motion~="window"],
    .section-photo {
      animation-fill-mode: both;
      animation-name: motion-depth;
      animation-range: cover 0% cover 100%;
      animation-timeline: view();
      animation-timing-function: linear;
    }

    /* Arrival and departure. A line settles while it is still in the lower
       part of the screen, so nothing is read while it moves, and fades away
       as it passes under the menu. */
    [data-motion~="arrive"] {
      animation-fill-mode: both;
      animation-name: motion-line;
      animation-range: cover 0% cover 100%;
      animation-timeline: view();
      animation-timing-function: linear;
    }
    [data-motion~="settle"] {
      animation: motion-settle cubic-bezier(.16, 1, .3, 1) both;
      animation-range: entry 0% entry 100%;
      animation-timeline: view();
    }
    [data-motion~="arrive"][data-motion~="mid"] {
      animation-name: motion-depth-transform, motion-line;
      animation-timeline: view(), view();
    }

    /* Framed media opens from a slightly smaller frame and closes the same
       way; the picture inside it is cut a little larger than the frame and
       drifts behind the glass for the whole crossing. */
    [data-motion~="frame"] {
      animation-fill-mode: both;
      animation-name: motion-frame;
      animation-range: cover 0% cover 100%;
      animation-timeline: view();
      animation-timing-function: linear;
    }
    [data-motion~="window"] { animation-name: motion-window; scale: 1.18; }

    /* The photographs trail. The layer is cut taller than its section by the
       distance it travels on each side, and the section clips it — `clip`
       rather than `hidden`, which would make a scroll container. `isolation`
       keeps it above the section's own background and beneath everything
       the section holds. */
    .always,
    .clarity,
    .privacy-section { isolation: isolate; overflow: clip; }
    .section-photo {
      animation-name: motion-photo;
      background-image: inherit;
      background-position: inherit;
      background-repeat: inherit;
      background-size: inherit;
      display: block;
      inset: calc(var(--motion-photo) * -1) 0;
      pointer-events: none;
      position: absolute;
      z-index: -1;
    }
    /* This crop is anchored to the top of its frame with all of its room
       below, so its layer only extends downwards and never shows a top edge
       — which means it can only trail on the way in, when it sits higher
       than drawn. Its illustration is printed right under the heading, so it
       trails by less, and the heading takes its lead only on the way out:
       arriving, it would be pushed down into the picture rising to meet it. */
    .privacy-section { --motion-photo: 2.5vh; }
    /* And since the layer only reaches downwards, only the foot is clipped:
       the heading sits close under the section's top edge, and leading its
       way out it passes over that edge rather than being cut by it. */
    .privacy-section { clip-path: inset(-100vh 0 0 0); overflow: visible; }
    .privacy-heading { animation-name: motion-depth-leaving; animation-range: cover 50% cover 100%; }
    .privacy-section > .section-photo {
      animation-name: motion-photo-anchored;
      /* It does all of its trailing on the way in and is exactly as drawn
         from the moment the section is centred. */
      animation-range: cover 0% cover 50%;
      inset: 0 0 calc(var(--motion-photo) * -2);
    }

    /* The product section leaves the way every section below it does, on
       its own view timeline: from the moment the pinned scene is released
       (the section's foot reaching the bottom of the screen) to the moment it
       is gone. The promise leads, the pieces follow it, and the wash trails —
       on `translate`, beneath the `transform` app.js still sets while the
       scene is pinned, so the two phases simply add. */
    .ways { view-timeline: --ways block; }
    .ways-stage,
    .ways-intro,
    .ways-scene::before,
    .ways-scene > .journey-carousel-controls {
      animation: motion-ways-lead cubic-bezier(.35, 0, .65, 1) both;
      animation-range: exit 0% exit 100%;
      animation-timeline: --ways;
    }
    .ways-scene::before { animation-name: motion-ways-trail; }
  }
}

/*
 * Vestmind Lens — the extension, shown doing its work.
 *
 * The demo is one page of the web with the extension's four steps laid over
 * it: the selection, the explanation, the working, and the handoff into
 * VestMonitor. Every step is in the markup, and `data-step` on `.lens-demo`
 * says how far through them the page is. Each annotation reads one number,
 * `--lens-on`, which is 1 once its step (`data-from`) has been reached and 0
 * before it — so a highlight sweeps, a circle draws and a card rises from the
 * same switch, and stepping backwards simply runs them in reverse.
 */
/*
 * No edge between the product row and this section. The row's wash is cut
 * off at the foot of its section, so this section paints nothing of its own
 * along its top: its washes sit well inside it, and a feather laid across
 * the boundary (above the row's section, hence the z-index) dissolves the
 * cut into the page. The kicker then follows the row's own ornament closely,
 * so the two read as one passage rather than two sections with a gap.
 */
.lens-showcase {
  background:
    radial-gradient(circle at 90% 40%, rgba(255, 233, 196, .5), transparent 26rem),
    radial-gradient(circle at 6% 68%, rgba(219, 239, 255, .62), transparent 28rem);
  color: #07162f;
  font-family: var(--font-body);
  font-weight: var(--font-weight-text);
  letter-spacing: var(--font-tracking-text);
  padding: 28px clamp(22px, 6vw, 112px) 40px;
  position: relative;
  z-index: 4;
}
.lens-showcase::before {
  background: linear-gradient(180deg,
    rgba(241, 247, 251, 0) 0,
    rgba(241, 247, 251, .92) 42%,
    rgba(241, 247, 251, .92) 58%,
    rgba(241, 247, 251, 0) 100%);
  content: '';
  height: 200px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(var(--lens-overlap) - 100px);
  z-index: -1;
}
/* On a desktop the pinned scene above is a screen tall and its stage only
   fills the top of it, so the foot of that section is empty. This section
   rises into that emptiness, and only into it: the stage's height is the
   same expression `.ways-stage` sizes itself by (its width over 2.05), the
   rest of the scene below it is free. The pieces' lower tabs hang a little
   past the stage, so the section stops 30px short of the stage's foot (the
   scene's 12px top, its 18px of section padding): just clear of the cards,
   so it never takes a click meant for one. The feather above follows the
   boundary it is there to hide, and stays below the cards. */
.lens-showcase { --lens-overlap: 0px; }
@media (min-width: 901px) {
  .lens-showcase {
    --lens-overlap: max(0px, calc(100vh - var(--primary-menu-height) - 12px - min(47.8vw, 897px, 100vh - 155px)));
    margin-top: calc(var(--lens-overlap) * -1);
  }
}
.lens-showcase-heading { isolation: isolate; margin: 0 auto; max-width: 900px; position: relative; text-align: center; z-index: 3; }
.lens-showcase-kicker { align-items: center; color: #07162f; display: flex; font-size: 12px; font-weight: 700; gap: 12px; justify-content: center; letter-spacing: .16em; }
.lens-showcase-kicker span { background: #ee9414; display: block; height: 1px; width: 39px; }
.lens-showcase-kicker svg { fill: none; height: 17px; stroke: #e9920e; stroke-linecap: round; stroke-width: 2.4; width: 17px; }
.lens-showcase-heading h2 { color: #07162f; font-family: var(--font-display); font-size: clamp(35px, 3.4vw, 58px); font-weight: var(--font-weight-headline); letter-spacing: var(--font-tracking-headline); line-height: 1.04; margin: 12px 0 14px; }
.lens-showcase-heading h2 em { color: #ec920d; font-style: normal; font-weight: 500; }
.lens-showcase-heading > p { color: #3d4c63; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.55; margin: 0 auto; max-width: 720px; }

.lens-showcase-body {
  align-items: start;
  display: grid;
  gap: clamp(28px, 3.4vw, 56px);
  grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
  margin: 44px auto 0;
  max-width: 1320px;
}

/* The four kinds of page, as the tabs that choose between them. */
.lens-sources-label { color: #8592a6; font-size: 11px; font-weight: 700; letter-spacing: .16em; margin: 4px 0 12px; text-transform: uppercase; }
.lens-sources-list { display: grid; gap: 10px; }
.lens-sources-list button {
  align-items: center;
  background: rgba(255, 255, 255, .78);
  border: 1px solid #e1e9f3;
  border-radius: 16px;
  color: #07162f;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: 44px 1fr;
  padding: 13px 16px;
  text-align: left;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease, transform .3s ease;
}
.lens-sources-list button:hover { border-color: #c9dbef; box-shadow: 0 12px 26px rgba(25, 75, 132, .08); transform: translateY(-1px); }
.lens-sources-list button:focus-visible,
.lens-steps button:focus-visible,
.lens-cta:focus-visible { outline: 2px solid #1466e8; outline-offset: 3px; }
.lens-sources-list button > i { align-items: center; background: #fff1dc; border-radius: 50%; color: #d47d00; display: flex; height: 44px; justify-content: center; transition: background-color .3s ease, color .3s ease; width: 44px; }
.lens-sources-list svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 21px; }
.lens-sources-list b { display: block; font-size: 15px; font-weight: 600; }
.lens-sources-list small { color: #5d6f88; display: block; font-size: 12.5px; margin-top: 2px; transition: color .3s ease; }
.lens-sources-list button.active { background: #080b18; border-color: #c7973b; box-shadow: 0 14px 28px rgba(8, 25, 51, .2); color: #fff; }
.lens-sources-list button.active > i { background: rgba(233, 154, 27, .16); color: #f0b24a; }
.lens-sources-list button.active small { color: #c4ccd8; }
.lens-promises { border-top: 1px solid #e3e9f1; display: grid; gap: 10px; list-style: none; margin: 22px 0 0; padding: 18px 0 0; }
.lens-promises li { align-items: center; color: #3d4c63; display: flex; font-size: 13.5px; gap: 10px; }
.lens-promises svg { fill: none; flex: 0 0 18px; height: 18px; stroke: #d69a2d; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 18px; }

/* The page being read, and the extension over it. */
.lens-demo { --lens-dwell: 3200ms; min-width: 0; position: relative; }
.lens-scene { align-items: start; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.lens-scene[hidden] { display: none; }
.lens-scene.is-entering { animation: lens-scene-in 520ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes lens-scene-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.lens-window {
  background: #fff;
  border: 1px solid #dde7f2;
  border-radius: 18px;
  box-shadow: 0 34px 64px -30px rgba(17, 43, 75, .38), 0 2px 6px rgba(17, 43, 75, .05);
  grid-column: 1 / span 8;
  grid-row: 1;
  min-height: 400px;
  overflow: hidden;
}
.lens-window-bar { align-items: center; background: #f5f8fc; border-bottom: 1px solid #e6edf5; display: flex; gap: 12px; padding: 10px 14px; }
.lens-dots { display: flex; gap: 6px; }
.lens-dots i { background: #f1b5a9; border-radius: 50%; height: 9px; width: 9px; }
.lens-dots i:nth-child(2) { background: #f3d49c; }
.lens-dots i:nth-child(3) { background: #b8dfc3; }
.lens-url { align-items: center; background: #fff; border: 1px solid #e3eaf3; border-radius: 999px; color: #6a7a90; display: flex; flex: 1; font-size: 12px; gap: 6px; min-width: 0; overflow: hidden; padding: 5px 12px; text-overflow: ellipsis; white-space: nowrap; }
.lens-url svg { fill: none; flex: 0 0 12px; height: 12px; stroke: #78889e; stroke-width: 2; width: 12px; }
.lens-toolbar-icon { align-items: center; background: #fff; border: 1px solid #e3eaf3; border-radius: 9px; display: flex; flex: 0 0 30px; height: 30px; justify-content: center; transition: border-color .3s ease, box-shadow .3s ease; }
.lens-toolbar-icon img { height: 14px; object-fit: contain; width: 20px; }
.lens-demo[data-step="1"] .lens-toolbar-icon { animation: lens-toolbar-pulse 1.6s ease-in-out infinite; border-color: #e9a53a; }
@keyframes lens-toolbar-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(233, 154, 27, .34); } 50% { box-shadow: 0 0 0 6px rgba(233, 154, 27, 0); } }

.lens-page { padding: 26px clamp(20px, 2.4vw, 32px) 30px; }
/* The cards stand over the last quarter of the window (columns 7 and 8 of
   its 8), so what is being read is kept to the three quarters they leave. */
.lens-scene .lens-page { padding-right: calc(25% + 14px); }
.lens-page-kicker { color: #c07408; font-size: 11px; font-weight: 700; letter-spacing: .14em; margin: 0 0 10px; text-transform: uppercase; }
.lens-page-headline { font-family: var(--font-display); font-size: clamp(21px, 1.9vw, 29px); font-weight: var(--font-weight-headline); letter-spacing: var(--font-tracking-headline); line-height: 1.18; margin: 0 0 8px; max-width: 30ch; }
.lens-page-byline { color: #8592a6; font-size: 12px; margin: 0 0 16px; }
.lens-page-text { color: #2d3c53; font-size: 15px; line-height: 1.7; margin: 0 0 18px; max-width: 46ch; }
.lens-skeleton i { background: #edf2f8; border-radius: 5px; display: block; height: 9px; margin-top: 10px; max-width: 46ch; }
.lens-skeleton i.is-short { width: 58%; }

.lens-filing-table { border-collapse: collapse; font-size: 13.5px; margin: 4px 0 18px; max-width: 420px; width: 100%; }
.lens-filing-table th,
.lens-filing-table td { border-bottom: 1px solid #edf1f6; padding: 9px 6px; text-align: right; }
.lens-filing-table th:first-child { text-align: left; }
.lens-filing-table thead th { color: #8592a6; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lens-filing-table tbody th { font-weight: 600; }
.lens-filing-table td { font-variant-numeric: tabular-nums; }
.lens-filing-table td:last-child { color: #078771; font-weight: 600; }

.lens-chart { margin: 2px 0 10px; max-width: 460px; }
.lens-chart svg { display: block; height: auto; overflow: visible; width: 100%; }
.lens-chart-grid path { stroke: #edf2f8; stroke-width: 1; }
.lens-chart-axis text { fill: #8592a6; font-size: 9px; }
.lens-chart-axis text:not([text-anchor]) { text-anchor: end; }
.lens-chart-area { fill: rgba(20, 102, 232, .07); }
.lens-chart-line { fill: none; stroke: #1466e8; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.lens-chart-dot { fill: #1466e8; stroke: #fff; stroke-width: 1.6; }

/* A paused video: the frame is a creator's slide, with the captions and the
   player's controls over its foot, as YouTube leaves them on pause. */
.lens-video { aspect-ratio: 16 / 9; background: #0b1222; border-radius: 12px; color: #fff; margin: 0 0 14px; max-width: 460px; overflow: hidden; position: relative; }
.lens-video-frame { background: radial-gradient(circle at 78% 24%, rgba(236, 146, 13, .22), transparent 55%), linear-gradient(160deg, #13203a, #0b1222 70%); inset: 0; padding: 7% 8%; position: absolute; }
.lens-video-slide-kicker { color: #f0b24a; font-size: 11px; font-weight: 700; letter-spacing: .14em; margin: 0 0 6px; text-transform: uppercase; }
.lens-video-slide-figure { align-items: baseline; display: flex; flex-wrap: wrap; font-family: var(--font-display); font-size: clamp(30px, 3vw, 44px); font-weight: var(--font-weight-headline); gap: 0 10px; line-height: 1.1; margin: 0; }
.lens-video-slide-figure small { color: #c4ccd8; font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.lens-video-slide-line { bottom: 30%; height: 26%; left: 8%; overflow: visible; position: absolute; width: 50%; }
.lens-video-slide-line path { fill: none; stroke: #ff6b5b; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.lens-video-region {
  background: rgba(233, 154, 27, .08);
  border: 1.4px dashed #f0a43a;
  border-radius: 6px;
  height: 66%;
  left: 5%;
  opacity: var(--lens-on);
  position: absolute;
  top: 5%;
  transform: scale(var(--lens-on));
  transform-origin: 0 0;
  transition: opacity .3s ease, transform .9s cubic-bezier(.3, .7, .3, 1);
  width: 62%;
}
.lens-video-caption { background: rgba(8, 11, 24, .78); border-radius: 4px; bottom: 19%; font-size: 12px; left: 50%; line-height: 1.35; margin: 0; max-width: 86%; padding: 3px 8px; position: absolute; text-align: center; transform: translateX(-50%); width: max-content; }
.lens-video-controls { align-items: center; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); bottom: 0; display: flex; gap: 10px; left: 0; padding: 14px 12px 8px; position: absolute; right: 0; }
.lens-video-controls svg { fill: #fff; flex: 0 0 14px; height: 14px; width: 14px; }
.lens-video-progress { background: rgba(255, 255, 255, .28); border-radius: 2px; flex: 1; height: 3px; overflow: hidden; }
.lens-video-progress i { background: #ff3b30; display: block; height: 100%; width: 52%; }
.lens-video-controls small { color: #e4e9f0; font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lens-video-title { font-family: var(--font-display); font-size: clamp(17px, 1.4vw, 21px); font-weight: var(--font-weight-headline); letter-spacing: var(--font-tracking-headline); line-height: 1.25; margin: 0 0 6px; max-width: 34ch; }

/* Each annotation reads `--lens-on` (see the top of this block). */
.lens-demo [data-from] { --lens-on: 1; }
.lens-demo[data-step="1"] [data-from]:not([data-from="1"]),
.lens-demo[data-step="2"] :is([data-from="3"], [data-from="4"]),
.lens-demo[data-step="3"] [data-from="4"] { --lens-on: 0; }

.lens-mark {
  background-color: transparent;
  background-image: linear-gradient(transparent 56%, rgba(255, 214, 120, .85) 56%);
  background-repeat: no-repeat;
  background-size: calc(var(--lens-on) * 100%) 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: inherit;
  transition: background-size 1.1s cubic-bezier(.3, .7, .3, 1);
}
.lens-circle { display: inline-block; position: relative; white-space: nowrap; }
.lens-circle svg { height: 150%; left: -18%; overflow: visible; pointer-events: none; position: absolute; top: -24%; width: 136%; }
.lens-circle path {
  fill: none;
  stroke: #e48a0c;
  stroke-dasharray: 300;
  stroke-dashoffset: calc((1 - var(--lens-on)) * 300);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  transition: stroke-dashoffset .9s ease-out .15s;
  vector-effect: non-scaling-stroke;
}
.lens-region {
  fill: rgba(233, 154, 27, .07);
  opacity: var(--lens-on);
  stroke: #e48a0c;
  stroke-dasharray: 5 4;
  stroke-width: 1.4;
  transform: scale(var(--lens-on));
  transform-box: fill-box;
  transform-origin: 0 0;
  transition: opacity .3s ease, transform .9s cubic-bezier(.3, .7, .3, 1);
}
.lens-chart-ring {
  fill: none;
  stroke: #e48a0c;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--lens-on));
  stroke-linecap: round;
  stroke-width: 2;
  transition: stroke-dashoffset .9s ease-out .15s;
}

/* The two cards share one cell, so the Lens card and the VestMonitor card it
   hands over to stack rather than push each other about, and the scene is as
   tall as the taller of them at every step. */
.lens-cards { display: grid; grid-column: 7 / -1; grid-row: 1; margin-top: 96px; position: relative; z-index: 2; }
.lens-card {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, .97);
  border: 1px solid #efdfc2;
  border-radius: 16px;
  box-shadow: 0 26px 52px -22px rgba(8, 25, 51, .38);
  grid-area: 1 / 1;
  opacity: var(--lens-on);
  padding: 15px 18px 16px;
  transform: translateY(calc((1 - var(--lens-on)) * 14px));
  transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1), filter .45s ease;
}
/* Inside the Lens card a step's block also opens to its height as it is
   reached, so the card grows the way the extension's own canvas does. The
   card never sets the scene's height: VestMonitor's card, laid out at every
   step and only faded, is the taller of the two, so the steps below the
   demo stay where the reader's pointer left them. */
.lens-card [data-from] {
  max-height: calc(var(--lens-on) * 260px);
  opacity: var(--lens-on);
  overflow: hidden;
  transform: translateY(calc((1 - var(--lens-on)) * 8px));
  transition: max-height .6s cubic-bezier(.22, 1, .36, 1), opacity .45s ease .1s, transform .55s cubic-bezier(.22, 1, .36, 1) .1s,
              margin .6s cubic-bezier(.22, 1, .36, 1), padding .6s cubic-bezier(.22, 1, .36, 1);
}
.lens-explain { align-self: start; border-top: 3px solid #e9a53a; }
/* Handing over, the Lens card steps back behind VestMonitor's. It stays
   opaque, so the page under it never shows through; only its contents dim. */
.lens-demo[data-step="4"] .lens-explain { filter: saturate(.5); transform: translate(-5%, -18px) scale(.94); }
.lens-demo[data-step="4"] .lens-explain > * { opacity: .4; }
.lens-impact { align-self: start; border-color: #cfe0f4; border-top: 3px solid #1466e8; margin: 52px 0 0 -4%; transform: translateY(calc((1 - var(--lens-on)) * 26px)); }

.lens-card-head { align-items: center; display: flex; font-size: 12px; gap: 8px; margin: 0; }
.lens-card-head img { height: 14px; object-fit: contain; width: 20px; }
.lens-card-head b { font-size: 13px; font-weight: 700; }
.lens-card-head kbd { background: #f4f6fa; border: 1px solid #e1e6ee; border-radius: 6px; color: #5d6f88; font: 600 10.5px var(--font-body); margin-left: auto; padding: 2px 7px; }
.lens-impact .lens-card-head b { color: #1466e8; }
.lens-impact .lens-card-head span { background: #eaf3ff; border-radius: 999px; color: #1466e8; font-size: 10.5px; font-weight: 600; margin-left: auto; padding: 3px 9px; }
.lens-step-read { margin-top: 12px; }
.lens-step-read small { color: #8592a6; display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lens-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.lens-chips span { background: #fff6e6; border: 1px solid #f3dcb3; border-radius: 999px; color: #9a6512; font-size: 11.5px; padding: 3px 9px; }
.lens-card-title { font-family: var(--font-display); font-size: 17px; font-weight: var(--font-weight-headline); letter-spacing: var(--font-tracking-headline); line-height: 1.25; margin: 14px 0 8px; }
.lens-flow { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lens-flow b { background: #eef5ff; border-radius: 8px; color: #0f4fb8; font-size: 12px; font-weight: 600; padding: 5px 9px; }
.lens-flow i { color: #d69a2d; font-style: normal; font-weight: 700; }
.lens-math { border-top: calc(var(--lens-on) * 1px) dashed #e1e7ef; margin-top: calc(var(--lens-on) * 13px); padding-top: calc(var(--lens-on) * 9px); }
.lens-math p { align-items: center; display: grid; font-size: 12.5px; gap: 8px; grid-template-columns: 70px 1fr auto; margin: 5px 0; }
.lens-math span { color: #6a7a90; }
.lens-math b { font-variant-numeric: tabular-nums; font-weight: 600; }
.lens-math em { background: #fff6e6; border-radius: 999px; color: #9a6512; font-size: 10.5px; font-style: normal; padding: 2px 8px; white-space: nowrap; }
.lens-math .lens-math-result { background: #07162f; border-radius: 10px; color: #fff; margin-top: 9px; padding: 9px 11px; }
.lens-math-result span { color: #a9b7cc; }
.lens-math-result strong { color: #f3c46b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lens-impact ul { list-style: none; margin: 4px 0 0; padding: 0; }
.lens-impact li { align-items: center; border-top: 1px solid #edf1f6; display: flex; gap: 10px; justify-content: space-between; padding: 9px 0; }
.lens-impact li b { display: block; font-size: 13px; font-weight: 600; }
.lens-impact li small { color: #6a7a90; display: block; font-size: 11.5px; margin-top: 1px; }
.lens-impact li em { background: #eef1f5; border-radius: 999px; color: #5d6f88; flex: 0 0 auto; font-size: 10.5px; font-style: normal; font-weight: 700; padding: 3px 9px; }
.lens-impact li em.is-touch { background: #fff1dc; color: #b06400; }
.lens-impact li em.is-watch { background: #eaf3ff; color: #1466e8; }
.lens-impact-foot { display: flex; gap: 8px; margin: 8px 0 0; }
.lens-impact-foot span { background: #f5f8fc; border-radius: 10px; color: #6a7a90; flex: 1; font-size: 11px; padding: 8px 10px; }
.lens-impact-foot b { color: #078771; display: block; font-size: 13px; margin-top: 1px; }

/* The four steps, as the controls that walk through them. While the tour
   plays, the current step's rule fills over the time it is shown; holding
   the pointer over the demo, or a keyboard focus inside it, holds the tour. */
.lens-steps { display: flex; gap: 8px; margin-top: 26px; }
.lens-steps button[data-lens-step] {
  align-items: center;
  background: rgba(255, 255, 255, .78);
  border: 1px solid #e1e9f3;
  border-radius: 14px;
  color: #3d4c63;
  cursor: pointer;
  display: flex;
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  gap: 9px;
  min-height: 52px;
  overflow: hidden;
  padding: 10px 14px 13px;
  position: relative;
  text-align: left;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.lens-steps button[data-lens-step]:hover { border-color: #c9dbef; }
.lens-steps button[data-lens-step] b { color: #c07408; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.lens-steps button[data-lens-step] i { background: #e8eef5; border-radius: 2px; bottom: 7px; height: 2px; left: 14px; overflow: hidden; position: absolute; right: 14px; }
.lens-steps button[data-lens-step] i::after { background: #d69a2d; content: ''; inset: 0; position: absolute; transform: scaleX(0); transform-origin: left center; }
.lens-steps button.is-done i::after { opacity: .45; transform: scaleX(1); }
.lens-steps button[aria-current="step"] { background: #fff; border-color: #c7973b; box-shadow: 0 10px 22px rgba(8, 25, 51, .1); color: #07162f; }
.lens-steps button[aria-current="step"] i::after { transform: scaleX(1); }
.lens-demo.is-playing .lens-steps button[aria-current="step"] i::after { animation: lens-dwell var(--lens-dwell) linear both; }
.lens-demo.is-playing:is(:hover, :focus-within) .lens-steps button[aria-current="step"] i::after,
.lens-demo.is-playing.is-offscreen .lens-steps button[aria-current="step"] i::after { animation-play-state: paused; }
@keyframes lens-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lens-play { align-items: center; background: #080b18; border: 1px solid #c7973b; border-radius: 14px; color: #f0b24a; cursor: pointer; display: flex; flex: 0 0 52px; justify-content: center; transition: box-shadow .25s ease, transform .25s ease; }
.lens-play[hidden] { display: none; }
.lens-play:hover { box-shadow: 0 10px 22px rgba(8, 25, 51, .18); transform: translateY(-1px); }
.lens-play svg { fill: currentColor; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; width: 18px; }
.lens-pause-icon { fill: none; }
.lens-demo.is-playing .lens-play-icon,
.lens-demo:not(.is-playing) .lens-pause-icon { display: none; }

/* What Lens is for, in three lines, and the way in. */
.lens-values { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 56px auto 0; max-width: 1320px; }
.lens-values article { align-items: flex-start; background: rgba(255, 255, 255, .74); border: 1px solid rgba(235, 229, 219, .72); border-radius: 17px; box-shadow: 0 8px 24px rgba(55, 42, 25, .045); display: flex; gap: 16px; padding: 20px 22px; }
.lens-values i { align-items: center; background: #fbf4e8; border-radius: 50%; color: #e59419; display: flex; flex: 0 0 52px; height: 52px; justify-content: center; }
.lens-values svg { fill: none; height: 26px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 26px; }
.lens-values h3 { font-family: var(--font-display); font-size: 19px; font-weight: var(--font-weight-headline); letter-spacing: var(--font-tracking-headline); line-height: 1.2; margin: 3px 0 6px; }
.lens-values p { color: #56647b; font-size: 14px; line-height: 1.45; margin: 0; }
.lens-showcase-cta { margin-top: 28px; text-align: center; }
.lens-showcase-cta .lens-cta { margin: 0 auto 10px; }
.lens-showcase-cta p { color: #6a7a90; font-size: 12.5px; margin: 0; }

@media (max-width: 1100px) {
  .lens-showcase-body { grid-template-columns: 1fr; }
  .lens-sources-label { text-align: center; }
  .lens-sources-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lens-promises { border-top: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 4px; padding-top: 12px; }
}
@media (max-width: 760px) {
  .lens-showcase { padding: 24px 16px 28px; }
  .lens-showcase-kicker { font-size: 10px; gap: 9px; }
  .lens-showcase-kicker span { width: 22px; }
  .lens-showcase-heading h2 { font-size: 34px; }
  .lens-showcase-heading h2 br { display: none; }
  .lens-showcase-heading > p { font-size: 14px; }
  .lens-showcase-body { gap: 20px; margin-top: 28px; }
  /* The tabs scroll sideways here; the column must not widen to hold them. */
  .lens-sources { min-width: 0; }
  .lens-sources-list { display: flex; gap: 8px; margin-inline: -16px; overflow-x: auto; padding: 2px 16px 6px; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .lens-sources-list::-webkit-scrollbar { display: none; }
  .lens-sources-list button { flex: 0 0 auto; gap: 10px; grid-template-columns: 34px auto; padding: 9px 14px 9px 10px; scroll-snap-align: start; }
  .lens-sources-list button > i { height: 34px; width: 34px; }
  .lens-sources-list svg { height: 18px; width: 18px; }
  .lens-sources-list b { font-size: 14px; }
  .lens-sources-list small { display: none; }
  .lens-promises { display: none; }
  .lens-window { grid-column: 1 / -1; min-height: 0; }
  .lens-scene .lens-page { padding: 18px 18px 46px; }
  .lens-page-text { font-size: 14px; }
  .lens-cards { grid-column: 1 / -1; grid-row: 2; margin: -34px 10px 0; }
  .lens-impact { margin: 40px 0 0; }
  .lens-demo[data-step="4"] .lens-explain { transform: translateY(-12px) scale(.95); }
  .lens-steps { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)) 46px; margin-top: 18px; }
  .lens-steps button[data-lens-step] { align-items: flex-start; flex-direction: column; font-size: 11.5px; gap: 1px; line-height: 1.2; min-height: 54px; padding: 8px 9px 14px; }
  .lens-steps button[data-lens-step] i { left: 9px; right: 9px; }
  .lens-values { grid-template-columns: 1fr; margin-top: 36px; }
  .lens-values article { padding: 16px; }
  .lens-showcase-cta .lens-cta { font-size: 13px; max-width: 320px; width: 90%; }
  .context-line { font-size: 17px; padding-bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lens-scene.is-entering,
  .lens-demo[data-step="1"] .lens-toolbar-icon { animation: none; }
  .lens-showcase *,
  .lens-showcase *::after { transition: none !important; }
}

/* Full-bleed monitoring section. */
.always {
  background-color: #091012;
  background-image: url('/images/generated/landingPageCapitalMoves-768.webp');
  background-image: image-set(url('/images/generated/landingPageCapitalMoves-768.avif') type('image/avif'),
      url('/images/generated/landingPageCapitalMoves-768.webp') type('image/webp'));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  min-height: 650px;
  position: relative;
}

@media (min-width: 700px) {
  .always {
    background-image: url('/images/generated/landingPageCapitalMoves-1280.webp');
    background-image: image-set(url('/images/generated/landingPageCapitalMoves-1280.avif') type('image/avif'),
        url('/images/generated/landingPageCapitalMoves-1280.webp') type('image/webp'));
  }
}
@media (min-width: 1400px) {
  .always {
    background-image: url('/images/generated/landingPageCapitalMoves-1672.webp');
    background-image: image-set(url('/images/generated/landingPageCapitalMoves-1672.avif') type('image/avif'),
        url('/images/generated/landingPageCapitalMoves-1672.webp') type('image/webp'));
  }
}
.always::before {
  background:
    linear-gradient(180deg, rgba(139, 195, 230, .28) 0, rgba(91, 158, 204, .2) 7%, rgba(32, 88, 130, .1) 15%, transparent 24%),
    linear-gradient(90deg, rgba(4, 10, 12, .82) 0, rgba(4, 10, 12, .58) 38%, rgba(4, 10, 12, 0) 70%);
  content: '';
  inset: 0;
  position: absolute;
  pointer-events: none;
}
.always-copy {
  left: max(7vw, calc((100vw - var(--landing-max)) / 2));
  max-width: 640px;
  position: absolute;
  top: 75px;
}
.always .section-kicker.light {
  color: #fff;
  font-size: 12px;
  letter-spacing: .13em;
}
.always h2,
.clarity h2 {
  font: 400 31px/1.05 var(--font-serif);
  letter-spacing: -.015em;
  margin: 19px 0;
}
.always h2 {
  font-size: clamp(46px, 4vw, 64px);
  letter-spacing: -.025em;
  line-height: .99;
  margin: 25px 0 28px;
}
.always p { font-size: 15px; line-height: 1.55; max-width: 560px; }
.always-copy > button,
.watch-tabs span {
  background: transparent;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  padding: 11px 23px;
}
.always-copy > button { font-size: 14px; font-weight: 500; margin-top: 30px; padding: 15px 27px; }
.watch-tabs { bottom: -92px; display: flex; gap: 12px; position: absolute; }
.watch-tabs span { font-size: 12px; font-weight: 500; padding: 12px 22px; }
.watch-tabs .active { background: #fff; color: #111; }
.context-card {
  background: rgba(250, 248, 245, .94);
  border-radius: 10px;
  bottom: 16px;
  color: var(--landing-ink);
  padding: 24px;
  position: absolute;
  right: max(10vw, calc((100vw - 1250px) / 2));
  width: 410px;
}
.context-card small,
.context-card strong,
.context-card span { display: block; }
.context-card small { font-size: 12px; padding: 0 10px 5px; }
.context-card strong { font: 22px var(--font-serif); padding: 5px 10px 17px; }
.context-card span { border-top: 1px solid #ddd; font-size: 12px; line-height: 1.35; padding: 15px 10px; }
.context-card span b { color: var(--landing-violet); float: right; }

/* One financial life — the portfolio view. */
.financial-life {
  background:
    radial-gradient(circle at 91% 16%, rgba(219, 239, 255, .62), transparent 24rem),
    radial-gradient(circle at 9% 67%, rgba(231, 243, 252, .48), transparent 27rem),
    #fff;
  color: #07162f;
  font-family: var(--font-body);
  font-weight: var(--font-weight-text);
  letter-spacing: var(--font-tracking-text);
  padding: 58px clamp(22px, 7vw, 128px) 28px;
  position: relative;
}
.financial-life-heading {
  /* The heading is the foreground layer. Its faster landing-page depth rate
     can make its box cross the slower preview while the section enters; keep
     the words above that artwork rather than letting the later-painted preview
     obscure them. */
  isolation: isolate;
  position: relative;
  text-align: center;
  z-index: 5;
}
.financial-life-kicker,
.portfolio-eyebrow { align-items: center; color: #07162f; display: flex; font-size: 12px; font-weight: 700; gap: 15px; justify-content: center; letter-spacing: .13em; }
.financial-life-kicker span,
.portfolio-eyebrow span { background: #ee9414; display: block; height: 1px; width: 39px; }
.financial-life-heading h2 { color: #07162f; font-family: var(--font-display); font-size: clamp(35px, 3.4vw, 58px); font-weight: var(--font-weight-headline); letter-spacing: var(--font-tracking-headline); line-height: 1.02; margin: 10px 0 8px; }
.financial-life-heading h2 em { color: #ec920d; font-style: normal; font-weight: 500; }
.financial-life-heading > p { color: #07162f; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.35; margin: 0; }
.financial-life-tabs { background: rgba(255,255,255,.86); border: 1px solid #e99a1b; border-radius: 999px; box-shadow: 0 10px 24px rgba(199,151,59,.13); display: grid; grid-template-columns: 1fr 1fr; margin: 12px auto 16px; padding: 3px; width: 350px; }
.financial-life-tabs button { align-items: center; background: transparent; border: 0; border-radius: 999px; color: #07162f; cursor: pointer; display: flex; font-size: 14px; font-weight: 500; gap: 10px; justify-content: center; min-height: 48px; position: relative; transition: background-color .25s ease, box-shadow .25s ease, color .25s ease; }
.financial-life-tabs button svg { fill: none; height: 22px; stroke: #e9920e; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; width: 22px; }
.financial-life-tabs button:hover { background: rgba(233,154,27,.08); }
.financial-life-tabs button:active { background: rgba(233,154,27,.14); }
.financial-life-tabs button.active { background: #080b18; box-shadow: 0 5px 14px rgba(8,25,51,.2); color: #fff; }
.financial-life-panel {
  /* The tabs' bottom margin is the complete handoff into the active story.
     Parallax creates the moving separation; adding a second runway here made
     both columns begin needlessly low before the movement even started. */
  padding-top: 0;
  position: relative;
  z-index: 1;
}
.financial-life-panel[hidden] { display: none; }
.financial-life-panel.active { animation: financial-life-enter 520ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes financial-life-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.financial-life-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(390px, .85fr) minmax(520px, 1.2fr);
  margin: 0 auto;
  max-width: 1380px;
}
.portfolio-story { padding: 4px 0 0; position: relative; z-index: 2; }
.portfolio-eyebrow { justify-content: flex-start; }
.portfolio-story h3 { color: #07162f; font-family: var(--font-display); font-size: clamp(34px, 3vw, 49px); font-weight: var(--font-weight-headline); letter-spacing: var(--font-tracking-headline); line-height: 1.05; margin: 18px 0 13px; }
.portfolio-story > p { color: #07162f; font-size: 15px; line-height: 1.55; margin: 0 0 20px; max-width: 540px; }
.portfolio-features { display: grid; gap: 10px; }
.portfolio-features article { align-items: center; background: rgba(255,255,255,.75); border: 1px solid #dce8f5; border-radius: 17px; display: grid; gap: 18px; grid-template-columns: 53px 1fr 22px; min-height: 102px; padding: 13px 18px; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.portfolio-features article:hover { border-color: #b9d3ef; box-shadow: 0 12px 27px rgba(25,75,132,.08); transform: translateY(-2px); }
.portfolio-features article > b { align-items: center; background: #eaf3ff; border-radius: 15px; color: #1466e8; display: flex; font-size: 16px; height: 53px; justify-content: center; }
.portfolio-features article:nth-child(2) > b { background: #fff1dc; color: #d47d00; }
.portfolio-features article:nth-child(3) > b { background: #e4f4f1; color: #078771; }
.portfolio-features h4 { font-size: 17px; margin: 0 0 2px; }
.portfolio-features p { color: #07162f; font-size: 14px; line-height: 1.45; margin: 0; }
.portfolio-features article > span { color: #07162f; font-size: 26px; }
.portfolio-visual { background: linear-gradient(145deg, #f8fcff, #edf7ff); border: 1px solid #d9e8f6; border-radius: 17px; min-height: 610px; overflow: hidden; position: relative; z-index: 1; }
.portfolio-visual-wash { background: radial-gradient(ellipse, rgba(184,220,250,.72), transparent 69%); height: 640px; left: 4%; position: absolute; top: 6%; width: 96%; }
.portfolio-visual::before,
.portfolio-visual::after { border: 1px solid rgba(239,151,25,.75); border-radius: 50%; content: ''; height: 600px; position: absolute; width: 900px; }
.portfolio-visual::before { left: -50%; top: 41%; }
.portfolio-visual::after { left: 54%; top: 66%; }
.portfolio-note { color: #07162f; font-family: var(--font-display); font-size: 18px; font-style: italic; font-weight: var(--font-weight-headline); letter-spacing: var(--font-tracking-headline); line-height: 1.3; position: absolute; right: 36px; top: 35px; transform: rotate(-5deg); z-index: 4; }
.portfolio-note span { background: #ed910d; display: block; height: 2px; margin: 10px 0 0 auto; width: 56px; }
.phone { background: linear-gradient(110deg, #07101e, #697487 44%, #061222 52%, #0a1422); border: 2px solid #303c51; border-radius: 48px; box-shadow: 0 18px 38px rgba(17,43,75,.25); padding: 8px; position: absolute; transform-origin: bottom center; z-index: 3; }
.phone-screen { background: #f8fbff; border-radius: 39px; color: #071f4c; height: 100%; overflow: hidden; padding: 17px 16px; position: relative; }
.phone-island { background: #03070b; border-radius: 12px; height: 19px; left: 50%; position: absolute; top: 7px; transform: translateX(-50%); width: 78px; }
.phone-status { display: flex; font-size: 8px; justify-content: space-between; margin: 0 4px 19px; }
.phone-overview { bottom: -21px; height: 575px; left: 8%; transform: rotate(6deg); width: 270px; }
.phone-detail { bottom: -70px; height: 548px; left: 45%; transform: rotate(7deg); width: 260px; }
.phone-brand { color: #174f9c; font-size: 8px; font-weight: 800; letter-spacing: .22em; margin-bottom: 23px; }
.phone h5 { font-size: 13px; font-style: italic; margin: 0 0 2px; }.phone h5 + small { color: #6280aa; display: block; font-size: 7px; }
.value-card,.detail-value { background: white; border: 1px solid #edf2f8; border-radius: 10px; box-shadow: 0 8px 18px rgba(31,72,126,.06); margin-top: 15px; padding: 11px; position: relative; }
.value-card small,.detail-value small { color: #6781a5; display: block; font-size: 7px; }.value-card strong,.detail-value strong { display: block; font-size: 17px; }.value-card em,.detail-value em { color: #0b9b76; display: block; font-size: 7px; font-style: normal; font-weight: 700; }
.value-card svg { bottom: 15px; fill: none; position: absolute; right: 5px; stroke: #2e83fb; stroke-width: 1.2; width: 78px; }
.asset-tabs,.detail-tabs { align-items: center; display: flex; font-size: 7px; gap: 15px; margin: 12px 0; white-space: nowrap; }.asset-tabs b { border: 1px solid #2379f0; border-radius: 6px; color: #1466e8; padding: 3px 7px; }
.asset-row { align-items: center; border-bottom: 1px solid #edf1f7; display: grid; font-size: 7px; gap: 6px; grid-template-columns: 22px 1fr auto; min-height: 39px; }.asset-row i { background: #e3f3ef; border-radius: 50%; color: #009c79; font-size: 11px; font-style: normal; padding: 4px; text-align: center; }.asset-row:nth-of-type(2n) i { background: #fff0dc; color: #f09411; }.asset-row span { font-weight: 700; }.asset-row em { color: #079c76; font-style: normal; }
.phone-nav { align-items: center; background: rgba(255,255,255,.95); bottom: 0; display: flex; justify-content: space-around; left: 0; padding: 9px 4px 12px; position: absolute; right: 0; }.phone-nav span { color: #4d6e9c; font-size: 11px; text-align: center; }.phone-nav small { display: block; font-size: 6px; }.phone-nav .active { color: #126af1; }
.detail-title { display: flex; font-size: 10px; justify-content: space-between; }.detail-tabs { justify-content: space-between; margin-top: 19px; }.detail-tabs b { color: #176bf1; border-bottom: 1px solid #176bf1; padding-bottom: 5px; }.detail-value { margin-top: 10px; }.phone h6 { font-size: 9px; margin: 16px 0 8px; }
.allocation { align-items: center; display: flex; gap: 12px; }.donut { align-items: center; background: radial-gradient(circle, #f8fbff 0 44%, transparent 46%), conic-gradient(#236cf1 0 42%, #8b5bd9 42% 66%, #ef9a48 66% 84%, #efcbbd 84%); border-radius: 50%; display: flex; flex-direction: column; height: 94px; justify-content: center; width: 94px; }.donut strong { font-size: 13px; }.donut small { color: #7185a4; font-size: 6px; }.allocation ul { list-style: none; margin: 0; padding: 0; width: 92px; }.allocation li { color: #59729b; display: grid; font-size: 6px; grid-template-columns: 8px 1fr auto; margin: 4px 0; }.allocation li i { background: #397bed; border-radius: 50%; height: 5px; width: 5px; }.allocation li:nth-child(2) i { background: #e1a14e; }.allocation li:nth-child(3) i { background: #df806f; }.allocation li:nth-child(4) i { background: #8f68d8; }.allocation li:nth-child(5) i { background: #b89ed9; }
.insights { background: rgba(255,255,255,.7); border-radius: 9px; margin-top: 14px; padding: 1px 9px 8px; }.insights h6 { margin: 8px 0; }.insights p { color: #59729b; font-size: 7px; line-height: 1.4; margin: 8px 0; }.insights p b { color: #186be9; }
.portfolio-cta { align-items: center; background: #080b18; border: 1px solid #c7973b; border-radius: 9px; box-shadow: 0 8px 18px rgba(8,25,51,.15); color: white; display: flex; font-size: 15px; gap: 25px; justify-content: center; margin: 18px auto 13px; min-height: 52px; position: relative; transition: box-shadow .25s ease, transform .25s ease; width: 340px; z-index: 6; }.portfolio-cta:hover { box-shadow: 0 10px 22px rgba(8,25,51,.18); transform: translateY(-1px); }.portfolio-cta:active { box-shadow: 0 5px 12px rgba(8,25,51,.14); transform: translateY(1px); }.portfolio-cta span { color: #d2a03d; font-size: 22px; }
.financial-life-ornament { align-items: center; display: flex; gap: 12px; justify-content: center; margin: 8px auto 0; width: 190px; }.financial-life-ornament span { background: linear-gradient(90deg, transparent, #d4ae69); height: 1px; width: 62px; }.financial-life-ornament span:last-child { background: linear-gradient(90deg, #d4ae69, transparent); }.financial-life-ornament img { height: 20px; object-fit: contain; width: 30px; }

.goals-visual { background: linear-gradient(145deg, #fffdfa, #f7fbff); }
.goals-visual .portfolio-visual-wash { background: radial-gradient(ellipse at 42% 35%, rgba(255,223,167,.65), transparent 58%), radial-gradient(ellipse at 75% 82%, rgba(220,239,255,.75), transparent 60%); }
.goals-overview { left: 10%; transform: rotate(3deg); }
.goals-detail { left: 47%; transform: rotate(5deg); }
.goals-tabs { background: #eef5ff; border-radius: 12px; padding: 4px; }
.goals-tabs b { background: #fff; border: 0; border-radius: 9px; padding: 5px 21px; }
.goal-overall { display: grid; grid-template-columns: 1fr auto; }.goal-overall > strong { font-size: 22px; }.goal-overall > small { color: #57719b; font-size: 7px; text-align: right; }.goal-overall > i { background: #e5edf8; border-radius: 8px; grid-column: 1/-1; height: 6px; margin-top: 4px; overflow: hidden; }.goal-overall > i span { background: #1476ee; border-radius: inherit; display: block; height: 100%; width: 62%; }
.goal-row { align-items: center; border-bottom: 1px solid #edf1f7; display: grid; gap: 8px; grid-template-columns: 29px 1fr auto; min-height: 54px; }.goal-row > i { align-items: center; background: #eaf3ff; border-radius: 9px; color: #1780d3; display: flex; font-style: normal; height: 28px; justify-content: center; }.goal-row:nth-of-type(2n) > i { background: #fff0d9; color: #dd8b10; }.goal-row div > b,.goal-row div > small { display: block; font-size: 7px; }.goal-row div > small { color: #58739d; }.goal-row div > span { background: #e4edf7; border-radius: 5px; display: block; height: 4px; margin-top: 5px; overflow: hidden; }.goal-row div > span em { background: #2278f0; border-radius: inherit; display: block; height: 100%; width: var(--goal-progress); }.goal-row div > span em.green { background: #27b798; }.goal-row > strong { color: #45658e; font-size: 7px; }
.goal-target { align-items: center; background: #eef6ff; border-radius: 10px; display: flex; gap: 12px; margin-top: 13px; padding: 10px; }.goal-target > i { align-items: center; background: #d9ebff; border-radius: 9px; color: #1575e9; display: flex; font-size: 22px; font-style: normal; height: 43px; justify-content: center; width: 43px; }.goal-target div > * { display: block; }.goal-target small,.goal-target span { color: #5d789f; font-size: 7px; }.goal-target strong { font-size: 16px; }
.goal-track { align-items: center; background: white; border: 1px solid #e6eef7; border-radius: 10px; display: flex; gap: 10px; margin-top: 12px; padding: 10px; }.goal-track > b { color: #1776ec; }.goal-track strong,.goal-track small { display: block; font-size: 7px; }.goal-track strong { color: #0a9b7c; }.goal-track small { color: #5d789f; margin-top: 3px; }.goal-percent { float: right; }.goal-progress { background: #e6edf6; border-radius: 5px; height: 7px; overflow: hidden; }.goal-progress i { background: #1474ed; border-radius: inherit; display: block; height: 100%; width: 48%; }.goal-amounts { display: flex; justify-content: space-between; margin-top: 7px; }.goal-amounts span:last-child { text-align: right; }.goal-amounts b,.goal-amounts small { display: block; font-size: 7px; }.goal-amounts small { color: #607b9f; }
.goal-invest { background: #eef6ff; border: 1px solid #d9e9fa; border-radius: 9px; margin-top: 13px; padding: 9px; }.goal-invest > * { display: block; }.goal-invest small { color: #1768d5; font-size: 6px; }.goal-invest strong { font-size: 13px; }.goal-invest span { color: #56749c; font-size: 6px; }.goal-improve { border-left: 2px solid #edaa36; margin-top: 12px; padding: 6px 9px; }.goal-improve b { font-size: 7px; }.goal-improve p { color: #5b769d; font-size: 6px; line-height: 1.5; margin: 5px 0 0; }

@media (max-width: 1000px) {
  .financial-life { padding-inline: 22px; }
  .financial-life-grid { grid-template-columns: 1fr; }
  .portfolio-story { margin: auto; max-width: 680px; }
  .portfolio-visual { margin: auto; width: min(100%, 720px); }
}
@media (max-width: 640px) {
  .financial-life { padding: 48px 16px 25px; }
  .financial-life-kicker { font-size: 9px; gap: 9px; }.financial-life-kicker span { width: 22px; }
  .financial-life-heading h2 { font-size: 34px; }.financial-life-heading > p br { display: none; }.financial-life-heading > p { font-size: 13px; }
  .financial-life-tabs { margin-bottom: 16px; width: 270px; }
  .portfolio-story h3 { font-size: 34px; }.portfolio-story > p { font-size: 15px; }
  .portfolio-features article { gap: 11px; grid-template-columns: 46px 1fr 16px; padding: 12px; }.portfolio-features article > b { height: 46px; }.portfolio-features h4 { font-size: 15px; }.portfolio-features p { font-size: 12px; }
  .portfolio-visual { min-height: 480px; }.portfolio-note { font-size: 14px; right: 18px; top: 18px; }
  .phone-overview { height: 455px; left: 2%; width: 214px; }.phone-detail { bottom: -60px; height: 423px; left: 40%; width: 202px; }.phone { border-radius: 38px; padding: 6px; }.phone-screen { border-radius: 31px; padding: 14px 12px; }.phone-island { height: 15px; width: 60px; }.phone-status { margin-bottom: 13px; }.phone-brand { margin-bottom: 14px; }.asset-row { min-height: 31px; }.phone-nav { padding-bottom: 8px; }.allocation { transform: scale(.8); transform-origin: left center; width: 125%; }.insights { margin-top: 3px; }
  .goals-overview { left: 2%; }.goals-detail { left: 40%; }.goal-row { min-height: 40px; }.goal-target { margin-top: 7px; }.goal-track,.goal-invest,.goal-improve { margin-top: 7px; }
  .portfolio-cta { font-size: 13px; max-width: 320px; width: 90%; }
}
@media (prefers-reduced-motion: reduce) { .financial-life-panel.active { animation: none; } }

/* Reasoning, proof points and privacy footer. */
.clarity {
  background-color: #f5f0e9;
  background-image: url('/images/generated/clarityYoucanSee-768.webp');
  background-image: image-set(url('/images/generated/clarityYoucanSee-768.avif') type('image/avif'),
      url('/images/generated/clarityYoucanSee-768.webp') type('image/webp'));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  min-height: 620px;
  padding: 78px max(6vw, calc((100vw - 1510px) / 2)) 150px;
  position: relative;
}
.clarity::after {
  background: linear-gradient(180deg, rgba(21, 77, 120, .78) 0, rgba(43, 97, 136, .48) 10%, rgba(116, 161, 190, .18) 42%, transparent 100%);
  content: '';
  height: clamp(88px, 9vw, 148px);
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

@media (min-width: 700px) {
  .clarity {
    background-image: url('/images/generated/clarityYoucanSee-1280.webp');
    background-image: image-set(url('/images/generated/clarityYoucanSee-1280.avif') type('image/avif'),
        url('/images/generated/clarityYoucanSee-1280.webp') type('image/webp'));
  }
}
@media (min-width: 1400px) {
  .clarity {
    background-image: url('/images/generated/clarityYoucanSee-1920.webp');
    background-image: image-set(url('/images/generated/clarityYoucanSee-1920.avif') type('image/avif'),
        url('/images/generated/clarityYoucanSee-1920.webp') type('image/webp'));
  }
}
.clarity-copy { max-width: 590px; position: relative; z-index: 1; }
.clarity .section-kicker { color: #b77a1d; font-size: 12px; letter-spacing: .13em; }
.clarity h2 { color: #071326; font-size: clamp(48px, 4.25vw, 68px); letter-spacing: -.025em; line-height: .99; margin: 25px 0 28px; }
.clarity-copy > p { color: #192235; font-size: 15px; line-height: 1.55; margin: 0; max-width: 560px; }
.clarity .pill { border: 1px solid #b98431; border-radius: 9px; font-size: 14px; margin-top: 30px; min-height: 54px; padding: 0 27px; }
.clarity .pill span { color: #d79b36; font-size: 23px; margin-left: 17px; vertical-align: -2px; }
.clarity blockquote { align-items: flex-start; color: #071326; display: grid; grid-template-columns: 45px 1fr; margin: 36px 0 0; max-width: 570px; }
.clarity .quote-mark { color: #bf8429; font: 54px/.8 var(--font-serif); }
.clarity blockquote p { border-left: 1px solid #d8b577; font: 21px/1.35 var(--font-serif); margin: 0; padding-left: 31px; }
.clarity blockquote small { color: #444b59; display: block; font: 13px var(--font-sans); grid-column: 2; margin: 18px 0 0 32px; }
.clarity blockquote small b { color: #b77a1d; font-weight: 500; }

.stats {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(4, 1fr);
  margin: -94px auto 0;
  max-width: 1560px;
  padding: 0 34px 32px;
  position: relative;
  z-index: 2;
}
.stat-card { align-items: center; background: rgba(255, 253, 250, .94); border: 1px solid #eadfce; border-radius: 15px; box-shadow: 0 8px 20px rgba(46, 36, 24, .1); display: flex; gap: 28px; min-height: 156px; padding: 25px 35px; }
.stat-card i { align-items: center; background: #f5f0e9; border-radius: 50%; box-shadow: 0 3px 7px rgba(68, 52, 35, .1); color: #c28a31; display: flex; flex: 0 0 76px; font-style: normal; height: 76px; justify-content: center; }
.stat-card i.rupee { font-family: Georgia, serif; font-size: 43px; font-weight: 400; }
.stat-card svg { fill: none; height: 42px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 42px; }
.stat-card p { margin: 0; }
.stats strong,
.stats span { display: block; }
.stats strong { color: #071326; font: 40px/1 var(--font-serif); white-space: nowrap; }
.stats span { font-size: 14px; margin-top: 13px; white-space: nowrap; }
.stats em { background: #c58a2f; display: block; height: 2px; margin-top: 15px; width: 32px; }

/* The complete VestMind capability story between proof and privacy. */
.advanced-features {
  /* Let the landing page's shared atmosphere continue through this story
     instead of introducing a separate cream-coloured panel. */
  background: transparent;
  color: #071126;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-weight: var(--font-weight-text);
  letter-spacing: var(--font-tracking-text);
  min-height: 887px;
  padding: 32px clamp(24px, 3.3vw, 59px) 24px;
}
.advanced-features-heading { margin: 0 auto; text-align: center; }
.advanced-features-kicker { align-items: center; display: flex; font-family: var(--font-body); font-size: 14px; font-weight: var(--font-weight-button); gap: 32px; justify-content: center; letter-spacing: .25em; }
.advanced-features-kicker span { background: #e29219; height: 1px; width: 43px; }
.advanced-features-heading h2 { font-family: var(--font-display); font-size: clamp(46px, 3.05vw, 54px); font-weight: var(--font-weight-headline); letter-spacing: var(--font-tracking-headline); line-height: .92; margin: 17px 0 12px; }
.advanced-features-heading h2 em { color: #e2931b; font-style: normal; }
.advanced-features-heading p { color: #56647b; font-size: 16px; line-height: 1.25; margin: 0; }
.advanced-features-grid { align-items: stretch; display: grid; gap: 24px; grid-template-columns: minmax(0, 483px) minmax(0, 646px) minmax(0, 483px); height: 646px; margin: 0 auto; max-width: 1660px; }
.advanced-feature-column { display: flex; flex-direction: column; gap: 10px; }
.advanced-feature-card { background: rgba(255,255,255,.74); border: 1px solid rgba(235,229,219,.72); border-radius: 17px; box-shadow: 0 8px 24px rgba(55,42,25,.045); padding: 18px 22px; }
.advanced-feature-column-left { padding-top: 2px; }.advanced-feature-column-left .complete-view { box-sizing: border-box; height: 272px; }.advanced-feature-column-left .continuous-monitoring { box-sizing: border-box; height: 216px; }.advanced-feature-column-left .compact-card { box-sizing: border-box; height: 125px; }
.advanced-feature-column-right .goal-planning { box-sizing: border-box; height: 267px; }.advanced-feature-column-right .portfolio-intelligence { box-sizing: border-box; height: 272px; }.advanced-feature-column-right .compact-card { box-sizing: border-box; height: 88px; }
.advanced-feature-title { align-items: center; display: flex; gap: 19px; }
.advanced-feature-title > i { align-items: center; background: #fbf4e8; border-radius: 50%; color: #e59419; display: flex; flex: 0 0 68px; height: 68px; justify-content: center; }
.advanced-feature-title svg, .monitor-alert svg { fill: none; height: 34px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 34px; }
.advanced-feature-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: var(--font-weight-headline); letter-spacing: var(--font-tracking-headline); line-height: 1.15; margin: 0; }
.advanced-feature-card > p, .advanced-feature-title p { color: #56647b; font-size: 14px; line-height: 1.4; margin: 8px 0 0; }
.feature-metrics { border: 1px solid #ebe4da; border-radius: 13px; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding: 18px 0; }
.feature-metrics span { padding-left: 28px; }
.feature-metrics span + span { border-left: 1px solid #e6e0d8; }
.feature-metrics strong, .feature-metrics small { display: block; }
.feature-metrics strong { font-family: var(--font-display); font-size: 34px; font-weight: var(--font-weight-headline); letter-spacing: var(--font-tracking-headline); line-height: 1; }
.feature-metrics small { color: #59677d; font-size: 13px; margin-top: 6px; }
.monitor-alert { align-items: center; border: 1px solid #ebe4da; border-radius: 12px; display: grid; gap: 14px; grid-template-columns: 54px 1fr 12px; margin-top: 14px; min-height: 84px; padding: 10px 15px; }
.monitor-alert > svg { border-right: 1px solid #e5ddd2; box-sizing: content-box; color: #e59419; padding-right: 16px; }
.monitor-alert span b, .monitor-alert span small { display: block; font-size: 12px; }
.monitor-alert span small { color: #647187; margin-top: 7px; }.monitor-alert > b, .compact-card .advanced-feature-title > b { color: #e59419; font-size: 29px; font-weight: 300; }
.continuous-monitoring .advanced-feature-title { align-items: flex-start; }.continuous-monitoring .advanced-feature-title > i { margin-top: 0; }.continuous-monitoring .advanced-feature-title > div { flex: 1; min-width: 0; }.continuous-monitoring h3 { margin-top: 9px; }.continuous-monitoring .advanced-feature-title p { margin-top: 7px; }.continuous-monitoring .monitor-alert { margin-top: 14px; }
.compact-card { margin-top: auto; padding-block: 10px; }.compact-card .advanced-feature-title > div { flex: 1; }.compact-card .advanced-feature-title > i { flex-basis: 64px; height: 64px; }.compact-card h3 { font-size: 18px; }.compact-card p { margin-top: 5px; }
.advanced-features-visual { border-radius: 17px; height: 612px; margin: 27px 0 0; min-height: 0; overflow: hidden; position: relative; }
/* The <picture> wrappers carry only the AVIF/WebP ladders. In the frame the img
   is still what lays out. In the goal card the picture is the grid cell: with
   `display: contents` there, the <source> (which is not display: none) would
   take a cell of its own. */
.advanced-features-visual picture { display: contents; }
.goal-preview picture { display: block; }
.advanced-features-visual img { display: block; height: 100%; object-fit: cover; object-position: 42% center; width: 100%; }
.visual-dashboard { backdrop-filter: blur(12px) saturate(.9); -webkit-backdrop-filter: blur(12px) saturate(.9); background: linear-gradient(145deg, rgba(45, 39, 33, .78), rgba(27, 23, 20, .67)); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.08); box-sizing: border-box; color: #fff; font-family: var(--font-body); font-weight: var(--font-weight-text); letter-spacing: var(--font-tracking-text); position: absolute; }
.visual-dashboard small, .visual-dashboard span, .visual-dashboard strong { display: block; }.visual-dashboard small { font-size: 12px; }.visual-dashboard strong { font-size: 23px; line-height: 1.3; white-space: nowrap; }.visual-dashboard svg { fill: none; stroke: #efa822; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.portfolio-overview { left: 4.6%; padding: 16px 19px 12px; top: 6.8%; width: 35%; }.portfolio-overview strong { margin-top: 3px; }.portfolio-overview .positive { color: #54d172; font-size: 12px; }.portfolio-overview .positive i { color: #fff; font-style: normal; margin-left: 6px; }.portfolio-overview > svg { height: 54px; margin-top: 9px; width: 100%; }.portfolio-overview > div { display: flex; justify-content: space-between; }.portfolio-overview > div b { border-radius: 5px; font-size: 10px; font-weight: 400; padding: 5px 9px; }.portfolio-overview > div .active { background: rgba(219,145,28,.5); }
.next-actions { bottom: 29%; left: 4.6%; overflow: hidden; padding: 15px 18px; width: 42%; }.next-actions small { margin-bottom: 10px; }.next-actions span { align-items: center; display: flex; font-size: 9px; gap: 7px; margin-top: 7px; white-space: nowrap; }.next-actions i { align-items: center; border: 2px solid #eba624; border-radius: 2px; color: #eba624; display: inline-flex; flex: 0 0 16px; font-size: 11px; font-style: normal; height: 16px; justify-content: center; }
.goal-progress-card { overflow: hidden; padding: 14px 11px 12px; right: 3.4%; top: 9.5%; width: 20%; }.goal-progress-card small, .goal-progress-card > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.visual-progress { align-items: center; background: conic-gradient(#efa724 0 68%,#1a2437 68%); border-radius: 50%; display: flex; height: 57px; justify-content: center; margin: 8px auto 10px; position: relative; width: 57px; }.visual-progress::before { background: rgba(67,61,55,.96); border-radius: 50%; content: ''; inset: 7px; position: absolute; }.visual-progress b { font-size: 12px; position: relative; }.goal-progress-card > span { font-size: 9px; letter-spacing: -.02em; line-height: 1.55; }
.risk-analysis { padding: 11px 14px; right: 3.4%; top: 40%; width: 20%; }.risk-analysis svg { height: 37px; margin: 7px 0 2px; width: 100%; }.risk-analysis strong { font-size: 12px; }.risk-analysis span { color: #ddd4c9; font-size: 9px; }
.visual-laptop-mark { bottom: 14.5%; color: #b47616; font-family: var(--font-display); font-size: 29px; font-weight: var(--font-weight-button); line-height: 1; position: absolute; right: 21.5%; transform: skew(-8deg); }
.goal-planning { padding: 18px 20px 14px; }.goal-planning .advanced-feature-title { align-items: flex-start; }.goal-planning .advanced-feature-title > i { margin-top: 0; }.goal-planning h3 { font-size: 21px; margin-top: 7px; }.goal-planning .advanced-feature-title p { font-size: 14px; line-height: 1.42; margin-top: 8px; }
.goal-preview { align-items: center; border: 1px solid #e8e1d8; border-radius: 12px; box-sizing: border-box; display: grid; gap: 14px; grid-template-columns: 124px minmax(0, 1fr) 68px 10px; margin-top: 14px; min-height: 120px; overflow: hidden; padding: 12px; width: 100%; }
.goal-photo { border-radius: 7px; display: block; height: 90px; object-fit: cover; width: 124px; }
.goal-preview-copy { min-width: 0; }.goal-preview-copy b,.goal-preview-copy small,.goal-preview-copy strong { display: block; }.goal-preview-copy b { color: #071126; font-size: 13px; font-weight: 700; }.goal-preview-copy small { color: #617087; font-size: 12px; margin: 8px 0 5px; }.goal-preview-copy strong { color: #071126; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.15; white-space: nowrap; }.goal-preview-progress { align-items: center; background: conic-gradient(#df9019 0 68%, #ddd 68%); border-radius: 50%; display: flex; font-style: normal; height: 68px; justify-content: center; position: relative; width: 68px; }.goal-preview-progress::before { background: #fff; border-radius: 50%; content: ''; inset: 8px; position: absolute; }.goal-preview-progress b { color: #071126; font-size: 13px; position: relative; }.goal-preview-arrow { color: #df9019; font-size: 28px; font-weight: 300; }
.advanced-feature-column-right .compact-card .advanced-feature-title { gap: 14px; }.advanced-feature-column-right .compact-card h3 { font-size: 16px; white-space: nowrap; }.advanced-feature-column-right .compact-card p { font-size: 12px; line-height: 1.35; }.advanced-feature-column-right .compact-card .advanced-feature-title > b { flex: 0 0 auto; }
.allocation-preview { border: 1px solid #e8e1d8; border-radius: 12px; display: grid; grid-template-columns: 120px 1fr 12px; margin-top: 14px; padding: 12px 18px; position: relative; }.allocation-preview > b { font-size: 12px; left: 18px; position: absolute; top: 12px; }.allocation-chart { align-self: end; background: conic-gradient(#071126 0 42%,#efad3c 42% 66%,#e5961c 66% 74%,#555 74% 80%,#ccc 80%); border-radius: 50%; height: 104px; margin-top: 20px; position: relative; width: 104px; }.allocation-chart::after { background: #fff; border-radius: 50%; content: ''; inset: 23px; position: absolute; }.allocation-preview ul { color: #5e6b80; list-style: none; margin: 12px 0 0; padding: 0; }.allocation-preview li { display: grid; font-size: 12px; grid-template-columns: 12px 1fr auto; line-height: 1.65; }.allocation-preview li i { background: #071126; border-radius: 50%; height: 9px; margin-top: 5px; width: 9px; }.allocation-preview li:nth-child(2) i { background:#efad3c }.allocation-preview li:nth-child(3) i { background:#e5961c }.allocation-preview li:nth-child(4) i { background:#555 }.allocation-preview li:nth-child(5) i { background:#ccc }.allocation-preview li b { font-weight: 400; }.allocation-preview > strong { align-self: center; color: #df9019; font-size: 26px; font-weight: 300; }

@media (max-width: 1180px) {
  .advanced-features { min-height: 0; }
  .advanced-features-grid { grid-template-columns: 1fr 1fr; height: auto; }
  .advanced-features-visual { grid-column: 1 / -1; grid-row: 1; height: min(68vw, 612px); margin-top: 0; }
  .advanced-feature-column { grid-row: 2; padding-top: 0; }
  .advanced-feature-column .advanced-feature-card { height: auto; }
}
@media (max-width: 700px) {
  .advanced-features { padding: 48px 16px 28px; }
  .advanced-features-heading { margin-bottom: 25px; }.advanced-features-kicker { font-size: 10px; gap: 17px; }.advanced-features-kicker span { width: 28px; }
  .advanced-features-heading h2 { font-size: 40px; line-height: .98; }.advanced-features-heading p { font-size: 14px; }.advanced-features-heading p br { display: none; }
  .advanced-features-grid { display: flex; flex-direction: column; }.advanced-features-visual { aspect-ratio: 646 / 612; height: auto; order: -1; }.advanced-features-visual img { height: 100%; }
  .advanced-feature-card { padding: 17px 15px; }.advanced-feature-title { gap: 13px; }.advanced-feature-title > i { flex-basis: 56px; height: 56px; }.advanced-feature-card h3 { font-size: 18px; }.advanced-feature-card br { display: none; }
  .advanced-feature-column-right .compact-card h3 { white-space: normal; }
  .feature-metrics span { padding-left: 15px; }.feature-metrics strong { font-size: 28px; }.goal-preview { gap: 10px; grid-template-columns: 82px 1fr 58px; }.goal-preview-arrow { display: none; }.goal-photo { height: 72px; width: 82px; }.goal-preview-progress { height: 54px; width: 54px; }.goal-preview-copy strong { font-size: 17px; }
  .visual-dashboard { display: none; }.visual-laptop-mark { font-size: 20px; }
}

.privacy-section {
  align-items: center;
  background-color: #080d1d;
  background-image: url('/images/generated/yourPortfolioRemainsYours-640.webp');
  background-image: image-set(url('/images/generated/yourPortfolioRemainsYours-640.avif') type('image/avif'),
      url('/images/generated/yourPortfolioRemainsYours-640.webp') type('image/webp'));
  /* Anchored at the top of its frame, with every pixel of the `cover` overflow
     below it — which is why its photograph layer only travels on one side
     (see "Motion"). */
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: #f7f1e8;
  display: flex;
  flex-direction: column;
  min-height: min(960px, 52vw);
  padding: clamp(28px, 2vw, 38px) max(7vw, calc((100vw - 1300px) / 2)) clamp(50px, 3.4vw, 64px);
  position: relative;
  text-align: center;
}
.privacy-section::before {
  background: linear-gradient(180deg, rgba(235, 241, 243, .72) 0, rgba(152, 181, 201, .4) 14%, rgba(52, 91, 124, .18) 46%, transparent 100%);
  content: '';
  height: clamp(86px, 8vw, 136px);
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

@media (min-width: 700px) {
  .privacy-section {
    background-image: url('/images/generated/yourPortfolioRemainsYours-1280.webp');
    background-image: image-set(url('/images/generated/yourPortfolioRemainsYours-1280.avif') type('image/avif'),
        url('/images/generated/yourPortfolioRemainsYours-1280.webp') type('image/webp'));
  }
}
@media (min-width: 1400px) {
  .privacy-section {
    background-image: url('/images/generated/yourPortfolioRemainsYours-1920.webp');
    background-image: image-set(url('/images/generated/yourPortfolioRemainsYours-1920.avif') type('image/avif'),
        url('/images/generated/yourPortfolioRemainsYours-1920.webp') type('image/webp'));
  }
}
.privacy-heading { max-width: 1400px; position: relative; width: 100%; z-index: 1; }
.privacy-heading .section-kicker { color: #e8ad4d; font-size: 13px; font-weight: 600; letter-spacing: .16em; }
.privacy-heading h2 {
  color: #f7f2ea;
  font: 400 clamp(46px, 3.9vw, 68px)/1.05 var(--font-serif);
  letter-spacing: -.02em;
  margin: 16px 0 8px;
}
.privacy-heading h2 em { color: #e8ad4d; font-style: normal; }
.privacy-heading p { color: #c8c5ca; font-size: 15px; letter-spacing: -.015em; margin: 0; }
.privacy-heading button {
  align-items: center;
  background: #faf6ee;
  border: 0;
  border-radius: 999px;
  color: #111522;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  justify-content: center;
  margin: 8px auto 0;
  min-height: 48px;
  padding: 0 34px;
  position: relative;
  width: 248px;
}
.privacy-heading button span { font-size: 22px; line-height: 1; position: absolute; right: 38px; top: 12px; }
.privacy-heading button { transition: box-shadow .35s ease, transform .35s ease; }
.privacy-heading button span { transition: transform .35s ease; }
.privacy-heading button:hover { box-shadow: 0 12px 34px rgba(232, 173, 77, .2); transform: translateY(-3px); }
.privacy-heading button:hover span { transform: translateX(5px); }
.privacy-features {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  margin-top: auto;
  max-width: 1040px;
  position: relative;
  text-align: left;
  width: 100%;
  z-index: 1;
}
.privacy-features > div { align-items: center; display: flex; gap: 22px; min-height: 82px; opacity: 1; padding: 0 40px; }
.privacy-features > div + div { border-left: 1px solid rgba(235, 220, 191, .55); }
.privacy-features i {
  align-items: center;
  background: rgba(17, 22, 37, .72);
  border: 1px solid rgba(232, 173, 77, .85);
  border-radius: 50%;
  color: #e8ad4d;
  display: flex;
  flex: 0 0 64px;
  font-size: 25px;
  font-style: normal;
  height: 64px;
  justify-content: center;
}
.privacy-features svg { fill: none; height: 30px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 30px; }
.privacy-features p { margin: 0; }
.privacy-features strong,
.privacy-features span { display: block; }
.privacy-features strong { color: #fffdf8; font-size: 16px; font-weight: 600; margin-bottom: 8px; text-shadow: 0 1px 12px rgba(255,255,255,.12); }
.privacy-features span { color: #e0dcda; font-size: 14px; line-height: 1.5; }

/* The glow is drawn once, on a layer of its own, and only its opacity
   breathes. Breathing the shadow itself repainted the icon on every frame for
   as long as the page was open, and a page that is always painting is a page
   whose scrolling has to queue behind it. */
@keyframes privacy-icon-glow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.privacy-features i { position: relative; }
.privacy-features i::after {
  animation: privacy-icon-glow 4s ease-in-out infinite;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(232, 173, 77, .16);
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.privacy-features > div:nth-child(2) i::after { animation-delay: .45s; }
.privacy-features > div:nth-child(3) i::after { animation-delay: .9s; }

@media (prefers-reduced-motion: reduce) {
  .privacy-features i::after { animation: none; }
  .privacy-heading button, .privacy-heading button span { transition: none; }
  .journey-panel > * { transform: none; }
  .journey, .journey-piece { transition: none; }
  .vestmind-lens { display: none; }
}
@media (max-width: 900px) {
  .ways { padding: 0 20px 18px; }
  /* One piece at a time, so the stage stops being a grid and `.journey-grid`
     goes back to being the box it is on a desktop: the carousel's rail. The
     pieces keep their tabs and blanks — they are what says a piece is one of
     five — but not the offsets that interlocked them, which only mean anything
     while the neighbours are on screen beside it. */
  .ways { --reshuffle-progress: 1; min-height: 0; }
  .ways-scene { display: block; height: auto; position: static; }
  /* The phone's stage is a box the carousel sits in, not a drawing: it has no
     shape of its own, and the type inside it falls back on the floors of the
     clamps that carry it at every other size. */
  .ways-stage { aspect-ratio: auto; max-width: var(--landing-max); width: auto; }
  .ways-intro, .journey { position: static; }
  .ways-intro { width: auto; }
  .journey-grid { display: flex; gap: 0; margin-inline: auto; max-width: 440px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .journey-grid::-webkit-scrollbar { display: none; }
  .journey { --piece-tilt: 0deg; aspect-ratio: 1.42; flex: 0 0 100%; scroll-snap-align: start; width: auto; }
  .journey-ornament { display: none; }
  /* One piece on the screen at a time leaves the lens nowhere to go. */
  .vestmind-lens { display: none; }
  /* The phone is not a smaller stage, it is a different composition: one piece
     at a time, at a size the clamps' floors are too cautious for. */
  /* The phone has no re-shuffle, so the panel goes back to being a box
     measured against the piece it sits on. */
  .journey-panel { bottom: 6.5%; height: auto; left: 5%; top: 6.5%; transform: none; width: 54%; }
  .ways .section-kicker { font-size: 12px; }
  .ways-intro > p { font-size: 15px; }
  .ways .pill { font-size: 13px; min-height: 46px; padding: 0 26px; }
  .journey-head i { height: 21px; width: 21px; }
  .journey-head b { font-size: 10px; }
  .journey h3 { font-size: 18px; }
  .journey-panel p { font-size: 12.5px; }
  .journey-panel small { font-size: 10.5px; }
  .journey-carousel-controls { align-items: center; display: flex; gap: 9px; justify-content: center; margin: 14px auto 4px; }
  .journey-carousel-controls button { background: #aab3bf; border: 0; border-radius: 999px; cursor: pointer; height: 7px; padding: 0; transition: background .25s ease, width .25s ease; width: 7px; }
  .journey-carousel-controls button.active { background: #173dff; width: 24px; }
  .always { min-height: 760px; }
  .always-copy { left: 25px; right: 25px; top: 58px; }
  .context-card { right: 25px; }
  .watch-tabs { display: none; }
  .clarity { background-position: 58% center; min-height: 700px; padding: 55px 30px 155px; }
  .clarity::before { background: linear-gradient(90deg, rgba(248,244,239,.96) 0 55%, rgba(248,244,239,.55) 75%, transparent); content: ''; inset: 0; position: absolute; }
  .clarity-copy { max-width: 540px; }
  .stats { grid-template-columns: 1fr 1fr; margin-top: -80px; padding-inline: 25px; }
  .privacy-section { background-position: center; background-size: cover; min-height: 820px; padding-inline: 24px; }
  .privacy-features > div { gap: 15px; padding: 0 18px; }
  .privacy-features i { flex-basis: 52px; height: 52px; }
}

@media (max-width: 560px) {
  .ways h2 { font-size: 30px; }
  .ways h1 { font-size: 42px; }
  .ways-intro { padding-inline: 0; }
  .ways-intro > p { font-size: 15px; }
  .ways-intro > p br { display: none; }
  .always { min-height: 760px; }
  .always-copy { right: 25px; }
  .always h2 { font-size: 42px; }
  .context-card { bottom: 18px; left: 20px; right: 20px; width: auto; }
  .clarity { background-position: 65% center; min-height: 730px; padding: 45px 22px 110px; }
  .clarity::before { background: rgba(248,244,239,.8); }
  .clarity h2 { font-size: 42px; }
  .clarity-copy > p br, .clarity blockquote p br { display: none; }
  .clarity blockquote p { font-size: 18px; padding-left: 18px; }
  .clarity blockquote { grid-template-columns: 31px 1fr; }
  .stats { gap: 14px; grid-template-columns: 1fr; margin-top: -70px; padding-inline: 18px; }
  .stat-card { min-height: 130px; }
  .privacy-section {
    background-image:
      linear-gradient(180deg, rgba(8, 13, 29, .06) 0 55%, rgba(8, 13, 29, .72) 71%, #080d1d 84%),
      url('/images/generated/yourPortfolioRemainsYours-640.webp');
    background-image:
      linear-gradient(180deg, rgba(8, 13, 29, .06) 0 55%, rgba(8, 13, 29, .72) 71%, #080d1d 84%),
      image-set(url('/images/generated/yourPortfolioRemainsYours-640.avif') type('image/avif'),
                url('/images/generated/yourPortfolioRemainsYours-640.webp') type('image/webp'));
    background-position: center, center 238px;
    background-size: auto, clamp(460px, 128vw, 500px) auto;
    min-height: 0;
    padding: 46px 18px 28px;
  }
  .privacy-heading { max-width: 390px; }
  .privacy-heading .section-kicker { font-size: 11px; letter-spacing: .2em; }
  .privacy-heading h2 { font-size: clamp(38px, 11vw, 46px); line-height: 1.02; margin: 15px 0 12px; }
  .privacy-heading p { color: #ebe7e2; font-size: 14px; line-height: 1.55; margin-inline: auto; max-width: 340px; }
  .privacy-heading button { margin-top: 18px; max-width: 310px; min-height: 52px; width: 100%; }
  .privacy-heading button span { right: 30px; top: 14px; }
  .privacy-features {
    background: rgba(7, 13, 30, .94);
    border: 1px solid rgba(232, 173, 77, .26);
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .3);
    gap: 0;
    grid-template-columns: 1fr;
    margin-top: 300px;
    max-width: 390px;
    overflow: hidden;
    padding: 6px 16px;
  }
  .privacy-features > div { gap: 17px; min-height: 96px; padding: 15px 5px; }
  .privacy-features > div + div { border-left: 0; border-top: 1px solid rgba(232, 173, 77, .2); }
  .privacy-features i { background: #111a30; flex-basis: 50px; height: 50px; }
  .privacy-features svg { height: 25px; width: 25px; }
  .privacy-features strong { font-size: 16px; margin-bottom: 5px; }
  .privacy-features span { color: #d9d7d4; font-size: 13px; line-height: 1.45; }
  .privacy-features br { display: none; }
}

@media (max-width: 640px) {
  .always-copy,
  .clarity-copy { left: 20px; margin-inline: auto; max-width: none; right: 20px; text-align: center; }
  .clarity { background-position: 60% center; }
  .clarity-copy { left: 8px; right: 8px; }
  .always p,
  .clarity-copy > p { margin-inline: auto; }
  .always-copy > button,
  .clarity .pill { display: block; margin-inline: auto; }
  .clarity blockquote { justify-content: center; margin-inline: auto; text-align: center; }
}