/* wgbv v2.0.0: WeGuide bento visuals. Built by build.py from src/; do not edit. Visuals: consent, education, engagement, analytics, nudge, appointment-reminder, automations, brand-theme, build, compliance, compliance-platform, connect, data-merge, distribution, form-builder, identity, messaging, model-search, multilingual, one-platform, reminders, reminders-care, screening, security, store-listing, substudy, survey, televisit, wearable. */
/* wgbv core.css (v2): root box, card adapters, stage, shared parts. Visual styles live in src/visuals/<name>.css.
   Every rule is scoped to a .wgbv-visual root (or to the HTML Embed that holds one), so nothing outside a visual
   is styled. Each visual is drawn on a stage with a fixed design size (--wgbv-w x --wgbv-h, set per visual on the
   root); --wgbv-p is one design pixel, so the stage scales like an image with object-fit: contain. The markup is
   the finished state; wgbv.js plays the motion. */
@property --wgbv-p { syntax: '<length>'; inherits: true; initial-value: 1px; }

/* The Webflow HTML Embed that holds a visual must not add a box (the visual takes the image's place). */
.wgbv-embed, .w-embed:has(> .wgbv-visual) { display: contents; }
.wgbv-embed::before, .wgbv-embed::after, .w-embed:has(> .wgbv-visual)::before, .w-embed:has(> .wgbv-visual)::after { content: none; display: none; }

/* The site styles bare tags (paragraph margins, inline-block images, heading sizes). Start from browser defaults. */
.wgbv-visual :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,a,img,figure,figcaption,strong,small,em,b,i,span,label,svg) { all: revert; }

/* ---- Root box. Default: a block with the aspect ratio of the image it replaces (--wgbv-ar, set per visual). ---- */
.wgbv-visual {
  --wgbv-ar: 412 / 192;
  position: relative; display: block; box-sizing: border-box; width: 100%; aspect-ratio: var(--wgbv-ar); margin: 0; padding: 0;
  container-type: size; pointer-events: none; overflow: visible;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.4;
  letter-spacing: normal; text-align: left; text-transform: none; color: #111827; -webkit-font-smoothing: antialiased;
}

/* ---- Care pathway bento (wgcp: the 16 /solutions/<condition> pages and the /solutions hub).
   v1 gave the visual the exact box of the image it replaced (absolute, fixed height, pinned to the card bottom). That
   box ran into a 4-line paragraph (analytics at 1024 px), cut phones off flat above the card edge over an empty band
   (consent, education) and scaled UI text past the page text (the hub's engagement). In v2 a card that holds a visual
   (and only such a card; the nudge cards keep the site layout) is a flex column: the copy, a fixed gap, then the visual
   at the bottom (margin-top: auto). The card keeps the site's min-height and grows only when copy and visual need more.
   The card is an inline-size container, so the visual's width is set in card units (cqw: 1% of its content box).
   Each visual shows a window of its stage (--wgbv-cx/-cy/-cw/-ch, design px) scaled like object-fit: contain and
   aligned by --wgbv-ax/-ay (0 start, 1 end); --wgbv-pmax caps the design pixel so its biggest text stays at or under
   the card's body text. Phones and screens that run off the stage (consent, education) bleed to the card's bottom
   edge, so their crop is the card edge; framed UI (engagement, analytics, wearable) keeps the card padding.
   Selectors use :is() (specificity of one class), so the per-visual rules (one more class or attribute) win over
   the shared ones, and the media query rules come last. ---- */
@supports selector(:has(*)) {
  :is(.wgcp-card-wide, .wgcp-card-small):has(.wgbv-visual) { display: flex; flex-direction: column; row-gap: 24px; container: wgbv-card / inline-size; }
  @media (min-width: 992px) { :is(.wgcp-card-wide, .wgcp-card-small):has(.wgbv-visual) { row-gap: 20px; } }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual {
    --wgbv-cx: 0; --wgbv-cy: 0; --wgbv-cw: var(--wgbv-w); --wgbv-ch: var(--wgbv-h); --wgbv-ax: .5; --wgbv-ay: 1;
    position: relative; inset: auto; flex: none; align-self: center; width: 100cqw; max-width: none; height: auto; max-height: none;
    aspect-ratio: var(--wgbv-cw) / var(--wgbv-ch); margin: auto 0 0; }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual .wgbv-stage { inset: auto; margin: 0;
    --wgbv-p: min(calc(100cqw / var(--wgbv-cw)), calc(100cqh / var(--wgbv-ch)), var(--wgbv-pmax, 100px));
    left: calc((100cqw - var(--wgbv-p) * var(--wgbv-cw)) * var(--wgbv-ax) - var(--wgbv-p) * var(--wgbv-cx));
    top: calc((100cqh - var(--wgbv-p) * var(--wgbv-ch)) * var(--wgbv-ay) - var(--wgbv-p) * var(--wgbv-cy));
    width: calc(var(--wgbv-p) * var(--wgbv-w)); height: calc(var(--wgbv-p) * var(--wgbv-h)); }

  /* consent (condition pages, wide card with the narrow copy column): the phone stands in the bottom-right corner,
     cut by the card's bottom edge; its own 43 design px margin is its inset from the card's right edge. The box takes
     the free height (the phone scales down a little for a long paragraph) and grows the card only below 85 % size.
     Below 992 px the phone is centred and its box may use the card padding too (its own margins keep it inset). */
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="consent"] { --wgbv-cy: 6; --wgbv-cw: 514; --wgbv-ch: 357; --wgbv-pmax: .84px;
    --wgbv-vw: min(100cqw + 48px, 340px); width: var(--wgbv-vw); flex: 1 0 0; aspect-ratio: auto; min-height: calc(var(--wgbv-vw) * 357 / 514); margin-bottom: -24px; }
  /* education: the welcome letter and the Arabic phone, cut by the card's bottom edge 12 design px under the portal
     letter's lead line (window y 50 to 346). The letter body below the lead moves 12 design px down so the cut never
     touches a text line; the phone sits 6 design px lower, so less of its screen is empty under the Arabic letter. */
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="education"] { --wgbv-h: 346; --wgbv-cy: 50; --wgbv-cw: 477; --wgbv-ch: 296; --wgbv-pmax: .88px;
    --wgbv-vw: min(100cqw + 24px, 400px); width: var(--wgbv-vw); flex: 1 0 0; aspect-ratio: auto; min-height: calc(var(--wgbv-vw) * 296 / 477); margin-bottom: -24px; }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="education"] .wgbv-portal .wgbv-l-body { margin-top: calc(var(--wgbv-p) * 20); }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="education"] .wgbv-phone-flat { top: calc(var(--wgbv-p) * 61.7); }
  /* engagement: the window is the four tiles (design x 12 to 400.5, y 8 to 171), so the tiles line up with the copy.
     The reminder list reaches the check-in tile's right edge; the guidance button lines up with the signature. */
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="engagement"] { --wgbv-cx: 12; --wgbv-cy: 8; --wgbv-cw: 388.5; --wgbv-ch: 163; --wgbv-pmax: .9px; width: min(100cqw, 350px); }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="engagement"] .wgbv-types { width: calc(var(--wgbv-p) * 258.5); }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="engagement"] .wgbv-cta { left: calc(var(--wgbv-p) * 12); }
  /* analytics: the navy panel is the visual's own box, framed by the card padding (at most its natural 559 x 390 design
     px, so a tall card leaves the space above it). The dashboard spans the panel's width with 30 design px of navy on
     every side; when the panel is flatter than the design (a long paragraph), the stat cards get wider, not smaller.
     The dashboard holds both stat cards (330 instead of 259 design px, so the second one no longer hangs below it, and
     it fades in and slides up over white); labels 19 and numbers 32 design px, so the figures stay the hero at the
     small scale of these cards (pmax keeps them under the body text). The panel is never taller than the dashboard
     at that scale (--wgbv-vh). */
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="analytics"] { --wgbv-h: 390; --wgbv-cx: 30; --wgbv-cw: 559; --wgbv-ch: 390; --wgbv-ay: .5; --wgbv-pmax: .49px;
    --wgbv-vw: min(100cqw, 335px); --wgbv-vh: min(calc(var(--wgbv-vw) * 390 / 559), calc(var(--wgbv-pmax) * 390)); width: var(--wgbv-vw); flex: 1 0 0; aspect-ratio: auto;
    min-height: var(--wgbv-vh); max-height: var(--wgbv-vh); border-radius: 12px; background: #233190; }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="analytics"] .wgbv-stage { left: 0; width: 100cqw; }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="analytics"] .wgbv-panel { background: none; }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="analytics"] .wgbv-dash { left: calc(var(--wgbv-p) * 30); right: calc(var(--wgbv-p) * 30); width: auto; height: calc(var(--wgbv-p) * 330); }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi { left: calc(var(--wgbv-p) * 45); right: calc(var(--wgbv-p) * 45); width: auto; padding-top: calc(var(--wgbv-p) * 19); }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi-label { font-size: calc(var(--wgbv-p) * 19); }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi-label .wgbv-i { width: calc(var(--wgbv-p) * 20); height: calc(var(--wgbv-p) * 20); }
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="analytics"] .wgbv-num { font-size: calc(var(--wgbv-p) * 32); }
  /* wearable (/solutions/cardiac-rehabilitation "Stay connected"): window = the sync tile and the three insight cards. */
  :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="wearable"] { --wgbv-cx: 4; --wgbv-cy: 5; --wgbv-cw: 392; --wgbv-ch: 221; --wgbv-pmax: .7px; width: min(100cqw, 274px); }
  @media (min-width: 992px) {
    :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="consent"] { --wgbv-vw: calc(60cqw + 36px); align-self: flex-end; --wgbv-ax: 1;
      min-height: calc(var(--wgbv-vw) * 357 / 514 * .85); margin-right: -30px; margin-bottom: -30px; }
    :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="education"] { --wgbv-vw: min(80cqw, 360px); min-height: calc(var(--wgbv-vw) * 296 / 477 * .85); margin-bottom: -30px; }
    .wgcp-card-small .wgbv-visual[data-wgbv="education"] { --wgbv-vw: 100cqw; }
    .wgcp-card-small .wgbv-visual[data-wgbv="engagement"] { width: 100cqw; }
    /* The /solutions hub's wide card: UI text at the nudge chips' 12 px (design scale 1). */
    .wgcp-card-wide .wgbv-visual[data-wgbv="engagement"] { --wgbv-pmax: 1px; width: min(100cqw, 388.5px); }
    /* At 992 to 1279 px the small cards' copy runs to 4 or 5 lines: the panel keeps at least 150 px and the card grows. */
    :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="analytics"] { --wgbv-vw: 100cqw; --wgbv-pmax: .46px; min-height: min(150px, var(--wgbv-vh)); }
    .wgcp-card-wide:has(.wgcp-card-copy-wide) .wgbv-visual[data-wgbv="analytics"] { --wgbv-vw: calc(60cqw + 6px); align-self: flex-end; }
    :is(.wgcp-card-wide, .wgcp-card-small) .wgbv-visual[data-wgbv="wearable"] { --wgbv-pmax: .66px; width: min(100cqw, 259px); }
  }
}
/* Without :has() (older browsers) the care rules above do not apply: the visual is a block of its own aspect ratio
   after the copy, inside the site's card. */

/* ---- Research and product bentos (.point cards: wide _1, small _3x, the 2x2 grid-6 _2grids, /alternatives).
   The image box there comes from dozens of per-card combo classes, so the image stays in the page as an invisible
   placeholder and anchor: the visual is anchored onto its box (no anchor support: the visual is hidden and the static
   image shows, today's page). Place the embed directly after the image. The visual does not keep that box, though:
   fit() in core.js derives the visual's own area from the card (the free space under, beside or above the copy, inset
   like the copy, clear of it) and writes it as deltas to the image box (--wgbv-dt/dl/dw/dh), and its size in px
   (--wgbv-aw/ah: Safari 26 resolves the stage's container units to 0 in a box sized by anchor-size()). Without
   JavaScript the deltas are 0 and the visual fills the image box (empty in Safari 26). The root is clipped to the card's rounded border box
   (--wgbv-ct/cr/cb/cl, --wgbv-crad), so a phone that bleeds off the card's bottom edge is cut by the card's own edge
   and corners. z-index -1: above the Perspective Grid (img.lining, -1, earlier in the page) and below the copy (the
   card, z-index 10, is the stacking context); 0 where the image itself is 0 (image-110 h s and image-143 h s from 1920 px). ---- */
.point img + :is(.w-embed, .wgbv-embed) > .wgbv-visual { display: none; }
@supports (anchor-name: --wgbv-slot) {
  .point img:has(+ :is(.w-embed, .wgbv-embed) > .wgbv-visual) { anchor-name: --wgbv-slot; visibility: hidden; }
  .point img + :is(.w-embed, .wgbv-embed) > .wgbv-visual {
    display: block; position: absolute; position-anchor: --wgbv-slot; position-visibility: always; right: auto; bottom: auto;
    top: calc(anchor(top) + var(--wgbv-dt, 0px)); left: calc(anchor(left) + var(--wgbv-dl, 0px));
    width: var(--wgbv-aw, calc(anchor-size(width) + var(--wgbv-dw, 0px))); height: var(--wgbv-ah, calc(anchor-size(height) + var(--wgbv-dh, 0px)));
    max-width: none; max-height: none; margin: 0; aspect-ratio: auto; z-index: -1;
    clip-path: inset(var(--wgbv-ct, -100vmax) var(--wgbv-cr, -100vmax) var(--wgbv-cb, -100vmax) var(--wgbv-cl, -100vmax) round var(--wgbv-crad, 0px)); }
  @media (min-width: 1920px) { .point img.image-110.h.s + :is(.w-embed, .wgbv-embed) > .wgbv-visual, .point img.image-143.h.s + :is(.w-embed, .wgbv-embed) > .wgbv-visual { z-index: 0; } }
  /* 992 to 1279 px: the small cards' fixed heights leave the visual a 70 to 120 px strip under 4 to 6 lines of copy,
     and on the wide cards the paragraph is a fixed 230 to 258 px column beside a 110 to 130 px gap that no product
     screen can be read in. A card that holds a visual stacks like the site's phone layout: the copy (full width), a
     20 px gap, then a band of at least 150 px for the visual (170 px on the wide cards). The hidden image is the
     spacer, ordered last whether it comes before or after the copy in the markup. The card's height is auto (at least
     318 px), so it stretches to its grid row like its neighbours and grows by what the band needs; the other cards in
     that grid get min-height 100%, so a row keeps one bottom edge. */
  @media (min-width: 992px) and (max-width: 1279px) {
    .point:has(> img + :is(.w-embed, .wgbv-embed) > .wgbv-visual) { display: flex; flex-direction: column-reverse; justify-content: flex-end;
      row-gap: 20px; height: auto; min-height: 318px; }
    .point:has(> img + :is(.w-embed, .wgbv-embed) > .wgbv-visual) .uui-text-size-medium { width: auto; }
    .point > img:has(+ :is(.w-embed, .wgbv-embed) > .wgbv-visual) { position: static; inset: auto; order: -1; flex: 1 0 150px; align-self: stretch;
      width: 100%; min-width: 0; max-width: 100%; height: auto; min-height: 0; aspect-ratio: auto; margin: 0; padding: 0; }
    .point:not(._3x) > img:has(+ :is(.w-embed, .wgbv-embed) > .wgbv-visual) { flex-basis: 170px; }
    .w-layout-grid:has(> .point > img + :is(.w-embed, .wgbv-embed) > .wgbv-visual) > .point:not(:has(> img + :is(.w-embed, .wgbv-embed) > .wgbv-visual)) { min-height: 100%; }
  }
  /* Phones: the page container centres a wrapper as wide as the widest card image (24rem on /movement-studies and
     /wearable-device-studies, 336 px on /observational-studies), because the grid track is 1fr (minmax(auto, 1fr)) and
     the wrappers are flex items with min-width: auto; the cards then reach past the screen (or touch both edges, as on
     /prems-proms). In the bento grids that hold a visual the track, the cards and the wrappers above them (up to four
     levels) keep to the container's width. */
  @media (max-width: 767px) {
    :is(:has(> .w-layout-grid > .point .wgbv-visual), :has(> * > .w-layout-grid > .point .wgbv-visual), :has(> * > * > .w-layout-grid > .point .wgbv-visual),
      :has(> * > * > * > .w-layout-grid > .point .wgbv-visual)) { min-width: 0; max-width: 100%; }
    .w-layout-grid:has(> .point .wgbv-visual) { grid-template-columns: minmax(0, 1fr); }
    .w-layout-grid:has(> .point .wgbv-visual) > .point { min-width: 0; }
    /* A card that holds a visual keeps its height (or its image's) but grows when the copy leaves the visual less than
       a 150 px band: the hidden image is at least 150 px tall (also where it was absolutely placed). */
    .point:has(> img + :is(.w-embed, .wgbv-embed) > .wgbv-visual) { min-height: min-content; }
    .point > img:has(+ :is(.w-embed, .wgbv-embed) > .wgbv-visual) { position: static; inset: auto; flex: 1 0 auto; min-height: 150px; }
    /* One image is sized height: 100% of its fixed-height card by the site (/population-health-cohort-study "Effortless
       substudy management", .image-44.h.s.es): with min-content above, that would add the card's full height to its
       copy (+140 px). At auto it starts from its own ratio and grows into the card's height, as in the site. */
    .point > img.image-44.h.s.es:has(+ :is(.w-embed, .wgbv-embed) > .wgbv-visual) { height: auto; }
  }
  /* Copy first on phones (30 October; the identity phone fix). Up to 479 px the site makes the Perspective Grid
     (img.lining; absolute above that) a static flex item, and .point._3x is a column with a 40 px row gap. Most _3x
     combo classes reverse that column, and their markup is lining, image, copy, so the copy comes first and the
     lining, the card's first child, ends up at the bottom. Five cards have the markup lining, copy, image instead:
     - three identity cards keep the plain column (/telehealth "Your organisation, your identity", /prems-proms "Your
       patients, your brand", /patient-registry "Customisable branding"), so the lining and the gap (98 to 121 px)
       sat above the heading, also in production;
     - the "Tele-consultation" cards on /decentralised-clinical-trial and /randomised-controlled-trials (televisit) are
       reversed by the site (.tc), so their image, and so the visual, sat above the copy, with the lining's empty band
       under the copy.
     In a card with that markup and a visual, the copy and the hidden image come first and the lining last, as in every
     other phone card: the heading starts at the top padding, fit() gives the visual the free area under the copy (the
     identity cards get the square layout of their siblings, the Tele-consultation cards the call layout of their
     sibling on /observational-studies), and the card keeps its height (the same items and gaps in another order). The
     lining keeps order 0, so it still paints under the visual. */
  @media (max-width: 479px) {
    .point:has(> img.lining + * + img + :is(.w-embed, .wgbv-embed) > .wgbv-visual) { flex-direction: column; }
    .point:has(> img.lining + * + img + :is(.w-embed, .wgbv-embed) > .wgbv-visual) > :not(.lining) { order: -1; }
  }
  /* White-labeling grid fix (30 October). From 1440 to 1919 px the site sets .cards-4 to 140 % of .container-default,
     which is width: auto there and shrinks to its heading (923 px at 1440). So the 2 x 2 bento grid on
     /platform/white-labeling ("Why choose our whitelabel application?") is 1293 px wide from the container's left
     edge: 111 px past a 1440 px window (31 px at 1600), off-centre up to 1919 px. Below 1440 and from 1920 px the site
     sets both to 100 %. Where the .cards-4 holds a bento visual they stay at 100 % in this range too: the grid spans the
     page container (1280 px, cards 630 px wide, as at 1920) and stays centred. The heading is centred text, so it does
     not move. */
  @media (min-width: 1440px) and (max-width: 1919px) {
    .container-default:has(> * > .cards-4 > .w-layout-grid > .point .wgbv-visual) { width: 100%; }
    .cards-4:has(> .w-layout-grid > .point .wgbv-visual) { width: 100%; max-width: 100%; }
  }
}
/* /platform onboarding-grid cards (.screening-card): the embed replaces the image (card-image: full card width,
   every image 620 x 363, radius 10px; natural size from 1920 px). */
.screening-card > :is(.w-embed, .wgbv-embed) > .wgbv-visual { width: 100%; max-width: 100%; aspect-ratio: 620 / 363; border-radius: 10px; overflow: hidden; }
@media (min-width: 1920px) { .screening-card > :is(.w-embed, .wgbv-embed) > .wgbv-visual { width: 620px; } }
/* Explicit override for other templates: data-wgbv-fit="contain" fills whatever box the parent gives. */
.wgbv-visual[data-wgbv-fit="contain"] { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; }

/* ---- Stage: --wgbv-w x --wgbv-h design pixels, centred in the root box like an object-fit: contain image. ---- */
.wgbv-visual * { box-sizing: border-box; margin: 0; }
.wgbv-visual .wgbv-stage { position: absolute; inset: 0; margin: auto;
  --wgbv-p: min(calc(100cqw / var(--wgbv-w)), calc(100cqh / var(--wgbv-h))); width: calc(var(--wgbv-p) * var(--wgbv-w)); height: calc(var(--wgbv-p) * var(--wgbv-h)); }
/* Research and product cards: the root box is the visual's area (above). The stage shows a window of itself
   (--wgbv-cx/-cy/-cw/-ch, design px; default the whole stage, also in a container-query layout), scaled like
   object-fit: contain into --wgbv-fill of the area's width, never past --wgbv-pmax (fit(): the biggest UI text at most
   1.1 x the card's body text), and aligned by --wgbv-ax/-ay (0 start, .5 centre, 1 end). A bleed visual (--wgbv-bleed)
   needs only --wgbv-vis of its window height to fit: when the window is taller than the area it starts at the area's
   top and the card's bottom edge crops it; when it fits, ay 1 puts its own crop on the card's bottom edge. */
:is(.point, .screening-card) .wgbv-visual .wgbv-stage { inset: auto; margin: 0;
  --wgbv-p: min(calc(100cqw * var(--wgbv-fill, 1) / var(--wgbv-cw, var(--wgbv-w))), calc(100cqh / var(--wgbv-ch, var(--wgbv-h)) / var(--wgbv-vis, 1)), var(--wgbv-pmax, 100px));
  left: calc((100cqw - var(--wgbv-p) * var(--wgbv-cw, var(--wgbv-w))) * var(--wgbv-ax, .5) - var(--wgbv-p) * var(--wgbv-cx, 0));
  top: calc(max(0px, (100cqh - var(--wgbv-p) * var(--wgbv-ch, var(--wgbv-h))) * var(--wgbv-ay, .5)) - var(--wgbv-p) * var(--wgbv-cy, 0)); }
/* On the /platform slots (a colour tile in production) a full-bleed backdrop (build, connect, form-builder: .wgbv-bg;
   analytics: .wgbv-panel, through a ::before so its children keep their place) fills the slot; the product UI keeps its
   scale. On .point cards the tile is the stage itself (its own margins and radius), centred in the area. */
.screening-card .wgbv-visual .wgbv-stage > .wgbv-bg,
.screening-card .wgbv-visual .wgbv-stage > .wgbv-panel::before { inset: calc((100cqh - var(--wgbv-p) * var(--wgbv-h)) / -2) calc((100cqw - var(--wgbv-p) * var(--wgbv-w)) / -2); }
.screening-card .wgbv-visual .wgbv-stage > .wgbv-panel::before { content: ''; position: absolute; border-radius: inherit; background: inherit; }
/* analytics (shared with v1 and the care cards, so scoped here): its 39 design px numbers would cap the dashboard at
   0.45 of its design size; at 26 px they stay the boldest text. The dashboard holds both stat cards (the second one hung
   44 design px below it), so it also fades in over white. */
:is(.point, .screening-card) .wgbv-visual[data-wgbv="analytics"] .wgbv-num { font-size: calc(var(--wgbv-p) * 26); }
:is(.point, .screening-card) .wgbv-visual[data-wgbv="analytics"] .wgbv-dash { top: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 324); }
/* /platform analytics slot: the dashboard spans the navy tile's width (30 design px of navy each side), as on the care
   cards, instead of floating small in the middle; its stat cards get wider, not smaller. */
.screening-card .wgbv-visual[data-wgbv="analytics"] .wgbv-stage { left: 0; width: 100cqw; }
.screening-card .wgbv-visual[data-wgbv="analytics"] .wgbv-dash { left: calc(var(--wgbv-p) * 30); right: calc(var(--wgbv-p) * 30); width: auto; }
.screening-card .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi { left: calc(var(--wgbv-p) * 45); right: calc(var(--wgbv-p) * 45); width: auto; }
/* /platform consent slot: the slot ends above the card's copy, so the phone fades out over its last 18 % instead of
   being cut flat through the signature box. */
.screening-card .wgbv-visual[data-wgbv="consent"] .wgbv-stage { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
/* Bleed visuals on the research cards: phones and screens that run off their stage. */
/* consent: the window is the phone plus 6 design px each side (430 design px) at the area's full width, and the help
   line is 15 instead of 14 design px, so the phone's text stays at 8 px or more in a 238 px column beside the copy.
   It needs 97 % of its height (down to the signature line), so the signature and its motion stay in view and fit()
   prefers a column beside the copy to a low strip under it. In an area under 200 px tall (no other room) the help line
   is left out, so the pad moves up 47 design px and the window ends 12 below the signature line (316); under 160 px
   the window also starts at the nav bar (80; clipped there, so nothing above it reaches the copy), faded in over 20
   design px, so the heading stays at 8 px or more. */
.point .wgbv-visual[data-wgbv="consent"] { --wgbv-bleed: 1; --wgbv-vis: .97; --wgbv-ay: 1; --wgbv-cx: 47; --wgbv-cw: 430; --wgbv-fill: 1; }
@container (max-height: 199.98px) {
  .point .wgbv-visual[data-wgbv="consent"] .wgbv-stage { --wgbv-ch: 316; --wgbv-vis: 1; }
  .point .wgbv-visual[data-wgbv="consent"] .wgbv-help { display: none; }
}
@container (max-height: 159.98px) {
  .point .wgbv-visual[data-wgbv="consent"] .wgbv-stage { --wgbv-cy: 80; --wgbv-ch: 236; clip-path: inset(calc(var(--wgbv-p) * 80) 0 0 0);
    -webkit-mask-image: linear-gradient(transparent calc(var(--wgbv-p) * 80), #000 calc(var(--wgbv-p) * 100));
    mask-image: linear-gradient(transparent calc(var(--wgbv-p) * 80), #000 calc(var(--wgbv-p) * 100)); }
}
.point .wgbv-visual[data-wgbv="consent"] .wgbv-help { font-size: calc(var(--wgbv-p) * 15); line-height: calc(var(--wgbv-p) * 21); }
.point .wgbv-visual[data-wgbv="security"] { --wgbv-bleed: 1; --wgbv-vis: .6; --wgbv-ay: 1; --wgbv-fill: .8; }
/* security: the card's bottom edge must not cut through a row of the number pad (rows at 295, 369, 443 and 517 design
   px, digits 23 px into each). The stage's window always fits the area (vis 1 on the stage; fit() still scores the
   area with 60 %), so the card edge falls exactly at its end: 500 (under 7 8 9) in an area of 280 px or more, 432
   (under 4 5 6) from 200 px, 360 (under 1 2 3) below that. */
.point .wgbv-visual[data-wgbv="security"] .wgbv-stage { --wgbv-vis: 1; }
@container (max-height: 279.98px) { .point .wgbv-visual[data-wgbv="security"] .wgbv-stage { --wgbv-ch: 432; } }
@container (max-height: 199.98px) { .point .wgbv-visual[data-wgbv="security"] .wgbv-stage { --wgbv-ch: 360; } }
.point .wgbv-visual[data-wgbv="survey"] { --wgbv-bleed: 1; --wgbv-vis: .8; --wgbv-ay: 1; }
.point .wgbv-visual[data-wgbv="identity"] { --wgbv-bleed: 1; --wgbv-ay: 1; }
/* Narrow areas (under 300 px wide: the small cards at 1024 px and on phones, the small cards next to a wide one at
   1280 to 1440 px). The visuals shared with the care cards get their narrow layouts here; the others in their own file.
   engagement: the 2 x 2 collage on 362 design px (columns 150 and 180), so its 12 px text reaches 7.8 px at 237 px. */
@container (max-width: 299px) and (aspect-ratio >= 1.1) {
  .point .wgbv-visual[data-wgbv="engagement"] .wgbv-stage { --wgbv-w: 362; }
  .point .wgbv-visual[data-wgbv="engagement"] .wgbv-sig { width: calc(var(--wgbv-p) * 150); }
  .point .wgbv-visual[data-wgbv="engagement"] .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); }
  .point .wgbv-visual[data-wgbv="engagement"] :is(.wgbv-types, .wgbv-checkin) { left: calc(var(--wgbv-p) * 170); width: calc(var(--wgbv-p) * 180); }
  .point .wgbv-visual[data-wgbv="engagement"] .wgbv-cta { width: calc(var(--wgbv-p) * 150); }
}
/* analytics: on the research cards the dashboard spans the navy tile with 30 design px of navy each side and 15 above
   (560 x 352 design px instead of 620 x 363, as on the care cards and /platform). Under 300 px: 15 px of navy at the
   sides too, 480 x 352 design px, and the stat labels at 16 design px. */
.point .wgbv-visual[data-wgbv="analytics"] .wgbv-stage { --wgbv-w: 560; --wgbv-h: 352; }
.point .wgbv-visual[data-wgbv="analytics"] .wgbv-dash { left: calc(var(--wgbv-p) * 30); right: calc(var(--wgbv-p) * 30); top: calc(var(--wgbv-p) * 15); width: auto; }
.point .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi-1 { top: calc(var(--wgbv-p) * 105); }
.point .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi-2 { top: calc(var(--wgbv-p) * 211.5); }
.point .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi { left: calc(var(--wgbv-p) * 45); right: calc(var(--wgbv-p) * 45); width: auto; }
@container (max-width: 299px) {
  :is(.point, .screening-card) .wgbv-visual[data-wgbv="analytics"] .wgbv-stage { --wgbv-w: 480; --wgbv-h: 352; }
  :is(.point, .screening-card) .wgbv-visual[data-wgbv="analytics"] .wgbv-dash { left: calc(var(--wgbv-p) * 15); right: calc(var(--wgbv-p) * 15); top: calc(var(--wgbv-p) * 15); }
  :is(.point, .screening-card) .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi { left: calc(var(--wgbv-p) * 30); right: calc(var(--wgbv-p) * 30); }
  :is(.point, .screening-card) .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi-1 { top: calc(var(--wgbv-p) * 105); }
  :is(.point, .screening-card) .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi-2 { top: calc(var(--wgbv-p) * 211.5); }
  :is(.point, .screening-card) .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi-label { font-size: calc(var(--wgbv-p) * 16); }
}
@container (max-width: 299px) {
  /* /platform slot at 320 px (280 x 164 px): the window ends 320 design px down (under the signature line) and the
     phone fades out before that edge. */
  .screening-card .wgbv-visual[data-wgbv="consent"] .wgbv-stage { --wgbv-cx: 47; --wgbv-cw: 430; --wgbv-ch: 320; --wgbv-ay: 0;
    -webkit-mask-image: linear-gradient(#000 70%, transparent 88%); mask-image: linear-gradient(#000 70%, transparent 88%); }
}
/* connect: tight layouts (research cards; /platform under 340 px). The yellow tile keeps 10 to 32 design px around
   the diagram instead of 44 to 70, so the 14 px pill text stays at 8 px or more at 323 px (560 x 290 design px).
   Everything moves by the same offset; the lines keep their 620 x 363 drawing, clipped to the stage. In an area under
   1.45 : 1 or under 300 px wide the WeGuide window sits under the engine (compact, 447 x 300; 7 px or more at 237 px). */
@container (aspect-ratio >= 1.45) and (min-width: 300px) {
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-stage { --wgbv-w: 560; --wgbv-h: 290; }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-lines { inset: auto; left: calc(var(--wgbv-p) * -30); top: calc(var(--wgbv-p) * -36); width: calc(var(--wgbv-p) * 620); height: calc(var(--wgbv-p) * 363);
    clip-path: inset(calc(var(--wgbv-p) * 36) calc(var(--wgbv-p) * 30) calc(var(--wgbv-p) * 37) calc(var(--wgbv-p) * 30)); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-pill { left: calc(var(--wgbv-p) * 13.7); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-pill-1 { top: calc(var(--wgbv-p) * 23.9); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-pill-2 { top: calc(var(--wgbv-p) * 87.9); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-pill-3 { top: calc(var(--wgbv-p) * 151.9); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-pill-4 { top: calc(var(--wgbv-p) * 215.9); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-engine { left: calc(var(--wgbv-p) * 211.7); top: calc(var(--wgbv-p) * 113); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-window { left: calc(var(--wgbv-p) * 429.5); top: calc(var(--wgbv-p) * 87.1); }
}
@container (aspect-ratio < 1.45) or (max-width: 299px) {
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-stage { --wgbv-w: 447; --wgbv-h: 300; overflow: clip; }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-lines { inset: auto; left: calc(var(--wgbv-p) * -30); top: calc(var(--wgbv-p) * -44); width: calc(var(--wgbv-p) * 620); height: calc(var(--wgbv-p) * 363);
    clip-path: inset(calc(var(--wgbv-p) * 44) calc(var(--wgbv-p) * 187) calc(var(--wgbv-p) * 19) calc(var(--wgbv-p) * 30)); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-pill { left: calc(var(--wgbv-p) * 13.7); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-pill-1 { top: calc(var(--wgbv-p) * 15.9); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-pill-2 { top: calc(var(--wgbv-p) * 79.9); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-pill-3 { top: calc(var(--wgbv-p) * 143.9); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-pill-4 { top: calc(var(--wgbv-p) * 207.9); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-engine { left: calc(var(--wgbv-p) * 211.7); top: calc(var(--wgbv-p) * 105); }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-engine::after { content: ''; position: absolute; left: 50%; top: 100%; height: calc(var(--wgbv-p) * 13.2); border-left: calc(var(--wgbv-p) * 1.44) dashed #8000CF; }
  .point .wgbv-visual[data-wgbv="connect"] .wgbv-window { left: calc(var(--wgbv-p) * 249.4); top: calc(var(--wgbv-p) * 174); }
}
@container (max-width: 339px) and (aspect-ratio >= 1.45) {
  .screening-card .wgbv-visual[data-wgbv="connect"] .wgbv-stage { --wgbv-w: 560; --wgbv-h: 290; }
  .screening-card .wgbv-visual[data-wgbv="connect"] .wgbv-lines { inset: auto; left: calc(var(--wgbv-p) * -30); top: calc(var(--wgbv-p) * -36); width: calc(var(--wgbv-p) * 620); height: calc(var(--wgbv-p) * 363);
    clip-path: inset(calc(var(--wgbv-p) * 36) calc(var(--wgbv-p) * 30) calc(var(--wgbv-p) * 37) calc(var(--wgbv-p) * 30)); }
  .screening-card .wgbv-visual[data-wgbv="connect"] .wgbv-pill { left: calc(var(--wgbv-p) * 13.7); }
  .screening-card .wgbv-visual[data-wgbv="connect"] .wgbv-pill-1 { top: calc(var(--wgbv-p) * 23.9); }
  .screening-card .wgbv-visual[data-wgbv="connect"] .wgbv-pill-2 { top: calc(var(--wgbv-p) * 87.9); }
  .screening-card .wgbv-visual[data-wgbv="connect"] .wgbv-pill-3 { top: calc(var(--wgbv-p) * 151.9); }
  .screening-card .wgbv-visual[data-wgbv="connect"] .wgbv-pill-4 { top: calc(var(--wgbv-p) * 215.9); }
  .screening-card .wgbv-visual[data-wgbv="connect"] .wgbv-engine { left: calc(var(--wgbv-p) * 211.7); top: calc(var(--wgbv-p) * 113); }
  .screening-card .wgbv-visual[data-wgbv="connect"] .wgbv-window { left: calc(var(--wgbv-p) * 429.5); top: calc(var(--wgbv-p) * 87.1); }
}
/* wearable on the research cards: 212 design px tall instead of 231 (insight cards 62 tall, 10 apart; sync tile 206),
   so the strip under the copy on the wide cards (156 px at 1920 px) keeps the labels at 8 px or more. */
.point .wgbv-visual[data-wgbv="wearable"] .wgbv-stage { --wgbv-h: 212; }
.point .wgbv-visual[data-wgbv="wearable"] .wgbv-sync { top: calc(var(--wgbv-p) * 3); height: calc(var(--wgbv-p) * 206); }
.point .wgbv-visual[data-wgbv="wearable"] .wgbv-in { height: calc(var(--wgbv-p) * 62); }
.point .wgbv-visual[data-wgbv="wearable"] .wgbv-in:nth-child(2) { top: calc(var(--wgbv-p) * 3); }
.point .wgbv-visual[data-wgbv="wearable"] .wgbv-in:nth-child(3) { top: calc(var(--wgbv-p) * 75); }
.point .wgbv-visual[data-wgbv="wearable"] .wgbv-in:nth-child(4) { top: calc(var(--wgbv-p) * 147); }
/* wearable (shared with a care card, so here): in an area under 340 px wide the sync tile drops its caption
   ("Your data has been successfully synced to the server.", 11 design px) and its watch and title move down to the
   tile's middle. */
@container (max-width: 339px) {
  .point .wgbv-visual[data-wgbv="wearable"] .wgbv-msg { display: none; }
  .point .wgbv-visual[data-wgbv="wearable"] .wgbv-watch { top: calc(var(--wgbv-p) * 40); }
  .point .wgbv-visual[data-wgbv="wearable"] .wgbv-h, .point .wgbv-visual[data-wgbv="wearable"] .wgbv-busy { top: calc(var(--wgbv-p) * 156); }
  /* ... and the layout tightens to 371 design px (sync tile 150, insight cards 205), so its 11.5 px labels stay at 8 px
     or more from 258 px. */
  .point .wgbv-visual[data-wgbv="wearable"] .wgbv-stage { --wgbv-w: 371; }
  .point .wgbv-visual[data-wgbv="wearable"] .wgbv-sync { width: calc(var(--wgbv-p) * 150); }
  .point .wgbv-visual[data-wgbv="wearable"] .wgbv-watch { left: calc(var(--wgbv-p) * 25); }
  .point .wgbv-visual[data-wgbv="wearable"] .wgbv-in { left: calc(var(--wgbv-p) * 162); width: calc(var(--wgbv-p) * 205); }
}

.wgbv-visual .wgbv-i { display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wgbv-visual .wgbv-i.wgbv-fill { fill: currentColor; stroke: none; }
.wgbv-visual .wgbv-ink { position: absolute; overflow: visible; }
.wgbv-visual .wgbv-ink path { fill: none; stroke: #111827; stroke-linecap: round; stroke-linejoin: round; }
.wgbv-visual img { display: block; max-width: none; border: 0; }
.wgbv-visual .wgbv-b { font-weight: 600; }

/* Pointer and touch feedback (layers added by wgbv.js, removed when the motion settles) */
.wgbv-visual .wgbv-ripple { position: absolute; width: calc(var(--wgbv-p) * 30); height: calc(var(--wgbv-p) * 30); margin: calc(var(--wgbv-p) * -15) 0 0 calc(var(--wgbv-p) * -15); border-radius: 50%; background: rgba(93, 67, 226, .22); opacity: 0; z-index: 4; }
.wgbv-visual .wgbv-touch { position: absolute; left: 0; top: 0; width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); margin: calc(var(--wgbv-p) * -11) 0 0 calc(var(--wgbv-p) * -11); border-radius: 50%; background: rgba(103, 65, 217, .18); opacity: 0; z-index: 4; }

/* ---- Shared parts. Sized for the consent phone and the education portal; visuals override per use. ---- */
/* Phone status bar and island (consent, education) */
.wgbv-visual .wgbv-island { position: absolute; left: 50%; top: calc(var(--wgbv-p) * 11); width: calc(var(--wgbv-p) * 120); height: calc(var(--wgbv-p) * 35); margin-left: calc(var(--wgbv-p) * -60); border-radius: calc(var(--wgbv-p) * 20); background: #0b0b0c; }
.wgbv-visual .wgbv-status { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--wgbv-p) * 54); display: flex; align-items: center; justify-content: space-between; padding: calc(var(--wgbv-p) * 4) calc(var(--wgbv-p) * 26) 0 calc(var(--wgbv-p) * 36); color: #111827; }
.wgbv-visual .wgbv-time { font-size: calc(var(--wgbv-p) * 15.5); font-weight: 600; letter-spacing: -.01em; }
.wgbv-visual .wgbv-sys { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 5); }
.wgbv-visual .wgbv-sys svg { display: block; fill: currentColor; }
.wgbv-visual .wgbv-signal { width: calc(var(--wgbv-p) * 17); height: calc(var(--wgbv-p) * 11); }
.wgbv-visual .wgbv-wifi { width: calc(var(--wgbv-p) * 15.5); height: calc(var(--wgbv-p) * 11); }
.wgbv-visual .wgbv-battery { position: relative; display: block; width: calc(var(--wgbv-p) * 24); height: calc(var(--wgbv-p) * 11.5); margin-left: calc(var(--wgbv-p) * 2); border: calc(var(--wgbv-p) * 1) solid rgba(17, 24, 39, .4); border-radius: calc(var(--wgbv-p) * 3.5); }
.wgbv-visual .wgbv-battery i { position: absolute; inset: calc(var(--wgbv-p) * 1.5); border-radius: calc(var(--wgbv-p) * 2); background: #111827; }
.wgbv-visual .wgbv-battery::after { content: ''; position: absolute; right: calc(var(--wgbv-p) * -3.5); top: calc(var(--wgbv-p) * 3); width: calc(var(--wgbv-p) * 1.5); height: calc(var(--wgbv-p) * 4); border-radius: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 1) 0; background: rgba(17, 24, 39, .4); }
/* Portal breadcrumb with the WeGuide mark (education, analytics) */
.wgbv-visual .wgbv-crumbs { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 7); height: calc(var(--wgbv-p) * 43); padding-right: calc(var(--wgbv-p) * 12); border-bottom: calc(var(--wgbv-p) * 1) solid #E5E7EB; font-size: calc(var(--wgbv-p) * 11.5); color: #6B7280; white-space: nowrap; }
.wgbv-visual .wgbv-mark { display: grid; place-items: center; width: calc(var(--wgbv-p) * 43); height: 100%; margin-right: calc(var(--wgbv-p) * 14); border-right: calc(var(--wgbv-p) * 1) solid #E5E7EB; }
.wgbv-visual .wgbv-mark img { width: calc(var(--wgbv-p) * 23); height: auto; }
.wgbv-visual .wgbv-sep { color: #D1D5DB; }
.wgbv-visual .wgbv-current { color: #374151; }
/* Engagement row with an ON/OFF pill (admin/engagement-card-compact, admin/program-builder; reminders, build) */
.wgbv-visual .wgbv-row { position: absolute; left: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 373); height: calc(var(--wgbv-p) * 64.7); display: flex; align-items: flex-start; gap: calc(var(--wgbv-p) * 11); padding: calc(var(--wgbv-p) * 10.6) calc(var(--wgbv-p) * 10.6) 0; border: calc(var(--wgbv-p) * .9) solid #4F46E5; border-radius: calc(var(--wgbv-p) * 7); background: #fff; }
.wgbv-visual .wgbv-iconbox { display: grid; place-items: center; width: calc(var(--wgbv-p) * 28); height: calc(var(--wgbv-p) * 28); flex: none; border-radius: calc(var(--wgbv-p) * 7); background: #F3F4F6; }
.wgbv-visual .wgbv-iconbox img { width: calc(var(--wgbv-p) * 15.75); height: calc(var(--wgbv-p) * 15.75); }
.wgbv-visual .wgbv-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wgbv-visual .wgbv-row-title { margin-top: calc(var(--wgbv-p) * 1); font-size: calc(var(--wgbv-p) * 14.5); line-height: 1.35; color: #111827; }
.wgbv-visual .wgbv-row-detail { margin-top: calc(var(--wgbv-p) * 4); font-size: calc(var(--wgbv-p) * 10.6); color: #374151; white-space: nowrap; }
.wgbv-visual .wgbv-onoff { --on: 1; position: relative; display: inline-grid; place-items: center; width: calc(var(--wgbv-p) * 41.2); height: calc(var(--wgbv-p) * 21.5); flex: none; border-radius: calc(var(--wgbv-p) * 11);
  font-size: calc(var(--wgbv-p) * 10.6); font-weight: 500; letter-spacing: .04em; background: color-mix(in srgb, #EFEEFF calc(var(--on) * 100%), #F4F4F5); }
.wgbv-visual .wgbv-onoff > span { grid-area: 1 / 1; }
.wgbv-visual .wgbv-on-t { color: #4F46E5; opacity: var(--on); }
.wgbv-visual .wgbv-off-t { color: #6B7280; opacity: calc(1 - var(--on)); }
.wgbv-visual .wgbv-add { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--wgbv-p) * 15); width: calc(var(--wgbv-p) * 176.5); height: calc(var(--wgbv-p) * 37.9); border-radius: calc(var(--wgbv-p) * 5.3); background: #4F46E5; color: #fff; font-size: calc(var(--wgbv-p) * 13.4); font-weight: 500; white-space: nowrap; }
.wgbv-visual .wgbv-add .wgbv-i { width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); stroke-width: 2; }

/* ---- visuals/consent.css ---- */
/* ---- consent: the eConsent signature question on a phone ---- */
.wgbv-visual[data-wgbv="consent"] { --wgbv-ar: 1192 / 840; --wgbv-w: 514; --wgbv-h: 363; }
.wgbv-visual[data-wgbv="consent"] .wgbv-stage { overflow: hidden; }
.wgbv-visual .wgbv-phone { position: absolute; left: calc(var(--wgbv-p) * 53); top: calc(var(--wgbv-p) * 16); width: calc(var(--wgbv-p) * 418); height: calc(var(--wgbv-p) * 440); padding: calc(var(--wgbv-p) * 19); border-radius: calc(var(--wgbv-p) * 64);
  background: #111214; box-shadow: inset 0 0 0 calc(var(--wgbv-p) * 2.5) #5c5d61, inset 0 0 0 calc(var(--wgbv-p) * 4) #2a2b2e, 0 calc(var(--wgbv-p) * 12) calc(var(--wgbv-p) * 32) rgba(32, 33, 63, .12); }
.wgbv-visual .wgbv-btn { position: absolute; width: calc(var(--wgbv-p) * 3); border-radius: calc(var(--wgbv-p) * 2) 0 0 calc(var(--wgbv-p) * 2); background: #3a3b3f; }
.wgbv-visual .wgbv-btn-1 { left: calc(var(--wgbv-p) * -2.5); top: calc(var(--wgbv-p) * 112); height: calc(var(--wgbv-p) * 28); }
.wgbv-visual .wgbv-btn-2 { left: calc(var(--wgbv-p) * -2.5); top: calc(var(--wgbv-p) * 158); height: calc(var(--wgbv-p) * 52); }
.wgbv-visual .wgbv-btn-3 { right: calc(var(--wgbv-p) * -2.5); left: auto; top: calc(var(--wgbv-p) * 175); height: calc(var(--wgbv-p) * 80); border-radius: 0 calc(var(--wgbv-p) * 2) calc(var(--wgbv-p) * 2) 0; }
.wgbv-visual .wgbv-screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--wgbv-p) * 46); background: #fff; }
.wgbv-visual .wgbv-nav { position: absolute; left: 0; right: 0; top: calc(var(--wgbv-p) * 45); height: calc(var(--wgbv-p) * 47); display: flex; align-items: center; justify-content: center; border-bottom: calc(var(--wgbv-p) * 1) solid #CBD5E1; }
.wgbv-visual .wgbv-back { position: absolute; left: calc(var(--wgbv-p) * 16); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 2); font-size: calc(var(--wgbv-p) * 17); color: #6741D9; }
.wgbv-visual .wgbv-back .wgbv-i { width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); stroke-width: 2.4; }
.wgbv-visual .wgbv-title { font-size: calc(var(--wgbv-p) * 16.5); font-weight: 600; color: #1E293B; letter-spacing: -.01em; }
.wgbv-visual .wgbv-sign-q { position: absolute; left: calc(var(--wgbv-p) * 18); right: calc(var(--wgbv-p) * 18); top: calc(var(--wgbv-p) * 112); }
.wgbv-visual .wgbv-h { font-size: calc(var(--wgbv-p) * 17.5); font-weight: 700; line-height: 1.35; letter-spacing: -.015em; color: #2C2D73; }
.wgbv-visual .wgbv-help { margin-top: calc(var(--wgbv-p) * 5); font-size: calc(var(--wgbv-p) * 14); line-height: calc(var(--wgbv-p) * 20); color: #475569; }
.wgbv-visual .wgbv-pad { position: relative; height: calc(var(--wgbv-p) * 170); margin-top: calc(var(--wgbv-p) * 10); border: calc(var(--wgbv-p) * 1) solid #CBD5E1; border-radius: calc(var(--wgbv-p) * 9); background: #fff; }
.wgbv-visual .wgbv-pad .wgbv-line { position: absolute; left: calc(var(--wgbv-p) * 50); width: calc(var(--wgbv-p) * 236); top: calc(var(--wgbv-p) * 117); border-bottom: calc(var(--wgbv-p) * 1.3) dashed #64748B; }
.wgbv-visual .wgbv-ink-consent { left: calc(var(--wgbv-p) * 48); top: calc(var(--wgbv-p) * 30); width: calc(var(--wgbv-p) * 227); height: calc(var(--wgbv-p) * 117); }
.wgbv-visual .wgbv-ink-consent path { stroke-width: 12; }
/* Tiny box (v2 only): in a box at most 140 px wide (/population-health-cohort-study "(Dynamic) Consent" at 320 px,
   119 px) the help line would be about 3 px tall, so it is left out. Care pathway slots are always wider, so v1 is
   unchanged (demo/compare-v1-v2.cjs). */
@container (max-width: 140px) {
  .wgbv-visual[data-wgbv="consent"] .wgbv-help { display: none; }
}

/* ---- visuals/education.css ---- */
/* ---- education: the welcome letter in the portal, and in Arabic on the phone ---- */
.wgbv-visual[data-wgbv="education"] { --wgbv-ar: 1 / 1; --wgbv-w: 477; --wgbv-h: 477; }
.wgbv-visual[data-wgbv="education"] .wgbv-stage { overflow: hidden; }
.wgbv-visual .wgbv-portal { position: absolute; left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 67); width: calc(var(--wgbv-p) * 300); height: calc(var(--wgbv-p) * 347); overflow: hidden; border: calc(var(--wgbv-p) * 1) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 19); background: #fff; }
.wgbv-visual .wgbv-portal::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: calc(var(--wgbv-p) * 90); background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 85%); }
.wgbv-visual .wgbv-portal-main { padding: calc(var(--wgbv-p) * 14) calc(var(--wgbv-p) * 16) 0; }
.wgbv-visual .wgbv-wl-title { font-size: calc(var(--wgbv-p) * 12.5); font-weight: 600; color: #111827; }
.wgbv-visual .wgbv-tabs { display: flex; gap: calc(var(--wgbv-p) * 11); margin-top: calc(var(--wgbv-p) * 6); font-size: calc(var(--wgbv-p) * 9.5); font-weight: 500; color: #6B7280; }
.wgbv-visual .wgbv-tab.wgbv-on { color: #4F46E5; }
.wgbv-visual .wgbv-letter .wgbv-photo { width: 100%; object-fit: cover; object-position: 50% 30%; }
.wgbv-visual .wgbv-portal .wgbv-letter { margin-top: calc(var(--wgbv-p) * 8); }
.wgbv-visual .wgbv-portal .wgbv-photo { width: calc(var(--wgbv-p) * 266); height: calc(var(--wgbv-p) * 107); border-radius: calc(var(--wgbv-p) * 5.4); }
.wgbv-visual .wgbv-portal .wgbv-l-h { margin-top: calc(var(--wgbv-p) * 16); font-size: calc(var(--wgbv-p) * 16.5); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: #111827; white-space: nowrap; }
.wgbv-visual .wgbv-portal .wgbv-l-lead { margin-top: calc(var(--wgbv-p) * 6); font-size: calc(var(--wgbv-p) * 10.5); color: #111827; }
.wgbv-visual .wgbv-portal .wgbv-l-body { width: calc(var(--wgbv-p) * 218); margin-top: calc(var(--wgbv-p) * 8); font-size: calc(var(--wgbv-p) * 9.3); line-height: calc(var(--wgbv-p) * 14.5); color: #6B7280; }
.wgbv-visual .wgbv-phone-flat { position: absolute; left: calc(var(--wgbv-p) * 238.8); top: calc(var(--wgbv-p) * 55.7); width: calc(var(--wgbv-p) * 227.2); height: calc(var(--wgbv-p) * 538.7); overflow: hidden; border: calc(var(--wgbv-p) * 1.2) solid #000; border-radius: calc(var(--wgbv-p) * 19.4); background: #fff; box-shadow: calc(var(--wgbv-p) * -10) calc(var(--wgbv-p) * 14) calc(var(--wgbv-p) * 34) rgba(32, 33, 63, .08); }
.wgbv-visual .wgbv-phone-flat .wgbv-island { top: calc(var(--wgbv-p) * 8.4); width: calc(var(--wgbv-p) * 69.7); height: calc(var(--wgbv-p) * 10.9); margin-left: calc(var(--wgbv-p) * -34.85); border-radius: calc(var(--wgbv-p) * 6); background: #1D272F; }
.wgbv-visual .wgbv-status-flat { height: calc(var(--wgbv-p) * 27); padding: 0 calc(var(--wgbv-p) * 12) 0 calc(var(--wgbv-p) * 20); color: #1D272F; }
.wgbv-visual .wgbv-status-flat .wgbv-time { font-size: calc(var(--wgbv-p) * 8.5); }
.wgbv-visual .wgbv-status-flat .wgbv-sys { gap: calc(var(--wgbv-p) * 3); }
.wgbv-visual .wgbv-status-flat .wgbv-signal { width: calc(var(--wgbv-p) * 9); height: calc(var(--wgbv-p) * 6); }
.wgbv-visual .wgbv-status-flat .wgbv-wifi { width: calc(var(--wgbv-p) * 8.5); height: calc(var(--wgbv-p) * 6); }
.wgbv-visual .wgbv-status-flat .wgbv-battery { width: calc(var(--wgbv-p) * 13); height: calc(var(--wgbv-p) * 6.2); margin-left: calc(var(--wgbv-p) * 1); border-width: calc(var(--wgbv-p) * .6); border-radius: calc(var(--wgbv-p) * 1.5); }
.wgbv-visual .wgbv-status-flat .wgbv-battery i { inset: calc(var(--wgbv-p) * .8); border-radius: calc(var(--wgbv-p) * 1); }
.wgbv-visual .wgbv-status-flat .wgbv-battery::after { right: calc(var(--wgbv-p) * -2); top: calc(var(--wgbv-p) * 1.6); width: calc(var(--wgbv-p) * 1); height: calc(var(--wgbv-p) * 2.2); }
.wgbv-visual .wgbv-ar { position: absolute; left: 0; right: 0; top: calc(var(--wgbv-p) * 27); }
.wgbv-visual .wgbv-ar-nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: calc(var(--wgbv-p) * 26.3); padding: 0 calc(var(--wgbv-p) * 9); border-bottom: calc(var(--wgbv-p) * 1) solid #E5E7EB; font-size: calc(var(--wgbv-p) * 9.5); white-space: nowrap; }
.wgbv-visual .wgbv-ar-back { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 1); color: #6741D9; }
.wgbv-visual .wgbv-ar-back .wgbv-i { width: calc(var(--wgbv-p) * 12); height: calc(var(--wgbv-p) * 12); stroke-width: 2.4; }
.wgbv-visual .wgbv-ar-title { position: absolute; left: 50%; transform: translateX(-50%); color: #1E293B; }
.wgbv-visual .wgbv-lsw { display: flex; direction: ltr; align-items: center; gap: calc(var(--wgbv-p) * 4); color: #475569; }
.wgbv-visual .wgbv-lsw .wgbv-i { width: calc(var(--wgbv-p) * 13); height: calc(var(--wgbv-p) * 13); }
.wgbv-visual .wgbv-lsw i { display: block; width: 0; height: 0; margin-inline-start: calc(var(--wgbv-p) * 3); border-inline: calc(var(--wgbv-p) * 3) solid transparent; border-top: calc(var(--wgbv-p) * 4) solid #7C8FA8; }
.wgbv-visual .wgbv-ar .wgbv-letter { padding: calc(var(--wgbv-p) * 9.6) calc(var(--wgbv-p) * 9.6) 0; text-align: right; }
.wgbv-visual .wgbv-ar .wgbv-photo { height: calc(var(--wgbv-p) * 97); border-radius: calc(var(--wgbv-p) * 4.85); }
.wgbv-visual .wgbv-ar .wgbv-l-h { margin-top: calc(var(--wgbv-p) * 14); font-size: calc(var(--wgbv-p) * 15.5); line-height: 1.4; color: #111827; }
.wgbv-visual .wgbv-ar .wgbv-l-lead { margin-top: calc(var(--wgbv-p) * 5); font-size: calc(var(--wgbv-p) * 11); color: #111827; }
.wgbv-visual .wgbv-ar .wgbv-l-body { margin-top: calc(var(--wgbv-p) * 10); font-size: calc(var(--wgbv-p) * 10.6); line-height: calc(var(--wgbv-p) * 17.5); color: #5F5F5F; }

/* ---- visuals/engagement.css ---- */
/* ---- engagement: the collage (signature, reminder settings, guidance button, today's check-in) ---- */
.wgbv-visual[data-wgbv="engagement"] { --wgbv-ar: 412 / 192; --wgbv-w: 412; --wgbv-h: 192; }
.wgbv-visual .wgbv-tile { position: absolute; background: #fff; }
.wgbv-visual .wgbv-sig { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 124); height: calc(var(--wgbv-p) * 78.3); border: calc(var(--wgbv-p) * .5) solid #CBD5E1; border-radius: calc(var(--wgbv-p) * 4); }
.wgbv-visual .wgbv-sig .wgbv-line { position: absolute; left: calc(var(--wgbv-p) * 8); right: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 55.5); border-bottom: calc(var(--wgbv-p) * .6) dashed #64748B; }
.wgbv-visual .wgbv-ink-tile { left: calc(var(--wgbv-p) * 7.5); top: calc(var(--wgbv-p) * 12); width: calc(var(--wgbv-p) * 104); height: calc(var(--wgbv-p) * 53.5); }
.wgbv-visual .wgbv-ink-tile path { stroke-width: 14; stroke: #374151; }
.wgbv-visual .wgbv-types { left: calc(var(--wgbv-p) * 142); top: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 214); height: calc(var(--wgbv-p) * 77); padding-top: calc(var(--wgbv-p) * 3.8); border-radius: calc(var(--wgbv-p) * 5.7); box-shadow: 0 calc(var(--wgbv-p) * .5) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .10), 0 calc(var(--wgbv-p) * 3) calc(var(--wgbv-p) * 9) rgba(16, 24, 40, .07); }
.wgbv-visual .wgbv-type { --on: 0; display: flex; align-items: center; gap: calc(var(--wgbv-p) * 8); height: calc(var(--wgbv-p) * 35.2); padding-left: calc(var(--wgbv-p) * 17); font-size: calc(var(--wgbv-p) * 12); color: #374151; white-space: nowrap; background: color-mix(in srgb, #F3F0FF calc(var(--on) * 100%), #fff); }
.wgbv-visual .wgbv-type.wgbv-checked { --on: 1; color: #111827; }
.wgbv-visual .wgbv-box { position: relative; display: block; width: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 14); flex: none; border-radius: calc(var(--wgbv-p) * 3); border: calc(var(--wgbv-p) * 1) solid color-mix(in srgb, #6741D9 calc(var(--on) * 100%), #9CA3AF); background: color-mix(in srgb, #6741D9 calc(var(--on) * 100%), #fff); }
.wgbv-visual .wgbv-box i { position: absolute; left: calc(var(--wgbv-p) * 4.2); top: calc(var(--wgbv-p) * 1.4); width: calc(var(--wgbv-p) * 4); height: calc(var(--wgbv-p) * 7.6); border: solid #fff; border-width: 0 calc(var(--wgbv-p) * 1.7) calc(var(--wgbv-p) * 1.7) 0; transform: rotate(45deg) scale(var(--on)); }
.wgbv-visual .wgbv-cta { left: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 115); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 12); width: calc(var(--wgbv-p) * 176.5); height: calc(var(--wgbv-p) * 37.9); padding-left: calc(var(--wgbv-p) * 16); border-radius: calc(var(--wgbv-p) * 5.3); background: #4F46E5; color: #fff; font-size: calc(var(--wgbv-p) * 13.2); font-weight: 500; white-space: nowrap; box-shadow: 0 calc(var(--wgbv-p) * 2) calc(var(--wgbv-p) * 6) rgba(79, 70, 229, .16); }
.wgbv-visual .wgbv-cta .wgbv-i { width: calc(var(--wgbv-p) * 16); height: calc(var(--wgbv-p) * 16); }
.wgbv-visual .wgbv-checkin { left: calc(var(--wgbv-p) * 215.5); top: calc(var(--wgbv-p) * 94); width: calc(var(--wgbv-p) * 185); height: calc(var(--wgbv-p) * 77); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--wgbv-p) * 10.5) 0 calc(var(--wgbv-p) * 11.5); border: calc(var(--wgbv-p) * 1) solid #D9D9D9; border-radius: calc(var(--wgbv-p) * 5.7); box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 4) rgba(16, 24, 40, .06); }
.wgbv-visual .wgbv-c-info { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 5); }
.wgbv-visual .wgbv-c-text { font-size: calc(var(--wgbv-p) * 11.6); font-weight: 500; color: #111827; white-space: nowrap; }
.wgbv-visual .wgbv-start { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 3); font-size: calc(var(--wgbv-p) * 11.6); color: #6741D9; }
.wgbv-visual .wgbv-start .wgbv-i { width: calc(var(--wgbv-p) * 11); height: calc(var(--wgbv-p) * 11); }
.wgbv-visual .wgbv-c-icon { display: grid; place-items: center; width: calc(var(--wgbv-p) * 39); height: calc(var(--wgbv-p) * 39); flex: none; border-radius: calc(var(--wgbv-p) * 12); background: #F3F0FF; color: #6741D9; }
.wgbv-visual .wgbv-c-icon .wgbv-i { width: calc(var(--wgbv-p) * 20); height: calc(var(--wgbv-p) * 20); stroke-width: 1.8; }
/* Right edges (v2): the reminder list reaches the check-in tile's right edge and the guidance button lines up with the
   signature, so the 2 x 2 collage has a common grid (the care cards set the same in core.css). */
.wgbv-visual[data-wgbv="engagement"] .wgbv-types { width: calc(var(--wgbv-p) * 258.5); }
.wgbv-visual[data-wgbv="engagement"] .wgbv-cta { left: calc(var(--wgbv-p) * 12); }
/* Tall layout (v2 only): when the box is less than 1.1 times as wide as it is tall (the /alternatives hub card and
   narrow research cards), the four pieces stack in one column with a common left edge, one width (214 design px) and
   12 design px between them: 240 x 326 design px. The signature's ink stays centred in the wider box. Container query
   on the visual's own box; the care pathway boxes are 2.38 : 1, so they never take it. */
@container (aspect-ratio < 1.1) {
  .wgbv-visual[data-wgbv="engagement"] .wgbv-stage { --wgbv-w: 240; --wgbv-h: 326; }
  .wgbv-visual[data-wgbv="engagement"] .wgbv-types { left: calc(var(--wgbv-p) * 13); top: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 214); }
  .wgbv-visual[data-wgbv="engagement"] .wgbv-sig { left: calc(var(--wgbv-p) * 13); top: calc(var(--wgbv-p) * 97); width: calc(var(--wgbv-p) * 214); }
  .wgbv-visual[data-wgbv="engagement"] .wgbv-ink-tile { left: calc(var(--wgbv-p) * 55); }
  .wgbv-visual[data-wgbv="engagement"] .wgbv-cta { left: calc(var(--wgbv-p) * 13); top: calc(var(--wgbv-p) * 187); width: calc(var(--wgbv-p) * 214); }
  .wgbv-visual[data-wgbv="engagement"] .wgbv-checkin { left: calc(var(--wgbv-p) * 13); top: calc(var(--wgbv-p) * 237); width: calc(var(--wgbv-p) * 214); }
}

/* ---- visuals/analytics.css ---- */
/* ---- analytics: progress numbers (admin/kpi-tiles) ---- */
.wgbv-visual[data-wgbv="analytics"] { --wgbv-ar: 620 / 363; --wgbv-w: 620; --wgbv-h: 363; }
.wgbv-visual .wgbv-panel { position: absolute; inset: 0; border-radius: calc(var(--wgbv-p) * 20); background: #233190; }
.wgbv-visual .wgbv-dash { position: absolute; left: calc(var(--wgbv-p) * 60); top: calc(var(--wgbv-p) * 30); width: calc(var(--wgbv-p) * 499); height: calc(var(--wgbv-p) * 259); padding: calc(var(--wgbv-p) * 15) calc(var(--wgbv-p) * 15) 0; border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 18.6); background: #fff; }
.wgbv-visual .wgbv-dash .wgbv-crumbs { height: calc(var(--wgbv-p) * 59.6); gap: calc(var(--wgbv-p) * 9); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 18) calc(var(--wgbv-p) * 18) 0 0; font-size: calc(var(--wgbv-p) * 14.5); }
.wgbv-visual .wgbv-dash .wgbv-mark { width: calc(var(--wgbv-p) * 59.6); margin-right: calc(var(--wgbv-p) * 32); }
.wgbv-visual .wgbv-dash .wgbv-mark img { width: calc(var(--wgbv-p) * 32.6); }
.wgbv-visual .wgbv-kpi { position: absolute; left: calc(var(--wgbv-p) * 75); width: calc(var(--wgbv-p) * 469.3); height: calc(var(--wgbv-p) * 114.5); padding: calc(var(--wgbv-p) * 21) 0 0 calc(var(--wgbv-p) * 30); border: calc(var(--wgbv-p) * .9) solid #CBD5E1; border-radius: calc(var(--wgbv-p) * 7.5); background: #fff; }
.wgbv-visual .wgbv-kpi-1 { top: calc(var(--wgbv-p) * 112); }
.wgbv-visual .wgbv-kpi-2 { top: calc(var(--wgbv-p) * 218.5); box-shadow: 0 calc(var(--wgbv-p) * -6) calc(var(--wgbv-p) * 14) rgba(16, 24, 40, .05); }
.wgbv-visual .wgbv-kpi-label { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 9); font-size: calc(var(--wgbv-p) * 14.5); color: #4C4C4C; }
.wgbv-visual .wgbv-kpi-label .wgbv-i { width: calc(var(--wgbv-p) * 18); height: calc(var(--wgbv-p) * 18); stroke-width: 1.6; }
.wgbv-visual .wgbv-kpi-row { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 16); margin-top: calc(var(--wgbv-p) * 8); }
.wgbv-visual .wgbv-num { display: block; min-width: calc(var(--wgbv-p) * 76); font-size: calc(var(--wgbv-p) * 39); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #0A0C10; font-variant-numeric: tabular-nums; }

/* ---- visuals/appointment-reminder.css ---- */
/* ---- appointment-reminder: a text reminder (mobile/push-notification look) over the appointment details
   (mobile/appointment-info: title, time, location, OK). Replaces /patient-engagement-software "Smart appointment
   reminders" (Group 2087330196 (3) (1).png, 1439 x 503). The stage keeps an 18 / 6 / 18 / 14 design px margin
   (left / top / right / bottom) like the old image: on phones and tablets the box is flush with the card's edges. ---- */
.wgbv-visual[data-wgbv="appointment-reminder"] { --wgbv-ar: 1439 / 503; --wgbv-w: 466; --wgbv-h: 163; }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-card { position: absolute; left: calc(var(--wgbv-p) * 134); top: calc(var(--wgbv-p) * 23); width: calc(var(--wgbv-p) * 314); height: calc(var(--wgbv-p) * 126); border: calc(var(--wgbv-p) * 1) solid #E2E8F0; border-radius: calc(var(--wgbv-p) * 16); background: #fff; box-shadow: 0 calc(var(--wgbv-p) * 8) calc(var(--wgbv-p) * 22) rgba(17, 24, 39, .08); color: #1E293B; }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-x { position: absolute; right: calc(var(--wgbv-p) * 11); top: calc(var(--wgbv-p) * 10); width: calc(var(--wgbv-p) * 19); height: calc(var(--wgbv-p) * 19); color: #6741D9; stroke-width: 1.8; }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-title { position: absolute; left: calc(var(--wgbv-p) * 18); top: calc(var(--wgbv-p) * 50); font-size: calc(var(--wgbv-p) * 15.5); font-weight: 600; line-height: calc(var(--wgbv-p) * 19); letter-spacing: -.01em; white-space: nowrap; }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-meta { position: absolute; left: calc(var(--wgbv-p) * 18); top: calc(var(--wgbv-p) * 73); font-size: calc(var(--wgbv-p) * 12.5); line-height: calc(var(--wgbv-p) * 17); white-space: nowrap; }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-meta + .wgbv-apt-meta { top: calc(var(--wgbv-p) * 91); }
/* The app's secondary button (primary-soft fill, primary text); --pr is the pressed tint during the tap. */
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-ok { --pr: 0; position: absolute; right: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 64); display: grid; place-items: center; width: calc(var(--wgbv-p) * 86); height: calc(var(--wgbv-p) * 40); border-radius: calc(var(--wgbv-p) * 13);
  background: color-mix(in srgb, #E5DBFF calc(var(--pr) * 100%), #F3F0FF); color: #6741D9; font-size: calc(var(--wgbv-p) * 14.5); font-weight: 500; }
/* iOS notification (mobile/push-notification): light material, radius 22 scaled, icon left, bold title with the time, body. */
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-note { position: absolute; left: calc(var(--wgbv-p) * 18); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 254); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 9); padding: calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 12) calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 10);
  border-radius: calc(var(--wgbv-p) * 17); background: rgba(250, 250, 252, .9); -webkit-backdrop-filter: blur(calc(var(--wgbv-p) * 14)) saturate(1.8); backdrop-filter: blur(calc(var(--wgbv-p) * 14)) saturate(1.8);
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(0, 0, 0, .06), 0 calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 26) rgba(0, 0, 0, .13); color: #000; }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-icon { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 32); height: calc(var(--wgbv-p) * 32); border-radius: calc(var(--wgbv-p) * 7.5); background: #6741D9; color: #fff; }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-icon .wgbv-i { width: calc(var(--wgbv-p) * 19); height: calc(var(--wgbv-p) * 19); stroke-width: 1.9; }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-row { display: flex; align-items: baseline; gap: calc(var(--wgbv-p) * 6); }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-nt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(var(--wgbv-p) * 13); font-weight: 600; line-height: calc(var(--wgbv-p) * 17); letter-spacing: -.01em; }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-now { flex: none; font-size: calc(var(--wgbv-p) * 11.5); line-height: calc(var(--wgbv-p) * 15); color: rgba(60, 60, 67, .6); }
.wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-body { font-size: calc(var(--wgbv-p) * 13); line-height: calc(var(--wgbv-p) * 17); letter-spacing: -.01em; white-space: nowrap; }
/* Narrow layout (v2): in an area under 300 px wide the notification sits above the appointment card (both from the
   left edge) instead of beside it: 330 x 194 design px instead of 466 x 163, so the text stays at 8 px or more. */
@container (max-width: 299px) {
  .wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-stage { --wgbv-w: 330; --wgbv-h: 194; }
  .wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-note { left: calc(var(--wgbv-p) * 8); }
  .wgbv-visual[data-wgbv="appointment-reminder"] .wgbv-apt-card { left: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 62); }
}

/* ---- visuals/automations.css ---- */
/* ---- automations: the Engagement Builder with three automated engagements (admin/engagement-builder; the wording
   twin of build). Replaces "Group 2087330199 (7).png" on /patient-engagement-software "Give your staff time back":
   the rows are the current image's. Reuses core's engagement row, ON/OFF pill and New Engagement button. ---- */
.wgbv-visual[data-wgbv="automations"] { --wgbv-ar: 360 / 226; --wgbv-w: 360; --wgbv-h: 226; }
.wgbv-visual[data-wgbv="automations"] .wgbv-au-panel { position: absolute; left: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 344); height: calc(var(--wgbv-p) * 212);
  border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 14); background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .04), 0 calc(var(--wgbv-p) * 8) calc(var(--wgbv-p) * 18) rgba(16, 24, 40, .07); }
.wgbv-visual[data-wgbv="automations"] .wgbv-au-title { position: absolute; left: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 14); font-size: calc(var(--wgbv-p) * 15.5); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="automations"] .wgbv-au-count { position: absolute; left: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 36); font-size: calc(var(--wgbv-p) * 10.5); line-height: 1.2; color: #6B7280; white-space: nowrap; }
.wgbv-visual[data-wgbv="automations"] .wgbv-add { right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 15); width: auto; height: calc(var(--wgbv-p) * 28); gap: calc(var(--wgbv-p) * 5); padding: 0 calc(var(--wgbv-p) * 11) 0 calc(var(--wgbv-p) * 9); border-radius: calc(var(--wgbv-p) * 6); font-size: calc(var(--wgbv-p) * 11); }
.wgbv-visual[data-wgbv="automations"] .wgbv-add .wgbv-i { width: calc(var(--wgbv-p) * 12); height: calc(var(--wgbv-p) * 12); }
.wgbv-visual[data-wgbv="automations"] .wgbv-au-rule { position: absolute; left: 0; right: 0; top: calc(var(--wgbv-p) * 58); border-top: calc(var(--wgbv-p) * .9) solid #E5E7EB; }
.wgbv-visual[data-wgbv="automations"] .wgbv-row { left: calc(var(--wgbv-p) * 13); width: calc(var(--wgbv-p) * 316); height: calc(var(--wgbv-p) * 42); align-items: center; gap: calc(var(--wgbv-p) * 10); padding: 0 calc(var(--wgbv-p) * 10);
  border-color: #E5E7EB; border-radius: calc(var(--wgbv-p) * 9); box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .04); }
.wgbv-visual[data-wgbv="automations"] .wgbv-au-r1 { top: calc(var(--wgbv-p) * 68); }
.wgbv-visual[data-wgbv="automations"] .wgbv-au-r2 { top: calc(var(--wgbv-p) * 116); }
.wgbv-visual[data-wgbv="automations"] .wgbv-au-r3 { top: calc(var(--wgbv-p) * 164); }
.wgbv-visual[data-wgbv="automations"] .wgbv-iconbox { width: calc(var(--wgbv-p) * 26); height: calc(var(--wgbv-p) * 26); border-radius: calc(var(--wgbv-p) * 7); color: #6B7280; }
.wgbv-visual[data-wgbv="automations"] .wgbv-iconbox .wgbv-i { width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); stroke-width: 1.8; }
.wgbv-visual[data-wgbv="automations"] .wgbv-row-title { margin-top: 0; font-size: calc(var(--wgbv-p) * 12); font-weight: 500; line-height: 1.25; white-space: nowrap; }
.wgbv-visual[data-wgbv="automations"] .wgbv-row-detail { margin-top: calc(var(--wgbv-p) * 2); font-size: calc(var(--wgbv-p) * 10); color: #6B7280; }
.wgbv-visual[data-wgbv="automations"] .wgbv-onoff { width: calc(var(--wgbv-p) * 36); height: calc(var(--wgbv-p) * 19); font-size: calc(var(--wgbv-p) * 9.5); }
/* Narrow layout: under 300 px wide or 160 px tall (the small card at 1024 px, phones at 320 to 360 px) the detail
   lines and the count would fall under 7 px; the panel keeps its title, New Engagement and the three engagements
   with their pills, larger: 300 x 176. */
@container (max-width: 299px) or (max-height: 159px) {
  .wgbv-visual[data-wgbv="automations"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 176; }
  .wgbv-visual[data-wgbv="automations"] .wgbv-au-panel { left: calc(var(--wgbv-p) * 6); top: calc(var(--wgbv-p) * 5); width: calc(var(--wgbv-p) * 288); height: calc(var(--wgbv-p) * 164); border-radius: calc(var(--wgbv-p) * 12); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-au-title { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 13); font-size: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-au-count { display: none; }
  .wgbv-visual[data-wgbv="automations"] .wgbv-add { right: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 10); height: calc(var(--wgbv-p) * 25); padding: 0 calc(var(--wgbv-p) * 8) 0 calc(var(--wgbv-p) * 7); font-size: calc(var(--wgbv-p) * 10); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-add .wgbv-i { width: calc(var(--wgbv-p) * 10); height: calc(var(--wgbv-p) * 10); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-au-rule { top: calc(var(--wgbv-p) * 43); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-row { left: calc(var(--wgbv-p) * 10); width: calc(var(--wgbv-p) * 266); height: calc(var(--wgbv-p) * 32); gap: calc(var(--wgbv-p) * 7); padding: 0 calc(var(--wgbv-p) * 7); border-radius: calc(var(--wgbv-p) * 7); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-au-r1 { top: calc(var(--wgbv-p) * 52); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-au-r2 { top: calc(var(--wgbv-p) * 89); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-au-r3 { top: calc(var(--wgbv-p) * 126); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-iconbox { width: calc(var(--wgbv-p) * 20); height: calc(var(--wgbv-p) * 20); border-radius: calc(var(--wgbv-p) * 5); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-iconbox .wgbv-i { width: calc(var(--wgbv-p) * 12); height: calc(var(--wgbv-p) * 12); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-row-title { font-size: calc(var(--wgbv-p) * 11.5); }
  .wgbv-visual[data-wgbv="automations"] .wgbv-row-detail { display: none; }
  .wgbv-visual[data-wgbv="automations"] .wgbv-onoff { width: calc(var(--wgbv-p) * 31); height: calc(var(--wgbv-p) * 17); font-size: calc(var(--wgbv-p) * 8.5); }
}

/* ---- visuals/brand-theme.css ---- */
/* ---- brand-theme: an organisation's colours, logo and imagery applied to the app's home screen (mobile/today).
   Replaces "iphone 16 (1).svg" on /platform/white-labeling "Total branding control". The phone bleeds off the card's
   bottom edge; a small card beside it holds the organisation's colours, logo and imagery. Colours change by
   cross-fading stacked layers (c0 the WeGuide default, c1 the organisation's teal). The logo is a neutral mark, the
   same one store-listing shows, not a customer logo. ---- */
.wgbv-visual[data-wgbv="brand-theme"] { --wgbv-ar: 400 / 236; --wgbv-w: 400; --wgbv-h: 236; --wgbv-bleed: 1; --wgbv-vis: .9; --wgbv-ay: 1; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-stage { overflow: hidden; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-phone { position: absolute; left: calc(var(--wgbv-p) * 202); top: calc(var(--wgbv-p) * 14); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 300); overflow: hidden;
  border: calc(var(--wgbv-p) * 1.4) solid #1F2937; border-radius: calc(var(--wgbv-p) * 22); background: #fff; box-shadow: calc(var(--wgbv-p) * -8) calc(var(--wgbv-p) * 12) calc(var(--wgbv-p) * 30) rgba(32, 33, 63, .10); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-island { top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 46); height: calc(var(--wgbv-p) * 13); margin-left: calc(var(--wgbv-p) * -23); border-radius: calc(var(--wgbv-p) * 7); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-status { height: calc(var(--wgbv-p) * 25); padding: 0 calc(var(--wgbv-p) * 12) 0 calc(var(--wgbv-p) * 16); }
/* Brand colour layers: the header tint (a true cross-fade: both are translucent) and the Start button (the teal
   layer fades in over the purple, which stays). */
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-tint { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--wgbv-p) * 100); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-tint.wgbv-bt-c0 { background: linear-gradient(rgba(103, 65, 217, .16), rgba(103, 65, 217, 0)); opacity: 0; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-tint.wgbv-bt-c1 { background: linear-gradient(rgba(15, 118, 110, .2), rgba(15, 118, 110, 0)); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-wg { position: absolute; left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 30); display: grid; place-items: center; width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); opacity: 0; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-wg img { width: calc(var(--wgbv-p) * 18); height: auto; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-hi { position: absolute; left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 58); font-size: calc(var(--wgbv-p) * 13); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #2C2D73; white-space: nowrap; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-pic { position: absolute; left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 80); display: grid; place-items: center; width: calc(var(--wgbv-p) * 158); height: calc(var(--wgbv-p) * 66); overflow: hidden; border-radius: calc(var(--wgbv-p) * 9); background: #EEF0F4; color: #A3AAB8; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-pic .wgbv-i { width: calc(var(--wgbv-p) * 20); height: calc(var(--wgbv-p) * 20); stroke-width: 1.6; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-cap { position: absolute; left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 152); font-size: calc(var(--wgbv-p) * 10.5); font-weight: 600; line-height: 1.2; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-task { position: absolute; left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 172); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 5); width: calc(var(--wgbv-p) * 158); height: calc(var(--wgbv-p) * 34); padding: 0 calc(var(--wgbv-p) * 6); border: calc(var(--wgbv-p) * .8) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 9); background: #fff; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-tc { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 19); height: calc(var(--wgbv-p) * 19); border-radius: calc(var(--wgbv-p) * 5); background: #EFF6FF; color: #3B82F6; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-tc .wgbv-i { width: calc(var(--wgbv-p) * 12); height: calc(var(--wgbv-p) * 12); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-tt { flex: 1; min-width: 0; font-size: calc(var(--wgbv-p) * 10.5); font-weight: 500; line-height: 1.2; color: #334155; white-space: nowrap; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-go { position: relative; display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 30); height: calc(var(--wgbv-p) * 16); border-radius: calc(var(--wgbv-p) * 8); font-size: calc(var(--wgbv-p) * 8); font-weight: 600; line-height: 1; color: #fff; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-go i { position: absolute; inset: 0; border-radius: inherit; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-go .wgbv-bt-c0 { background: #6741D9; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-go .wgbv-bt-c1 { background: #0F766E; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-go span { position: relative; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-skel { top: calc(var(--wgbv-p) * 214); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-skel .wgbv-bt-tc { background: #F3F4F6; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-skel i { width: calc(var(--wgbv-p) * 64); height: calc(var(--wgbv-p) * 7); border-radius: calc(var(--wgbv-p) * 4); background: #EEF0F3; }
/* The organisation's colours, logo and imagery. */
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-kit { position: absolute; left: calc(var(--wgbv-p) * 42); top: calc(var(--wgbv-p) * 52); width: calc(var(--wgbv-p) * 128); height: calc(var(--wgbv-p) * 138);
  border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 14); background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .04), 0 calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 24) rgba(16, 24, 40, .09); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-lb { position: absolute; font-size: calc(var(--wgbv-p) * 11); font-weight: 600; line-height: 1.2; color: #6B7280; white-space: nowrap; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-l1 { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 11); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-l2 { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 66); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-l3 { left: calc(var(--wgbv-p) * 68); top: calc(var(--wgbv-p) * 66); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-sw { position: absolute; top: calc(var(--wgbv-p) * 30); width: calc(var(--wgbv-p) * 24); height: calc(var(--wgbv-p) * 24); border-radius: 50%; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-sw1 { left: calc(var(--wgbv-p) * 12); background: #0F766E; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-sw2 { left: calc(var(--wgbv-p) * 42); background: #5EC4B6; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-sw3 { left: calc(var(--wgbv-p) * 72); background: #F4B740; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-ring { position: absolute; left: calc(var(--wgbv-p) * 8.5); top: calc(var(--wgbv-p) * 26.5); width: calc(var(--wgbv-p) * 31); height: calc(var(--wgbv-p) * 31); border: calc(var(--wgbv-p) * 1.6) solid #0F766E; border-radius: 50%; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-lt , .wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-it { position: absolute; top: calc(var(--wgbv-p) * 84); display: grid; place-items: center; width: calc(var(--wgbv-p) * 48); height: calc(var(--wgbv-p) * 40); overflow: hidden; border-radius: calc(var(--wgbv-p) * 8); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-lt { left: calc(var(--wgbv-p) * 12); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; color: #0F766E; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-lt .wgbv-i { width: calc(var(--wgbv-p) * 24); height: calc(var(--wgbv-p) * 24); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-it { left: calc(var(--wgbv-p) * 68); }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-it img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* The logo in the app (over the phone's logo slot, on the stage so it can fly in from the logo tile). */
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-logo { position: absolute; left: calc(var(--wgbv-p) * 214); top: calc(var(--wgbv-p) * 44); display: grid; place-items: center; width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); color: #0F766E; }
.wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-logo .wgbv-i { width: calc(var(--wgbv-p) * 21); height: calc(var(--wgbv-p) * 21); }
/* Square layout (beside the copy on the half card, about 270 x 245 px at 1280 to 1920, and the phone bands up to
   1.4 : 1): the phone right of the centre, the card over its lower left edge; 310 x 280. */
@container (aspect-ratio < 1.4) {
  .wgbv-visual[data-wgbv="brand-theme"] .wgbv-stage { --wgbv-w: 310; --wgbv-h: 280; }
  .wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-phone { left: calc(var(--wgbv-p) * 128); }
  .wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-kit { left: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 84); }
  .wgbv-visual[data-wgbv="brand-theme"] .wgbv-bt-logo { left: calc(var(--wgbv-p) * 140); }
}

/* ---- visuals/build.css ---- */
/* ---- build: Program Builder with three scheduled forms (admin/program-builder; MedTech pv-build). The white panel
   holds all three forms (29 October: it grew from 248 to 323 design px, so the third form no longer hangs below it). ---- */
.wgbv-visual[data-wgbv="build"] { --wgbv-ar: 620 / 363; --wgbv-w: 620; --wgbv-h: 363; }
.wgbv-visual[data-wgbv="build"] .wgbv-bg { position: absolute; inset: 0; border-radius: calc(var(--wgbv-p) * 20); background: #F9BC50; }
.wgbv-visual[data-wgbv="build"] .wgbv-pb { position: absolute; left: calc(var(--wgbv-p) * 72.4); top: calc(var(--wgbv-p) * 20); width: calc(var(--wgbv-p) * 472.2); height: calc(var(--wgbv-p) * 323); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 16.9); background: #fff; }
.wgbv-visual[data-wgbv="build"] .wgbv-pb-title { position: absolute; left: calc(var(--wgbv-p) * 21); top: calc(var(--wgbv-p) * 21); font-size: calc(var(--wgbv-p) * 22); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #111827; }
.wgbv-visual[data-wgbv="build"] .wgbv-pb-count { position: absolute; left: calc(var(--wgbv-p) * 21); top: calc(var(--wgbv-p) * 52.5); font-size: calc(var(--wgbv-p) * 12.5); color: #6B7280; }
.wgbv-visual[data-wgbv="build"] .wgbv-pb-rule { position: absolute; left: calc(var(--wgbv-p) * 20.6); right: calc(var(--wgbv-p) * 20.6); top: calc(var(--wgbv-p) * 79); border-top: calc(var(--wgbv-p) * .9) solid #E5E7EB; }
.wgbv-visual[data-wgbv="build"] .wgbv-add { left: calc(var(--wgbv-p) * 347.5); top: calc(var(--wgbv-p) * 51.4); }
.wgbv-visual[data-wgbv="build"] .wgbv-row { left: calc(var(--wgbv-p) * 114.4); width: calc(var(--wgbv-p) * 409.7); }
.wgbv-visual[data-wgbv="build"] .wgbv-row-1 { top: calc(var(--wgbv-p) * 111.4); }
.wgbv-visual[data-wgbv="build"] .wgbv-row-2 { top: calc(var(--wgbv-p) * 185); }
.wgbv-visual[data-wgbv="build"] .wgbv-row-3 { top: calc(var(--wgbv-p) * 257.6); }
.wgbv-visual[data-wgbv="build"] .wgbv-iconbox { color: #6B7280; }
.wgbv-visual[data-wgbv="build"] .wgbv-iconbox .wgbv-i { width: calc(var(--wgbv-p) * 17); height: calc(var(--wgbv-p) * 17); stroke-width: 1.8; }
.wgbv-visual[data-wgbv="build"] .wgbv-row-detail { font-size: calc(var(--wgbv-p) * 11.4); }
/* Drag handles left of the rows. */
.wgbv-visual[data-wgbv="build"] .wgbv-grip { position: absolute; left: calc(var(--wgbv-p) * 94.6); width: calc(var(--wgbv-p) * 11.2); height: calc(var(--wgbv-p) * 14.4); background: radial-gradient(circle, #9CA3AF calc(var(--wgbv-p) * 1.15), transparent calc(var(--wgbv-p) * 1.35)) 0 0 / calc(var(--wgbv-p) * 5.6) calc(var(--wgbv-p) * 4.8); }
.wgbv-visual[data-wgbv="build"] .wgbv-grip-1 { top: calc(var(--wgbv-p) * 136.2); }
.wgbv-visual[data-wgbv="build"] .wgbv-grip-2 { top: calc(var(--wgbv-p) * 209.8); }
.wgbv-visual[data-wgbv="build"] .wgbv-grip-3 { top: calc(var(--wgbv-p) * 282.4); }
/* Compact layout: in a box under 1.53 : 1 (the 1.23 : 1 image box on /telehealth and /clinical-interventions, 1.3 : 1
   on /prems-proms) the yellow margin shrinks to 10 design px, so the panel and its text are a third bigger: 470 x 342. */
@container (aspect-ratio < 1.53) {
  .wgbv-visual[data-wgbv="build"] .wgbv-stage { --wgbv-w: 470; --wgbv-h: 342; }
  .wgbv-visual[data-wgbv="build"] .wgbv-pb { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 10); width: calc(var(--wgbv-p) * 450); height: calc(var(--wgbv-p) * 322); }
  .wgbv-visual[data-wgbv="build"] .wgbv-add { left: calc(var(--wgbv-p) * 262.9); top: calc(var(--wgbv-p) * 41.4); }
  .wgbv-visual[data-wgbv="build"] .wgbv-row { left: calc(var(--wgbv-p) * 36); }
  .wgbv-visual[data-wgbv="build"] .wgbv-row-1 { top: calc(var(--wgbv-p) * 101.4); }
  .wgbv-visual[data-wgbv="build"] .wgbv-row-2 { top: calc(var(--wgbv-p) * 175); }
  .wgbv-visual[data-wgbv="build"] .wgbv-row-3 { top: calc(var(--wgbv-p) * 248.6); }
  .wgbv-visual[data-wgbv="build"] .wgbv-grip { left: calc(var(--wgbv-p) * 19); }
  .wgbv-visual[data-wgbv="build"] .wgbv-grip-1 { top: calc(var(--wgbv-p) * 126.2); }
  .wgbv-visual[data-wgbv="build"] .wgbv-grip-2 { top: calc(var(--wgbv-p) * 199.8); }
  .wgbv-visual[data-wgbv="build"] .wgbv-grip-3 { top: calc(var(--wgbv-p) * 273.4); }
}
/* Small layout: in a box under 270 px tall or 380 px wide (on the research cards: phones, the band under the copy and
   the column beside it; 30 October), the full panel's detail lines would be under 8 px. The panel keeps its title, New Engagement and the three forms with their
   ON pills, at a readable size; the "3 engagements" count and each form's detail line are left out: 300 x 163. */
@container (max-height: 269px) or (max-width: 379px) {
  .wgbv-visual[data-wgbv="build"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 163; }
  .wgbv-visual[data-wgbv="build"] .wgbv-bg { border-radius: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="build"] .wgbv-pb { left: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 284); height: calc(var(--wgbv-p) * 147); border-radius: calc(var(--wgbv-p) * 11); }
  .wgbv-visual[data-wgbv="build"] .wgbv-pb-title { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 10); font-size: calc(var(--wgbv-p) * 15); }
  .wgbv-visual[data-wgbv="build"] .wgbv-pb-count { display: none; }
  .wgbv-visual[data-wgbv="build"] .wgbv-pb-rule { left: calc(var(--wgbv-p) * 12); right: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 38); }
  .wgbv-visual[data-wgbv="build"] .wgbv-add { left: calc(var(--wgbv-p) * 174); top: calc(var(--wgbv-p) * 14); width: calc(var(--wgbv-p) * 108); height: calc(var(--wgbv-p) * 24); gap: calc(var(--wgbv-p) * 5); border-radius: calc(var(--wgbv-p) * 4); font-size: calc(var(--wgbv-p) * 9.5); }
  .wgbv-visual[data-wgbv="build"] .wgbv-add .wgbv-i { width: calc(var(--wgbv-p) * 10); height: calc(var(--wgbv-p) * 10); }
  .wgbv-visual[data-wgbv="build"] .wgbv-row { left: calc(var(--wgbv-p) * 26); width: calc(var(--wgbv-p) * 256); height: calc(var(--wgbv-p) * 30); align-items: center; gap: calc(var(--wgbv-p) * 8); padding: 0 calc(var(--wgbv-p) * 7); border-radius: calc(var(--wgbv-p) * 5); }
  .wgbv-visual[data-wgbv="build"] .wgbv-row-1 { top: calc(var(--wgbv-p) * 50); }
  .wgbv-visual[data-wgbv="build"] .wgbv-row-2 { top: calc(var(--wgbv-p) * 84); }
  .wgbv-visual[data-wgbv="build"] .wgbv-row-3 { top: calc(var(--wgbv-p) * 118); }
  .wgbv-visual[data-wgbv="build"] .wgbv-iconbox { width: calc(var(--wgbv-p) * 19); height: calc(var(--wgbv-p) * 19); border-radius: calc(var(--wgbv-p) * 5); }
  .wgbv-visual[data-wgbv="build"] .wgbv-iconbox .wgbv-i { width: calc(var(--wgbv-p) * 12); height: calc(var(--wgbv-p) * 12); }
  .wgbv-visual[data-wgbv="build"] .wgbv-row-title { margin-top: 0; font-size: calc(var(--wgbv-p) * 11); line-height: 1.2; white-space: nowrap; }
  .wgbv-visual[data-wgbv="build"] .wgbv-row-detail { display: none; }
  .wgbv-visual[data-wgbv="build"] .wgbv-onoff { width: calc(var(--wgbv-p) * 30); height: calc(var(--wgbv-p) * 16); font-size: calc(var(--wgbv-p) * 8.5); }
  .wgbv-visual[data-wgbv="build"] .wgbv-grip { left: calc(var(--wgbv-p) * 12); width: calc(var(--wgbv-p) * 8.4); height: calc(var(--wgbv-p) * 10.8); background-size: calc(var(--wgbv-p) * 4.2) calc(var(--wgbv-p) * 3.6); }
  .wgbv-visual[data-wgbv="build"] .wgbv-grip-1 { top: calc(var(--wgbv-p) * 59.6); }
  .wgbv-visual[data-wgbv="build"] .wgbv-grip-2 { top: calc(var(--wgbv-p) * 93.6); }
  .wgbv-visual[data-wgbv="build"] .wgbv-grip-3 { top: calc(var(--wgbv-p) * 127.6); }
}

/* ---- visuals/compliance.css ---- */
/* ---- compliance: the WeGuide platform node and its compliance as text badges, each with a check (the composition of
   the current images, without the regulator logos and without the "12+ months" and "$$$" columns). Replaces "Frame
   2131328213 (1).png" on /alternatives "Compliance built in from day one". The /platform text set is its twin,
   compliance-platform. ---- */
.wgbv-visual[data-wgbv="compliance"] { --wgbv-ar: 420 / 300; --wgbv-w: 420; --wgbv-h: 300; }
.wgbv-visual[data-wgbv="compliance"] .wgbv-bg { position: absolute; inset: calc(var(--wgbv-p) * 1.5) 0 0; border-radius: calc(var(--wgbv-p) * 20); background: #E6EAFB; }
/* Connectors: each set's box is its own lines' extent (viewBox in stage units), so the box never reaches past them. */
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-lines { position: absolute; left: calc(var(--wgbv-p) * 112); top: calc(var(--wgbv-p) * 40); width: calc(var(--wgbv-p) * 64); height: calc(var(--wgbv-p) * 190); overflow: visible; }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-lw { display: none; left: calc(var(--wgbv-p) * 154); top: calc(var(--wgbv-p) * 26); width: calc(var(--wgbv-p) * 136); height: calc(var(--wgbv-p) * 160); }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-lines path { fill: none; stroke: #8B9CF7; stroke-width: 1.8; stroke-linejoin: round; }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-node { position: absolute; left: calc(var(--wgbv-p) * 20); top: calc(var(--wgbv-p) * 89); display: grid; place-items: center; width: calc(var(--wgbv-p) * 92); height: calc(var(--wgbv-p) * 92);
  border: calc(var(--wgbv-p) * 1.4) solid #93C5FD; border-radius: calc(var(--wgbv-p) * 16); background: #F5F9FF; color: #2563EB; box-shadow: 0 calc(var(--wgbv-p) * 8) calc(var(--wgbv-p) * 20) rgba(37, 99, 235, .12); }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-node .wgbv-i { width: calc(var(--wgbv-p) * 46); height: calc(var(--wgbv-p) * 46); stroke-width: 1.4; }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-name { position: absolute; left: calc(var(--wgbv-p) * 20); top: calc(var(--wgbv-p) * 189); width: calc(var(--wgbv-p) * 92); text-align: center; font-size: calc(var(--wgbv-p) * 13); font-weight: 700; line-height: 1.2; color: #2C2D73; }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-row { position: absolute; left: calc(var(--wgbv-p) * 176); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 226); height: calc(var(--wgbv-p) * 38); padding: 0 calc(var(--wgbv-p) * 8) 0 calc(var(--wgbv-p) * 14);
  border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 10); background: #fff; font-size: calc(var(--wgbv-p) * 12.5); font-weight: 600; color: #1E293B; white-space: nowrap;
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .04), 0 calc(var(--wgbv-p) * 4) calc(var(--wgbv-p) * 10) rgba(16, 24, 40, .05); }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r1 { top: calc(var(--wgbv-p) * 22); }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r2 { top: calc(var(--wgbv-p) * 69); }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r3 { top: calc(var(--wgbv-p) * 116); }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r4 { top: calc(var(--wgbv-p) * 163); }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r5 { top: calc(var(--wgbv-p) * 210); }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-ck { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); border-radius: calc(var(--wgbv-p) * 6); background: #16A34A; color: #fff; }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-ck .wgbv-i { width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); stroke-width: 3; }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-chip { position: absolute; left: calc(var(--wgbv-p) * 176); top: calc(var(--wgbv-p) * 258); display: flex; align-items: center; justify-content: center; gap: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 226); height: calc(var(--wgbv-p) * 30);
  border-radius: calc(var(--wgbv-p) * 15); background: #fff; color: #4338CA; box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .05); font-size: calc(var(--wgbv-p) * 11.5); font-weight: 600; white-space: nowrap; }
.wgbv-visual[data-wgbv="compliance"] .wgbv-cp-chip .wgbv-i { width: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 14); }
/* Narrow layout (under 300 px wide: phones at 320 to 375 px): the node with the WeGuide name on top, the badges in a
   grid under it (the first one across), no connectors; 310 x 262. */
@container (max-width: 299px) {
  .wgbv-visual[data-wgbv="compliance"] .wgbv-stage { --wgbv-w: 310; --wgbv-h: 262; }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-lines { display: none; }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-node { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 10); width: calc(var(--wgbv-p) * 56); height: calc(var(--wgbv-p) * 56); border-radius: calc(var(--wgbv-p) * 12); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-node .wgbv-i { width: calc(var(--wgbv-p) * 30); height: calc(var(--wgbv-p) * 30); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-name { left: calc(var(--wgbv-p) * 80); top: calc(var(--wgbv-p) * 29); width: auto; font-size: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-row { left: calc(var(--wgbv-p) * 12); width: calc(var(--wgbv-p) * 140); height: calc(var(--wgbv-p) * 36); padding: 0 calc(var(--wgbv-p) * 7) 0 calc(var(--wgbv-p) * 10); font-size: calc(var(--wgbv-p) * 12); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r1 { top: calc(var(--wgbv-p) * 78); width: calc(var(--wgbv-p) * 286); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r2 ,   .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r3 { top: calc(var(--wgbv-p) * 122); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r4 ,   .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r5 { top: calc(var(--wgbv-p) * 166); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r3 ,   .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r5 { left: calc(var(--wgbv-p) * 158); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-ck { width: calc(var(--wgbv-p) * 19); height: calc(var(--wgbv-p) * 19); border-radius: calc(var(--wgbv-p) * 5); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-ck .wgbv-i { width: calc(var(--wgbv-p) * 13); height: calc(var(--wgbv-p) * 13); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-chip { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 214); width: calc(var(--wgbv-p) * 286); height: calc(var(--wgbv-p) * 34); border-radius: calc(var(--wgbv-p) * 17); font-size: calc(var(--wgbv-p) * 12); }
}
/* Wide layout (a band at least 1.8 times as wide as tall: the quarter card at 1024 px, about 404 x 205): the node and
   the residency chip on the left, the five badges in a column on the right; 520 x 212. */
@container (min-width: 300px) and (aspect-ratio >= 1.8) {
  .wgbv-visual[data-wgbv="compliance"] .wgbv-stage { --wgbv-w: 520; --wgbv-h: 212; }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-lines { display: none; }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-lw { display: block; }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-node { left: calc(var(--wgbv-p) * 66); top: calc(var(--wgbv-p) * 62); width: calc(var(--wgbv-p) * 88); height: calc(var(--wgbv-p) * 88); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-name { left: calc(var(--wgbv-p) * 66); top: calc(var(--wgbv-p) * 156); width: calc(var(--wgbv-p) * 88); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-row { left: calc(var(--wgbv-p) * 290); width: calc(var(--wgbv-p) * 214); height: calc(var(--wgbv-p) * 32); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r1 { top: calc(var(--wgbv-p) * 12); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r2 { top: calc(var(--wgbv-p) * 51); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r3 { top: calc(var(--wgbv-p) * 90); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r4 { top: calc(var(--wgbv-p) * 129); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-r5 { top: calc(var(--wgbv-p) * 168); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-ck { width: calc(var(--wgbv-p) * 20); height: calc(var(--wgbv-p) * 20); }
  .wgbv-visual[data-wgbv="compliance"] .wgbv-cp-chip { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 180); width: calc(var(--wgbv-p) * 196); }
}

/* ---- visuals/compliance-platform.css ---- */
/* ---- compliance-platform: the /platform text set of compliance. A program role with its permissions (admin/program-
   roles) for "users, roles, and permissions", connected to ISO, TGA and FDA as text badges with checks. Replaces
   "Medically Certified Infrastructure.svg" in the /platform image slot. ---- */
.wgbv-visual[data-wgbv="compliance-platform"] { --wgbv-ar: 620 / 363; --wgbv-w: 620; --wgbv-h: 363; }
/* The slot: this card's image is 644 x 404 (card-image: the card's full width), not 620 x 363 like the other /platform
   card images, so the slot takes its shape and the row keeps its height at every width. The doubled attribute outranks
   core's /platform slot rule (.screening-card > .w-embed > .wgbv-visual, 620 px wide from 1920 px). The tile
   (.wgbv-bg) fills the slot; the 620 x 363 design sits centred in it. */
.wgbv-visual[data-wgbv="compliance-platform"][data-wgbv] { width: 100%; max-width: 100%; aspect-ratio: 644 / 404; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-bg { position: absolute; inset: 0; border-radius: calc(var(--wgbv-p) * 20); background: #E4E8FB; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-lines { position: absolute; left: calc(var(--wgbv-p) * 326); top: calc(var(--wgbv-p) * 90); width: calc(var(--wgbv-p) * 84); height: calc(var(--wgbv-p) * 182); overflow: visible; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-n { display: none; left: calc(var(--wgbv-p) * 248); top: calc(var(--wgbv-p) * 53); width: calc(var(--wgbv-p) * 52); height: calc(var(--wgbv-p) * 140); }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-lines path { fill: none; stroke: #8B9CF7; stroke-width: 1.8; stroke-linejoin: round; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-role { position: absolute; left: calc(var(--wgbv-p) * 34); top: calc(var(--wgbv-p) * 34); width: calc(var(--wgbv-p) * 292); height: calc(var(--wgbv-p) * 295);
  border-radius: calc(var(--wgbv-p) * 16); background: #fff; box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .05), 0 calc(var(--wgbv-p) * 12) calc(var(--wgbv-p) * 28) rgba(46, 42, 128, .12); }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-tile { position: absolute; left: calc(var(--wgbv-p) * 18); top: calc(var(--wgbv-p) * 18); display: grid; place-items: center; width: calc(var(--wgbv-p) * 32); height: calc(var(--wgbv-p) * 32); border-radius: calc(var(--wgbv-p) * 8); background: #F0EEFE; color: #6741D9; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-tile .wgbv-i { width: calc(var(--wgbv-p) * 18); height: calc(var(--wgbv-p) * 18); stroke-width: 1.8; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-title { position: absolute; left: calc(var(--wgbv-p) * 60); top: calc(var(--wgbv-p) * 24); font-size: calc(var(--wgbv-p) * 16.5); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-lb { position: absolute; left: calc(var(--wgbv-p) * 18); font-size: calc(var(--wgbv-p) * 12); font-weight: 600; line-height: 1.2; color: #6B7280; white-space: nowrap; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-lb1 { top: calc(var(--wgbv-p) * 66); }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-lb2 { top: calc(var(--wgbv-p) * 136); }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-name { position: absolute; left: calc(var(--wgbv-p) * 18); top: calc(var(--wgbv-p) * 84); display: flex; align-items: center; width: calc(var(--wgbv-p) * 256); height: calc(var(--wgbv-p) * 36); padding: 0 calc(var(--wgbv-p) * 12);
  border: calc(var(--wgbv-p) * .9) solid #D1D5DB; border-radius: calc(var(--wgbv-p) * 8); font-size: calc(var(--wgbv-p) * 13.5); color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-perm { position: absolute; left: calc(var(--wgbv-p) * 18); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 10); width: calc(var(--wgbv-p) * 256); height: calc(var(--wgbv-p) * 36); padding: 0 calc(var(--wgbv-p) * 10);
  border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 8); background: #FAFAFF; font-size: calc(var(--wgbv-p) * 13.5); font-weight: 500; color: #1E293B; white-space: nowrap; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-q1 { top: calc(var(--wgbv-p) * 156); }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-q2 { top: calc(var(--wgbv-p) * 200); }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-q3 { top: calc(var(--wgbv-p) * 244); }
/* A ticked checkbox: the fill layer (i) fades in over the empty box, then the tick draws. */
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-box { position: relative; display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 18); height: calc(var(--wgbv-p) * 18); border: calc(var(--wgbv-p) * 1.2) solid #C4C9D4; border-radius: calc(var(--wgbv-p) * 4.5); background: #fff; color: #fff; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-box i { position: absolute; inset: calc(var(--wgbv-p) * -1.2); border-radius: inherit; background: #6741D9; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-box .wgbv-i { position: relative; width: calc(var(--wgbv-p) * 13); height: calc(var(--wgbv-p) * 13); stroke-width: 3; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-b { position: absolute; left: calc(var(--wgbv-p) * 410); display: flex; align-items: center; justify-content: space-between; width: calc(var(--wgbv-p) * 170); height: calc(var(--wgbv-p) * 58); padding: 0 calc(var(--wgbv-p) * 14) 0 calc(var(--wgbv-p) * 20);
  border-radius: calc(var(--wgbv-p) * 12); background: #fff; font-size: calc(var(--wgbv-p) * 20); font-weight: 800; letter-spacing: .03em; color: #1E293B;
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .05), 0 calc(var(--wgbv-p) * 8) calc(var(--wgbv-p) * 20) rgba(46, 42, 128, .10); }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-b1 { top: calc(var(--wgbv-p) * 63); }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-b2 { top: calc(var(--wgbv-p) * 152); }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-b3 { top: calc(var(--wgbv-p) * 241); }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-ck { display: grid; place-items: center; width: calc(var(--wgbv-p) * 28); height: calc(var(--wgbv-p) * 28); border-radius: calc(var(--wgbv-p) * 7); background: #16A34A; color: #fff; }
.wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-ck .wgbv-i { width: calc(var(--wgbv-p) * 18); height: calc(var(--wgbv-p) * 18); stroke-width: 3; }
/* Narrow layout (a slot under 400 px wide: phones, 350 x 220 down to 280 x 164 px): the role keeps its title and the
   three permissions (the Name field is left out), the badges are smaller; 420 x 246. */
@container (max-width: 400px) {
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-stage { --wgbv-w: 420; --wgbv-h: 246; }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-lines { display: none; }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-n { display: block; }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-role { left: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 22); width: calc(var(--wgbv-p) * 234); height: calc(var(--wgbv-p) * 202); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-tile { left: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-title { left: calc(var(--wgbv-p) * 54); top: calc(var(--wgbv-p) * 20); font-size: calc(var(--wgbv-p) * 15.5); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-lb1 ,   .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-name { display: none; }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-lb2 { left: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 60); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-perm { left: calc(var(--wgbv-p) * 12); width: calc(var(--wgbv-p) * 210); height: calc(var(--wgbv-p) * 34); gap: calc(var(--wgbv-p) * 8); padding: 0 calc(var(--wgbv-p) * 8); font-size: calc(var(--wgbv-p) * 12.5); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-q1 { top: calc(var(--wgbv-p) * 80); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-q2 { top: calc(var(--wgbv-p) * 120); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-q3 { top: calc(var(--wgbv-p) * 160); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-b { left: calc(var(--wgbv-p) * 300); width: calc(var(--wgbv-p) * 106); height: calc(var(--wgbv-p) * 50); padding: 0 calc(var(--wgbv-p) * 10) 0 calc(var(--wgbv-p) * 14); font-size: calc(var(--wgbv-p) * 17); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-b1 { top: calc(var(--wgbv-p) * 30); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-b2 { top: calc(var(--wgbv-p) * 98); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-b3 { top: calc(var(--wgbv-p) * 166); }
  .wgbv-visual[data-wgbv="compliance-platform"] .wgbv-cq-ck { width: calc(var(--wgbv-p) * 24); height: calc(var(--wgbv-p) * 24); }
}

/* ---- visuals/connect.css ---- */
/* ---- connect: Integration Engine diagram (admin/integration-engine; MedTech pv-connect). Four systems, the ones
   /platform and /patient-engagement-software name: EHR/EMR, PAS, EDC, patient portals (PMS, CTMS and Telehealth dropped).
   The pills are 168 design px wide (was 158), so "Patient portals" keeps clear of the pill's edge at every size. ---- */
.wgbv-visual[data-wgbv="connect"] { --wgbv-ar: 620 / 363; --wgbv-w: 620; --wgbv-h: 363; }
.wgbv-visual[data-wgbv="connect"] .wgbv-bg { position: absolute; inset: 0; border-radius: calc(var(--wgbv-p) * 20); background: #FAC465; }
.wgbv-visual[data-wgbv="connect"] .wgbv-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wgbv-visual[data-wgbv="connect"] .wgbv-lines path { fill: none; stroke: #8000CF; stroke-width: 1.44; stroke-dasharray: 7.68 3.84; }
.wgbv-visual[data-wgbv="connect"] .wgbv-pill { position: absolute; left: calc(var(--wgbv-p) * 43.7); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 168); height: calc(var(--wgbv-p) * 42); padding-left: calc(var(--wgbv-p) * 19.5); border-radius: calc(var(--wgbv-p) * 21); background: #FFEED1; font-size: calc(var(--wgbv-p) * 14); font-weight: 700; color: #111; white-space: nowrap; }
.wgbv-visual[data-wgbv="connect"] .wgbv-pill-1 { top: calc(var(--wgbv-p) * 59.9); }
.wgbv-visual[data-wgbv="connect"] .wgbv-pill-2 { top: calc(var(--wgbv-p) * 123.9); }
.wgbv-visual[data-wgbv="connect"] .wgbv-pill-3 { top: calc(var(--wgbv-p) * 187.9); }
.wgbv-visual[data-wgbv="connect"] .wgbv-pill-4 { top: calc(var(--wgbv-p) * 251.9); }
.wgbv-visual[data-wgbv="connect"] .wgbv-pill-icon { display: grid; place-items: center; width: calc(var(--wgbv-p) * 23); height: calc(var(--wgbv-p) * 23); flex: none; border-radius: calc(var(--wgbv-p) * 4.8); background: #7B2BA6; color: #fff; }
.wgbv-visual[data-wgbv="connect"] .wgbv-pill-1 .wgbv-pill-icon { background: #8201D0; }
.wgbv-visual[data-wgbv="connect"] .wgbv-pill-icon .wgbv-i { width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); }
.wgbv-visual[data-wgbv="connect"] .wgbv-engine { position: absolute; left: calc(var(--wgbv-p) * 241.7); top: calc(var(--wgbv-p) * 149); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 12); width: calc(var(--wgbv-p) * 191.5); height: calc(var(--wgbv-p) * 55.8); padding-left: calc(var(--wgbv-p) * 16); border-radius: calc(var(--wgbv-p) * 7.4); background: #7B2BA6; color: #fff; font-size: calc(var(--wgbv-p) * 15); font-weight: 600; white-space: nowrap; box-shadow: calc(var(--wgbv-p) * 2.8) calc(var(--wgbv-p) * 3.7) 0 rgba(123, 43, 166, .5); }
.wgbv-visual[data-wgbv="connect"] .wgbv-engine .wgbv-i { width: calc(var(--wgbv-p) * 17); height: calc(var(--wgbv-p) * 17); }
.wgbv-visual[data-wgbv="connect"] .wgbv-window { position: absolute; left: calc(var(--wgbv-p) * 459.5); top: calc(var(--wgbv-p) * 123.1); width: calc(var(--wgbv-p) * 116.1); height: calc(var(--wgbv-p) * 116.1); overflow: hidden; border-radius: calc(var(--wgbv-p) * 10.9); background: #fff; box-shadow: 0 calc(var(--wgbv-p) * 6) calc(var(--wgbv-p) * 18) rgba(32, 33, 63, .10); }
.wgbv-visual[data-wgbv="connect"] .wgbv-bar { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 2.6); height: calc(var(--wgbv-p) * 14.3); padding-left: calc(var(--wgbv-p) * 7); background: #F5F6F8; }
.wgbv-visual[data-wgbv="connect"] .wgbv-bar i { width: calc(var(--wgbv-p) * 3.6); height: calc(var(--wgbv-p) * 3.6); border-radius: 50%; background: #DC3D4C; }
.wgbv-visual[data-wgbv="connect"] .wgbv-bar i:nth-child(2) { background: #F9B33A; }
.wgbv-visual[data-wgbv="connect"] .wgbv-bar i:nth-child(3) { background: #4EC771; }
.wgbv-visual[data-wgbv="connect"] .wgbv-window img { position: absolute; left: calc(var(--wgbv-p) * 34.5); top: calc(var(--wgbv-p) * 36.3); width: calc(var(--wgbv-p) * 47.2); height: auto; }
/* Compact layout: when the box is less than 1.45 times as wide as it is tall (the small /patient-engagement-software
   card, 273 x 250 at 1440 px), the WeGuide window moves under the engine (a dashed link joins them): 477 x 379 design
   px, so the tile fills the box's width with small bands (16 px at 1440 px instead of 45). The backdrop stays on the
   stage: the box itself reaches the copy's last line at 1024 px. The lines keep their design size and stop at the
   engine. Container query on the visual's own box, so /platform (620 x 363) keeps the default. */
@container (aspect-ratio < 1.45) {
  .wgbv-visual[data-wgbv="connect"] .wgbv-stage { --wgbv-w: 477; --wgbv-h: 379; overflow: clip; }
  .wgbv-visual[data-wgbv="connect"] .wgbv-lines { inset: auto; left: 0; top: calc(var(--wgbv-p) * -16); width: calc(var(--wgbv-p) * 620); height: calc(var(--wgbv-p) * 363); clip-path: inset(0 calc(var(--wgbv-p) * 187) 0 0); }
  .wgbv-visual[data-wgbv="connect"] .wgbv-pill-1 { top: calc(var(--wgbv-p) * 43.9); }
  .wgbv-visual[data-wgbv="connect"] .wgbv-pill-2 { top: calc(var(--wgbv-p) * 107.9); }
  .wgbv-visual[data-wgbv="connect"] .wgbv-pill-3 { top: calc(var(--wgbv-p) * 171.9); }
  .wgbv-visual[data-wgbv="connect"] .wgbv-pill-4 { top: calc(var(--wgbv-p) * 235.9); }
  .wgbv-visual[data-wgbv="connect"] .wgbv-engine { top: calc(var(--wgbv-p) * 133); }
  .wgbv-visual[data-wgbv="connect"] .wgbv-engine::after { content: ''; position: absolute; left: 50%; top: 100%; height: calc(var(--wgbv-p) * 30); border-left: calc(var(--wgbv-p) * 1.44) dashed #8000CF; }
  .wgbv-visual[data-wgbv="connect"] .wgbv-window { left: calc(var(--wgbv-p) * 279.4); top: calc(var(--wgbv-p) * 219); }
}

/* ---- visuals/data-merge.css ---- */
/* ---- data-merge: three kinds of data flow into one multi-modal dataset. Replaces "Group 2087330310 (1) (1).png" on
   /biomarkers "All your data in one place". Each source has its own colour (blue wearable, green clinical, purple
   ePRO), and the dataset's columns carry the same colours. Generic glyphs: no device brands or logos. ---- */
.wgbv-visual[data-wgbv="data-merge"] { --wgbv-ar: 440 / 236; --wgbv-w: 440; --wgbv-h: 236; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-lines { position: absolute; left: calc(var(--wgbv-p) * 186); top: calc(var(--wgbv-p) * 46); width: calc(var(--wgbv-p) * 46); height: calc(var(--wgbv-p) * 144); overflow: visible; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-q { display: none; left: calc(var(--wgbv-p) * 56); top: calc(var(--wgbv-p) * 94); width: calc(var(--wgbv-p) * 188); height: calc(var(--wgbv-p) * 32); }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-lines path { fill: none; stroke-width: 2; stroke-linecap: round; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-lines path:nth-child(1) { stroke: #60A5FA; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-lines path:nth-child(2) { stroke: #34D399; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-lines path:nth-child(3) { stroke: #A78BFA; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-src { position: absolute; left: calc(var(--wgbv-p) * 10); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 10); width: calc(var(--wgbv-p) * 176); height: calc(var(--wgbv-p) * 52); padding: 0 calc(var(--wgbv-p) * 10);
  border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 12); background: #fff; box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .04), 0 calc(var(--wgbv-p) * 6) calc(var(--wgbv-p) * 14) rgba(16, 24, 40, .06); }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-s1 { top: calc(var(--wgbv-p) * 22); --wgbv-c: #2563EB; --wgbv-t: #EFF6FF; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-s2 { top: calc(var(--wgbv-p) * 92); --wgbv-c: #059669; --wgbv-t: #ECFDF5; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-s3 { top: calc(var(--wgbv-p) * 162); --wgbv-c: #7C3AED; --wgbv-t: #F5F3FF; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-ic { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 30); height: calc(var(--wgbv-p) * 30); border-radius: calc(var(--wgbv-p) * 8); background: var(--wgbv-t); color: var(--wgbv-c); }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-ic .wgbv-i { width: calc(var(--wgbv-p) * 18); height: calc(var(--wgbv-p) * 18); stroke-width: 1.8; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-lb { font-size: calc(var(--wgbv-p) * 12.5); font-weight: 600; line-height: 1.22; color: #1E293B; }
/* The dataset: three column groups in the sources' colours; the rows fill in. */
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-panel { position: absolute; left: calc(var(--wgbv-p) * 232); top: calc(var(--wgbv-p) * 14); width: calc(var(--wgbv-p) * 198); height: calc(var(--wgbv-p) * 208);
  border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 14); background: #fff; box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .04), 0 calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 24) rgba(16, 24, 40, .08); }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-title { position: absolute; left: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 14); font-size: calc(var(--wgbv-p) * 13.5); font-weight: 700; line-height: 1.2; color: #2C2D73; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-chip { position: absolute; right: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 12); padding: calc(var(--wgbv-p) * 3) calc(var(--wgbv-p) * 8); border-radius: calc(var(--wgbv-p) * 10); background: #EEF0FF; font-size: calc(var(--wgbv-p) * 10.5); font-weight: 600; line-height: 1.3; color: #4338CA; white-space: nowrap; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-head , .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row { position: absolute; left: calc(var(--wgbv-p) * 12); right: calc(var(--wgbv-p) * 12); display: grid; gap: calc(var(--wgbv-p) * 6); align-items: center; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-head { top: calc(var(--wgbv-p) * 42); grid-template-columns: 2fr 1fr 1fr; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-head > span { display: grid; place-items: center; height: calc(var(--wgbv-p) * 24); border-radius: calc(var(--wgbv-p) * 6); }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-head .wgbv-i { width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); stroke-width: 1.8; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-h1 { background: #EFF6FF; color: #2563EB; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-h2 { background: #ECFDF5; color: #059669; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-h3 { background: #F5F3FF; color: #7C3AED; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row { height: calc(var(--wgbv-p) * 18); grid-template-columns: repeat(4, 1fr); border-bottom: calc(var(--wgbv-p) * .9) solid #F1F2F5; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(1) { top: calc(var(--wgbv-p) * 74); }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(2) { top: calc(var(--wgbv-p) * 100); }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(3) { top: calc(var(--wgbv-p) * 126); }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(4) { top: calc(var(--wgbv-p) * 152); }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(5) { top: calc(var(--wgbv-p) * 178); border-bottom: 0; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row i { display: block; width: 80%; height: calc(var(--wgbv-p) * 8); margin: 0 auto; border-radius: calc(var(--wgbv-p) * 4); }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row i:nth-child(-n+2) { background: #93C5FD; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row i:nth-child(3) { background: #6EE7B7; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row i:nth-child(4) { background: #C4B5FD; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(odd) i:nth-child(2n) { width: 56%; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(even) i:nth-child(2n+1) { width: 64%; }
.wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(3n) i:nth-child(3) { width: 92%; }
/* Square layout (beside the copy on the wide card, about 270 x 270 px at 1440): the sources side by side on top, their
   lines meet on the dataset under them; 300 x 290. */
@container (aspect-ratio < 1.3) {
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 290; }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-w { display: none; }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-q { display: block; }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-src { top: calc(var(--wgbv-p) * 10); flex-direction: column; justify-content: flex-start; gap: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 88); height: calc(var(--wgbv-p) * 86); padding: calc(var(--wgbv-p) * 9) calc(var(--wgbv-p) * 5) 0; text-align: center; }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-s1 { left: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-s2 { left: calc(var(--wgbv-p) * 106); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-s3 { left: calc(var(--wgbv-p) * 198); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-ic { width: calc(var(--wgbv-p) * 26); height: calc(var(--wgbv-p) * 26); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-lb { font-size: calc(var(--wgbv-p) * 11); line-height: 1.2; }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-panel { left: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 124); width: calc(var(--wgbv-p) * 272); height: calc(var(--wgbv-p) * 156); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-head { top: calc(var(--wgbv-p) * 40); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row { height: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(1) { top: calc(var(--wgbv-p) * 70); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(2) { top: calc(var(--wgbv-p) * 86); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(3) { top: calc(var(--wgbv-p) * 102); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(4) { top: calc(var(--wgbv-p) * 118); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row:nth-of-type(5) { top: calc(var(--wgbv-p) * 134); }
  .wgbv-visual[data-wgbv="data-merge"] .wgbv-dm-row i { height: calc(var(--wgbv-p) * 7); }
}

/* ---- visuals/distribution.css ---- */
/* ---- distribution: a validated biomarker model goes out to hospitals and pharma partners through a secure setup with
   licensing and payments. Replaces "Group 2087330301.png" on /biomarkers "Commercialise with ease" (its model chip and
   partner chip, without the result pills and the loop). Dashed grey routes as in the old image. ---- */
.wgbv-visual[data-wgbv="distribution"] { --wgbv-ar: 380 / 200; --wgbv-w: 380; --wgbv-h: 200; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-lines { position: absolute; left: calc(var(--wgbv-p) * 118); top: calc(var(--wgbv-p) * 56); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 88); overflow: visible; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-n { display: none; left: calc(var(--wgbv-p) * 88); top: calc(var(--wgbv-p) * 45); width: calc(var(--wgbv-p) * 132); height: calc(var(--wgbv-p) * 96); }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-lines path { fill: none; stroke: #A9B4C6; stroke-width: 1.5; stroke-dasharray: 5 3.5; stroke-linejoin: round; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-model { position: absolute; left: calc(var(--wgbv-p) * 6); top: calc(var(--wgbv-p) * 70); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 9); width: calc(var(--wgbv-p) * 112); height: calc(var(--wgbv-p) * 60); padding: 0 calc(var(--wgbv-p) * 10);
  border: calc(var(--wgbv-p) * 1) solid #F1C76E; border-radius: calc(var(--wgbv-p) * 11); background: #FFFAEB; box-shadow: 0 calc(var(--wgbv-p) * 6) calc(var(--wgbv-p) * 14) rgba(180, 120, 0, .08); }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-mi { display: grid; place-items: center; flex: none; color: #92400E; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-mi .wgbv-i { width: calc(var(--wgbv-p) * 20); height: calc(var(--wgbv-p) * 20); stroke-width: 1.8; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-mt { display: flex; flex-direction: column; font-size: calc(var(--wgbv-p) * 12.5); font-weight: 700; line-height: 1.25; color: #1E293B; white-space: nowrap; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-mf { font-size: calc(var(--wgbv-p) * 11); font-weight: 500; color: #6B7280; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-sec { position: absolute; left: calc(var(--wgbv-p) * 140); top: calc(var(--wgbv-p) * 44); width: calc(var(--wgbv-p) * 104); height: calc(var(--wgbv-p) * 112);
  border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 14); background: #fff; box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .04), 0 calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 22) rgba(16, 24, 40, .08); }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-lock { position: absolute; left: calc(var(--wgbv-p) * 11); top: calc(var(--wgbv-p) * 11); display: grid; place-items: center; width: calc(var(--wgbv-p) * 26); height: calc(var(--wgbv-p) * 26); border-radius: calc(var(--wgbv-p) * 7); background: #F0EEFE; color: #6741D9; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-lock .wgbv-i { width: calc(var(--wgbv-p) * 16); height: calc(var(--wgbv-p) * 16); stroke-width: 1.9; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-st { position: absolute; left: calc(var(--wgbv-p) * 11); top: calc(var(--wgbv-p) * 44); font-size: calc(var(--wgbv-p) * 12); font-weight: 700; line-height: 1.2; color: #1E293B; white-space: nowrap; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-row { position: absolute; left: calc(var(--wgbv-p) * 11); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 6); font-size: calc(var(--wgbv-p) * 11.5); font-weight: 500; line-height: 1.2; color: #374151; white-space: nowrap; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-r1 { top: calc(var(--wgbv-p) * 66); }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-r2 { top: calc(var(--wgbv-p) * 88); }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-ck { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); border-radius: 50%; background: #16A34A; color: #fff; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-ck .wgbv-i { width: calc(var(--wgbv-p) * 10); height: calc(var(--wgbv-p) * 10); stroke-width: 3.2; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-to { position: absolute; left: calc(var(--wgbv-p) * 268); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 106); height: calc(var(--wgbv-p) * 50); padding: 0 calc(var(--wgbv-p) * 8);
  border: calc(var(--wgbv-p) * 1) solid #93C5FD; border-radius: calc(var(--wgbv-p) * 11); background: #EFF6FF; font-size: calc(var(--wgbv-p) * 12); font-weight: 600; line-height: 1.2; color: #1E3A8A; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-t1 { top: calc(var(--wgbv-p) * 33); }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-t2 { top: calc(var(--wgbv-p) * 117); }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-ti { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 24); height: calc(var(--wgbv-p) * 24); border-radius: calc(var(--wgbv-p) * 6); background: #fff; color: #2563EB; }
.wgbv-visual[data-wgbv="distribution"] .wgbv-ds-ti .wgbv-i { width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); stroke-width: 1.8; }
/* Narrow layout (under 300 px wide: the small card at 1024 px, phones at 320 to 360 px): tighter columns, the partner
   names under their icons; 300 x 186. */
@container (max-width: 299px) {
  .wgbv-visual[data-wgbv="distribution"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 186; }
  .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-w { display: none; }
  .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-n { display: block; }
  .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-model { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 58); flex-direction: column; justify-content: center; gap: calc(var(--wgbv-p) * 5); width: calc(var(--wgbv-p) * 84); height: calc(var(--wgbv-p) * 70); padding: 0; text-align: center; }
  .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-mt { align-items: center; font-size: calc(var(--wgbv-p) * 12); }
  .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-sec { left: calc(var(--wgbv-p) * 104); top: calc(var(--wgbv-p) * 37); width: calc(var(--wgbv-p) * 96); }
  .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-lock { left: calc(var(--wgbv-p) * 10); }
  .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-st ,   .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-row { left: calc(var(--wgbv-p) * 10); }
  .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-to { left: calc(var(--wgbv-p) * 220); flex-direction: column; justify-content: center; gap: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 76); height: calc(var(--wgbv-p) * 64); padding: 0; text-align: center; font-size: calc(var(--wgbv-p) * 11.5); line-height: 1.15; }
  .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-t1 { top: calc(var(--wgbv-p) * 15); }
  .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-t2 { top: calc(var(--wgbv-p) * 107); }
  .wgbv-visual[data-wgbv="distribution"] .wgbv-ds-ti { width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); }
}

/* ---- visuals/form-builder.css ---- */
/* ---- form-builder: the Form Builder's question types, with Slider picked (admin/form-builder-palette) ---- */
.wgbv-visual[data-wgbv="form-builder"] { --wgbv-ar: 620 / 363; --wgbv-w: 620; --wgbv-h: 363; }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-bg { position: absolute; inset: 0; border-radius: calc(var(--wgbv-p) * 20); background: #B938AF; }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-main,
.wgbv-visual[data-wgbv="form-builder"] .wgbv-float { position: absolute; border: calc(var(--wgbv-p) * 1) solid #E5E7EB; background: #fff; box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .05), 0 calc(var(--wgbv-p) * 14) calc(var(--wgbv-p) * 32) rgba(52, 10, 60, .16); }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-main { left: calc(var(--wgbv-p) * 32); top: calc(var(--wgbv-p) * 26); width: calc(var(--wgbv-p) * 434); height: calc(var(--wgbv-p) * 280); border-radius: calc(var(--wgbv-p) * 18); }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-float { left: calc(var(--wgbv-p) * 386); top: calc(var(--wgbv-p) * 150); width: calc(var(--wgbv-p) * 206); height: calc(var(--wgbv-p) * 194); padding: calc(var(--wgbv-p) * 20) calc(var(--wgbv-p) * 18); border-radius: calc(var(--wgbv-p) * 16); display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 14); }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-g { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 6); }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-main .wgbv-g { position: absolute; width: calc(var(--wgbv-p) * 190); }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-g1 { left: calc(var(--wgbv-p) * 24); top: calc(var(--wgbv-p) * 24); }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-g2 { left: calc(var(--wgbv-p) * 24); top: calc(var(--wgbv-p) * 150); }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-g3 { left: calc(var(--wgbv-p) * 224); top: calc(var(--wgbv-p) * 24); }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-g4 { left: calc(var(--wgbv-p) * 224); top: calc(var(--wgbv-p) * 150); }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-lb { display: block; margin-bottom: calc(var(--wgbv-p) * 2); font-size: calc(var(--wgbv-p) * 13.5); font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: #536076; white-space: nowrap; }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-it { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 11); height: calc(var(--wgbv-p) * 36); font-size: calc(var(--wgbv-p) * 17.5); color: #374151; white-space: nowrap; }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-tl { display: grid; place-items: center; width: calc(var(--wgbv-p) * 32); height: calc(var(--wgbv-p) * 32); flex: none; border-radius: calc(var(--wgbv-p) * 8); background: #F4F4F5; color: #AC35AE; }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-tl .wgbv-i { width: calc(var(--wgbv-p) * 18); height: calc(var(--wgbv-p) * 18); stroke-width: 2; }
/* The picked type: --on 0 (plain row) to 1 (outlined, raised). */
.wgbv-visual[data-wgbv="form-builder"] .wgbv-pick { --on: 1; height: calc(var(--wgbv-p) * 46); margin: 0 calc(var(--wgbv-p) * -8); padding: 0 calc(var(--wgbv-p) * 8); border: calc(var(--wgbv-p) * 1.5) solid color-mix(in srgb, #AC35AE calc(var(--on) * 100%), transparent); border-radius: calc(var(--wgbv-p) * 10); color: #111827;
  box-shadow: 0 calc(var(--wgbv-p) * 3) calc(var(--wgbv-p) * 10) rgba(172, 53, 174, calc(var(--on) * .18)); }
.wgbv-visual[data-wgbv="form-builder"] .wgbv-pick .wgbv-tl { background: color-mix(in srgb, #FBEFFB calc(var(--on) * 100%), #F4F4F5); }
/* Small box (at most 220 px wide, /prems-proms "Advanced form building" on phones): the group labels would be under
   3.5 px, so they grow from 13.5 to 15 design px. */
@container (max-width: 220px) {
  .wgbv-visual[data-wgbv="form-builder"] .wgbv-lb { font-size: calc(var(--wgbv-p) * 15); }
}
/* Narrow layout (v2): in an area under 300 px wide the magenta tile is 560 design px wide (16 px margin at the left)
   and the Scale / Picker popover overlaps more of the palette, so the 17.5 px item labels stay at 7 px or more;
   the group labels are 15 instead of 13.5 design px. */
@container (max-width: 299px) {
  .wgbv-visual[data-wgbv="form-builder"] .wgbv-stage { --wgbv-w: 560; }
  .wgbv-visual[data-wgbv="form-builder"] .wgbv-main { left: calc(var(--wgbv-p) * 16); }
  .wgbv-visual[data-wgbv="form-builder"] .wgbv-float { left: calc(var(--wgbv-p) * 340); }
  .wgbv-visual[data-wgbv="form-builder"] .wgbv-lb { font-size: calc(var(--wgbv-p) * 15); }
}

/* ---- visuals/identity.css ---- */
/* ---- identity: four organisation logos on concentric arcs and the app home screen that takes on each brand in turn
   (a loop). Replaces "Group 2087330133.svg" (383 x 187) on /telehealth "Your organisation, your identity",
   /observational-studies "Your trial, Your Brand" and /prems-proms "Your patients, your brand". The stage is the
   image's own 383 x 187 frame: arcs, chip positions, borders and shadows are copied from that SVG, so the t = 0 frame
   is the old picture plus the phone. The logos are windows onto that same SVG (already in the asset library and on
   these pages), so their colours and proportions are the originals. k1..k4 = My Health @Northern, Openly, the M
   roundel, the arrow mark; --wgbv-c is each brand's colour, sampled from its logo. ---- */
.wgbv-visual[data-wgbv="identity"] { --wgbv-ar: 383 / 187; --wgbv-w: 383; --wgbv-h: 187; }
.wgbv-visual[data-wgbv="identity"] .wgbv-stage { overflow: hidden; }
.wgbv-visual[data-wgbv="identity"] .wgbv-k1 { --wgbv-c: #005CB9; }
.wgbv-visual[data-wgbv="identity"] .wgbv-k2 { --wgbv-c: #6A3EEA; }
.wgbv-visual[data-wgbv="identity"] .wgbv-k3 { --wgbv-c: #005899; }
.wgbv-visual[data-wgbv="identity"] .wgbv-k4 { --wgbv-c: #285C6F; }

/* The three arcs (circles whose tops show): 0.99 px #EEE stroke, a fading grey fill and the SVG's outside drop shadow. */
.wgbv-visual[data-wgbv="identity"] .wgbv-arc { position: absolute; border-radius: 50%; border: calc(var(--wgbv-p) * .9856) solid #EEEEEE;
  background: linear-gradient(rgba(249, 248, 248, .8), rgba(233, 233, 233, 0)); box-shadow: 0 calc(var(--wgbv-p) * 3.948) calc(var(--wgbv-p) * 3.948) rgba(0, 0, 0, .28); }
.wgbv-visual[data-wgbv="identity"] .wgbv-arc-1 { left: calc(var(--wgbv-p) * 4.5072); top: calc(var(--wgbv-p) * 22.0424); width: calc(var(--wgbv-p) * 365.2046); height: calc(var(--wgbv-p) * 364.4754); }
.wgbv-visual[data-wgbv="identity"] .wgbv-arc-2 { left: calc(var(--wgbv-p) * 53.8578); top: calc(var(--wgbv-p) * 71.2963); width: calc(var(--wgbv-p) * 266.5); height: calc(var(--wgbv-p) * 265.9685); }
.wgbv-visual[data-wgbv="identity"] .wgbv-arc-3 { left: calc(var(--wgbv-p) * 104.5832); top: calc(var(--wgbv-p) * 111.9842); width: calc(var(--wgbv-p) * 169.4686); height: calc(var(--wgbv-p) * 169.4686); }

/* A soft glow of the active brand's colour behind the phone. */
.wgbv-visual[data-wgbv="identity"] .wgbv-glow { position: absolute; left: calc(var(--wgbv-p) * 64); top: calc(var(--wgbv-p) * 72); width: calc(var(--wgbv-p) * 250); height: calc(var(--wgbv-p) * 150); opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wgbv-c) 17%, transparent), transparent); }
.wgbv-visual[data-wgbv="identity"] .wgbv-glow.wgbv-k1 { opacity: 1; }

/* The phone: the top of the app's home tab (mobile/today): organisation logo, greeting, a task with Start. */
.wgbv-visual[data-wgbv="identity"] .wgbv-app { position: absolute; left: calc(var(--wgbv-p) * 121); top: calc(var(--wgbv-p) * 114); width: calc(var(--wgbv-p) * 136); height: calc(var(--wgbv-p) * 92); overflow: hidden;
  border: calc(var(--wgbv-p) * .8) solid #E2E8F0; border-radius: calc(var(--wgbv-p) * 16); background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * .854) calc(var(--wgbv-p) * 1.707) rgba(188, 184, 184, .1), 0 calc(var(--wgbv-p) * 3.415) calc(var(--wgbv-p) * 3.415) rgba(188, 184, 184, .09), 0 calc(var(--wgbv-p) * 8.537) calc(var(--wgbv-p) * 5.122) rgba(188, 184, 184, .05); }
.wgbv-visual[data-wgbv="identity"] .wgbv-notch { position: absolute; left: calc(var(--wgbv-p) * 50.2); top: calc(var(--wgbv-p) * 4.6); width: calc(var(--wgbv-p) * 34); height: calc(var(--wgbv-p) * 8.6); border-radius: calc(var(--wgbv-p) * 4.3); background: #0B0B0C; }
.wgbv-visual[data-wgbv="identity"] .wgbv-lg { position: absolute; left: calc(var(--wgbv-p) * 11.2); overflow: hidden; opacity: 0; }
.wgbv-visual[data-wgbv="identity"] .wgbv-lg img { position: absolute; }
.wgbv-visual[data-wgbv="identity"] .wgbv-lg.wgbv-k1 { opacity: 1; top: calc(var(--wgbv-p) * 21.14); width: calc(var(--wgbv-p) * 31.86); height: calc(var(--wgbv-p) * 12.12); }
.wgbv-visual[data-wgbv="identity"] .wgbv-lg.wgbv-k2 { top: calc(var(--wgbv-p) * 20.65); width: calc(var(--wgbv-p) * 33.3); height: calc(var(--wgbv-p) * 13.11); }
.wgbv-visual[data-wgbv="identity"] .wgbv-lg.wgbv-k3 { top: calc(var(--wgbv-p) * 17.34); width: calc(var(--wgbv-p) * 21.44); height: calc(var(--wgbv-p) * 19.72); border-radius: calc(var(--wgbv-p) * 1.84); }
.wgbv-visual[data-wgbv="identity"] .wgbv-lg.wgbv-k4 { top: calc(var(--wgbv-p) * 17.9); width: calc(var(--wgbv-p) * 17.38); height: calc(var(--wgbv-p) * 18.61); }
.wgbv-visual[data-wgbv="identity"] .wgbv-lg.wgbv-k1 img { left: calc(var(--wgbv-p) * -128.58); top: calc(var(--wgbv-p) * -40.52); width: calc(var(--wgbv-p) * 252.78); height: calc(var(--wgbv-p) * 123.42); }
.wgbv-visual[data-wgbv="identity"] .wgbv-lg.wgbv-k2 img { left: calc(var(--wgbv-p) * -211.08); top: calc(var(--wgbv-p) * -72.09); width: calc(var(--wgbv-p) * 252.78); height: calc(var(--wgbv-p) * 123.42); }
.wgbv-visual[data-wgbv="identity"] .wgbv-lg.wgbv-k3 img { left: calc(var(--wgbv-p) * -25.33); top: calc(var(--wgbv-p) * -47.53); width: calc(var(--wgbv-p) * 176.18); height: calc(var(--wgbv-p) * 86.02); }
.wgbv-visual[data-wgbv="identity"] .wgbv-lg.wgbv-k4 img { left: calc(var(--wgbv-p) * -49.48); top: calc(var(--wgbv-p) * -5.67); width: calc(var(--wgbv-p) * 176.18); height: calc(var(--wgbv-p) * 86.02); }
.wgbv-visual[data-wgbv="identity"] .wgbv-hi { position: absolute; left: calc(var(--wgbv-p) * 11.2); top: calc(var(--wgbv-p) * 40.2); font-size: calc(var(--wgbv-p) * 9.5); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: #2C2D73; white-space: nowrap; }
.wgbv-visual[data-wgbv="identity"] .wgbv-task { position: absolute; left: calc(var(--wgbv-p) * 11.2); right: calc(var(--wgbv-p) * 11.2); top: calc(var(--wgbv-p) * 55.4); height: calc(var(--wgbv-p) * 15); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 5); }
.wgbv-visual[data-wgbv="identity"] .wgbv-tc { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); border-radius: calc(var(--wgbv-p) * 5); background: #EFF6FF; color: #3B82F6; }
.wgbv-visual[data-wgbv="identity"] .wgbv-tc .wgbv-i { width: calc(var(--wgbv-p) * 10); height: calc(var(--wgbv-p) * 10); }
.wgbv-visual[data-wgbv="identity"] .wgbv-tt { flex: 1; min-width: 0; font-size: calc(var(--wgbv-p) * 7.3); font-weight: 500; line-height: 1.2; color: #334155; white-space: nowrap; }
.wgbv-visual[data-wgbv="identity"] .wgbv-go { position: relative; display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 28); height: calc(var(--wgbv-p) * 13); border-radius: calc(var(--wgbv-p) * 6.5); font-size: calc(var(--wgbv-p) * 6.6); font-weight: 600; line-height: 1; color: #fff; }
.wgbv-visual[data-wgbv="identity"] .wgbv-go i { position: absolute; inset: 0; border-radius: inherit; background: var(--wgbv-c); opacity: 0; }
.wgbv-visual[data-wgbv="identity"] .wgbv-go i.wgbv-k1 { opacity: 1; }
.wgbv-visual[data-wgbv="identity"] .wgbv-go span { position: relative; }

/* The logo chips: white, 0.72 px slate-200 border and the SVG's four soft shadows. Each shows the white inside of the
   same chip in the SVG (the img is the whole SVG, moved so that chip sits in the window). The active chip is 1.05x
   with a ring in its brand colour on its edge (inside the stage at every drift position). */
.wgbv-visual[data-wgbv="identity"] .wgbv-orb { position: absolute; width: calc(var(--wgbv-p) * 63.17); height: calc(var(--wgbv-p) * 63.17); will-change: transform; }
.wgbv-visual[data-wgbv="identity"] .wgbv-orb.wgbv-k1 { left: calc(var(--wgbv-p) * 187.418); top: calc(var(--wgbv-p) * 39.006); transform: scale(1.05); }
.wgbv-visual[data-wgbv="identity"] .wgbv-orb.wgbv-k2 { left: calc(var(--wgbv-p) * 313.501); top: calc(var(--wgbv-p) * 87.399); }
.wgbv-visual[data-wgbv="identity"] .wgbv-orb.wgbv-k3 { left: calc(var(--wgbv-p) * 46.804); top: calc(var(--wgbv-p) * 93.237); }
.wgbv-visual[data-wgbv="identity"] .wgbv-orb.wgbv-k4 { left: calc(var(--wgbv-p) * 94.941); top: calc(var(--wgbv-p) * 1); }
.wgbv-visual[data-wgbv="identity"] .wgbv-chip { position: absolute; inset: 0; overflow: hidden; border: calc(var(--wgbv-p) * .72) solid #E2E8F0; border-radius: 50%; background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * .854) calc(var(--wgbv-p) * 1.707) rgba(188, 184, 184, .1), 0 calc(var(--wgbv-p) * 3.415) calc(var(--wgbv-p) * 3.415) rgba(188, 184, 184, .09),
    0 calc(var(--wgbv-p) * 8.537) calc(var(--wgbv-p) * 5.122) rgba(188, 184, 184, .05), 0 calc(var(--wgbv-p) * 15.366) calc(var(--wgbv-p) * 5.976) rgba(188, 184, 184, .01); }
.wgbv-visual[data-wgbv="identity"] .wgbv-chip img { position: absolute; width: calc(var(--wgbv-p) * 383); height: calc(var(--wgbv-p) * 187); }
.wgbv-visual[data-wgbv="identity"] .wgbv-k1 .wgbv-chip img { left: calc(var(--wgbv-p) * -188.138); top: calc(var(--wgbv-p) * -39.726); }
.wgbv-visual[data-wgbv="identity"] .wgbv-k2 .wgbv-chip img { left: calc(var(--wgbv-p) * -314.221); top: calc(var(--wgbv-p) * -88.119); }
.wgbv-visual[data-wgbv="identity"] .wgbv-k3 .wgbv-chip img { left: calc(var(--wgbv-p) * -47.524); top: calc(var(--wgbv-p) * -93.957); }
.wgbv-visual[data-wgbv="identity"] .wgbv-k4 .wgbv-chip img { left: calc(var(--wgbv-p) * -95.661); top: calc(var(--wgbv-p) * -1.72); }
.wgbv-visual[data-wgbv="identity"] .wgbv-ring { position: absolute; inset: calc(var(--wgbv-p) * -.3); border: calc(var(--wgbv-p) * 1.9) solid var(--wgbv-c); border-radius: 50%; opacity: 0; }
.wgbv-visual[data-wgbv="identity"] .wgbv-k1 .wgbv-ring { opacity: 1; }
/* The spark: a dot in the brand colour that carries the brand from its chip to the app (0.7 s per change). */
.wgbv-visual[data-wgbv="identity"] .wgbv-spark { position: absolute; left: calc(var(--wgbv-p) * -3.5); top: calc(var(--wgbv-p) * -3.5); width: calc(var(--wgbv-p) * 7); height: calc(var(--wgbv-p) * 7); border-radius: 50%;
  background: var(--wgbv-c); box-shadow: 0 0 0 calc(var(--wgbv-p) * 2.5) color-mix(in srgb, var(--wgbv-c) 20%, transparent); opacity: 0; }
/* Square layout (beside the copy on the wide cards: /wearable-device-studies "Your own app", 260 x 270 px at 1440):
   the card image there is the quarter-circle version of the orbit (ownapp.svg). The arcs are quarter circles from the
   stage's bottom-right corner (radii 222, 156 and 90), the four chips sit on them, and the app stands left of the
   centre, bleeding off the card's bottom edge. --wgbv-geo tells identity.js which orbit geometry to drift along.
   290 x 266 design px (the frame of ownapp.svg). */
@container (aspect-ratio < 1.3) {
  .wgbv-visual[data-wgbv="identity"] .wgbv-stage { --wgbv-w: 290; --wgbv-h: 266; --wgbv-geo: 1;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--wgbv-p) * 20), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--wgbv-p) * 20), transparent); }
  .wgbv-visual[data-wgbv="identity"] .wgbv-arc-1 { left: calc(var(--wgbv-p) * 68); top: calc(var(--wgbv-p) * 44); width: calc(var(--wgbv-p) * 444); height: calc(var(--wgbv-p) * 444); clip-path: inset(0 calc(var(--wgbv-p) * 222) calc(var(--wgbv-p) * 222) 0); }
  .wgbv-visual[data-wgbv="identity"] .wgbv-arc-2 { left: calc(var(--wgbv-p) * 134); top: calc(var(--wgbv-p) * 110); width: calc(var(--wgbv-p) * 312); height: calc(var(--wgbv-p) * 312); clip-path: inset(0 calc(var(--wgbv-p) * 156) calc(var(--wgbv-p) * 156) 0); }
  .wgbv-visual[data-wgbv="identity"] .wgbv-arc-3 { left: calc(var(--wgbv-p) * 200); top: calc(var(--wgbv-p) * 176); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 180); clip-path: inset(0 calc(var(--wgbv-p) * 90) calc(var(--wgbv-p) * 90) 0); }
  .wgbv-visual[data-wgbv="identity"] .wgbv-glow { left: 0; top: calc(var(--wgbv-p) * 150); width: calc(var(--wgbv-p) * 190); height: calc(var(--wgbv-p) * 116); }
  .wgbv-visual[data-wgbv="identity"] .wgbv-app { left: calc(var(--wgbv-p) * 22); top: calc(var(--wgbv-p) * 182); height: calc(var(--wgbv-p) * 120); }
  .wgbv-visual[data-wgbv="identity"] .wgbv-orb.wgbv-k1 { left: calc(var(--wgbv-p) * 180.415); top: calc(var(--wgbv-p) * 99.315); }
  .wgbv-visual[data-wgbv="identity"] .wgbv-orb.wgbv-k2 { left: calc(var(--wgbv-p) * 187.495); top: calc(var(--wgbv-p) * 179.005); }
  .wgbv-visual[data-wgbv="identity"] .wgbv-orb.wgbv-k3 { left: calc(var(--wgbv-p) * 78.815); top: calc(var(--wgbv-p) * 103.925); }
  .wgbv-visual[data-wgbv="identity"] .wgbv-orb.wgbv-k4 { left: calc(var(--wgbv-p) * 204.705); top: calc(var(--wgbv-p) * 19.005); }
}

/* ---- visuals/messaging.css ---- */
/* ---- messaging: a two-way text thread between "You" (the patient) and "Clinician" ----
   Replaces /patient-engagement-software "Secure, compliant messaging" (Group 2087330197 (1).png, 1440 x 576).
   Plain text bubbles only: no attachments, read receipts, typing indicator or compliance badges. */
.wgbv-visual[data-wgbv="messaging"] { --wgbv-ar: 5 / 2; --wgbv-w: 460; --wgbv-h: 184; }
.wgbv-visual[data-wgbv="messaging"] .wgbv-stage { overflow: hidden; }
.wgbv-visual[data-wgbv="messaging"] .wgbv-msg-thread { position: absolute; left: calc(var(--wgbv-p) * 26); right: calc(var(--wgbv-p) * 26); bottom: calc(var(--wgbv-p) * 8); display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 8); }
.wgbv-visual[data-wgbv="messaging"] .wgbv-msg { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--wgbv-p) * 4); }
.wgbv-visual[data-wgbv="messaging"] .wgbv-msg-you { align-items: flex-end; }
.wgbv-visual[data-wgbv="messaging"] .wgbv-msg-them { padding-left: calc(var(--wgbv-p) * 36); }
.wgbv-visual[data-wgbv="messaging"] .wgbv-msg-who { margin: 0 calc(var(--wgbv-p) * 4) calc(var(--wgbv-p) * -1); font-size: calc(var(--wgbv-p) * 11.5); font-weight: 500; line-height: calc(var(--wgbv-p) * 14); color: #64748B; }
.wgbv-visual[data-wgbv="messaging"] .wgbv-msg-b { display: block; max-width: calc(var(--wgbv-p) * 318); padding: calc(var(--wgbv-p) * 7) calc(var(--wgbv-p) * 13); border: calc(var(--wgbv-p) * 1) solid #E2E8F0; border-radius: calc(var(--wgbv-p) * 16) calc(var(--wgbv-p) * 16) calc(var(--wgbv-p) * 16) calc(var(--wgbv-p) * 5);
  background: #fff; box-shadow: 0 calc(var(--wgbv-p) * 2) calc(var(--wgbv-p) * 8) rgba(17, 24, 39, .06); font-size: calc(var(--wgbv-p) * 14); line-height: calc(var(--wgbv-p) * 18); color: #1E293B; transform-origin: left bottom; }
.wgbv-visual[data-wgbv="messaging"] .wgbv-msg-you .wgbv-msg-b { border-color: #6741D9; border-radius: calc(var(--wgbv-p) * 16) calc(var(--wgbv-p) * 16) calc(var(--wgbv-p) * 5) calc(var(--wgbv-p) * 16); background: #6741D9; color: #fff; transform-origin: right bottom; }
.wgbv-visual[data-wgbv="messaging"] .wgbv-msg-av { position: absolute; left: 0; top: calc(var(--wgbv-p) * 16); display: grid; place-items: center; width: calc(var(--wgbv-p) * 28); height: calc(var(--wgbv-p) * 28); border-radius: 50%; background: #EDE9FE; color: #6741D9; }
.wgbv-visual[data-wgbv="messaging"] .wgbv-msg-av .wgbv-i { width: calc(var(--wgbv-p) * 16); height: calc(var(--wgbv-p) * 16); stroke-width: 1.8; }

/* ---- visuals/model-search.css ---- */
/* ---- model-search: three candidate models as "Predicted vs Actual" plots, the best one checked. Replaces
   "Group 2087330304.png" on /biomarkers "Find the best biomarker" (the same three plots and R² values). Each plot is
   one SVG: the axes, the points (one path of round dots) and the fit line. ---- */
.wgbv-visual[data-wgbv="model-search"] { --wgbv-ar: 440 / 220; --wgbv-w: 440; --wgbv-h: 220; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-card { position: absolute; width: calc(var(--wgbv-p) * 168); height: calc(var(--wgbv-p) * 140); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 12); background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .04), 0 calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 22) rgba(16, 24, 40, .08); }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c1 { left: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 72); }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c2 { left: calc(var(--wgbv-p) * 136); top: calc(var(--wgbv-p) * 40); }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c3 { left: calc(var(--wgbv-p) * 264); top: calc(var(--wgbv-p) * 8); border-color: #93C5FD; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-hl { position: absolute; inset: calc(var(--wgbv-p) * -1); border: calc(var(--wgbv-p) * 1.6) solid #60A5FA; border-radius: inherit; box-shadow: 0 0 0 calc(var(--wgbv-p) * 4) rgba(96, 165, 250, .16); }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-r2 { position: absolute; left: calc(var(--wgbv-p) * 9); top: calc(var(--wgbv-p) * 8); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 4); height: calc(var(--wgbv-p) * 21); padding: 0 calc(var(--wgbv-p) * 8);
  border-radius: calc(var(--wgbv-p) * 11); background: #F3F4F6; font-size: calc(var(--wgbv-p) * 13); font-weight: 600; color: #374151; white-space: nowrap; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c3 .wgbv-ms-r2 { padding-left: calc(var(--wgbv-p) * 3); background: #ECFDF5; color: #047857; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-ok { display: grid; place-items: center; width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); border-radius: 50%; background: #16A34A; color: #fff; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-ok .wgbv-i { width: calc(var(--wgbv-p) * 10); height: calc(var(--wgbv-p) * 10); stroke-width: 3.2; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-plot { position: absolute; left: calc(var(--wgbv-p) * 24); top: calc(var(--wgbv-p) * 34); width: calc(var(--wgbv-p) * 135); height: calc(var(--wgbv-p) * 90); overflow: visible; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-ax { fill: none; stroke: #CBD5E1; stroke-width: 1; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-dots { fill: none; stroke: #2563EB; stroke-width: 4.6; stroke-linecap: round; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c1 .wgbv-ms-dots, .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c2 .wgbv-ms-dots { stroke: #6B8DE3; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-fit { fill: none; stroke: #7C3AED; stroke-width: 1.4; stroke-linecap: round; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-x , .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-y { position: absolute; font-size: calc(var(--wgbv-p) * 11); font-weight: 500; line-height: 1; color: #6B7280; white-space: nowrap; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-x { left: calc(var(--wgbv-p) * 24); right: 0; bottom: calc(var(--wgbv-p) * 6); text-align: center; }
.wgbv-visual[data-wgbv="model-search"] .wgbv-ms-y { left: calc(var(--wgbv-p) * 7); top: calc(var(--wgbv-p) * 79); writing-mode: vertical-rl; rotate: 180deg; translate: 0 -50%; }
/* Square layout (beside the copy on the wide card, about 330 x 220 px at 1440, and phone bands up to 1.55 : 1): the
   cards fan out diagonally, as in the old image; 300 x 272. */
@container (aspect-ratio < 1.55) {
  .wgbv-visual[data-wgbv="model-search"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 272; }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c1 { left: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 8); }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c2 { left: calc(var(--wgbv-p) * 66); top: calc(var(--wgbv-p) * 66); }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c3 { left: calc(var(--wgbv-p) * 124); top: calc(var(--wgbv-p) * 124); }
}
/* Narrow layout (under 300 px wide: phones at 320 px, the small card at 1024 px): the best card in front, larger, the
   other two peeking out behind it with their R² values; 300 x 204. */
@container (max-width: 299px) {
  .wgbv-visual[data-wgbv="model-search"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 204; }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-card { width: calc(var(--wgbv-p) * 216); height: calc(var(--wgbv-p) * 132); }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c1 { left: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 6); }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c2 { left: calc(var(--wgbv-p) * 42); top: calc(var(--wgbv-p) * 35); }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c3 { left: calc(var(--wgbv-p) * 70); top: calc(var(--wgbv-p) * 64); }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-r2 { height: calc(var(--wgbv-p) * 22); font-size: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-plot { left: calc(var(--wgbv-p) * 30); top: calc(var(--wgbv-p) * 36); width: calc(var(--wgbv-p) * 114); height: calc(var(--wgbv-p) * 76); }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-x ,   .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-y { font-size: calc(var(--wgbv-p) * 12); }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-x { left: calc(var(--wgbv-p) * 30); right: auto; width: calc(var(--wgbv-p) * 114); bottom: calc(var(--wgbv-p) * 5); }
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-y { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 74); }
  /* The back cards' "Actual" sits under the front card; hidden, so it never meets the front card's "Predicted" while
     the best card lifts. */
  .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c1 .wgbv-ms-x ,   .wgbv-visual[data-wgbv="model-search"] .wgbv-ms-c2 .wgbv-ms-x { visibility: hidden; }
}

/* ---- visuals/multilingual.css ---- */
/* ---- multilingual: English and Arabic in Supported Languages, and Arabic chosen in a form (admin/supported-languages, mobile/language-switcher) ---- */
/* 380 x 228 design px (v2; was 260 tall with 38 px above the admin panel), so the 1280 px areas of about 320 x 193 px
   keep the text at 8 px or more. */
.wgbv-visual[data-wgbv="multilingual"] { --wgbv-ar: 1332 / 912; --wgbv-w: 380; --wgbv-h: 228; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-admin,
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-app { position: absolute; border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 14); background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .04), 0 calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 28) rgba(16, 24, 40, .08); }
/* Admin: Supported Languages */
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-admin { left: calc(var(--wgbv-p) * 3); top: calc(var(--wgbv-p) * 20); width: calc(var(--wgbv-p) * 207); padding: calc(var(--wgbv-p) * 13); }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-title { display: block; font-size: calc(var(--wgbv-p) * 14); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: #141826; white-space: nowrap; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-sub { display: block; margin-top: calc(var(--wgbv-p) * 2); font-size: calc(var(--wgbv-p) * 9.8); color: #6B7280; white-space: nowrap; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-list { margin-top: calc(var(--wgbv-p) * 11); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 10); overflow: hidden; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-row { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 6); height: calc(var(--wgbv-p) * 40); padding: 0 calc(var(--wgbv-p) * 9); }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-row + .wgbv-ml-row { border-top: calc(var(--wgbv-p) * .9) solid #E5E7EB; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-flag { display: block; width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); flex: none; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 calc(var(--wgbv-p) * .6) rgba(16, 24, 40, .10); }
/* The language name keeps its width; the switch is pushed to the end (the Default pill touched "English" before). */
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-name { flex: none; font-size: calc(var(--wgbv-p) * 12); font-weight: 500; color: #141826; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-def { flex: none; display: inline-grid; place-items: center; height: calc(var(--wgbv-p) * 17); padding: 0 calc(var(--wgbv-p) * 6); border-radius: calc(var(--wgbv-p) * 9); background: #F4F4F5; color: #6B7280; font-size: calc(var(--wgbv-p) * 9); font-weight: 500; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-sw { --on: 1; position: relative; display: block; margin-left: auto; width: calc(var(--wgbv-p) * 28); height: calc(var(--wgbv-p) * 16); flex: none; border-radius: calc(var(--wgbv-p) * 8); background: color-mix(in srgb, #4F46E5 calc(var(--on) * 100%), #E5E7EB); }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-sw i { position: absolute; left: calc(var(--wgbv-p) * 2); top: calc(var(--wgbv-p) * 2); width: calc(var(--wgbv-p) * 12); height: calc(var(--wgbv-p) * 12); border-radius: 50%; background: #fff; box-shadow: 0 calc(var(--wgbv-p) * .5) calc(var(--wgbv-p) * 1.5) rgba(16, 24, 40, .2); transform: translateX(calc(var(--wgbv-p) * 12 * var(--on))); }
/* App: the form header with the language picker, and its list of this form's languages */
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-app { left: calc(var(--wgbv-p) * 214); top: calc(var(--wgbv-p) * 76); width: calc(var(--wgbv-p) * 163); overflow: hidden; box-shadow: 0 calc(var(--wgbv-p) * 2) calc(var(--wgbv-p) * 4) rgba(44, 45, 115, .05), 0 calc(var(--wgbv-p) * 14) calc(var(--wgbv-p) * 32) rgba(44, 45, 115, .14); }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: calc(var(--wgbv-p) * 32); padding: 0 calc(var(--wgbv-p) * 10); border-bottom: calc(var(--wgbv-p) * .9) solid #E2E8F0; font-size: calc(var(--wgbv-p) * 10.5); white-space: nowrap; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-exit { font-weight: 500; color: #6741D9; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-form { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 600; letter-spacing: -.01em; color: #1E293B; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-code { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: calc(var(--wgbv-p) * 4); font-weight: 600; color: #6741D9; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-code > span { grid-area: 1 / 1; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-en { opacity: 0; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-code i { grid-area: 1 / 2; display: block; width: 0; height: 0; border-inline: calc(var(--wgbv-p) * 3.5) solid transparent; border-top: calc(var(--wgbv-p) * 4.5) solid #7C8FA8; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-opts { padding: calc(var(--wgbv-p) * 4) 0; border-bottom: calc(var(--wgbv-p) * .9) solid #D9D9D9; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-opt { --on: 0; display: flex; align-items: center; gap: calc(var(--wgbv-p) * 9); height: calc(var(--wgbv-p) * 34); padding-left: calc(var(--wgbv-p) * 13); font-size: calc(var(--wgbv-p) * 11); color: #262626; white-space: nowrap; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-opt-ar { --on: 1; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-opt span[lang] { font-size: calc(var(--wgbv-p) * 11.5); }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-radio { position: relative; display: block; width: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 14); flex: none; border: calc(var(--wgbv-p) * 1.6) solid color-mix(in srgb, #6741D9 calc(var(--on) * 100%), #737373); border-radius: 50%; }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-radio i { position: absolute; inset: calc(var(--wgbv-p) * 2); border-radius: 50%; background: #6741D9; transform: scale(var(--on)); }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-btns { display: flex; justify-content: flex-end; gap: calc(var(--wgbv-p) * 4); padding: calc(var(--wgbv-p) * 5) calc(var(--wgbv-p) * 6); }
.wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-btns span { display: block; padding: calc(var(--wgbv-p) * 6) calc(var(--wgbv-p) * 7); border-radius: calc(var(--wgbv-p) * 3); font-size: calc(var(--wgbv-p) * 9.8); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: #6741D9; }
/* Tall layout: when the box is less than 1.1 times as wide as it is tall (/platform/white-labeling, iphone 17.svg),
   the form sits below Supported Languages instead of beside it: 240 x 300 design px. Container query on the
   visual's own box, so the same component fits both kinds of card. */
@container (aspect-ratio < 1.1) {
  .wgbv-visual[data-wgbv="multilingual"] .wgbv-stage { --wgbv-w: 240; --wgbv-h: 300; }
  .wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-admin { left: calc(var(--wgbv-p) * 3); top: calc(var(--wgbv-p) * 6); }
  .wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-app { left: calc(var(--wgbv-p) * 74); top: calc(var(--wgbv-p) * 150); }
}
/* Narrow layout (v2): in an area under 300 px wide (the small research cards at 1024 px and on phones,
   /platform/white-labeling at 1280 to 1440 px) the two panels would put the text under 7 px, so only Supported
   Languages shows (the Arabic switch still turns on): 216 x 156 design px. */
@container (max-width: 299px) {
  .wgbv-visual[data-wgbv="multilingual"] .wgbv-stage { --wgbv-w: 216; --wgbv-h: 156; }
  .wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-admin { left: calc(var(--wgbv-p) * 4.5); top: calc(var(--wgbv-p) * 2); }
  .wgbv-visual[data-wgbv="multilingual"] .wgbv-ml-app { display: none; }
}

/* ---- visuals/one-platform.css ---- */
/* ---- one-platform: five modules inside one WeGuide platform, and the Integration Engine out to external EDCs
   (admin/integration-engine palette: the yellow tile, cream pills with purple icons, the purple engine chip and dashed
   purple line of connect). Replaces "iphone 17 (3).png" on /alternatives "One platform, not five stitched tools". ---- */
.wgbv-visual[data-wgbv="one-platform"] { --wgbv-ar: 420 / 300; --wgbv-w: 420; --wgbv-h: 300; }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-bg { position: absolute; inset: calc(var(--wgbv-p) * 1.5) 0 0; border-radius: calc(var(--wgbv-p) * 20); background: #FAC465; }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-panel { position: absolute; left: calc(var(--wgbv-p) * 24); top: calc(var(--wgbv-p) * 22); width: calc(var(--wgbv-p) * 372); height: calc(var(--wgbv-p) * 156); border-radius: calc(var(--wgbv-p) * 16); background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 26) rgba(120, 72, 0, .14); }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-brand { position: absolute; left: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 12); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 7); font-size: calc(var(--wgbv-p) * 14.5); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #2C2D73; white-space: nowrap; }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-brand img { width: calc(var(--wgbv-p) * 21); height: auto; }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-core { position: absolute; right: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 13); padding: calc(var(--wgbv-p) * 3) calc(var(--wgbv-p) * 9); border-radius: calc(var(--wgbv-p) * 10); background: #F3F4F6; font-size: calc(var(--wgbv-p) * 10.5); font-weight: 600; line-height: 1.3; color: #6B7280; white-space: nowrap; }
/* The modules: on the stage (not in the panel), so they can start apart from it. */
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-pill { position: absolute; display: flex; align-items: center; gap: calc(var(--wgbv-p) * 7); height: calc(var(--wgbv-p) * 38); padding-left: calc(var(--wgbv-p) * 8); border-radius: calc(var(--wgbv-p) * 19); background: #FFEED1; font-size: calc(var(--wgbv-p) * 12.5); font-weight: 700; color: #111; white-space: nowrap; }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-pill { width: calc(var(--wgbv-p) * 108); }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-ic { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); border-radius: calc(var(--wgbv-p) * 5); background: #7B2BA6; color: #fff; }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-ic .wgbv-i { width: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 14); }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p1 { left: calc(var(--wgbv-p) * 40); top: calc(var(--wgbv-p) * 66); }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p2 { left: calc(var(--wgbv-p) * 156); top: calc(var(--wgbv-p) * 66); }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p3 { left: calc(var(--wgbv-p) * 272); top: calc(var(--wgbv-p) * 66); }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p4 { left: calc(var(--wgbv-p) * 98); top: calc(var(--wgbv-p) * 112); }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p5 { left: calc(var(--wgbv-p) * 214); top: calc(var(--wgbv-p) * 112); }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-engine { position: absolute; left: calc(var(--wgbv-p) * 40); top: calc(var(--wgbv-p) * 160); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 10); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 42); padding-left: calc(var(--wgbv-p) * 14);
  border-radius: calc(var(--wgbv-p) * 7.4); background: #7B2BA6; color: #fff; font-size: calc(var(--wgbv-p) * 13.5); font-weight: 600; white-space: nowrap; box-shadow: calc(var(--wgbv-p) * 2.8) calc(var(--wgbv-p) * 3.7) 0 rgba(123, 43, 166, .5); }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-engine .wgbv-i { width: calc(var(--wgbv-p) * 16); height: calc(var(--wgbv-p) * 16); }
/* The dashed link from the engine to the external EDCs: right, then down (two dashed borders with a rounded corner). */
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-line { position: absolute; left: calc(var(--wgbv-p) * 220); top: calc(var(--wgbv-p) * 180.3); width: calc(var(--wgbv-p) * 101); height: calc(var(--wgbv-p) * 25.7);
  border-top: calc(var(--wgbv-p) * 1.44) dashed #8000CF; border-right: calc(var(--wgbv-p) * 1.44) dashed #8000CF; border-top-right-radius: calc(var(--wgbv-p) * 8); }
/* The external EDCs: a card with the three systems the copy names, as plain text labels (no logos). */
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-edc { position: absolute; left: calc(var(--wgbv-p) * 236); top: calc(var(--wgbv-p) * 206); display: flex; flex-direction: column; justify-content: center; gap: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 170); height: calc(var(--wgbv-p) * 72); padding: 0 calc(var(--wgbv-p) * 10);
  border-radius: calc(var(--wgbv-p) * 14); background: #FFEED1; }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-edct { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 7); font-size: calc(var(--wgbv-p) * 12.5); font-weight: 700; line-height: 1.2; color: #111; white-space: nowrap; }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-vs { display: flex; gap: calc(var(--wgbv-p) * 5); }
.wgbv-visual[data-wgbv="one-platform"] .wgbv-op-v { display: flex; align-items: center; height: calc(var(--wgbv-p) * 22); padding: 0 calc(var(--wgbv-p) * 7); border: calc(var(--wgbv-p) * .9) solid #F2D49B; border-radius: calc(var(--wgbv-p) * 6); background: #fff; font-size: calc(var(--wgbv-p) * 11.5); font-weight: 600; line-height: 1; color: #4B5563; white-space: nowrap; }
/* Narrow layout (under 300 px wide and not a band: phones at 320 to 375 px): the modules in two columns, 300 x 318. */
@container (max-width: 299px) and (aspect-ratio < 1.6) {
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 318; }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-panel { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 12); width: calc(var(--wgbv-p) * 276); height: calc(var(--wgbv-p) * 186); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-brand { left: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-core { right: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-pill { width: calc(var(--wgbv-p) * 120); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p1 { left: calc(var(--wgbv-p) * 24); top: calc(var(--wgbv-p) * 54); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p2 { left: calc(var(--wgbv-p) * 156); top: calc(var(--wgbv-p) * 54); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p3 { left: calc(var(--wgbv-p) * 24); top: calc(var(--wgbv-p) * 98); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p4 { left: calc(var(--wgbv-p) * 156); top: calc(var(--wgbv-p) * 98); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p5 { left: calc(var(--wgbv-p) * 90); top: calc(var(--wgbv-p) * 142); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-engine { left: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 182); width: calc(var(--wgbv-p) * 172); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-line { left: calc(var(--wgbv-p) * 188); top: calc(var(--wgbv-p) * 202.3); width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 37.7); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-edc { left: calc(var(--wgbv-p) * 132); top: calc(var(--wgbv-p) * 240); width: calc(var(--wgbv-p) * 156); height: calc(var(--wgbv-p) * 68); padding: 0 calc(var(--wgbv-p) * 8); gap: calc(var(--wgbv-p) * 7); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-vs { gap: calc(var(--wgbv-p) * 4); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-v { padding: 0 calc(var(--wgbv-p) * 6); font-size: calc(var(--wgbv-p) * 10.5); }
}
/* Wide layout (a band at least 1.85 times as wide as tall: the quarter card at 1024 px, about 404 x 175): the panel on
   the left, the Integration Engine on its bottom-right corner, its line up to the external EDCs at the top right; 540 x 190. */
@container (min-width: 300px) and (aspect-ratio >= 1.85) {
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-stage { --wgbv-w: 540; --wgbv-h: 190; }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-panel { left: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 16); width: calc(var(--wgbv-p) * 360); height: calc(var(--wgbv-p) * 142); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p1 { left: calc(var(--wgbv-p) * 28); top: calc(var(--wgbv-p) * 60); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p2 { left: calc(var(--wgbv-p) * 140); top: calc(var(--wgbv-p) * 60); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p3 { left: calc(var(--wgbv-p) * 252); top: calc(var(--wgbv-p) * 60); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p4 { left: calc(var(--wgbv-p) * 84); top: calc(var(--wgbv-p) * 106); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-p5 { left: calc(var(--wgbv-p) * 196); top: calc(var(--wgbv-p) * 106); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-engine { left: calc(var(--wgbv-p) * 330); top: calc(var(--wgbv-p) * 132); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-line { left: calc(var(--wgbv-p) * 458.3); top: calc(var(--wgbv-p) * 78); width: 0; height: calc(var(--wgbv-p) * 54); border-top: 0; border-radius: 0; }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-edc { left: calc(var(--wgbv-p) * 386); top: calc(var(--wgbv-p) * 12); width: calc(var(--wgbv-p) * 146); height: calc(var(--wgbv-p) * 66); padding: 0 calc(var(--wgbv-p) * 6); gap: calc(var(--wgbv-p) * 7); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-vs { gap: calc(var(--wgbv-p) * 4); }
  .wgbv-visual[data-wgbv="one-platform"] .wgbv-op-v { padding: 0 calc(var(--wgbv-p) * 6); font-size: calc(var(--wgbv-p) * 10.5); }
}

/* ---- visuals/reminders.css ---- */
/* ---- reminders: two scheduled engagements with ON pills (admin/engagement-card-compact; MedTech bv-reminders) ---- */
.wgbv-visual[data-wgbv="reminders"] { --wgbv-ar: 388 / 172; --wgbv-w: 388; --wgbv-h: 176; }
.wgbv-visual[data-wgbv="reminders"] .wgbv-row-1 { top: calc(var(--wgbv-p) * 35); }
.wgbv-visual[data-wgbv="reminders"] .wgbv-row-2 { top: calc(var(--wgbv-p) * 108); }
.wgbv-visual[data-wgbv="reminders"] .wgbv-add { left: calc(var(--wgbv-p) * 209); top: calc(var(--wgbv-p) * 1); }
/* Narrow area (under 300 px wide: the small research cards at 992 to 1279 px and 320 px phones): each row keeps its
   title and ON pill and drops the detail line, which would be under 7 px; the title sits in the row's middle. */
@container (max-width: 299px) {
  .wgbv-visual[data-wgbv="reminders"] .wgbv-row { align-items: center; padding-top: 0; }
  .wgbv-visual[data-wgbv="reminders"] .wgbv-row-title { margin-top: 0; font-size: calc(var(--wgbv-p) * 16); }
  .wgbv-visual[data-wgbv="reminders"] .wgbv-row-detail { display: none; }
}

/* ---- visuals/reminders-care.css ---- */
/* ---- reminders-care: the reminders card with neutral care labels, for non-trial pages such as /telehealth
   (admin/engagement-card-compact rows; same layout as reminders, which keeps the trial labels) ---- */
.wgbv-visual[data-wgbv="reminders-care"] { --wgbv-ar: 388 / 172; --wgbv-w: 388; --wgbv-h: 176; }
.wgbv-visual[data-wgbv="reminders-care"] .wgbv-row-1 { top: calc(var(--wgbv-p) * 35); }
.wgbv-visual[data-wgbv="reminders-care"] .wgbv-row-2 { top: calc(var(--wgbv-p) * 108); }
.wgbv-visual[data-wgbv="reminders-care"] .wgbv-add { left: calc(var(--wgbv-p) * 209); top: calc(var(--wgbv-p) * 1); }
.wgbv-visual[data-wgbv="reminders-care"] .wgbv-iconbox { color: #6B7280; }
.wgbv-visual[data-wgbv="reminders-care"] .wgbv-iconbox .wgbv-i { width: calc(var(--wgbv-p) * 16.5); height: calc(var(--wgbv-p) * 16.5); stroke-width: 1.8; }
/* Narrow area (under 300 px wide: the small research cards at 992 to 1279 px and 320 px phones): each row keeps its
   title and ON pill and drops the detail line, which would be under 7 px; the title sits in the row's middle. */
@container (max-width: 299px) {
  .wgbv-visual[data-wgbv="reminders-care"] .wgbv-row { align-items: center; padding-top: 0; }
  .wgbv-visual[data-wgbv="reminders-care"] .wgbv-row-title { margin-top: 0; font-size: calc(var(--wgbv-p) * 16); }
  .wgbv-visual[data-wgbv="reminders-care"] .wgbv-row-detail { display: none; }
}

/* ---- visuals/screening.css ---- */
/* ---- screening: inclusion rules on Age, then the participant's result (admin/inclusion-criteria, mobile/screening-eligibility) ---- */
.wgbv-visual[data-wgbv="screening"] { --wgbv-ar: 1379 / 833; --wgbv-w: 400; --wgbv-h: 242; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-card { position: absolute; left: calc(var(--wgbv-p) * 3); top: calc(var(--wgbv-p) * 13); width: calc(var(--wgbv-p) * 334); padding: calc(var(--wgbv-p) * 15) calc(var(--wgbv-p) * 16) calc(var(--wgbv-p) * 18); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 14); background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .04), 0 calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 28) rgba(16, 24, 40, .08); }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-title { display: block; font-size: calc(var(--wgbv-p) * 15); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: #141826; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-sub { display: block; margin-top: calc(var(--wgbv-p) * 3); font-size: calc(var(--wgbv-p) * 11); line-height: 1.3; color: #6B7280; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-add { position: absolute; right: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 16); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 5); height: calc(var(--wgbv-p) * 30); padding: 0 calc(var(--wgbv-p) * 12) 0 calc(var(--wgbv-p) * 10); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 8); background: #fff; color: #4F46E5; font-size: calc(var(--wgbv-p) * 12); font-weight: 500; box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .05); }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-add .wgbv-i { width: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 14); }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-hr { display: block; margin: calc(var(--wgbv-p) * 14) calc(var(--wgbv-p) * -16) calc(var(--wgbv-p) * 14); border-top: calc(var(--wgbv-p) * .9) solid #E5E7EB; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-rule { display: grid; grid-template-columns: calc(var(--wgbv-p) * 84) minmax(0, 1fr) calc(var(--wgbv-p) * 48) calc(var(--wgbv-p) * 16); align-items: center; gap: calc(var(--wgbv-p) * 8); height: calc(var(--wgbv-p) * 32); }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-r2 { margin-top: calc(var(--wgbv-p) * 10); }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-lead { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 7); }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-join { display: inline-grid; place-items: center; height: calc(var(--wgbv-p) * 22); padding: 0 calc(var(--wgbv-p) * 9); border-radius: calc(var(--wgbv-p) * 11); background: #F0EEFE; color: #4F46E5; font-size: calc(var(--wgbv-p) * 10.5); font-weight: 500; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-field { font-size: calc(var(--wgbv-p) * 12.5); font-weight: 600; color: #374151; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-box { display: flex; align-items: center; height: calc(var(--wgbv-p) * 32); padding: 0 calc(var(--wgbv-p) * 10); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 8); background: #fff; font-size: calc(var(--wgbv-p) * 11.5); color: #374151; white-space: nowrap; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-op { justify-content: space-between; gap: calc(var(--wgbv-p) * 6); }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-op .wgbv-i { width: calc(var(--wgbv-p) * 13); height: calc(var(--wgbv-p) * 13); color: #6B7280; stroke-width: 2.2; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-val { font-size: calc(var(--wgbv-p) * 12); color: #111827; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-typed { display: inline-block; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-del { width: calc(var(--wgbv-p) * 16); height: calc(var(--wgbv-p) * 16); color: #EF4444; stroke-width: 1.8; }
/* The participant's result (screening form, eligible branch) */
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-ok { position: absolute; left: calc(var(--wgbv-p) * 194); top: calc(var(--wgbv-p) * 175); display: flex; align-items: center; gap: calc(var(--wgbv-p) * 10); width: calc(var(--wgbv-p) * 202); height: calc(var(--wgbv-p) * 54); padding: 0 calc(var(--wgbv-p) * 12); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 14); background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * 2) calc(var(--wgbv-p) * 4) rgba(16, 24, 40, .05), 0 calc(var(--wgbv-p) * 14) calc(var(--wgbv-p) * 32) rgba(16, 24, 40, .14); }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-tick { display: grid; place-items: center; width: calc(var(--wgbv-p) * 30); height: calc(var(--wgbv-p) * 30); flex: none; border-radius: 50%; background: #DCFCE7; color: #16A34A; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-tick .wgbv-i { width: calc(var(--wgbv-p) * 17); height: calc(var(--wgbv-p) * 17); stroke-width: 2.6; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-res { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 2); min-width: 0; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-form { font-size: calc(var(--wgbv-p) * 10); color: #64748B; }
.wgbv-visual[data-wgbv="screening"] .wgbv-sc-yes { font-size: calc(var(--wgbv-p) * 12.5); font-weight: 600; letter-spacing: -.01em; color: #2C2D73; white-space: nowrap; }
/* Narrow layout: in an area under 330 px wide (phones, and the column beside the copy on the wide research cards at
   1280 to 1919 px) the panel is 294 design px wide (field 66, operator flexible, value 36, delete 14; the "And" chip a
   little tighter), its subtitle is left out (it ran under the Add button) and the result overlaps its bottom-right
   corner: 300 x 222 design px, so the text is a third larger than in the 400 px layout. */
@container (max-width: 329px) {
  .wgbv-visual[data-wgbv="screening"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 222; }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-card { width: calc(var(--wgbv-p) * 294); }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-sub { display: none; }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-rule { grid-template-columns: calc(var(--wgbv-p) * 66) minmax(0, 1fr) calc(var(--wgbv-p) * 36) calc(var(--wgbv-p) * 14); gap: calc(var(--wgbv-p) * 6); }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-lead { gap: calc(var(--wgbv-p) * 4); }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-join { padding: 0 calc(var(--wgbv-p) * 6); }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-ok { left: calc(var(--wgbv-p) * 94); top: calc(var(--wgbv-p) * 160); }
}
/* Corner layout (data-wgbv-layout="corner"): until 30 October this placed the stage in the bottom-right corner of the
   image box on the five wide research cards whose image box reaches under the copy column. The visual now gets its
   own area from the card (fit() in core.js), so the corner layout looks like the default. The rule below only keeps
   the layout variant (dist/components/screening--corner.html, the "Bento visual / Screening (corner)" component on
   those five cards) so the Webflow component needs no change. */
.wgbv-visual[data-wgbv="screening"][data-wgbv-layout="corner"] { --wgbv-layout: corner; }
/* Wide layout (v2): in an area more than 2.4 times as wide as it is tall (a 109 to 165 px strip under the copy: the
   wide research cards from 1280 px, the 768 px cards on /observational-studies and /population-health-cohort-study)
   the panel is as in the narrow layout (294 design px, no subtitle) and the result sits beside it instead of over its
   corner: 510 x 163 design px, so the text stays at 7 px or more at 768 px and 8 px or more from 1280 px. */
@container (aspect-ratio > 2.4) {
  .wgbv-visual[data-wgbv="screening"] .wgbv-stage { --wgbv-w: 510; --wgbv-h: 163; }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-card { top: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 294); }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-sub { display: none; }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-rule { grid-template-columns: calc(var(--wgbv-p) * 66) minmax(0, 1fr) calc(var(--wgbv-p) * 36) calc(var(--wgbv-p) * 14); gap: calc(var(--wgbv-p) * 6); }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-lead { gap: calc(var(--wgbv-p) * 4); }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-join { padding: 0 calc(var(--wgbv-p) * 6); }
  .wgbv-visual[data-wgbv="screening"] .wgbv-sc-ok { left: calc(var(--wgbv-p) * 305); top: calc(var(--wgbv-p) * 54); }
}

/* ---- visuals/security.css ---- */
/* ---- security: the app's PIN screen, "Create a 6 digit PIN" with the number pad (mobile/pin) ----
   Replaces /platform/white-labeling "Trusted security" (iphone 17 (1).svg, 223 x 250): a phone cropped at the
   bottom. Reuses the consent phone frame (wgbv-phone, wgbv-screen, wgbv-btn) and its nav bar (wgbv-nav). */
.wgbv-visual[data-wgbv="security"] { --wgbv-ar: 223 / 250; --wgbv-w: 446; --wgbv-h: 500; }
.wgbv-visual[data-wgbv="security"] .wgbv-stage { overflow: hidden; }
.wgbv-visual[data-wgbv="security"] .wgbv-phone { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 14); width: calc(var(--wgbv-p) * 422); height: calc(var(--wgbv-p) * 600); }
.wgbv-visual[data-wgbv="security"] .wgbv-pin-h { position: absolute; left: 0; right: 0; top: calc(var(--wgbv-p) * 124); text-align: center; font-size: calc(var(--wgbv-p) * 23); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: #2C2D73; }
.wgbv-visual[data-wgbv="security"] .wgbv-pin-l { position: absolute; left: 0; right: 0; top: calc(var(--wgbv-p) * 166); text-align: center; font-size: calc(var(--wgbv-p) * 15.5); font-weight: 500; line-height: 1.2; color: #475569; }
.wgbv-visual[data-wgbv="security"] .wgbv-pin-boxes { position: absolute; left: 0; right: 0; top: calc(var(--wgbv-p) * 196); display: flex; justify-content: center; gap: calc(var(--wgbv-p) * 10); }
/* A box: 1 px slate-300 border; filled (--on 1): 2 px primary border and the grey dot (--dot pops it in). */
.wgbv-visual[data-wgbv="security"] .wgbv-pin-boxes i { --on: 1; position: relative; display: block; width: calc(var(--wgbv-p) * 42); height: calc(var(--wgbv-p) * 42); border-radius: calc(var(--wgbv-p) * 8);
  border: calc(var(--wgbv-p) * 1) solid color-mix(in srgb, #6741D9 calc(var(--on) * 100%), #CBD5E1); box-shadow: inset 0 0 0 calc(var(--wgbv-p) * var(--on)) #6741D9; }
.wgbv-visual[data-wgbv="security"] .wgbv-pin-boxes i::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); margin: calc(var(--wgbv-p) * -7.5) 0 0 calc(var(--wgbv-p) * -7.5); border-radius: 50%; background: #64748B; transform: scale(var(--dot, var(--on))); }
.wgbv-visual[data-wgbv="security"] .wgbv-pin-pad { position: absolute; left: calc(var(--wgbv-p) * 20); right: calc(var(--wgbv-p) * 20); top: calc(var(--wgbv-p) * 262); display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc(var(--wgbv-p) * 74); }
.wgbv-visual[data-wgbv="security"] .wgbv-pin-k { display: grid; place-items: center; font-size: calc(var(--wgbv-p) * 27); font-weight: 500; line-height: 1; color: #1E293B; }

/* ---- visuals/store-listing.css ---- */
/* ---- store-listing: your own app listing in the stores, next to (and separate from) the main WeGuide app. Replaces
   "Frame 2131328581.svg" (the logo orbit) on /platform/white-labeling "Dedicated store listings". Store names are text
   labels, not the official badges; the app is a neutral placeholder ("Your app", "Your organisation") with a
   neutral mark in the brand teal that brand-theme (the card above it) applies. ---- */
.wgbv-visual[data-wgbv="store-listing"] { --wgbv-ar: 400 / 226; --wgbv-w: 400; --wgbv-h: 226; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-card { position: absolute; left: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 384); height: calc(var(--wgbv-p) * 212);
  border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 16); background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .04), 0 calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 24) rgba(16, 24, 40, .08); }
/* Store switch: a segmented control; the thumb ends on Google Play. */
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-seg { position: absolute; left: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 14); width: calc(var(--wgbv-p) * 230); height: calc(var(--wgbv-p) * 30); border-radius: calc(var(--wgbv-p) * 9); background: #F1F5F9; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-thumb { position: absolute; left: calc(var(--wgbv-p) * 116); top: calc(var(--wgbv-p) * 3); width: calc(var(--wgbv-p) * 111); height: calc(var(--wgbv-p) * 24); border-radius: calc(var(--wgbv-p) * 7); background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 3) rgba(16, 24, 40, .12); }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-s1 , .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-s2 { position: absolute; top: 0; width: 50%; line-height: calc(var(--wgbv-p) * 30); text-align: center; font-size: calc(var(--wgbv-p) * 11.5); font-weight: 600; color: #1E293B; white-space: nowrap; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-s1 { left: 0; opacity: .5; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-s2 { left: 50%; }
/* The listing: the app icon in the brand colour, name, organisation, Get / Open. */
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-app { position: absolute; left: 0; right: 0; top: calc(var(--wgbv-p) * 58); height: calc(var(--wgbv-p) * 70); }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-icon { position: absolute; left: calc(var(--wgbv-p) * 16); top: 0; display: grid; place-items: center; width: calc(var(--wgbv-p) * 66); height: calc(var(--wgbv-p) * 66); border-radius: calc(var(--wgbv-p) * 15); background: linear-gradient(150deg, #14A08E, #0F766E); color: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * 4) calc(var(--wgbv-p) * 10) rgba(15, 118, 110, .25); }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-icon .wgbv-i { width: calc(var(--wgbv-p) * 30); height: calc(var(--wgbv-p) * 30); }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-name { position: absolute; left: calc(var(--wgbv-p) * 96); top: calc(var(--wgbv-p) * 8); font-size: calc(var(--wgbv-p) * 18); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-org { position: absolute; left: calc(var(--wgbv-p) * 96); top: calc(var(--wgbv-p) * 33); font-size: calc(var(--wgbv-p) * 12.5); line-height: 1.2; color: #6B7280; white-space: nowrap; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-get { position: absolute; right: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 19); display: grid; place-items: center; width: calc(var(--wgbv-p) * 68); height: calc(var(--wgbv-p) * 28); border-radius: calc(var(--wgbv-p) * 14); background: #EEF0FF; color: #4F46E5; font-size: calc(var(--wgbv-p) * 13); font-weight: 700; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-g1 , .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-g2 { grid-area: 1 / 1; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-g1 { opacity: 0; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-rule { position: absolute; left: calc(var(--wgbv-p) * 16); right: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 140); border-top: calc(var(--wgbv-p) * .9) solid #EEF0F3; }
/* The main WeGuide app: a separate, dimmed listing. */
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-wg { position: absolute; left: 0; right: 0; top: calc(var(--wgbv-p) * 152); height: calc(var(--wgbv-p) * 46); opacity: .62; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-wicon { position: absolute; left: calc(var(--wgbv-p) * 26); top: 0; display: grid; place-items: center; width: calc(var(--wgbv-p) * 46); height: calc(var(--wgbv-p) * 46); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 11); background: #fff; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-wicon img { width: calc(var(--wgbv-p) * 26); height: auto; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-wname { position: absolute; left: calc(var(--wgbv-p) * 86); top: calc(var(--wgbv-p) * 5); font-size: calc(var(--wgbv-p) * 14); font-weight: 600; line-height: 1.2; color: #374151; white-space: nowrap; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-worg { position: absolute; left: calc(var(--wgbv-p) * 86); top: calc(var(--wgbv-p) * 25); font-size: calc(var(--wgbv-p) * 11.5); line-height: 1.2; color: #6B7280; white-space: nowrap; }
.wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-wget { position: absolute; right: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 10); display: grid; place-items: center; width: calc(var(--wgbv-p) * 58); height: calc(var(--wgbv-p) * 26); border-radius: calc(var(--wgbv-p) * 13); background: #F3F4F6; color: #6B7280; font-size: calc(var(--wgbv-p) * 12); font-weight: 600; }
/* Square layout (beside the copy on the half card, about 268 x 270 px at 1440): the switch spans the card, Get / Open
   sits under the name, 300 x 252. */
@container (aspect-ratio < 1.3) {
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 252; }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-card { width: calc(var(--wgbv-p) * 284); height: calc(var(--wgbv-p) * 238); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-seg { left: calc(var(--wgbv-p) * 14); width: calc(var(--wgbv-p) * 254); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-thumb { left: calc(var(--wgbv-p) * 128); width: calc(var(--wgbv-p) * 123); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-app { top: calc(var(--wgbv-p) * 60); height: calc(var(--wgbv-p) * 84); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-icon { left: calc(var(--wgbv-p) * 14); width: calc(var(--wgbv-p) * 72); height: calc(var(--wgbv-p) * 72); border-radius: calc(var(--wgbv-p) * 16); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-name ,   .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-org { left: calc(var(--wgbv-p) * 100); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-name { top: calc(var(--wgbv-p) * 2); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-org { top: calc(var(--wgbv-p) * 26); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-get { left: calc(var(--wgbv-p) * 100); right: auto; top: calc(var(--wgbv-p) * 46); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-rule { left: calc(var(--wgbv-p) * 14); right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 160); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-wg { top: calc(var(--wgbv-p) * 174); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-wicon { left: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-wname ,   .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-worg { left: calc(var(--wgbv-p) * 72); }
  .wgbv-visual[data-wgbv="store-listing"] .wgbv-sl-wget { right: calc(var(--wgbv-p) * 14); }
}

/* ---- visuals/substudy.css ---- */
/* ---- substudy: a substudy form after the main study's eConsent, sent only to the patients it is for
   (admin/engagement-builder) ---- */
.wgbv-visual[data-wgbv="substudy"] { --wgbv-ar: 413 / 178; --wgbv-w: 413; --wgbv-h: 178; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-eng { --hl: 0; position: absolute; left: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 405); display: flex; align-items: flex-start; gap: calc(var(--wgbv-p) * 10); padding: calc(var(--wgbv-p) * 11) calc(var(--wgbv-p) * 12) 0 calc(var(--wgbv-p) * 11);
  border: calc(var(--wgbv-p) * 1) solid color-mix(in srgb, #4F46E5 calc(var(--hl) * 100%), #E5E7EB); border-radius: calc(var(--wgbv-p) * 10); background: #fff;
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .05), 0 calc(var(--wgbv-p) * 6) calc(var(--wgbv-p) * 16) rgba(79, 70, 229, calc(var(--hl) * .10)); }
.wgbv-visual[data-wgbv="substudy"] .wgbv-eng-a { top: calc(var(--wgbv-p) * 1); height: calc(var(--wgbv-p) * 72); }
.wgbv-visual[data-wgbv="substudy"] .wgbv-eng-b { --hl: 1; top: calc(var(--wgbv-p) * 80); height: calc(var(--wgbv-p) * 96); }
.wgbv-visual[data-wgbv="substudy"] .wgbv-ib { display: grid; place-items: center; width: calc(var(--wgbv-p) * 30); height: calc(var(--wgbv-p) * 30); flex: none; border-radius: 50%; background: #F4F4F5; color: #6B7280; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-ib .wgbv-i { width: calc(var(--wgbv-p) * 16); height: calc(var(--wgbv-p) * 16); stroke-width: 1.8; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-em { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-et { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--wgbv-p) * 10); height: calc(var(--wgbv-p) * 24); margin-top: calc(var(--wgbv-p) * 3); }
.wgbv-visual[data-wgbv="substudy"] .wgbv-tt { font-size: calc(var(--wgbv-p) * 14.5); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-on { display: grid; place-items: center; height: calc(var(--wgbv-p) * 21); padding: 0 calc(var(--wgbv-p) * 10); border-radius: calc(var(--wgbv-p) * 11); background: #D2F9E4; color: #166534; font-size: calc(var(--wgbv-p) * 10.5); font-weight: 600; letter-spacing: .04em; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-el { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 5); margin-top: calc(var(--wgbv-p) * 2); font-size: calc(var(--wgbv-p) * 11.5); line-height: 1.35; color: #374151; white-space: nowrap; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-el .wgbv-i { width: calc(var(--wgbv-p) * 13.5); height: calc(var(--wgbv-p) * 13.5); color: #9CA3AF; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-ef { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 10); margin-top: calc(var(--wgbv-p) * 7); white-space: nowrap; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-eng-a .wgbv-ef { margin-top: calc(var(--wgbv-p) * 6); }
.wgbv-visual[data-wgbv="substudy"] .wgbv-tag { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 5); height: calc(var(--wgbv-p) * 22); padding: 0 calc(var(--wgbv-p) * 7); border-radius: calc(var(--wgbv-p) * 5); background: #E3E1FA; font-size: calc(var(--wgbv-p) * 10.5); color: #374151; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-tag .wgbv-i { width: calc(var(--wgbv-p) * 13); height: calc(var(--wgbv-p) * 13); color: #5D43E2; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-st { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 4); font-size: calc(var(--wgbv-p) * 10.5); color: #374151; }
.wgbv-visual[data-wgbv="substudy"] .wgbv-st .wgbv-i { width: calc(var(--wgbv-p) * 13); height: calc(var(--wgbv-p) * 13); color: #16A34A; stroke-width: 2.4; }
/* Narrow layout (v2): in an area under 300 px wide the cards are 322 design px wide, the eligibility line wraps to a
   second line and "Available message" is left out: 330 x 194 design px, so the 10.5 to 14.5 px text stays at 7 px or
   more at 237 px. */
@container (max-width: 299px) {
  .wgbv-visual[data-wgbv="substudy"] .wgbv-stage { --wgbv-w: 330; --wgbv-h: 194; }
  .wgbv-visual[data-wgbv="substudy"] .wgbv-eng { width: calc(var(--wgbv-p) * 322); }
  .wgbv-visual[data-wgbv="substudy"] .wgbv-eng-b { height: calc(var(--wgbv-p) * 112); }
  .wgbv-visual[data-wgbv="substudy"] .wgbv-el { align-items: flex-start; white-space: normal; }
  .wgbv-visual[data-wgbv="substudy"] .wgbv-st { display: none; }
}

/* ---- visuals/survey.css ---- */
/* ---- survey: one health question answered in the app (mobile/survey-card with the mobile/survey-single texts) ----
   Replaces /real-world-evidence-rwe "Real-Time Data Collection" (rweeeee.svg, 357 x 233). The card runs off the
   bottom of the slot and fades out there, as the current image is cropped. Sizes are the app's x 1.15. */
.wgbv-visual[data-wgbv="survey"] { --wgbv-ar: 357 / 233; --wgbv-w: 536; --wgbv-h: 350; }
.wgbv-visual[data-wgbv="survey"] .wgbv-stage { overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(var(--wgbv-p) * 318), transparent calc(var(--wgbv-p) * 350)); mask-image: linear-gradient(#000 calc(var(--wgbv-p) * 318), transparent calc(var(--wgbv-p) * 350)); }
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-card { position: absolute; left: calc(var(--wgbv-p) * 40); top: calc(var(--wgbv-p) * 12); width: calc(var(--wgbv-p) * 456); display: flex; flex-direction: column; padding: calc(var(--wgbv-p) * 28) calc(var(--wgbv-p) * 18.4) 0;
  border: calc(var(--wgbv-p) * 1) solid #EEF2F6; border-radius: calc(var(--wgbv-p) * 18); background: #fff; box-shadow: 0 calc(var(--wgbv-p) * 8) calc(var(--wgbv-p) * 24) rgba(17, 24, 39, .10); }
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-card > * { flex: none; }
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-bar { position: relative; display: block; height: calc(var(--wgbv-p) * 9.2); overflow: hidden; border-radius: calc(var(--wgbv-p) * 5.75); background: #F1F5F9; }
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 33.333%; border-radius: calc(var(--wgbv-p) * 5.75); background: #16A34A; transform-origin: left center; }
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-ind { margin-top: calc(var(--wgbv-p) * 18.4); font-size: calc(var(--wgbv-p) * 16); line-height: 1.4; color: #475569; }
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-q { margin-top: calc(var(--wgbv-p) * 27.6); font-size: calc(var(--wgbv-p) * 24.2); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: #2C2D73; white-space: nowrap; }
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-req { position: relative; top: -.35em; margin-left: calc(var(--wgbv-p) * 1.2); font-size: .66em; color: #DC2626; }
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-opts { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 9.2); margin-top: calc(var(--wgbv-p) * 32.2); }
/* An answer cell; --on 1 is the selected look (primary border, primary-soft fill, filled radio). */
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-opt { --on: 0; display: flex; align-items: center; gap: calc(var(--wgbv-p) * 13.8); height: calc(var(--wgbv-p) * 64.4); padding: 0 calc(var(--wgbv-p) * 18.4);
  border: calc(var(--wgbv-p) * 2.3) solid color-mix(in srgb, #6741D9 calc(var(--on) * 100%), transparent); border-radius: calc(var(--wgbv-p) * 18.4); background: color-mix(in srgb, #F3F0FF calc(var(--on) * 100%), #F1F5F9);
  font-size: calc(var(--wgbv-p) * 18.4); font-weight: 500; letter-spacing: -.015em; color: #1E293B; white-space: nowrap; }
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-opt.wgbv-sv-sel { --on: 1; }
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-opt i { position: relative; display: block; flex: none; width: calc(var(--wgbv-p) * 23); height: calc(var(--wgbv-p) * 23); border-radius: 50%; border: calc(var(--wgbv-p) * 2.3) solid color-mix(in srgb, #6741D9 calc(var(--on) * 100%), #94A3B8); background: #fff; }
.wgbv-visual[data-wgbv="survey"] .wgbv-sv-opt i::after { content: ''; position: absolute; inset: calc(var(--wgbv-p) * 3.4); border-radius: 50%; background: #6741D9; transform: scale(var(--on)); }

/* ---- visuals/televisit.css ---- */
/* ---- televisit: a plain video call between You and the Clinician (MedTech use-case "telehealth") ----
   Default: the small cards' strip (tele.svg, 393 x 157). Tall layout, picked by the box shape (below): the /telehealth
   wide card's box (virtual.svg, 233 x 250), drawn as a call with the Clinician in front and You as a picture in picture.
   The people are photo cutouts with a transparent background (assets/wgbv-televisit-*.webp, generated, fictional;
   see demo/people/generation-log.md), composed for the 150 x 128 tile: each image covers its tile from the bottom. */
.wgbv-visual[data-wgbv="televisit"] { --wgbv-ar: 393 / 157; --wgbv-w: 400; --wgbv-h: 160; }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-tile { position: absolute; top: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 128); overflow: hidden; border-radius: calc(var(--wgbv-p) * 14);
  box-shadow: 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(16, 24, 40, .05), 0 calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * 24) rgba(16, 24, 40, .10); }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-you { left: calc(var(--wgbv-p) * 6); background: linear-gradient(160deg, #EAF8EF, #CDEEDA); }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-doc { left: calc(var(--wgbv-p) * 244); background: linear-gradient(160deg, #F1EFFE, #DCD6FA); }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-room { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-feed { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; transform-origin: 50% 100%; }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-name { position: absolute; left: calc(var(--wgbv-p) * 9); top: calc(var(--wgbv-p) * 9); display: inline-flex; align-items: center; height: calc(var(--wgbv-p) * 20); padding: 0 calc(var(--wgbv-p) * 9); border-radius: calc(var(--wgbv-p) * 10); background: #16A34A; color: #fff; font-size: calc(var(--wgbv-p) * 10.5); font-weight: 600; line-height: 1; white-space: nowrap; transform-origin: 0 50%; }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-doc .wgbv-tv-name { background: #6E56CF; }
/* Audio bars: the name pill opens up for them while that person speaks (--on 0 to 1, only during the motion) */
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-vu { display: flex; flex: none; align-items: center; gap: calc(var(--wgbv-p) * 1.3); width: calc(var(--wgbv-p) * 8 * var(--on, 0)); height: calc(var(--wgbv-p) * 9); margin-left: calc(var(--wgbv-p) * 5 * var(--on, 0)); overflow: hidden; }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-vu i { display: block; flex: none; width: calc(var(--wgbv-p) * 1.8); height: 100%; border-radius: calc(var(--wgbv-p) * 1); background: currentColor; transform: scaleY(.3); }
/* Active speaker outline (only shown during the motion): the Clinician, then You */
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-ring { position: absolute; inset: 0; display: block; border-radius: inherit; box-shadow: inset 0 0 0 calc(var(--wgbv-p) * 2.5) #8B7CF0; opacity: 0; }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-you .wgbv-tv-ring { box-shadow: inset 0 0 0 calc(var(--wgbv-p) * 2.5) #22C55E; }
/* The WeGuide mark between the two, with dashed links as in the current website image */
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-link { position: absolute; top: calc(var(--wgbv-p) * 72); width: calc(var(--wgbv-p) * 22); border-top: calc(var(--wgbv-p) * 1.4) dashed #A79CEF; }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-l1 { left: calc(var(--wgbv-p) * 156); }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-l2 { left: calc(var(--wgbv-p) * 222); }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-badge { position: absolute; left: calc(var(--wgbv-p) * 178); top: calc(var(--wgbv-p) * 50); z-index: 2; display: grid; place-items: center; width: calc(var(--wgbv-p) * 44); height: calc(var(--wgbv-p) * 44); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: 50%; background: #fff; box-shadow: 0 calc(var(--wgbv-p) * 4) calc(var(--wgbv-p) * 14) rgba(17, 24, 39, .10); }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-badge img { width: calc(var(--wgbv-p) * 24); height: auto; }
/* Call controls: camera, microphone, end call (no recording, chat or screen sharing) */
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-ctl { position: absolute; left: calc(var(--wgbv-p) * 151); top: calc(var(--wgbv-p) * 118); z-index: 2; display: flex; align-items: center; justify-content: center; gap: calc(var(--wgbv-p) * 7); width: calc(var(--wgbv-p) * 98); height: calc(var(--wgbv-p) * 34); border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 17); background: #fff; box-shadow: 0 calc(var(--wgbv-p) * 6) calc(var(--wgbv-p) * 16) rgba(16, 24, 40, .12); }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-btn { display: grid; place-items: center; width: calc(var(--wgbv-p) * 24); height: calc(var(--wgbv-p) * 24); border-radius: 50%; background: #F3F4F6; color: #374151; }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-btn .wgbv-i { width: calc(var(--wgbv-p) * 13); height: calc(var(--wgbv-p) * 13); stroke-width: 2; }
.wgbv-visual[data-wgbv="televisit"] .wgbv-tv-end { background: #EF4444; color: #fff; }
/* Tall layout: when the box is less than 1.5 times as wide as it is tall (there it fills more of the box than the
   2.5 : 1 strip), unless it is also under 300 x 200 px (then the narrow strip below draws the names larger).
   Container query on the visual's own box, so the same component fits both kinds of card. */
@container (aspect-ratio < 1.5) and ((min-width: 300px) or (min-height: 200px)) {
  .wgbv-visual[data-wgbv="televisit"] .wgbv-stage { --wgbv-w: 240; --wgbv-h: 258; }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-doc { left: calc(var(--wgbv-p) * 6); top: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 228); height: calc(var(--wgbv-p) * 196); }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-you { left: calc(var(--wgbv-p) * 148); top: calc(var(--wgbv-p) * 118); z-index: 1; width: calc(var(--wgbv-p) * 78); height: calc(var(--wgbv-p) * 78); border: calc(var(--wgbv-p) * 2.5) solid #fff; border-radius: calc(var(--wgbv-p) * 12); }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-you .wgbv-tv-feed { left: -10%; bottom: -14%; width: 120%; }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-you .wgbv-tv-room { display: none; }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-you .wgbv-tv-name { left: calc(var(--wgbv-p) * 5); top: calc(var(--wgbv-p) * 5); height: calc(var(--wgbv-p) * 16); padding: 0 calc(var(--wgbv-p) * 7); font-size: calc(var(--wgbv-p) * 9); }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-you .wgbv-tv-vu { height: calc(var(--wgbv-p) * 7.5); margin-left: calc(var(--wgbv-p) * 4 * var(--on, 0)); }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-link { display: none; }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-badge { left: calc(var(--wgbv-p) * 184); top: calc(var(--wgbv-p) * 16); width: calc(var(--wgbv-p) * 40); height: calc(var(--wgbv-p) * 40); }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-badge img { width: calc(var(--wgbv-p) * 22); }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-ctl { left: calc(var(--wgbv-p) * 71); top: calc(var(--wgbv-p) * 216); }
  /* The Clinician sits 10 design px lower in her tile: the bell of her stethoscope, at the bottom of the cutout, is then
     clipped by the tile's edge instead of peeking out in the 8 design px under the You tile (30 October). */
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-doc .wgbv-tv-feed { bottom: calc(var(--wgbv-p) * -10); }
}
/* Narrow strip (v2): in an area under 300 px wide (and not tall enough for the tall layout) the two tiles are 140 px
   wide and closer, with the WeGuide mark over the gap and no dashed links: 316 x 160 design px, so the name pills stay
   at 7 px or more at 237 px. */
@container (max-width: 299px) and ((aspect-ratio >= 1.5) or (max-height: 199.98px)) {
  .wgbv-visual[data-wgbv="televisit"] .wgbv-stage { --wgbv-w: 316; }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-tile { width: calc(var(--wgbv-p) * 140); }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-doc { left: calc(var(--wgbv-p) * 170); }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-link { display: none; }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-badge { left: calc(var(--wgbv-p) * 136); }
  .wgbv-visual[data-wgbv="televisit"] .wgbv-tv-ctl { left: calc(var(--wgbv-p) * 109); }
}

/* ---- visuals/wearable.css ---- */
/* ---- wearable: a finished wearable sync and the patient's own data, no device brand
   (mobile/garmin-sync "done" with its watch drawn without a logo, mobile/sync-completed, mobile/insight) ---- */
.wgbv-visual[data-wgbv="wearable"] { --wgbv-ar: 1930 / 1114; --wgbv-w: 400; --wgbv-h: 231; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-sync,
.wgbv-visual[data-wgbv="wearable"] .wgbv-in { position: absolute; background: #fff; border: calc(var(--wgbv-p) * 1) solid #E2E8F0; box-shadow: 0 calc(var(--wgbv-p) * 4) calc(var(--wgbv-p) * 10) calc(var(--wgbv-p) * -2) rgba(15, 23, 42, .10), 0 calc(var(--wgbv-p) * 1) calc(var(--wgbv-p) * 2) rgba(15, 23, 42, .04); }
/* The sync result (garmin-sync-success / health-sync-success) */
.wgbv-visual[data-wgbv="wearable"] .wgbv-sync { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 5); width: calc(var(--wgbv-p) * 160); height: calc(var(--wgbv-p) * 221); border-radius: calc(var(--wgbv-p) * 16); text-align: center; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-watch { position: absolute; left: calc(var(--wgbv-p) * 30); top: calc(var(--wgbv-p) * 16); width: calc(var(--wgbv-p) * 100); height: calc(var(--wgbv-p) * 100); color: #6741D9; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-load circle { fill: none; stroke: #E2E8F0; stroke-width: 18; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-load { opacity: 0; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-load .wgbv-arc { stroke: #6741D9; stroke-linecap: round; stroke-dasharray: 0 1; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-ok { fill: none; stroke: #16A34A; stroke-width: 28; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-h,
.wgbv-visual[data-wgbv="wearable"] .wgbv-busy { position: absolute; left: calc(var(--wgbv-p) * 8); right: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 128); font-size: calc(var(--wgbv-p) * 14.5); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: #1E293B; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-busy { top: calc(var(--wgbv-p) * 126); font-size: calc(var(--wgbv-p) * 12); font-weight: 500; color: #475569; opacity: 0; visibility: hidden; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-msg { position: absolute; left: calc(var(--wgbv-p) * 14); right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 153); font-size: calc(var(--wgbv-p) * 11); line-height: 1.45; color: #475569; }
/* Insight cards (pages/insight): name, date, latest value and a week of entries */
.wgbv-visual[data-wgbv="wearable"] .wgbv-in { left: calc(var(--wgbv-p) * 174); width: calc(var(--wgbv-p) * 222); height: calc(var(--wgbv-p) * 68); border-color: #F1F5F9; border-radius: calc(var(--wgbv-p) * 12); }
.wgbv-visual[data-wgbv="wearable"] .wgbv-in:nth-child(2) { top: calc(var(--wgbv-p) * 5); }
.wgbv-visual[data-wgbv="wearable"] .wgbv-in:nth-child(3) { top: calc(var(--wgbv-p) * 81.5); }
.wgbv-visual[data-wgbv="wearable"] .wgbv-in:nth-child(4) { top: calc(var(--wgbv-p) * 158); }
.wgbv-visual[data-wgbv="wearable"] .wgbv-ih { position: absolute; left: calc(var(--wgbv-p) * 12); right: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 9); display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--wgbv-p) * 11.5); font-weight: 500; line-height: 1.3; color: #1E293B; white-space: nowrap; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-d { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 2); font-size: calc(var(--wgbv-p) * 10); color: #64748B; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-d .wgbv-i { width: calc(var(--wgbv-p) * 11); height: calc(var(--wgbv-p) * 11); color: #6741D9; stroke-width: 2.4; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-v { position: absolute; left: calc(var(--wgbv-p) * 12); bottom: calc(var(--wgbv-p) * 8); font-size: calc(var(--wgbv-p) * 22); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #1E293B; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-sleep { font-size: calc(var(--wgbv-p) * 17); bottom: calc(var(--wgbv-p) * 10); }
.wgbv-visual[data-wgbv="wearable"] .wgbv-ch { position: absolute; right: calc(var(--wgbv-p) * 10); bottom: calc(var(--wgbv-p) * 9); width: calc(var(--wgbv-p) * 104); height: calc(var(--wgbv-p) * 28); overflow: visible; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-ch path { fill: none; stroke: #6741D9; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.wgbv-visual[data-wgbv="wearable"] .wgbv-ch circle { fill: #6741D9; stroke: #fff; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }