@layer tokens {
  [data-tone="lilac"] {
    --panel-dark: #3a2496; --panel-base: #45309f; --panel-mid: #5440bf; --panel-end: #6556cc; --panel-glow: #6a5ad0;
    --panel-haze: rgba(150, 132, 205, .7);
    --panel-edge: #8f86dc; --panel-low: #7472d4; --panel-plane-end: #8280da; --panel-pale: #c3c2ee; --panel-pale-2: #cbc6f3;
  }
  [data-tone="violet"] {
    --panel-dark: #2c1166; --panel-base: #36167a; --panel-mid: #4a2aa8; --panel-end: #4b4ab9; --panel-glow: #6646c6;
    --panel-haze: rgba(78, 65, 173, .9);
    --panel-edge: #8a74d8; --panel-low: #a08ae8; --panel-plane-end: #b79bee; --panel-pale: #c1a8ee; --panel-pale-2: #9a8cdb;
  }
  [data-tone="plum"] {
    --panel-dark: #43104f; --panel-base: #4a1560; --panel-mid: #4d2088; --panel-end: #46339a; --panel-glow: #5b2494;
    --panel-haze: rgba(70, 52, 112, .9);
    --panel-edge: #7567c1; --panel-low: #6a64bd; --panel-plane-end: #7672c4; --panel-pale: #8483c5; --panel-pale-2: #9a98d3;
  }
  [data-tone="plum-pink"] {
    --panel-dark: #5a0f46; --panel-base: #62124c; --panel-mid: #66308f; --panel-end: #7b4fae; --panel-glow: #69409f;
    --panel-haze: rgba(146, 94, 184, .9);
    --panel-edge: #cf4aa0; --panel-low: #d84195; --panel-plane-end: #e24e87; --panel-pale: #dd4f98; --panel-pale-2: #eaa5d9;
  }
  [data-tone="rose"] {
    --panel-dark: #3a0a2f; --panel-base: #55103f; --panel-mid: #6d1555; --panel-end: #93286f; --panel-glow: #7a3aa8;
    --panel-haze: rgba(112, 72, 172, .9);
    --panel-edge: #c93a88; --panel-low: #da4391; --panel-plane-end: #e4579f; --panel-pale: #e86aa8; --panel-pale-2: #f2b0cf;
  }
  [data-tone="indigo-lavender"] {
    --panel-dark: #2f3590; --panel-base: #3b41a4; --panel-mid: #4a45b2; --panel-end: #5d55c0; --panel-glow: #5a4cc6;
    --panel-haze: rgba(199, 181, 230, .92);
    --panel-edge: #9384d6; --panel-low: #ad98e4; --panel-plane-end: #c3a8ee; --panel-pale: #cdb9ea; --panel-pale-2: #be9ef4;
  }
  [data-tone="indigo-sky"] {
    --panel-dark: #2b2db3; --panel-base: #3639c8; --panel-mid: #4447db; --panel-end: #5558ee; --panel-glow: #6366fa;
    --panel-haze: rgba(132, 250, 228, .42);
    --panel-edge: #8186f9; --panel-low: #9ea4fb; --panel-plane-end: #b6c4f8; --panel-pale: #d6dbf6; --panel-pale-2: #9fe3ee;
  }
  [data-tone="indigo-mint"] {
    --panel-dark: #140c4c; --panel-base: #1d1573; --panel-mid: #2a2caa; --panel-end: #3c52d8; --panel-glow: #4b46e2;
    --panel-haze: rgba(132, 250, 228, .4);
    --panel-edge: #6679ea; --panel-low: #5e9ae6; --panel-plane-end: #6fcfd8; --panel-pale: #84e6d6; --panel-pale-2: #acacfd;
  }
  [data-tone="indigo-pink"] {
    --panel-dark: #150f55; --panel-base: #1f1d86; --panel-mid: #3336d0; --panel-end: #5b5ff5; --panel-glow: #5a5df7;
    --panel-haze: rgba(255, 176, 195, .55);
    --panel-edge: #7f86f4; --panel-low: #8fb0f0; --panel-plane-end: #84e6d6; --panel-pale: #b9bdfb; --panel-pale-2: #ffc2d2;
  }
  [data-tone="navy"] {
    --panel-dark: #0f1542; --panel-base: #172059; --panel-mid: #22308f; --panel-end: #3045bd; --panel-glow: #3b4fd4;
    --panel-haze: rgba(191, 198, 246, .6);
    --panel-edge: #7d8be3; --panel-low: #8d99e8; --panel-plane-end: #aab2ee; --panel-pale: #d2d6f7; --panel-pale-2: #bfc4f4;
  }
  [data-tone="cobalt"] {
    --panel-dark: #14247f; --panel-base: #1c33a8; --panel-mid: #2849cf; --panel-end: #3a6cea; --panel-glow: #5a54ea;
    --panel-haze: rgba(132, 250, 229, .5);
    --panel-edge: #6ea2f6; --panel-low: #86c4f2; --panel-plane-end: #a2ece8; --panel-pale: #b9ecf6; --panel-pale-2: #84fae5;
  }
  [data-tone="sky"] {
    --panel-dark: #110d4a; --panel-base: #1a1a76; --panel-mid: #2937a8; --panel-end: #3a6dd0; --panel-glow: #3c46d4;
    --panel-haze: rgba(172, 172, 253, .6);
    --panel-edge: #5b90e6; --panel-low: #5fb0ec; --panel-plane-end: #6ccbee; --panel-pale: #7fdff0; --panel-pale-2: #acacfd;
  }
  [data-tone="ocean"] {
    --panel-dark: #2f3a96; --panel-base: #3a4cb0; --panel-mid: #3f6ec0; --panel-end: #4d8fc8; --panel-glow: #5258c0;
    --panel-haze: rgba(124, 177, 208, .9);
    --panel-edge: #5491c7; --panel-low: #67a6ce; --panel-plane-end: #7cb1d0; --panel-pale: #9cc6de; --panel-pale-2: #88b7d1;
  }
  [data-tone="teal"] {
    --panel-dark: #1d1243; --panel-base: #2a1a5e; --panel-mid: #3b2c78; --panel-end: #4f6f9a; --panel-glow: #4a35a6;
    --panel-haze: rgba(150, 136, 226, .85);
    --panel-edge: #59b3ad; --panel-low: #5fbcb2; --panel-plane-end: #79c8bd; --panel-pale: #8fd0c6; --panel-pale-2: #a99be6;
  }
  [data-tone="mint"] {
    --panel-dark: #15143a; --panel-base: #1e2052; --panel-mid: #262c68; --panel-end: #2b4775; --panel-glow: #3b37a2;
    --panel-haze: rgba(196, 181, 240, .5);
    --panel-edge: #1fae84; --panel-low: #2cc596; --panel-plane-end: #4fdcb0; --panel-pale: #84fae4; --panel-pale-2: #b9a8f2;
  }
  [data-tone="graphite"] {
    --panel-dark: #14161c; --panel-base: #1e2023; --panel-mid: #2a2d4d; --panel-end: #3a3fa6; --panel-glow: #4447db;
    --panel-haze: rgba(172, 177, 253, .5);
    --panel-edge: #6366fa; --panel-low: #7c7efd; --panel-plane-end: #acb1fd; --panel-pale: #c6c9fe; --panel-pale-2: #8587fe;
  }
  [data-tone="tile-violet"] {
    --tile-glow-a: radial-gradient(70% 46% at 100% 0%, #2f2149 0%, transparent 72%);
    --tile-glow-b: radial-gradient(60% 40% at 0% 0%, #381778 0%, transparent 72%);
    --tile-glow-c: radial-gradient(70% 44% at 100% 100%, #5f5ac0 0%, transparent 78%);
    --tile-base: linear-gradient(180deg, #3a2090 0%, #3f2fa0 40%, #4743b4 100%);
    --tile-bg: #3f2fa0;
  }
  [data-tone="tile-magenta"] {
    --tile-glow-a: radial-gradient(70% 46% at 0% 0%, #91429a 0%, transparent 74%);
    --tile-glow-b: radial-gradient(60% 40% at 100% 14%, #7b50b0 0%, transparent 72%);
    --tile-glow-c: radial-gradient(70% 44% at 0% 100%, #5d5cbb 0%, transparent 78%);
    --tile-base: linear-gradient(180deg, #6a38ae 0%, #5436b4 34%, #4a44b8 100%);
    --tile-bg: #5436b4;
  }
  [data-tone="tile-sky"] {
    --tile-glow-a: radial-gradient(64% 44% at 100% 0%, #6fb4e6 0%, transparent 72%);
    --tile-glow-b: radial-gradient(60% 40% at 0% 0%, #6d86db 0%, transparent 72%);
    --tile-glow-c: radial-gradient(70% 44% at 0% 100%, #2f2a7c 0%, transparent 78%);
    --tile-base: linear-gradient(180deg, #5148c4 0%, #4640b8 38%, #38339e 100%);
    --tile-bg: #4640b8;
  }
  .pu {
    --pu-p: var(--bb-purple);
    --pu-pt: var(--bb-purple-text);
    --pu-hd: var(--bb-ink);
    --pu-tt: #1e293b;
    --pu-tx: var(--bb-text);
    --pu-mu: var(--bb-muted);
    --pu-bd: #f0f1f3;
    --pu-ln: #e5e7eb;
    --pu-ln2: #e5e5e5;
    --pu-tint: #f9f8ff;
    --pu-lav: var(--bb-lavender);
    --pu-lav-line: var(--purple-200);
    --pu-good: #0f7a4b;  --pu-good-bg: #d9ffed;
    --pu-bad: #b4232a;   --pu-bad-bg: #ffeff5;
    --pu-red: #c10007;   --pu-red-bg: #fef2f2; --pu-red-line: #ffc9c9;
    --pu-warn: var(--bb-warning); --pu-warn-bg: #fff8ee; --pu-warn-text: var(--bb-warning-text);
    --pu-ok: #118653;    --pu-ok-bg: var(--pu-good-bg);
    --pu-urgent: var(--bb-error); --pu-urgent-bg: #fff1ee;
    --pu-paused: #c2410c; --pu-paused-bg: #fef6e6;
    --pu-active: #15803d; --pu-active-bg: #e6f9f0;
    --pu-paused-strong: #9a3412; --pu-active-strong: #166534;
    --pu-blue: #258aff;
    --pu-rail-ic: #374151;
    --pu-th-bg: #fdfdfd;
    --pu-ic-bg: #f9fafb;
    --pu-track: rgba(0, 0, 0, .08);
    --pu-rank-bg: #efecfd;
    --pu-you-bg: #ecebff;
    --pu-bar-bg: #f5f5f5;
    --pu-slate: #45556c;
    --pu-slate-ink: #0f172b;
    --pu-i-violet: #9333ea; --pu-i-violet-bg: #faf5ff;
    --pu-i-blue: #2563eb;   --pu-i-blue-bg: #eff6ff;
    --pu-ad-orange: #c2410c; --pu-ad-orange-bar: #fb923c;
    --pu-ad-blue: #1d5fd1; --pu-ad-blue-bg: #eef4ff; --pu-ad-blue-line: #dbe6ff;
    --pu-chart-green: #18b070;
    --pu-line-hover: #cfd5ff;
    --pu-streak: rgba(181, 252, 238, .25);
    --pu-grad-strip: var(--brand-strip);
    --pu-grad-ai: linear-gradient(270deg, var(--bb-green), var(--bb-purple), var(--bb-green));
    --pu-grad-ask: linear-gradient(90deg, #474ec5 0%, #32379d 55%, #1f2176 100%);
    --pu-bg: var(--fill-wash);
    --pu-shadow: 0 2px 14px rgba(136, 152, 170, .15);
    --pu-shadow-hover: 0 4px 20px rgba(136, 152, 170, .22);
    --pu-shadow-input: 0 2px 32px rgba(136, 152, 170, .15);
  }
}
@layer pui {
  .pu-host { container: pu / inline-size; min-width: 0; }
  .pu {
    --pu-cols: 64;
    --pu-min: 7px;
    --pu-max: 14px;
    position: relative; display: block;
    font: 400 clamp(var(--pu-min), calc(100cqw / var(--pu-cols)), var(--pu-max))/1.4 var(--font);
    color: var(--pu-tx); text-align: left; letter-spacing: 0; font-variant-numeric: tabular-nums;
    -webkit-user-select: none; user-select: none;
  }
  :where(.pu) p, :where(.pu) ul, :where(.pu) ol { margin: 0; padding: 0; list-style: none; }
  :where(.pu) svg { width: 1.43em; height: 1.43em; flex: none; }
  :where(.pu) b { font-weight: 600; }
  .pu-app { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--pu-bg); }
  .pu-strip { height: .43em; flex: none; background: var(--pu-grad-strip); }
  .pu-shell { flex: 1; min-height: 0; display: flex; }
  .pu-rail {
    width: 4.57em; flex: none; display: flex; flex-direction: column; align-items: center; gap: .3em; padding: 1.1em 0 1em;
    background: var(--bb-white); border-right: 1px solid var(--pu-ln);
  }
  .pu-rail img { width: 1.86em; height: 1.86em; margin-bottom: 1em; }
  .pu-rail span { width: 3.43em; height: 3.14em; display: grid; place-items: center; border-radius: .57em; color: var(--pu-rail-ic); }
  .pu-rail span.is-on { background: var(--pu-lav); color: var(--pu-p); }
  .pu-rail .pu-rail__end { margin-top: auto; }
  .pu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .pu-head { display: flex; align-items: flex-start; gap: 1em; padding: 1.15em 1.43em .85em; }
  .pu-title { display: flex; align-items: center; gap: .3em; font-size: 1.86em; line-height: 1.2; font-weight: 600; color: var(--pu-tt); white-space: nowrap; }
  .pu-title svg { width: .86em; height: .86em; }
  .pu-sub { margin-top: .35em; color: var(--pu-mu); }
  .pu-head__end { margin-left: auto; display: flex; align-items: center; gap: .6em; }
  .pu-range {
    display: inline-flex; align-items: center; gap: .45em; height: 2.43em; padding: 0 .86em;
    border: 1px solid var(--pu-ln2); border-radius: .57em; background: var(--bb-white); font-weight: 500; color: var(--pu-tx); white-space: nowrap;
  }
  .pu-range svg { width: 1.1em; height: 1.1em; color: var(--pu-mu); }
  .pu-ask {
    display: inline-flex; align-items: center; gap: .45em; height: 2.67em; padding: 0 1.05em; border-radius: .57em;
    color: var(--bb-white); font-size: .857em; font-weight: 600; white-space: nowrap;
  }
  .pu-ask svg { width: 1.2em; height: 1.2em; color: var(--bb-green); }
  .pu-menu { display: none; }
  .pu-tabs { display: flex; gap: 1.71em; padding: 0 1.43em; border-bottom: 1px solid var(--pu-ln2); white-space: nowrap; overflow: hidden; flex: none; }
  .pu-tabs span { padding-bottom: .8em; border-bottom: 3px solid transparent; font-weight: 500; color: var(--pu-mu); }
  .pu-tabs span.is-on { font-weight: 600; color: var(--pu-pt); border-bottom-color: var(--pu-p); }
  .pu-pad { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.15em; padding: 1.15em 1.43em 1.43em; }
  .pu-card { background: var(--bb-white); border: 1px solid var(--pu-bd); border-radius: .86em; overflow: hidden; }
  .pu-card__h { display: flex; align-items: center; gap: .5em; padding: .85em 1.15em; border-bottom: 1px solid var(--pu-ln); font-weight: 600; color: var(--pu-tx); }
  .pu-card__h svg { width: 1.2em; height: 1.2em; color: var(--pu-p); }
  .pu-card__h .pu-card__end { margin-left: auto; }
  .pu-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .pu-table th {
    padding: .7em 1.15em; border-bottom: 1px solid var(--pu-ln); background: var(--pu-th-bg);
    text-align: left; font-weight: 500; color: var(--pu-mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pu-table td { padding: .72em 1.15em; border-bottom: 1px solid var(--pu-ln); color: var(--pu-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pu-table tr:last-child td { border-bottom: 0; }
  .pu-pill { display: inline-flex; align-items: center; gap: .2em; padding: .12em .55em; border-radius: 999px; font-size: .857em; font-weight: 600; white-space: nowrap; vertical-align: middle; }
  .pu-pill svg { width: 1em; height: 1em; }
  .pu-pill--good { background: var(--pu-good-bg); color: var(--pu-good); }
  .pu-pill--bad { background: var(--pu-bad-bg); color: var(--pu-bad); }
  .pu-pill--lav { background: var(--pu-lav); color: var(--pu-pt); }
  .pu .pu-dn { transform: rotate(180deg); }
  .pu-obtn, .pu-pbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em; height: 2.43em; padding: 0 1em;
    border-radius: .57em; border: 1px solid var(--pu-ln2); background: var(--bb-white); color: var(--pu-tx); font-weight: 600; white-space: nowrap;
  }
  .pu-pbtn { background: var(--pu-pt); border-color: var(--pu-pt); color: var(--bb-white); }
  .pu-obtn svg, .pu-pbtn svg { width: 1.1em; height: 1.1em; }
  .pu-tile { display: grid; place-items: center; width: 2.86em; height: 2.86em; flex: none; border-radius: .57em; background: var(--pu-lav); color: var(--pu-p); }
  .pu-tile svg { width: 1.43em; height: 1.43em; }
  .pu-fill-5 { width: 5%; }    .pu-fill-10 { width: 10%; }  .pu-fill-15 { width: 15%; }  .pu-fill-20 { width: 20%; }
  .pu-fill-25 { width: 25%; }  .pu-fill-30 { width: 30%; }  .pu-fill-35 { width: 35%; }  .pu-fill-40 { width: 40%; }
  .pu-fill-45 { width: 45%; }  .pu-fill-50 { width: 50%; }  .pu-fill-55 { width: 55%; }  .pu-fill-60 { width: 60%; }
  .pu-fill-65 { width: 65%; }  .pu-fill-70 { width: 70%; }  .pu-fill-75 { width: 75%; }  .pu-fill-80 { width: 80%; }
  .pu-fill-85 { width: 85%; }  .pu-fill-90 { width: 90%; }  .pu-fill-95 { width: 95%; }  .pu-fill-100 { width: 100%; }
  .pu-card, .pu-kpi, .pu-stat, .pu-find {
    box-shadow: var(--pu-shadow);
    transition: translate .2s var(--ease), box-shadow .2s ease, border-color .2s ease;
  }
  .pu-card:hover, .pu-kpi:hover, .pu-stat:hover, .pu-find:hover { box-shadow: var(--pu-shadow-hover); border-color: var(--pu-line-hover); }
  .pu-ask {
    background:
      linear-gradient(100deg, transparent 35%, var(--pu-streak) 48%, transparent 60%) 120% 0 / 260% 100% no-repeat,
      var(--pu-grad-ask);
    background-color: var(--purple-800);
  }
  .pu-ask:hover { background-position: -20% 0, 0 0; }
  @media (prefers-reduced-motion: no-preference) {
    html:not(.rm) :is(.pu-card, .pu-kpi, .pu-stat, .pu-find):hover { translate: 0 -1px; }
    html:not(.rm) .pu-ask { transition: background-position .6s ease-in-out; }
    html:not(.rm) .pu-input::before { transition: background-position .8s ease, background-size .8s ease; }
  }
  .pu.pu--chat { --pu-cols: 30; --pu-max: 17px; --pu-min: 10px; }
  .pu-bri { display: flex; flex-direction: column; background: var(--bb-white); }
  .pu-bri__head { display: flex; align-items: center; gap: .7em; padding: .7em 1em; border-bottom: 1px solid var(--pu-ln); }
  .pu-av { width: 2.86em; height: 2.86em; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--bb-white); border: 1px solid var(--pu-ln); color: var(--pu-p); }
  .pu-av svg { width: 1.6em; height: 1.6em; }
  .pu-bri__name { font-weight: 600; color: var(--pu-hd); }
  .pu-bri__sess { display: flex; align-items: center; gap: .45em; font-size: .857em; color: var(--pu-mu); }
  .pu-bri__sess i { width: .6em; height: .6em; border-radius: 50%; background: var(--bb-success); }
  .pu-bri__chat { display: flex; flex-direction: column; gap: .9em; padding: 1.15em 1em 1em; }
  .pu-msg-u { align-self: flex-end; max-width: 82%; padding: .8em 1.1em; border-radius: 1.15em; background: var(--pu-tint); color: var(--pu-hd); }
  .pu-msg-b { color: var(--pu-hd); line-height: 1.5; }
  .pu-trail { display: inline-flex; align-items: center; gap: .45em; align-self: flex-start; padding: .3em .5em .3em .3em; border-radius: .57em; font-size: .93em; color: var(--pu-tx); }
  .pu-trail svg { width: 1.15em; height: 1.15em; color: var(--pu-p); }
  .pu-trail .pu-trail__chev { width: 1em; height: 1em; color: var(--pu-mu); transform: rotate(90deg); }
  .pu-find { position: relative; display: grid; gap: .55em; padding: calc(.9em + 2px) calc(1.05em + 2px) calc(1em + 2px); border-radius: 1em; background: var(--bb-white); }
  .pu-find::before, .pu-input::before {
    content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none;
    background: var(--pu-grad-ai);
    -webkit-mask: linear-gradient(var(--opaque) 0 0) content-box, linear-gradient(var(--opaque) 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(var(--opaque) 0 0) content-box exclude, linear-gradient(var(--opaque) 0 0);
  }
  .pu-find__t { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; font-weight: 600; color: var(--pu-hd); }
  .pu-find__big { font-size: 2em; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--pu-good); white-space: nowrap; }
  .pu-find__rows { display: grid; gap: .1em; }
  .pu-find__rows li { display: flex; justify-content: space-between; gap: 1em; padding: .45em 0; border-top: 1px solid var(--pu-ln); font-size: .93em; }
  .pu-find__rows span { color: var(--pu-mu); }
  .pu-find__rows b { color: var(--pu-hd); white-space: nowrap; }
  .pu-chips { display: flex; flex-wrap: wrap; gap: .35em; }
  .pu-chips span { padding: .5em .8em; border-radius: .57em; border: 1px solid var(--pu-lav-line); background: var(--bb-white); font-size: .857em; font-weight: 700; color: var(--pu-hd); }
  .pu-input {
    position: relative; margin: 0 1em; padding: calc(.75em + 2px) calc(.9em + 2px) calc(.6em + 2px); border-radius: 1.43em; background: var(--bb-white);
    transition: box-shadow .3s ease;
  }
  .pu-input::before { background-size: 100% 100%; background-position: 0 0; }
  .pu-bri:hover .pu-input::before { background-size: 200% 100%; background-position: 95% 0; }
  .pu-bri:hover .pu-input { box-shadow: var(--pu-shadow-input); }
  .pu-input__ph { min-height: 2em; color: var(--pu-mu); }
  .pu-input__tools { display: flex; justify-content: space-between; align-items: center; }
  .pu-input__att, .pu-input__send { width: 2.29em; height: 2.29em; display: grid; place-items: center; border-radius: 50%; }
  .pu-input__att { border: 1px solid var(--pu-ln2); color: var(--pu-tx); }
  .pu-input__send { background: var(--pu-p); color: var(--bb-white); }
  .pu-input__att svg, .pu-input__send svg { width: 1em; height: 1em; }
  .pu-disc { padding: .6em 1em .9em; text-align: center; font-size: .786em; color: var(--pu-mu); }
  .pu-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9em; }
  .pu-kpi { position: relative; padding: 1em 1.1em .9em; background: var(--bb-white); border: 1px solid var(--pu-bd); border-radius: .86em; }
  .pu-kpi__ic { display: inline-grid; place-items: center; width: 2.29em; height: 2.29em; border-radius: .57em; background: var(--pu-ic-bg); color: var(--pu-p); }
  .pu-kpi__ic svg { width: 1.3em; height: 1.3em; }
  .pu-kpi .pu-pill { position: absolute; top: 1.05em; right: 1.1em; }
  .pu-kpi__l { margin-top: .8em; font-size: .857em; color: var(--pu-mu); }
  .pu-kpi__v { margin-top: .1em; font-size: 1.43em; font-weight: 700; color: var(--pu-tt); white-space: nowrap; }
  .pu-kpi__v small { font-size: .7em; font-weight: 600; color: var(--pu-mu); }
  .pu .pu-spark { display: block; width: 100%; height: 2.4em; margin-top: .55em; overflow: visible; }
  .pu-spark__a { fill: var(--pu-lav); }
  .pu-spark__l { fill: none; stroke: var(--pu-p); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .pu-kpi__f { margin-top: .35em; font-size: .786em; color: var(--pu-mu); }
  .pu-camps th:first-child, .pu-camps td:first-child { width: 38%; }
  .pu-camps th:not(:first-child), .pu-camps td:not(:first-child) { text-align: right; }
  .pu-audit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.15em; }
  .pu-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.2em 1.4em; padding: 1.2em 1.3em; }
  .pu-ring { position: relative; width: 8.6em; height: 8.6em; }
  .pu .pu-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .pu-ring__track { fill: none; stroke: var(--pu-track); stroke-width: 11; }
  .pu-ring__arc { fill: none; stroke-width: 11; stroke-linecap: round; }
  .pu-ring__v { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
  .pu-ring__v b { font-size: 2.15em; line-height: 1; font-weight: 700; color: var(--pu-tx); }
  .pu-ring__v span { margin-top: .3em; font-size: .857em; font-weight: 600; color: var(--pu-mu); }
  .pu-score__msg { display: grid; gap: .35em; }
  .pu-score__h { font-size: 1.14em; font-weight: 700; color: var(--pu-hd); }
  .pu-score__d { font-size: .93em; line-height: 1.45; color: var(--pu-tx); }
  .pu-trendline { display: flex; align-items: center; gap: .3em; font-size: .857em; font-weight: 500; color: var(--pu-mu); }
  .pu-trendline b { display: inline-flex; align-items: center; gap: .15em; color: var(--pu-ok); font-weight: 600; }
  .pu-trendline svg { width: 1em; height: 1em; }
  .pu-cats { display: grid; gap: .75em; padding: 1.1em 1.3em 1.2em; }
  .pu-cats__h { font-weight: 600; color: var(--pu-hd); }
  .pu-cat { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 2.8em; align-items: center; gap: .6em; }
  .pu-cat__l { display: flex; align-items: center; gap: .5em; color: var(--pu-tx); white-space: nowrap; }
  .pu-cat__l i { display: grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: .43em; background: var(--pu-tint); color: var(--pu-p); }
  .pu-cat__l svg { width: 1.1em; height: 1.1em; }
  .pu-cat__bar { height: .57em; border-radius: 999px; background: var(--pu-tint); overflow: hidden; }
  .pu-cat__bar i { display: block; height: 100%; border-radius: inherit; background: var(--pu-p); }
  .pu-cat b { text-align: right; color: var(--pu-tx); }
  .pu-checks li { display: grid; grid-template-columns: 2.86em minmax(0, 1fr) auto; align-items: center; gap: .3em 1em; padding: .85em 1.15em; border-bottom: 1px solid var(--pu-ln); }
  .pu-checks li:last-child { border-bottom: 0; }
  .pu-check__t { font-weight: 600; color: var(--pu-hd); }
  .pu-check__d { font-size: .93em; color: var(--pu-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pu-check__b { display: flex; gap: .4em; margin-top: .35em; }
  .pu-check__b span { padding: .1em .5em; border-radius: .43em; background: var(--pu-bd); font-size: .786em; font-weight: 600; color: var(--pu-tx); }
  .pu-tile--urgent { background: var(--pu-urgent-bg); color: var(--pu-urgent); }
  .pu-tile--warn { background: var(--pu-warn-bg); color: var(--pu-warn); }
  .pu-tile--ok { background: var(--pu-ok-bg); color: var(--pu-ok); }
  .pu-scene { --pu-cols: 72; padding: 0 0 7em; }
  .pu-scene > .pu-app { width: 88%; border-radius: var(--radius-3); border: 1px solid var(--neutral-200); box-shadow: var(--shadow); }
  .pu-float { position: absolute; z-index: 2; box-shadow: var(--shadow); }
  .pu-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; }
  .pu-stat { padding: 1em 1.1em; background: var(--bb-white); border: 1px solid var(--pu-ln2); border-radius: .86em; }
  .pu-stat__l { display: flex; align-items: center; gap: .4em; font-size: .93em; color: var(--pu-mu); white-space: nowrap; overflow: hidden; }
  .pu-stat__l svg { width: 1.3em; height: 1.3em; color: var(--pu-p); }
  .pu-stat__v { display: flex; align-items: center; gap: .35em; margin-top: .45em; font-size: 1.71em; font-weight: 700; color: var(--pu-tx); }
  .pu-stat__v .pu-pill { font-size: .5em; }
  .pu-comp th:nth-child(1) { width: 34%; }
  .pu-comp th:nth-child(2) { width: 30%; }
  .pu-rk { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: .7em; border-radius: 50%; background: var(--pu-rank-bg); color: var(--pu-pt); font-size: .857em; font-weight: 600; vertical-align: middle; }
  .pu-you { margin-left: .5em; padding: .1em .55em; border-radius: .43em; background: var(--pu-you-bg); color: var(--pu-pt); font-size: .857em; font-weight: 600; }
  .pu-vb { display: inline-block; width: 5em; height: .57em; margin-left: .5em; border-radius: 999px; background: var(--pu-bar-bg); overflow: hidden; vertical-align: middle; }
  .pu-vb i { display: block; height: 100%; border-radius: 999px; background: var(--pu-blue); }
  .pu-alert {
    top: 6.2em; right: 0;
    display: inline-flex; align-items: center; gap: .55em; padding: .7em 1.1em .7em .95em; border-radius: 999px;
    border: 1px solid var(--pu-red-line); background: var(--pu-red-bg); color: var(--pu-red); font-weight: 600; white-space: nowrap;
  }
  .pu-alert svg { width: 1.3em; height: 1.3em; }
  .pu-alert .pu-alert__go { width: 1.1em; height: 1.1em; }
  .pu-sa {
    right: 0; bottom: 0; width: 60%;
    display: grid; gap: 1em; padding: 1.1em 1.3em 1.2em; border-radius: .86em;
    border: 2px solid var(--pu-p); background: var(--pu-tint);
  }
  .pu-sa__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1em .8em; align-items: center; }
  .pu-sa__head .pu-tile { grid-row: span 2; width: 2.57em; height: 2.57em; }
  .pu-sa__t { font-size: 1.29em; font-weight: 500; color: var(--pu-hd); }
  .pu-sa__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
  .pu-sa__stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .6em; align-items: center; padding: .75em .85em; border-radius: .7em; border: 1px solid var(--pu-bd); background: var(--bb-white); }
  .pu-sa__stat i { grid-row: span 2; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .7em; }
  .pu-sa__stat i svg { width: 1.3em; height: 1.3em; }
  .pu-sa__stat span { font-size: .857em; color: var(--pu-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pu-sa__stat b { font-size: 1.15em; font-weight: 600; color: var(--pu-slate-ink); white-space: nowrap; }
  .pu-i--violet { background: var(--pu-i-violet-bg); color: var(--pu-i-violet); }
  .pu-i--blue { background: var(--pu-i-blue-bg); color: var(--pu-i-blue); }
  .pu-sa__kw { padding: .45em 1.1em; border-radius: 1.15em; background: var(--pu-lav); font-size: .93em; font-weight: 500; color: var(--pu-mu); }
  .pu-sa__kw b { font-weight: 700; }
  .pu-kw--paused { color: var(--pu-paused); }
  .pu-kw--active { color: var(--pu-active); }
  .pu-sa__act { display: flex; align-items: center; flex-wrap: wrap; gap: .4em .8em; font-size: .93em; color: var(--pu-tx); }
  .pu-badge { display: inline-flex; align-items: center; gap: .35em; padding: .2em .7em; border-radius: .57em; font-weight: 500; white-space: nowrap; }
  .pu-badge svg { width: 1.1em; height: 1.1em; }
  .pu-badge--paused { background: var(--pu-paused-bg); color: var(--pu-paused); }
  .pu-badge--active { background: var(--pu-active-bg); color: var(--pu-active); }
  .pu-sa__when { color: var(--pu-mu); }
  .pu.pu--handoff { --pu-cols: 30; --pu-max: 17px; --pu-min: 10px; }
  .pu-steps { position: relative; display: grid; gap: 1.05em; margin: .2em 0 0 .45em; padding-left: 1.5em; }
  .pu-steps::before { content: ""; position: absolute; left: 0; top: .55em; bottom: .9em; width: 1px; background: var(--pu-lav-line); }
  .pu-step { position: relative; display: grid; gap: .25em; }
  .pu-step__k { display: flex; align-items: center; flex-wrap: wrap; gap: .3em .45em; color: var(--pu-hd); }
  .pu-agent { display: inline-flex; align-items: center; gap: .35em; padding: .12em .55em .12em .3em; border-radius: .43em; background: var(--pu-lav); color: var(--pu-pt); font-weight: 600; white-space: nowrap; }
  .pu-agent svg { width: 1.1em; height: 1.1em; color: var(--pu-p); }
  .pu-step__r { font-size: .93em; color: var(--pu-tx); }
  .pu-step__t { font-size: .786em; color: var(--pu-mu); }
  .pu-step--ok .pu-step__k img { width: 1.3em; height: 1.3em; }
  .pu-ok { display: inline-flex; align-items: center; gap: .25em; padding: .1em .55em; border-radius: .43em; background: var(--pu-ok-bg); color: var(--pu-good); font-size: .857em; font-weight: 600; }
  .pu-ok svg { width: 1em; height: 1em; }
  .pu-scene--lit { --pu-cols: 68; padding: 0 0 0 2.2em; }
  .pu-scene--lit > .panel { padding: 3.6em 0 7.5em 11em; }
  .pu-scene--lit > .panel > .pu-app {
    margin: 0 -12% 0 0; border: 1px solid var(--neutral-200); border-radius: var(--radius-3) 0 0 var(--radius-3);
    box-shadow: var(--shadow);
  }
  .pu-scene--lit .pu-float { font-size: 1.1em; }
  .pu-scene--lit .pu-alert { top: 50%; right: auto; left: 0; }
  .pu-scene--lit .pu-sa { left: 7em; right: 5%; bottom: 1.8em; width: auto; }
  @container pu (width <= 560px) {
    .pu { --pu-cols: 30; --pu-max: 13px; }
    .pu-rail, .pu-ask, .pu-hide-s { display: none; }
    .pu-menu { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .43em; background: var(--bb-white); color: var(--pu-hd); border: 1px solid var(--pu-ln2); }
    .pu-head__end:has(.pu-range) .pu-menu { display: none; }
    .pu-head { padding: 1.1em 1.15em .7em; }
    .pu-title { font-size: 1.43em; }
    .pu-tabs { padding: 0 1.15em; gap: 1.3em; }
    .pu-pad { padding: 1em 1.15em 1.15em; gap: 1em; }
    .pu-kpis { grid-template-columns: 1fr 1fr; gap: .8em; }
    .pu-stats { grid-template-columns: 1fr 1fr; }
    .pu-stats > :nth-child(n+3) { display: none; }
    .pu-audit { grid-template-columns: minmax(0, 1fr); }
    .pu-score { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .pu-trendline { justify-content: center; }
    .pu-comp th:nth-child(1) { width: 60%; }
    .pu-comp th:nth-child(2) { width: 40%; }
    .pu-vb { display: none; }
    .pu-check__d { white-space: normal; }
    .pu-scene { padding: 0; display: grid; }
    .pu-scene > .pu-app { width: 100%; }
    .pu-float { position: relative; inset: auto; }
    .pu-alert { justify-self: start; inset: auto; margin: -1.6em 0 0 1em; }
    .pu-sa { width: 100%; margin-top: 1em; }
    .pu-scene--lit { padding: 0; }
    .pu-scene--lit > .panel { padding: 1.8em 0 2.4em 1.8em; }
    .pu-scene--lit > .panel > .pu-app { margin: 0 -8% 0 0; }
    .pu-scene--lit .pu-alert, .pu-scene--lit .pu-sa { inset: auto; font-size: 1em; }
    .pu-scene--lit .pu-sa { width: 100%; }
  }
  @media (width < 640px) {
    @container pu (width <= 560px) { .pu { --pu-cols: 26; } }
  }
}
@layer pages {
  [data-page="competitor-monitoring"] {
    .cm-card-h { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1em 1.3em; border-bottom: 1px solid var(--pu-ln); }
    .cm-card-h__t { display: flex; align-items: center; gap: .5em; font-size: 1.15em; font-weight: 600; color: var(--pu-hd); white-space: nowrap; }
    .cm-count { padding: .05em .6em; border-radius: 999px; background: var(--pu-lav); color: var(--pu-pt); font-size: .78em; font-weight: 600; }
    .cm-count--red { background: var(--pu-red-bg); color: var(--pu-red); }
    .cm-search {
      display: inline-flex; align-items: center; gap: .5em; height: 2.5em; min-width: 14em; padding: 0 .9em;
      border: 1px solid var(--pu-ln2); border-radius: .57em; background: var(--bb-white); color: var(--pu-mu); white-space: nowrap;
    }
    .cm-search svg { width: 1.1em; height: 1.1em; }
    .cm-new {
      flex: none; padding: .1em .5em; border-radius: .43em; background: var(--pu-red); color: var(--bb-white);
      font-size: .85em; font-weight: 600; line-height: 1.4;
    }
    .pu.cm-ads { --pu-cols: 54; }
    .cm-ads__t th:nth-child(1) { width: 32%; }
    .cm-ads__t th:nth-child(2) { width: 20%; }
    .cm-ads__t th:nth-child(3) { width: 15%; }
    .cm-ads__t th:nth-child(4) { width: 18%; }
    .cm-ads__t th:nth-child(5) { width: 15%; }
    .cm-ads__t :is(th, td) { padding-inline: .9em; }
    .cm-ads__t th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
    .cm-ads__t td { padding-block: .75em; }
    .cm-co { display: inline-grid; vertical-align: middle; line-height: 1.35; }
    .cm-co b { font-weight: 600; color: var(--pu-hd); }
    .cm-co > span { font-size: .86em; color: var(--pu-mu); }
    .cm-ads__t tr.is-you td { background: var(--pu-tint); }
    .cm-av {
      display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; margin-right: .7em; border-radius: .5em;
      vertical-align: middle; font-style: normal; font-size: .86em; font-weight: 700;
      background: var(--neutral-100); color: var(--neutral-700);
    }
    .cm-av--1 { background: var(--pu-lav); color: var(--pu-pt); }
    .cm-av--2 { background: var(--bb-rival-bg); color: var(--bb-rival-text); }
    .cm-av--3 { background: var(--bb-green-bg); color: var(--bb-green-text); }
    .cm-ads .pu-you, .cm-ads .cm-new { margin-left: .5em; font-size: .8em; }
    .cm-top { display: inline-block; min-width: 2.6em; font-weight: 600; color: var(--pu-tx); }
    .cm-top--1 { color: var(--pu-ad-blue); }
    .cm-top--2 { color: var(--pu-ad-orange); }
    .cm-bar { display: inline-block; width: 4.6em; height: .45em; margin-left: .4em; border-radius: 999px; background: var(--neutral-100); overflow: hidden; vertical-align: middle; }
    .cm-bar i { display: block; height: 100%; border-radius: inherit; background: var(--neutral-400); }
    .cm-bar--1 i { background: var(--pu-blue); }
    .cm-bar--2 i { background: var(--pu-ad-orange-bar); }
    .cm-pos { padding: .1em .45em; border-radius: .43em; border: 1px solid var(--pu-ad-blue-line); background: var(--pu-ad-blue-bg); color: var(--pu-ad-blue); font-size: .9em; font-weight: 600; }
    .cm-n { display: inline-block; min-width: 2.4em; padding: .1em .5em; border: 1px solid var(--pu-ln2); border-radius: .43em; text-align: center; font-weight: 600; }
    .cm-chat { width: min(100%, 460px); margin-inline: auto; }
    @media (width < 640px) {
      .cm-chat-panel { padding-left: var(--s5); padding-right: var(--s5); }
      .cm-chat .pu.pu--chat { --pu-cols: 26; }
    }
    .cm-find__n { font-size: 2em; line-height: 1; font-weight: 700; color: var(--pu-pt); }
    .pu .cm-find__rows li { align-items: flex-start; }
    .pu .cm-find__rows li > span:first-child { display: grid; gap: .1em; min-width: 0; color: var(--pu-tx); }
    .pu .cm-find__rows li > span:first-child b { white-space: normal; }
    .pu .cm-find__rows .cm-find__when { flex: none; color: var(--pu-mu); white-space: nowrap; }
    .pu.cm-inf { --pu-cols: 58; }
    .pu-stat__l .cm-ic-red { color: var(--pu-red); }
    .pu-stat__l .cm-ic-orange { color: var(--pu-paused); }
    .pu-stat__l .cm-ic-blue { color: var(--pu-blue); }
    @container pu (width > 560px) {
      .cm-inf .pu-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    .cm-inf .pu-stat__v { font-size: 1.57em; }
    .cm-inf__t th:nth-child(1) { width: 28%; }
    .cm-inf__t th:nth-child(2) { width: 40%; }
    .cm-inf__t th:nth-child(3) { width: 15%; }
    .cm-inf__t th:nth-child(4) { width: 17%; }
    .cm-inf__t td { vertical-align: top; padding-block: .85em; }
    .cm-dom { font-weight: 600; color: var(--pu-hd); }
    .cm-inf__t td:first-child { white-space: normal; }
    .cm-inf .cm-dom { display: block; }
    .cm-inf .cm-new { display: inline-block; margin-top: .35em; }
    .cm-adh, .cm-add { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cm-adh { font-weight: 500; color: var(--pu-pt); }
    .cm-add { margin-top: .15em; font-size: .88em; color: var(--pu-mu); }
    .cm-kw { padding: .1em .5em; border-radius: .43em; border: 1px solid var(--pu-ln2); background: var(--pu-bd); color: var(--pu-mu); font-size: .88em; font-weight: 500; }
    .pu.cm-sa {
      --pu-cols: 54;
      --pu-active: var(--pu-active-strong); --pu-paused: var(--pu-paused-strong);
      padding: 1.2em 1.4em 1.6em; border: 2px solid var(--pu-p); border-radius: var(--radius-3) var(--radius-3) 0 0;
      background: var(--pu-tint); box-shadow: var(--shadow);
    }
    .cm-sa__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8em; }
    .cm-sa__head .pu-tile { width: 2.57em; height: 2.57em; }
    .cm-sa__tools { display: flex; gap: .5em; }
    .cm-ibtn {
      display: grid; place-items: center; width: 2.57em; height: 2.57em; border-radius: .57em;
      border: 1px solid var(--pu-ln2); background: var(--bb-white); color: var(--pu-mu);
    }
    .cm-ibtn svg { width: 1.3em; height: 1.3em; }
    .cm-ibtn--ai { border-color: var(--pu-lav-line); background: var(--pu-lav); color: var(--pu-p); }
    .cm-sa__body { display: grid; gap: 1em; margin-top: 1.15em; padding-left: 3.4em; }
    .cm-sa .pu-sa__kw { justify-self: start; }
    .cm-act { overflow: hidden; border: 1px solid var(--pu-ln); border-radius: .86em; background: var(--bb-white); }
    .cm-act__h { display: flex; align-items: center; gap: .5em; padding: .85em 1.15em; border-bottom: 1px solid var(--pu-ln); font-weight: 600; color: var(--pu-hd); }
    .cm-act__h svg { width: 1.2em; height: 1.2em; color: var(--pu-mu); }
    .cm-act__t th:nth-child(1) { width: 21%; }
    .cm-act__t th:nth-child(2) { width: 23%; }
    .cm-act__t th:nth-child(3) { width: 21%; }
    .cm-act__t th:nth-child(4) { width: 35%; }
    .cm-act__t :is(th, td) { padding-inline: .85em; white-space: normal; line-height: 1.3; }
    .cm-act__t td { padding-block: .7em; }
    .cm-act__t .pu-badge { white-space: nowrap; }
    .cm-act__t td:first-child { font-weight: 600; color: var(--pu-hd); }
    @container pu (width <= 560px) {
      .pu.cm-ads, .pu.cm-inf, .pu.cm-sa { --pu-cols: 26; }
      .cm-card-h { padding: .9em 1.1em; }
      .cm-search { min-width: 0; }
      .cm-ads__t th:nth-child(1) { width: 66%; }
      .cm-ads__t th:nth-child(2) { width: 34%; }
      .cm-ads__t :is(th, td):nth-child(3) { display: none; }
      .cm-av, .cm-bar { display: none; }
      .cm-ads .cm-search { font-size: 0; padding: 0 .7em; }
      .cm-ads .cm-search svg { width: 15px; height: 15px; }
      :is(.cm-inf__t, .cm-act__t) thead { display: none; }
      :is(.cm-inf__t, .cm-act__t), :is(.cm-inf__t, .cm-act__t) tbody { display: block; }
      :is(.cm-inf__t, .cm-act__t) tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3em .8em;
        padding: .8em 1.1em; border-bottom: 1px solid var(--pu-ln);
      }
      :is(.cm-inf__t, .cm-act__t) tr:last-child { border-bottom: 0; }
      :is(.cm-inf__t, .cm-act__t) td { display: block; padding: 0; border: 0; min-width: 0; }
      .cm-inf__t td:nth-child(1) { display: flex; align-items: center; gap: .5em; }
      .cm-inf .cm-new { display: inline-block; margin: 0; }
      .cm-inf__t td:nth-child(2) { grid-column: 1 / -1; }
      .cm-inf__t td:nth-child(3) { grid-column: 2; grid-row: 1; color: var(--pu-mu); }
      .cm-act__t td:nth-child(4) { grid-column: 1 / -1; color: var(--pu-mu); white-space: normal; }
      .cm-sa__body { padding-left: 0; }
      .pu-sa__stat span { white-space: normal; }
      .pu-comp .pu-rk { display: none; }
    }
  }
}
@layer sections {
  .product-hero { padding: var(--hero-top) 0 var(--section-pad); }
  .product-hero__h1 { margin-top: clamp(12px, 1.6vw, 24px); max-width: 17em; }
  .product-hero--bare .product-hero__h1 { margin-top: 0; max-width: 15em; }
  .product-hero--bare .product-hero__h1 { overflow-wrap: anywhere; }
  .product-hero__row { align-items: start; margin-top: var(--hero-gap); }
  .product-hero__copy { grid-column: 1 / span 5; padding-right: var(--inset-text); }
  .product-hero__lede { max-width: 36ch; color: var(--ink); }
  .product-hero__more { margin-top: var(--s4); max-width: 40ch; font-size: var(--fs-18); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
  .product-hero__copy .actions { margin-top: var(--s6); }
  .product-hero__fig { grid-column: 6 / span 7; min-width: 0; }
  @media (900px <= width < 1280px) {
    .product-hero__copy { padding-right: 0; }
  }
  @media (width < 900px) {
    .product-hero__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--s7); }
    .product-hero__copy, .product-hero__fig { grid-column: 1; padding-right: 0; }
    .product-hero__lede { max-width: 40ch; }
  }
  @media (width < 640px) {
    .product-hero { padding-top: var(--s5); }
    .product-hero__lede { font-size: var(--fs-18); }
    .product-hero__more { font-size: var(--fs-16); }
    .product-hero__copy .actions { margin-top: var(--s5); }
    .product-hero__row { row-gap: var(--s6); }
  }
}
@layer sections {
  .reasons__list {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-fluid);
    grid-template-rows: auto auto auto;
  }
  .reasons__item {
    display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start;
    justify-items: center; text-align: center;
  }
  .reasons__m { align-self: start; margin-bottom: var(--s5); }
  .reasons__icon { display: block; width: auto; height: clamp(112px, 64px + 5vw, 144px); margin-inline: auto; }
  .reasons__t { font-size: var(--fs-24); line-height: 1.2; font-weight: var(--fw-display); color: var(--ink); }
  .reasons__p { margin-top: var(--s3); max-width: 36ch; font-size: var(--fs-18); line-height: 1.5; color: var(--text); text-wrap: pretty; }
  .reasons__act { display: flex; justify-content: center; margin-top: clamp(40px, 12px + 3vw, 56px); }
  @media (width < 900px) {
    .reasons__list { grid-template-columns: minmax(0, 1fr); row-gap: var(--s7); }
    .reasons__item { grid-row: auto; grid-template-rows: none; }
  }
}
@layer sections {
  .feat { overflow-x: clip; }
  .feat__in { align-items: center; }
  .feat__text, .feat__fig { grid-row: 1; min-width: 0; }
  .feat__text { grid-column: 1 / span 5; padding-right: var(--inset-text-l); }
  .feat__fig { grid-column: 6 / span 7; }
  .feat--flip .feat__fig { grid-column: 1 / span 7; }
  .feat--flip .feat__text { grid-column: 8 / span 5; padding-right: 0; padding-left: var(--inset-text-l); }
  .feat__text > p { margin-top: var(--s4); max-width: 40ch; font-size: var(--fs-18); line-height: 1.5; color: var(--text); text-wrap: pretty; }
  .feat__text > h2 + p { margin-top: var(--s5); }
  .feat__text > .btn { margin-top: var(--s6); }
  .feat__list { margin-top: var(--s5); max-width: 40ch; }
  .feat__list li {
    padding-block: 12px; border-top: 1px solid var(--line);
    font-size: var(--fs-16); line-height: 1.5; color: var(--text); text-wrap: pretty;
  }
  .feat__list li:last-child { border-bottom: 1px solid var(--line); }
  .feat__checks { margin-top: var(--s5); max-width: 40ch; }
  .feat__checks li {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
    padding-block: 14px; border-top: 1px solid var(--line);
    font-size: var(--fs-18); line-height: 1.5; color: var(--text); text-wrap: pretty;
  }
  .feat__checks li:last-child { border-bottom: 1px solid var(--line); }
  .feat__checks strong { font-weight: var(--fw-display); color: var(--ink); }
  .feat__check { width: 20px; height: 20px; margin-top: .2em; color: var(--accent); }
  .feat__list--asks li { font-size: var(--fs-18); font-weight: var(--fw-medium); color: var(--ink); text-indent: -.4em; padding-left: .4em; }
  @media (width < 900px) {
    .feat__in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
    .feat .feat__text, .feat .feat__fig { grid-column: 1; grid-row: auto; padding: 0; }
    .feat__text > p, .feat__list, .feat__checks { max-width: 44ch; }
  }
  @media (width < 640px) {
    .feat__text > p, .feat__list--asks li, .feat__checks li { font-size: var(--fs-16); }
    .feat__text > .btn { margin-top: var(--s5); }
  }
}
@layer sections {
  .review-band { overflow: clip; }
  .review__label { margin-bottom: var(--s5); font-size: var(--fs-16); line-height: 1.3; font-weight: var(--fw-strong); color: var(--ink); }
  .review__quote {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--gap-fluid); row-gap: var(--s4);
    align-items: center;
  }
  .review .face { --f: clamp(88px, 56px + 4vw, 128px); --d: 16px; grid-row: 1 / 3; }
  .review__text p {
    max-width: 34ch; font-size: var(--fs-32); line-height: 1.3; font-weight: var(--fw-medium); color: var(--ink);
    text-indent: -.4em; text-wrap: pretty;
  }
  .review__who { align-self: start; display: grid; gap: 2px; font-size: var(--fs-14); line-height: 1.35; color: var(--text); }
  .review__who b { font-size: var(--fs-16); color: var(--ink); }
  .review-band--card { width: min(calc(100% - var(--gutter) * 2), 1280px); margin-inline: auto; border-radius: var(--radius-3); }
  .review-band--card .review { padding-block: clamp(40px, 16px + 4vw, 80px); }
  .review-band--card .review > .wrap { width: auto; padding-inline: clamp(24px, 4px + 5.6vw, 96px); }
  .review-straddle { background: linear-gradient(180deg, var(--purple-100) 50%, var(--bb-white) 50%); }
  @media (width < 640px) {
    .review__quote { grid-template-columns: minmax(0, 1fr); }
    .review .face { grid-row: auto; --f: 80px; --d: 12px; }
  }
}
@layer sections {
  .face {
    --f: 64px; --d: 10px; --rw: 2px;
    position: relative; display: block; flex: none; width: var(--f); height: var(--f);
    border: var(--rw) solid var(--bb-white); border-radius: 50%;
  }
  .face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
  .face::after {
    content: ""; position: absolute; width: var(--d); height: var(--d); border-radius: 50%; background: var(--bb-green);
    left: calc(var(--f) * .828 - var(--d) / 2 - var(--rw)); top: calc(var(--f) * .123 - var(--d) / 2 - var(--rw));
  }
}
@layer sections {
  .cases-head { margin-bottom: clamp(36px, 12px + 3vw, 56px); }
  .cases-head .lede, .cases-head__intro { margin-inline: auto; }
  .cases-head__intro { display: grid; gap: var(--s4); max-width: 60ch; font-size: var(--fs-18); line-height: 1.5; color: var(--text); }
  .cases-head > .btn { margin-top: var(--s2); }
  .cases-head--plain { margin-bottom: clamp(28px, 10px + 2.4vw, 48px); }
  .cases-head--plain .lede { max-width: 60ch; }
  .cases-head--plain .kicker { margin-bottom: calc(var(--s2) - var(--s5)); color: var(--ink); }
  @media (width < 640px) {
    .cases-head__intro { font-size: var(--fs-16); }
  }
}
@layer sections {
  bb-case-slider { display: block; }
  .site-slides {
    --site-edge: max(var(--gutter), (100% - var(--wrap-width)) / 2);
    display: flex; gap: clamp(16px, 1.6vw, 24px); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--site-edge); padding: 8px var(--site-edge) 28px;
    scrollbar-width: none; contain: paint;
  }
  .site-slides::-webkit-scrollbar { display: none; }
  .site-slides:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
  .site-slide {
    flex: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); width: min(760px, 78vw);
    overflow: hidden; scroll-snap-align: start; border-radius: var(--radius-3); background: var(--bb-white);
    box-shadow: inset 0 0 0 1px var(--bb-line), var(--shadow-picture);
  }
  .site-slide__media { position: relative; min-height: 280px; }
  .site-slide__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .site-slide__media .site-logo { position: absolute; left: var(--s4); bottom: var(--s4); box-shadow: var(--shadow-tile); }
  .site-slide__fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .site-slide__media--fill .site-slide__photo {
    inset: 50% 0 auto; height: auto; translate: 0 -50%; aspect-ratio: 640 / 422;
    -webkit-mask-image: linear-gradient(180deg, transparent, var(--opaque) 18%, var(--opaque) 82%, transparent);
            mask-image: linear-gradient(180deg, transparent, var(--opaque) 18%, var(--opaque) 82%, transparent);
  }
  .site-slide__media .site-logo--wide { width: 156px; }
  .site-slide__body { display: grid; align-content: start; justify-items: start; padding: var(--card-pad); }
  .site-slide__who { font-size: var(--fs-24); line-height: 1.25; font-weight: var(--fw-strong); color: var(--ink); }
  .site-slide__nums {
    display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--s5) clamp(24px, 3vw, 40px);
    margin-top: var(--s4);
  }
  .site-slide__line { margin-top: var(--s5); max-width: 40ch; font-size: var(--fs-14); line-height: 1.5; color: var(--text); text-wrap: pretty; }
  .site-slider__nav { display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .site-slider__more { grid-column: 1; justify-self: start; }
  .site-slider__btn[data-step="-1"] { grid-column: 2; }
  .site-slider__btn[data-step="1"] { grid-column: 3; }
  .site-slider__btn[data-step="1"] svg { scale: -1 1; }
  .site-slider__btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--bb-line);
    border-radius: 50%; background: var(--bb-white); color: var(--ink); cursor: pointer; transition: border-color .2s;
  }
  .site-slider__btn:hover:not(:disabled) { border-color: var(--ink); }
  .site-slider__btn:disabled { opacity: .35; cursor: default; }
  .site-slider__btn svg { width: 20px; height: 20px; }
  @media (width < 640px) {
    .site-slider__nav:has(.site-slider__more) { grid-template-columns: minmax(0, 1fr) auto auto; }
    .site-slide { grid-template-columns: minmax(0, 1fr); width: 86vw; }
    .site-slide__media { min-height: 0; aspect-ratio: 16 / 9; }
    .site-slide__who { font-size: var(--fs-20); }
    .site-slide__fill { display: none; }
    .site-slide__media--fill .site-slide__photo { inset: 0; height: 100%; aspect-ratio: auto; translate: none; -webkit-mask-image: none; mask-image: none; }
  }
}
@layer sections {
  bb-numbers { display: block; }
  .site-logo {
    display: flex; align-items: center; justify-content: center; flex: none; width: 104px; height: 52px; padding: 8px 12px;
    border-radius: var(--radius-2); background: var(--bb-white);
  }
  .site-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
  .site-num {
    padding-top: .04em; font-size: clamp(44px, 24px + 2.2vw, 60px); line-height: var(--lh-giant);
    font-weight: var(--fw-medium); letter-spacing: var(--tr-giant); color: var(--ink); white-space: nowrap;
    font-variant-numeric: lining-nums;
  }
  .site-num .sign { margin-right: .02em; }
  .site-num__s, .site-num__f { display: inline-block; }
  .site-fig__l { margin-top: var(--s2); font-size: var(--fs-16); line-height: 1.3; color: var(--ink); }
  @keyframes site-slide-in {
    from { translate: 40px 0; opacity: 0; }
    to   { translate: 0 0;    opacity: 1; }
  }
  @keyframes site-rise {
    from { translate: 0 calc(100% + .2em); clip-path: inset(-.3em -1em 100% -1em); }
    to   { translate: 0 0;                 clip-path: inset(-.3em -1em -.25em -1em); }
  }
  @media screen and (prefers-reduced-motion: no-preference) {
    html:not(.rm) bb-numbers:not([rise]).is-armed .site-fig:not(.is-in) :is(.site-num__s, .site-num__f) { opacity: 0; }
    html:not(.rm) bb-numbers:not([rise]).is-armed .site-fig.is-in :is(.site-num__s, .site-num__f) { animation: site-slide-in .7s var(--ease) var(--site-d, 0s) backwards; }
    html:not(.rm) bb-numbers:not([rise]).is-armed .site-fig.is-in .site-num__f { animation-delay: calc(var(--site-d, 0s) + .08s); }
    html:not(.rm) bb-numbers[rise].is-armed .site-fig:not(.is-in) :is(.site-num__s, .site-num__f) { clip-path: inset(0 0 100% 0); }
    html:not(.rm) bb-numbers[rise].is-armed .site-fig.is-in :is(.site-num__s, .site-num__f) { animation: site-rise 1.1s var(--ease) var(--site-d, 0s) backwards; }
    html:not(.rm) bb-numbers[rise].is-armed .site-fig.is-in .site-num__f { animation-delay: calc(var(--site-d, 0s) + .14s); }
    html:not(.rm) bb-numbers.is-armed .site-fig.site-now :is(.site-num__s, .site-num__f) { animation: none; }
  }
}
@layer sections {
  .faq__in { align-items: start; }
  .faq__in > h2 { grid-column: 1 / span 4; }
  .faq__list { grid-column: 5 / span 8; border-bottom: 1px solid var(--line); }
  .qa { border-top: 1px solid var(--line); }
  .qa summary {
    --c: var(--accent-text);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
    min-height: 64px; padding-block: 18px; cursor: pointer; list-style: none;
  }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary::after {
    content: ""; flex: none; width: 18px; height: 18px;
    background:
      linear-gradient(var(--c), var(--c)) 50% 50% / 100% 2px no-repeat,
      linear-gradient(var(--c), var(--c)) 50% 50% / 2px 100% no-repeat;
  }
  .qa[open] summary::after { background-size: 100% 2px, 2px 0; }
  .qa__q { font-size: var(--fs-20); line-height: 1.35; font-weight: var(--fw-strong); color: var(--ink); }
  .qa summary:hover .qa__q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .qa__a { max-width: 62ch; padding: 0 44px 24px 0; font-size: var(--fs-18); line-height: 1.55; color: var(--text); text-wrap: pretty; }
  .qa__a--parts > :is(p, ul) + :is(p, ul) { margin-top: var(--s4); }
  .qa__ul { display: grid; gap: var(--s3); }
  .qa__ul li { position: relative; padding-left: 22px; }
  .qa__ul li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); }
  .qa__ul strong { font-weight: var(--fw-strong); color: var(--ink); }
  .faq--center .faq__in > h2 { margin-bottom: var(--head-gap); text-align: center; }
  @media (width >= 900px) {
    .faq--center .faq__in > h2 { grid-column: 1 / -1; }
    .faq--center .faq__list { grid-column: 3 / span 8; }
  }
  .faq--center .qa__a strong { color: var(--ink); }
  .faq--center .qa__a a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .faq--center .qa__a a:hover { text-decoration-thickness: 2px; }
  @media (width < 900px) {
    .faq__in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); }
    .faq__in > h2, .faq__list { grid-column: 1; }
    .faq--center .faq__in { row-gap: 0; }
  }
  @media (width < 640px) {
    .qa summary { min-height: 56px; padding-block: 14px; gap: var(--s4); }
    .qa__q { font-size: var(--fs-18); }
    .qa__a { padding-right: 0; font-size: var(--fs-16); }
  }
}
@layer sections {
  .close-band {
    --close-rw: clamp(160px, 15vw, 220px);
    position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-pad);
    background: var(--purple-900) linear-gradient(180deg, var(--purple-600) 0%, var(--purple-800) 56%, var(--purple-900) 100%);
    box-shadow: var(--edge-light);
  }
  .close-band__in { position: relative; z-index: 1; display: grid; justify-items: start; gap: var(--s6); }
  .close-band__h { max-width: 16em; }
  .close-band__rings, .close-band__slats { position: absolute; z-index: 0; bottom: 0; pointer-events: none; }
  .close-band__slats {
    right: calc(max(var(--gutter), (100% - var(--wrap-width)) / 2) - 8px + var(--close-rw) * .5); width: calc(var(--close-rw) * 1.096); aspect-ratio: 320 / 403;
    background: url("/assets/img/illustrations/app-ribbon.svg?v=d5fdda35") no-repeat center bottom / contain;
    translate: -12px 12px;
  }
  .close-band__rings {
    right: calc(max(var(--gutter), (100% - var(--wrap-width)) / 2) - 8px);
    width: var(--close-rw); height: auto; aspect-ratio: 292 / 364; overflow: visible; color: var(--bb-white);
  }
  @media (width < 640px) {
    .close-band { padding-bottom: calc(var(--section-pad) + var(--close-rw) * .9); }
  }
  .close-band--center { --close-aw: clamp(280px, 26vw, 400px); }
  .close-band--center .close-band__in { justify-items: center; text-align: center; }
  .close-band__art {
    position: absolute; z-index: 0; right: 0; bottom: calc(var(--close-aw) * -.04); width: var(--close-aw); height: auto;
    aspect-ratio: 440 / 300; overflow: visible; pointer-events: none; color: var(--bb-white);
  }
  @media (width < 1280px) {
    .close-band--center { padding-bottom: calc(var(--section-pad) + var(--close-aw) * .62); }
    .close-band__art { right: 50%; translate: 50% 0; bottom: calc(var(--close-aw) * -.05); }
  }
  @media print { .close-band__rings, .close-band__slats, .close-band__art { display: none; } }
}