/* 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, sleep-billing, sleep-kit, sleep-referral, sleep-report, sleep-specialist, 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; }
  }
  /* Image cap (v2.8, 31 October). From 480 to 767 px the hidden image (the band) grows with the card's width (up to
     491 px at 767 px), while the visual's scale stops at the text cap (--wgbv-pmax), so the tallest cards had areas
     of 400 to 500 px that their layouts could only fill by stretching. There the image is at most 360 px tall: about
     the height at which the tallest tablet layouts reach their text cap, so no visual is drawn smaller. Cards whose
     height came from that image get up to 131 px shorter (the card's height in the site and the 150 px band stay the
     floor). Identity is left out: its orbit has no text cap and grows with its area (/movement-studies). */
  @media (min-width: 480px) and (max-width: 767px) {
    .point > img:has(+ :is(.w-embed, .wgbv-embed) > .wgbv-visual:not([data-wgbv="identity"])) { max-height: 360px; }
  }
  /* 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, never under 7.2 px (at 1100 to 1200 px the
   /citizen-science card's band scales the dashboard to 0.43, which put the labels at 6.9 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: max(7.2px, 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; }
}

/* Tablet layout (v2.7, research cards from 768 to 991 px: areas under 1.4 : 1 and 200 px tall or more). The window
   (the phone down to 20 design px under the signature line, at the area's full width) is shorter than these areas, so
   it sat at their bottom and 33 to 90 px stayed empty above the phone. Here the stage starts 8 design px above the area
   and runs to the card's bottom edge at the same scale: the phone's top 8 under the area's top, the phone longer so
   it still runs off the card, and the signature box taller by the window's height over 408 design px, so the screen
   is not left empty under it. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio < 1.4) and (min-height: 200px) {
    .wgbv-visual[data-wgbv="consent"]:is(.point *) .wgbv-stage { top: calc(var(--wgbv-p) * -8); height: calc(100cqh + var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="consent"]:is(.point *) .wgbv-phone { height: calc(100cqh + var(--wgbv-p) * 22); }
    .wgbv-visual[data-wgbv="consent"]:is(.point *) .wgbv-pad { height: calc(var(--wgbv-p) * 170 + max(0px, 100cqh - var(--wgbv-p) * 408)); }
  }
}

/* Phone layouts (v2.7 bleed, research cards up to 479 px). Where the area is narrow (under 1.165 : 1 from 200 px tall,
   under 1.32 : 1 from 160 to 200 px), the window (the phone down to the signature box, at the area's full width) is
   shorter than the area, so it sat at the area's bottom with 33 to 104 px empty above the phone. Here, as on tablets,
   the stage starts 8 design px above the area and runs to the card's bottom edge at the same scale: the phone's top 8
   under the area's top, the phone longer so it still runs off the card. The signature box follows the card's edge:
   - in a tall window (under 1.1 : 1; under 1.2 : 1 below 200 px, where the help line is left out) its bottom stays
     20 design px above the card's edge (the box grows with the window, or gives up to 19 design px below the
     signature, never under 150 tall);
   - in a shorter window (1.1 to 1.165 : 1; 1.2 to 1.32 : 1 below 200 px) it runs 12 design px past the card's edge,
     so the edge crosses the empty box under the signature (never the signature, never the box's own bottom line). */
@media (max-width: 479px) {
  @container ((min-height: 200px) and (aspect-ratio < 1.165)) or ((min-height: 160px) and (max-height: 199.98px) and (aspect-ratio < 1.32)) {
    .wgbv-visual[data-wgbv="consent"]:is(.point *) .wgbv-stage { top: calc(var(--wgbv-p) * -8); height: calc(100cqh + var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="consent"]:is(.point *) .wgbv-phone { height: calc(100cqh + var(--wgbv-p) * 22); }
  }
  @container (min-height: 200px) and (aspect-ratio < 1.1) {
    .wgbv-visual[data-wgbv="consent"]:is(.point *) .wgbv-pad { height: calc(100cqh - var(--wgbv-p) * 239.6); }
  }
  @container (min-height: 200px) and (aspect-ratio >= 1.1) and (aspect-ratio < 1.165) {
    .wgbv-visual[data-wgbv="consent"]:is(.point *) .wgbv-pad { height: calc(100cqh - var(--wgbv-p) * 207.6); }
  }
  @container (min-height: 160px) and (max-height: 199.98px) and (aspect-ratio < 1.2) {
    .wgbv-visual[data-wgbv="consent"]:is(.point *) .wgbv-pad { height: calc(100cqh - var(--wgbv-p) * 192.6); }
  }
  @container (min-height: 160px) and (max-height: 199.98px) and (aspect-ratio >= 1.2) and (aspect-ratio < 1.32) {
    .wgbv-visual[data-wgbv="consent"]:is(.point *) .wgbv-pad { height: calc(100cqh - var(--wgbv-p) * 160.6); }
  }
}

/* ---- 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); }
}
/* Phone layouts on the research cards (v2.6, .point only, up to 479 px; the care cards and /platform keep theirs).
   The collage keeps its 2 columns (362 design px, as in the narrow layout) but takes the height the area under the
   copy offers, so it fills the band instead of floating in it, and is never smaller than before:
   - area 1.45 to 2 : 1 (the small cards: /clinical-interventions, /movement-studies, /population-health-cohort-study,
     /wearable-device-studies): the 2 x 2 collage with phone-sized tiles (the signature, the reminder list and the
     check-in 88 design px tall, the guidance button 44), 362 x 200;
   - area 1.1 to 1.45 : 1 (/alternatives "Engagement that keeps participants in the study"): three rows, the reminder
     list on top, the signature and the check-in, then the guidance button, both full width, 362 x 270. Its margin
     above (20) is larger than below (4): the card's own padding under the area (24 px) balances it. */
@media (max-width: 479px) {
  @container (aspect-ratio >= 1.45) and (aspect-ratio < 2) {
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-stage { --wgbv-w: 362; --wgbv-h: 200; }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-sig { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 88); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 60.4); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 16.9); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-types { left: calc(var(--wgbv-p) * 170); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 88); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-type { height: calc(var(--wgbv-p) * 40); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-cta { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 128); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 44); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-checkin { left: calc(var(--wgbv-p) * 170); top: calc(var(--wgbv-p) * 106); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 88); }
  }
  @container (aspect-ratio >= 1.1) and (aspect-ratio < 1.45) {
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-stage { --wgbv-w: 362; --wgbv-h: 270; }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-types { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 20); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 88); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-type { height: calc(var(--wgbv-p) * 40); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-sig { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 120); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 90); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 61.4); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 17.9); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-checkin { left: calc(var(--wgbv-p) * 172); top: calc(var(--wgbv-p) * 120); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 90); }
    .point .wgbv-visual[data-wgbv="engagement"] .wgbv-cta { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 222); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 44); justify-content: center; padding-left: 0; }
  }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only; the care cards and /platform keep theirs). The
   412 x 192 collage left 44 to 92 px empty above and below it from 768 px and up to 114 px at 767 px. There it takes
   the phone's 362 design px wide layouts in more heights. Each is used where it is not limited by the area's height,
   or where that limit still leaves it at least as large as the 412 px collage (up to 412 / height : 1, 362 / height
   under 300 px wide), or where the text cap stops the scale anyway (from 1.333 x its height in px); the tallest one
   that qualifies fills the area:
   - 2 x 2 (the phone's 362 x 200; tiles 88 design px, the guidance button 44), and the same 220, 236 and 260 tall
     (tiles 96, 104, 116; the reminder rows 44, 48, 54; the button 48, 52, 58);
   - three rows (the reminder list, then the signature and the check-in, then the button across), 270 tall (the
     phone's, with 6 design px above and below like the others) and 290 tall (list 96, tiles 100, button 50).
   A wider area keeps the 412 x 192 collage, with the window cut to its tiles (design y 6 to 174), so it is drawn larger
   or fills more of the height. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio > 2.06) and (max-height: 266.6px) {
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-stage { --wgbv-cy: 6; --wgbv-ch: 168; }
  }
  @container (aspect-ratio >= 1.1) and (((min-width: 300px) and (aspect-ratio <= 2.06)) or (aspect-ratio <= 1.81) or (min-height: 266.7px)) {
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-stage { --wgbv-w: 362; --wgbv-h: 200; }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 88); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 60.4); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 16.9); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-types { left: calc(var(--wgbv-p) * 170); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 88); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-type { height: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-cta { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 128); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 44); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-checkin { left: calc(var(--wgbv-p) * 170); top: calc(var(--wgbv-p) * 106); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 88); }
  }
  @container (aspect-ratio >= 1.1) and (((min-width: 300px) and (aspect-ratio <= 1.873)) or (aspect-ratio <= 1.645) or (min-height: 293.3px)) {
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-stage { --wgbv-w: 362; --wgbv-h: 220; }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 96); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 66.4); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 19.9); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-types { left: calc(var(--wgbv-p) * 170); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 96); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-type { height: calc(var(--wgbv-p) * 44); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-cta { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 140); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 48); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-checkin { left: calc(var(--wgbv-p) * 170); top: calc(var(--wgbv-p) * 118); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 96); }
  }
  @container (aspect-ratio >= 1.1) and (((min-width: 300px) and (aspect-ratio <= 1.746)) or (aspect-ratio <= 1.534) or (min-height: 314.7px)) {
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-stage { --wgbv-w: 362; --wgbv-h: 236; }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 104); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 72.4); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 22.9); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-types { left: calc(var(--wgbv-p) * 170); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 104); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-type { height: calc(var(--wgbv-p) * 48); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-cta { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 150); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 52); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-checkin { left: calc(var(--wgbv-p) * 170); top: calc(var(--wgbv-p) * 126); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 104); }
  }
  @container (aspect-ratio >= 1.1) and (((min-width: 300px) and (aspect-ratio <= 1.585)) or (aspect-ratio <= 1.392) or (min-height: 346.7px)) {
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-stage { --wgbv-w: 362; --wgbv-h: 260; }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 116); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 80.4); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 26.9); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-types { left: calc(var(--wgbv-p) * 170); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 116); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-type { height: calc(var(--wgbv-p) * 54); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-cta { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 162); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 58); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-checkin { left: calc(var(--wgbv-p) * 170); top: calc(var(--wgbv-p) * 138); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 116); }
  }
  @container (aspect-ratio >= 1.1) and (((min-width: 300px) and (aspect-ratio <= 1.526)) or (aspect-ratio <= 1.341) or (min-height: 360.0px)) {
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-stage { --wgbv-w: 362; --wgbv-h: 270; }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-types { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 88); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-type { height: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 112); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 90); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 61.4); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 17.9); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-checkin { left: calc(var(--wgbv-p) * 172); top: calc(var(--wgbv-p) * 112); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 90); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-cta { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 220); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 44); justify-content: center; padding-left: 0; }
  }
  @container (aspect-ratio >= 1.1) and (((min-width: 300px) and (aspect-ratio <= 1.421)) or (aspect-ratio <= 1.248) or (min-height: 386.7px)) {
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-stage { --wgbv-w: 362; --wgbv-h: 290; }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-types { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 96); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-type { height: calc(var(--wgbv-p) * 44); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 118); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 100); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 66.4); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 20.9); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-checkin { left: calc(var(--wgbv-p) * 172); top: calc(var(--wgbv-p) * 118); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 100); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-cta { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 234); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 50); justify-content: center; padding-left: 0; }
  }
}
/* /alternatives (v2.8, 480 to 767 px): that page's body text is 15 px, so the text cap is 1.25 there, not 1.333 as
   the heights above assume, and its 354 px area at 600 to 767 px took the 260 or 270 design px layout and left 38 to
   46 px. On that page's cards (wga-hub-wins), in an area 351.25 to 362.4 px tall, the three rows are 281 design px
   tall (list 92, tiles 96, the button 48 to 3 design px above the bottom), at the text cap. */
@media (min-width: 480px) and (max-width: 767px) {
  @container (aspect-ratio >= 1.1) and (min-height: 351.25px) and (max-height: 362.4px) {
    .wgbv-visual[data-wgbv="engagement"]:is(.wga-hub-wins *) .wgbv-stage { --wgbv-w: 362; --wgbv-h: 281; }
    .wgbv-visual[data-wgbv="engagement"]:is(.wga-hub-wins *) .wgbv-types { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 92); }
    .wgbv-visual[data-wgbv="engagement"]:is(.wga-hub-wins *) .wgbv-type { height: calc(var(--wgbv-p) * 42); }
    .wgbv-visual[data-wgbv="engagement"]:is(.wga-hub-wins *) .wgbv-sig { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 116); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 96); }
    .wgbv-visual[data-wgbv="engagement"]:is(.wga-hub-wins *) .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 64.4); }
    .wgbv-visual[data-wgbv="engagement"]:is(.wga-hub-wins *) .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 19.7); }
    .wgbv-visual[data-wgbv="engagement"]:is(.wga-hub-wins *) .wgbv-checkin { left: calc(var(--wgbv-p) * 172); top: calc(var(--wgbv-p) * 116); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 96); }
    .wgbv-visual[data-wgbv="engagement"]:is(.wga-hub-wins *) .wgbv-cta { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 230); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 48); justify-content: center; padding-left: 0; }
  }
}
/* Wider phone areas (v2.8, research cards from 362 px wide up to 479 px only; /real-world-evidence-rwe "Keep
   Participants Engaged" at 440 to 479 px). Just over 1.1 : 1, the phone's three-row layout (362 x 270) is sized by the
   area's width and left 39 to 66 px empty above and below. Up to 362 / height : 1, so the area's width still sets the
   scale, the three rows (the reminder list, the signature and the check-in, the guidance button) are taller, 6 design
   px from the top and bottom: 362 x 298 (list 99, tiles 103, button 52) up to 1.2148 : 1, 362 x 309 (103, 107, 53) up
   to 1.1715 : 1 and 362 x 320 (106, 111, 55) up to 1.131 : 1. */
@media (max-width: 479px) {
  @container (min-width: 362px) and (aspect-ratio >= 1.1) and (aspect-ratio <= 1.2148) {
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-stage { --wgbv-w: 362; --wgbv-h: 298; }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-types { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 99); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-type { height: calc(var(--wgbv-p) * 45.5); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 121); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 103); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 67.9); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 21.8); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-checkin { left: calc(var(--wgbv-p) * 172); top: calc(var(--wgbv-p) * 121); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 103); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-cta { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 240); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 52); justify-content: center; padding-left: 0; }
  }
  @container (min-width: 362px) and (aspect-ratio >= 1.1) and (aspect-ratio <= 1.1715) {
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-stage { --wgbv-w: 362; --wgbv-h: 309; }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-types { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 103); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-type { height: calc(var(--wgbv-p) * 47.5); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 126); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 107); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 69.9); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 23); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-checkin { left: calc(var(--wgbv-p) * 172); top: calc(var(--wgbv-p) * 126); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 107); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-cta { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 250); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 53); justify-content: center; padding-left: 0; }
  }
  @container (min-width: 362px) and (aspect-ratio >= 1.1) and (aspect-ratio <= 1.131) {
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-stage { --wgbv-w: 362; --wgbv-h: 320; }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-types { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 106); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-type { height: calc(var(--wgbv-p) * 49); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 130); width: calc(var(--wgbv-p) * 150); height: calc(var(--wgbv-p) * 111); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-sig .wgbv-line { top: calc(var(--wgbv-p) * 71.9); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-ink-tile { left: calc(var(--wgbv-p) * 23); top: calc(var(--wgbv-p) * 24.2); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-checkin { left: calc(var(--wgbv-p) * 172); top: calc(var(--wgbv-p) * 130); width: calc(var(--wgbv-p) * 180); height: calc(var(--wgbv-p) * 111); }
    .wgbv-visual[data-wgbv="engagement"]:is(.point *) .wgbv-cta { left: calc(var(--wgbv-p) * 10); top: calc(var(--wgbv-p) * 259); width: calc(var(--wgbv-p) * 342); height: calc(var(--wgbv-p) * 55); justify-content: center; padding-left: 0; }
  }
}

/* ---- 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; }
/* Tall layout (v2.6; research cards on phones up to 479 px only): in an area less than 1.1 times as wide as it is tall
   ("Real-time Analytics", 0.8 to 0.87 : 1) the dashboard is portrait, 400 x 500 design px: the stat cards are 175 design px tall, with
   their icon in a tinted square at the top and the label over the number at the bottom. The numbers are 20 instead of
   26 design px, so fit() lets the design pixel grow to 1.1 x body / 20 (0.77 px on 14 px copy) and the whole
   dashboard is drawn larger. */
@media (max-width: 479px) {
  @container (aspect-ratio < 1.1) {
    .point .wgbv-visual[data-wgbv="analytics"] .wgbv-stage { --wgbv-w: 400; --wgbv-h: 500; }
    .point .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); height: calc(var(--wgbv-p) * 470); }
    .point .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi { left: calc(var(--wgbv-p) * 30); right: calc(var(--wgbv-p) * 30); height: calc(var(--wgbv-p) * 175.5); display: flex; flex-direction: column;
      padding: calc(var(--wgbv-p) * 22) calc(var(--wgbv-p) * 22) calc(var(--wgbv-p) * 20) calc(var(--wgbv-p) * 24); }
    .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) * 294.5); }
    .point .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi-label { flex: 1; flex-direction: column; align-items: flex-start; justify-content: space-between; font-size: calc(var(--wgbv-p) * 14.5); }
    .point .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi-label .wgbv-i { width: calc(var(--wgbv-p) * 44); height: calc(var(--wgbv-p) * 44); padding: calc(var(--wgbv-p) * 11); border-radius: calc(var(--wgbv-p) * 10); background: #EEF0FA; color: #233190; }
    .point .wgbv-visual[data-wgbv="analytics"] .wgbv-kpi-row { margin-top: calc(var(--wgbv-p) * 4); }
    .point .wgbv-visual[data-wgbv="analytics"] .wgbv-num { font-size: calc(var(--wgbv-p) * 20); }
  }
}
/* Tablet layout (v2.7, research cards from 480 to 991 px only). The navy tile hugged the dashboard and left 41 to 46 px
   empty above and below it from 768 px, and up to 148 px at 767 px (the area grows with the card there, the dashboard
   stops at the text cap). There the navy tile fills the visual's whole area, as the card's original image did, and the
   dashboard keeps its scale in its middle (its parts keep their design-px size and move by the same offset, so the motion is unchanged). Up to 767 px
   the numbers are 20 instead of 26 design px, as in the phone layout, so fit() lets the design pixel grow to
   1.1 x body / 20 and the dashboard is drawn larger. */
@media (min-width: 480px) and (max-width: 991px) {
  .wgbv-visual[data-wgbv="analytics"]:is(.point *) .wgbv-panel { inset: calc((var(--wgbv-p) * var(--wgbv-h) - 100cqh) / 2) calc((var(--wgbv-p) * var(--wgbv-w) - 100cqw) / 2); }
  .wgbv-visual[data-wgbv="analytics"]:is(.point *) .wgbv-dash { right: auto; width: calc(var(--wgbv-p) * 500); }
  .wgbv-visual[data-wgbv="analytics"]:is(.point *) .wgbv-kpi { right: auto; width: calc(var(--wgbv-p) * 470); }
  .wgbv-visual[data-wgbv="analytics"]:is(.point *) .wgbv-panel > * { translate: calc((100cqw - var(--wgbv-p) * var(--wgbv-w)) / 2) calc((100cqh - var(--wgbv-p) * var(--wgbv-h)) / 2); }
}
@media (min-width: 480px) and (max-width: 767px) {
  .wgbv-visual[data-wgbv="analytics"]:is(.point *) .wgbv-num { font-size: calc(var(--wgbv-p) * 20); }
}
/* Wider phone areas (v2.8, research cards from 362 px wide up to 479 px only; "Real-time Analytics" on /citizen-science
   and /employee-wellbeing-program at 440 to 479 px). The portrait dashboard stops at the text cap (0.77), so the navy
   tile hugged it and left 33 to 51 px empty above and below. As on tablets, the navy tile fills the visual's whole area
   and the dashboard keeps its scale in its middle (its parts move by the same offset, so the motion is unchanged). */
@media (max-width: 479px) {
  @container (min-width: 362px) and (aspect-ratio < 1.1) {
    .wgbv-visual[data-wgbv="analytics"]:is(.point *) .wgbv-panel { inset: calc((var(--wgbv-p) * var(--wgbv-h) - 100cqh) / 2) calc((var(--wgbv-p) * var(--wgbv-w) - 100cqw) / 2); }
    .wgbv-visual[data-wgbv="analytics"]:is(.point *) .wgbv-dash { right: auto; width: calc(var(--wgbv-p) * 370); }
    .wgbv-visual[data-wgbv="analytics"]:is(.point *) .wgbv-kpi { right: auto; width: calc(var(--wgbv-p) * 340); }
    .wgbv-visual[data-wgbv="analytics"]:is(.point *) .wgbv-panel > * { translate: calc((100cqw - var(--wgbv-p) * var(--wgbv-w)) / 2) calc((100cqh - var(--wgbv-p) * var(--wgbv-h)) / 2); }
  }
}

/* ---- 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); }
}
/* Offset stack (v2.6; research cards on phones up to 479 px only): in an area 300 px wide or more and less than 2.4
   times as wide as it is tall (/patient-engagement-software "Smart appointment reminders" from 375 px) the
   notification sits above the appointment card as in the narrow layout, the card offset to the right: 400 x 194
   design px instead of 466 x 163. */
@media (max-width: 479px) {
  @container (min-width: 300px) and (aspect-ratio < 2.4) {
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-stage { --wgbv-w: 400; --wgbv-h: 194; }
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-apt-note { left: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-apt-card { left: calc(var(--wgbv-p) * 78); top: calc(var(--wgbv-p) * 62); }
  }
}
/* Tablet layout (v2.7, research cards from 480 to 991 px only): in an area up to 2.03 times as wide as it is tall
   (or from 261 px tall; "Smart appointment reminders" from 768 px, where the side-by-side reminder left 83 to 91 px
   empty above and below) the notification sits above the appointment card as in the narrow layout, and the card is
   taller (150 design px, its lines a little further apart): 330 x 230 design px. In a wider area the side-by-side
   reminder's window is cut to design y 4 to 156 (its tiles; it had 6 px above and 14 below), so it fills the height
   and is drawn up to 7 % larger. */
@media (min-width: 480px) and (max-width: 991px) {
  .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-stage { --wgbv-cy: 4; --wgbv-ch: 152; }
  @container (min-width: 300px) and ((aspect-ratio <= 2.03) or (min-height: 261px)) {
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-stage { --wgbv-w: 330; --wgbv-h: 230; --wgbv-cy: 0; --wgbv-ch: 230; }
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-apt-note { left: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-apt-card { left: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 70); height: calc(var(--wgbv-p) * 150); }
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-apt-title { top: calc(var(--wgbv-p) * 58); }
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-apt-meta { top: calc(var(--wgbv-p) * 84); }
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-apt-meta + .wgbv-apt-meta { top: calc(var(--wgbv-p) * 104); }
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-apt-ok { top: calc(var(--wgbv-p) * 76); }
  }
}
/* v2.8 (research cards from 480 to 767 px): in an area 2.03 to 2.7 times as wide as it is tall (/patient-engagement-
   software at 480 px, where the side-by-side reminder is set by the area's width and left 32 to 40 px) the window is
   cut to the tiles' width (design x 14 to 452) and the appointment card sits lower under the notification (top 46
   instead of 23, so they still overlap): the window is design y 4 to 174, a little taller than the area's shape, so
   the reminder is drawn about 6 % larger and fills the area's height. */
@media (min-width: 480px) and (max-width: 767px) {
  @container (min-width: 300px) and (aspect-ratio > 2.03) and (aspect-ratio <= 2.7) and (max-height: 260.9px) {
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-stage { --wgbv-h: 178; --wgbv-cx: 14; --wgbv-cw: 438; --wgbv-cy: 4; --wgbv-ch: 170; }
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-apt-card { top: calc(var(--wgbv-p) * 46); }
  }
}
/* v2.8 (research cards from 362 px wide up to 479 px): the same window for an area 2.4 to 2.7 times as wide as it is
   tall (/patient-engagement-software at 460 to 479 px, where the side-by-side reminder is set by the area's width and
   left 37 to 40 px under it): design x 14 to 452 and y 4 to 174, the appointment card at top 46, so the reminder is
   drawn about 6 % larger and fills the area's height. */
@media (max-width: 479px) {
  @container (min-width: 362px) and (aspect-ratio >= 2.4) and (aspect-ratio <= 2.7) and (max-height: 260.9px) {
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-stage { --wgbv-h: 178; --wgbv-cx: 14; --wgbv-cw: 438; --wgbv-cy: 4; --wgbv-ch: 170; }
    .wgbv-visual[data-wgbv="appointment-reminder"]:is(.point *) .wgbv-apt-card { top: calc(var(--wgbv-p) * 46); }
  }
}

/* ---- 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); }
}
/* Tall phone layouts (v2.6, research and product cards up to 479 px only). The three engagements left 89 to 98 px
   empty above and below in the phone card's tall area, so there the builder lists six: three more engagements of the
   same kind (the labels of the reminders visuals) under the first three; the count is left out (it says 3).
   - an area under 0.97 : 1 from 300 px wide: the rows as in the default layout, 360 x 370 design px, so they keep their
     scale (the area's width or the text cap still sets it);
   - a narrow area (under 300 px) under 0.93 : 1: the narrow layout with each row's detail line back (38 design px rows,
     43 apart): 300 x 320.
   Rows 4 to 6 are hidden everywhere else. */
.wgbv-visual[data-wgbv="automations"] .wgbv-au-r4, .wgbv-visual[data-wgbv="automations"] .wgbv-au-r5, .wgbv-visual[data-wgbv="automations"] .wgbv-au-r6 { display: none; }
@media (max-width: 479px) {
  @container (min-width: 300px) and (aspect-ratio < 0.97) {
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-stage { --wgbv-h: 370; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-panel { height: calc(var(--wgbv-p) * 356); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-count { display: none; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r4 { display: flex; top: calc(var(--wgbv-p) * 212); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r5 { display: flex; top: calc(var(--wgbv-p) * 260); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r6 { display: flex; top: calc(var(--wgbv-p) * 308); }
  }
  @container (max-width: 299px) and (aspect-ratio < 0.93) {
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-stage { --wgbv-h: 320; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-panel { height: calc(var(--wgbv-p) * 311); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 38); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-row-detail { display: block; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r2 { top: calc(var(--wgbv-p) * 95); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r3 { top: calc(var(--wgbv-p) * 138); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r4 { display: flex; top: calc(var(--wgbv-p) * 181); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r5 { display: flex; top: calc(var(--wgbv-p) * 224); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r6 { display: flex; top: calc(var(--wgbv-p) * 267); }
  }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only; /patient-engagement-software "Give your staff time
   back"). The builder's three engagements left 47 to 53 px empty above and below from 768 px and up to 114 px at
   767 px. There it lists four, five or six (rows 4 to 6 as on phones; the count, which says three, is left out), in
   the tallest panel that is not limited by the area's height (or, where the text cap stops the scale, from 1.1355 x
   its height in px): three rows 48 tall and 56 apart, 360 x 250, up to 1.44 : 1 or from 283.9 px tall (540 px);
   four rows, 360 x 274 design px, up to 1.314 : 1 or from 311.1 px tall; five, 360 x 322, up to
   1.118 : 1 or from 365.6 px; five spaced 54 apart, 360 x 344, up to 1.047 : 1 or from 390.6 px; six, 360 x 370, up to
   0.973 : 1 or from 420.1 px. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (min-width: 300px) and ((aspect-ratio <= 1.44) or (min-height: 283.9px)) {
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-stage { --wgbv-h: 250; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-panel { height: calc(var(--wgbv-p) * 236); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 48); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r1 { top: calc(var(--wgbv-p) * 70); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r2 { top: calc(var(--wgbv-p) * 126); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r3 { top: calc(var(--wgbv-p) * 182); }
  }
  @container (min-width: 300px) and ((aspect-ratio <= 1.314) or (min-height: 311.1px)) {
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-stage { --wgbv-h: 274; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 42); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r1 { top: calc(var(--wgbv-p) * 68); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r2 { top: calc(var(--wgbv-p) * 116); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r3 { top: calc(var(--wgbv-p) * 164); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-panel { height: calc(var(--wgbv-p) * 260); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-count { display: none; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r4 { display: flex; top: calc(var(--wgbv-p) * 212); }
  }
  @container (min-width: 300px) and ((aspect-ratio <= 1.118) or (min-height: 365.6px)) {
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-stage { --wgbv-h: 322; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-panel { height: calc(var(--wgbv-p) * 308); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-count { display: none; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r4 { display: flex; top: calc(var(--wgbv-p) * 212); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r5 { display: flex; top: calc(var(--wgbv-p) * 260); }
  }
  @container (min-width: 300px) and ((aspect-ratio <= 1.047) or (min-height: 390.6px)) {
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-stage { --wgbv-h: 344; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-panel { height: calc(var(--wgbv-p) * 330); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-count { display: none; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r2 { display: flex; top: calc(var(--wgbv-p) * 122); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r3 { display: flex; top: calc(var(--wgbv-p) * 176); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r4 { display: flex; top: calc(var(--wgbv-p) * 230); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r5 { display: flex; top: calc(var(--wgbv-p) * 284); }
  }
  @container (min-width: 300px) and ((aspect-ratio <= 0.973) or (min-height: 420.1px)) {
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-stage { --wgbv-h: 370; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-panel { height: calc(var(--wgbv-p) * 356); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-count { display: none; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r2 { top: calc(var(--wgbv-p) * 116); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r3 { top: calc(var(--wgbv-p) * 164); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r4 { display: flex; top: calc(var(--wgbv-p) * 212); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r5 { display: flex; top: calc(var(--wgbv-p) * 260); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r6 { display: flex; top: calc(var(--wgbv-p) * 308); }
  }
}
/* Taller phone areas (v2.8, research and product cards from 300 px wide up to 479 px only; /patient-engagement-software
   "Give your staff time back" at 460 to 479 px). The area there is just wider than 0.97 : 1, so the builder fell back
   to its three engagements and left 108 to 118 px empty above and below. From the height at which the six-row panel
   keeps the phone text cap's scale (0.9935 x its height in px), it lists the six engagements of the tall phone layout,
   the rows a little taller and further apart: 46 tall and 53 apart, 360 x 399 design px, from 396.4 px tall; 47 tall
   and 56 apart, 360 x 415, from 412.3 px. */
@media (max-width: 479px) {
  @container (min-width: 300px) and (min-height: 396.4px) {
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-stage { --wgbv-h: 399; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-panel { height: calc(var(--wgbv-p) * 385); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-count { display: none; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 46); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r1 { top: calc(var(--wgbv-p) * 68); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r2 { top: calc(var(--wgbv-p) * 121); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r3 { top: calc(var(--wgbv-p) * 174); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r4 { display: flex; top: calc(var(--wgbv-p) * 227); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r5 { display: flex; top: calc(var(--wgbv-p) * 280); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r6 { display: flex; top: calc(var(--wgbv-p) * 333); }
  }
  @container (min-width: 300px) and (min-height: 412.3px) {
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-stage { --wgbv-h: 415; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-panel { height: calc(var(--wgbv-p) * 401); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-count { display: none; }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 47); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r1 { top: calc(var(--wgbv-p) * 68); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r2 { top: calc(var(--wgbv-p) * 124); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r3 { top: calc(var(--wgbv-p) * 180); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r4 { display: flex; top: calc(var(--wgbv-p) * 236); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r5 { display: flex; top: calc(var(--wgbv-p) * 292); }
    .wgbv-visual[data-wgbv="automations"]:is(.point *) .wgbv-au-r6 { display: flex; top: calc(var(--wgbv-p) * 348); }
  }
}

/* ---- 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); }
}

/* Tablet layout (v2.7, research cards from 480 to 991 px only). The phone bleeds off the card's bottom edge, but its
   stage sat at the area's bottom (48 px under the area's top at 768 px, 25 at 480 px) and the phone 14 design px down
   in it, so 33 to 82 px stayed empty between the copy and the phone. Here the stage starts 8 design px above the area
   (the phone 6 under the area's top) and runs to the card's bottom edge, the phone with it, at the same scale as
   before. In the square layout (768 to 991 px) the welcome photo and the rows under it grow with the area's spare
   height (the visible window over 262 design px, 80 % of it; the colour card moves down by 40 %), so the screen is
   not left empty under its last row. */
@media (min-width: 480px) and (max-width: 991px) {
  .wgbv-visual[data-wgbv="brand-theme"]:is(.point *) .wgbv-stage { top: calc(var(--wgbv-p) * -8); height: calc(100cqh + var(--wgbv-p) * 8); }
  .wgbv-visual[data-wgbv="brand-theme"]:is(.point *) .wgbv-bt-phone { height: calc(100cqh + var(--wgbv-p) * 24); }
  @container (aspect-ratio < 1.4) {
    .wgbv-visual[data-wgbv="brand-theme"]:is(.point *) .wgbv-bt-pic { height: calc(var(--wgbv-p) * 66 + max(0px, 100cqh - var(--wgbv-p) * 262) * .8); }
    .wgbv-visual[data-wgbv="brand-theme"]:is(.point *) .wgbv-bt-cap { top: calc(var(--wgbv-p) * 152 + max(0px, 100cqh - var(--wgbv-p) * 262) * .8); }
    .wgbv-visual[data-wgbv="brand-theme"]:is(.point *) .wgbv-bt-task { top: calc(var(--wgbv-p) * 172 + max(0px, 100cqh - var(--wgbv-p) * 262) * .8); }
    .wgbv-visual[data-wgbv="brand-theme"]:is(.point *) .wgbv-bt-skel { top: calc(var(--wgbv-p) * 214 + max(0px, 100cqh - var(--wgbv-p) * 262) * .8); }
    .wgbv-visual[data-wgbv="brand-theme"]:is(.point *) .wgbv-bt-kit { top: calc(var(--wgbv-p) * 84 + max(0px, 100cqh - var(--wgbv-p) * 262) * .4); }
  }
}
/* Wider phone areas (v2.8, cards from 362 px wide up to 479 px only; /platform/white-labeling "Total branding control"
   at 440 to 479 px). From 1.4 : 1 the wide layout sat at the area's bottom, sized by the area's width, and left 51 to
   73 px empty above the phone. Up to 1.587 : 1, where the wide layout's scale (the area's width over 400) is still
   below the square layout's (its height over 280 x 0.9), the square layout of the phone bands up to 430 px is used,
   so the phone is larger and starts where it does at 430 px. */
@media (max-width: 479px) {
  @container (min-width: 362px) and (aspect-ratio >= 1.4) and (aspect-ratio < 1.587) {
    .wgbv-visual[data-wgbv="brand-theme"]:is(.point *) .wgbv-stage { --wgbv-w: 310; --wgbv-h: 280; }
    .wgbv-visual[data-wgbv="brand-theme"]:is(.point *) .wgbv-bt-phone { left: calc(var(--wgbv-p) * 128); }
    .wgbv-visual[data-wgbv="brand-theme"]:is(.point *) .wgbv-bt-kit { left: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 84); }
    .wgbv-visual[data-wgbv="brand-theme"]:is(.point *) .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); }
}

/* Tablet layouts (v2.7, research cards from 480 to 991 px only). The small layout (300 x 163) floated in areas taller
   than it (/telehealth and /prems-proms from 767 px: 36 to 64 px above and below). In the same areas a taller small
   layout: the panel, its rule and the three forms (36 to 48 design px tall, 7 to 10 apart; from 40 the icon, title and
   ON pill a little larger) fill 190, 200, 215, 230 or 250 design px; from 215 the "3 engagements" count is back under
   the title. Each is used up to 300 / H : 1 (the scale set by the width, as before) or from 1.1733 x H px tall (the
   scale capped by the title, as before), so the scale never drops. In the full layout in an area 300 px tall or more
   (/population-health-cohort-study from 667 px: 35 to 48 px) the title is 18 instead of 22 design px, so the scale's
   cap rises from .8 to .98 and the panel fills the area's height. */
@media (min-width: 480px) and (max-width: 991px) {
  @container ((max-height: 269px) or (max-width: 379px)) and ((aspect-ratio <= 1.579) or (min-height: 222.9px)) {
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-stage { --wgbv-h: 190; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb { height: calc(var(--wgbv-p) * 174); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-rule { top: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 36); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-1 { top: calc(var(--wgbv-p) * 52); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-1 { top: calc(var(--wgbv-p) * 64.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-2 { top: calc(var(--wgbv-p) * 95); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-2 { top: calc(var(--wgbv-p) * 107.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-3 { top: calc(var(--wgbv-p) * 138); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-3 { top: calc(var(--wgbv-p) * 150.6); }
  }
  @container ((max-height: 269px) or (max-width: 379px)) and ((aspect-ratio <= 1.500) or (min-height: 234.7px)) {
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-stage { --wgbv-h: 200; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb { height: calc(var(--wgbv-p) * 184); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-rule { top: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 38); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-1 { top: calc(var(--wgbv-p) * 52); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-1 { top: calc(var(--wgbv-p) * 65.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-2 { top: calc(var(--wgbv-p) * 99); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-2 { top: calc(var(--wgbv-p) * 112.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-3 { top: calc(var(--wgbv-p) * 146); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-3 { top: calc(var(--wgbv-p) * 159.6); }
  }
  @container ((max-height: 269px) or (max-width: 379px)) and ((aspect-ratio <= 1.395) or (min-height: 252.3px)) {
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-stage { --wgbv-h: 215; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb { height: calc(var(--wgbv-p) * 199); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-rule { top: calc(var(--wgbv-p) * 52); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-count { display: block; left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 31); font-size: calc(var(--wgbv-p) * 10.5); line-height: 1.2; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-add { top: calc(var(--wgbv-p) * 15); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-1 { top: calc(var(--wgbv-p) * 64); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-1 { top: calc(var(--wgbv-p) * 78.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-2 { top: calc(var(--wgbv-p) * 111.5); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-2 { top: calc(var(--wgbv-p) * 126.1); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-3 { top: calc(var(--wgbv-p) * 159); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-3 { top: calc(var(--wgbv-p) * 173.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-iconbox { width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); border-radius: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-iconbox .wgbv-i { width: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-title { font-size: calc(var(--wgbv-p) * 12); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-onoff { width: calc(var(--wgbv-p) * 34); height: calc(var(--wgbv-p) * 18); font-size: calc(var(--wgbv-p) * 9.5); }
  }
  @container ((max-height: 269px) or (max-width: 379px)) and ((aspect-ratio <= 1.304) or (min-height: 269.9px)) {
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-stage { --wgbv-h: 230; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb { height: calc(var(--wgbv-p) * 214); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-rule { top: calc(var(--wgbv-p) * 54); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-count { display: block; left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 31); font-size: calc(var(--wgbv-p) * 10.5); line-height: 1.2; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-add { top: calc(var(--wgbv-p) * 15); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 44); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-1 { top: calc(var(--wgbv-p) * 66); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-1 { top: calc(var(--wgbv-p) * 82.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-2 { top: calc(var(--wgbv-p) * 118); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-2 { top: calc(var(--wgbv-p) * 134.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-3 { top: calc(var(--wgbv-p) * 170); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-3 { top: calc(var(--wgbv-p) * 186.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-iconbox { width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); border-radius: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-iconbox .wgbv-i { width: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-title { font-size: calc(var(--wgbv-p) * 12); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-onoff { width: calc(var(--wgbv-p) * 34); height: calc(var(--wgbv-p) * 18); font-size: calc(var(--wgbv-p) * 9.5); }
  }
  @container ((max-height: 269px) or (max-width: 379px)) and ((aspect-ratio <= 1.200) or (min-height: 293.3px)) {
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-stage { --wgbv-h: 250; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb { height: calc(var(--wgbv-p) * 234); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-rule { top: calc(var(--wgbv-p) * 56); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-count { display: block; left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 31); font-size: calc(var(--wgbv-p) * 10.5); line-height: 1.2; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-add { top: calc(var(--wgbv-p) * 15); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 48); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-1 { top: calc(var(--wgbv-p) * 70); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-1 { top: calc(var(--wgbv-p) * 88.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-2 { top: calc(var(--wgbv-p) * 128); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-2 { top: calc(var(--wgbv-p) * 146.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-3 { top: calc(var(--wgbv-p) * 186); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-3 { top: calc(var(--wgbv-p) * 204.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-iconbox { width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); border-radius: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-iconbox .wgbv-i { width: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-title { font-size: calc(var(--wgbv-p) * 12); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-onoff { width: calc(var(--wgbv-p) * 34); height: calc(var(--wgbv-p) * 18); font-size: calc(var(--wgbv-p) * 9.5); }
  }
  @container (min-width: 380px) and (min-height: 300px) and (aspect-ratio >= 1.53) {
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-title { font-size: calc(var(--wgbv-p) * 18); }
  }
}
/* Taller phone areas (v2.8, research cards up to 479 px only; /population-health-cohort-study "Automated longitudinal
   data collection" at 430 to 479 px, 203 to 228 px tall). The small layout (300 x 163) stopped at the phone text cap
   (1.0267) and left 34 to 48 px empty above and below. The tablet's taller small layouts are used from the heights at
   which the text cap still sets the scale (1.0267 x H px): 190 from 195.1 px, 200 from 205.3 px, 215 from 220.7 px. */
@media (max-width: 479px) {
  @container ((max-height: 269px) or (max-width: 379px)) and (min-height: 195.1px) {
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-stage { --wgbv-h: 190; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb { height: calc(var(--wgbv-p) * 174); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-rule { top: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 36); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-1 { top: calc(var(--wgbv-p) * 52); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-1 { top: calc(var(--wgbv-p) * 64.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-2 { top: calc(var(--wgbv-p) * 95); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-2 { top: calc(var(--wgbv-p) * 107.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-3 { top: calc(var(--wgbv-p) * 138); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-3 { top: calc(var(--wgbv-p) * 150.6); }
  }
  @container ((max-height: 269px) or (max-width: 379px)) and (min-height: 205.3px) {
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-stage { --wgbv-h: 200; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb { height: calc(var(--wgbv-p) * 184); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-rule { top: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 38); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-1 { top: calc(var(--wgbv-p) * 52); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-1 { top: calc(var(--wgbv-p) * 65.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-2 { top: calc(var(--wgbv-p) * 99); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-2 { top: calc(var(--wgbv-p) * 112.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-3 { top: calc(var(--wgbv-p) * 146); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-3 { top: calc(var(--wgbv-p) * 159.6); }
  }
  @container ((max-height: 269px) or (max-width: 379px)) and (min-height: 220.7px) {
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-stage { --wgbv-h: 215; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb { height: calc(var(--wgbv-p) * 199); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-rule { top: calc(var(--wgbv-p) * 52); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-pb-count { display: block; left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 31); font-size: calc(var(--wgbv-p) * 10.5); line-height: 1.2; }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-add { top: calc(var(--wgbv-p) * 15); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row { height: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-1 { top: calc(var(--wgbv-p) * 64); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-1 { top: calc(var(--wgbv-p) * 78.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-2 { top: calc(var(--wgbv-p) * 111.5); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-2 { top: calc(var(--wgbv-p) * 126.1); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-3 { top: calc(var(--wgbv-p) * 159); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-grip-3 { top: calc(var(--wgbv-p) * 173.6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-iconbox { width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); border-radius: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-iconbox .wgbv-i { width: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-row-title { font-size: calc(var(--wgbv-p) * 12); }
    .wgbv-visual[data-wgbv="build"]:is(.point *) .wgbv-onoff { width: calc(var(--wgbv-p) * 34); height: calc(var(--wgbv-p) * 18); font-size: calc(var(--wgbv-p) * 9.5); }
  }
}

/* ---- 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); }
}

/* Tablet layouts (v2.7, research cards from 480 to 991 px only). The wide layout (520 x 212) stopped short of the
   /alternatives area (302 px tall) from 667 px: 34 to 57 px above and below. There it is 237.5, 248 or 270 design px
   tall: the badges 34 to 38 tall and 45.9 to 53 apart (their connectors drawn as much taller about the node's line,
   the stroke thinner by as much so the runs into the badges stay 1.8), the node centred on them, the residency chip
   level with the last badge. Each is used up to 520 / H : 1 (the scale set by the width, as before) or from H x 1.2692
   px tall (the scale capped by the WeGuide name on /alternatives, as before), so the scale never drops there. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (min-width: 300px) and (aspect-ratio >= 1.8) and ((aspect-ratio <= 2.189) or (min-height: 301.4px)) {
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-stage { --wgbv-h: 237.5; }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-node { top: calc(var(--wgbv-p) * 74.75); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-name { top: calc(var(--wgbv-p) * 168.75); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-row { height: calc(var(--wgbv-p) * 34); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r1 { top: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r2 { top: calc(var(--wgbv-p) * 55.875); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r3 { top: calc(var(--wgbv-p) * 101.75); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r4 { top: calc(var(--wgbv-p) * 147.625); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r5 { top: calc(var(--wgbv-p) * 193.5); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-chip { top: calc(var(--wgbv-p) * 197.5); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-lw { transform-origin: 0 calc(var(--wgbv-p) * 80); transform: translateY(calc(var(--wgbv-p) * 12.75)) scale(1, 1.1763); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-lw path { stroke-width: 1.530; }
  }
  @container (min-width: 300px) and (aspect-ratio >= 1.8) and ((aspect-ratio <= 2.097) or (min-height: 314.8px)) {
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-stage { --wgbv-h: 248; }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-node { top: calc(var(--wgbv-p) * 80); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-name { top: calc(var(--wgbv-p) * 174); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-row { height: calc(var(--wgbv-p) * 36); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r1 { top: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r2 { top: calc(var(--wgbv-p) * 58); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r3 { top: calc(var(--wgbv-p) * 106); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r4 { top: calc(var(--wgbv-p) * 154); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r5 { top: calc(var(--wgbv-p) * 202); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-chip { top: calc(var(--wgbv-p) * 208); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-lw { transform-origin: 0 calc(var(--wgbv-p) * 80); transform: translateY(calc(var(--wgbv-p) * 18)) scale(1, 1.2308); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-lw path { stroke-width: 1.462; }
  }
  @container (min-width: 300px) and (aspect-ratio >= 1.8) and ((aspect-ratio <= 1.926)) {
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-stage { --wgbv-h: 270; }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-node { top: calc(var(--wgbv-p) * 91); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-name { top: calc(var(--wgbv-p) * 185); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-row { height: calc(var(--wgbv-p) * 38); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r1 { top: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r2 { top: calc(var(--wgbv-p) * 63); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r3 { top: calc(var(--wgbv-p) * 116); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r4 { top: calc(var(--wgbv-p) * 169); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-r5 { top: calc(var(--wgbv-p) * 222); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-chip { top: calc(var(--wgbv-p) * 230); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-lw { transform-origin: 0 calc(var(--wgbv-p) * 80); transform: translateY(calc(var(--wgbv-p) * 29)) scale(1, 1.3590); }
    .wgbv-visual[data-wgbv="compliance"]:is(.point *) .wgbv-cp-lw path { stroke-width: 1.325; }
  }
}

/* ---- 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); }
}
/* Wide-square layout (v2.6; research cards on phones up to 479 px only): in an area 1.3 to 1.6 times as wide as it is
   tall (/biomarkers "All your data in one place" from 360 px) the square layout's arrangement on 400 x 290 design px:
   the sources side by side on top (116 wide), their lines (the square drawing, 4 / 3 larger, the same 2 design px
   stroke) meet on a dataset as wide as the three. */
@media (max-width: 479px) {
  @container (aspect-ratio >= 1.3) and (aspect-ratio < 1.6) {
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-stage { --wgbv-w: 400; --wgbv-h: 290; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-w { display: none; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-q { display: block; left: calc(var(--wgbv-p) * 73.3); top: calc(var(--wgbv-p) * 87.3); width: calc(var(--wgbv-p) * 250.7); height: calc(var(--wgbv-p) * 42.7); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-q path { stroke-width: 1.5; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .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) * 116); height: calc(var(--wgbv-p) * 80); padding: calc(var(--wgbv-p) * 9) calc(var(--wgbv-p) * 5) 0; text-align: center; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s1 { left: calc(var(--wgbv-p) * 18); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s2 { left: calc(var(--wgbv-p) * 142); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s3 { left: calc(var(--wgbv-p) * 266); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-ic { width: calc(var(--wgbv-p) * 26); height: calc(var(--wgbv-p) * 26); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-lb { font-size: calc(var(--wgbv-p) * 11); line-height: 1.2; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-panel { left: calc(var(--wgbv-p) * 18); top: calc(var(--wgbv-p) * 126); width: calc(var(--wgbv-p) * 364); height: calc(var(--wgbv-p) * 156); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-head { top: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row { height: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(1) { top: calc(var(--wgbv-p) * 70); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(2) { top: calc(var(--wgbv-p) * 86); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(3) { top: calc(var(--wgbv-p) * 102); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(4) { top: calc(var(--wgbv-p) * 118); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(5) { top: calc(var(--wgbv-p) * 134); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row i { height: calc(var(--wgbv-p) * 7); }
  }
}

/* Tablet layouts (v2.7, research cards from 480 to 991 px only). From 768 px (areas 1.3 to 1.517 : 1) the wide layout
   left 51 to 64 px above and below; there the phone's wide-square layout (400 x 290, above) is used, which scales up
   to 1.517 : 1. At 480 px (1.517 to 1.7 : 1) the wide layout is 264 instead of 236 design px tall at the same scale
   (259 over 1.667 : 1, so the scale stays set by the width):
   the sources 84 apart (the lines drawn 1.19 times as tall, their stroke 1.675 so the middle one stays 2) and the
   dataset's rows 32 apart. Over 1.7 : 1 (540 to 767 px) the window leaves out 8 design px above and below the
   dataset (8 to 228), so it is a little larger. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio >= 1.3) and (aspect-ratio < 1.517) {
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-stage { --wgbv-w: 400; --wgbv-h: 290; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-w { display: none; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-q { display: block; left: calc(var(--wgbv-p) * 73.3); top: calc(var(--wgbv-p) * 87.3); width: calc(var(--wgbv-p) * 250.7); height: calc(var(--wgbv-p) * 42.7); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-q path { stroke-width: 1.5; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .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) * 116); height: calc(var(--wgbv-p) * 80); padding: calc(var(--wgbv-p) * 9) calc(var(--wgbv-p) * 5) 0; text-align: center; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s1 { left: calc(var(--wgbv-p) * 18); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s2 { left: calc(var(--wgbv-p) * 142); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s3 { left: calc(var(--wgbv-p) * 266); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-ic { width: calc(var(--wgbv-p) * 26); height: calc(var(--wgbv-p) * 26); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-lb { font-size: calc(var(--wgbv-p) * 11); line-height: 1.2; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-panel { left: calc(var(--wgbv-p) * 18); top: calc(var(--wgbv-p) * 126); width: calc(var(--wgbv-p) * 364); height: calc(var(--wgbv-p) * 156); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-head { top: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row { height: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(1) { top: calc(var(--wgbv-p) * 70); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(2) { top: calc(var(--wgbv-p) * 86); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(3) { top: calc(var(--wgbv-p) * 102); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(4) { top: calc(var(--wgbv-p) * 118); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(5) { top: calc(var(--wgbv-p) * 134); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row i { height: calc(var(--wgbv-p) * 7); }
  }
  @container (aspect-ratio >= 1.517) and (aspect-ratio <= 1.7) {
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-stage { --wgbv-h: 264; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s2 { top: calc(var(--wgbv-p) * 106); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s3 { top: calc(var(--wgbv-p) * 190); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-w { transform-origin: 0 0; transform: scale(1, 1.1944); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-w path { stroke-width: 1.675; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-panel { height: calc(var(--wgbv-p) * 236); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-head { top: calc(var(--wgbv-p) * 44); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(1) { top: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(2) { top: calc(var(--wgbv-p) * 110); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(3) { top: calc(var(--wgbv-p) * 142); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(4) { top: calc(var(--wgbv-p) * 174); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(5) { top: calc(var(--wgbv-p) * 206); }
  }
  @container (aspect-ratio > 1.667) and (aspect-ratio <= 1.7) {
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-stage { --wgbv-h: 259; }
  }
  @container (aspect-ratio > 1.7) {
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-stage { --wgbv-cy: 8; --wgbv-ch: 220; }
  }
}
/* Wider phone areas (v2.8, research cards from 362 px wide up to 479 px only; /biomarkers "All your data in one place"
   at 460 to 479 px). From 1.6 : 1 the 440 x 236 wide layout, sized by the area's width, left 39 to 43 px empty above
   and below. Up to 440 / H : 1, so the width still sets the scale, it is taller: the tablet's 264 (up to 1.6667 : 1)
   and the same spread to 257 (up to 1.712 : 1: the sources 80.4 apart, the lines drawn 1.148 times as tall, their
   stroke 1.742 so the middle one stays 2, and the dataset's rows 31 apart). */
@media (max-width: 479px) {
  @container (min-width: 362px) and (aspect-ratio >= 1.6) and (aspect-ratio <= 1.6667) {
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-stage { --wgbv-h: 264; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s2 { top: calc(var(--wgbv-p) * 106); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s3 { top: calc(var(--wgbv-p) * 190); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-w { transform-origin: 0 0; transform: scale(1, 1.1944); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-w path { stroke-width: 1.675; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-panel { height: calc(var(--wgbv-p) * 236); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-head { top: calc(var(--wgbv-p) * 44); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(1) { top: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(2) { top: calc(var(--wgbv-p) * 110); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(3) { top: calc(var(--wgbv-p) * 142); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(4) { top: calc(var(--wgbv-p) * 174); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(5) { top: calc(var(--wgbv-p) * 206); }
  }
  @container (min-width: 362px) and (aspect-ratio > 1.6667) and (aspect-ratio <= 1.712) {
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-stage { --wgbv-h: 257; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s2 { top: calc(var(--wgbv-p) * 102.6); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-s3 { top: calc(var(--wgbv-p) * 183); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-w { transform-origin: 0 0; transform: scale(1, 1.148); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-w path { stroke-width: 1.742; }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-panel { height: calc(var(--wgbv-p) * 229); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-head { top: calc(var(--wgbv-p) * 43); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(1) { top: calc(var(--wgbv-p) * 76); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(2) { top: calc(var(--wgbv-p) * 107); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(3) { top: calc(var(--wgbv-p) * 138); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(4) { top: calc(var(--wgbv-p) * 169); }
    .wgbv-visual[data-wgbv="data-merge"]:is(.point *) .wgbv-dm-row:nth-of-type(5) { top: calc(var(--wgbv-p) * 200); }
  }
}

/* ---- 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); }
}
/* Tall layouts (v2.6; research cards on phones up to 479 px only), in an area less than 1.6 times as wide as it is tall
   (/biomarkers "Commercialise with ease", 1.34 to 1.42 : 1):
   - 300 px wide or more: the flow runs top to bottom, 380 x 266 design px: the model chip on top, the secure setup
     under it, the hospitals and the pharma partners side by side at the bottom. The routes are the wide drawing turned
     a quarter (its fork stretched to the partners' spacing; the strokes keep their width and dashes).
   - narrower: the narrow layout on 300 x 200, with the partners at the top and bottom edges (routes stretched). */
@media (max-width: 479px) {
  @container (min-width: 300px) and (aspect-ratio < 1.6) {
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-stage { --wgbv-w: 380; --wgbv-h: 266; }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-lines path { vector-effect: non-scaling-stroke; stroke-width: calc(var(--wgbv-p) * 1.5); stroke-dasharray: calc(var(--wgbv-p) * 5) calc(var(--wgbv-p) * 3.5); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-w { transform: translate(calc(var(--wgbv-p) * -3), calc(var(--wgbv-p) * 35)) rotate(90deg) scale(1, 2); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-model { left: calc(var(--wgbv-p) * 134); top: calc(var(--wgbv-p) * 4); height: calc(var(--wgbv-p) * 56); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-sec { left: calc(var(--wgbv-p) * 138); top: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-to { width: calc(var(--wgbv-p) * 150); justify-content: center; white-space: nowrap; }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t1 { left: calc(var(--wgbv-p) * 31); top: calc(var(--wgbv-p) * 210); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t2 { left: calc(var(--wgbv-p) * 199); top: calc(var(--wgbv-p) * 210); }
  }
  @container (max-width: 299px) and (aspect-ratio < 1.6) {
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-stage { --wgbv-h: 200; }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-lines path { vector-effect: non-scaling-stroke; stroke-width: calc(var(--wgbv-p) * 1.5); stroke-dasharray: calc(var(--wgbv-p) * 5) calc(var(--wgbv-p) * 3.5); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-n { top: calc(var(--wgbv-p) * 52); transform: scaleY(1.478); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-model { top: calc(var(--wgbv-p) * 65); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-sec { top: calc(var(--wgbv-p) * 44); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t1 { top: 0; }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t2 { top: calc(var(--wgbv-p) * 136); }
  }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only; /biomarkers "Commercialise with ease"). The flow was
   134 design px tall in a 200 px stage and left 62 to 66 px empty above and below from 768 px, and up to 140 px at
   767 px. There it takes the area's height:
   - the wide flow on 380 x 236 design px: the partners at the top and bottom edges, the secure setup 136 tall (its
     rows a little further apart) and the routes stretched to them (the strokes keep their width and dashes);
   - in an area from 360 px tall (where the text cap stops the scale), the phone's top-to-bottom flow, 380 x 266, and
     from 400 and 430 px tall the same flow stretched to 288 and 300 (the secure setup 123 and 130 tall). */
@media (min-width: 480px) and (max-width: 991px) {
  .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-stage { --wgbv-h: 236; }
  .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-lines path { vector-effect: non-scaling-stroke; stroke-width: calc(var(--wgbv-p) * 1.5); stroke-dasharray: calc(var(--wgbv-p) * 5) calc(var(--wgbv-p) * 3.5); }
  .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-w { transform: translate(0, calc(var(--wgbv-p) * 18)) scale(1, 2.0714); }
  .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-model { top: calc(var(--wgbv-p) * 88); }
  .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-sec { top: calc(var(--wgbv-p) * 50); height: calc(var(--wgbv-p) * 136); }
  .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-lock { top: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-st { top: calc(var(--wgbv-p) * 52); }
  .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-r1 { top: calc(var(--wgbv-p) * 80); }
  .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-r2 { top: calc(var(--wgbv-p) * 104); }
  .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t1 { top: calc(var(--wgbv-p) * 6); }
  .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t2 { top: calc(var(--wgbv-p) * 180); }
  @container (min-height: 360px) {
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-stage { --wgbv-h: 266; }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-w { transform: translate(calc(var(--wgbv-p) * -3), calc(var(--wgbv-p) * 35)) rotate(90deg) scale(1, 2); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-model { left: calc(var(--wgbv-p) * 134); top: calc(var(--wgbv-p) * 4); height: calc(var(--wgbv-p) * 56); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-sec { left: calc(var(--wgbv-p) * 138); top: calc(var(--wgbv-p) * 78); height: calc(var(--wgbv-p) * 112); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-lock { top: calc(var(--wgbv-p) * 11); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-st { top: calc(var(--wgbv-p) * 44); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-r1 { top: calc(var(--wgbv-p) * 66); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-r2 { top: calc(var(--wgbv-p) * 88); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-to { width: calc(var(--wgbv-p) * 150); justify-content: center; white-space: nowrap; }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t1 { left: calc(var(--wgbv-p) * 31); top: calc(var(--wgbv-p) * 210); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t2 { left: calc(var(--wgbv-p) * 199); top: calc(var(--wgbv-p) * 210); }
  }
  @container (min-height: 400px) {
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-stage { --wgbv-h: 288; }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-w { transform: translate(calc(var(--wgbv-p) * -3), calc(var(--wgbv-p) * 46)) rotate(90deg) scale(1.1467, 2); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-sec { top: calc(var(--wgbv-p) * 82); height: calc(var(--wgbv-p) * 123); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-lock { top: calc(var(--wgbv-p) * 13); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-st { top: calc(var(--wgbv-p) * 50); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-r1 { top: calc(var(--wgbv-p) * 76); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-r2 { top: calc(var(--wgbv-p) * 99); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t1 { top: calc(var(--wgbv-p) * 232); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t2 { top: calc(var(--wgbv-p) * 232); }
  }
  @container (min-height: 430px) {
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-stage { --wgbv-h: 300; }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-w { transform: translate(calc(var(--wgbv-p) * -3), calc(var(--wgbv-p) * 52)) rotate(90deg) scale(1.2267, 2); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-sec { top: calc(var(--wgbv-p) * 84); height: calc(var(--wgbv-p) * 130); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-lock { top: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-st { top: calc(var(--wgbv-p) * 53); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-r1 { top: calc(var(--wgbv-p) * 80); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-r2 { top: calc(var(--wgbv-p) * 104); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t1 { top: calc(var(--wgbv-p) * 244); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t2 { top: calc(var(--wgbv-p) * 244); }
  }
}
/* Capped band (v2.8, 480 to 767 px). With the card image capped at 360 px (core.css) the area is 370 px tall at 667 to
   767 px: the 266 design px flow would put the scale under the text cap (1.39 instead of 1.408). From 360 to 374.5 px
   tall the same top-to-bottom flow is 256 design px (the secure setup 107 tall, the routes 7 % shorter), so the scale
   stays at the text cap and the flow fills the area. */
@media (min-width: 480px) and (max-width: 767px) {
  @container (min-height: 360px) and (max-height: 374.5px) {
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-stage { --wgbv-h: 256; }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-w { transform: translate(calc(var(--wgbv-p) * -3), calc(var(--wgbv-p) * 30)) rotate(90deg) scale(.9333, 2); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-sec { top: calc(var(--wgbv-p) * 76); height: calc(var(--wgbv-p) * 107); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-lock { top: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-st { top: calc(var(--wgbv-p) * 41); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-r1 { top: calc(var(--wgbv-p) * 61.5); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-r2 { top: calc(var(--wgbv-p) * 83); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t1 { top: calc(var(--wgbv-p) * 200); }
    .wgbv-visual[data-wgbv="distribution"]:is(.point *) .wgbv-ds-t2 { top: calc(var(--wgbv-p) * 200); }
  }
}

/* ---- 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); }
}
/* Stacked layouts (v2.6; research cards on phones up to 479 px only): in an area less than 1.45 times as wide as it is
   tall (the /telehealth and /prems-proms cards, /alternatives, and the small cards at 320 to 375 px) the Scale / Picker
   popover is a row under the palette, overlapping its bottom edge, instead of hanging off its right side. Three heights:
   - under 1.1 : 1, 466 x 460 design px: the palette's rows and the popover get more room;
   - 1.1 to 1.25 : 1, 498 x 408;
   - 1.25 to 1.45 : 1, 560 x 408 (as wide as the narrow layout, so the scale never drops below it).
   In the popover row both items are as tall as the picked one, so Slider and Date & Time line up. */
@media (max-width: 479px) {
  @container (aspect-ratio < 1.45) {
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-stage { --wgbv-w: 560; --wgbv-h: 408; }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-main { left: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 16); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float { left: calc(var(--wgbv-p) * 164); top: calc(var(--wgbv-p) * 280); width: calc(var(--wgbv-p) * 380); height: calc(var(--wgbv-p) * 112);
      flex-direction: row; gap: calc(var(--wgbv-p) * 20); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float .wgbv-g { flex: 1; min-width: 0; }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float .wgbv-it { height: calc(var(--wgbv-p) * 46); }
  }
  @container (aspect-ratio < 1.25) {
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-stage { --wgbv-w: 498; }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float { left: calc(var(--wgbv-p) * 102); }
  }
  @container (aspect-ratio < 1.1) {
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-stage { --wgbv-w: 466; --wgbv-h: 460; }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-main { top: calc(var(--wgbv-p) * 18); height: calc(var(--wgbv-p) * 312); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-g { gap: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-it { height: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float .wgbv-it { height: calc(var(--wgbv-p) * 50); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-g1, .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-g3 { top: calc(var(--wgbv-p) * 28); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-g2, .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-g4 { top: calc(var(--wgbv-p) * 168); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float { left: calc(var(--wgbv-p) * 70); top: calc(var(--wgbv-p) * 312); height: calc(var(--wgbv-p) * 128); padding: calc(var(--wgbv-p) * 24) calc(var(--wgbv-p) * 18); }
  }
}

/* Tablet layouts (v2.7, research cards from 480 to 991 px only): the phone's stacked layouts (above) also in these
   areas, so from 768 px the palette no longer floats in an area about as tall as wide (39 to 67 px above and below)
   and /alternatives at 480 to 600 px fills its area (was 41 to 51 px). The 560 x 408 layout from 1.519 : 1 down (in an
   area under 300 px wide from 1.372 : 1, so the scale never drops below the narrow layout's), 498 x 408 under 1.25 : 1,
   466 x 460 under 1.1 : 1. The magenta tile starts 2 design px down its stage, so where the stage takes the area's
   full height the tile stays 16 px or more from the copy. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio < 1.372) or ((min-width: 300px) and (aspect-ratio < 1.519)) {
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-stage { --wgbv-w: 560; --wgbv-h: 408; }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-bg { top: calc(var(--wgbv-p) * 2); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-main { left: calc(var(--wgbv-p) * 16); top: calc(var(--wgbv-p) * 16); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float { left: calc(var(--wgbv-p) * 164); top: calc(var(--wgbv-p) * 280); width: calc(var(--wgbv-p) * 380); height: calc(var(--wgbv-p) * 112);
      flex-direction: row; gap: calc(var(--wgbv-p) * 20); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float .wgbv-g { flex: 1; min-width: 0; }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float .wgbv-it { height: calc(var(--wgbv-p) * 46); }
  }
  @container (aspect-ratio < 1.25) {
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-stage { --wgbv-w: 498; }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float { left: calc(var(--wgbv-p) * 102); }
  }
  @container (aspect-ratio < 1.1) {
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-stage { --wgbv-w: 466; --wgbv-h: 460; }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-main { top: calc(var(--wgbv-p) * 18); height: calc(var(--wgbv-p) * 312); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-g { gap: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-it { height: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float .wgbv-it { height: calc(var(--wgbv-p) * 50); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-g1 { top: calc(var(--wgbv-p) * 28); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-g3 { top: calc(var(--wgbv-p) * 28); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-g2 { top: calc(var(--wgbv-p) * 168); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-g4 { top: calc(var(--wgbv-p) * 168); }
    .wgbv-visual[data-wgbv="form-builder"]:is(.point *) .wgbv-float { left: calc(var(--wgbv-p) * 70); top: calc(var(--wgbv-p) * 312); height: calc(var(--wgbv-p) * 128); padding: calc(var(--wgbv-p) * 24) calc(var(--wgbv-p) * 18); }
  }
}

/* ---- 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); }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only). The wide orbit is 383 x 187 design px and bleeds off
   the card's bottom edge; in the cards' taller areas it left 40 to 106 px empty above it (136 px on /movement-studies
   at 767 px). There it takes a window that fills the area's height, at the same or a larger scale:
   - 1.3 to 1.55 : 1: the square layout (as under 1.3 : 1), its window the top 250 of its 266 design px, so the phone
     bleeds a little further off the card's edge;
   - 1.55 to 1.92 : 1: the wide orbit with a taller window, 235, 222, 210, 204 and 199 design px for areas from 1.55,
     1.63, 1.72, 1.82 and 1.87 : 1 (more of the arcs; the phone is longer, so it still runs off the card's edge);
   - under 1.1 : 1 (/wearable-device-studies "Your own app" from 768 px): the square layout's window starts 12 design
     px lower (the top chip still 7 px clear) and reaches 274 or 287 px down, the arcs and the phone drawn further. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio >= 1.3) and (aspect-ratio < 1.55) {
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-stage { --wgbv-w: 290; --wgbv-h: 266; --wgbv-ch: 250; --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"]:is(.point *) .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"]:is(.point *) .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"]:is(.point *) .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"]:is(.point *) .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"]:is(.point *) .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"]:is(.point *) .wgbv-orb.wgbv-k1 { left: calc(var(--wgbv-p) * 180.415); top: calc(var(--wgbv-p) * 99.315); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-orb.wgbv-k2 { left: calc(var(--wgbv-p) * 187.495); top: calc(var(--wgbv-p) * 179.005); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-orb.wgbv-k3 { left: calc(var(--wgbv-p) * 78.815); top: calc(var(--wgbv-p) * 103.925); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-orb.wgbv-k4 { left: calc(var(--wgbv-p) * 204.705); top: calc(var(--wgbv-p) * 19.005); }
  }
  @container (aspect-ratio >= 1.55) and (aspect-ratio < 1.63) {
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-stage { --wgbv-h: 235; }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app { height: calc(var(--wgbv-p) * 133); }
  }
  @container (aspect-ratio >= 1.63) and (aspect-ratio < 1.72) {
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-stage { --wgbv-h: 222; }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app { height: calc(var(--wgbv-p) * 120); }
  }
  @container (aspect-ratio >= 1.72) and (aspect-ratio < 1.82) {
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-stage { --wgbv-h: 210; }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app { height: calc(var(--wgbv-p) * 108); }
  }
  @container (aspect-ratio >= 1.82) and (aspect-ratio < 1.87) {
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-stage { --wgbv-h: 204; }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app { height: calc(var(--wgbv-p) * 102); }
  }
  @container (aspect-ratio >= 1.87) and (aspect-ratio < 1.92) {
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-stage { --wgbv-h: 199; }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app { height: calc(var(--wgbv-p) * 97); }
  }
  @container (aspect-ratio >= 1.04) and (aspect-ratio < 1.1) {
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-stage { --wgbv-h: 286; --wgbv-cy: 12; --wgbv-ch: 274; }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app { height: calc(var(--wgbv-p) * 140); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-arc-1 { clip-path: inset(0 calc(var(--wgbv-p) * 222) calc(var(--wgbv-p) * 202) 0); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-arc-2 { clip-path: inset(0 calc(var(--wgbv-p) * 156) calc(var(--wgbv-p) * 136) 0); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-arc-3 { clip-path: inset(0 calc(var(--wgbv-p) * 90) calc(var(--wgbv-p) * 70) 0); }
  }
  @container (aspect-ratio < 1.04) {
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-stage { --wgbv-h: 299; --wgbv-cy: 12; --wgbv-ch: 287; }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app { height: calc(var(--wgbv-p) * 153); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-arc-1 { clip-path: inset(0 calc(var(--wgbv-p) * 222) calc(var(--wgbv-p) * 189) 0); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-arc-2 { clip-path: inset(0 calc(var(--wgbv-p) * 156) calc(var(--wgbv-p) * 123) 0); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-arc-3 { clip-path: inset(0 calc(var(--wgbv-p) * 90) calc(var(--wgbv-p) * 57) 0); }
  }
}

/* Phone layouts (v2.7 bleed, research cards up to 479 px). The orbit's window (the square layout's 266 design px under
   1.3 : 1, the wide orbit's 187 from 1.3 : 1) was shorter than the cards' tall areas, so it sat at the area's bottom
   with 38 to 122 px empty above the top chip. Here the window starts at the area's top and the card's bottom edge crops
   it wherever it falls (the stage is drawn further: the arcs go on, the phone is longer so it still runs off the card):
   - under 1.5 : 1 the square layout, its window from 12 design px down (the top chip still 7 clear), the scale set by
     the area's width or by 254 design px of its height, so it is the same or larger than before (also against the
     wide orbit up to 1.5 : 1); the arcs run on as half circles and the phone ends 36 design px past the card's edge;
   - from 1.5 : 1 the wide orbit at the same scale, its window from the top, the card's edge 187 to 255 design px
     down (under the phone's task row), the phone ending 19 design px past the edge as before. */
@media (max-width: 479px) {
  @container (aspect-ratio < 1.5) {
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-stage { --wgbv-w: 290; --wgbv-h: 520; --wgbv-geo: 1; --wgbv-cy: 12; --wgbv-ch: 508; --wgbv-vis: .5;
      -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"]:is(.point *) .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) 0 0); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .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) 0 0); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .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) 0 0); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .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"]:is(.point *) .wgbv-app { left: calc(var(--wgbv-p) * 22); top: calc(var(--wgbv-p) * 182); height: calc(100cqh - var(--wgbv-p) * 134); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-orb.wgbv-k1 { left: calc(var(--wgbv-p) * 180.415); top: calc(var(--wgbv-p) * 99.315); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-orb.wgbv-k2 { left: calc(var(--wgbv-p) * 187.495); top: calc(var(--wgbv-p) * 179.005); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-orb.wgbv-k3 { left: calc(var(--wgbv-p) * 78.815); top: calc(var(--wgbv-p) * 103.925); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-orb.wgbv-k4 { left: calc(var(--wgbv-p) * 204.705); top: calc(var(--wgbv-p) * 19.005); }
  }
  @container (aspect-ratio >= 1.5) {
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-stage { --wgbv-h: 400; --wgbv-ch: 400; --wgbv-vis: .4675; }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app { height: calc(100cqh - var(--wgbv-p) * 95); }
  }
}
/* Skeleton rows (v2.8, research cards up to 479 px, areas under 1.1 : 1). In the tall phone areas the long phone shows
   up to 140 design px of blank screen under "Today's check-in" (/clinical-interventions at 320 px, 0.76 : 1). There
   the home tab's list goes on as skeleton rows, drawn by CSS only (no text): a grey tile and a grey bar per row, as
   the brand-theme visual's skeleton row, 24 design px apart like the task row above them. The card's bottom edge
   crops them where it falls; in a shorter area they are below the edge. */
@media (max-width: 479px) {
  @container (aspect-ratio < 1.1) {
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app::before,
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app::after { content: ''; position: absolute; --wgbv-sk: #F3F4F6;
      box-shadow: 0 calc(var(--wgbv-p) * 24) 0 var(--wgbv-sk), 0 calc(var(--wgbv-p) * 48) 0 var(--wgbv-sk), 0 calc(var(--wgbv-p) * 72) 0 var(--wgbv-sk),
        0 calc(var(--wgbv-p) * 96) 0 var(--wgbv-sk), 0 calc(var(--wgbv-p) * 120) 0 var(--wgbv-sk), 0 calc(var(--wgbv-p) * 144) 0 var(--wgbv-sk), 0 calc(var(--wgbv-p) * 168) 0 var(--wgbv-sk); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app::before { left: calc(var(--wgbv-p) * 11.2); top: calc(var(--wgbv-p) * 79.4); width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15);
      border-radius: calc(var(--wgbv-p) * 5); background: var(--wgbv-sk); }
    .wgbv-visual[data-wgbv="identity"]:is(.point *) .wgbv-app::after { --wgbv-sk: #EEF0F3; left: calc(var(--wgbv-p) * 31.2); top: calc(var(--wgbv-p) * 84.4); width: calc(var(--wgbv-p) * 56); height: calc(var(--wgbv-p) * 5);
      border-radius: calc(var(--wgbv-p) * 2.5); background: var(--wgbv-sk); }
  }
}

/* ---- 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; }
/* Tall layouts (v2.6; research cards on phones up to 479 px only): in an area less than 2.3 times as wide as it is
   tall (/patient-engagement-software "Secure, compliant messaging") the thread is narrower, so the clinician's first
   reply runs over three lines and the thread fills the area's height: 376 x 213 design px (the thread 324 wide); under
   1.7 : 1 (320 px phones) 340 x 220 (288 wide), where the second reply takes two lines. The stage is a few design px
   taller than the thread, so a browser that wraps one more line still shows the whole thread. */
@media (max-width: 479px) {
  @container (aspect-ratio < 2.3) {
    .wgbv-visual[data-wgbv="messaging"]:is(.point *) .wgbv-stage { --wgbv-w: 376; --wgbv-h: 213; }
  }
  @container (aspect-ratio < 1.7) {
    .wgbv-visual[data-wgbv="messaging"]:is(.point *) .wgbv-stage { --wgbv-w: 340; --wgbv-h: 220; }
  }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only). The thread left 100 px empty above and below it from
   768 px and 53 px at 767 px. There it takes the phone's narrower threads, and a narrower one still, in the tallest
   that is not limited by the area's height (or, where the text cap stops the scale, from 1.2571 x its height in px),
   the thread centred in the stage (the replies' wrapping varies a little): 420 x 196 up to 2.347 : 1 or from 246.4 px;
   376 x 213 design px up to 2.16 : 1 or from 267.8 px tall; 340 x 220 up to 2.09 : 1 or from 276.6 px; 280 x 240 (the
   thread 228 wide, so the replies take more lines) up to 1.92 : 1 or from 301.7 px. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio <= 2.347) or (min-height: 246.4px) {
    .wgbv-visual[data-wgbv="messaging"]:is(.point *) .wgbv-stage { --wgbv-w: 420; --wgbv-h: 196; }
    .wgbv-visual[data-wgbv="messaging"]:is(.point *) .wgbv-msg-thread { top: 50%; bottom: auto; translate: 0 -50%; }
  }
  @container (aspect-ratio <= 2.16) or (min-height: 267.8px) {
    .wgbv-visual[data-wgbv="messaging"]:is(.point *) .wgbv-stage { --wgbv-w: 376; --wgbv-h: 213; }
  }
  @container (aspect-ratio <= 2.09) or (min-height: 276.6px) {
    .wgbv-visual[data-wgbv="messaging"]:is(.point *) .wgbv-stage { --wgbv-w: 340; --wgbv-h: 220; }
  }
  @container (aspect-ratio <= 1.92) or (min-height: 301.7px) {
    .wgbv-visual[data-wgbv="messaging"]:is(.point *) .wgbv-stage { --wgbv-w: 280; --wgbv-h: 240; }
    .wgbv-visual[data-wgbv="messaging"]:is(.point *) .wgbv-msg-thread { top: 50%; bottom: auto; translate: 0 -50%; }
  }
}
/* v2.8 (research cards from 480 to 991 px): in an area 257.7 to 267.8 px tall (/patient-engagement-software at
   720 px), where the 213 design px thread needs a smaller scale and the 196 one left 41 to 45 px, the narrower thread
   of the 376 x 213 layout (the clinician's first reply on three lines) sits in a 376 x 205 stage, at the text cap,
   1.6 design px below its centre (the card's padding under the area is 8 px more than the gap above it). */
@media (min-width: 480px) and (max-width: 991px) {
  @container (min-height: 257.7px) and (max-height: 267.79px) {
    .wgbv-visual[data-wgbv="messaging"]:is(.point *) .wgbv-stage { --wgbv-w: 376; --wgbv-h: 205; }
    .wgbv-visual[data-wgbv="messaging"]:is(.point *) .wgbv-msg-thread { top: calc(50% + var(--wgbv-p) * 1.6); bottom: auto; translate: 0 -50%; }
  }
}

/* ---- 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; }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only; /biomarkers "Find the best biomarker"). From 480 to
   767 px the area is about 1.67 : 1, and the 2 : 1 stair of three plots left 43 to 84 px empty above and below. There
   (from 1.55 : 1, where the square layout stops) the stair is steeper: the cards 53 design px apart vertically instead
   of 32, 440 x 262, up to 1.679 : 1 or from 354.7 px tall; from 373.6 px tall 60 apart, 440 x 276; from 392.6 px
   tall 67 apart, 440 x 290. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio >= 1.55) and ((aspect-ratio <= 1.679) or (min-height: 354.7px)) {
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-stage { --wgbv-h: 262; }
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-ms-c1 { top: calc(var(--wgbv-p) * 114); }
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-ms-c2 { top: calc(var(--wgbv-p) * 61); }
  }
  @container (aspect-ratio >= 1.55) and (min-height: 373.6px) {
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-stage { --wgbv-h: 276; }
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-ms-c1 { top: calc(var(--wgbv-p) * 128); }
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-ms-c2 { top: calc(var(--wgbv-p) * 68); }
  }
  @container (aspect-ratio >= 1.55) and (min-height: 392.6px) {
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-stage { --wgbv-h: 290; }
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-ms-c1 { top: calc(var(--wgbv-p) * 142); }
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-ms-c2 { top: calc(var(--wgbv-p) * 75); }
  }
}
/* Capped band (v2.8, 480 to 767 px). With the card image capped at 360 px (core.css) the area at 720 and 767 px is
   366 px tall, between the 262 and 276 design px stairs: the 262 stair left 32 to 36 px. From 365.6 px tall the
   stair is 270 design px (the cards 57 apart), at the text cap. */
@media (min-width: 480px) and (max-width: 767px) {
  @container (aspect-ratio >= 1.55) and (min-height: 365.6px) and (max-height: 373.59px) {
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-stage { --wgbv-h: 270; }
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-ms-c1 { top: calc(var(--wgbv-p) * 122); }
    .wgbv-visual[data-wgbv="model-search"]:is(.point *) .wgbv-ms-c2 { top: calc(var(--wgbv-p) * 65); }
  }
}

/* ---- 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; }
}
/* Phone layouts on the research cards (v2.6, .point only, up to 479 px). The design pixel is capped at 1.1 px there
   (--wgbv-pmax: the 14 px title at 1.1 x the card's 14 px body text), so in a tall area the visual cannot grow; it
   takes a composition for the area's shape instead, never at a smaller scale than before:
   - under 300 px wide (the narrow layout shows only Supported Languages, 216 x 156) its list rows grow to phone list
     height in a taller area: 48 design px from 197 px (179 tall), 56 from 220 px (200 tall);
   - under 300 px wide and at least 247.5 x 298.65 px (/clinical-interventions at 320 and 360 px, /patient-registry at
     320 px): both panels fit at 1.1 px when they are a little tighter (rows 36, form options 32): the form under
     Supported Languages, 225 x 271.5; from 264 x 330 px (/patient-registry at 360 px) the tall layout itself;
   - 300 px wide or more and under 1.3 : 1 (/genetic-research at 390 and 430 px): the tall layout (240 x 300) instead
     of the side-by-side one; when the area is taller than the tall layout at 1.1 px, the form moves down: 322 tall from
     354.2 px, 341 from 375.1 px (/patient-registry at 390 and 430 px);
   - 300 px wide or more and 1.3 to 1.52 : 1 (/platform/white-labeling at 390 and 430 px, /citizen-science and
     /employee-wellbeing-program at 390 px): the side-by-side layout 250 tall instead of 228, the form lower; from
     1.52 to 1.85 : 1 (/citizen-science and /employee-wellbeing-program at 430 px) the same 228 tall, with the two
     panels centred in it (the admin started 20 design px down and the form ended 6 px above the bottom).
   The two-panel layouts need about 271 design px of height, so the narrow areas under 298 px tall (/prems-proms and
   /genetic-research at 320 and 360 px) keep the single panel. */
@media (max-width: 479px) {
  @container (max-width: 299px) and (min-height: 196.9px) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-stage { --wgbv-h: 179; }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { padding: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-list { margin-top: calc(var(--wgbv-p) * 12); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-row { height: calc(var(--wgbv-p) * 48); }
  }
  @container (max-width: 299px) and (min-height: 220px) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-stage { --wgbv-h: 200; }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { padding: calc(var(--wgbv-p) * 16); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-list { margin-top: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-row { height: calc(var(--wgbv-p) * 56); }
  }
  @container (min-width: 300px) and (aspect-ratio >= 1.1) and (aspect-ratio < 1.3) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-stage { --wgbv-w: 240; --wgbv-h: 300; }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { left: calc(var(--wgbv-p) * 3); top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-app { left: calc(var(--wgbv-p) * 74); top: calc(var(--wgbv-p) * 150); }
  }
  @container (min-width: 300px) and (aspect-ratio < 1.3) and (min-height: 354.2px) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-stage { --wgbv-h: 322; }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-app { top: calc(var(--wgbv-p) * 172); }
  }
  @container (min-width: 300px) and (aspect-ratio < 1.3) and (min-height: 375.1px) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-stage { --wgbv-h: 341; }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-app { top: calc(var(--wgbv-p) * 191); }
  }
  @container (min-width: 300px) and (aspect-ratio >= 1.3) and (aspect-ratio < 1.52) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-stage { --wgbv-h: 250; }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-app { top: calc(var(--wgbv-p) * 100); }
  }
  @container (min-width: 300px) and (aspect-ratio >= 1.52) and (aspect-ratio < 1.85) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { top: calc(var(--wgbv-p) * 12.8); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-app { top: calc(var(--wgbv-p) * 68.8); }
  }
  @container (max-width: 299px) and (min-width: 247.5px) and (min-height: 298.65px) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-stage { --wgbv-w: 225; --wgbv-h: 271.5; }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { left: calc(var(--wgbv-p) * 2); top: calc(var(--wgbv-p) * 2); padding: calc(var(--wgbv-p) * 11); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-list { margin-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-row { height: calc(var(--wgbv-p) * 36); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-app { display: block; left: calc(var(--wgbv-p) * 60); top: calc(var(--wgbv-p) * 133); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-nav { height: calc(var(--wgbv-p) * 30); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-opt { height: calc(var(--wgbv-p) * 32); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-btns { padding: calc(var(--wgbv-p) * 3) calc(var(--wgbv-p) * 6); }
  }
  @container (max-width: 299px) and (min-width: 264px) and (min-height: 330px) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-stage { --wgbv-w: 240; --wgbv-h: 300; }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { left: calc(var(--wgbv-p) * 3); top: calc(var(--wgbv-p) * 6); padding: calc(var(--wgbv-p) * 13); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-list { margin-top: calc(var(--wgbv-p) * 11); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-row { height: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-app { display: block; left: calc(var(--wgbv-p) * 74); top: calc(var(--wgbv-p) * 150); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-nav { height: calc(var(--wgbv-p) * 32); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-opt { height: calc(var(--wgbv-p) * 34); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-btns { padding: calc(var(--wgbv-p) * 5) calc(var(--wgbv-p) * 6); }
  }
}
/* Tablet layout (v2.7, research cards from 480 to 991 px only, areas 300 px wide or more and at least 1.1 : 1). The
   side-by-side panels sat in a 228 design px stage (Supported Languages 20 down, the form 76 down), which left 37 to 80
   px empty above or below them from 768 px and up to 138 px at 767 px. There the scale is set by a 209 design px tall
   stage (both panels 6 from its edges), so the panels are never smaller and usually larger than before, and the stage
   then takes the area's full height: Supported Languages at its top, the form at its bottom, so the two panels step
   down across the area however tall it is (the form always overlaps the height of Supported Languages a little). In an
   area from 400 px tall the list rows and the form's options are taller (48 and 40 design px), from 440 px taller
   still (56 and 48, the panel's padding 16, the form's header 36), so the step stays small. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (min-width: 300px) and (aspect-ratio >= 1.1) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-stage { --wgbv-h: 209; top: 0; height: 100cqh; }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-app { top: auto; bottom: calc(var(--wgbv-p) * 6); }
  }
  @container (min-width: 300px) and (aspect-ratio >= 1.1) and (min-height: 400px) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-row { height: calc(var(--wgbv-p) * 48); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-opt { height: calc(var(--wgbv-p) * 40); }
  }
  @container (min-width: 300px) and (aspect-ratio >= 1.1) and (min-height: 440px) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { padding: calc(var(--wgbv-p) * 16); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-list { margin-top: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-row { height: calc(var(--wgbv-p) * 56); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-nav { height: calc(var(--wgbv-p) * 36); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-opt { height: calc(var(--wgbv-p) * 48); }
  }
}
/* v2.8 (research cards up to 479 px): a narrow area at least 250 px tall that cannot take the two panels at the text
   cap (/prems-proms "Multi language forms" at 320 and 360 px, where Supported Languages left 37 to 50 px) shows
   Supported Languages 226 design px tall: its title 13 design px instead of 14, so the text cap lets the panel be drawn
   up to 7.7 % larger, and the rows 65 tall (padding 20 above and below, the list 18 under the subtitle). */
@media (max-width: 479px) {
  @container (max-width: 299px) and (min-height: 250px) and (not ((min-width: 247.5px) and (min-height: 298.65px))) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-stage { --wgbv-h: 226; }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { top: calc(var(--wgbv-p) * 2); padding: calc(var(--wgbv-p) * 20) calc(var(--wgbv-p) * 16); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-title { font-size: calc(var(--wgbv-p) * 13); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-list { margin-top: calc(var(--wgbv-p) * 18); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-row { height: calc(var(--wgbv-p) * 65); }
  }
}
/* v2.8 (research cards up to 479 px): in a tall area from 398 px tall (/patient-registry "Multilingual support" at 430
   to 479 px, where the 341 design px layout left 34 to 56 px) the stage takes the area's height at the same scale (the
   text cap): Supported Languages at its top, the form at its bottom (6 design px from the edges), and, as on tablets,
   the rows taller: list rows 48 and the form's options 40 from 398 px tall; from 440 px rows 56, options 48, the
   panel's padding 16 and the form's header 36. */
@media (max-width: 479px) {
  @container (min-width: 300px) and (aspect-ratio < 1.3) and (min-height: 398px) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-stage { top: 0; height: 100cqh; }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-app { top: auto; bottom: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-row { height: calc(var(--wgbv-p) * 48); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-opt { height: calc(var(--wgbv-p) * 40); }
  }
  @container (min-width: 300px) and (aspect-ratio < 1.3) and (min-height: 440px) {
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-admin { padding: calc(var(--wgbv-p) * 16); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-list { margin-top: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-row { height: calc(var(--wgbv-p) * 56); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-nav { height: calc(var(--wgbv-p) * 36); }
    .wgbv-visual[data-wgbv="multilingual"]:is(.point *) .wgbv-ml-opt { height: calc(var(--wgbv-p) * 48); }
  }
}

/* ---- 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); }
}
/* Phone layout on the research card (v2.6, .point only, up to 479 px): at 390 and 430 px the area under the copy on
   /alternatives is about 1.2 : 1 (302 x 251, 342 x 277 px), so the 420 x 300 default filled its width and left a
   36 to 40 px band under it. Under 1.3 : 1 the two-column layout of the narrow cards (300 x 318) is used there too:
   it fills the area's height and is drawn larger (design pixel 0.79 and 0.87 instead of 0.72 and 0.81). */
@media (max-width: 479px) {
  @container (min-width: 300px) and (aspect-ratio < 1.3) {
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-stage { --wgbv-w: 300; --wgbv-h: 318; }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .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"]:is(.point *) .wgbv-op-brand { left: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-core { right: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-pill { width: calc(var(--wgbv-p) * 120); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p1 { left: calc(var(--wgbv-p) * 24); top: calc(var(--wgbv-p) * 54); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p2 { left: calc(var(--wgbv-p) * 156); top: calc(var(--wgbv-p) * 54); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p3 { left: calc(var(--wgbv-p) * 24); top: calc(var(--wgbv-p) * 98); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p4 { left: calc(var(--wgbv-p) * 156); top: calc(var(--wgbv-p) * 98); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p5 { left: calc(var(--wgbv-p) * 90); top: calc(var(--wgbv-p) * 142); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .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"]:is(.point *) .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"]:is(.point *) .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"]:is(.point *) .wgbv-op-vs { gap: calc(var(--wgbv-p) * 4); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-v { padding: 0 calc(var(--wgbv-p) * 6); font-size: calc(var(--wgbv-p) * 10.5); }
  }
}

/* Tablet layout (v2.7, research cards from 480 to 991 px only). The /alternatives area is about 1.27 : 1 at 480 px and
   379 px tall from 600 px, where the 420 x 300 layout (capped by the module names) left 30 to 43 px above and below.
   There it is 320 or 330 design px tall: the platform panel 8 or 12 taller with the module rows 12 or 14 apart, the
   engine, the dashed link and the External EDCs card lower (the card 76 or 78 tall). Used up to 1.3125 or 1.2727 : 1
   (the scale set by the width, as before) or from 364.1 or 375.5 px tall (the scale capped on /alternatives, as
   before), so the scale never drops there. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (min-width: 300px) and (aspect-ratio < 1.85) and ((aspect-ratio <= 1.3125) or (min-height: 364.1px)) {
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-stage { --wgbv-h: 320; }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-panel { height: calc(var(--wgbv-p) * 164); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p1 { top: calc(var(--wgbv-p) * 68); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p2 { top: calc(var(--wgbv-p) * 68); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p3 { top: calc(var(--wgbv-p) * 68); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p4 { top: calc(var(--wgbv-p) * 118); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p5 { top: calc(var(--wgbv-p) * 118); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-engine { top: calc(var(--wgbv-p) * 168); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-line { top: calc(var(--wgbv-p) * 188.3); height: calc(var(--wgbv-p) * 31.7); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-edc { top: calc(var(--wgbv-p) * 220); height: calc(var(--wgbv-p) * 76); }
  }
  @container (min-width: 300px) and (aspect-ratio < 1.85) and ((aspect-ratio <= 1.2727) or (min-height: 375.5px)) {
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-stage { --wgbv-h: 330; }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-panel { height: calc(var(--wgbv-p) * 168); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p1 { top: calc(var(--wgbv-p) * 70); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p2 { top: calc(var(--wgbv-p) * 70); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p3 { top: calc(var(--wgbv-p) * 70); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p4 { top: calc(var(--wgbv-p) * 122); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-p5 { top: calc(var(--wgbv-p) * 122); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-engine { top: calc(var(--wgbv-p) * 172); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-line { top: calc(var(--wgbv-p) * 192.3); height: calc(var(--wgbv-p) * 33.7); }
    .wgbv-visual[data-wgbv="one-platform"]:is(.point *) .wgbv-op-edc { top: calc(var(--wgbv-p) * 226); height: calc(var(--wgbv-p) * 78); }
  }
}

/* ---- 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; }
}
/* Tall phone layout (v2.6, research and product cards up to 479 px only): in an area less than 1.2 times as wide as it
   is tall (the "Manage your groups with ease" cards at 320 to 430 px, where the two rows left 80 to 90 px empty above
   and below) two more engagements of the same kind show under the first two: 388 x 322 design px, so the rows keep
   their scale (the area's width still sets it) and fill the area's height. Rows 3 and 4 are hidden everywhere else
   (desktop, the care pages, /platform). Labels: "Food Intake Survey" (automations), "Daily check-in", "Control group"
   (the card's own copy: control or intervention groups). In a narrow area (under 300 px wide: titles only) the stage
   is 300 design px wide, so the rows are larger than in the narrow strip (also on the shorter cards, where the two
   rows then fill the area's height). */
.wgbv-visual[data-wgbv="reminders"] .wgbv-row-3, .wgbv-visual[data-wgbv="reminders"] .wgbv-row-4 { display: none; }
.wgbv-visual[data-wgbv="reminders"] .wgbv-iconbox .wgbv-i { width: calc(var(--wgbv-p) * 16.5); height: calc(var(--wgbv-p) * 16.5); color: #6B7280; stroke-width: 1.8; }
@media (max-width: 479px) {
  @container (aspect-ratio < 1.2) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-h: 322; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 181); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: flex; top: calc(var(--wgbv-p) * 254); }
  }
  @container (max-width: 299px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-w: 300; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row { width: calc(var(--wgbv-p) * 285); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-add { left: calc(var(--wgbv-p) * 121); }
  }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only). The two engagements left 45 to 89 px empty above and
   below them from 768 px and up to 71 px at 767 px. There the list shows three or four engagements (rows 3 and 4 as on
   phones), in the tallest of these layouts that is not limited by the area's height (or, where the text cap stops the
   scale, from 1.2138 x its height in px), so the rows keep or grow their scale and fill the area. Each is 388 design px
   wide; H tall, used up to 388 / H : 1 or from 1.2138 x H px tall (rows: height, distance apart):
   - 3 rows 52 tall, 56 apart, 388 x 209: up to 1.856 : 1 or from 253.7 px
   - 3 rows 54 tall, 59 apart, 388 x 217: up to 1.788 : 1 or from 263.4 px
   - 3 rows 56 tall, 62 apart, 388 x 225: up to 1.724 : 1 or from 273.2 px
   - 3 rows 60 tall, 66 apart, 388 x 237: up to 1.637 : 1 or from 287.7 px
   - 3 rows 62 tall, 70 apart, 388 x 249: up to 1.558 : 1 or from 302.3 px
   - 3 rows 64.7 tall, 73.1 apart, 388 x 258: up to 1.503 : 1 or from 313.2 px
   - 4 rows 50 tall, 58.3 apart, 388 x 270: up to 1.437 : 1 or from 327.8 px
   - 4 rows 56 tall, 62.6 apart, 388 x 289: up to 1.342 : 1 or from 350.8 px
   - 4 rows 62 tall, 71 apart, 388 x 322: up to 1.204 : 1 or from 390.9 px
   The first row starts 35 design px down; the last ends 10 to 12 above the stage's bottom, so a row still rising into
   place (10 px) stays inside the stage. */

@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio <= 1.856) or (min-height: 253.7px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-h: 209; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 52); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 91); height: calc(var(--wgbv-p) * 52); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 147); height: calc(var(--wgbv-p) * 52); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.788) or (min-height: 263.4px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-h: 217; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 54); padding-top: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 94); height: calc(var(--wgbv-p) * 54); padding-top: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 153); height: calc(var(--wgbv-p) * 54); padding-top: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.724) or (min-height: 273.2px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-h: 225; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 97); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 159); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.637) or (min-height: 287.7px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-h: 237; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 60); padding-top: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 101); height: calc(var(--wgbv-p) * 60); padding-top: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 167); height: calc(var(--wgbv-p) * 60); padding-top: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.558) or (min-height: 302.3px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-h: 249; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 105); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 175); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.503) or (min-height: 313.2px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-h: 258; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 64.7); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 108.1); height: calc(var(--wgbv-p) * 64.7); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 181.2); height: calc(var(--wgbv-p) * 64.7); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.437) or (min-height: 327.8px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-h: 270; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 50); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 93.3); height: calc(var(--wgbv-p) * 50); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 151.6); height: calc(var(--wgbv-p) * 50); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: flex; top: calc(var(--wgbv-p) * 209.9); height: calc(var(--wgbv-p) * 50); padding-top: calc(var(--wgbv-p) * 7); }
  }
  @container (aspect-ratio <= 1.342) or (min-height: 350.8px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-h: 289; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 97.6); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 160.2); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: flex; top: calc(var(--wgbv-p) * 222.8); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
  }
  @container (aspect-ratio <= 1.204) or (min-height: 390.9px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-h: 322; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 106); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 177); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: flex; top: calc(var(--wgbv-p) * 248); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
  }
}
/* Hidden rows with a box (v2.8, research cards from 480 to 991 px only). fit() in core.js caps the scale by the
   largest text in the stage, a hidden row's title too. Safari keeps a stale style for text in a display: none subtree
   of the size container (the narrow layout's 16 design px title, at an old scale): at 600 px the visual came out 2.5
   to 7 % smaller there than in Chrome. Here rows 3 and 4 always have a box and are hidden with visibility where the
   layout shows fewer rows (the same conditions as the layouts above), so their titles measure 14.5 design px in both
   engines, as in Chrome before; nothing visible changes. */
@media (min-width: 480px) and (max-width: 991px) {
  .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; visibility: hidden; }
  .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: flex; visibility: hidden; }
  @container (aspect-ratio <= 1.856) or (min-height: 253.7px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { visibility: visible; }
  }
  @container (aspect-ratio <= 1.437) or (min-height: 327.8px) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { visibility: visible; }
  }
}
/* v2.8 (research cards up to 479 px): from 1.2 to 1.22 : 1 (the "Manage your groups with ease" cards at 479 px, 405
   x 335 px, where the two rows left 93 to 96 px; the four rows of the tall phone layout need a 0.2 % smaller scale)
   the four rows are 71.5 design px apart in a 388 x 318 stage, at the scale the area's width sets. */
@media (max-width: 479px) {
  @container (aspect-ratio >= 1.2) and (aspect-ratio < 1.22) {
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-stage { --wgbv-h: 318; }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-2 { top: calc(var(--wgbv-p) * 106.5); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 178); }
    .wgbv-visual[data-wgbv="reminders"]:is(.point *) .wgbv-row-4 { display: flex; top: calc(var(--wgbv-p) * 249.5); }
  }
}

/* ---- 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; }
}
/* Tall phone layout (v2.6, research and product cards up to 479 px only): as in reminders. In an area less than 1.2
   times as wide as it is tall (/telehealth "Digital intervention delivery" at 320 to 430 px) two more engagements of
   the same kind show under the first two: 388 x 322 design px, so the rows keep their scale and fill the area's
   height. Rows 3 and 4 are hidden everywhere else. Labels: "Food Intake Survey" and "Sent daily at 6 PM"
   (automations), "Daily check-in". In a narrow area (under 300 px wide: titles only) the stage is 300 design px wide. */
.wgbv-visual[data-wgbv="reminders-care"] .wgbv-row-3, .wgbv-visual[data-wgbv="reminders-care"] .wgbv-row-4 { display: none; }
@media (max-width: 479px) {
  @container (aspect-ratio < 1.2) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-h: 322; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 181); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: flex; top: calc(var(--wgbv-p) * 254); }
  }
  @container (max-width: 299px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-w: 300; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row { width: calc(var(--wgbv-p) * 285); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-add { left: calc(var(--wgbv-p) * 121); }
  }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only). The two engagements left 45 to 89 px empty above and
   below them from 768 px and up to 71 px at 767 px. There the list shows three or four engagements (rows 3 and 4 as on
   phones), in the tallest of these layouts that is not limited by the area's height (or, where the text cap stops the
   scale, from 1.2138 x its height in px), so the rows keep or grow their scale and fill the area. Each is 388 design px
   wide; H tall, used up to 388 / H : 1 or from 1.2138 x H px tall (rows: height, distance apart):
   - 3 rows 52 tall, 56 apart, 388 x 209: up to 1.856 : 1 or from 253.7 px
   - 3 rows 54 tall, 59 apart, 388 x 217: up to 1.788 : 1 or from 263.4 px
   - 3 rows 56 tall, 62 apart, 388 x 225: up to 1.724 : 1 or from 273.2 px
   - 3 rows 60 tall, 66 apart, 388 x 237: up to 1.637 : 1 or from 287.7 px
   - 3 rows 62 tall, 70 apart, 388 x 249: up to 1.558 : 1 or from 302.3 px
   - 3 rows 64.7 tall, 73.1 apart, 388 x 258: up to 1.503 : 1 or from 313.2 px
   - 4 rows 50 tall, 58.3 apart, 388 x 270: up to 1.437 : 1 or from 327.8 px
   - 4 rows 56 tall, 62.6 apart, 388 x 289: up to 1.342 : 1 or from 350.8 px
   - 4 rows 62 tall, 71 apart, 388 x 322: up to 1.204 : 1 or from 390.9 px
   The first row starts 35 design px down; the last ends 10 to 12 above the stage's bottom, so a row still rising into
   place (10 px) stays inside the stage. */

@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio <= 1.856) or (min-height: 253.7px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-h: 209; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 52); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 91); height: calc(var(--wgbv-p) * 52); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 147); height: calc(var(--wgbv-p) * 52); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.788) or (min-height: 263.4px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-h: 217; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 54); padding-top: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 94); height: calc(var(--wgbv-p) * 54); padding-top: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 153); height: calc(var(--wgbv-p) * 54); padding-top: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.724) or (min-height: 273.2px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-h: 225; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 97); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 159); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.637) or (min-height: 287.7px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-h: 237; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 60); padding-top: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 101); height: calc(var(--wgbv-p) * 60); padding-top: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 167); height: calc(var(--wgbv-p) * 60); padding-top: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.558) or (min-height: 302.3px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-h: 249; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 105); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 175); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.503) or (min-height: 313.2px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-h: 258; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 64.7); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 108.1); height: calc(var(--wgbv-p) * 64.7); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 181.2); height: calc(var(--wgbv-p) * 64.7); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: none; }
  }
  @container (aspect-ratio <= 1.437) or (min-height: 327.8px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-h: 270; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 50); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 93.3); height: calc(var(--wgbv-p) * 50); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 151.6); height: calc(var(--wgbv-p) * 50); padding-top: calc(var(--wgbv-p) * 7); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: flex; top: calc(var(--wgbv-p) * 209.9); height: calc(var(--wgbv-p) * 50); padding-top: calc(var(--wgbv-p) * 7); }
  }
  @container (aspect-ratio <= 1.342) or (min-height: 350.8px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-h: 289; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 97.6); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 160.2); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: flex; top: calc(var(--wgbv-p) * 222.8); height: calc(var(--wgbv-p) * 56); padding-top: calc(var(--wgbv-p) * 9); }
  }
  @container (aspect-ratio <= 1.204) or (min-height: 390.9px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-h: 322; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-1 { display: flex; top: calc(var(--wgbv-p) * 35); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-2 { display: flex; top: calc(var(--wgbv-p) * 106); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 177); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: flex; top: calc(var(--wgbv-p) * 248); height: calc(var(--wgbv-p) * 62); padding-top: calc(var(--wgbv-p) * 10.6); }
  }
}
/* Hidden rows with a box (v2.8, research cards from 480 to 991 px only). fit() in core.js caps the scale by the
   largest text in the stage, a hidden row's title too. Safari keeps a stale style for text in a display: none subtree
   of the size container (the narrow layout's 16 design px title, at an old scale): at 600 px the visual came out 2.5
   to 7 % smaller there than in Chrome. Here rows 3 and 4 always have a box and are hidden with visibility where the
   layout shows fewer rows (the same conditions as the layouts above), so their titles measure 14.5 design px in both
   engines, as in Chrome before; nothing visible changes. */
@media (min-width: 480px) and (max-width: 991px) {
  .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; visibility: hidden; }
  .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: flex; visibility: hidden; }
  @container (aspect-ratio <= 1.856) or (min-height: 253.7px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { visibility: visible; }
  }
  @container (aspect-ratio <= 1.437) or (min-height: 327.8px) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { visibility: visible; }
  }
}
/* v2.8 (research cards up to 479 px): from 1.2 to 1.22 : 1 (the "Manage your groups with ease" cards at 479 px, 405
   x 335 px, where the two rows left 93 to 96 px; the four rows of the tall phone layout need a 0.2 % smaller scale)
   the four rows are 71.5 design px apart in a 388 x 318 stage, at the scale the area's width sets. */
@media (max-width: 479px) {
  @container (aspect-ratio >= 1.2) and (aspect-ratio < 1.22) {
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-stage { --wgbv-h: 318; }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-2 { top: calc(var(--wgbv-p) * 106.5); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-3 { display: flex; top: calc(var(--wgbv-p) * 178); }
    .wgbv-visual[data-wgbv="reminders-care"]:is(.point *) .wgbv-row-4 { display: flex; top: calc(var(--wgbv-p) * 249.5); }
  }
}

/* ---- 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); }
}
/* Tall phone layouts (v2.6, research cards up to 479 px only). In the phone cards' tall areas the panel and its result
   left 44 to 103 px empty above and below, so there they stack: the panel as in the narrow layout (294 design px) but
   with its subtitle back, on two lines beside Add, and the result under the panel at the panel's width.
   - stacked: an area under 1.175 : 1 (under 330 px wide) or 1.5 : 1 (wider): the result as a row, 300 x 254 design px;
   - tall: under 0.96 : 1 (under 330 px wide) or 1.1 : 1 (wider): the result as the participant sees it, the tick over the
     form's name and the result line, centred: 300 x 304 (from 310 px wide, where the text cap sets the scale, a larger
     tick: 300 x 324).
   Both keep the panel's scale or make it larger (the area's width or the text cap sets it). */
@media (max-width: 479px) {
  @container ((max-width: 329px) and (aspect-ratio < 1.175)) or ((min-width: 330px) and (aspect-ratio < 1.5)) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-w: 300; --wgbv-h: 254; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-card { top: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 294); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-sub { display: block; margin-right: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .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"]:is(.point *) .wgbv-sc-lead { gap: calc(var(--wgbv-p) * 4); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-join { padding: 0 calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { left: calc(var(--wgbv-p) * 3); top: calc(var(--wgbv-p) * 198); width: calc(var(--wgbv-p) * 294); }
  }
  @container ((max-width: 329px) and (aspect-ratio < 0.96)) or ((min-width: 330px) and (aspect-ratio < 1.1)) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-h: 304; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { top: calc(var(--wgbv-p) * 200); flex-direction: column; justify-content: center; gap: calc(var(--wgbv-p) * 8); height: calc(var(--wgbv-p) * 100); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-tick { width: calc(var(--wgbv-p) * 36); height: calc(var(--wgbv-p) * 36); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-tick .wgbv-i { width: calc(var(--wgbv-p) * 20); height: calc(var(--wgbv-p) * 20); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-res { align-items: center; }
  }
  @container ((min-width: 310px) and (max-width: 329px) and (aspect-ratio < 0.95)) or ((min-width: 330px) and (aspect-ratio < 1.1)) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-h: 324; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { top: calc(var(--wgbv-p) * 204); gap: calc(var(--wgbv-p) * 10); height: calc(var(--wgbv-p) * 116); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-tick { width: calc(var(--wgbv-p) * 44); height: calc(var(--wgbv-p) * 44); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-tick .wgbv-i { width: calc(var(--wgbv-p) * 24); height: calc(var(--wgbv-p) * 24); }
  }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only). The panel and its result left 41 to 70 px empty above
   and below from 768 px and up to 101 px at 767 px. There, in an area up to 1.215 : 1 (under 330 px wide) or 1.62 : 1,
   or from 289.8 px tall, the phone's stacked layout takes the area's whole height: the panel (294 design px, its
   subtitle back on two lines beside Add) at the top and the participant's result under it at the panel's width,
   reaching down to the area's bottom (6 design px above it). The scale is that of a 300 x 247 design px stage, so it is
   never smaller than before. Where the result is 90 design px tall or more (up to 1.045 : 1, or from 337 px tall) it
   is shown as the participant sees it: the tick over the form's name and the result line, centred.
   In a wide area (over 2.4 : 1) up to 2.55 : 1 or from 234.7 px tall, the wide layout keeps the panel's subtitle and
   centres the result beside it: 510 x 200 design px instead of 163. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio <= 2.4) and (((max-width: 329px) and (aspect-ratio <= 1.215)) or ((min-width: 330px) and (aspect-ratio <= 1.62)) or (min-height: 289.8px)) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-w: 300; --wgbv-h: 247; top: 0; height: 100cqh; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-card { top: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 294); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-sub { display: block; margin-right: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .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"]:is(.point *) .wgbv-sc-lead { gap: calc(var(--wgbv-p) * 4); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-join { padding: 0 calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { left: calc(var(--wgbv-p) * 3); top: calc(var(--wgbv-p) * 191); bottom: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 294); height: auto; }
  }
  @container (aspect-ratio <= 2.4) and ((aspect-ratio <= 1.045) or (min-height: 337px)) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { flex-direction: column; justify-content: center; gap: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-tick { width: calc(var(--wgbv-p) * 44); height: calc(var(--wgbv-p) * 44); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-tick .wgbv-i { width: calc(var(--wgbv-p) * 24); height: calc(var(--wgbv-p) * 24); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-res { align-items: center; }
  }
  @container (aspect-ratio > 2.4) and ((aspect-ratio <= 2.55) or (min-height: 234.7px)) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-h: 200; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-card { top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-sub { display: block; margin-right: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { top: calc(var(--wgbv-p) * 73); }
  }
}
/* v2.8 (research cards from 480 to 991 px). Wide areas (over 2.4 : 1): the panel with its subtitle and the result
   beside it fill the height where the scale allows (the heights assume the text cap 1.1733 of every page with this
   visual): 195 design px from 2.55 to 2.615 : 1 (/population-health-cohort-study at 540 to 667 px, where the 163 px
   layout left 35 to 42 px), 213 from 249.9 px tall and 220 from 258.1 px (the rows further apart; /real-world-evidence-
   rwe and /patient-registry at 720 and 767 px, /population-health-cohort-study at 767 px). Under 330 px wide and 1.215
   to 1.282 : 1 (/genetic-research at 768 px, 41 px above the narrow layout): the narrow layout with the subtitle back,
   on two lines beside Add, the panel from the top and the result over its corner 8 design px under the second rule:
   300 x 234 design px, at the scale the area's width sets. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio > 2.55) and (aspect-ratio <= 2.615) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-h: 195; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-card { top: calc(var(--wgbv-p) * 3.5); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-sub { display: block; margin-right: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { top: calc(var(--wgbv-p) * 70.5); }
  }
  @container (aspect-ratio > 2.4) and (min-height: 249.9px) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-h: 213; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-card { top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-sub { display: block; margin-right: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-hr { margin: calc(var(--wgbv-p) * 17) calc(var(--wgbv-p) * -16); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-rule { height: calc(var(--wgbv-p) * 34); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-box { height: calc(var(--wgbv-p) * 34); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-r2 { margin-top: calc(var(--wgbv-p) * 13); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { top: calc(var(--wgbv-p) * 79.5); }
  }
  @container (aspect-ratio > 2.4) and (min-height: 258.1px) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-h: 220; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-hr { margin: calc(var(--wgbv-p) * 18) calc(var(--wgbv-p) * -16); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-rule { height: calc(var(--wgbv-p) * 36); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-box { height: calc(var(--wgbv-p) * 36); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-r2 { margin-top: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { top: calc(var(--wgbv-p) * 83); }
  }
  @container (max-width: 329px) and (aspect-ratio > 1.215) and (aspect-ratio <= 1.282) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-h: 234; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-card { top: calc(var(--wgbv-p) * 3); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-sub { display: block; margin-right: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { top: calc(var(--wgbv-p) * 179); }
  }
}
/* v2.8 (research cards up to 479 px): in a tall area from 360 px tall and 330 px wide (the "Screening" cards on
   /decentralised-clinical-trial, /genetic-research and /randomised-controlled-trials at 430 to 479 px, where the
   300 x 324 layout left 36 to 57 px) the stage takes the area's height at the same scale (the text cap): the panel's
   rows a little further apart (as in the tablet's 220 layout) and the participant's result reaching down to 6 design px
   above the area's bottom. */
@media (max-width: 479px) {
  @container (min-width: 330px) and (aspect-ratio < 1.1) and (min-height: 360px) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { top: 0; height: 100cqh; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-hr { margin: calc(var(--wgbv-p) * 18) calc(var(--wgbv-p) * -16); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-rule { height: calc(var(--wgbv-p) * 36); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-box { height: calc(var(--wgbv-p) * 36); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-r2 { margin-top: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { top: calc(var(--wgbv-p) * 224); bottom: calc(var(--wgbv-p) * 6); height: auto; }
  }
}
/* v2.8, wider phone areas (research cards from 362 px wide up to 479 px only):
   - 1.1 to 1.5 : 1 from 260.8 px tall (/observational-studies "Screening" at 440 to 479 px): the stacked 300 x 254 layout
     stopped at the text cap (1.0267) and left up to 34 px under the result; the stage takes the area's height and the
     result reaches down to 6 design px above its bottom, at the same scale;
   - 1.5 to 1.619 : 1 (/patient-registry and /real-world-evidence-rwe "Screening" at 460 to 479 px): the 400 x 242
     layout, sized by the area's width, left 34 to 39 px; the tablet's stacked layout on the area's whole height
     (300 x 247 scale, never smaller up to 400 / 247 : 1) is used;
   - over 2.4 : 1 up to 2.615 : 1 (/population-health-cohort-study "Smart participant screening" at 460 to 479 px): the
     510 x 163 wide layout left 33 to 43 px; the tablet's wide layouts with the panel's subtitle, 510 x 200 up to
     2.55 : 1 and 510 x 195 up to 2.615 : 1, at the same scale (the area's width sets it). */
@media (max-width: 479px) {
  @container (min-width: 362px) and (aspect-ratio >= 1.1) and (aspect-ratio < 1.5) and (min-height: 260.8px) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { top: 0; height: 100cqh; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { bottom: calc(var(--wgbv-p) * 6); height: auto; }
  }
  @container (min-width: 362px) and (aspect-ratio >= 1.5) and (aspect-ratio <= 1.619) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-w: 300; --wgbv-h: 247; top: 0; height: 100cqh; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-card { top: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 294); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-sub { display: block; margin-right: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .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"]:is(.point *) .wgbv-sc-lead { gap: calc(var(--wgbv-p) * 4); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-join { padding: 0 calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { left: calc(var(--wgbv-p) * 3); top: calc(var(--wgbv-p) * 191); bottom: calc(var(--wgbv-p) * 6); width: calc(var(--wgbv-p) * 294); height: auto; }
  }
  @container (min-width: 362px) and (aspect-ratio > 2.4) and (aspect-ratio <= 2.55) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-h: 200; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-card { top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-sub { display: block; margin-right: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { top: calc(var(--wgbv-p) * 73); }
  }
  @container (min-width: 362px) and (aspect-ratio > 2.55) and (aspect-ratio <= 2.615) {
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-stage { --wgbv-h: 195; }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-card { top: calc(var(--wgbv-p) * 3.5); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-sub { display: block; margin-right: calc(var(--wgbv-p) * 78); }
    .wgbv-visual[data-wgbv="screening"]:is(.point *) .wgbv-sc-ok { top: calc(var(--wgbv-p) * 70.5); }
  }
}

/* ---- 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; }

/* Tablet layout (v2.7, research cards from 768 to 991 px only: areas under 1.4 : 1 and 280 px tall or more). The phone
   took 80 % of the area's width and its digits capped the scale (27 design px), so its window (to under 7 8 9) ended
   short of the area's top: 49 to 78 px empty above the phone. Here it may take the full width and the pad's digits are
   24 design px, so the window fills the area's height (the card's edge still under 7 8 9) at a larger scale. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio < 1.4) and (min-height: 280px) {
    .wgbv-visual[data-wgbv="security"]:is(.point *) .wgbv-stage { --wgbv-fill: 1; }
    .wgbv-visual[data-wgbv="security"]:is(.point *) .wgbv-pin-k { font-size: calc(var(--wgbv-p) * 24); }
  }
}

/* Phone layouts (v2.7 bleed, research cards up to 479 px). The phone's window ended short of the area's top:
   - in an area under 200 px tall the phone took 80 % of the area's width, so its window (to under 1 2 3, 360 design
     px) left 45 px empty above the phone at 320 px. There it may take the full width, so the window fills the
     area's height at a larger scale (the card's edge still under 1 2 3);
   - in an area from 246.5 to 280 px tall (440 to 479 px) the pad's digits (27 design px) capped the scale, so the
     window (to under 4 5 6) left up to 50 px empty. There the digits are 24 design px, as on tablets, so the scale's
     cap rises from .57 to .64 and the window fills the area's height (the card's edge still under 4 5 6). */
@media (max-width: 479px) {
  @container (max-height: 199.98px) {
    .wgbv-visual[data-wgbv="security"]:is(.point *) .wgbv-stage { --wgbv-fill: 1; }
  }
  @container (min-height: 246.5px) and (max-height: 279.98px) {
    .wgbv-visual[data-wgbv="security"]:is(.point *) .wgbv-pin-k { font-size: calc(var(--wgbv-p) * 24); }
  }
}

/* ---- visuals/sleep-billing.css ---- */
/* ---- sleep-billing: the billing of a home sleep test ticked off: Medicare bulk billing for eligible patients,
   private health rebates sorted, transparent pricing upfront; then "Admin handled". Replaces "Group 2087330314.png" on
   /solutions/sleep-test "No surprise bills" (a "MedicalCare" badge over "BULK BILLING"): no logo, amounts, item numbers
   or rebate figures. ---- */
.wgbv-visual[data-wgbv="sleep-billing"] { --wgbv-ar: 340 / 210; --wgbv-w: 340; --wgbv-h: 210; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-panel { position: absolute; inset: calc(var(--wgbv-p) * 4); display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 10); padding: calc(var(--wgbv-p) * 13);
  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="sleep-billing"] .wgbv-bl-head { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--wgbv-p) * 8); }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-ic { display: grid; place-items: center; flex: none; 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="sleep-billing"] .wgbv-bl-ic .wgbv-i { width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); stroke-width: 1.9; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-title { font-size: calc(var(--wgbv-p) * 13.5); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-admin { display: inline-flex; align-items: center; gap: calc(var(--wgbv-p) * 4); height: calc(var(--wgbv-p) * 22); margin-left: auto; padding: 0 calc(var(--wgbv-p) * 9) 0 calc(var(--wgbv-p) * 7);
  border-radius: calc(var(--wgbv-p) * 11); background: #DCFCE7; color: #166534; font-size: calc(var(--wgbv-p) * 10); font-weight: 600; line-height: 1; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-admin .wgbv-i { width: calc(var(--wgbv-p) * 12); height: calc(var(--wgbv-p) * 12); stroke-width: 2; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-rows { display: flex; flex-direction: column; flex: 1; gap: calc(var(--wgbv-p) * 6); min-height: 0; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-row { position: relative; display: flex; align-items: center; flex: 1; gap: calc(var(--wgbv-p) * 9); min-width: 0; padding: 0 calc(var(--wgbv-p) * 10);
  border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 9); background: #fff; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-ri { 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) * 7); background: #F3F4F6; color: #4B5563; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-ri .wgbv-i { width: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 14); stroke-width: 1.8; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-rt { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 2); min-width: 0; font-size: calc(var(--wgbv-p) * 11.5); font-weight: 600; line-height: 1.2; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-rs { font-size: calc(var(--wgbv-p) * 9.5); font-weight: 400; color: #6B7280; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-ck { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 18); height: calc(var(--wgbv-p) * 18); margin-left: auto; border-radius: 50%; background: #16A34A; color: #fff; }
.wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-ck .wgbv-i { width: calc(var(--wgbv-p) * 11); height: calc(var(--wgbv-p) * 11); stroke-width: 3.2; }
/* Square layout (an area under 1.33 : 1: phones and 768 to 991 px): the same panel on 300 x 300, rows taller and
   their text one step larger. */
@container (aspect-ratio < 1.33) {
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 300; }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-panel { gap: calc(var(--wgbv-p) * 12); padding: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-rows { gap: calc(var(--wgbv-p) * 9); }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-row { gap: calc(var(--wgbv-p) * 11); padding: 0 calc(var(--wgbv-p) * 12); border-radius: calc(var(--wgbv-p) * 11); }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-ri { width: calc(var(--wgbv-p) * 30); height: calc(var(--wgbv-p) * 30); border-radius: calc(var(--wgbv-p) * 8); }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-ri .wgbv-i { width: calc(var(--wgbv-p) * 17); height: calc(var(--wgbv-p) * 17); }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-rt { gap: calc(var(--wgbv-p) * 3); font-size: calc(var(--wgbv-p) * 12.5); }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-rs { font-size: calc(var(--wgbv-p) * 10.5); }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-ck { width: calc(var(--wgbv-p) * 21); height: calc(var(--wgbv-p) * 21); }
}
/* Wide layout (2.6 : 1 or wider: the strip under the copy of the small card at 767 px): the title and "Admin handled"
   on the left, the three items side by side as tiles; 580 x 150. */
@container (aspect-ratio >= 2.6) {
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-stage { --wgbv-w: 580; --wgbv-h: 150; }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-panel { flex-direction: row; gap: calc(var(--wgbv-p) * 12); }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-head { flex-direction: column; align-items: flex-start; justify-content: center; flex: none; width: calc(var(--wgbv-p) * 104); gap: calc(var(--wgbv-p) * 10); }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-admin { margin-left: 0; }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-rows { flex-direction: row; gap: calc(var(--wgbv-p) * 8); min-width: 0; }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-rt { font-size: calc(var(--wgbv-p) * 11); }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-row { flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(var(--wgbv-p) * 8); padding: 0 calc(var(--wgbv-p) * 10); }
  .wgbv-visual[data-wgbv="sleep-billing"] .wgbv-bl-ck { position: absolute; right: calc(var(--wgbv-p) * 9); top: calc(var(--wgbv-p) * 9); }
}
/* Taller phone areas (v2.8, research cards from 362 px wide up to 479 px only; /solutions/sleep-test "No surprise bills"
   at 460 to 479 px). From 1.33 : 1 the 340 x 210 panel, which the area's width or the text cap (1.1407) stops, left 44
   to 46 px empty above and below; up to 1.371 : 1 (where the area's width still sets the scale) or from 282.9 px tall
   it is 340 x 248, its rows taller and set as in the square layout (the icon 30, the text one step larger). */
@media (max-width: 479px) {
  @container (min-width: 362px) and (aspect-ratio >= 1.33) and (aspect-ratio < 2.6) and ((aspect-ratio <= 1.371) or (min-height: 282.9px)) {
    .wgbv-visual[data-wgbv="sleep-billing"]:is(.point *) .wgbv-stage { --wgbv-w: 340; --wgbv-h: 248; }
    .wgbv-visual[data-wgbv="sleep-billing"]:is(.point *) .wgbv-bl-panel { gap: calc(var(--wgbv-p) * 12); padding: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="sleep-billing"]:is(.point *) .wgbv-bl-rows { gap: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="sleep-billing"]:is(.point *) .wgbv-bl-row { gap: calc(var(--wgbv-p) * 11); padding: 0 calc(var(--wgbv-p) * 12); border-radius: calc(var(--wgbv-p) * 11); }
    .wgbv-visual[data-wgbv="sleep-billing"]:is(.point *) .wgbv-bl-ri { width: calc(var(--wgbv-p) * 30); height: calc(var(--wgbv-p) * 30); border-radius: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="sleep-billing"]:is(.point *) .wgbv-bl-ri .wgbv-i { width: calc(var(--wgbv-p) * 17); height: calc(var(--wgbv-p) * 17); }
    .wgbv-visual[data-wgbv="sleep-billing"]:is(.point *) .wgbv-bl-rt { gap: calc(var(--wgbv-p) * 3); font-size: calc(var(--wgbv-p) * 12.5); }
    .wgbv-visual[data-wgbv="sleep-billing"]:is(.point *) .wgbv-bl-rs { font-size: calc(var(--wgbv-p) * 10.5); }
    .wgbv-visual[data-wgbv="sleep-billing"]:is(.point *) .wgbv-bl-ck { width: calc(var(--wgbv-p) * 21); height: calc(var(--wgbv-p) * 21); }
  }
}

/* ---- visuals/sleep-kit.css ---- */
/* ---- sleep-kit: the patient's home sleep test setup in three steps (unpack the kit, wear it overnight, send it back
   in the prepaid return bag), each ticked off, with the 24/7 helpline. Replaces "o2-ring-pulse-oximeter.png.avif" on
   /solutions/sleep-test "Equipment they can actually use" (a device photo with a reading): no device, brand or reading
   is drawn. ---- */
.wgbv-visual[data-wgbv="sleep-kit"] { --wgbv-ar: 412 / 204; --wgbv-w: 412; --wgbv-h: 204; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-panel { position: absolute; inset: calc(var(--wgbv-p) * 4); display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 10); padding: 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) * 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="sleep-kit"] .wgbv-sk-head { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--wgbv-p) * 8); }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-ic { display: grid; place-items: center; flex: none; 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="sleep-kit"] .wgbv-sk-ic .wgbv-i { width: calc(var(--wgbv-p) * 16); height: calc(var(--wgbv-p) * 16); stroke-width: 1.8; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-title { font-size: calc(var(--wgbv-p) * 13.5); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-time { display: inline-flex; align-items: center; gap: calc(var(--wgbv-p) * 4); height: calc(var(--wgbv-p) * 22); margin-left: auto; padding: 0 calc(var(--wgbv-p) * 9) 0 calc(var(--wgbv-p) * 7);
  border-radius: calc(var(--wgbv-p) * 11); background: #F3F4F6; color: #374151; font-size: calc(var(--wgbv-p) * 10); font-weight: 500; line-height: 1; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-time .wgbv-i { width: calc(var(--wgbv-p) * 11); height: calc(var(--wgbv-p) * 11); }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-steps { display: flex; flex: 1; gap: calc(var(--wgbv-p) * 8); min-height: 0; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-step { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; gap: calc(var(--wgbv-p) * 7); min-width: 0; padding: calc(var(--wgbv-p) * 9);
  border: calc(var(--wgbv-p) * .9) solid #E5E7EB; border-radius: calc(var(--wgbv-p) * 10); background: #fff; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-si { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 24); height: calc(var(--wgbv-p) * 24); border-radius: 50%; background: #F0EEFE; color: #6741D9; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-si .wgbv-i { width: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 14); stroke-width: 1.9; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-sl { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 2); min-width: 0; font-size: calc(var(--wgbv-p) * 11); font-weight: 600; line-height: 1.25; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-ss { font-size: calc(var(--wgbv-p) * 9.5); font-weight: 400; color: #6B7280; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-ck { position: absolute; right: calc(var(--wgbv-p) * 8); top: calc(var(--wgbv-p) * 8); display: grid; place-items: center; width: calc(var(--wgbv-p) * 16); height: calc(var(--wgbv-p) * 16); border-radius: 50%; background: #16A34A; color: #fff; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-ck .wgbv-i { width: calc(var(--wgbv-p) * 10); height: calc(var(--wgbv-p) * 10); stroke-width: 3.2; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-help { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 8); flex: none; height: calc(var(--wgbv-p) * 34); padding: 0 calc(var(--wgbv-p) * 6); border-radius: calc(var(--wgbv-p) * 9); background: #F5F3FF; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-hi { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 22); height: calc(var(--wgbv-p) * 22); border-radius: 50%; background: #6741D9; color: #fff; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-hi .wgbv-i { width: calc(var(--wgbv-p) * 12); height: calc(var(--wgbv-p) * 12); stroke-width: 2; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-ht { display: flex; align-items: baseline; gap: calc(var(--wgbv-p) * 6); min-width: 0; font-size: calc(var(--wgbv-p) * 11); font-weight: 600; line-height: 1.2; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-hs { font-size: calc(var(--wgbv-p) * 9.5); font-weight: 400; color: #6B7280; }
.wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-call { display: grid; place-items: center; height: calc(var(--wgbv-p) * 22); margin-left: auto; padding: 0 calc(var(--wgbv-p) * 12); border: calc(var(--wgbv-p) * .9) solid #C4B5FD; border-radius: calc(var(--wgbv-p) * 11);
  background: #fff; color: #5B21B6; font-size: calc(var(--wgbv-p) * 10.5); font-weight: 600; line-height: 1; }
/* List layout (an area under 1.63 : 1: beside the copy from 1280 px, under it at 768 to 991 px and on 320 px phones):
   the three steps as rows with their tick at the end, 300 x 220; the step names one step larger (7 px or more at 320). */
@container (aspect-ratio < 1.63) {
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 220; }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-panel { gap: calc(var(--wgbv-p) * 8); padding: calc(var(--wgbv-p) * 11); }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-sl { font-size: calc(var(--wgbv-p) * 11.5); }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-ss { font-size: calc(var(--wgbv-p) * 10); }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-steps { flex-direction: column; gap: calc(var(--wgbv-p) * 5); }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-step { flex-direction: row; align-items: center; gap: calc(var(--wgbv-p) * 9); padding: 0 calc(var(--wgbv-p) * 9); }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-sl { flex-direction: row; align-items: baseline; gap: calc(var(--wgbv-p) * 6); }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-ck { position: static; margin-left: auto; flex: none; }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-help { height: calc(var(--wgbv-p) * 32); }
}
/* Wide layout (2.6 : 1 or wider: the strip under the copy of the wide card from 1920 px): the title, setup time and
   helpline in a column on the left, the three steps beside them; 560 x 156. */
@container (aspect-ratio >= 2.6) {
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-stage { --wgbv-w: 560; --wgbv-h: 156; }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-panel { display: grid; grid-template-columns: calc(var(--wgbv-p) * 176) 1fr; grid-template-rows: 1fr auto; column-gap: calc(var(--wgbv-p) * 12); row-gap: calc(var(--wgbv-p) * 8); }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-head { grid-column: 1; grid-row: 1; align-content: flex-start; row-gap: calc(var(--wgbv-p) * 10); }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-time { margin-left: 0; }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-steps { grid-column: 2; grid-row: 1 / 3; }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-help { grid-column: 1; grid-row: 2; height: calc(var(--wgbv-p) * 40); }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-ht { flex-direction: column; align-items: flex-start; gap: calc(var(--wgbv-p) * 1); }
  .wgbv-visual[data-wgbv="sleep-kit"] .wgbv-sk-call { padding: 0 calc(var(--wgbv-p) * 10); }
}

/* ---- visuals/sleep-referral.css ---- */
/* ---- sleep-referral: the GP's online referral form is filled in (patient details, the clinical signs the page
   names) and sent; the patient gets a text that their kit is on the way. Replaces "612 (2) (1).png" on
   /solutions/sleep-test "One minute referral" (a phone with the "Patient Information" form). The form is a web panel
   (the page: "online referral portal"), the text a phone notification. ---- */
.wgbv-visual[data-wgbv="sleep-referral"] { --wgbv-ar: 360 / 206; --wgbv-w: 360; --wgbv-h: 206; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-form { position: absolute; left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 216); height: calc(var(--wgbv-p) * 198);
  display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 7); padding: 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) * 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="sleep-referral"] .wgbv-sr-head { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 8); font-size: calc(var(--wgbv-p) * 13.5); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-ic { 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) * 7); background: #F0EEFE; color: #6741D9; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-ic .wgbv-i { width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); stroke-width: 1.9; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-field { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 4); }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-label { font-size: calc(var(--wgbv-p) * 10.5); font-weight: 500; line-height: 1.2; color: #6B7280; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-input { display: flex; align-items: center; height: calc(var(--wgbv-p) * 24); padding: 0 calc(var(--wgbv-p) * 8); border: calc(var(--wgbv-p) * .9) solid #D1D5DB; border-radius: calc(var(--wgbv-p) * 6); background: #fff; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-fill { display: block; width: 62%; height: calc(var(--wgbv-p) * 6); border-radius: calc(var(--wgbv-p) * 3); background: #CBD5E1; transform-origin: 0 50%; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-chips { display: flex; flex-wrap: wrap; gap: calc(var(--wgbv-p) * 5); }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-chip { display: inline-flex; align-items: center; gap: calc(var(--wgbv-p) * 3); height: calc(var(--wgbv-p) * 20); padding: 0 calc(var(--wgbv-p) * 7) 0 calc(var(--wgbv-p) * 5);
  border: calc(var(--wgbv-p) * .9) solid #C4B5FD; border-radius: calc(var(--wgbv-p) * 10); background: #F5F3FF; color: #5B21B6; font-size: calc(var(--wgbv-p) * 10); font-weight: 500; line-height: 1; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-chip .wgbv-i { width: calc(var(--wgbv-p) * 10); height: calc(var(--wgbv-p) * 10); stroke-width: 3; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-send { --sent: 1; position: relative; display: grid; place-items: center; flex: none; height: calc(var(--wgbv-p) * 26); margin-top: auto; border-radius: calc(var(--wgbv-p) * 7);
  background: color-mix(in srgb, #16A34A calc(var(--sent) * 100%), #4F46E5); color: #fff; font-size: calc(var(--wgbv-p) * 11.5); font-weight: 600; line-height: 1; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-send > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: calc(var(--wgbv-p) * 5); }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-go { opacity: calc(1 - var(--sent)); }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-ok { opacity: var(--sent); }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-ok .wgbv-i { width: calc(var(--wgbv-p) * 12); height: calc(var(--wgbv-p) * 12); stroke-width: 3; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-sms { position: absolute; left: calc(var(--wgbv-p) * 226); top: calc(var(--wgbv-p) * 52); width: calc(var(--wgbv-p) * 132);
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(var(--wgbv-p) * 6); row-gap: calc(var(--wgbv-p) * 7); padding: calc(var(--wgbv-p) * 9);
  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) * 12) calc(var(--wgbv-p) * 24) rgba(16, 24, 40, .12); }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-app { display: grid; place-items: center; width: calc(var(--wgbv-p) * 21); height: calc(var(--wgbv-p) * 21); border-radius: calc(var(--wgbv-p) * 6); background: #6741D9; color: #fff; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-app .wgbv-i { width: calc(var(--wgbv-p) * 13); height: calc(var(--wgbv-p) * 13); stroke-width: 2; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-from { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 1); min-width: 0; font-size: calc(var(--wgbv-p) * 10); font-weight: 700; line-height: 1.2; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-kind { font-size: calc(var(--wgbv-p) * 9); font-weight: 400; color: #6B7280; }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-msg { grid-column: 1 / -1; font-size: calc(var(--wgbv-p) * 11); line-height: 1.35; color: #111827; text-wrap: balance; }
/* The touch point and the tap ripple land on a purple button: a light dot with a purple ring, and a light ripple,
   so both show on the button and on white. */
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-touch { background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 calc(var(--wgbv-p) * 1.5) rgba(103, 65, 217, .45); }
.wgbv-visual[data-wgbv="sleep-referral"] .wgbv-ripple { background: rgba(255, 255, 255, .5); }
/* Square layout (an area under 1.35 : 1: the wide card beside its copy at 1280 to 1440 px, and under it at 768 to
   991 px): the form across the stage and the text under it, 300 x 290; text one step larger (8 px or more at 1280). */
@container (aspect-ratio < 1.35) {
  .wgbv-visual[data-wgbv="sleep-referral"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 290; }
  .wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-form { width: calc(var(--wgbv-p) * 292); height: calc(var(--wgbv-p) * 200); }
  .wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-label { font-size: calc(var(--wgbv-p) * 11); }
  .wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-chip { font-size: calc(var(--wgbv-p) * 11); }
  .wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-sms { left: calc(var(--wgbv-p) * 52); top: calc(var(--wgbv-p) * 214); width: calc(var(--wgbv-p) * 244); }
  .wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-from { font-size: calc(var(--wgbv-p) * 10.5); }
  .wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-msg { font-size: calc(var(--wgbv-p) * 12); }
}
/* Wide layout (2.6 : 1 or wider: the strip under the copy of the wide cards from 1920 px): the form with its chips on
   one row and the send button in its header, the text beside it; 540 x 158. */
@container (aspect-ratio >= 2.6) {
  .wgbv-visual[data-wgbv="sleep-referral"] .wgbv-stage { --wgbv-w: 540; --wgbv-h: 158; }
  .wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-form { width: calc(var(--wgbv-p) * 346); height: calc(var(--wgbv-p) * 150); }
  .wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-send { position: absolute; right: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 11); width: calc(var(--wgbv-p) * 112); margin: 0; }
  .wgbv-visual[data-wgbv="sleep-referral"] .wgbv-sr-sms { left: calc(var(--wgbv-p) * 362); top: calc(var(--wgbv-p) * 36); width: calc(var(--wgbv-p) * 174); }
}
/* Taller tablet areas (v2.8, research cards from 480 to 767 px only; /solutions/sleep-test and the Sydney page, "Refer
   in seconds" at 667 to 767 px). The 360 x 206 layout, which the text cap (1.3037) stops, left 34 to 54 px empty above
   and below; from the heights at which the text cap still sets the scale, the form runs the stage's height (its fields
   further apart, the input and the chips a little taller) and the text message stays centred beside it: 360 x 224 from
   292 px tall, 360 x 244 from 318.1 px. */
@media (min-width: 480px) and (max-width: 767px) {
  @container (aspect-ratio >= 1.35) and (aspect-ratio < 2.6) and (min-height: 292px) {
    .wgbv-visual[data-wgbv="sleep-referral"]:is(.point *) .wgbv-stage { --wgbv-w: 360; --wgbv-h: 224; }
    .wgbv-visual[data-wgbv="sleep-referral"]:is(.point *) .wgbv-sr-form { height: calc(var(--wgbv-p) * 216); gap: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="sleep-referral"]:is(.point *) .wgbv-sr-input { height: calc(var(--wgbv-p) * 26); }
    .wgbv-visual[data-wgbv="sleep-referral"]:is(.point *) .wgbv-sr-chip { height: calc(var(--wgbv-p) * 22); }
    .wgbv-visual[data-wgbv="sleep-referral"]:is(.point *) .wgbv-sr-sms { top: calc(var(--wgbv-p) * 61); }
  }
  @container (aspect-ratio >= 1.35) and (aspect-ratio < 2.6) and (min-height: 318.1px) {
    .wgbv-visual[data-wgbv="sleep-referral"]:is(.point *) .wgbv-stage { --wgbv-w: 360; --wgbv-h: 244; }
    .wgbv-visual[data-wgbv="sleep-referral"]:is(.point *) .wgbv-sr-form { height: calc(var(--wgbv-p) * 236); gap: calc(var(--wgbv-p) * 13); }
    .wgbv-visual[data-wgbv="sleep-referral"]:is(.point *) .wgbv-sr-input { height: calc(var(--wgbv-p) * 28); }
    .wgbv-visual[data-wgbv="sleep-referral"]:is(.point *) .wgbv-sr-chip { height: calc(var(--wgbv-p) * 24); }
    .wgbv-visual[data-wgbv="sleep-referral"]:is(.point *) .wgbv-sr-sms { top: calc(var(--wgbv-p) * 71); }
  }
}

/* ---- visuals/sleep-report.css ---- */
/* ---- sleep-report: a sleep study report from WeGuide Sleep arrives in the GP's inbox and opens: the full analysis
   and the treatment recommendations, ticked. Replaces "Home with survey (13).png" on /solutions/sleep-test "Results when
   you need them" (a "Report" sheet with ticked skeleton lines): the report's text is still skeleton lines; no results,
   scores or dates. ---- */
.wgbv-visual[data-wgbv="sleep-report"] { --wgbv-ar: 340 / 206; --wgbv-w: 340; --wgbv-h: 206; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-inbox,
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-doc { position: absolute; display: flex; flex-direction: column; padding: 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) * 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="sleep-report"] .wgbv-rp-inbox { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 14); width: calc(var(--wgbv-p) * 196); height: calc(var(--wgbv-p) * 178); gap: calc(var(--wgbv-p) * 10); }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-ih { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 7); font-size: calc(var(--wgbv-p) * 13); font-weight: 700; line-height: 1.2; color: #111827; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-ih .wgbv-i { width: calc(var(--wgbv-p) * 16); height: calc(var(--wgbv-p) * 16); color: #6741D9; stroke-width: 1.9; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-list { display: flex; flex-direction: column; flex: 1; gap: calc(var(--wgbv-p) * 6); }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-mail { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 8); flex: 1; padding: 0 calc(var(--wgbv-p) * 9); border: calc(var(--wgbv-p) * .9) solid #EEF0F3; border-radius: calc(var(--wgbv-p) * 9); }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-new { border-color: #DDD6FE; background: #F5F3FF; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-dot { flex: none; width: calc(var(--wgbv-p) * 7); height: calc(var(--wgbv-p) * 7); border-radius: 50%; background: #E5E7EB; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-new .wgbv-rp-dot { background: #6741D9; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-mt { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 2); font-size: calc(var(--wgbv-p) * 10.5); font-weight: 700; line-height: 1.2; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-ms { font-size: calc(var(--wgbv-p) * 10.5); font-weight: 500; color: #4B5563; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-bars,
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-lines { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 5); flex: 1; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-bars > span,
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-lines > span { display: block; height: calc(var(--wgbv-p) * 5); border-radius: calc(var(--wgbv-p) * 3); background: #E5E7EB; transform-origin: 0 50%; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-bars > span:first-child { width: 55%; background: #D1D5DB; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-bars > span:last-child { width: 85%; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-doc { left: calc(var(--wgbv-p) * 150); top: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 186); height: calc(var(--wgbv-p) * 198); gap: calc(var(--wgbv-p) * 12);
  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) * 28) rgba(16, 24, 40, .13); }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-dh { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 8); padding-bottom: calc(var(--wgbv-p) * 10); border-bottom: calc(var(--wgbv-p) * .9) solid #EEF0F3; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-di { display: grid; place-items: center; flex: none; 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="sleep-report"] .wgbv-rp-di .wgbv-i { width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); stroke-width: 1.9; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-dt { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 2); min-width: 0; font-size: calc(var(--wgbv-p) * 11.5); font-weight: 700; line-height: 1.2; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-by { font-size: calc(var(--wgbv-p) * 9.5); font-weight: 400; color: #6B7280; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-sec { display: flex; align-items: flex-start; gap: calc(var(--wgbv-p) * 7); }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-ck { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 16); height: calc(var(--wgbv-p) * 16); border-radius: 50%; background: #DCFCE7; color: #15803D; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-ck .wgbv-i { width: calc(var(--wgbv-p) * 10); height: calc(var(--wgbv-p) * 10); stroke-width: 3.2; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-st { display: flex; flex-direction: column; gap: calc(var(--wgbv-p) * 7); flex: 1; min-width: 0; font-size: calc(var(--wgbv-p) * 11); font-weight: 600; line-height: 1.3; color: #111827; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-lines > span:nth-child(2) { width: 70%; }
.wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-lines > span:nth-child(3) { display: none; width: 82%; }
/* Tall layout (phones, an area under 0.95 : 1): the inbox on top and the opened report under it, 300 x 420. */
@container (aspect-ratio < 0.95) {
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 420; }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-inbox { top: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 292); height: calc(var(--wgbv-p) * 172); }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-doc { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 186); width: calc(var(--wgbv-p) * 292); height: calc(var(--wgbv-p) * 230); gap: calc(var(--wgbv-p) * 16); padding: calc(var(--wgbv-p) * 14); }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-dt { font-size: calc(var(--wgbv-p) * 13); }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-by { font-size: calc(var(--wgbv-p) * 10.5); }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-st { font-size: calc(var(--wgbv-p) * 12); gap: calc(var(--wgbv-p) * 9); }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-lines { gap: calc(var(--wgbv-p) * 7); }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-lines > span { height: calc(var(--wgbv-p) * 6); }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-lines > span:nth-child(3) { display: block; }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-doc { justify-content: space-between; }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-mt, .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-ms { font-size: calc(var(--wgbv-p) * 11.5); }
}
/* Square layout (an area of 0.95 to 1.4 : 1: the template's card on phones, which has no Perspective Grid under the
   copy): only the new mail in the inbox, and the opened report under it; 300 x 268. */
@container (aspect-ratio >= 0.95) and (aspect-ratio < 1.4) {
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 268; }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-inbox { top: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 292); height: calc(var(--wgbv-p) * 94); }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-mail:not(.wgbv-rp-new) { display: none; }
  .wgbv-visual[data-wgbv="sleep-report"] .wgbv-rp-doc { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 106); width: calc(var(--wgbv-p) * 292); height: calc(var(--wgbv-p) * 158); }
}
/* Taller areas (v2.8, research cards; /solutions/sleep-test "Results when you need them").
   - Phones from 362 px wide up to 479 px: a square area from 390.9 px tall (460 to 479 px) left 59 to 61 px empty
     above and below the 300 x 268 layout, which the text cap (1.1846) stops; there the inbox shows the report's mail and
     the mail under it, and the opened report shows a third skeleton line in each section: 300 x 330, the same scale.
   - A wide area (1.4 : 1 or wider) where the 340 x 206 layout left more than 32 px above and below (the Sydney page at
     460 px; 600 to 767 px): the inbox and the report run the stage's height, the report with a third skeleton line in
     each section and its sections spread over it: 340 x 232 on phones (up to 1.4655 : 1, where the area's width still
     sets the scale, or from 274.8 px tall), 340 x 254 from 480 to 767 px (from 343.9 px tall, the tablet text cap
     1.3538 x 254). */
@media (max-width: 479px) {
  @container (min-width: 362px) and (aspect-ratio >= 0.95) and (aspect-ratio < 1.4) and (min-height: 390.9px) {
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-stage { --wgbv-w: 300; --wgbv-h: 330; }
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-rp-inbox { top: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 292); height: calc(var(--wgbv-p) * 134); }
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-rp-mail:nth-child(2) { display: flex; }
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-rp-doc { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 144); width: calc(var(--wgbv-p) * 292); height: calc(var(--wgbv-p) * 182); justify-content: space-between; }
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-rp-lines > span:nth-child(3) { display: block; }
  }
  @container (min-width: 362px) and (aspect-ratio >= 1.4) and ((aspect-ratio <= 1.4655) or (min-height: 274.8px)) {
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-stage { --wgbv-w: 340; --wgbv-h: 232; }
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-rp-inbox { top: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 204); }
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-rp-doc { top: calc(var(--wgbv-p) * 4); height: calc(var(--wgbv-p) * 224); justify-content: space-between; }
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-rp-lines > span:nth-child(3) { display: block; }
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  @container (aspect-ratio >= 1.4) and (min-height: 343.9px) {
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-stage { --wgbv-w: 340; --wgbv-h: 254; }
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-rp-inbox { top: calc(var(--wgbv-p) * 14); height: calc(var(--wgbv-p) * 226); }
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-rp-doc { top: calc(var(--wgbv-p) * 4); height: calc(var(--wgbv-p) * 246); justify-content: space-between; }
    .wgbv-visual[data-wgbv="sleep-report"]:is(.point *) .wgbv-rp-lines > span:nth-child(3) { display: block; }
  }
}

/* ---- visuals/sleep-specialist.css ---- */
/* ---- sleep-specialist: a GP asks for a consultation with a sleep physician (a complex case, a second opinion); the
   request is sent and a sleep physician shows as available. Replaces "Group 2087330285.png" on /solutions/sleep-test
   "Real specialist backup" (photos of a patient and a sleep specialist linked through the WeGuide mark): no photos,
   names, times or video call. ---- */
.wgbv-visual[data-wgbv="sleep-specialist"] { --wgbv-ar: 340 / 210; --wgbv-w: 340; --wgbv-h: 210; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-req,
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-doc { position: absolute; display: flex; 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="sleep-specialist"] .wgbv-sp-req { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 206); height: calc(var(--wgbv-p) * 202); flex-direction: column; gap: calc(var(--wgbv-p) * 10); padding: calc(var(--wgbv-p) * 12); }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-head { display: flex; align-items: center; gap: calc(var(--wgbv-p) * 8); font-size: calc(var(--wgbv-p) * 13); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-ic { display: grid; place-items: center; flex: none; 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="sleep-specialist"] .wgbv-sp-ic .wgbv-i { width: calc(var(--wgbv-p) * 15); height: calc(var(--wgbv-p) * 15); stroke-width: 1.9; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-tags { display: flex; flex-wrap: wrap; gap: calc(var(--wgbv-p) * 4); }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-tag { display: inline-grid; place-items: center; height: calc(var(--wgbv-p) * 21); padding: 0 calc(var(--wgbv-p) * 7); border-radius: calc(var(--wgbv-p) * 6); font-size: calc(var(--wgbv-p) * 10); font-weight: 600; line-height: 1; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-t1 { background: #FEF3C7; color: #92400E; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-t2 { background: #F0EEFE; color: #5B21B6; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-note { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--wgbv-p) * 6); flex: 1; padding: calc(var(--wgbv-p) * 9); border: calc(var(--wgbv-p) * .9) solid #EEF0F3; border-radius: calc(var(--wgbv-p) * 8); background: #FAFAFB; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-note > span { display: block; height: calc(var(--wgbv-p) * 5); border-radius: calc(var(--wgbv-p) * 3); background: #E5E7EB; transform-origin: 0 50%; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-note > span:nth-child(2) { width: 88%; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-note > span:nth-child(3) { width: 60%; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-btn { --sent: 1; display: grid; place-items: center; flex: none; height: calc(var(--wgbv-p) * 26); border-radius: calc(var(--wgbv-p) * 7);
  background: color-mix(in srgb, #16A34A calc(var(--sent) * 100%), #4F46E5); color: #fff; font-size: calc(var(--wgbv-p) * 11); font-weight: 600; line-height: 1; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: calc(var(--wgbv-p) * 5); }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-go { opacity: calc(1 - var(--sent)); }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-ok { opacity: var(--sent); }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-ok .wgbv-i { width: calc(var(--wgbv-p) * 12); height: calc(var(--wgbv-p) * 12); stroke-width: 3; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-doc { left: calc(var(--wgbv-p) * 218); top: calc(var(--wgbv-p) * 48); width: calc(var(--wgbv-p) * 118); height: calc(var(--wgbv-p) * 114); flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--wgbv-p) * 9);
  box-shadow: 0 calc(var(--wgbv-p) * 2) calc(var(--wgbv-p) * 4) rgba(16, 24, 40, .05), 0 calc(var(--wgbv-p) * 12) calc(var(--wgbv-p) * 24) rgba(16, 24, 40, .12); }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-av { display: grid; place-items: center; flex: none; width: calc(var(--wgbv-p) * 38); height: calc(var(--wgbv-p) * 38); border-radius: 50%; background: #F0EEFE; color: #6741D9; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-av .wgbv-i { width: calc(var(--wgbv-p) * 20); height: calc(var(--wgbv-p) * 20); stroke-width: 1.8; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-name { display: flex; flex-direction: column; align-items: center; gap: calc(var(--wgbv-p) * 4); font-size: calc(var(--wgbv-p) * 10.5); font-weight: 700; line-height: 1.2; color: #111827; white-space: nowrap; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-st { display: inline-flex; align-items: center; gap: calc(var(--wgbv-p) * 5); font-size: calc(var(--wgbv-p) * 10); font-weight: 500; color: #15803D; }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-dot { width: calc(var(--wgbv-p) * 7); height: calc(var(--wgbv-p) * 7); border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 calc(var(--wgbv-p) * 2.5) #DCFCE7; }
/* The touch point and the tap ripple land on a purple button: a light dot with a purple ring, and a light ripple,
   so both show on the button and on white. */
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-touch { background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 calc(var(--wgbv-p) * 1.5) rgba(103, 65, 217, .45); }
.wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-ripple { background: rgba(255, 255, 255, .5); }
/* Square layout (an area under 1.33 : 1: phones and 768 to 991 px): the request across the top, the sleep physician
   under it as a row; 300 x 300. */
@container (aspect-ratio < 1.33) {
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-stage { --wgbv-w: 300; --wgbv-h: 300; }
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-req { width: calc(var(--wgbv-p) * 292); height: calc(var(--wgbv-p) * 186); gap: calc(var(--wgbv-p) * 9); }
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-tag { font-size: calc(var(--wgbv-p) * 10.5); }
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-doc { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 202); width: calc(var(--wgbv-p) * 292); height: calc(var(--wgbv-p) * 94); flex-direction: row; justify-content: flex-start; gap: calc(var(--wgbv-p) * 12); padding: 0 calc(var(--wgbv-p) * 16); }
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-av { width: calc(var(--wgbv-p) * 44); height: calc(var(--wgbv-p) * 44); }
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-av .wgbv-i { width: calc(var(--wgbv-p) * 23); height: calc(var(--wgbv-p) * 23); }
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-name { align-items: flex-start; gap: calc(var(--wgbv-p) * 5); font-size: calc(var(--wgbv-p) * 12.5); }
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-st { font-size: calc(var(--wgbv-p) * 11); }
}
/* Wide layout (2.6 : 1 or wider: the strip under the copy of the small card at 767 px): the request on the left, the
   sleep physician as a row beside it; 540 x 190. */
@container (aspect-ratio >= 2.6) {
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-stage { --wgbv-w: 540; --wgbv-h: 190; }
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-req { width: calc(var(--wgbv-p) * 300); height: calc(var(--wgbv-p) * 182); }
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-doc { left: calc(var(--wgbv-p) * 318); top: calc(var(--wgbv-p) * 48); width: calc(var(--wgbv-p) * 218); height: calc(var(--wgbv-p) * 94); flex-direction: row; justify-content: flex-start; gap: calc(var(--wgbv-p) * 12); padding: 0 calc(var(--wgbv-p) * 16); }
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-av { width: calc(var(--wgbv-p) * 44); height: calc(var(--wgbv-p) * 44); }
  .wgbv-visual[data-wgbv="sleep-specialist"] .wgbv-sp-name { align-items: flex-start; font-size: calc(var(--wgbv-p) * 12); }
}
/* Taller phone areas (v2.8, research cards from 362 px wide up to 479 px only; /solutions/sleep-test "Real specialist
   backup" at 460 to 479 px). From 1.33 : 1 the 340 x 210 layout, which the area's width or the text cap (1.1846) stops,
   left 44 to 45 px empty above and below; up to 1.371 : 1 (where the area's width still sets the scale) or from 293.8 px
   tall it is 340 x 248: the request runs the stage's height (its note taller) and the sleep physician stays centred
   beside it. */
@media (max-width: 479px) {
  @container (min-width: 362px) and (aspect-ratio >= 1.33) and (aspect-ratio < 2.6) and ((aspect-ratio <= 1.371) or (min-height: 293.8px)) {
    .wgbv-visual[data-wgbv="sleep-specialist"]:is(.point *) .wgbv-stage { --wgbv-w: 340; --wgbv-h: 248; }
    .wgbv-visual[data-wgbv="sleep-specialist"]:is(.point *) .wgbv-sp-req { height: calc(var(--wgbv-p) * 240); gap: calc(var(--wgbv-p) * 12); }
    .wgbv-visual[data-wgbv="sleep-specialist"]:is(.point *) .wgbv-sp-doc { top: calc(var(--wgbv-p) * 67); }
  }
}

/* ---- 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); }
}

/* Tablet layouts (v2.7, research cards from 480 to 991 px only). The app's name (18 design px) capped the scale, so
   from 600 px the listing stopped short of the area (29 to 35 px above and below) and from 768 px the square layout
   floated in an area about as tall as wide (59 to 74 px). Here the name is 16 design px (the scale's cap rises 12 %;
   it stays larger than WeGuide's 14). In the square layout the listing is a column like a store page: the icon (76)
   centred over the name, the organisation and Get / Open, the main WeGuide app under the rule; 300 x 316. */
@media (min-width: 480px) and (max-width: 991px) {
  .wgbv-visual[data-wgbv="store-listing"]:is(.point *) .wgbv-sl-name { font-size: calc(var(--wgbv-p) * 16); }
  @container (aspect-ratio < 1.3) {
    .wgbv-visual[data-wgbv="store-listing"]:is(.point *) .wgbv-stage { --wgbv-h: 316; }
    .wgbv-visual[data-wgbv="store-listing"]:is(.point *) .wgbv-sl-card { height: calc(var(--wgbv-p) * 304); }
    .wgbv-visual[data-wgbv="store-listing"]:is(.point *) .wgbv-sl-app { top: calc(var(--wgbv-p) * 58); height: calc(var(--wgbv-p) * 168); }
    .wgbv-visual[data-wgbv="store-listing"]:is(.point *) .wgbv-sl-icon { left: calc(var(--wgbv-p) * 104); width: calc(var(--wgbv-p) * 76); height: calc(var(--wgbv-p) * 76); border-radius: calc(var(--wgbv-p) * 17); }
    .wgbv-visual[data-wgbv="store-listing"]:is(.point *) .wgbv-sl-icon .wgbv-i { width: calc(var(--wgbv-p) * 34); height: calc(var(--wgbv-p) * 34); }
    .wgbv-visual[data-wgbv="store-listing"]:is(.point *) .wgbv-sl-name { left: 0; right: 0; top: calc(var(--wgbv-p) * 88); text-align: center; }
    .wgbv-visual[data-wgbv="store-listing"]:is(.point *) .wgbv-sl-org { left: 0; right: 0; top: calc(var(--wgbv-p) * 110); text-align: center; }
    .wgbv-visual[data-wgbv="store-listing"]:is(.point *) .wgbv-sl-get { left: calc(var(--wgbv-p) * 108); right: auto; top: calc(var(--wgbv-p) * 134); }
    .wgbv-visual[data-wgbv="store-listing"]:is(.point *) .wgbv-sl-rule { top: calc(var(--wgbv-p) * 240); }
    .wgbv-visual[data-wgbv="store-listing"]:is(.point *) .wgbv-sl-wg { top: calc(var(--wgbv-p) * 254); }
  }
}

/* ---- 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; }
}
/* Tall phone layouts (v2.6, research cards up to 479 px only). Two cards left 64 to 111 px empty above and below in the
   phone cards' tall areas, so there the main study's Screening Form (named by the eConsent Form's rule) comes first:
   - an area less than 1.2 times as wide as it is tall (or 1.5 from 300 px wide): the three cards as in the narrow
     layout (322 design px, the eligibility line on two lines, no "Available message"): 330 x 275 design px;
   - less than 1.08 : 1 (or 1.12 from 300 px wide): "Available message" on its own line, the cards 292 design px wide
     and 12 instead of 8 apart: 300 x 305 (under 0.88 : 1, 20 apart: 300 x 321);
   - a narrow area (under 300 px) from 1.2 to 1.6 : 1: the two cards, with "Available message" on its own line: 330 x 217.
   The Screening Form card is hidden everywhere else. */
.wgbv-visual[data-wgbv="substudy"] .wgbv-eng-0 { display: none; top: calc(var(--wgbv-p) * 1); height: calc(var(--wgbv-p) * 72); }
.wgbv-visual[data-wgbv="substudy"] .wgbv-eng-0 .wgbv-ef { margin-top: calc(var(--wgbv-p) * 6); }
@media (max-width: 479px) {
  @container (aspect-ratio < 1.2) or ((min-width: 300px) and (aspect-ratio < 1.5)) {
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-stage { --wgbv-w: 330; --wgbv-h: 275; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng { width: calc(var(--wgbv-p) * 322); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 { display: flex; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { top: calc(var(--wgbv-p) * 81); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b { top: calc(var(--wgbv-p) * 161); height: calc(var(--wgbv-p) * 112); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-el { align-items: flex-start; white-space: normal; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-st { display: none; }
  }
  @container (aspect-ratio < 1.08) or ((min-width: 300px) and (aspect-ratio < 1.12)) {
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-stage { --wgbv-w: 300; --wgbv-h: 305; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng { width: calc(var(--wgbv-p) * 292); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { top: calc(var(--wgbv-p) * 85); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b { top: calc(var(--wgbv-p) * 169); height: calc(var(--wgbv-p) * 134); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b .wgbv-ef { flex-wrap: wrap; row-gap: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-st { display: flex; }
  }
  @container (aspect-ratio < 0.88) {
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-stage { --wgbv-h: 321; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { top: calc(var(--wgbv-p) * 93); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b { top: calc(var(--wgbv-p) * 185); }
  }
  @container (max-width: 299px) and (aspect-ratio >= 1.2) and (aspect-ratio < 1.6) {
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-stage { --wgbv-h: 217; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b { height: calc(var(--wgbv-p) * 134); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b .wgbv-ef { flex-wrap: wrap; row-gap: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-st { display: flex; }
  }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only). The two cards left 57 to 80 px empty above and below
   them from 768 px and up to 78 px at 767 px. There, as on phones, the main study's Screening Form (named by the eConsent
   Form's rule) can come first, at the full 405 design px width, in the tallest of these that is not limited by the
   area's height (or, where the text cap stops the scale, from 1.2138 x its height in px):
   - two cards, the substudy 114 tall with "Available message" on its own line, 16 apart: 413 x 204 design px, up to
     2.025 : 1 or from 247.6 px tall;
   - three cards, the first two 61 tall (their lines a little tighter), 5 apart: 413 x 231, up to 1.788 : 1 or from
     280.4 px; three at their own sizes (72, 72, 96), 8 apart: 413 x 259, up to 1.595 : 1 or from 314.4 px; three with the
     substudy 114 tall, 14 apart: 413 x 290, up to 1.424 : 1 or from 352 px. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (min-width: 300px) and ((aspect-ratio <= 2.025) or (min-height: 247.6px)) {
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-stage { --wgbv-h: 204; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { display: flex; top: calc(var(--wgbv-p) * 1); height: calc(var(--wgbv-p) * 72); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b { display: flex; top: calc(var(--wgbv-p) * 89); height: calc(var(--wgbv-p) * 114); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 { display: none; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b .wgbv-ef { flex-wrap: wrap; row-gap: calc(var(--wgbv-p) * 6); }
  }
  @container (min-width: 300px) and ((aspect-ratio <= 1.788) or (min-height: 280.4px)) {
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-stage { --wgbv-h: 231; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 { display: flex; top: calc(var(--wgbv-p) * 1); height: calc(var(--wgbv-p) * 61); padding-top: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 .wgbv-et { margin-top: calc(var(--wgbv-p) * 2); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 .wgbv-ef { margin-top: calc(var(--wgbv-p) * 4); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { display: flex; top: calc(var(--wgbv-p) * 67); height: calc(var(--wgbv-p) * 61); padding-top: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a .wgbv-et { margin-top: calc(var(--wgbv-p) * 2); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a .wgbv-ef { margin-top: calc(var(--wgbv-p) * 4); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b { display: flex; top: calc(var(--wgbv-p) * 133); height: calc(var(--wgbv-p) * 96); }
  }
  @container (min-width: 300px) and ((aspect-ratio <= 1.595) or (min-height: 314.4px)) {
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-stage { --wgbv-h: 259; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 { padding-top: calc(var(--wgbv-p) * 11); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 .wgbv-et { margin-top: calc(var(--wgbv-p) * 3); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 .wgbv-ef { margin-top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { padding-top: calc(var(--wgbv-p) * 11); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a .wgbv-et { margin-top: calc(var(--wgbv-p) * 3); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a .wgbv-ef { margin-top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b .wgbv-ef { flex-wrap: nowrap; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 { display: flex; top: calc(var(--wgbv-p) * 1); height: calc(var(--wgbv-p) * 72); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { display: flex; top: calc(var(--wgbv-p) * 81); height: calc(var(--wgbv-p) * 72); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b { display: flex; top: calc(var(--wgbv-p) * 161); height: calc(var(--wgbv-p) * 96); }
  }
  @container (min-width: 300px) and ((aspect-ratio <= 1.424) or (min-height: 352px)) {
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-stage { --wgbv-h: 290; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 { padding-top: calc(var(--wgbv-p) * 11); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 .wgbv-et { margin-top: calc(var(--wgbv-p) * 3); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 .wgbv-ef { margin-top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { padding-top: calc(var(--wgbv-p) * 11); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a .wgbv-et { margin-top: calc(var(--wgbv-p) * 3); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a .wgbv-ef { margin-top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 { display: flex; top: calc(var(--wgbv-p) * 1); height: calc(var(--wgbv-p) * 72); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { display: flex; top: calc(var(--wgbv-p) * 87); height: calc(var(--wgbv-p) * 72); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b { display: flex; top: calc(var(--wgbv-p) * 173); height: calc(var(--wgbv-p) * 114); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b .wgbv-ef { flex-wrap: wrap; row-gap: calc(var(--wgbv-p) * 6); }
  }
}
/* Wider phone areas (v2.8, research cards from 362 px wide up to 479 px only).
   - From 324 px tall and under 1.5 : 1 (/real-world-evidence-rwe at 460 to 479 px, /genetic-research and
     /patient-registry at 479 px), the three cards of the 330 x 275 layout left 36 to 43 px empty above and below; the
     300 x 305 layout ("Available message" on its own line) is used, at the same scale (the text cap, 1.0621 on these
     cards, which 305 design px fit from 324 px).
   - From 1.5 : 1 (/population-health-cohort-study "Effortless substudy management" at 460 to 479 px), the 413 x 178
     cards sized by the area's width left 56 to 62 px empty; the tablet's three-card layouts are used where the area's
     width still sets the scale: the first two 61 tall, 413 x 231, up to 1.788 : 1; three at their own sizes, 413 x 259,
     up to 1.595 : 1. */
@media (max-width: 479px) {
  @container (min-width: 362px) and (min-height: 324px) and (aspect-ratio >= 0.88) and (aspect-ratio < 1.5) {
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-stage { --wgbv-w: 300; --wgbv-h: 305; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng { width: calc(var(--wgbv-p) * 292); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 { display: flex; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { top: calc(var(--wgbv-p) * 85); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b { top: calc(var(--wgbv-p) * 169); height: calc(var(--wgbv-p) * 134); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b .wgbv-ef { flex-wrap: wrap; row-gap: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-el { align-items: flex-start; white-space: normal; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-st { display: flex; }
  }
  @container (min-width: 362px) and (aspect-ratio >= 1.5) and (aspect-ratio <= 1.788) {
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-stage { --wgbv-h: 231; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 { display: flex; top: calc(var(--wgbv-p) * 1); height: calc(var(--wgbv-p) * 61); padding-top: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 .wgbv-et { margin-top: calc(var(--wgbv-p) * 2); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 .wgbv-ef { margin-top: calc(var(--wgbv-p) * 4); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { display: flex; top: calc(var(--wgbv-p) * 67); height: calc(var(--wgbv-p) * 61); padding-top: calc(var(--wgbv-p) * 8); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a .wgbv-et { margin-top: calc(var(--wgbv-p) * 2); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a .wgbv-ef { margin-top: calc(var(--wgbv-p) * 4); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b { display: flex; top: calc(var(--wgbv-p) * 133); height: calc(var(--wgbv-p) * 96); }
  }
  @container (min-width: 362px) and (aspect-ratio >= 1.5) and (aspect-ratio <= 1.595) {
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-stage { --wgbv-h: 259; }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 { top: calc(var(--wgbv-p) * 1); height: calc(var(--wgbv-p) * 72); padding-top: calc(var(--wgbv-p) * 11); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 .wgbv-et { margin-top: calc(var(--wgbv-p) * 3); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-0 .wgbv-ef { margin-top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a { top: calc(var(--wgbv-p) * 81); height: calc(var(--wgbv-p) * 72); padding-top: calc(var(--wgbv-p) * 11); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a .wgbv-et { margin-top: calc(var(--wgbv-p) * 3); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-a .wgbv-ef { margin-top: calc(var(--wgbv-p) * 6); }
    .wgbv-visual[data-wgbv="substudy"]:is(.point *) .wgbv-eng-b { top: calc(var(--wgbv-p) * 161); height: calc(var(--wgbv-p) * 96); }
  }
}

/* ---- 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)); }
/* Tablet layouts (v2.7, research cards from 480 to 991 px only). The answer card ran off the card's bottom edge with
   only the question and two answers showing, low in a tall area (43 to 58 px empty above it from 768 px, up to 245 px
   at 767 px). There the window shows more of the same card, so it starts at the area's top and the card's bottom edge
   still crops it, fading out over its last 32 design px as before:
   - 400 design px tall (three answers); in an area from 291 px tall 450 (answer cells 72 tall, 83 apart); from 327 px
     456 (all four answers, cells as before);
   - from 360 px tall (the 600 to 767 px cards) the question is 21 instead of 24.2 design px, so fit() lets the design
     pixel grow to 1.1 x body / 21 and the whole card is drawn about 15 % larger (the question stays at the text cap);
     the cells 84 tall, 96 apart, the window 476;
   - from 400, 440 and 470 px tall the answer cells are taller (72, 80, 84 design px; app-sized touch targets) and
     further apart: 488, 526 and 556 design px.
   The cell spacing in each band of area heights is chosen so that the card's bottom edge never crosses an answer's
   label: it falls between two answers, or the window ends below the last label. */
@media (min-width: 480px) and (max-width: 991px) {
  .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-stage { --wgbv-h: 400; -webkit-mask-image: linear-gradient(#000 calc(var(--wgbv-p) * (var(--wgbv-h) - 32)), transparent calc(var(--wgbv-p) * var(--wgbv-h))); mask-image: linear-gradient(#000 calc(var(--wgbv-p) * (var(--wgbv-h) - 32)), transparent calc(var(--wgbv-p) * var(--wgbv-h))); }
  @container (min-height: 291px) {
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-stage { --wgbv-h: 450; }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opts { gap: calc(var(--wgbv-p) * 11); }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opt { height: calc(var(--wgbv-p) * 72); }
  }
  @container (min-height: 327px) {
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-stage { --wgbv-h: 456; }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opts { gap: calc(var(--wgbv-p) * 9.2); }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opt { height: calc(var(--wgbv-p) * 64.4); }
  }
  @container (min-height: 360px) {
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-stage { --wgbv-h: 476; }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-q { font-size: calc(var(--wgbv-p) * 21); }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opts { gap: calc(var(--wgbv-p) * 12); }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opt { height: calc(var(--wgbv-p) * 84); }
  }
  @container (min-height: 400px) {
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-stage { --wgbv-h: 488; }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opts { gap: calc(var(--wgbv-p) * 10); }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opt { height: calc(var(--wgbv-p) * 72); }
  }
  @container (min-height: 440px) {
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-stage { --wgbv-h: 526; }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opts { gap: calc(var(--wgbv-p) * 12); }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opt { height: calc(var(--wgbv-p) * 80); }
  }
  @container (min-height: 470px) {
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-stage { --wgbv-h: 556; }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opts { gap: calc(var(--wgbv-p) * 14); margin-top: calc(var(--wgbv-p) * 40); }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opt { height: calc(var(--wgbv-p) * 84); }
  }
}

/* Phone layout (v2.7 bleed, research cards up to 479 px: areas under 0.93 : 1). The answer card ran off the card's
   bottom edge with only the question and two answers showing, low in a tall area (165 to 203 px empty above it).
   Here the window starts 4 design px above the answer card and runs to the card's bottom edge:
   - the question is 21 instead of 24.2 design px (as on tablets), so fit() lets the scale grow to 1.1 x body / 21,
     and the window is the answer card plus 8 design px each side (472 instead of 536): the card is drawn 13 to 15 %
     larger than before;
   - the four answers share the card's height (64.4 to 88 design px tall each, 12 apart) and end 41 design px above the
     card's edge; the answer card runs on under them and fades out over its last 32 design px at the edge, so the edge
     never crosses an answer. */
@media (max-width: 479px) {
  @container (aspect-ratio < 0.93) {
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-stage { --wgbv-cx: 32; --wgbv-cw: 472; --wgbv-fill: 1; --wgbv-cy: 4; --wgbv-ch: 700; --wgbv-vis: .5;
      height: calc(100cqh + var(--wgbv-p) * 4);
      -webkit-mask-image: linear-gradient(#000 calc(100% - var(--wgbv-p) * 32), transparent); mask-image: linear-gradient(#000 calc(100% - var(--wgbv-p) * 32), transparent); }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-card { height: calc(100cqh + var(--wgbv-p) * 32); }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-q { font-size: calc(var(--wgbv-p) * 21); }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opts { flex: 1 1 auto; min-height: 0; gap: calc(var(--wgbv-p) * 12); margin-bottom: calc(var(--wgbv-p) * 80); }
    .wgbv-visual[data-wgbv="survey"]:is(.point *) .wgbv-sv-opt { flex: 1 1 0; height: auto; min-height: calc(var(--wgbv-p) * 64.4); max-height: calc(var(--wgbv-p) * 88); }
  }
}

/* ---- 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); }
}
/* Phone call layout on the research cards (v2.6, .point only, up to 479 px): an area 1.5 to 1.75 times as wide as it
   is tall (/telehealth "Virtual Consultations made easy", 248 x 160 to 358 x 219 px) took the 2.5 : 1 strip and left
   37 to 61 px above and below it. There the two video tiles stand taller (140 x 156 design px; the people fill them
   from the bottom at 125 %), the WeGuide mark sits between them and the controls overlap their bottom edge, as in the
   strip: 316 x 194 design px, so the call fills the band and is drawn larger than the strip was. The Televisits and
   Tele-consultation cards (under 1.5 : 1) keep the tall layout above. */
@media (max-width: 479px) {
  @container (aspect-ratio >= 1.5) and (aspect-ratio < 1.75) {
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-stage { --wgbv-w: 316; --wgbv-h: 194; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-tile { width: calc(var(--wgbv-p) * 140); height: calc(var(--wgbv-p) * 156); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-doc { left: calc(var(--wgbv-p) * 170); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-feed { left: -12.5%; width: 125%; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-link { display: none; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-badge { left: calc(var(--wgbv-p) * 136); top: calc(var(--wgbv-p) * 64); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-ctl { left: calc(var(--wgbv-p) * 109); top: calc(var(--wgbv-p) * 156); }
  }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only). In areas from 1.5 : 1 the 2.5 : 1 strip left 50 to
   84 px empty above and below (/telehealth "Virtual Consultations made easy", the Tele-consultation cards above their
   copy). There the phone's call layout is used (the two tiles 140 x 156 design px, the WeGuide mark between them, the
   controls over their bottom edge: 316 x 194) up to 2.062 : 1 or from 325.2 px tall, so it is never smaller than the
   strip; from 2.062 to 2.247 : 1 the same call with 140 px tall tiles (316 x 178), and from 368.8 px tall with 182 px
   tall tiles (316 x 220). Under 1.5 : 1 the tall layout stays. */
@media (min-width: 480px) and (max-width: 991px) {
  @container (aspect-ratio >= 1.5) and (aspect-ratio <= 2.247) {
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-stage { --wgbv-w: 316; --wgbv-h: 178; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-tile { width: calc(var(--wgbv-p) * 140); height: calc(var(--wgbv-p) * 140); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-doc { left: calc(var(--wgbv-p) * 170); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-feed { left: -12.5%; width: 125%; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-link { display: none; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-badge { left: calc(var(--wgbv-p) * 136); top: calc(var(--wgbv-p) * 56); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-ctl { left: calc(var(--wgbv-p) * 109); top: calc(var(--wgbv-p) * 140); }
  }
  @container (aspect-ratio >= 1.5) and ((aspect-ratio <= 2.062) or (min-height: 325.2px)) {
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-stage { --wgbv-w: 316; --wgbv-h: 194; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-tile { width: calc(var(--wgbv-p) * 140); height: calc(var(--wgbv-p) * 156); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-doc { left: calc(var(--wgbv-p) * 170); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-feed { left: -12.5%; width: 125%; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-link { display: none; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-badge { left: calc(var(--wgbv-p) * 136); top: calc(var(--wgbv-p) * 64); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-ctl { left: calc(var(--wgbv-p) * 109); top: calc(var(--wgbv-p) * 156); }
  }
  @container (aspect-ratio >= 1.5) and (min-height: 368.8px) {
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-stage { --wgbv-w: 316; --wgbv-h: 220; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-tile { width: calc(var(--wgbv-p) * 140); height: calc(var(--wgbv-p) * 182); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-doc { left: calc(var(--wgbv-p) * 170); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-feed { left: -12.5%; width: 125%; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-link { display: none; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-badge { left: calc(var(--wgbv-p) * 136); top: calc(var(--wgbv-p) * 77); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-ctl { left: calc(var(--wgbv-p) * 109); top: calc(var(--wgbv-p) * 182); }
  }
}
/* Capped band (v2.8, 480 to 767 px). With the card image capped at 360 px (core.css) the area of "Virtual Consultations
   made easy" at 767 px is 366 px tall, just under the 220 design px call (368.8 px at the text cap): the 194 call left
   50 px above it. From 365.4 px tall the call is 218 design px (tiles 180 tall), at the text cap. */
@media (min-width: 480px) and (max-width: 767px) {
  @container (aspect-ratio >= 1.5) and (min-height: 365.4px) and (max-height: 368.79px) {
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-stage { --wgbv-w: 316; --wgbv-h: 218; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-tile { width: calc(var(--wgbv-p) * 140); height: calc(var(--wgbv-p) * 180); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-doc { left: calc(var(--wgbv-p) * 170); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-feed { left: -12.5%; width: 125%; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-link { display: none; }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-badge { left: calc(var(--wgbv-p) * 136); top: calc(var(--wgbv-p) * 76); }
    .wgbv-visual[data-wgbv="televisit"]:is(.point *) .wgbv-tv-ctl { left: calc(var(--wgbv-p) * 109); top: calc(var(--wgbv-p) * 180); }
  }
}

/* ---- 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; }
/* Phone layouts on the research cards (v2.6, .point only, up to 479 px; the care card keeps its layout). The design
   pixel is capped there (--wgbv-pmax: the 22 px values at 1.1 x the card's 14 px body text, 0.7 px), so the visual
   cannot grow into a taller area; it takes a taller composition instead, picked by the area's height:
   - 185 to 205 px (/movement-studies and /wearable-device-studies at 360 px, /employee-wellbeing-program at 390 and
     430 px): the same two columns, 250 design px tall (insight cards 72, sync tile 244 with its content centred);
   - 205 px or more (/movement-studies and /wearable-device-studies at 390 and 430 px): the sync result becomes a
     banner on top (the watch on the left, "Sync Completed!" and the message beside it) and the three insight cards
     run full width under it: 400 x 291 (banner 70, cards 64), and 400 x 320 from 225 px (banner 80, cards 68).
   Lower areas (the cards at 320 px, /citizen-science) keep the layout above. */
@media (max-width: 479px) {
  @container (min-height: 185px) and (max-height: 204.98px) {
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-stage { --wgbv-h: 250; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-sync { top: calc(var(--wgbv-p) * 3); height: calc(var(--wgbv-p) * 244); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-watch { top: calc(var(--wgbv-p) * 29.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-h { top: calc(var(--wgbv-p) * 141.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-busy { top: calc(var(--wgbv-p) * 139.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-msg { top: calc(var(--wgbv-p) * 166.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in { height: calc(var(--wgbv-p) * 72); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(2) { top: calc(var(--wgbv-p) * 3); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(3) { top: calc(var(--wgbv-p) * 89); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(4) { top: calc(var(--wgbv-p) * 175); }
  }
  @container (max-width: 339px) and (min-height: 185px) and (max-height: 204.98px) {
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-watch { top: calc(var(--wgbv-p) * 55); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-h, .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-busy { top: calc(var(--wgbv-p) * 171); }
  }
  @container (min-height: 205px) {
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-stage { --wgbv-w: 400; --wgbv-h: 291; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-sync { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 3); width: calc(var(--wgbv-p) * 392); height: calc(var(--wgbv-p) * 70); text-align: left; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-watch { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 54); height: calc(var(--wgbv-p) * 54); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-h, .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-busy, .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-msg { left: calc(var(--wgbv-p) * 80); right: calc(var(--wgbv-p) * 14); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-h { top: calc(var(--wgbv-p) * 16.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-busy { top: calc(var(--wgbv-p) * 27.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-msg { display: block; top: calc(var(--wgbv-p) * 37.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in { left: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 392); height: calc(var(--wgbv-p) * 64); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(2) { top: calc(var(--wgbv-p) * 81); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(3) { top: calc(var(--wgbv-p) * 153); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(4) { top: calc(var(--wgbv-p) * 225); }
  }
  @container (min-height: 225px) {
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-stage { --wgbv-h: 320; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-sync { height: calc(var(--wgbv-p) * 80); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-watch { left: calc(var(--wgbv-p) * 13); top: calc(var(--wgbv-p) * 9); width: calc(var(--wgbv-p) * 62); height: calc(var(--wgbv-p) * 62); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-h, .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-busy, .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-msg { left: calc(var(--wgbv-p) * 88); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-h { top: calc(var(--wgbv-p) * 21.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-busy { top: calc(var(--wgbv-p) * 32.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-msg { top: calc(var(--wgbv-p) * 42.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in { height: calc(var(--wgbv-p) * 68); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(2) { top: calc(var(--wgbv-p) * 93); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(3) { top: calc(var(--wgbv-p) * 171); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(4) { top: calc(var(--wgbv-p) * 249); }
  }
}
/* Tablet layouts (v2.7, research cards from 480 to 991 px only). The design pixel is capped there at 0.8 px (the
   22 px values at 1.1 x the card's 16 px body text), so in a taller area the visual cannot grow; it left 41 to 78 px
   empty above and below. There it takes the phone's taller compositions, picked by the area's height (at 0.8 px):
   - from 200 px: the two columns 250 design px tall (the phone's), from 224 px 280 tall (insight cards 86, sync tile
     274 with its content centred);
   - from 232.8 px: the sync result as a banner on top and the three insight cards full width under it, 390 x 291
     (as on phones, 382 wide instead of 392 so it keeps 0.8 px in the 313 px areas at 768 px), from 256 px 390 x 320,
     from 280 px 390 x 350 (banner 88, cards 74). */
@media (min-width: 480px) and (max-width: 991px) {
  @container (min-height: 200px) {
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-stage { --wgbv-h: 250; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-sync { top: calc(var(--wgbv-p) * 3); height: calc(var(--wgbv-p) * 244); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-watch { top: calc(var(--wgbv-p) * 29.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-h { top: calc(var(--wgbv-p) * 141.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-busy { top: calc(var(--wgbv-p) * 139.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-msg { top: calc(var(--wgbv-p) * 166.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in { height: calc(var(--wgbv-p) * 72); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(2) { top: calc(var(--wgbv-p) * 3); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(3) { top: calc(var(--wgbv-p) * 89); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(4) { top: calc(var(--wgbv-p) * 175); }
  }
  @container (min-height: 224px) {
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-stage { --wgbv-h: 280; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-sync { height: calc(var(--wgbv-p) * 274); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-watch { top: calc(var(--wgbv-p) * 44.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-h { top: calc(var(--wgbv-p) * 156.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-busy { top: calc(var(--wgbv-p) * 154.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-msg { top: calc(var(--wgbv-p) * 181.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in { height: calc(var(--wgbv-p) * 86); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(3) { top: calc(var(--wgbv-p) * 97); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(4) { top: calc(var(--wgbv-p) * 191); }
  }
  @container (min-height: 232.8px) {
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-stage { --wgbv-w: 390; --wgbv-h: 291; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-sync { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 3); width: calc(var(--wgbv-p) * 382); height: calc(var(--wgbv-p) * 70); text-align: left; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-watch { left: calc(var(--wgbv-p) * 12); top: calc(var(--wgbv-p) * 8); width: calc(var(--wgbv-p) * 54); height: calc(var(--wgbv-p) * 54); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-h { left: calc(var(--wgbv-p) * 80); right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 16.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-busy { left: calc(var(--wgbv-p) * 80); right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 27.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-msg { display: block; left: calc(var(--wgbv-p) * 80); right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 37.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in { left: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 382); height: calc(var(--wgbv-p) * 64); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(2) { top: calc(var(--wgbv-p) * 81); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(3) { top: calc(var(--wgbv-p) * 153); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(4) { top: calc(var(--wgbv-p) * 225); }
  }
  @container (min-height: 256px) {
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-stage { --wgbv-w: 390; --wgbv-h: 320; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-sync { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 3); width: calc(var(--wgbv-p) * 382); height: calc(var(--wgbv-p) * 80); text-align: left; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-watch { left: calc(var(--wgbv-p) * 13); top: calc(var(--wgbv-p) * 9); width: calc(var(--wgbv-p) * 62); height: calc(var(--wgbv-p) * 62); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-h { left: calc(var(--wgbv-p) * 88); right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 21.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-busy { left: calc(var(--wgbv-p) * 88); right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 32.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-msg { display: block; left: calc(var(--wgbv-p) * 88); right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 42.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in { left: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 382); height: calc(var(--wgbv-p) * 68); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(2) { top: calc(var(--wgbv-p) * 93); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(3) { top: calc(var(--wgbv-p) * 171); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(4) { top: calc(var(--wgbv-p) * 249); }
  }
  @container (min-height: 280px) {
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-stage { --wgbv-w: 390; --wgbv-h: 350; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-sync { left: calc(var(--wgbv-p) * 4); top: calc(var(--wgbv-p) * 3); width: calc(var(--wgbv-p) * 382); height: calc(var(--wgbv-p) * 88); text-align: left; }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-watch { left: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 11); width: calc(var(--wgbv-p) * 66); height: calc(var(--wgbv-p) * 66); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-h { left: calc(var(--wgbv-p) * 94); right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 25.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-busy { left: calc(var(--wgbv-p) * 94); right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 36.5); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-msg { display: block; left: calc(var(--wgbv-p) * 94); right: calc(var(--wgbv-p) * 14); top: calc(var(--wgbv-p) * 47); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in { left: calc(var(--wgbv-p) * 4); width: calc(var(--wgbv-p) * 382); height: calc(var(--wgbv-p) * 74); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(2) { top: calc(var(--wgbv-p) * 101); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(3) { top: calc(var(--wgbv-p) * 185); }
    .wgbv-visual[data-wgbv="wearable"]:is(.point *) .wgbv-in:nth-child(4) { top: calc(var(--wgbv-p) * 269); }
  }
}