/* ============================================================================
   Mockup kit
   One frame, a set of parts that slot into it. Every feature on the Features
   page gets its own small mockup, and they all read as the same product
   because they are assembled from the same pieces rather than drawn one by one.

   Nothing here is a screenshot: it is all live DOM, so it stays sharp at any
   zoom, themes with the design system, and costs nothing to load.
   ============================================================================ */

/* A device, not a browser window. The bezel is a thick border rather than a
   wrapper element, so the screen is still the element's own padding box and
   overflow:hidden rounds the app inside it — no extra markup, and every mockup
   in the kit becomes a tablet at once.

   Three shadows do the work: a deep ambient one so it sits on the page, a tight
   dark ring that reads as the moulded edge, and an inner highlight along the
   top where the light would catch.

   The bezel is a TRANSPARENT border with the dark fill painted underneath it as
   a background layer. That sounds roundabout, but a background layer can carry
   more than a flat colour — which is how the front camera gets onto the bezel
   without a spare element to hang it on. Layers paint first-listed on top:
   camera, then the screen over the padding box, then the shell filling the
   border box beneath both. */
.mock{
  border:14px solid transparent; border-radius:32px; overflow:hidden;
  background:
    radial-gradient(circle 2.4px at 50% 6px, #4C566C 0 100%, transparent 100%) border-box no-repeat,
    linear-gradient(var(--canvas), var(--canvas)) padding-box,
    linear-gradient(168deg, #2B3244, #151A26 62%) border-box;
  box-shadow:0 40px 80px -44px rgba(10,16,32,.55),
             0 2px 8px rgba(10,16,32,.14),
             0 0 0 1.5px rgba(10,16,32,.5),
             inset 0 1px 0 rgba(255,255,255,.9);
}
@media (max-width:640px){ .mock{ border-width:9px; border-radius:24px } }

/* The shell. The buttons have to sit OUTSIDE the screen's clip, and .mock clips
   its own descendants so the app rounds into the bezel — so they hang off a
   wrapper instead. Power on the top edge, volume rocker on the side, both
   tucked behind the body so they read as moulded into it. */
.tablet{ position:relative; isolation:isolate }
.tablet > .mock{ position:relative; z-index:1 }

/* One device, one size, the whole page down. Every screen here is the same
   product, so it is the same object — a frame that changes size from row to row
   reads as a different product each time. The height is set rather than
   measured for the same reason: with a floor, one panel taller than the rest
   would quietly give its channel a bigger device than the others. */
.feat .tablet, .pinset__stage .tablet{
  /* Sized to the fullest screen in the page — the HCP 360 profile, which needs
     501px — rather than to the average. Everything is one device, so one screen
     needing more means they all get more; and 700x530 is 4:3, which is what a
     tablet actually is. */
  --device-w:min(100%, 770px); --device-h:466px;
  width:var(--device-w); margin-inline:auto;
}
.feat .tablet > .mock > .mock__body{ height:var(--device-h); align-content:start }
.feat .tablet > .mock > .dash,
.feat .tablet > .mock > .vdash{ height:var(--device-h) }
.pinset__stage .tablet > .mock > .frame__body{ height:var(--device-h) }
/* the panel has to fill the frame for its own footer to reach the bottom */
.panel{ min-height:0 }
.panel > .mock__body{ height:100% }

/* The mark is a real element inside the shell rather than a pseudo on the row.
   Sized off the device it sits behind, it is the same size behind every one of
   them; sized off the row — which is what it was — it changed with the row.
   The shape has a direction, so it flips to face into the page: mirrored when
   the device is on the LEFT, left alone when it is on the right. */
.tablet__mesh{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
  /* proportional, not a fixed offset — a +88px margin was 13% of a 660px device
     and 11% of a 700px one, so the mark quietly shrank every time the device
     grew. As a percentage it scales with whatever it sits behind. */
  width:118%; aspect-ratio:741 / 457;
  background:url('assets/brand/mesh-pattern.svg') center/contain no-repeat;
  opacity:.16;
}
.feat--flip .tablet__mesh,
.pinset--left .tablet__mesh{ transform:translate(-50%,-50%) scaleX(-1) }
@media (max-width:900px){ .tablet__mesh{ display:none } }

/* ---- what happens inside a screen when it arrives ----------------------
   The frame itself does not animate. A whole screen fading up from nothing
   reads as a picture being pasted onto the page; a screen filling in reads as
   the product loading, which is what it is meant to be. So the rows arrive in
   order and the figures count to their value. Items are tagged by script, so
   with no JS the screen simply renders. */
.js .mock .mk-item{
  opacity:0; transform:translateY(9px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:calc(var(--r,0) * 52ms);
}
.js .mock .mk-item.mk-in{ opacity:1; transform:none }
/* A quantity draws itself. The bar fills and the funnel step widens rather than
   simply fading in, because in these screens the LENGTH is the reading — a bar
   that arrives at full width has already told you the answer before you look. */
.js .mock .m-bar i::after,
.js .mock .m-bars i{ transform-origin:left center; transform:scaleX(0);
                     transition:transform .8s var(--ease-out) .12s }
.js .mock .m-bars i{ transform-origin:center bottom; transform:scaleY(0);
                     transition:transform .7s var(--ease-out) .12s }
.js .mock .m-bar.mk-in i::after{ transform:scaleX(1) }
.js .mock .m-bars i.mk-in{ transform:scaleY(1) }
.js .mock .m-funnel > div{ transform-origin:left center }
@media (prefers-reduced-motion:reduce){
  .js .mock .mk-item{ opacity:1; transform:none; transition:none }
  .js .mock .m-bar i::after, .js .mock .m-bars i{ transform:none; transition:none }
}
.tablet::before, .tablet::after{
  content:''; position:absolute; z-index:0;
  filter:drop-shadow(0 1px 2px rgba(10,16,32,.3));
}
/* Two pills on the top edge and one on the side, all on the right. Two separate
   rounded shapes cannot come from one box and there is only one pseudo-element
   per edge to spend, so the top pair is drawn as an SVG background rather than
   as boxes. Both sit behind the body, so they read as moulded into it rather
   than stuck on. */
.tablet::before{
  top:-7px; right:7%; width:54px; height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 9' preserveAspectRatio='none'%3E%3Cg fill='%23222A38'%3E%3Crect width='24' height='9' rx='3.5'/%3E%3Crect x='30' width='24' height='9' rx='3.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}
.tablet::after{
  right:-7px; top:9%; width:9px; height:58px; border-radius:0 3.5px 3.5px 0;
  background:linear-gradient(90deg,#161B27,#2A3241);
}
@media (max-width:640px){ .tablet::before, .tablet::after{ display:none } }
/* The title bar is the app's header, not a browser's. White, with the screen's
   name in ink and a small accent mark — a muted 11px string on parchment read
   as a URL bar, which is exactly the wrong thing for a device. */
 /* Gone. Every screen in the page already carries its own header — the console
   has one, the dash has one — so this was a second title bar stacked on the
   first, naming the same screen twice. The device now opens straight onto the
   application, and the extra height goes to the screen. */
.mock__bar{
  display:none;
  align-items:center; gap:8px;
  padding:10px var(--s-md); border-bottom:1px solid var(--hairline);
  background:var(--canvas);
}
.mock__bar::before{
  content:''; width:6px; height:6px; border-radius:2px; flex:0 0 auto;
  background:var(--c-accent);
}
.mock__bar i{ display:none }   /* traffic lights say browser, not device */
.mock__bar span{
  font:600 11.5px/1.3 var(--font-text); letter-spacing:.005em;
  color:var(--ink); margin-left:0;
}
/* The body is the app background. Rows are white ON it — a list of white cards
   floating on a tinted surface is what a product looks like; the same rows
   outlined on white read as a wireframe. */
.mock__body{
  padding:11px; display:flex; flex-direction:column; gap:7px;
  background:var(--canvas-parchment);
}
/* The screen is a fixed height and most of these have four or five things on
   them, which left the closing line stranded in the middle with a third of the
   screen blank under it. Pushed to the bottom it reads as the status bar of an
   app rather than as a list that ran out — and the screen looks filled. */
.mock__body > .m-sum{ margin-top:auto }
/* one screen closes on a note rather than a summary line — same treatment, or
   it is the only one in the page with a third of itself blank */
.mock__body > .m-note:last-child{ margin-top:auto }
/* Every figure in here is animated counting up, and proportional digits change
   width as they climb, which shifts the whole row on every frame. Tabular
   figures cost nothing and hold the layout still. */
.mock__body, .dash, .frame__body{ font-variant-numeric:tabular-nums }

/* ---- rows: the workhorse. a list of anything. ------------------------- */
.m-row{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-radius:9px;
  background:var(--canvas);
  border:1px solid color-mix(in srgb,var(--ink) 6%,transparent);
  box-shadow:0 1px 2px rgba(16,24,40,.045);
}
/* Selected reads as a marked edge, the way a real list marks a row — a tint on
   its own is too quiet to survive being scaled down to device size. */
.m-row--on{
  border-color:color-mix(in srgb,var(--c-accent) 34%,transparent);
  background:color-mix(in srgb,var(--c-accent) 5%,var(--canvas));
  box-shadow:inset 3px 0 0 var(--c-accent), 0 1px 2px rgba(16,24,40,.05);
  padding-left:14px;
}
.m-ico{
  width:22px; height:22px; border-radius:6px; flex:0 0 auto;
  display:grid; place-items:center; font-size:11px; line-height:1;
  background:color-mix(in srgb,var(--c-accent) 12%,transparent); color:var(--c-accent);
}
.m-ico--wa{ background:color-mix(in srgb,var(--c-whatsapp) 16%,transparent); color:var(--c-whatsapp-ink) }
.m-lines{ flex:1; display:grid; gap:5px; min-width:0 }
.m-ln{ height:6px; border-radius:3px; background:var(--hairline) }
.m-ln.s{ width:38% } .m-ln.m{ width:62% } .m-ln.l{ width:86% }
.m-ln.on{ background:color-mix(in srgb,var(--c-accent) 45%,transparent) }
/* Soft tinted badges. A thin outlined pill disappears at this size; a filled one
   at low opacity carries at a glance and still sits behind the row's name. */
.m-tag{
  font:600 10px/1 var(--font-text); padding:.5em .7em; border-radius:var(--r-pill);
  border:0; white-space:nowrap; letter-spacing:.01em;
  background:color-mix(in srgb,var(--ink) 7%,transparent); color:var(--ink-muted-80);
}
.m-tag--on{ background:color-mix(in srgb,var(--c-accent) 13%,transparent);
            color:var(--c-accent-text) }
.m-tag--wa{ background:color-mix(in srgb,var(--c-whatsapp) 16%,transparent);
            color:var(--c-whatsapp-ink) }
/* A row usually names something and then qualifies it. `b` is the name, `i` the
   qualifier, and whatever follows is the number. The auto margin lives on the
   NAME rather than on the things after it: put it on the qualifier instead and
   a row without one leaves its tag stranded in the middle. */
.m-row b{ font:600 12.5px/1.35 var(--font-text); color:var(--ink);
          white-space:nowrap; margin-right:auto; letter-spacing:-.002em }
.m-row i{ font:400 11px/1.35 var(--font-text); font-style:normal;
          color:var(--ink-muted-48); white-space:nowrap; text-align:right }
.m-ico svg{ width:13px; height:13px; display:block }

/* ---- kpi tiles -------------------------------------------------------- */
.m-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(74px,1fr)); gap:var(--s-xs) }
.m-kpi{
  padding:11px 12px; border-radius:9px; background:var(--canvas);
  border:1px solid color-mix(in srgb,var(--ink) 6%,transparent);
  box-shadow:0 1px 2px rgba(16,24,40,.045);
  display:flex; flex-direction:column-reverse;      /* the label reads first */
}
.m-kpi b{ display:block; font:600 19px/1 var(--font-display); letter-spacing:-.5px; color:var(--ink) }
.m-kpi span{
  display:block; font:600 9px/1.3 var(--font-text); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-muted-48); margin:0 0 5px;
}

/* ---- bars ------------------------------------------------------------- */
.m-bars{ display:flex; align-items:flex-end; gap:5px; height:78px; padding-top:var(--s-xs) }
.m-bars i{ flex:1; border-radius:3px 3px 0 0; background:color-mix(in srgb,var(--c-accent) 22%,transparent) }
.m-bars i.on{ background:var(--c-accent) }

/* ---- donut ------------------------------------------------------------ */
.m-donut{
  width:78px; height:78px; border-radius:50%; flex:0 0 auto;
  background:conic-gradient(var(--c-accent) var(--p,62%), var(--hairline) 0);
  display:grid; place-items:center;
}
.m-donut::after{
  content:attr(data-v); width:54px; height:54px; border-radius:50%;
  background:var(--canvas); display:grid; place-items:center;
  font:600 13px/1 var(--font-display); color:var(--ink);
}

/* ---- funnel: each step visibly narrower than the last ----------------- */
.m-funnel{ display:grid; gap:5px }
.m-funnel div{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 10px; border-radius:var(--r-xs); color:#fff;
  font:600 10px/1 var(--font-text); background:var(--c-accent);
  margin-inline:auto; width:var(--w,100%);
}
.m-funnel div:nth-child(1){ --w:100% } .m-funnel div:nth-child(2){ --w:86% }
.m-funnel div:nth-child(3){ --w:70% }  .m-funnel div:nth-child(4){ --w:54% }
.m-funnel div:nth-child(5){ --w:40% }
/* Each step darker than the last, so the taper reads as depth of commitment
   rather than as four bars that happen to differ in width. */
.m-funnel div{ box-shadow:0 1px 2px rgba(16,24,40,.08) }
.m-funnel div:nth-child(1){ background:color-mix(in srgb,var(--c-accent) 58%,#fff);
                            color:var(--c-accent-text) }
.m-funnel div:nth-child(2){ background:color-mix(in srgb,var(--c-accent) 82%,#fff) }
.m-funnel div:nth-child(3){ background:var(--c-accent) }
.m-funnel div:nth-child(4){ background:color-mix(in srgb,var(--c-accent) 86%,#000) }
.m-funnel div:nth-child(5){ background:color-mix(in srgb,var(--c-accent) 70%,#000) }

/* ---- timeline --------------------------------------------------------- */
.m-time{ position:relative; display:grid; gap:var(--s-xs); padding-left:var(--s-md) }
.m-time::before{
  content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px;
  background:var(--hairline); border-radius:2px;
}
.m-time div{ position:relative; font:400 11px/1.35 var(--font-text); color:var(--ink-muted-80) }
.m-time div::before{
  content:''; position:absolute; left:calc(-1 * var(--s-md) + 1px); top:4px;
  width:9px; height:9px; border-radius:50%;
  background:var(--canvas); border:2.5px solid var(--c-accent);
  box-shadow:0 0 0 3px var(--canvas-parchment);
}
.m-time b{ color:var(--ink); font-weight:600 }

/* ---- thread: WhatsApp-shaped bubbles ---------------------------------- */
.m-thread{ display:grid; gap:6px }
.m-bub{
  max-width:78%; padding:9px 11px; border-radius:13px 13px 13px 4px;
  background:var(--canvas); border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  font:400 11px/1.4 var(--font-text); color:var(--ink);
}
.m-bub .m-ln{ background:var(--hairline) }
.m-bub--out{
  margin-left:auto; background:color-mix(in srgb,var(--c-whatsapp) 14%,transparent);
  border-color:color-mix(in srgb,var(--c-whatsapp) 30%,transparent);
}
.m-bub--out .m-ln{ background:color-mix(in srgb,var(--c-whatsapp-ink) 40%,transparent) }

/* ---- profile card ----------------------------------------------------- */
.m-prof{ display:flex; align-items:center; gap:var(--s-xs); padding-bottom:var(--s-xs);
         border-bottom:1px solid var(--hairline); margin-bottom:var(--s-xs) }
.m-avatar{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  background:color-mix(in srgb,var(--c-accent) 16%,transparent);
  display:grid; place-items:center; font:600 12px/1 var(--font-display); color:var(--c-accent);
}
.m-score{
  margin-left:auto; font:600 10px/1 var(--font-text); padding:.45em .7em;
  border-radius:var(--r-pill); background:var(--c-accent); color:#fff;
  white-space:nowrap; flex:0 0 auto;
}
.m-score--big{ font:600 12px/1 var(--font-text); padding:.5em .8em }
/* the name block beside an avatar, when the mockup wants words and not bars */
.m-who{ display:grid; gap:2px; min-width:0 }
.m-who b{ font:600 13px/1.2 var(--font-display); color:var(--ink) }
.m-who i{ font:400 11px/1.2 var(--font-text); font-style:normal; color:var(--ink-muted-48) }
.m-avatar--txt{ font:600 9.5px/1 var(--font-display); letter-spacing:.02em }

/* ---- summary line: the one sentence the mockup is arguing for ---------- */
.m-sum{
  display:flex; align-items:center; gap:8px; margin-top:2px; padding:9px 10px;
  border-radius:var(--r-sm); background:color-mix(in srgb,var(--c-accent) 7%,transparent);
  font:400 11px/1.35 var(--font-text); color:var(--ink-muted-80);
}
.m-sum b{ color:var(--c-accent); font-weight:600 }
.m-sum .arrow{ color:var(--c-accent); font-size:13px; line-height:1; flex:0 0 auto }

/* ---- converge diagram: four sources into one ------------------------- */
.m-converge{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s-sm) }
.m-converge ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.m-converge li{
  font:600 10px/1 var(--font-text); padding:.55em .7em; border-radius:var(--r-xs);
  border:1px solid var(--hairline); color:var(--ink-muted-80); text-align:center;
}
.m-converge .arrow{ font-size:15px; color:var(--c-accent) }
.m-converge .out{
  padding:var(--s-sm); border-radius:var(--r-sm); text-align:center;
  background:var(--c-accent); color:#fff; font:600 11px/1.3 var(--font-text);
}

/* ---- labelled bar: a quantity with its name and its number ------------ */
.m-bar{ display:grid; grid-template-columns:minmax(74px,34%) 1fr auto; gap:10px;
        align-items:center; font:400 11px/1.3 var(--font-text); color:var(--ink-muted-80) }
.m-bar + .m-bar{ margin-top:7px }
.m-bar u{ text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.m-bar i{ display:block; height:7px; border-radius:99px; overflow:hidden;
           background:color-mix(in srgb,var(--ink) 8%,transparent) }
.m-bar i::after{ content:''; display:block; height:100%; width:var(--v,50%);
                 border-radius:99px;
                 border-radius:4px; background:var(--c-accent) }
.m-bar b{ font:600 11px/1 var(--font-text); color:var(--ink); min-width:34px; text-align:right }
.m-bar--wa i::after{ background:var(--c-whatsapp) }
.m-bar--soft i::after{ background:color-mix(in srgb,var(--c-accent) 42%,transparent) }

/* ---- chain: one deliverable passing through many hands ---------------- */
.m-chain{ display:grid; gap:0 }
.m-chain div{
  position:relative; padding:7px 0 7px 22px;
  font:400 11px/1.35 var(--font-text); color:var(--ink-muted-80);
}
.m-chain div::before{
  content:''; position:absolute; left:4px; top:12px; width:7px; height:7px;
  border-radius:50%; background:var(--c-accent);
}
.m-chain div:not(:last-child)::after{
  content:''; position:absolute; left:7px; top:19px; bottom:-2px; width:1px; background:var(--hairline);
}
.m-chain b{ color:var(--ink); font-weight:600 }
.m-chain span{ color:var(--ink-muted-48) }

/* ---- tiles: the executive glance -------------------------------------- */
.m-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:7px }
.m-tile{ padding:9px 10px; border:1px solid var(--hairline); border-radius:var(--r-sm) }
.m-tile b{ display:block; font:600 15px/1 var(--font-display); letter-spacing:-.3px; color:var(--ink) }
.m-tile span{ display:block; font:400 9.5px/1.3 var(--font-text); color:var(--ink-muted-48); margin-top:3px }
.m-tile em{ font:600 9.5px/1 var(--font-text); font-style:normal; color:var(--c-accent) }
.m-tile--on{ background:color-mix(in srgb,var(--c-accent) 6%,transparent); border-color:transparent }

/* ---- player: a stream, on your own estate ----------------------------- */
.m-player{
  position:relative; border-radius:var(--r-sm); overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c-accent) 88%,#000),var(--c-accent));
  aspect-ratio:16/9; display:grid; place-items:center;
}
.m-player::after{
  content:''; width:0; height:0; margin-left:4px;
  border-left:15px solid rgba(255,255,255,.94);
  border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.m-live{
  position:absolute; top:8px; left:8px; z-index:1;
  font:600 9px/1 var(--font-text); letter-spacing:.06em;
  padding:.42em .6em; border-radius:var(--r-pill); background:#E5484D; color:#fff;
}
.m-player .m-watch{
  position:absolute; right:8px; top:8px; z-index:1;
  font:400 9.5px/1 var(--font-text); color:rgba(255,255,255,.86);
}

/* ---- switch: consent, which is a state and not a number --------------- */
.m-switch{
  margin-left:auto; flex:0 0 auto; width:26px; height:15px; border-radius:var(--r-pill);
  background:var(--hairline); position:relative;
}
.m-switch::after{
  content:''; position:absolute; top:2px; left:2px; width:11px; height:11px;
  border-radius:50%; background:var(--canvas); box-shadow:0 1px 2px rgba(10,16,32,.25);
}
.m-switch--on{ background:var(--c-whatsapp) }
.m-switch--on::after{ left:13px }

/* ---- note: the one line of interpretation under a mockup -------------- */
.m-note{
  margin-top:2px; padding:8px 10px; border-radius:var(--r-sm);
  background:var(--canvas-parchment);
  font:400 10.5px/1.4 var(--font-text); color:var(--ink-muted-80);
}
.m-note b{ color:var(--c-accent); font-weight:600 }

/* ============================================================================
   The product screen — HCP 360° Profiles

   Rebuilt as live DOM from the design file rather than dropped in as the
   exported SVG. Three reasons, in order of weight:
     1. the export has every label flattened to vector paths, so not one number
        in it can count up and not one cell can light — which is the whole ask;
     2. it is 2.5 MB, against about 4 KB of markup here;
     3. as DOM it reads the design tokens, so it can never drift from the rest
        of the site the way a baked image would.
   ============================================================================ */
.dash{
  --side:136px;
  /* straight from the design file. rgb(32,66,137) is --c-accent exactly, so the
     shades are expressed against the token rather than as loose hexes. */
  --dash-line:#e6ebf2;
  --dash-ink:#0f172a;
  --dash-value:#0b2545;
  --dash-mute-60:color-mix(in srgb, var(--c-accent) 60%, transparent);
  --dash-mute-40:color-mix(in srgb, var(--c-accent) 40%, transparent);
  --dash-h1:color-mix(in srgb, var(--c-accent) 8%, transparent);
  --dash-h2:color-mix(in srgb, var(--c-accent) 40%, transparent);
  --dash-h3:color-mix(in srgb, var(--c-accent) 85%, transparent);
  /* A screen of a fixed height, so the rows must be told they may shrink.
     grid-template-rows:auto auto let the body take whatever the rail wanted —
     and the rail is 13 items long, so it grew past the device and the bottom of
     every screen was silently cropped by overflow:hidden. */
  display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; min-height:0;
  border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden;
  background:var(--canvas); font:400 11px/1.35 var(--font-text); color:var(--ink);
}
/* inside a window frame it is the window that owns the edge */
.mock > .dash{ border:0; border-radius:0 }

/* ---- top bar ---------------------------------------------------------- */
.dash__top{
  display:flex; align-items:center; gap:7px; padding:7px 10px;
  border-bottom:1px solid var(--dash-line); background:var(--canvas);
}
.dash__search{
  flex:1; min-width:0; padding:5px 9px; border-radius:var(--r-pill);
  border:1px solid var(--hairline); background:var(--canvas-parchment);
  font:400 9px/1.2 var(--font-text); color:var(--ink-muted-48);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash__chip{
  flex:0 0 auto; padding:4px 8px; border-radius:var(--r-pill);
  border:1px solid var(--hairline); font:500 8.5px/1.2 var(--font-text);
  color:var(--ink-muted-80); white-space:nowrap;
}
.dash__ava{
  flex:0 0 auto; width:19px; height:19px; border-radius:50%;
  object-fit:cover; display:block;
}

.dash__body{ display:grid; grid-template-columns:var(--side) minmax(0,1fr);
              align-items:stretch; min-height:0; overflow:hidden }

/* ---- rail --------------------------------------------------------------
   Rebuilt against the design file: five groups, the brand at the top, the
   signed-in user at the bottom. The active row is the design's own treatment —
   a navy edge on the left plus a pale wash falling away to the right — not a
   filled pill, which is what it had before and is a different idea entirely. */
.dash__side{
  display:grid; grid-template-rows:auto 1fr auto; min-height:0; overflow:hidden;
  border-right:1px solid var(--dash-line); background:var(--canvas);
}
.dash__brand{
  display:flex; align-items:center; padding:7px 9px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.dash__brand img{ width:100%; max-width:104px; height:auto }

.dash__nav{ padding:5px 0; display:grid; align-content:start; gap:0;
             min-height:0; overflow:hidden }
.dash__nav b{
  padding:5px 9px 2px;
  font:700 6.5px/1.4 var(--font-text); letter-spacing:.08em;
  text-transform:uppercase; color:#555;
}
.dash__nav span{
  display:flex; align-items:center; gap:7px; padding:3px 9px;
  font:500 8.5px/1.4 var(--font-text); color:#7C7C7C;
  white-space:nowrap; overflow:hidden; position:relative;
}
/* The mark is MASKED, not drawn.
   Every icon file ships with its colour baked in — stroke="#7C7C7C" on twelve
   of them and stroke="#15246B" on hcp360 — so the selected row turned its label
   navy while its icon stayed grey, and HCP 360 sat there permanently navy as if
   it were the selected one when it was not. Masking throws the file's own
   colour away and paints the shape in currentColor, so the icon is whatever the
   row is: grey when idle, accent when selected, one rule for all thirteen. */
.dash__ico{
  width:11px; height:11px; flex:0 0 auto; display:block;
  background:currentColor; opacity:.75;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
  transition:opacity var(--dur-2) var(--ease);
}
.dash__nav span u{ text-decoration:none; overflow:hidden; text-overflow:ellipsis }
/* the active row: a navy edge, the label and its mark in the same colour, over
   a pale wash that carries across the full width of the rail */
.dash__nav .on{ color:var(--c-accent-text); font-weight:600 }
.dash__nav .on .dash__ico{ opacity:1 }
.dash__nav .on::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:2px;
  background:var(--c-accent); border-radius:0 99px 99px 0;
}
.dash__nav .on::after{
  content:''; position:absolute; inset:1px 6% 1px 0; z-index:-1;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--c-accent) 14%, #fff),
    color-mix(in srgb, var(--c-accent) 4%, #fff) 62%,
    rgba(255,255,255,0));
  border-radius:0 99px 99px 0;
}
.dash__nav em{
  margin-left:auto; flex:0 0 auto; font-style:normal;
  font:700 6px/1 var(--font-text); color:#fff;
  padding:2.5px 4px; border-radius:99px; background:#D97706;
}
.dash__nav em.ct{ background:#DC2626 }

.dash__user{
  margin-bottom:2px;
  display:flex; align-items:center; gap:6px; padding:8px 8px;
  border-top:1px solid rgba(178,178,178,.61);
}
.dash__user > img{ width:22px; height:22px; border-radius:50%; flex:0 0 auto }
.dash__user div{ display:grid; gap:0; min-width:0 }
.dash__user b{ font:600 8.5px/1.35 var(--font-text); color:#000;
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.dash__user i{ font:400 7px/1.3 var(--font-text); font-style:normal; color:#000; opacity:.7 }
.dash__user .chev{ width:8px; height:8px; margin-left:auto; flex:0 0 auto; opacity:.5 }

/* ---- main ------------------------------------------------------------- */
.dash__main{ padding:9px; display:grid; grid-auto-rows:min-content;
             align-content:space-between; min-height:0; overflow:hidden;
             gap:6px; align-content:start; min-width:0 }
.dash__head b{ display:block; font:600 13px/1.2 var(--font-display);
               letter-spacing:-.3px; color:var(--dash-ink) }
.dash__head i{ display:block; font:400 8.5px/1.3 var(--font-text); font-style:normal;
               color:var(--dash-mute-40); margin-top:2px }

.dash__tabs{ display:flex; gap:4px; flex-wrap:wrap }
.dash__tabs span{
  flex:0 0 auto;   /* flex items shrink by default, and a squeezed chip clips its own count */
  padding:4px 8px; border-radius:var(--r-pill); border:1px solid var(--hairline);
  font:500 8px/1.2 var(--font-text); color:var(--ink-muted-80); white-space:nowrap;
}
.dash__tabs .on{ background:var(--c-accent); border-color:transparent; color:#fff }

/* ---- the four counters ------------------------------------------------ */
.dash__kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px }
.dash__kpis div{
  padding:7px 10px; border:1px solid var(--dash-line); border-radius:9px;
  background:var(--canvas);
  box-shadow:0 1px 1.5px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
}
/* label above value, which is the design's order — the number is the payoff */
.dash__kpis span{ display:block; font:700 7px/1.4 var(--font-text); letter-spacing:.04em;
                  text-transform:uppercase; color:var(--dash-mute-60) }
.dash__kpis b{ display:block; margin-top:3px; font:700 13.5px/1.4 var(--font-display);
               letter-spacing:-.2px; color:var(--dash-value); font-variant-numeric:tabular-nums }

/* ---- country × speciality ----------------------------------------------
   Taken from the design file, not approximated. Two things there that a
   hand-guess gets wrong every time:

   - the heat is FOUR discrete steps, not a continuous ramp. #0a215f for the
     single highest cell, then the brand navy at 85%, 40% and 8%. A smooth
     gradient reads as noise; four steps read as a scale.
   - rgb(32,66,137) IS --c-accent. The product and the site were built on the
     same navy, so every one of these can be expressed as the token rather
     than as a foreign hex.                                                  */
.dash__matrix{
  border:1px solid var(--dash-line); border-radius:var(--r-md);
  padding:8px; min-width:0;
}
.dash__matrix > p{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin:0 0 3px; font:600 10px/1.2 var(--font-text); color:var(--dash-ink);
 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash__matrix > p span{ font:400 8px/1.2 var(--font-text); color:var(--dash-mute-40) }
.dash__matrix > small{
  display:block; margin-bottom:8px; opacity:.8;
  font:400 7.5px/1.2 var(--font-text); color:var(--dash-mute-40);
}
.dash__grid{ display:grid; grid-auto-rows:min-content; align-content:start; row-gap:2px;
             gap:3px; min-width:0 }
.dash__row{ display:grid; grid-template-columns:62px repeat(6,minmax(0,1fr)) 34px; gap:2px; align-items:center }
.dash__row u{
  font:400 8.5px/1.2 var(--font-text); text-decoration:none; color:var(--dash-mute-40);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash__row--head u, .dash__row--head i{
  font:400 7.5px/1.2 var(--font-text); color:var(--dash-mute-60);
  font-style:normal; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash__row--head b{ font:400 7.5px/1.2 var(--font-text); color:var(--dash-mute-60) }
.dash__row i{
  display:block; text-align:center; padding:5px 2px; border-radius:4px;
  font:600 8.5px/1 var(--font-text); font-style:normal;
  font-variant-numeric:tabular-nums;
  background:var(--dash-h1); color:var(--dash-ink);
}
/* The four steps of the scale. NOT .h1-.h4: those are the design system's
   heading classes, and a cell wearing .h2 inherited display type — 38px line
   height on an 8.5px cell, which is what blew the matrix to seven times its
   height. Component classes get the component's prefix. */
.dash__row i.lv4{ background:#0a215f; color:#fff }
.dash__row i.lv3{ background:var(--dash-h3); color:#fff }
.dash__row i.lv2{ background:var(--dash-h2) }
.dash__row i.lv1{ background:var(--dash-h1) }
/* the header row carries labels, not values: no fill, no padding block */
.dash__row--head i{ background:none; padding:0 }
.dash__row b{
  font:600 8.5px/1 var(--font-text); color:var(--dash-ink); text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ---- the profile cards under the matrix -------------------------------- */
.dash__cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px }
.dash__card{
  position:relative; padding:7px 9px; border:1px solid var(--hairline);
  border-radius:var(--r-sm); min-width:0;
}
.dash__card b{ display:block; font:600 9.5px/1.2 var(--font-text); color:var(--ink);
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:26px }
.dash__card i{ display:block; font:400 8px/1.3 var(--font-text); font-style:normal;
               color:var(--ink-muted-48); margin-top:2px;
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.dash__card u{ display:flex; gap:4px; margin-top:6px; text-decoration:none }
.dash__card u span{
  font:600 6.5px/1 var(--font-text); padding:3px 5px; border-radius:var(--r-pill);
  background:var(--canvas-parchment); color:var(--ink-muted-80); white-space:nowrap;
}
.dash__card u span:last-child{ color:var(--c-accent);
  background:color-mix(in srgb,var(--c-accent) 10%,transparent) }
/* the score ring: one conic gradient, no svg, no library */
.dash__ring{
  position:absolute; top:7px; right:8px; width:24px; height:24px; border-radius:50%;
  background:conic-gradient(var(--c-accent) calc(var(--p,87) * 1%), var(--hairline) 0);
  display:grid; place-items:center;
}
.dash__ring::after{
  content:attr(data-v); width:18px; height:18px; border-radius:50%; background:var(--canvas);
  display:grid; place-items:center; font:600 8px/1 var(--font-display); color:var(--c-accent);
}
.dash__foot{ display:flex; align-items:center; justify-content:space-between;
             font:400 7.5px/1 var(--font-text); color:var(--ink-muted-48) }
.dash__foot b{ font:600 7.5px/1 var(--font-text); color:var(--c-accent) }

/* Hiding the rail takes it OUT of the grid, so .dash__main — the only child
   left — auto-places into column 1, and column 1 is var(--side). Zeroing --side
   therefore collapsed the entire dashboard body to its own 18px of padding, and
   every mockup on the site rendered as an empty white screen below 1180px.
   Collapse the template to a single track instead of zeroing the first one. */
@media (max-width:1180px){
  .dash{ --side:0px }
  .dash__side{ display:none }
  .dash__body{ grid-template-columns:minmax(0,1fr) }

  /* …except in the devices that are laid out at their design width and scaled
     as a whole. Those are not short of room, so dropping the rail only changed
     the composition away from the one the screen was drawn for — the content
     column went from 500px to 646px and the blocks inside it reflowed and
     overran the frame. They keep the screen exactly as designed. */
  :is(.head__shot, .pinset__stage, .tablet-host, .pinshot) .dash{ --side:136px }
  :is(.head__shot, .pinset__stage, .tablet-host, .pinshot) .dash__side{ display:grid }
  :is(.head__shot, .pinset__stage, .tablet-host, .pinshot) .dash__body{
    grid-template-columns:var(--side) minmax(0,1fr);
  }
}

/* ---- feature block: copy beside its own mockup ------------------------ */
.feat{ display:grid; gap:clamp(24px,3.4vw,56px); align-items:center }
/* Alternation is derived from position, not from a class someone remembers to
   add. The hand-placed version silently cancelled itself out — a block written
   mock-first WITH the flip class ends up exactly where an unflipped one does,
   and every mockup in the page lined up on the same side. */
/* Alternation runs across the WHOLE page, not within each block. Derived from
   :nth-child it restarted at every .featset — and several of those hold a single
   row, so five devices in a row ended up on the same side. The flip is stamped
   into the markup in document order instead. */
.feat--flip > *:first-child{ order:2 }
/* the device column is the wider one on both sides, so the frame is the same
   width whichever way round the row is built */
.feat{ grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr) }
.feat--flip{ grid-template-columns:minmax(0,1.26fr) minmax(0,.74fr) }
@media (max-width:900px){
  /* minmax(0,1fr), not 1fr: a bare 1fr has an `auto` minimum, which is
     min-content — so one fixed-width child grows the track and takes the whole
     row with it. */
  .feat, .feat--flip{ grid-template-columns:minmax(0,1fr) }
  .feat--flip > *:first-child{ order:0 }
}
.featset{ display:grid; gap:clamp(40px,5vh,72px) }

/* ============================ the campaign console =======================
   The WhatsApp channel's own product screen, built to the design file rather
   than assembled from the generic kit — it is the densest thing in the page and
   the one that has to read as a real application at a glance.

   Everything is in px on purpose. This lives inside a device screen of a known
   fixed size (660 x 352), so the layout is drawn to that size the way the design
   is drawn to its artboard; ems here would only float against the page's type
   scale and break the density. */
.wdash{
  --wd-side:112px;
  --wd-bg:#F6F8FC;
  --wd-line:#E8EDF5;
  --wd-ink:#0F172A;
  --wd-mute:#64748B;
  --wd-navy:#0B1220;
  display:grid; grid-template-columns:var(--wd-side) minmax(0,1fr);
  height:100%; min-height:0; overflow:hidden;
  background:var(--wd-bg); color:var(--wd-ink);
  font:400 8px/1.35 var(--font-text);
}

/* ---- the rail ---------------------------------------------------------- */
.wd-side{
  display:grid; grid-template-rows:auto 1fr auto; min-height:0;
  background:var(--wd-navy); color:#fff; padding:9px 8px;
}
.wd-brand{ display:grid; gap:3px; padding:0 2px 9px }
.wd-brand img{ width:100%; max-width:88px; height:auto; filter:brightness(0) invert(1) }
.wd-brand span{ font:400 5px/1.3 var(--font-text); color:#8C97AC; letter-spacing:.02em }
.wd-nav{ display:grid; align-content:start; gap:1px; min-height:0; padding-top:4px }
.wd-nav a{
  display:flex; align-items:center; gap:7px; padding:5px 7px; border-radius:6px;
  font:500 8px/1.3 var(--font-text); color:#B4BECD; text-decoration:none;
  white-space:nowrap; overflow:hidden;
}
.wd-nav a svg{ width:10px; height:10px; flex:0 0 auto; opacity:.75 }
/* the active row is a filled pill in this design, not an edge */
.wd-nav a.on{ background:var(--c-accent); color:#fff }
.wd-nav a.on svg{ opacity:1 }
.wd-foot{
  border-top:1px solid rgba(255,255,255,.12); padding-top:7px; text-align:center;
  font:400 5.5px/1.5 var(--font-text); color:#7C879B;
}
.wd-foot u{ display:block; text-decoration:none; color:#7FA8FF; margin-top:2px }

/* ---- the frame around the work ---------------------------------------- */
.wd-main{ display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0 }
.wd-top{
  display:flex; align-items:center; gap:6px;
  padding:6px 9px; background:#fff; border-bottom:1px solid var(--wd-line);
}
.wd-top b{ font:700 10px/1 var(--font-display); letter-spacing:-.2px; margin-right:auto }
/* An inline <svg> with a viewBox but no width/height is a replaced element with
   no intrinsic size, so it falls back to 300x150 — which took this row to 515px
   and squeezed the whole console out of the screen. Every glyph here is sized. */
.wd-top svg{ width:11px; height:11px; flex:0 0 auto; color:var(--wd-mute) }
.wd-toggle svg{ width:9px; height:9px }
.wd-pill{
  display:flex; align-items:center; gap:4px; padding:3px 6px; border-radius:5px;
  border:1px solid var(--wd-line); font:500 6px/1 var(--font-text); color:var(--wd-mute);
}
.wd-pill em{ font-style:normal; color:var(--wd-ink); font-weight:600 }
.wd-toggle{
  display:flex; align-items:center; gap:5px; padding:3px 6px; border-radius:99px;
  background:#F1F5FB; color:var(--wd-mute);
}
.wd-ava{ display:flex; align-items:center; gap:4px; font:600 6.5px/1 var(--font-text) }
.wd-ava i{
  width:14px; height:14px; border-radius:50%; display:block;
  background:linear-gradient(150deg,#C98A5E,#7A4A2B);
}

.wd-work{ padding:7px 9px; display:grid; gap:6px; align-content:start; min-height:0; overflow:hidden }
.wd-r3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px }
.wd-r2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px }

.wd-card{
  background:#fff; border:1px solid var(--wd-line); border-radius:7px;
  padding:7px 8px; display:flex; align-items:center; gap:7px; min-width:0;
}
.wd-card__ico{
  width:19px; height:19px; border-radius:6px; flex:0 0 auto;
  display:grid; place-items:center; background:#EEF3FE; color:var(--c-accent);
}
.wd-card__ico svg{ width:11px; height:11px }
.wd-card u{ display:block; text-decoration:none; min-width:0 }
.wd-card__lab{
  display:block; font:700 5.5px/1.3 var(--font-text); letter-spacing:.09em;
  text-transform:uppercase; color:var(--wd-mute);
}
.wd-card__val{
  display:block; font:600 15px/1.15 var(--font-display); letter-spacing:-.4px;
  color:var(--wd-ink); margin-top:1px;
}
.wd-card__val s{ text-decoration:none; font-size:9px; color:#94A3B8; font-weight:400 }
/* the two wide cards carry the figure large and the glyph on the right */
.wd-card--wide{ padding:8px 9px }
.wd-card--wide .wd-card__ico{ order:2; margin-left:auto; width:22px; height:22px }
.wd-card--wide .wd-card__val{ font-size:18px }

/* ---- the two panels --------------------------------------------------- */
.wd-panel{
  background:#fff; border:1px solid var(--wd-line); border-radius:7px;
  padding:7px 8px; display:grid; align-content:start; gap:5px; min-width:0; min-height:0;
  overflow:hidden;
}
.wd-panel__head{ display:flex; align-items:baseline; gap:6px }
.wd-panel__head b{ font:700 8.5px/1.2 var(--font-display); letter-spacing:-.1px }
.wd-panel__head em{
  font:700 5px/1.3 var(--font-text); font-style:normal; letter-spacing:.09em;
  text-transform:uppercase; color:var(--wd-mute); display:block;
}
.wd-panel__head u{ margin-left:auto; text-decoration:none;
                   font:600 6.5px/1 var(--font-text); color:var(--c-accent) }
.wd-sel{
  margin-left:auto; padding:2px 6px; border:1px solid var(--wd-line); border-radius:5px;
  font:500 6px/1.3 var(--font-text); color:var(--wd-mute);
}

/* a campaign: name and state, then who it went to and how much of it landed */
.wd-camp{ display:grid; gap:3px; padding-bottom:5px; border-bottom:1px solid var(--wd-line) }
.wd-camp:last-child{ border-bottom:0; padding-bottom:0 }
.wd-camp__top{ display:flex; align-items:center; gap:6px }
.wd-camp__top b{ font:600 7.5px/1.2 var(--font-text); margin-right:auto;
                 white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.wd-badge{
  flex:0 0 auto; display:flex; align-items:center; gap:3px; padding:2px 5px;
  border-radius:99px; background:#E7F7EE; color:#12784A;
  font:600 5.5px/1 var(--font-text);
}
.wd-badge::before{ content:''; width:3px; height:3px; border-radius:50%; background:#18A05C }
.wd-camp__meta{ display:flex; align-items:center; gap:6px;
                font:400 6px/1.2 var(--font-text); color:var(--wd-mute) }
.wd-camp__meta b{ color:var(--wd-ink); font-weight:600 }
.wd-prog{ flex:1; height:3px; border-radius:99px; background:#EDF1F7; overflow:hidden }
.wd-prog i{ display:block; height:100%; width:var(--v,70%); border-radius:99px; background:#22B573 }

/* a country: flag, name, share, count. The flags are drawn rather than loaded —
   at 13px wide an image is a request for nothing, and the platform's own flag
   glyphs do not render on Windows at all. */
.wd-ctry{ display:flex; align-items:center; gap:6px; padding:1px 0 }
.wd-flag{
  width:13px; height:9px; border-radius:1.5px; flex:0 0 auto;
  background:var(--f,#CBD5E1); box-shadow:inset 0 0 0 .5px rgba(15,23,42,.18);
}
.wd-ctry u{ text-decoration:none; font:500 6.5px/1.2 var(--font-text);
            width:68px; flex:0 0 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.wd-bar{ flex:1; height:3px; border-radius:99px; background:#EDF1F7; overflow:hidden }
.wd-bar i{ display:block; height:100%; width:var(--v,50%); border-radius:99px;
           background:var(--c-accent) }
.wd-ctry s{ text-decoration:none; font:600 6.5px/1.2 var(--font-text);
            width:26px; text-align:right; flex:0 0 auto }

/* ---- the rest of the console's vocabulary ------------------------------
   The other four WhatsApp screens are the SAME application, so they are built
   from the same parts rather than from the generic kit — a channel that shows
   five different-looking screens reads as five products. */

/* a plain list inside a panel: something, what it is, and its state */
.wd-item{
  display:flex; align-items:center; gap:7px; padding:5px 0;
  border-bottom:1px solid var(--wd-line);
}
.wd-item:last-child{ border-bottom:0 }
.wd-item__ico{
  width:16px; height:16px; border-radius:5px; flex:0 0 auto;
  display:grid; place-items:center; background:#EEF3FE; color:var(--c-accent);
}
.wd-item__ico svg{ width:9px; height:9px }
.wd-item__ico--wa{ background:#E7F7EE; color:#12784A }
.wd-item u{ text-decoration:none; min-width:0; margin-right:auto }
.wd-item u b{ display:block; font:600 7px/1.25 var(--font-text); white-space:nowrap;
              overflow:hidden; text-overflow:ellipsis }
.wd-item u i{ display:block; font:400 6px/1.3 var(--font-text); font-style:normal;
              color:var(--wd-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* state pills. Colour carries the meaning here, so each state has one. */
.wd-state{
  flex:0 0 auto; padding:2px 6px; border-radius:99px;
  font:600 5.5px/1 var(--font-text); white-space:nowrap;
  background:#EDF1F7; color:var(--wd-mute);
}
.wd-state--ok{ background:#E7F7EE; color:#12784A }
.wd-state--off{ background:#FDECEC; color:#B42318 }
.wd-state--wait{ background:#FEF4E5; color:#B54708 }

/* the toggle, at console scale */
.wd-sw{
  flex:0 0 auto; width:18px; height:10px; border-radius:99px; position:relative;
  background:#D7DEE9;
}
.wd-sw::after{
  content:''; position:absolute; top:1.5px; left:1.5px; width:7px; height:7px;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.3);
}
.wd-sw--on{ background:#22B573 }
.wd-sw--on::after{ left:9.5px }

/* a sequence that can stop. The cancelled steps are struck and greyed rather
   than removed, because the point of the screen is that they were DUE and did
   not go — an absence you cannot see makes no argument. */
.wd-seq{ display:grid; gap:0; padding-left:11px; position:relative }
.wd-seq::before{
  content:''; position:absolute; left:3px; top:7px; bottom:7px; width:1.5px;
  background:var(--wd-line);
}
.wd-seq div{
  position:relative; display:flex; align-items:center; gap:6px; padding:4px 0;
  font:400 6.5px/1.3 var(--font-text); color:var(--wd-mute);
}
.wd-seq div::before{
  content:''; position:absolute; left:-11px; top:7px; width:7px; height:7px;
  border-radius:50%; background:#fff; border:2px solid var(--wd-line);
}
.wd-seq b{ font:600 7px/1.3 var(--font-text); color:var(--wd-ink); margin-right:auto }
.wd-seq .done::before{ border-color:#22B573; background:#22B573 }
.wd-seq .hit::before{ border-color:var(--c-accent); background:var(--c-accent) }
.wd-seq .off{ opacity:.55 }
.wd-seq .off b{ text-decoration:line-through; color:var(--wd-mute); font-weight:500 }

/* chat, at console scale */
.wd-chat{ display:grid; gap:4px; align-content:start }
.wd-msg{
  max-width:88%; padding:5px 7px; border-radius:8px 8px 8px 2px;
  background:#F1F5FB; font:400 6.5px/1.35 var(--font-text); color:var(--wd-ink);
}
.wd-msg--out{ margin-left:auto; border-radius:8px 8px 2px 8px;
              background:#E7F7EE; color:#0B3D24 }
.wd-msg span{ display:block; margin-top:2px; font-size:5.5px; color:var(--wd-mute) }

/* the person a conversation is handed to */
.wd-who{ display:flex; align-items:center; gap:6px; padding:5px 0 }
.wd-who i{
  width:18px; height:18px; border-radius:50%; flex:0 0 auto; display:block;
  background:linear-gradient(150deg,#5B8DEF,#22407F);
}
.wd-who u{ text-decoration:none; margin-right:auto; min-width:0 }
.wd-who u b{ display:block; font:600 7px/1.25 var(--font-text) }
.wd-who u s{ display:block; text-decoration:none; font:400 6px/1.3 var(--font-text);
             color:var(--wd-mute) }

/* a dated history, tight enough for a panel */
.wd-hist{ display:grid; gap:0; padding-left:10px; position:relative }
.wd-hist::before{
  content:''; position:absolute; left:2.5px; top:6px; bottom:6px; width:1.5px;
  background:var(--wd-line);
}
.wd-hist div{
  position:relative; padding:3.5px 0; font:400 6.5px/1.3 var(--font-text);
  color:var(--wd-mute);
}
.wd-hist div::before{
  content:''; position:absolute; left:-10px; top:6px; width:6px; height:6px;
  border-radius:50%; background:#fff; border:1.5px solid var(--c-accent);
}
.wd-hist b{ color:var(--wd-ink); font-weight:600 }

/* the closing line, at console scale */
.wd-note{
  margin-top:auto; padding:5px 7px; border-radius:6px; background:#EEF3FE;
  font:400 6.5px/1.35 var(--font-text); color:var(--wd-ink);
}
.wd-note b{ color:var(--c-accent); font-weight:600 }

/* Each feature is a screen of the app, so the panels live inside the work area
   and the shell around them is permanent — the rail and the bar belong to the
   frame, not to any one feature. */
.wd-work{ display:grid }
/* A flex column, not a grid: the closing note anchors with margin-top:auto, and
   auto margins only push against free space along a flex line — in a grid they
   resolve inside the item's own row and the note stays where it fell. */
.wd-work > .panel{ grid-area:1/1; display:flex; flex-direction:column; gap:6px; height:100% }
/* the working area of the screen takes the slack, so the note sits on the floor
   rather than halfway up it */
.wd-work > .panel > .wd-panel,
.wd-work > .panel > .wd-r2:has(> .wd-panel){ flex:0 0 auto }

/* ---- the rest of the console's screens ---------------------------------
   Every Omni-Channel screen is the same application seen from a different
   page, so they are built from this vocabulary rather than from the generic
   mock kit. Four parts the HCP 360 screen did not need: a dated history, a
   score ledger, a labelled bar chart, and the recommendation strip. */

/* a dated history */
.dash__time{ position:relative; display:grid; gap:0; padding-left:13px; align-content:start }
.dash__time::before{
  content:''; position:absolute; left:3.5px; top:8px; bottom:8px; width:1.5px;
  background:var(--dash-line);
}
.dash__time div{
  position:relative; display:flex; align-items:center; gap:6px; padding:4.5px 0;
  font:400 8px/1.3 var(--font-text); color:var(--dash-mute-60);
  border-bottom:1px solid var(--dash-line);
}
.dash__time div:last-child{ border-bottom:0 }
.dash__time div::before{
  content:''; position:absolute; left:-13px; top:9px; width:8px; height:8px;
  border-radius:50%; background:var(--canvas); border:2px solid var(--c-accent);
}
.dash__time b{ font:600 8.5px/1.3 var(--font-text); color:var(--dash-ink); flex:0 0 auto }
.dash__time u{ text-decoration:none; margin-right:auto; overflow:hidden;
               text-overflow:ellipsis; white-space:nowrap }
.dash__time em{
  font-style:normal; font:600 7px/1 var(--font-text); flex:0 0 auto;
  padding:3px 6px; border-radius:99px;
  background:var(--dash-h1); color:var(--c-accent);
}

/* a score ledger: what happened, what it was worth, where it left the total.
   The running total is the column that matters, so it is the one set solid. */
.dash__score{ display:grid; gap:0; align-content:start }
.dash__score div{
  display:grid; grid-template-columns:minmax(0,1fr) 34px 42px; align-items:center; gap:6px;
  padding:5px 0; border-bottom:1px solid var(--dash-line);
  font:400 8px/1.3 var(--font-text); color:var(--dash-mute-60);
}
.dash__score div:last-child{ border-bottom:0 }
.dash__score u{ text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dash__score i{
  font-style:normal; font:600 7.5px/1 var(--font-text); text-align:center;
  padding:3px 0; border-radius:99px; background:var(--dash-h1); color:var(--c-accent);
}
.dash__score b{ font:700 11px/1 var(--font-display); color:var(--dash-value); text-align:right }
.dash__score .top b{ color:var(--c-accent) }

/* labelled bars */
.dash__sub{
  font:700 6.5px/1.3 var(--font-text); letter-spacing:.09em; text-transform:uppercase;
  color:var(--dash-mute-60); padding-top:2px;
}
.dash__bars{ display:grid; gap:5px; align-content:start }
.dash__bars div{ display:grid; grid-template-columns:78px minmax(0,1fr) 40px;
                 align-items:center; gap:7px }
.dash__bars u{ text-decoration:none; font:500 8px/1.2 var(--font-text);
               color:var(--dash-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dash__bars s{ text-decoration:none; font:700 9px/1 var(--font-display);
               color:var(--dash-value); text-align:right }
.dash__bars i{ display:block; height:8px; border-radius:99px; overflow:hidden;
               background:var(--dash-h1) }
.dash__bars i::after{
  content:''; display:block; height:100%; width:var(--v,50%); border-radius:99px;
  background:var(--c-accent);
}
.dash__bars .soft i::after{ background:var(--dash-h2) }

/* the recommendation. A dashboard that only reports is half a product, so the
   line that says what to do about it gets the accent surface. */
.dash__rec{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-sm);
  background:var(--dash-h1); font:400 8px/1.35 var(--font-text); color:var(--dash-ink);
}
.dash__rec span{ flex:0 0 auto; font-size:11px; color:var(--c-accent); line-height:1 }
.dash__rec b{ color:var(--c-accent); font-weight:600 }
.dash__rec u{ text-decoration:none; margin-left:auto; flex:0 0 auto;
              padding:4px 9px; border-radius:99px; background:var(--c-accent);
              color:#fff; font:600 7.5px/1 var(--font-text); white-space:nowrap }

/* Where a dashboard pins and swaps, the panels stack inside the working area —
   the rail and the bar belong to the frame, exactly as they do in the console. */
.dash__main > .panel{
  grid-area:1/1; display:grid; grid-auto-rows:min-content; gap:6px;
  align-content:space-between; min-height:0;
}

/* ============================ the visits console =========================
   The reporting side of the estate — what was visited, by whom, and from
   where. A third shell rather than a variant of the other two, because it is
   a different product surface: a deep grouped rail, a search bar across the
   top, and a work area of cards rather than a single screen of blocks.

   Sized in px against the device's known screen (700 x 502) for the same
   reason as the others. */
.vdash{
  --vd-side:150px;
  --vd-bg:#F4F7FC;
  --vd-line:#E7ECF5;
  --vd-ink:#101828;
  --vd-mute:#667085;
  --vd-navy:#101B33;
  display:grid; grid-template-columns:var(--vd-side) minmax(0,1fr);
  height:100%; min-height:0; overflow:hidden;
  background:var(--vd-bg); color:var(--vd-ink);
  font:400 8px/1.35 var(--font-text);
}

/* ---- the rail ---------------------------------------------------------- */
.vd-side{
  background:var(--vd-navy); color:#fff; min-height:0; overflow:hidden;
  display:grid; grid-template-rows:auto minmax(0,1fr);
}
.vd-brand{ display:grid; gap:2px; padding:10px 11px 11px }
.vd-brand img{ width:100%; max-width:104px; height:auto; filter:brightness(0) invert(1) }
.vd-brand span{ font:400 5px/1.3 var(--font-text); color:#8792A8; letter-spacing:.02em }
.vd-nav{ padding:0 8px 8px; display:grid; align-content:start; gap:0; min-height:0; overflow:hidden }
.vd-nav b{
  display:block; padding:8px 4px 3px;
  font:700 5.5px/1.4 var(--font-text); letter-spacing:.11em;
  text-transform:uppercase; color:#6B7894;
}
.vd-nav a{
  display:flex; align-items:center; gap:7px; padding:4.5px 7px; border-radius:6px;
  font:500 7.5px/1.3 var(--font-text); color:#C2CBDA; text-decoration:none;
  white-space:nowrap; overflow:hidden;
}
.vd-nav a svg{ width:9px; height:9px; flex:0 0 auto; opacity:.7 }
.vd-nav a em{ margin-left:auto; font-style:normal; opacity:.55; font-size:7px }
.vd-nav a.on{ background:var(--c-accent); color:#fff }
.vd-nav a.on svg{ opacity:1 }
/* a nested report, indented under its parent */
.vd-nav a.sub{ padding-left:22px; font-size:7px }

/* ---- the frame --------------------------------------------------------- */
.vd-main{ display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; overflow:hidden }
.vd-top{
  display:flex; align-items:center; gap:9px; padding:7px 11px;
  background:#fff; border-bottom:1px solid var(--vd-line);
}
.vd-top svg{ width:11px; height:11px; flex:0 0 auto; color:var(--vd-mute) }
.vd-search{
  flex:1 1 auto; min-width:0; max-width:230px; display:flex; align-items:center; gap:6px;
  padding:5px 9px; border:1px solid var(--vd-line); border-radius:99px;
  font:400 7px/1 var(--font-text); color:#98A2B3;
}
.vd-ava{
  margin-left:auto; flex:0 0 auto; width:17px; height:17px; border-radius:50%;
  display:grid; place-items:center; background:#E8EEFB; color:var(--c-accent);
  font:700 6.5px/1 var(--font-text);
}

.vd-work{ padding:7px; display:grid; min-height:0; overflow:hidden }
/* The title strip and the headline figures take what they need; the analysis
   row takes the rest. Left to min-content the whole screen sat in the top two
   thirds with a third of the device blank underneath it. */
.vd-work > .panel{
  grid-area:1/1; display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:8px;
  min-height:0;
}
.vd-two > .vd-card{ display:flex; flex-direction:column; min-height:0 }
/* the chart and the ring grow into whatever the row gives them */
.vd-two .vd-chart{ flex:1 1 auto; height:auto; min-height:64px }
.vd-two .vd-donut{ flex:0 0 auto; margin-top:auto; margin-bottom:auto }
.vd-two .vd-legend{ flex:0 0 auto }

/* ---- cards ------------------------------------------------------------- */
.vd-card{
  background:#fff; border:1px solid var(--vd-line); border-radius:8px;
  padding:8px 10px; min-width:0;
}
.vd-card > h4{
  display:flex; align-items:center; gap:6px; margin:0 0 6px;
  font:700 8.5px/1.2 var(--font-display); letter-spacing:-.1px; color:var(--vd-ink);
}
.vd-card > h4 svg{ width:11px; height:11px; flex:0 0 auto; color:var(--c-accent) }
.vd-pick{
  margin-left:auto; display:flex; align-items:center; gap:5px;
  padding:3px 7px; border:1px solid var(--vd-line); border-radius:6px;
  font:500 6.5px/1.2 var(--font-text); color:var(--vd-mute);
}

/* the four headline figures */
.vd-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px }
.vd-kpis > div{
  display:flex; align-items:center; gap:8px; padding:7px 9px;
  border:1px solid var(--vd-line); border-radius:7px; min-width:0;
}
.vd-kpis i{
  width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; background:#EAF0FD; color:var(--c-accent);
}
.vd-kpis i svg{ width:12px; height:12px }
.vd-kpis u{ text-decoration:none; min-width:0 }
.vd-kpis b{ display:block; font:600 14px/1.15 var(--font-display); letter-spacing:-.4px }
.vd-kpis span{
  display:block; margin-top:2px; font:600 5.5px/1.3 var(--font-text);
  letter-spacing:.07em; text-transform:uppercase; color:var(--vd-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vd-kpis .sm b{ font-size:9px; letter-spacing:-.1px }

/* the two analyses, side by side */
.vd-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; min-height:0 }
.vd-mini{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:6px }
.vd-mini > div{
  padding:7px 6px; border:1px solid var(--vd-line); border-radius:7px;
  text-align:center; background:#FBFCFE;
}
.vd-mini i{ display:grid; place-items:center; margin:0 auto 4px; width:17px; height:17px;
            border-radius:5px; background:#EAF0FD; color:var(--c-accent) }
.vd-mini i svg{ width:10px; height:10px }
.vd-mini b{ display:block; font:600 10px/1.1 var(--font-display); letter-spacing:-.2px }
.vd-mini span{ display:block; margin-top:2px; font:600 5px/1.3 var(--font-text);
               letter-spacing:.07em; text-transform:uppercase; color:var(--vd-mute);
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* a long-tail column chart: the first bar carries the story, the tail proves
   it is a real distribution rather than a picked list */
.vd-chart{ display:flex; align-items:flex-end; gap:2px; height:74px; padding-top:4px }
.vd-chart i{
  flex:1 1 0; min-width:0; height:var(--h,20%); border-radius:2px 2px 0 0;
  background:color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.vd-chart i:first-child{ background:var(--c-accent) }
.vd-chart i:nth-child(2), .vd-chart i:nth-child(3){
  background:color-mix(in srgb, var(--c-accent) 66%, transparent);
}
.vd-axis{ display:flex; gap:2px; margin-top:4px }
.vd-axis span{
  flex:1 1 0; min-width:0; font:400 5px/1.2 var(--font-text); color:var(--vd-mute);
  text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* the speciality split */
.vd-donut{
  width:74px; height:74px; border-radius:50%; margin:2px auto 0; flex:0 0 auto;
  background:conic-gradient(var(--slices));
  -webkit-mask:radial-gradient(circle, transparent 40%, #000 41%);
  mask:radial-gradient(circle, transparent 40%, #000 41%);
}
.vd-legend{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 6px }
.vd-legend span{
  display:flex; align-items:center; gap:4px;
  font:400 5.5px/1.4 var(--font-text); color:var(--vd-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vd-legend i{ width:6px; height:6px; border-radius:2px; flex:0 0 auto; background:var(--c) }

/* ---- filling the screen ------------------------------------------------
   The rail is 13 rows long and sets the device's height on its own, so a screen
   with fewer blocks than the rail has rows leaves a third of itself blank. The
   blocks take the slack between them rather than piling up at the top.

   These sit at the end of the file on purpose: earlier declarations of the same
   properties were being overridden and the screens quietly stayed top-packed. */
.dash__main{ align-content:space-between }
/* height:100% on a grid item whose row is content-sized is circular — the row
   sizes to the item and the item to the row, so it settles on the content and
   the panel never fills. The row is told to stretch instead and the panel just
   goes along with it. */
.dash__main:has(> .panel){ grid-template-rows:minmax(0,1fr); grid-auto-rows:auto }
.dash__main > .panel{ align-content:space-between; height:auto; align-self:stretch }
.wd-work{ grid-template-rows:minmax(0,1fr); align-items:stretch }
.wd-work > .panel{ height:auto; align-self:stretch; justify-content:space-between }
.vd-work > .panel{ align-content:stretch }

/* ---- more ways to draw a number ----------------------------------------
   Twelve screens built from one bar chart and one ring all looked like the
   same screen with the words changed. These are the other shapes the data
   actually takes: a ranking, a table, a trend, a funnel, a share, a gauge,
   progress and a distribution. Each screen picks the one its content is. */

/* a single panel with nothing to swap it for is always the visible one — the
   step tracker only runs inside a pinned channel, so on its own a panel would
   sit hidden forever */
.vd-work > .panel:only-child{ opacity:1; visibility:visible; transform:none }

/* ranking: the order is the point, so the bar sits in the row */
.vd-rank{ display:grid; gap:7px; align-content:start }
.vd-rank > div{ display:grid; grid-template-columns:minmax(56px,32%) minmax(0,1fr) 34px;
                gap:8px; align-items:center }
.vd-rank u{ text-decoration:none; font:500 7.5px/1.2 var(--font-text); color:var(--vd-ink);
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vd-rank i{ display:block; height:9px; border-radius:99px; overflow:hidden;
            background:color-mix(in srgb, var(--c-accent) 9%, transparent) }
.vd-rank i::after{ content:''; display:block; height:100%; width:var(--v,50%);
                   border-radius:99px; background:var(--c-accent) }
.vd-rank .soft i::after{ background:color-mix(in srgb, var(--c-accent) 40%, transparent) }
.vd-rank s{ text-decoration:none; font:700 8.5px/1 var(--font-display); text-align:right }

/* a table, for when the interesting thing is the row not the size */
.vd-tab{ width:100%; border-collapse:collapse }
.vd-tab th{
  text-align:left; padding:0 0 5px; border-bottom:1px solid var(--vd-line);
  font:700 5.5px/1.3 var(--font-text); letter-spacing:.08em; text-transform:uppercase;
  color:var(--vd-mute);
}
.vd-tab td{ padding:5.5px 0; border-bottom:1px solid var(--vd-line);
            font:400 7px/1.3 var(--font-text); color:var(--vd-mute) }
.vd-tab tr:last-child td{ border-bottom:0 }
.vd-tab b{ font:600 7.5px/1.3 var(--font-text); color:var(--vd-ink) }
.vd-tab .n{ text-align:right; font:600 7.5px/1.3 var(--font-text); color:var(--vd-ink) }
.vd-tab em{
  font-style:normal; padding:2px 6px; border-radius:99px;
  font:600 5.5px/1 var(--font-text); background:#E7F7EE; color:#12784A;
}
.vd-tab em.w{ background:#FEF4E5; color:#B54708 }
.vd-tab em.n{ background:#EDF1F7; color:var(--vd-mute) }

/* a trend, drawn as an area */
.vd-trend{ display:block; width:100%; height:74px; overflow:visible }
.vd-trend .area{ fill:color-mix(in srgb, var(--c-accent) 12%, transparent) }
.vd-trend .line{ fill:none; stroke:var(--c-accent); stroke-width:1.8;
                 stroke-linejoin:round; stroke-linecap:round }
.vd-trend .dot{ fill:#fff; stroke:var(--c-accent); stroke-width:1.6 }

/* a funnel, where each step is a subset of the one above it */
.vd-fun{ display:grid; gap:5px }
.vd-fun div{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-inline:auto; width:var(--w,100%); padding:7px 10px; border-radius:5px;
  font:600 7.5px/1 var(--font-text); color:#fff;
}
.vd-fun div:nth-child(1){ --w:100%; background:color-mix(in srgb,var(--c-accent) 55%,#fff); color:var(--c-accent-text) }
.vd-fun div:nth-child(2){ --w:82%; background:color-mix(in srgb,var(--c-accent) 80%,#fff) }
.vd-fun div:nth-child(3){ --w:64%; background:var(--c-accent) }
.vd-fun div:nth-child(4){ --w:46%; background:color-mix(in srgb,var(--c-accent) 84%,#000) }

/* one bar, split by share */
.vd-split{ display:flex; height:15px; border-radius:99px; overflow:hidden }
.vd-split i{ background:var(--c); flex:0 0 var(--w) }
.vd-key{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 8px; margin-top:8px }
.vd-key span{ display:flex; align-items:center; gap:5px;
              font:400 6.5px/1.4 var(--font-text); color:var(--vd-mute) }
.vd-key span b{ margin-left:auto; font:600 6.5px/1.4 var(--font-text); color:var(--vd-ink) }
.vd-key i{ width:7px; height:7px; border-radius:2px; flex:0 0 auto; background:var(--c) }

/* a gauge, for a single rate */
/* The caption sits at bottom:-13px — outside this box — so `overflow:hidden`
   here was clipping it away and every gauge read as a bare number with nothing
   saying what it was a percentage OF. The clip is not what makes the arc a
   semicircle: the conic gradient below is already `transparent 50%`, so the
   lower half of the pseudo-element draws nothing either way. It was only
   containing that element's spill, which is invisible. Dropped, and the space
   the caption needs is reserved in the bottom margin so it cannot land on the
   component underneath. */
.vd-gauge{ position:relative; width:104px; margin:4px auto 15px; aspect-ratio:2/1 }
.vd-gauge::before{
  content:''; position:absolute; inset:0 0 -100% 0; border-radius:50%;
  background:conic-gradient(from 270deg,
    var(--c-accent) 0 calc(var(--p,60) * 0.5%),
    color-mix(in srgb, var(--c-accent) 10%, transparent) calc(var(--p,60) * 0.5%) 50%,
    transparent 50%);
  -webkit-mask:radial-gradient(circle, transparent 54%, #000 55%);
  mask:radial-gradient(circle, transparent 54%, #000 55%);
}
.vd-gauge b{
  position:absolute; left:0; right:0; bottom:2px; text-align:center;
  font:600 15px/1 var(--font-display); letter-spacing:-.4px; color:var(--vd-ink);
}
.vd-gauge span{ position:absolute; left:0; right:0; bottom:-13px; text-align:center;
                font:600 5.5px/1.3 var(--font-text); letter-spacing:.07em;
                text-transform:uppercase; color:var(--vd-mute) }

/* progress: how far through a thing people got */
.vd-prog{ display:grid; gap:8px; align-content:start }
.vd-prog > div{ display:grid; gap:4px }
.vd-prog .t{ display:flex; align-items:baseline; gap:6px;
             font:600 7.5px/1.2 var(--font-text); color:var(--vd-ink) }
.vd-prog .t s{ margin-left:auto; text-decoration:none; font:700 8px/1 var(--font-display) }
.vd-prog .t em{ font-style:normal; font-weight:400; color:var(--vd-mute); font-size:6.5px }
.vd-prog i{ display:block; height:7px; border-radius:99px; overflow:hidden;
            background:color-mix(in srgb, var(--c-accent) 9%, transparent) }
.vd-prog i::after{ content:''; display:block; height:100%; width:var(--v,50%);
                   border-radius:99px; background:var(--c-accent) }
.vd-prog .part i::after{ background:color-mix(in srgb, var(--c-accent) 45%, transparent) }

/* a distribution, where the shape matters more than any one column */
.vd-hist{ display:flex; align-items:flex-end; gap:6px; height:78px }
.vd-hist i{ flex:1 1 0; height:var(--h,30%); border-radius:3px 3px 0 0;
            background:color-mix(in srgb, var(--c-accent) 34%, transparent) }
.vd-hist i.on{ background:var(--c-accent) }
.vd-hlab{ display:flex; gap:6px; margin-top:5px }
.vd-hlab span{ flex:1 1 0; text-align:center; font:400 5.5px/1.2 var(--font-text);
               color:var(--vd-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* two figures set against each other */
.vd-vs{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px }
.vd-vs > div{ text-align:center }
.vd-vs b{ display:block; font:600 17px/1.1 var(--font-display); letter-spacing:-.5px }
.vd-vs span{ display:block; margin-top:3px; font:600 5.5px/1.3 var(--font-text);
             letter-spacing:.07em; text-transform:uppercase; color:var(--vd-mute) }
.vd-vs em{ font-style:normal; font:600 8px/1 var(--font-text); color:var(--vd-mute) }
.vd-vs .win b{ color:var(--c-accent) }

/* The screens no longer share one three-block template, so the row that takes
   the slack cannot be named by position. The last block on a screen grows into
   whatever is left, and the space lands INSIDE the card — a panel with room in
   it reads as a panel; the same space between the card and the device edge
   reads as a screen that ran out. */
.vd-work > .panel{ display:flex; flex-direction:column; gap:8px }
.vd-work > .panel > :last-child{ flex:1 1 auto; min-height:0 }
.vd-work > .panel > .vd-card:last-child{ display:flex; flex-direction:column }
/* Name what may grow rather than trusting position. ":last-child takes the
   slack" was right while the last thing in a card was a chart, and wrong the
   moment it was a row of axis labels — which then absorbed 120px to render ten
   pixels of text. The plot grows; its labels never do. */
.vd-work > .panel > .vd-card > :is(.vd-chart,.vd-hist),
.vd-work > .panel > .vd-two > .vd-card > :is(.vd-chart,.vd-hist){
  flex:1 1 auto; min-height:0;
}
/* Row lists were in the line above and should not have been. A plot is a plot
   area and fills what it is given; a ranking, a funnel, a table and a progress
   list are rows, and rows are as tall as they are. */
.vd-work > .panel > .vd-card > :is(.vd-rank,.vd-fun,.vd-prog,.vd-tab),
.vd-work > .panel > .vd-two > .vd-card > :is(.vd-rank,.vd-fun,.vd-prog,.vd-tab){
  flex:0 0 auto;
}
.vd-work > .panel > .vd-card > :is(.vd-axis,.vd-legend,.vd-key,.vd-hlab,.vd-mini),
.vd-work > .panel > .vd-two > .vd-card > :is(.vd-axis,.vd-legend,.vd-key,.vd-hlab,.vd-mini){
  flex:0 0 auto;
}
/* a donut cannot grow, so it centres in whatever it is given */
.vd-work > .panel > .vd-two > .vd-card > .vd-donut{ margin-block:auto }
.vd-work > .panel > .vd-two:last-child > .vd-card{ display:flex; flex-direction:column }

/* tables and rankings sit at the top of the space they are given */
.vd-tab{ align-self:flex-start }

/* ============================ screens filling in ========================
   Everything inside a screen arrives. Items are tagged by script and staggered
   off --r, so a screen assembles itself in reading order rather than appearing
   whole. Held off .js so a dead script still ships a rendered screen. */
.js .mock .mk-item{
  opacity:0; transform:translateY(9px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:calc(var(--r,0) * 46ms);
}
.js .mock .mk-item.mk-in{ opacity:1; transform:none }

/* A quantity draws itself — the LENGTH is the reading, and a bar that arrives
   at full width has already given the answer before you look at it. */
.js .mock .m-bar i::after,
.js .mock .dash__bars i::after,
.js .mock .vd-rank i::after{
  transform-origin:left center; transform:scaleX(0);
  transition:transform .75s var(--ease-out) .12s;
}
/* .vd-rank holds divs, not lis. The rest state above matched (.vd-rank i::after
   is element-agnostic) but this one did not, so every rank bar sat at scaleX(0)
   for good — the row read as an empty track with a number beside it. */
.js .mock .m-bar.mk-in i::after,
.js .mock .dash__bars > div.mk-in i::after,
.js .mock .vd-rank > div.mk-in i::after{ transform:scaleX(1) }

/* columns grow from their own baseline, staggered across the chart */
.js .mock .vd-chart i,
.js .mock .m-bars i{
  transform-origin:center bottom; transform:scaleY(0);
  transition:transform .6s var(--ease-out);
  transition-delay:calc(var(--r,0) * 34ms);
}
.js .mock .vd-chart i.mk-in,
.js .mock .m-bars i.mk-in{ transform:scaleY(1) }

/* the funnel tapers in from its own left edge, step after step */
.js .mock .m-funnel > div{
  transform-origin:left center;
  transition:opacity .5s var(--ease-out), transform .55s var(--ease-out);
}

/* the ring sweeps round to its value */
/* inherits:true, and it matters. Registering --p is what lets it transition,
   but a registered property with inherits:false is NOT passed to pseudo-
   elements — so .vd-gauge could carry --p:74 while its own ::before, which is
   the thing that draws the arc, read the initial 0 and painted an empty track
   under a label saying 74%. The ring reads --p on itself, so it is unaffected. */
@property --p{ syntax:'<number>'; inherits:true; initial-value:0 }
.js .mock .dash__ring{ transition:--p 1s var(--ease-out) .15s }

/* the donut wipes in rather than snapping on */
.js .mock .vd-donut{
  clip-path:inset(0 0 0 0 round 50%);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transform:rotate(-14deg) scale(.94);
}
.js .mock .vd-donut.mk-in{ transform:none }

/* the rail's active row slides rather than blinking between screens */
.wd-nav a, .dash__nav span, .vd-nav a{
  transition:background-color .32s var(--ease), color .32s var(--ease);
}

/* the screen's own title changes with the screen */
.dash__head b, .vd-card h4, .wd-top b{ transition:opacity .3s var(--ease) }

@media (prefers-reduced-motion:reduce){
  .js .mock .mk-item,
  .js .mock .m-bar i::after, .js .mock .dash__bars i::after,
  .js .mock .vd-rank i::after, .js .mock .vd-chart i,
  .js .mock .m-bars i, .js .mock .vd-donut{
    opacity:1; transform:none; transition:none;
  }
}

/* ---- where the slack in a card goes -----------------------------------
   The card is a flex column stretched to the screen's height, so its children
   were sharing the leftover space equally — which put 120px into a row of axis
   labels that needs ten. Nothing grows by default; the chart takes the slack,
   because a taller chart is a better chart and a taller label is nothing. */
.vd-card > *{ flex:0 0 auto }
.vd-chart, .vd-hist{ flex:1 1 auto; min-height:74px }
.vd-rank, .vd-fun, .vd-prog{ flex:0 0 auto; align-content:start }
.vd-card > .vd-donut{ margin-block:auto }
.vd-key{ flex:0 0 auto }
.vd-two > .vd-card{ display:flex; flex-direction:column }

/* the same rule for the other two consoles */
.wd-panel > *{ flex:0 0 auto }
.dash__main > *{ flex:0 0 auto }

/* ---- the same rule for the HCP 360 console ---------------------------
   align-content:space-between shared the leftover height equally between every
   block, which put 24 to 43px between each one — the screen read as loose
   rather than as designed. A fixed gap, and the data block takes the slack:
   a taller matrix or timeline is better, a taller heading is nothing. */
.dash__main:not(:has(> .panel)){
  display:flex; flex-direction:column; gap:7px;
}
.dash__main > .panel{ display:flex; flex-direction:column; gap:7px }
.dash__main > *,
.dash__main > .panel > *{ flex:0 0 auto }
.dash__main > :is(.dash__matrix,.dash__time,.dash__score,.dash__bars,.dash__cards),
.dash__main > .panel > :is(.dash__matrix,.dash__time,.dash__score,.dash__bars,.dash__cards){
  flex:1 1 auto; min-height:0;
}
/* the matrix's own grid grows with it rather than leaving a gap under the rows */
.dash__matrix{ display:flex; flex-direction:column }
.dash__matrix > .dash__grid{ flex:0 0 auto; align-content:start }

/* ============================================================================
   Executive Overview — the screen in the channels-page head
   ----------------------------------------------------------------------------
   Built to the supplied reference, but sized to the device that already exists
   rather than the other way round: the panel is ~528x440 inside a 664x486
   tablet, so this is the TOP of that reference — the title, the three headline
   figures, reachability against distribution, and the growth bars — and it
   stops there. The product cards and the HCP table below them in the reference
   would only have shrunk the type past reading.

   Chrome stays on the site's navy, because the other nine mockups in this page
   are navy and a green console here would read as a different product. The
   categorical colours (engaged / active / at risk / passive) do carry through,
   since those encode a state rather than a brand — amber for "at risk" is
   doing real work.
   ============================================================================ */
.ex{ gap:7px }
:is(.ex,.hp,.en) .ex-head{ display:flex; align-items:flex-start; gap:5px }
:is(.ex,.hp,.en) .ex-head > div{ margin-right:auto; min-width:0 }
:is(.ex,.hp,.en) .ex-head b{ display:block; font:600 12.5px/1.2 var(--font-display);
            letter-spacing:-.3px; color:var(--dash-value) }
:is(.ex,.hp,.en) .ex-head i{ display:block; margin-top:1px; font:400 7.5px/1.3 var(--font-text);
            font-style:normal; color:var(--dash-mute-60) }
:is(.ex,.hp,.en) .ex-chip{
  flex:0 0 auto; padding:3px 6px; border-radius:var(--r-xs);
  border:1px solid var(--dash-line); background:var(--canvas);
  font:500 7px/1.2 var(--font-text); color:var(--dash-mute-60); white-space:nowrap;
}

/* ---- the three headline figures --------------------------------------- */
.ex-kpis{ display:grid; grid-template-columns:1.15fr 1fr .95fr; gap:6px }
.ex .ex-kpi{
  padding:7px; border:1px solid var(--dash-line); border-radius:var(--r-sm);
  background:var(--canvas); min-width:0;
}
.ex .ex-kpi header{ display:flex; align-items:center; gap:4px }
.ex .ex-kpi header span{
  font:700 6.5px/1.3 var(--font-text); letter-spacing:.05em; text-transform:uppercase;
  color:var(--dash-mute-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ex .ex-kpi em{
  margin-left:auto; flex:0 0 auto; padding:1px 4px; border-radius:var(--r-pill);
  font:700 6.5px/1.4 var(--font-text); font-style:normal;
  color:#0F5132; background:rgba(15,81,50,.10);
}
.ex .ex-kpi > b{
  display:block; margin-top:2px; font:700 15px/1.25 var(--font-display);
  letter-spacing:-.5px; color:var(--dash-value); font-variant-numeric:tabular-nums;
}
.ex .ex-kpi p{ margin:3px 0 0; font:400 6.5px/1.35 var(--font-text); color:var(--dash-mute-40) }
.ex .ex-split{ display:flex; gap:4px; margin-top:4px; font:400 6.5px/1.3 var(--font-text) }
.ex .ex-split u{ text-decoration:none; color:var(--dash-mute-60) }
.ex .ex-split s{ margin-left:auto; text-decoration:none; color:var(--dash-value); font-weight:600 }

/* one bar, four states, the segments growing out of nothing together */
.ex-stack{ display:flex; gap:2px; height:5px; margin-top:3px }
.ex .ex-stack i{
  display:block; width:var(--w); background:var(--c); border-radius:2px;
  transform-origin:left center;
}
.ex .ex-key{ display:flex; flex-wrap:wrap; gap:2px 7px; margin-top:5px }
.ex .ex-key span{ display:flex; align-items:center; gap:3px;
              font:400 6px/1.3 var(--font-text); color:var(--dash-mute-60) }
.ex .ex-key span i{ width:5px; height:5px; border-radius:50%; background:var(--c); flex:0 0 auto }

.ex .ex-tags{ display:flex; flex-wrap:wrap; gap:3px; margin-top:5px }
.ex .ex-tags span{
  padding:1.5px 4px; border-radius:var(--r-xs);
  font:600 6px/1.3 var(--font-text); white-space:nowrap;
}
.ex .ex-tags .t1{ background:color-mix(in srgb, var(--c-accent) 12%, transparent); color:var(--c-accent-text) }
.ex .ex-tags .t2{ background:rgba(37, 211, 102, .16); color:#14793C }
.ex .ex-tags .t3{ background:rgba(124, 77, 224, .14); color:#5B34B8 }
.ex .ex-tags .t4{ background:rgba(201, 162, 39, .18); color:#8A6D0B }
.ex .ex-tags .t5{ background:var(--canvas-parchment); color:var(--dash-mute-60) }

/* ---- the ring --------------------------------------------------------- */
.ex-kpi--ring{ display:flex; align-items:center; gap:6px }
.ex .ex-kpi--ring > div:first-child{ min-width:0 }
:is(.ex,.hp) .ex-ring{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  /* --pv carries the real figure; --p is what the gradient reads and it stays
     at 0 until the screen paints, so the ring sweeps round to its value
     instead of arriving already full. --p is a registered <number>, which is
     the only reason a conic-gradient stop can be transitioned at all. */
  --p:0;
  background:conic-gradient(var(--c-accent) calc(var(--p) * 1%), var(--dash-line) 0);
  display:grid; place-items:center;
}
:is(.ex,.hp) .ex-ring::after{
  content:""; grid-area:1/1; width:70%; height:70%; border-radius:50%; background:var(--canvas);
}
:is(.ex,.hp) .ex-ring u{
  grid-area:1/1; z-index:1; text-decoration:none;
  font:700 7px/1 var(--font-display); color:var(--dash-value); font-variant-numeric:tabular-nums;
}
:is(.ex,.hp) .ex-ring--lg{ width:52px; height:52px }
:is(.ex,.hp) .ex-ring--lg u{ font-size:9px }

/* ---- the two panels --------------------------------------------------- */
.ex-two{ display:grid; grid-template-columns:1.06fr 1fr; gap:6px; min-height:0 }
:is(.ex,.hp,.en) .ex-card{
  padding:7px; border:1px solid var(--dash-line); border-radius:var(--r-sm);
  background:var(--canvas); display:flex; flex-direction:column; min-width:0;
}
:is(.ex,.hp,.en) .ex-card h4{
  display:flex; align-items:center; gap:4px; margin:0 0 5px;
  font:600 8px/1.2 var(--font-text); color:var(--dash-ink);
}
:is(.ex,.hp,.en) .ex-card h4 span{
  margin-left:auto; font:700 7px/1.3 var(--font-text); color:var(--c-accent-text);
}
:is(.ex,.hp,.en) .ex-card p{ margin:5px 0 0; font:400 6px/1.35 var(--font-text); color:var(--dash-mute-40) }

.ex .ex-reach{ display:flex; align-items:center; gap:7px }
.ex .ex-bars{ flex:1; min-width:0; display:grid; gap:3px }
.ex .ex-bars div{ display:grid; grid-template-columns:44px minmax(0, 1fr) 26px; gap:4px; align-items:center }
.ex .ex-bars u{ text-decoration:none; font:400 6.5px/1.3 var(--font-text); color:var(--dash-mute-60);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ex .ex-bars i{ height:4px; border-radius:2px; background:var(--dash-h1); position:relative; overflow:hidden }
.ex .ex-bars i::after{
  content:""; position:absolute; inset:0; width:var(--v); border-radius:2px;
  background:var(--c-accent); transform-origin:left center;
}
.ex .ex-bars .soft i::after{ background:var(--dash-mute-40) }
.ex .ex-bars s{ text-decoration:none; text-align:right; font:600 6.5px/1.3 var(--font-text);
            color:var(--dash-value); font-variant-numeric:tabular-nums }

/* ---- the distribution plot -------------------------------------------- */
.ex-dist{ position:relative; flex:1 1 auto; min-height:44px }
.ex .ex-dist svg{ position:absolute; inset:0; width:100%; height:100%; display:block }
.ex .ex-bands{ position:absolute; inset:0; display:grid; grid-template-columns:31fr 15fr 33fr 21fr }
.ex .ex-bands i{ display:block; border-right:1px solid var(--dash-line) }
.ex .ex-bands i:nth-child(1){ background:color-mix(in srgb, var(--c-accent) 3%, transparent) }
.ex .ex-bands i:nth-child(2){ background:rgba(201, 162, 39, .07) }
.ex .ex-bands i:nth-child(3){ background:color-mix(in srgb, var(--c-accent) 6%, transparent) }
.ex .ex-bands i:nth-child(4){ background:rgba(15, 81, 50, .07); border-right:0 }
.ex .ex-area{ fill:color-mix(in srgb, var(--c-accent) 16%, transparent) }
.ex .ex-line{ fill:none; stroke:var(--c-accent); stroke-width:1.6; vector-effect:non-scaling-stroke }
.ex .ex-key--dist{ margin-top:5px; justify-content:space-between; flex-wrap:nowrap; gap:3px }
.ex .ex-key--dist span{ display:grid; gap:0; min-width:0 }
.ex .ex-key--dist b{ font:700 7.5px/1.2 var(--font-display); color:var(--dash-value);
                 font-variant-numeric:tabular-nums }

/* ---- growth ----------------------------------------------------------- */
.ex-card--grow{ flex:0 0 auto }
.ex .ex-cols{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:3px;
          align-items:end; height:30px }
.ex .ex-cols i{
  display:block; height:var(--h); border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, var(--c-accent), color-mix(in srgb,var(--c-accent) 62%,#fff));
  transform-origin:center bottom;
}
.ex .ex-axis{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:3px; margin-top:3px }
.ex .ex-axis span{ font:400 5.5px/1.2 var(--font-text); color:var(--dash-mute-40); text-align:center }

/* ---- the entrance ------------------------------------------------------
   The parts that carry a quantity draw themselves: the segmented bar and the
   reachability bars grow from their left edge, the twelve columns rise from
   their own baseline in sequence, and the plot wipes in from the left. All of
   it hangs off .mk-in like every other mockup on the site, so the one paint
   call the pinned-frame tracker already makes runs this screen too. */
.js .mock .ex-stack i,
.js .mock .ex-bars i::after{ transform:scaleX(0); transition:transform .7s var(--ease-out) .1s }
.js .mock .ex-stack.mk-in i,
.js .mock .ex-bars > div.mk-in i::after{ transform:scaleX(1) }
.js .mock .ex-cols i{
  transform:scaleY(0); transition:transform .55s var(--ease-out);
  transition-delay:calc(var(--r,0) * 26ms);
}
.js .mock .ex-cols i.mk-in{ transform:scaleY(1) }
.js .mock .ex-dist svg{
  clip-path:inset(0 100% 0 0); transition:clip-path .85s var(--ease-out) .15s;
}
.js .mock .ex-dist.mk-in svg{ clip-path:inset(0 0 0 0) }
@media (prefers-reduced-motion:reduce){
  .js .mock .ex-stack i, .js .mock .ex-bars i::after,
  .js .mock .ex-cols i{ transform:none; transition:none }
  .js .mock .ex-dist svg{ clip-path:none; transition:none }
}

/* the lower pair: what they are interested in, and where it is working */
.ex-two--b{ flex:0 0 auto }
.ex .ex-bars--wide div{ grid-template-columns:62px minmax(0, 1fr) 24px }
.ex .ex-rank{ list-style:none; margin:0; padding:0; display:grid; gap:4px }
.ex .ex-rank li{ display:flex; align-items:center; gap:5px }
.ex .ex-rank li i{ width:5px; height:5px; border-radius:50%; background:var(--c); flex:0 0 auto }
.ex .ex-rank u{ text-decoration:none; font:400 7px/1.3 var(--font-text); color:var(--dash-mute-60);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ex .ex-rank b{ margin-left:auto; font:700 7.5px/1.3 var(--font-text); color:var(--dash-value);
            font-variant-numeric:tabular-nums }
.ex .ex-rank em{ font-style:normal; font-size:7px; line-height:1 }
.ex .ex-rank .up{ color:#0F5132 }
.ex .ex-rank .dn{ color:#B4532A }

/* ============================================================================
   HCP 360 profile — the screen in the "Unified HCP journey" feature
   ----------------------------------------------------------------------------
   Same rule as the Executive Overview beside it: built to the reference, cut to
   the device that already exists. The panel is ~606x428, so this carries the
   identity card, the tab row, the next-best-action banner, the two preference
   panels and the head of the timeline — and stops. The reference's full
   activity list runs for pages; three entries and a day header say the same
   thing at this size, which is "one continuous record, newest first".

   Every selector is prefixed .hp because the page's own .feat p / .feat h3 sit
   in a later stylesheet at equal weight and would otherwise win.
   ============================================================================ */
.hp{ gap:6px }

.hp .hp-back{ font:500 7px/1.2 var(--font-text); color:var(--dash-mute-60) }

/* ---- who they are ------------------------------------------------------ */
.hp .hp-card{
  padding:7px; border:1px solid var(--dash-line); border-radius:var(--r-sm);
  background:var(--canvas); border-top:2px solid var(--c-accent);
}
.hp .hp-id{ display:flex; align-items:flex-start; gap:8px }
.hp .hp-id > div:first-child{ min-width:0; flex:1 }
.hp .hp-id b{ display:block; font:700 11.5px/1.2 var(--font-display);
              letter-spacing:-.3px; color:var(--dash-value) }
.hp .hp-id i{ display:block; margin-top:2px; font:400 7.5px/1.3 var(--font-text);
              font-style:normal; color:var(--dash-ink) }
.hp .hp-id s{ display:block; margin-top:1px; text-decoration:none;
              font:400 6.5px/1.3 var(--font-text); color:var(--dash-mute-40) }
.hp .hp-pills{ display:flex; gap:4px; margin-top:4px }
.hp .hp-pills span{
  padding:2px 5px; border-radius:var(--r-pill);
  font:600 6px/1.3 var(--font-text);
  color:#0F5132; background:rgba(15,81,50,.10);
}
.hp .hp-score{ flex:0 0 auto; display:grid; justify-items:center; gap:2px }
.hp .hp-score em{ font:700 5.5px/1 var(--font-text); font-style:normal;
                  letter-spacing:.08em; text-transform:uppercase; color:var(--dash-mute-40) }
/* the ring is the Executive Overview's, in green because this one is a score
   rather than a share — a full ring reads as "good", not as "all of it" */
.hp .hp-score .ex-ring{
  background:conic-gradient(#0F5132 calc(var(--p,0) * 1%), var(--dash-line) 0);
}
.hp .hp-score .ex-ring u{ color:#0F5132; font-size:11px }

.hp .hp-meta{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;
  margin-top:5px; padding-top:5px; border-top:1px solid var(--dash-line);
}
.hp .hp-meta span{ display:block; font:700 5.5px/1.3 var(--font-text);
                   letter-spacing:.08em; text-transform:uppercase; color:var(--dash-mute-40) }
.hp .hp-meta b{ display:block; margin-top:1px; font:600 7.5px/1.3 var(--font-text);
                color:var(--dash-value) }

/* ---- the tab row ------------------------------------------------------- */
.hp .hp-tabs{
  display:flex; gap:2px; padding:2px; border-radius:var(--r-pill);
  border:1px solid var(--dash-line); background:var(--canvas);
}
.hp .hp-tabs span{
  flex:1; text-align:center; padding:3px 4px; border-radius:var(--r-pill);
  font:500 6.5px/1.3 var(--font-text); color:var(--dash-mute-60);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hp .hp-tabs .on{ background:var(--c-accent); color:#fff; font-weight:600 }

/* ---- what the platform thinks they should do next ---------------------- */
.hp .hp-nba{
  display:flex; align-items:center; gap:7px; padding:6px 8px;
  border-radius:var(--r-sm); color:#fff;
  background:linear-gradient(120deg, #17325F, var(--c-accent) 70%);
}
.hp .hp-nba > i{
  flex:0 0 auto; width:16px; height:16px; border-radius:var(--r-xs);
  background:rgba(255,255,255,.16);
}
.hp .hp-nba > div{ flex:1; min-width:0 }
.hp .hp-nba b{
  display:flex; align-items:center; gap:5px;
  font:700 6px/1.3 var(--font-text); letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hp .hp-nba em{
  font-style:normal; letter-spacing:0; text-transform:none;
  padding:1px 4px; border-radius:var(--r-pill);
  background:rgba(109,207,246,.22); color:#BFE8FB;
}
.hp .hp-nba p{ margin:2px 0 0; font:400 7px/1.35 var(--font-text); color:#fff }
.hp .hp-go, .hp .hp-no{
  flex:0 0 auto; padding:3px 7px; border-radius:var(--r-pill);
  font:600 6.5px/1.3 var(--font-text);
}
.hp .hp-go{ background:#0F5132; color:#fff }
.hp .hp-no{ background:rgba(255,255,255,.92); color:var(--dash-value) }

/* ---- preferences and metrics ------------------------------------------- */
.hp .hp-two{ display:grid; grid-template-columns:1.12fr 1fr; gap:6px; flex:0 0 auto }
.hp .hp-bars{ display:grid; gap:3px }
/* one line per channel, not two. The label above its own bar is what the
   reference does at full size; in a 280px column it cost 36px of the record
   below, and the record is what this feature is about. */
.hp .hp-bars div{ display:grid; grid-template-columns:62px minmax(0,1fr) 24px;
                  grid-template-areas:"lab bar val"; gap:4px; align-items:center }
.hp .hp-bars u{ grid-area:lab; text-decoration:none; font:400 6.5px/1.3 var(--font-text);
                color:var(--dash-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hp .hp-bars s{ grid-area:val; text-decoration:none; text-align:right;
                font:700 6.5px/1.3 var(--font-text); color:var(--dash-value);
                font-variant-numeric:tabular-nums }
.hp .hp-bars i{ grid-area:bar; height:4px; border-radius:2px;
                background:var(--dash-h1); position:relative; overflow:hidden }
.hp .hp-bars i::after{
  content:""; position:absolute; inset:0; width:var(--v); border-radius:2px;
  background:var(--c, var(--c-accent)); transform-origin:left center;
}
.hp .ex-card p{ margin-top:auto; padding-top:4px }
.hp .ex-card p span{ display:block; font:700 5.5px/1.3 var(--font-text);
                     letter-spacing:.08em; text-transform:uppercase; color:var(--dash-mute-40) }
.hp .ex-card p{ font:600 7.5px/1.3 var(--font-text); color:var(--dash-value) }

/* ---- the record itself -------------------------------------------------- */
.hp .hp-filters{ display:flex; gap:3px; flex-wrap:wrap }
.hp .hp-filters span{
  padding:2px 6px; border-radius:var(--r-pill);
  border:1px solid var(--dash-line); background:var(--canvas);
  font:500 6px/1.3 var(--font-text); color:var(--dash-mute-60);
}
.hp .hp-filters .on{ background:rgba(15,81,50,.10); border-color:transparent;
                     color:#0F5132; font-weight:700 }

.hp > .hp-time{ flex:1 1 auto }
/* The timeline ran 26px longer than the screen it sits in, so the last event
   was sliced through the middle. The rows keep their content and give up
   the slack instead. */
.hp .hp-time{ display:grid; gap:2px; min-height:0; overflow:hidden; align-content:start }
.hp .hp-day{
  display:flex; align-items:center; padding:1px 6px; border-radius:var(--r-xs);
  background:var(--canvas-parchment);
  font:700 6px/1.3 var(--font-text); letter-spacing:.06em; text-transform:uppercase;
  color:var(--dash-mute-60);
}
.hp .hp-day em{ margin-left:auto; font-style:normal; letter-spacing:0;
                text-transform:none; font-weight:400 }
/* one continuous line down the left, which is the whole argument of the screen */
.hp .hp-ev{
  position:relative; display:flex; align-items:flex-start; gap:6px;
  padding:3px 6px 3px 18px; border:1px solid var(--dash-line);
  border-radius:var(--r-sm); background:var(--canvas);
}
.hp .hp-ev > i{
  position:absolute; left:5px; top:7px; width:8px; height:8px; border-radius:50%;
  border:1.6px solid var(--canvas); box-shadow:0 0 0 1px currentColor;
}
.hp .hp-ev > i.p{ color:#14793C; background:#14793C }
.hp .hp-ev > i.e{ color:var(--c-accent); background:var(--c-accent) }
.hp .hp-ev > i.w{ color:#17325F; background:#17325F }
.hp .hp-ev > div{ flex:1; min-width:0 }
.hp .hp-ev b{ display:block; font:600 7px/1.3 var(--font-text); color:var(--dash-value);
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hp .hp-ev u{ display:block; margin-top:1px; text-decoration:none;
              font:400 6px/1.3 var(--font-text); color:var(--dash-mute-40);
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hp .hp-ev s{ flex:0 0 auto; text-decoration:none; font:400 6px/1.3 var(--font-text);
              color:var(--dash-mute-40) }

/* ---- the entrance ------------------------------------------------------ */
.js .mock .hp .hp-bars i::after{ transform:scaleX(0); transition:transform .7s var(--ease-out) .12s }
.js .mock .hp .hp-bars > div.mk-in i::after{ transform:scaleX(1) }
@media (prefers-reduced-motion:reduce){
  .js .mock .hp .hp-bars i::after{ transform:none; transition:none }
}


/* ============================================================================
   The screens arrive
   ----------------------------------------------------------------------------
   The generic .mk-item entrance is a 9px rise, which is right for a row in a
   list and too quiet for a panel of cards. These two screens are the hero of
   their sections, so their cards travel further, come in fractionally small,
   and land in reading order — top row first, then the pair below it, then the
   record. The quantities inside them (bars, columns, plot, rings) run on their
   own slightly later clock, so a card settles before its contents draw.
   ============================================================================ */
.js .mock :is(.ex,.hp) :is(.ex-kpi,.ex-card,.hp-card,.hp-nba){
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .55s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:calc(var(--r,0) * 60ms);
}
.js .mock :is(.ex,.hp) :is(.ex-kpi,.ex-card,.hp-card,.hp-nba).mk-in{
  opacity:1; transform:none;
}

/* the ring draws itself round to its value */
.js .mock .ex-ring{ transition:--p 1.15s var(--ease-out) .28s }
.js .mock .ex-ring.mk-in{ --p:var(--pv, 0) }

/* the record's rows come in one after another, under the panels above them */
.js .mock .hp .hp-ev, .js .mock .hp .hp-day{
  opacity:0; transform:translateX(-8px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
  transition-delay:calc(.24s + var(--r,0) * 55ms);
}
.js .mock .hp .hp-ev.mk-in, .js .mock .hp .hp-day.mk-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  .js .mock :is(.ex,.hp) :is(.ex-kpi,.ex-card,.hp-card,.hp-nba),
  .js .mock .hp .hp-ev, .js .mock .hp .hp-day{
    opacity:1; transform:none; transition:none;
  }
  .js .mock .ex-ring{ transition:none; --p:var(--pv, 0) }
}

/* ============================================================================
   Engagement intelligence — specialty and country, then who is on top
   ----------------------------------------------------------------------------
   The reference stacks Engagement by Specialty over Engagement by Country, each
   the full width of the page. At 606px that would have left one row of the
   table visible, so the two sit side by side as asked and the table gets the
   bottom half.

   The country panel drops the reference's map. At ~290px a map of the region
   is a grey smudge with pins on top of each other; the list beside it is the
   part carrying the numbers, so it takes the whole panel and each row gets a
   bar it did not have room for before.
   ============================================================================ */
.en{ gap:7px }
.en .en-two{ display:grid; grid-template-columns:1.06fr 1fr; gap:6px; flex:0 0 auto }

/* ---- specialty --------------------------------------------------------- */
.en .en-split{ display:flex; align-items:center; gap:8px }
.en .en-donut{
  flex:0 0 auto; width:70px; height:70px; border-radius:50%;
  background:conic-gradient(var(--slices));
  display:grid; place-items:center; position:relative;
}
.en .en-donut::after{
  content:""; grid-area:1/1; width:62%; height:62%; border-radius:50%;
  background:var(--canvas);
}
.en .en-donut u, .en .en-donut em{ grid-area:1/1; z-index:1; text-decoration:none; text-align:center }
.en .en-donut u{
  font:700 9.5px/1 var(--font-display); letter-spacing:-.3px;
  color:var(--dash-value); font-variant-numeric:tabular-nums;
  transform:translateY(-4px);
}
.en .en-donut em{
  font:400 5.5px/1 var(--font-text); font-style:normal;
  color:var(--dash-mute-40); transform:translateY(7px);
}
.en .en-key{ flex:1; min-width:0; list-style:none; margin:0; padding:0; display:grid; gap:2px }
.en .en-key li{ display:flex; align-items:center; gap:5px }
.en .en-key li i{ width:6px; height:6px; border-radius:2px; background:var(--c); flex:0 0 auto }
.en .en-key u{
  text-decoration:none; font:400 6.5px/1.35 var(--font-text); color:var(--dash-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.en .en-key b{
  margin-left:auto; font:700 6.5px/1.35 var(--font-text); color:var(--dash-value);
  font-variant-numeric:tabular-nums;
}

/* ---- country ----------------------------------------------------------- */
.en .en-ctry{ list-style:none; margin:0; padding:0; display:grid; gap:5px }
.en .en-ctry li{
  display:grid; grid-template-columns:11px 54px minmax(0,1fr) 20px 26px;
  gap:5px; align-items:center;
}
.en .en-ctry li i{ width:11px; height:8px; border-radius:1.5px; flex:0 0 auto; background:var(--f) }
/* the flags are two or three bands, which is enough to read at 11px */
.en .f-sa{ --f:#006C35 }
.en .f-ae{ --f:linear-gradient(90deg,#CE1126 26%,transparent 26%),
                linear-gradient(#00732F 33.3%,#fff 33.3% 66.6%,#111 66.6%) }
.en .f-kw{ --f:linear-gradient(90deg,#111 30%,transparent 30%),
                linear-gradient(#007A3D 33.3%,#fff 33.3% 66.6%,#CE1126 66.6%) }
.en .f-bh{ --f:linear-gradient(90deg,#fff 32%,#CE1126 32%) }
.en .f-qa{ --f:linear-gradient(90deg,#fff 30%,#8D1B3D 30%) }
.en .f-om{ --f:linear-gradient(90deg,#CE1126 32%,transparent 32%),
                linear-gradient(#fff 33.3%,#CE1126 33.3% 66.6%,#008000 66.6%) }
.en .en-ctry u{
  text-decoration:none; font:400 6.5px/1.3 var(--font-text); color:var(--dash-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.en .en-bar{ height:4px; border-radius:2px; background:var(--dash-h1); overflow:hidden; display:block }
.en .en-bar s{
  display:block; height:100%; width:var(--v); border-radius:2px;
  background:#166534; transform-origin:left center;
}
.en .en-ctry em{
  font:600 6px/1.3 var(--font-text); font-style:normal; text-align:right;
  color:#166534; font-variant-numeric:tabular-nums;
}
.en .en-ctry b{
  font:700 7px/1.3 var(--font-text); text-align:right;
  color:var(--dash-value); font-variant-numeric:tabular-nums;
}

/* ---- who is on top ----------------------------------------------------- */
/* :is(.en,.an), not .en — the analytics panel carries .an and reuses this
   table, so scoping to .en left it completely unstyled: 47px rows in a
   miniature whose body type is 6.5px, bursting its card by 244px. */
:is(.en,.an) .en-tablecard{ flex:1 1 auto; min-height:0; overflow:hidden }
:is(.en,.an) .en-tablecard h4 span{ color:var(--dash-mute-40); font-weight:400 }
:is(.en,.an) .en-table{ width:100%; border-collapse:collapse; table-layout:fixed }
:is(.en,.an) .en-table th{
  text-align:left; padding:0 4px 4px 0;
  font:700 5.5px/1.3 var(--font-text); letter-spacing:.07em; text-transform:uppercase;
  color:var(--dash-mute-40); border-bottom:1px solid var(--dash-line);
}
:is(.en,.an) .en-table td{
  padding:3px 4px 3px 0; border-bottom:1px solid var(--dash-line);
  font:400 6.5px/1.3 var(--font-text); color:var(--dash-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
:is(.en,.an) .en-table tr:last-child td{ border-bottom:0 }
:is(.en,.an) .en-table th:nth-child(1), .en .en-table td:nth-child(1){ width:20px;
  font-weight:700; color:var(--dash-value); font-variant-numeric:tabular-nums }
:is(.en,.an) .en-table th:nth-child(2), .en .en-table td:nth-child(2){ width:38% }
:is(.en,.an) .en-table th:nth-child(5), .en .en-table td:nth-child(5){ width:23% }
/* the workplace is the one cell allowed to wrap to a second line, as it
   does in the reference — the names must not be cut */
:is(.en,.an) .en-table td:nth-child(5){ white-space:normal; line-height:1.2 }
:is(.en,.an) .en-table th:nth-child(6), .en .en-table td:nth-child(6){ width:26px; text-align:right;
  font-weight:700; color:var(--dash-value); font-variant-numeric:tabular-nums }
/* the name cell: initials, then the name over its specialty */
:is(.en,.an) .en-table td:nth-child(2){ display:flex; align-items:center; gap:5px }
:is(.en,.an) .en-table td i{
  flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  display:grid; place-items:center; font-style:normal;
  font:700 5px/1 var(--font-text); color:var(--c-accent-text);
  background:color-mix(in srgb, var(--c-accent) 12%, transparent);
}
:is(.en,.an) .en-table td div{ min-width:0 }
:is(.en,.an) .en-table td b{ display:block; font:600 6.5px/1.25 var(--font-text); color:var(--dash-value);
                    overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
:is(.en,.an) .en-table td u{ display:block; text-decoration:none; font:400 5.5px/1.25 var(--font-text);
                    color:var(--dash-mute-40) }
:is(.en,.an) .en-table td span{
  padding:1.5px 5px; border-radius:var(--r-pill); font:600 5.5px/1.3 var(--font-text);
}
.en .c-web{ background:rgba(124,77,224,.14); color:#5B34B8 }
.en .c-eml{ background:color-mix(in srgb,var(--c-accent) 12%,transparent); color:var(--c-accent-text) }
.en .c-wa { background:rgba(37,211,102,.18); color:#14793C }
.en .c-prd{ background:rgba(201,162,39,.20); color:#8A6D0B }

/* ---- the entrance ------------------------------------------------------ */
.js .mock .en .en-bar s{ transform:scaleX(0); transition:transform .7s var(--ease-out) .12s }
.js .mock .en .en-ctry li.mk-in .en-bar s{ transform:scaleX(1) }
.js .mock .en .en-donut{
  transform:rotate(-16deg) scale(.92); opacity:0;
  transition:transform .7s var(--ease-out), opacity .6s var(--ease-out);
}
.js .mock .en .en-donut.mk-in{ transform:none; opacity:1 }
@media (prefers-reduced-motion:reduce){
  .js .mock .en .en-bar s, .js .mock .en .en-donut{
    transform:none; opacity:1; transition:none;
  }
}

/* the table's own chrome: the two actions in its header, and the count under it */
.en .en-acts{ display:flex; align-items:center; gap:4px; margin-left:auto }
.en .en-acts em, .en .en-acts b{
  font-style:normal; padding:2px 6px; border-radius:var(--r-xs);
  font:600 6px/1.3 var(--font-text); white-space:nowrap;
}
.en .en-acts em{ border:1px solid var(--dash-line); color:#166534; background:var(--canvas) }
.en .en-acts b{ background:#14532D; color:#fff }
.en .en-foot{
  display:flex; align-items:center; margin-top:5px; padding-top:5px;
  border-top:1px solid var(--dash-line);
}
.en .en-foot span{ font:400 6px/1.3 var(--font-text); color:var(--dash-mute-40) }
.en .en-foot em{ margin-left:auto; font-style:normal;
                 font:700 6px/1.3 var(--font-text); color:#166534 }

/* the analytics pair: four channels needs a four-up, the segment view a three-up */
.ex .an-kpis{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.ex .an-kpis3{ grid-template-columns:1fr 1fr 1.05fr }
.ex .ex-kpi em.dn{ color:#B4532A; background:rgba(180,83,42,.12) }
.ex .an-cols4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px }
.ex .an-axis4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px }
.ex .an-key4{ margin-top:3px }
.ex .an-key4 span{ text-align:center }
/* the closing line: the claim the whole screen exists to make */
.ex .an-note{ flex-direction:row; align-items:center; gap:8px; flex:0 0 auto }
.ex .an-note > div{ min-width:0 }
.ex .an-note b{ display:block; font:700 8px/1.25 var(--font-text); color:var(--dash-value) }
.ex .an-note u{ display:block; margin-top:2px; text-decoration:none;
                font:400 6.5px/1.35 var(--font-text); color:var(--dash-mute-60) }
.ex .an-cta{
  flex:0 0 auto; padding:4px 8px; border-radius:var(--r-pill);
  background:var(--c-accent); color:#fff; font:600 6.5px/1.3 var(--font-text);
}

/* No stretching here. An earlier pass gave these panels flex:1 on their chart
   rows so they would fill the frame — which spread four bars over 260px and
   left air between the rows. Filling a panel is a content problem, not a
   layout one: the rows below are real, so the height is earned. */
/* pair names are twice the length of a channel name, so this card's label
   column is sized for them rather than for the 44px the others use */
.an .an-combo .ex-bars div{ grid-template-columns:62px minmax(0,1fr) 26px }
/* the two analytics tables are narrower than the seven-column one on the
   overview screen, so they set their own column widths */
.an .an-table th:nth-child(1), .an .an-table td:nth-child(1){ width:auto }
.an .an-table th:nth-child(2), .an .an-table td:nth-child(2){ width:74px; display:table-cell }
.an .an-table th:nth-child(3), .an .an-table td:nth-child(3),
.an .an-table th:nth-child(4), .an .an-table td:nth-child(4){ width:52px; text-align:right }
.an .an-table td:nth-child(3), .an .an-table td:nth-child(4){
  font-weight:600; color:var(--dash-value); font-variant-numeric:tabular-nums }
.an .an-table td em{
  font-style:normal; padding:1px 5px; border-radius:var(--r-pill);
  font:700 5.5px/1.3 var(--font-text);
  background:color-mix(in srgb,var(--c-accent) 12%,transparent); color:var(--c-accent-text);
}
/* The list is longer than the panel — 46 campaigns, 824 doctors — so it takes
   whatever height is left and the rest of it is below the edge, with the count
   saying so. That is a list behaving like a list, not four rows pushed apart
   to fill a box. */
.an > .an-list{ flex:1 1 auto; min-height:0; overflow:hidden }
.an .an-list .en-table{ display:block; overflow:hidden }
.an .an-list .en-table thead, .an .an-list .en-table tbody{ display:table; width:100%; table-layout:fixed }
.an .an-list .en-foot{ margin-top:4px; padding-top:4px }

/* ============================================================================
   One design system across the four dashboard screens
   ----------------------------------------------------------------------------
   They were built over several passes and drifted: the country bars and the
   action buttons on the engagement screen were green while the same components
   on the overview screen were navy, the two "primary" greens were different
   hexes (#14532D and #0F5132), and the score ring was green where every other
   ring was navy. Four screens in one product cannot each have their own accent.

   The rule, applied below without exception:
     NAVY  is quantity — every bar, every ring, every action.
     GREEN is a positive change or a good state — deltas, and state pills.
     RED   is a negative change.
   Anything else that is coloured is CATEGORICAL and keeps its own hue, because
   the colour is carrying the category: the channel pills, the speciality
   donut, the engaged/at-risk stack. Those are data, not decoration.
   ============================================================================ */
.dash{
  --d-pos:#0F5132;  --d-pos-wash:rgba(15,81,50,.10);
  --d-neg:#B4532A;  --d-neg-wash:rgba(180,83,42,.12);
}

/* quantity — navy, everywhere */
.en .en-bar s{ background:var(--c-accent) }
.hp .hp-score .ex-ring{
  background:conic-gradient(var(--c-accent) calc(var(--p) * 1%), var(--dash-line) 0);
}
.hp .hp-score .ex-ring u{ color:var(--dash-value) }

/* actions — navy, everywhere. Two different greens were being used for the
   same job on two screens. */
.hp .hp-go, .en .en-acts b, .ex .an-cta{ background:var(--c-accent); color:#fff }
.en .en-acts em, .en .en-foot em, .an .en-foot em{ color:var(--c-accent-text) }

/* positive / negative — the one green and the one red */
.ex .ex-kpi em, .hp .hp-pills span{ color:var(--d-pos); background:var(--d-pos-wash) }
.ex .ex-kpi em.dn{ color:var(--d-neg); background:var(--d-neg-wash) }
.en .en-ctry em{ color:var(--d-pos) }

/* a figure beside a panel title is a figure; a count of rows is not, so the
   count is muted rather than sharing the accent with real numbers */
.an .an-list h4 span, .en .en-tablecard h4 span{
  color:var(--dash-mute-40); font-weight:400;
}

/* ============================================================================
   WhatsApp — the thread as the console actually shows it
   ----------------------------------------------------------------------------
   The panel used to be two abstract boxes: an "Inbound" card holding one line
   and a history list beside it. The feature is about a reply arriving with the
   record attached, and that only reads if you can see the conversation it
   arrived in — the template that went out, the taps it produced, and the
   free-text question at the end of them.

   Structure follows the real product: conversations on the left, the thread in
   the middle with its composer and service-window notice, and the handover
   underneath. Data is ours, not the reference's.
   ============================================================================ */
.wd-chatview{
  display:grid; grid-template-columns:124px minmax(0,1fr); gap:7px;
  flex:1 1 auto; min-height:0;
}

/* ---- the conversation list -------------------------------------------- */
.wd-threads{
  display:grid; align-content:start; gap:4px; min-width:0;
  padding:6px; border:1px solid var(--wd-line); border-radius:8px;
  background:var(--canvas);
}
.wd-search{
  padding:4px 6px; border-radius:99px; border:1px solid var(--wd-line);
  background:#F6F8FC; font:400 6px/1.3 var(--font-text); color:var(--wd-mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wd-newconv{
  padding:4px 6px; border-radius:6px; text-align:center;
  background:var(--c-accent); color:#fff; font:600 6px/1.3 var(--font-text);
}
.wd-thread{
  display:flex; align-items:center; gap:5px; padding:4px; border-radius:6px; min-width:0;
}
.wd-thread.on{ background:color-mix(in srgb, var(--c-accent) 8%, transparent) }
.wd-thread i{
  flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  display:grid; place-items:center; font-style:normal;
  font:700 5.5px/1 var(--font-text); color:#fff;
  background:linear-gradient(150deg,#5B8DEF,#22407F);
}
.wd-thread > div{ min-width:0; flex:1 }
.wd-thread b{ display:block; font:600 6px/1.25 var(--font-text); color:var(--wd-ink);
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.wd-thread u{ display:block; text-decoration:none; font:400 5.5px/1.25 var(--font-text);
              color:var(--wd-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.wd-thread s{ flex:0 0 auto; text-decoration:none; font:400 5px/1.2 var(--font-text);
              color:var(--wd-mute) }

/* ---- the thread -------------------------------------------------------- */
.wd-conv{
  display:flex; flex-direction:column; min-width:0; min-height:0;
  border:1px solid var(--wd-line); border-radius:8px; background:var(--canvas); overflow:hidden;
}
.wd-conv__head{
  display:flex; align-items:center; gap:6px; padding:5px 7px; flex:0 0 auto;
  border-bottom:1px solid var(--wd-line);
}
.wd-conv__head i{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; font-style:normal;
  font:700 6px/1 var(--font-text); color:#fff;
  background:linear-gradient(150deg,#5B8DEF,#22407F);
}
.wd-conv__head > div{ min-width:0; flex:1 }
.wd-conv__head b{ display:block; font:600 7.5px/1.25 var(--font-text); color:var(--wd-ink) }
.wd-conv__head u{ display:block; text-decoration:none; font:400 6px/1.25 var(--font-text);
                  color:var(--wd-mute) }

/* the thread itself scrolls behind the composer, so the oldest message runs
   off the top the way it does in the product */
.wd-conv .wd-chat{
  flex:1 1 auto; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px;
  padding:7px; background:#F7F9FC;
}

/* ---- the template that went out ---------------------------------------- */
.wd-tpl{ display:grid; gap:3px; max-width:80% }
.wd-tpl em{
  justify-self:start; font-style:normal; padding:1px 4px; border-radius:3px;
  font:700 5px/1.3 var(--font-text); letter-spacing:.06em; text-transform:uppercase;
  background:rgba(11,61,36,.10); color:#0B3D24;
}
/* the pack shot the template actually carries, cropped out of the product
   render the site already ships */
.wd-tpl__thumb{
  height:46px; border-radius:4px;
  background:#fff url("assets/whatsapp/template-product.webp") center/cover no-repeat;
}
.wd-tpl b{ font:700 6.5px/1.3 var(--font-text) }
.wd-tpl p{ margin:0; font:400 6px/1.35 var(--font-text) }
/* the two link buttons the reader taps — they are what produces the replies
   below, which is the point of the screen */
.wd-tpl__btn{
  margin-top:2px; padding:3px; border-radius:4px; text-align:center;
  background:var(--canvas); color:var(--c-accent-text);
  font:600 6px/1.3 var(--font-text);
}
.wd-tpl s{ justify-self:end; text-decoration:none; font-size:5.5px; color:var(--wd-mute) }

/* ---- composer and the window notice ------------------------------------ */
.wd-composer{
  display:flex; align-items:center; gap:5px; padding:5px 7px; flex:0 0 auto;
  border-top:1px solid var(--wd-line);
}
.wd-composer span{
  flex:1; padding:4px 7px; border-radius:99px; border:1px solid var(--wd-line);
  background:#F6F8FC; font:400 6px/1.3 var(--font-text); color:var(--wd-mute);
}
.wd-composer em{
  flex:0 0 auto; width:15px; height:15px; border-radius:50%;
  background:var(--c-accent); position:relative;
}
.wd-composer em::after{
  content:''; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:5px solid #fff; border-top:3px solid transparent; border-bottom:3px solid transparent;
  transform:translateX(1px);
}
.wd-window{
  flex:0 0 auto; padding:4px 7px; border-top:1px solid var(--wd-line);
  background:color-mix(in srgb, var(--c-accent) 5%, transparent);
  font:400 5.5px/1.3 var(--font-text); color:var(--c-accent-text);
}

/* ---- the handover under it --------------------------------------------- */
.wd-handover{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:7px; align-items:center;
  flex:0 0 auto; padding:5px 7px; border:1px solid var(--wd-line); border-radius:8px;
  background:var(--canvas);
}
.wd-handover .wd-who{ padding:0 }
.wd-handover .wd-hist{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px;
}
.wd-handover .wd-hist div{
  font:400 5.5px/1.3 var(--font-text); color:var(--wd-mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wd-handover .wd-hist b{ display:block; color:var(--wd-ink); font-weight:700 }

/* The chat wall. WhatsApp's own background is a field of faint line-art at very
   low contrast — no shape readable on its own, the whole thing reading as
   texture. Drawn as one 128px SVG tile rather than an image file so it costs a
   request of nothing and recolours with the accent. */
.wd-conv .wd-chat{
  background-color:#EDE7DF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%23204289' stroke-opacity='0.10' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='16' r='6'/%3E%3Cpath d='M40 10h14v10H46l-4 4v-4h-2z'/%3E%3Cpath d='M74 14l5-4 5 4v9h-10z'/%3E%3Cpath d='M100 10a6 6 0 1 1 0 12 6 6 0 0 1 0-12M100 22v6'/%3E%3Cpath d='M20 44h12v9H20zM22 44l4 3 4-3'/%3E%3Cpath d='M52 40l4 8-4 8-4-8z'/%3E%3Cpath d='M80 42h10v10H80zM83 46h4M83 49h4'/%3E%3Cpath d='M110 40v12M104 46h12'/%3E%3Cpath d='M12 74a8 8 0 0 1 16 0 8 8 0 0 1-8 8v4'/%3E%3Cpath d='M46 72h12v8H50l-4 4z'/%3E%3Cpath d='M78 70l6 6-6 6-6-6z'/%3E%3Cpath d='M104 72h10v10h-10zM106 76h6'/%3E%3Cpath d='M30 104h10v8H30zM33 100h4v4h-4z'/%3E%3Cpath d='M60 100a7 7 0 1 1 0 14 7 7 0 0 1 0-14M60 104v4l3 2'/%3E%3Cpath d='M88 102h12M88 106h8M88 110h10'/%3E%3Cpath d='M116 100l4 6-4 6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:128px 128px;
}
/* the bubbles need to stay legible on it */
.wd-conv .wd-msg{ background:#FFFFFF; box-shadow:0 1px 1px rgba(10,16,32,.06) }
.wd-conv .wd-msg--out{ background:#DCF8C6; color:#0B3D24 }
.wd-conv .wd-tpl__btn{ background:#FFFFFF; box-shadow:0 1px 1px rgba(10,16,32,.05) }
/* the closing strip: the four figures the whole screen resolves to */
.ex .ex-strip{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px;
  padding:6px 7px; border:1px solid var(--dash-line); border-radius:var(--r-sm);
  background:var(--canvas-parchment); flex:0 0 auto;
}
.ex .ex-strip span{ display:grid; gap:0; min-width:0;
                    font:400 6px/1.3 var(--font-text); color:var(--dash-mute-40) }
.ex .ex-strip b{ font:700 9px/1.2 var(--font-display); color:var(--dash-value);
                 letter-spacing:-.2px; font-variant-numeric:tabular-nums }

/* ---- devices below the desktop layout ---------------------------------
   These dashboards are drawn at a fixed size — their type is 5 to 8.5px at
   EVERY viewport, because they are a miniature of a product, not a document to
   read. That is fine while the frame is 770px wide and everything fits, but
   squeezing the frame to a phone's 330px left the fixed internals overflowing
   it: 742px of content inside a 331px body, and a third of the height chopped
   off by the frame's own overflow:hidden.

   So the device is laid out at its design width and the whole thing is scaled,
   rather than resized. The composition survives intact and simply gets smaller,
   which is what a miniature is for. cqw makes the factor fluid — one rule
   covers every width instead of a ladder of breakpoints that each leave a gap
   or overflow — and the aspect-ratio on the host reserves the scaled height,
   since a transform alone would still reserve the unscaled one. */
/* Two bands, because the two layouts stop fitting at different points.

   .feat rows stay two columns until 900 but their device is already narrower
   than its design width from about 1180, so it scales from there.

   .pinset__stage keeps the desktop pinned layout above 900 and is sized by its
   own sticky column; giving it a fixed 720px child in that band grew the stage
   to 1187px on a 1024 screen. It scales only once the chapters stack. */
@media (max-width:1180px){
  .feat .tablet-host{
    container-type:inline-size;
    aspect-ratio:720 / 500;
    overflow:hidden;
  }
  .feat .tablet-host .tablet{
    width:720px; max-width:none; margin:0;
    transform-origin:top left;
    transform:scale(calc(100cqw / 720px));
  }
}

@media (max-width:900px){
  .pinset__stage{
    container-type:inline-size;
    aspect-ratio:720 / 500;
    overflow:hidden;
  }
  /* Placed at the end of the file on purpose: the base sizing rule carries the
     same specificity, so while this sat above it `width:var(--device-w)` won and
     the device was squeezed to the column AND THEN scaled — 0.46 twice over. */
  .pinset__stage .tablet{
    width:720px; max-width:none; margin:0;
    transform-origin:top left;
    transform:scale(calc(100cqw / 720px));
  }
}