/* Responsive layer for the design export — handoff.md gap #1. * * The export was authored at desktop width and carries ZERO @media rules * across 68 pages; every layout value is an inline style, which outranks any * stylesheet rule. Hence !important throughout, scoped to narrow viewports so * desktop rendering is untouched. Selectors match inline-style substrings * because the export has almost no classes to hang rules on. * * Breakpoints are Webflow's 991 / 767 / 479, the ones the live vijil.ai is * designed against, so this layer stages the same way the original does * rather than inventing its own. * * Reference measurements taken from the live site at a 390px viewport: * nav 75px tall (hamburger, one row), h1 52.76px, headline top 126px. */ /* ======================================================================== Product diagram swap — desktop artwork vs. hand-laid-out mobile variant ======================================================================== Six diagrams draw into a 1096px viewBox. Scaled into 350px their labels land near 4px, so they are redrawn rather than shrunk (one module per diagram in scripts/mobile-diagrams/). The converter wraps each desktop svg together with its variant in .vj-dia-swap; these two rules pick one. display:none rather than visibility or opacity, so the hidden one leaves the accessibility tree — otherwise a screen reader reads both aria-labels for the same figure. */ /* A SWAP FILLS ITS PARENT. Without this the container is shrink-to-fit, and an svg inside it asking for width:100% has no definite width to resolve against — so it falls back to the CSS default for a replaced element, 300px. That is what happened inside figure.vj-fig, which is a grid: a 1096-unit chart drew itself at 300px with unreadable labels while its caption ran full width. Third instance of this family, after a grid item with margin:0 auto and an svg with width="100%" inside one. */ .vj-dia-swap { width: 100%; } .vj-dia-swap > .vj-dia-mobile { display: none; } /* lifecycle-graph is a custom element, so it needs its own half of the swap — `svg:not(.vj-dia-mobile)` below cannot match a non-svg sibling. */ .vj-dia-swap > lifecycle-graph { display: block; } /* ======================================================================== Hamburger nav — mirrors the live site's Webflow navbar (data-collapse=all) ======================================================================== */ .vj-burger { display: none; } @media (max-width: 991px) { .vj-burger { display: flex !important; flex-direction: column; justify-content: center; gap: 4px; width: 44px; /* 44px is the minimum comfortable tap target */ height: 44px; padding: 0; margin-left: auto; border: 0; background: none; cursor: pointer; flex: none; } .vj-burger span { display: block; height: 2px; width: 24px; background: currentColor; /* inherits the nav's ink, dark or light */ transition: transform .18s ease, opacity .18s ease; } .vj-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .vj-burger.is-open span:nth-child(2) { opacity: 0; } .vj-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* The panel holds the real link row, moved rather than cloned. */ .vj-mobile-panel { padding: 8px 20px 20px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 14%, transparent); } .vj-mobile-links { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; } .vj-mobile-links > * { width: 100%; } .vj-mobile-links a { padding: 10px 0; display: block; } /* Desktop dropdowns open on :hover, which never fires on touch. Flatten them so every destination is visible in one scrollable list. */ .vj-mobile-links .vj-dd { display: block !important; } .vj-mobile-links .vj-dd-m { display: block !important; position: static !important; padding-top: 0 !important; } .vj-mobile-links .vj-dd-m > div { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 0 0 14px !important; min-width: 0 !important; } /* The pill CTAs stay pills, sized to the panel. The export sets them content-box with 18-20px of horizontal padding, so width:100% became 390 + 36 = 426px and they ran past the frame. border-box folds the padding back inside the width. */ .vj-mobile-links a.vj-btn, .vj-mobile-links a.vj-btn-ghost, .vj-mobile-links a.vj-btn-ghost-brand, .vj-mobile-links a.vj-btn-sm, .vj-mobile-links a.vj-btn-ghost-sm, .vj-mobile-links a.vj-chip { box-sizing: border-box !important; width: 100% !important; text-align: center; margin-top: 8px; } /* A button keeps its own padding inside the panel. `.vj-mobile-links a` above * sets 11px 0 and is (0,1,1); a bare `.vj-btn-sm` is (0,1,0) and loses to it. * That never came up while the pill was an inline style, because an inline * style outranks every selector there is — so moving it into a class handed a * fight to a rule that had never had to win one. */ .vj-mobile-links a.vj-btn { padding: 12px 28px; } .vj-mobile-links a.vj-btn-ghost, .vj-mobile-links a.vj-btn-ghost-brand { padding: 12px 26px; } .vj-mobile-links a.vj-btn-sm { padding: 10px 20px; } .vj-mobile-links a.vj-btn-ghost-sm { padding: 8px 18px; } /* Same trap anywhere else a padded element is stretched to full width. */ .vj-mobile-panel *, .vj-mobile-links * { box-sizing: border-box; } } /* ======================================================================== Layout — everything below 991px ======================================================================== */ @media (max-width: 991px) { /* --- Page scrolling ---------------------------------------------------- * The homepages put every panel inside ONE nested scroll container: *
* On a phone that breaks scrolling outright: the document never scrolls so * the address bar never collapses, 100vh exceeds the visible area while * browser chrome shows so panel bottoms are unreachable, and mandatory * snapping fights touch momentum. Give the page back to the browser. */ [data-snap="true"] { height: auto !important; max-height: none !important; overflow-y: visible !important; scroll-snap-type: none !important; } .vj-snap { scroll-snap-align: none !important; } /* Desktop snaps one full-viewport panel at a time. Mobile scrolls * continuously (the snap container is released above), so a panel no longer * needs to fill the screen — and pinning it to one leaves the short panels * padded out with blank space. Measured on the risk-owner homepage: the * Platform panel held 568px of content in an 844px box, and the page * carried 796px of slack in total. * * Panels size to their content instead. svh, not vh, wherever a viewport * height is still wanted: vh predates mobile browser chrome and ignores it. */ .vj-vh { height: auto !important; min-height: 0 !important; } .vj-minvh { min-height: 0 !important; } /* The hero is the exception — it should still fill the first screen. */ /* `:first-child` on BOTH halves, since 2026-09-23. The second selector was * written for a container whose first child wraps ONE panel. /product/dome * wraps all fourteen in a
— the arc gates * slice the last beat at
, so that tag has to exist — and every * panel is then a first-child's .vj-snap. Every section became a hero: * fourteen 844px boxes holding four lines each, which is the exact slack * the note above says this block exists to remove. */ [data-snap] > *:first-child, [data-snap] > *:first-child > .vj-snap:first-child { min-height: 100svh !important; } /* 120px/96px vertical padding is a desktop rhythm; on a phone it reads as a * gap rather than as breathing room. */ .vj-band-xl { padding-top: 56px !important; padding-bottom: 48px !important; } .vj-band { padding-top: 48px !important; } /* --- Nav must not overlap the hero ------------------------------------- * The homepages pin the nav absolute and compensate with padding-top:96px * sized for a one-row desktop nav. In flow, that padding double-counts. */ nav.vj-abs { position: static !important; } /* The panels are `display:grid; align-content:center` inside min-height:100vh. * When the content is TALLER than the panel — which happens in portrait, * where a narrow column makes everything taller, but not in landscape — a * centred grid overflows equally in BOTH directions, so the top of one * panel rides up over the bottom of the previous one. That is the terminal * image appearing to occlude the subheading above it. Packing to the start * lets the panel grow downward instead. */ .vj-ac-center { align-content: start !important; } .vj-snap.vj-band { padding-top: 28px !important; } /* --- Grids ------------------------------------------------------------- * Track is minmax(0,1fr), NOT 1fr: bare 1fr means minmax(auto,1fr), whose * floor is the content's min-content width, so a long code line still * forces the page wider than the screen. The 0 floor is what lets it * shrink. The second rule catches IMPLICIT grids that declare no columns at * all — one of those handed a 326px container a 964px track. */ .vj-cols, .vj-grid { grid-template-columns: minmax(0, 1fr) !important; } .vj-grid > *, .vj-flex > * { min-width: 0 !important; } /* --- Flow --------------------------------------------------------------- */ .vj-flex { flex-wrap: wrap !important; } /* Terminal comments. The wrap rule above breaks a `$ command # note` row onto two lines, and the orphaned note then reads as a comment on the NEXT command — "# in-agent guards" appearing to annotate the line below it. The command is the content; the note is decoration. Drop the decoration rather than let it lie. Matches only the dimmed, flex:none note spans inside the dark terminal blocks; every element this selects starts with "#". */ .vj-cli-note.vj-fixed { display: none !important; } /* Terminal commands. With the note hidden (above) a long command still ellipsises, so the reader loses the back half of the one line they came for -- "vijil protect my-agent --guards prompt_inj...". A command is not decoration; let the row scroll instead of truncating it. Scoped to the dark terminal block, not the small inline code chips that share the ground token. */ .vj-panel.vj-terminal .vj-nowrap { overflow-x: auto !important; } .vj-panel.vj-terminal .vj-ellipsis { overflow: visible !important; text-overflow: clip !important; } /* Logo marquees are a width:max-content flex track translated by a keyframe animation inside an overflow:hidden window. Wrapping it, or capping it at max-width:100%, turns the scrolling row into a tall stacked column with 72px gaps. Animated tracks and their immediate rows keep their own flow. */ /* div[...] rather than [...] on purpose. The generic [style*="width:"] { max-width: 100% } rule below has the same specificity and comes later, so it was winning and capping this track at the column width — which squashed the two loop copies onto each other and made the logos appear to repeat and overlap. The element qualifier outranks it. */ div.vj-marquee, div.vj-marquee > * { flex-wrap: nowrap !important; max-width: none !important; width: max-content !important; flex: none !important; } /* Keep each mark's own inline width. width:auto collapses a background-image div to zero (no content to size from), and the flex-children min-width:0 rule above lets it shrink to nothing; flex:none pins it. */ div.vj-marquee [role="img"] { flex: none !important; max-width: none !important; /* keep the mark's own 130px, not 100% of the row */ } /* Step sequences (Scan -> Fingerprint -> Attest) stack rather than wrap: a wrapped connector arrow points nowhere. */ .vj-flex.vj-stretch { flex-direction: column !important; } .vj-has-w { max-width: 100% !important; } /* The export bakes a measured width AND height onto some elements — this * paragraph carries "width:964px; height:29px", the height of ONE line at * desktop width. Narrowing it reflows the text to three lines, but the * pinned height stays at one, so the text spills over whatever follows. * That is the portrait-only occlusion in "Plugs in to": in landscape the * column is wide enough that the text still fits its pinned height. * * Released on text blocks only. Of 56 elements with a pinned width+height, * exactly one overflows, and spans are left alone because several use a * pinned height as a shape (colour dots, badges) that auto would collapse. */ p.vj-has-h, h1.vj-has-h, h2.vj-has-h, h3.vj-has-h, h4.vj-has-h, li.vj-has-h, blockquote.vj-has-h, figcaption.vj-has-h { height: auto !important; min-height: 0 !important; } .vj-has-minw { min-width: 0 !important; } img, svg, video, canvas, iframe { max-width: 100% !important; height: auto; } /* clip, not hidden: hidden makes the element a scroll container and would resurrect the nested-scrolling bug that broke the homepage. */ html, body { overflow-x: clip; } /* THE TWO RULES BELOW PAY FOR THE ONE ABOVE. Clipping means anything wider than the screen is unreachable, not scrollable — no bar appears and nothing throws. check-rendered now fails on any element past 390px, and these are the two shapes that were already over it. A prose table is content a reader needs. display:block is what makes overflow apply to a table box at all; without it the rule is inert. */ .vj-prose-main table { display: block; overflow-x: auto; max-width: 100%; } /* An inline identifier has nowhere to break: a SPIFFE ID is one token with no spaces, so it runs straight off the screen. Break it anywhere instead. Scoped away from 
, where a code block scrolls and must keep its own
     line breaks — breaking there would corrupt what the reader copies. */
  :not(pre) > .vj-code { overflow-wrap: anywhere; }

  /* Same shape, different element: four blog posts print a bare URL as their
     own link text, and an 88-character URL is one token with nowhere to break.
     CI caught this one and macOS did not — Linux lays the same self-hosted type
     out about 46px wider, which is the platform difference check-nav-clearance
     already carries an 8px clearance for. Scoped to prose so the short nav and
     footer links are untouched; `anywhere` only breaks a word that will not
     otherwise fit, so ordinary link text is unaffected either way. */
  .vj-prose-main a { overflow-wrap: anywhere; }
}

/* ========================================================================
   Type and rhythm — tablet down
   ======================================================================== */
@media (max-width: 767px) {
  /* Scaled to land near the live site's 52.76px h1 at a 390px viewport
     (13.5vw ~= 52.7px there) rather than to an invented ladder. */
  .vj-display, .vj-display, .vj-display {
    font-size: clamp(36px, 13.5vw, 60px) !important; line-height: 1.06 !important;
  }
  .vj-hero, .vj-hero { font-size: clamp(34px, 12vw, 54px) !important; line-height: 1.08 !important; }
  .vj-title, .vj-title { font-size: clamp(32px, 11vw, 48px) !important; line-height: 1.1 !important; }
  .vj-head, .vj-head { font-size: clamp(28px, 8.5vw, 38px) !important; line-height: 1.15 !important; }
  .vj-subhead { font-size: clamp(26px, 7.5vw, 34px) !important; line-height: 1.18 !important; }

  /* THE LADDER ABOVE MISSED THREE HEADINGS, and a phone is where that shows.
     Measured at a 320px viewport before this: the product h1 rendered at 56px,
     a section h2 at 32px and a blog title at 44px — none of them scaled at all,
     because .vj-h-56 and .vj-h-32 were added for the DESKTOP end of the site
     and .vj-post-title predates the ladder. Vin: "the page headings on mobile
     look very large."

     Same mechanism as the rungs above, and continuous with them: each vw term
     exceeds its ceiling by 767px, so every heading holds its full size at the
     breakpoint and only shrinks below it. The bare h1 is a floor for the
     eighteen that carry no ladder class at all; the doubled class selectors
     above outrank it, so it catches only what nothing else claims. */
  .vj-h-56 { font-size: clamp(30px, 9vw, 56px) !important; line-height: 1.1 !important; }
  .vj-h-32, .vj-h-32-plain { font-size: clamp(24px, 6.2vw, 32px) !important; line-height: 1.2 !important; }
  .vj-post-title { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.15 !important; }
  h1 { font-size: clamp(30px, 8.5vw, 44px) !important; line-height: 1.12 !important; }

  /* Hard line breaks are set for a desktop measure. On a phone they leave
     orphans mid-sentence ("systems that" alone on a line), so let text
     reflow. display:inline rather than display:none: hiding the 
 also
     removes the whitespace it stood for, which ran words together
     ("systems thatremain reliable"). The ::after restores the space.
     Verified in the browser against all three candidate techniques. */
  .vj-softbr::before { content: none !important; }

  /* nowrap belongs on nav items and pills, not on headings and body, where it
     forces horizontal overflow. */
  h1, h2, h3, h4, p, li, td, th, figcaption, blockquote { white-space: normal !important; }
nav .vj-nowrap,
  a.vj-btn,
  a.vj-btn-ghost,
  a.vj-btn-ghost-brand,
  a.vj-btn-sm,
  a.vj-btn-ghost-sm,
  a.vj-chip { white-space: nowrap !important; }

  .vj-gutter { padding-left: 20px !important; padding-right: 20px !important; }
  .vj-band-gutter { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ========================================================================
   Phone
   ======================================================================== */
@media (max-width: 767px) {
  /* ---- Logos: one size for every set ------------------------------------
   * Two different mechanisms carry logos. Customer marks are
   * 
 with a background image, sized
   * 176x44 (and NEAR at 112x28, already inconsistent). Analyst and award
   * marks are  at 36-48px. Both are normalised to the same 34px so the
   * rows read as one system.
   *
   * The selector keys on the inline opacity every decorative logo carries and
   * the nav wordmark does not, so the wordmark keeps its size. */
img.vj-dim,
  img.vj-dim,
  img.vj-dim {
    width: auto !important;
    object-fit: contain;
  }

  /* Equal height is not equal presence. Measured intrinsic ratios:
   *   award badges      0.92 - 0.93  (square)
   *   investor marks    2.89 - 7.72  (wordmarks)
   *   customer marks    3.71 - 9.89  (wordmarks)
   * At a shared 34px the square badges were ~32px wide and the wordmarks
   * 126-336px — roughly four times the visual mass. Heights now move in
   * opposite directions to meet in the middle: wordmarks down to 28, square
   * badges up to 42. Filename is the discriminator because CSS cannot select
   * on aspect ratio, and the award- and inv- prefixes are stable names.
   * (Do not write a star-slash pair inside this comment: it closes it early
   * and silently turns the rules below into garbage.) */
  img[src*="award-"] { height: 48px !important; max-height: 48px !important; }
  img[src*="inv-"] {
    height: 22px !important; max-height: 22px !important;
    align-self: center !important;      /* Mayfield sat high against the others */
    vertical-align: middle !important;
    object-fit: contain;
  }
  /* Gradient's mark is 193x25 — ratio 7.7 against Mayfield's 2.9 — so at an
     equal height it runs 170px wide and dominates the row. Capping width
     brings its visual weight back in line; BrightMind is capped for the same
     reason, being the heaviest of the three by area. */
  img[src*="inv-gradient"]   { max-width: 112px !important; height: auto !important; }
  /* Mayfield's artwork sits high in its own PNG, so at a shared centre
     line its ink reads about 3px above the others. Nudge the box down
     by that much rather than changing its size. */
  img[src*="inv-mayfield"]   { position: relative !important; top: 3px !important; }
  img[src*="inv-brightmind"] { max-width: 100px !important; height: auto !important; }

  /* The row's 22px desktop gap pushed the third mark onto a second line,
     which read as one logo sitting higher than the others rather than as a
     wrap. Tighter gap keeps all three on one row. */
  .vj-flex:has(> img[src*="inv-"]) {
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* Customer logos: a 2 x 3 grid rather than a wrapping flex row, which left
     ragged rows of two-then-one. :has() selects the row by what it contains,
     since the container itself has no class to target. */
  /* [style*="flex-wrap:wrap"] is the discriminator, and it matters: the
     framework marquee is ALSO a flex row of [role=img] marks, but sits inside
     an animated width:max-content track and does not wrap. Without this the
     grid rule collapsed the marquee and width:100% blew each mark up to the
     full row, leaving that section blank. */
  .vj-flex.vj-wrap:has(> [role="img"][aria-label]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px !important;
    align-items: center !important;
    justify-items: stretch !important;
  }
  .vj-flex.vj-wrap:has(> [role="img"][aria-label]) > [role="img"][aria-label] {
    width: 100% !important;
  }
  /* Justify the grid: left column's artwork to the left margin, right
     column's to the right edge, with the slack falling between them. The box
     already fills its cell, so the alignment is done by where the background
     image sits inside it rather than by resizing anything. */
  .vj-flex.vj-wrap:has(> [role="img"][aria-label]) > [role="img"][aria-label]:nth-child(odd) {
    background-position: left center !important;
  }
  .vj-flex.vj-wrap:has(> [role="img"][aria-label]) > [role="img"][aria-label]:nth-child(even) {
    background-position: right center !important;
  }
  /* Height applies to every mark, marquee included, so both sets read as one
     system. Width is left alone outside the grid. */
  [role="img"][aria-label] {
    height: 22px !important;
    background-size: contain !important;
  }
  /* The NEAR mark is a PNG cropped tight to its glyphs, where the others are
     SVGs carrying their own internal whitespace. At an equal box height it
     therefore reads noticeably larger. Scaling the artwork inside the same box
     gives it matching optical padding without changing the grid. */
  [role="img"][aria-label="NEAR"] {
    background-size: auto 78% !important;
  }

  /* ---- Diagrams ---------------------------------------------------------
   * lorenz-loop and lifecycle-graph draw into a ~1044px viewBox. Scaled into
   * 350px their labels render at about 4px. The wrapper (added by the
   * converter) scrolls instead, so the diagram stays legible and swipeable. */
  .vj-diagram-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100% !important;   /* the 720px host must not widen the page */
    width: 100% !important;
  }
  /* The component sizes its own diagram from viewport HEIGHT:
   *   .vj-loop figure { max-width: min(1080px, max(420px,
   *                     calc((100vh - 400px) * 1.678))) }
   * On a phone that resolves to ~600px however wide the host is, so the stage
   * labels (spec, evolve, evaluate, ...) render at roughly 58% and vanish.
   * That rule is inside a shadow root, so it is fixed in the component's own
   * stylesheet (design/lorenz-loop.js) rather than from here. This wrapper
   * only provides the horizontal scroll. */
  /* No min-width here any more. Forcing the whole component to 1044px took
     its heading and lede off-screen with it, so the section opened scrolled
     past its own title. The component now scrolls only its 

     internally (see design/lorenz-loop.js), leaving the prose at viewport
     width. This wrapper stays for lifecycle-graph, which has no such
     internal treatment. */
  .vj-diagram-scroll > * {
    display: block;
    max-width: 100% !important;
  }


  /* The leaderboard card's side padding steals width from the mobile SVG inside
     it, and that SVG is drawn in a 350-unit viewBox — 20px each side dropped its
     labels from 8.6px to 8.11px, under the 9px floor check-rendered enforces.
     The card keeps its frame; it just stops taking room from the chart. */
  .vj-chart-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  /* ---- CTA buttons ------------------------------------------------------
   * Centre any row of pill CTAs. Selected by content, as the row has no class. */
.vj-flex:has(> a.vj-btn, > a.vj-btn-ghost, > a.vj-btn-ghost-brand, > a.vj-btn-sm, > a.vj-btn-ghost-sm, > a.vj-chip) {
    justify-content: center !important;
  }

  /* An image set to width:112% deliberately overhangs its column on desktop;
     on a phone that is 2px of horizontal overflow and a crowded figure. */
  img.vj-bleed, div.vj-bleed {
    width: 100% !important; max-width: 100% !important;
  }
}

@media (max-width: 479px) {
  /* Stack the CTA pills once a side-by-side pair would be cramped. */
.vj-flex:has(> a.vj-btn, > a.vj-btn-ghost, > a.vj-btn-ghost-brand, > a.vj-btn-sm, > a.vj-btn-ghost-sm, > a.vj-chip) {
    flex-direction: column !important;
    align-items: center !important;
  }
a.vj-btn,
  a.vj-btn-ghost,
  a.vj-btn-ghost-brand,
  a.vj-btn-sm,
  a.vj-btn-ghost-sm,
  a.vj-chip {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
  }

  .vj-gutter { padding-left: 16px !important; padding-right: 16px !important; }
  .vj-gap-xl { gap: 48px !important; }
  .vj-gap-lg { gap: 36px !important; }
  .vj-gap-md { gap: 32px !important; }
}


/* Desktop behaviour of the converted 
 replacements: ::before injects the
 * newline the original 
 provided. The span itself holds a space, so the
 * mobile rule above (content:none) leaves words correctly separated. */
.vj-softbr::before { content: "\A"; white-space: pre; }

/* ========================================================================
   Product diagram swap — the breakpoint half
   ========================================================================
   Its own block at the end of the file for two reasons. The generic
   `img, svg, ... { max-width:100% !important }` rule in the 991 block would
   otherwise tie with the variant's sizing, and last-wins settles it. And an
   earlier attempt anchored these rules on a nearby comment that turned out to
   sit inside the 767 block, so the swap silently fired a breakpoint late —
   scripts/check-css-breakpoints.mjs now asserts the enclosure. */
@media (max-width: 991px) {
  /* The desktop svg is any direct svg child that is not the variant, so no
     class has to be injected into the export's own markup. */
  .vj-dia-swap > svg:not(.vj-dia-mobile) { display: none !important; }
  .vj-dia-swap > lifecycle-graph { display: none !important; }
  .vj-dia-swap > .vj-dia-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
}

/* ========================================================================
   Lifecycle variant — the chase around the loop
   ========================================================================
   Six chips sit on a rectangle. Each lights in turn, and the connector leaving
   it travels to the next, so the motion runs clockwise around the perimeter
   once every 7s. That IS the argument: the lifecycle is a loop, not a line.

   Keyframes live here rather than in a