/* Website-derived miniature family. Scope is intentionally exclusive to image2.
   Reference: live NoimosAI FV, mechanism and expertise sections, 2026-09-08.
   Sparse focal chroma follows the user supplied Asana color-extent reference. */
.agent-catalog--website {
  --website-ink: var(--neutral-600);
  --website-accent-start: var(--neutral-300);
  --website-accent-mid: var(--neutral-400);
  --website-accent-end: var(--neutral-500);
  --website-detail-size: calc(var(--type-c1-size) * .75);
  --website-detail-line: var(--space-5);
  --website-object-shadow: var(--shadow-1);
}
.agent-catalog--website .website-palette { width: 100%; }
.agent-catalog--website .website-palette-controls { display: flex; justify-content: center; margin-bottom: var(--space-5); }
.agent-catalog--website .website-palette-controls .segmented__item { border: 0; background: transparent; }
.agent-catalog--website .website-palette-controls .segmented__item.is-active { background: var(--surface); }
.agent-catalog--website .website-palette--gradient {
  --website-accent-start: var(--primary-200);
  --website-accent-mid: var(--primary-300);
  --website-accent-end: var(--info-100);
}
.agent-catalog--website .website-art { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: var(--neutral-100); color: var(--website-ink); font: var(--fw-regular) var(--website-detail-size)/var(--website-detail-line) var(--font-sans); }
.agent-catalog--website .website-art *, .agent-catalog--website .website-art *::before, .agent-catalog--website .website-art *::after { box-sizing: border-box; animation: none !important; transition: none !important; }
.agent-catalog--website .website-heading { position: absolute; top: 9%; left: 8%; right: 8%; display: flex; align-items: center; gap: var(--space-3); color: var(--neutral-700); z-index: 5; }
.agent-catalog--website .website-heading > .ph { font-size: var(--type-c1-size); }
.agent-catalog--website .website-heading b { font-size: inherit; font-weight: var(--fw-medium); }
.agent-catalog--website .website-pane { position: absolute; display: block; background: linear-gradient(145deg, var(--white), var(--white-80)); border: var(--stroke-1) solid var(--white); border-radius: var(--radius-lg); box-shadow: var(--website-object-shadow); }
.agent-catalog--website .website-disc { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; aspect-ratio: 1; border-radius: var(--radius-full); background: linear-gradient(145deg, var(--white), var(--neutral-100)); box-shadow: inset var(--stroke-1) var(--stroke-1) var(--space-2) var(--white), var(--shadow-1); }
.agent-catalog--website .website-disc img { width: 48%; height: 48%; object-fit: contain; filter: grayscale(1); }
.agent-catalog--website .website-bar { display: block; height: var(--space-2); border-radius: var(--radius-full); background: var(--neutral-300); }
.agent-catalog--website .website-social-post { width: auto; height: 67%; left: 8%; right: 8%; top: 22%; padding: var(--space-3); overflow: hidden; }
.agent-catalog--website .website-account { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.agent-catalog--website .website-account .website-disc { width: var(--space-6); box-shadow: none; }
.agent-catalog--website .website-account .website-bar { width: 52%; }
.agent-catalog--website .website-post-photo { display: block; width: 100%; height: 69%; object-fit: cover; border-radius: var(--radius-2xs); filter: grayscale(1); opacity: .72; mask-image: linear-gradient(var(--black) 15%, transparent 100%); }
.agent-catalog--website .website-post-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); opacity: .16; }
.agent-catalog--website .website-social-brand { position: absolute; width: 17%; z-index: 2; }
.agent-catalog--website .website-social-brand--one { right: 11%; top: 24%; }
.agent-catalog--website .website-social-brand--two { left: 11%; top: 47%; opacity: .65; }
.agent-catalog--website .website-social-chart { position: absolute; left: 8%; right: 8%; height: 40%; bottom: 11%; z-index: 3; }
.agent-catalog--website .website-chart-area, .agent-catalog--website .website-chart-line { position: absolute; inset: 0; display: block; mask-repeat: no-repeat; mask-size: 100% 100%; }
.agent-catalog--website .website-chart-area { background: linear-gradient(140deg, var(--website-accent-start), var(--website-accent-mid) 58%, var(--website-accent-end)); mask-image: url('assets/agent-creatives-2/growth-area.svg'); opacity: .6; }
.agent-catalog--website .website-chart-line { background: var(--neutral-500); mask-image: url('assets/agent-creatives-2/growth-line.svg'); }
.agent-catalog--website .website-search-context { left: 13%; right: 13%; top: 25%; height: 63%; padding: var(--space-4); opacity: .55; }
.agent-catalog--website .website-search-query { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); }
.agent-catalog--website .website-search-query .website-bar { width: 60%; }
.agent-catalog--website .website-search-ghost { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.agent-catalog--website .website-search-ghost .website-bar { width: 75%; opacity: .6; }
.agent-catalog--website .website-search-ghost .website-bar:last-child { width: 45%; }
.agent-catalog--website .website-rank { left: 8%; right: 8%; height: 26%; padding: var(--space-4); border-radius: var(--radius-md); }
.agent-catalog--website .website-rank--first { top: 36%; z-index: 3; }
.agent-catalog--website .website-rank--second { top: 51%; left: 12%; right: 12%; opacity: .28; z-index: 2; }
.agent-catalog--website .website-rank--third { top: 66%; left: 16%; right: 16%; opacity: .13; }
.agent-catalog--website .website-search-row { display: flex; align-items: center; gap: var(--space-3); height: 100%; }
.agent-catalog--website .website-search-row > .website-disc { flex: 0 0 15%; width: 15%; box-shadow: none; background: linear-gradient(135deg,var(--website-accent-start),var(--website-accent-end)); }
.agent-catalog--website .website-search-row > span:not(.website-disc) { flex: 1; min-width: 0; }
.agent-catalog--website .website-search-row b { white-space: nowrap; font: inherit; font-weight: var(--fw-medium); }
.agent-catalog--website .website-search-row .website-bar { width: 72%; margin-top: var(--space-2); height: var(--space-1); opacity: .6; }
.agent-catalog--website .website-search-row strong { font-weight: var(--fw-semibold); font-size: var(--type-c1-size); }
.agent-catalog--website .website-answer { top: 25%; left: 15%; width: 70%; height: 44%; padding: var(--space-4); z-index: 3; }
.agent-catalog--website .website-answer-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.agent-catalog--website .website-answer-brand img { width: var(--space-5); height: var(--space-5); object-fit: contain; }
.agent-catalog--website .website-answer-brand .website-bar { width: 54%; height: var(--space-1); }
.agent-catalog--website .website-answer > .website-bar { margin-top: var(--space-2); height: var(--space-1); opacity: .65; }
.agent-catalog--website .website-answer > .website-bar:nth-child(3) { width: 72%; }
.agent-catalog--website .website-answer-citation { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-2xs); background: linear-gradient(110deg,var(--website-accent-start),var(--website-accent-end)); }
.agent-catalog--website .website-answer-citation img { width: var(--space-4); height: var(--space-4); }
.agent-catalog--website .website-answer-citation b { font-size: var(--website-detail-size); font-weight: var(--fw-medium); }
.agent-catalog--website .website-source-links { position: absolute; inset: 22% 9% 3%; background: var(--neutral-300); mask: url('assets/agent-creatives-2/sources.svg') center / 100% 100% no-repeat; }
.agent-catalog--website .website-source-row { position: absolute; left: 18%; right: 18%; bottom: 8%; display: flex; justify-content: space-between; }
.agent-catalog--website .website-source { width: 21%; color: var(--neutral-500); font-size: var(--space-6); }
.agent-catalog--website .website-process { position: absolute; left: 8%; right: 8%; top: 25%; height: 65%; }
.agent-catalog--website .website-return { position: absolute; inset: 0; background: var(--neutral-400); mask: url('assets/agent-creatives-2/loop.svg') center / 100% 100% no-repeat; opacity: .7; }
.agent-catalog--website .website-stage { position: absolute; width: 28%; height: 57%; top: 10%; display: grid; grid-template-rows: 1fr var(--space-5); justify-items: center; align-items: center; gap: var(--space-2); padding: var(--space-3); background: linear-gradient(145deg,var(--white),var(--white-80)); border: var(--stroke-1) solid var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.agent-catalog--website .website-stage:nth-child(2) { left: 0; }
.agent-catalog--website .website-stage:nth-child(3) { left: 36%; }
.agent-catalog--website .website-stage:nth-child(4) { left: 72%; }
.agent-catalog--website .website-stage__icon { width: 70%; max-height: 100%; border-radius: var(--radius-sm); font-size: var(--space-7); background: linear-gradient(140deg,var(--white),var(--website-accent-start)); box-shadow: inset var(--stroke-1) var(--stroke-1) var(--space-2) var(--white); }
.agent-catalog--website .website-stage b { width: 100%; text-align: center; font-size: var(--website-detail-size); font-weight: var(--fw-medium); line-height: var(--space-5); }
.agent-catalog--website .website-process--automation .website-stage__icon { border-radius: var(--radius-full); background: linear-gradient(140deg,var(--website-accent-start),var(--website-accent-end)); }
.agent-catalog--website .website-outreach { position: absolute; inset: 24% 7% 8%; }
.agent-catalog--website .website-outreach-links { position: absolute; inset: 0; background: var(--neutral-400); mask: url('assets/agent-creatives-2/outreach.svg') center / 100% 100% no-repeat; opacity: .75; }
.agent-catalog--website .website-outreach-mail { top: 25%; left: 3%; width: 37%; height: 50%; padding: var(--space-4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); }
.agent-catalog--website .website-outreach-mail > .ph { font-size: var(--space-10); margin-bottom: var(--space-1); }
.agent-catalog--website .website-outreach-mail .website-bar { width: 68%; height: var(--space-1); }
.agent-catalog--website .website-outreach-mail .website-bar:last-child { width: 43%; opacity: .5; }
.agent-catalog--website .website-recipient-row { position: absolute; top: 0; right: 3%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 20%; }
.agent-catalog--website .website-recipient { width: 100%; font-size: var(--space-7); background: linear-gradient(145deg,var(--white),var(--website-accent-start)); }
.agent-catalog--website .website-table-back { top: 26%; left: 17%; right: 10%; bottom: 10%; opacity: .35; }
.agent-catalog--website .website-table { top: 30%; left: 8%; right: 16%; bottom: 14%; padding: var(--space-2) var(--space-4); display: grid; grid-template-rows: repeat(4,1fr); }
.agent-catalog--website .website-table-row { display: grid; grid-template-columns: var(--space-6) 1fr 28%; align-items: center; gap: var(--space-4); border-bottom: var(--stroke-1) solid var(--neutral-100); }
.agent-catalog--website .website-table-row:last-child { border-bottom: none; }
.agent-catalog--website .website-table-row > .website-disc { width: var(--space-5); background: var(--neutral-200); box-shadow: none; }
.agent-catalog--website .website-table-row .website-bar { background: var(--neutral-200); }
.agent-catalog--website .website-table-row .website-bar:last-child { background: linear-gradient(110deg,var(--website-accent-start),var(--website-accent-end)); }
.agent-catalog--website .website-table-row:nth-child(2) .website-bar:nth-child(2), .agent-catalog--website .website-table-row:nth-child(4) .website-bar:nth-child(2) { width: 72%; }
.agent-catalog--website .website-mail { width: 48%; height: 48%; padding: var(--space-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.agent-catalog--website .website-mail--first { top: 27%; left: 8%; opacity: .8; }
.agent-catalog--website .website-mail--second { top: 41%; right: 8%; }
.agent-catalog--website .website-mail-symbol { width: 32%; font-size: var(--space-6); border-radius: var(--radius-xs); background: linear-gradient(135deg,var(--website-accent-start),var(--website-accent-end)); box-shadow: none; }
.agent-catalog--website .website-mail b { font-size: var(--website-detail-size); line-height: var(--website-detail-line); font-weight: var(--fw-medium); }
.agent-catalog--website .website-mail > .website-bar { width: 83%; height: var(--space-1); }
.agent-catalog--website .website-mail > .website-bar:last-child { width: 60%; opacity: .55; }
.agent-catalog--website .website-landing-page { left: 9%; top: 25%; width: 55%; height: 64%; padding: var(--space-4); opacity: .62; }
.agent-catalog--website .website-browser-dots { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); }
.agent-catalog--website .website-browser-dots i { width: var(--space-1); height: var(--space-1); border-radius: var(--radius-full); background: var(--neutral-300); }
.agent-catalog--website .website-page-hero { display: block; height: 39%; background: linear-gradient(145deg,var(--neutral-100),var(--neutral-200)); border-radius: var(--radius-2xs); margin-bottom: var(--space-4); }
.agent-catalog--website .website-landing-page > .website-bar { margin-top: var(--space-2); height: var(--space-1); }
.agent-catalog--website .website-landing-page > .website-bar:last-child { width: 64%; }
.agent-catalog--website .website-analysis { width: 59%; height: 49%; right: 8%; top: 39%; padding: var(--space-5); }
.agent-catalog--website .website-analysis-label { display: block; color: var(--neutral-500); }
.agent-catalog--website .website-analysis-score { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-1); }
.agent-catalog--website .website-analysis-score b { color: var(--neutral-700); font: var(--fw-medium) var(--type-h2-size)/1 var(--font-sans); }
.agent-catalog--website .website-analysis-score small { font-size: var(--website-detail-size); color: var(--neutral-400); }
.agent-catalog--website .website-analysis-bars { display: flex; gap: var(--space-1); height: var(--space-3); margin-top: var(--space-4); }
.agent-catalog--website .website-analysis-bars i { flex: 1; border-radius: var(--radius-2xs); background: var(--neutral-200); }
.agent-catalog--website .website-analysis-bars i:nth-child(-n+6) { background: linear-gradient(110deg,var(--website-accent-start),var(--website-accent-mid)); }
/* Match the neutral skeleton weight of the surrounding creatives. */
.agent-catalog--website .website-palette:not(.website-palette--gradient) [data-creative="landing"],
.agent-catalog--website .website-palette:not(.website-palette--gradient) [data-creative="audit"] {
  --website-accent-start: var(--neutral-300);
  --website-accent-mid: var(--neutral-300);
  --website-accent-end: var(--neutral-300);
}
.agent-catalog--website .website-audit-ring { position: absolute; top: 28%; left: 7%; width: 46%; aspect-ratio: 1; border-radius: var(--radius-full); background: var(--white); box-shadow: var(--shadow-1); }
.agent-catalog--website .website-audit-ring::before { content: ''; position: absolute; inset: 12%; border: var(--space-3) solid var(--neutral-100); border-radius: var(--radius-full); }
.agent-catalog--website .website-audit-progress { position: absolute; inset: 3%; background: linear-gradient(140deg,var(--website-accent-start),var(--website-accent-mid),var(--website-accent-end)); mask: url('assets/agent-creatives-2/donut.svg') center / 100% 100% no-repeat; }
.agent-catalog--website .website-audit-ring > span:last-child { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-1); }
.agent-catalog--website .website-audit-ring b { font: var(--fw-medium) var(--type-h2-size)/1 var(--font-sans); }
.agent-catalog--website .website-audit-ring small { font-size: var(--website-detail-size); color: var(--neutral-400); }
.agent-catalog--website .website-audit-list { top: 38%; right: 7%; width: 43%; height: 42%; padding: var(--space-4); display: flex; flex-direction: column; justify-content: space-around; }
.agent-catalog--website .website-audit-list > span { display: flex; align-items: center; gap: var(--space-2); }
.agent-catalog--website .website-audit-list .ph { color: var(--neutral-400); font-size: var(--website-detail-size); }
.agent-catalog--website .website-audit-list b { font-size: var(--website-detail-size); font-weight: var(--fw-regular); white-space: nowrap; }
.agent-catalog--website .website-customer-cluster { position: absolute; top: 24%; left: 14%; width: 43%; display: flex; }
.agent-catalog--website .website-customer { width: 37%; font-size: var(--space-6); margin-right: calc(-1 * var(--space-3)); color: var(--neutral-400); }
.agent-catalog--website .website-customer:nth-child(1) { opacity: .5; }
.agent-catalog--website .website-customer:nth-child(2) { opacity: .75; }
.agent-catalog--website .website-lifetime { top: 42%; bottom: 11%; left: 9%; right: 9%; padding: var(--space-4); overflow: hidden; }
.agent-catalog--website .website-lifetime-label { display: block; color: var(--neutral-500); }
.agent-catalog--website .website-lifetime > b { position: relative; z-index: 2; display: block; margin-top: var(--space-2); font: var(--fw-medium) var(--type-h3-size)/1 var(--font-sans); color: var(--neutral-700); }
.agent-catalog--website .website-lifetime-chart { position: absolute; right: 0; width: 63%; bottom: 0; height: 76%; background: linear-gradient(150deg,var(--website-accent-start),var(--website-accent-mid),var(--website-accent-end)); mask: url('assets/agent-creatives-2/value-area.svg') center / 100% 100% no-repeat; opacity: .65; }
.agent-catalog--website .website-map { top: 26%; bottom: 10%; left: 10%; right: 10%; }
.agent-catalog--website .website-map-grid { position: absolute; inset: var(--space-4); background-image: linear-gradient(to right,transparent calc(50% - var(--stroke-hairline)),var(--neutral-400) 50%,transparent calc(50% + var(--stroke-hairline))),linear-gradient(to bottom,transparent calc(50% - var(--stroke-hairline)),var(--neutral-400) 50%,transparent calc(50% + var(--stroke-hairline))); }
.agent-catalog--website .website-map-label { position: absolute; color: var(--neutral-600); font-size: var(--website-detail-size); font-weight: var(--fw-medium); background: var(--white); padding-inline: var(--space-1); }
.agent-catalog--website .website-map-label--y { left: 50%; top: var(--space-2); transform: translateX(-50%); }
.agent-catalog--website .website-map-label--x { right: var(--space-2); top: 50%; transform: translateY(-50%); }
.agent-catalog--website .website-competitor { position: absolute; width: 10%; background: var(--neutral-400); border: var(--stroke-1) solid var(--white); box-shadow: var(--shadow-1); }
.agent-catalog--website .website-competitor--1 { top: 24%; left: 22%; }
.agent-catalog--website .website-competitor--2 { top: 61%; left: 16%; }
.agent-catalog--website .website-competitor--3 { top: 71%; left: 59%; }
.agent-catalog--website .website-competitor--4 { top: 51%; left: 36%; width: 8%; opacity: .85; }
.agent-catalog--website .website-map-own { position: absolute; right: 20%; top: 23%; width: 18%; background: linear-gradient(145deg,var(--website-accent-start),var(--website-accent-end)); }
.agent-catalog--website .website-comments { position: absolute; top: 27%; left: 9%; right: 9%; height: 34%; }
.agent-catalog--website .website-comment { width: 40%; height: 56%; padding: var(--space-3); border-radius: var(--radius-sm); display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); }
.agent-catalog--website .website-comment::after { content: ''; position: absolute; bottom: calc(-1 * var(--space-2)); left: var(--space-4); width: var(--space-4); height: var(--space-4); background: var(--white); transform: skewY(-35deg); border-bottom-left-radius: var(--radius-2xs); }
.agent-catalog--website .website-comment:nth-child(1) { left: 0; top: 8%; opacity: .6; }
.agent-catalog--website .website-comment:nth-child(2) { right: 0; top: 0; }
.agent-catalog--website .website-comment:nth-child(3) { left: 30%; top: 53%; width: 34%; opacity: .45; }
.agent-catalog--website .website-comment .website-bar { height: var(--space-1); }
.agent-catalog--website .website-comment .website-bar:last-child { width: 65%; }
.agent-catalog--website .website-listening-gauge { position: absolute; bottom: 8%; left: 24%; right: 24%; height: 31%; }
.agent-catalog--website .website-gauge-track, .agent-catalog--website .website-gauge-color { position: absolute; inset: 0; mask: url('assets/agent-creatives-2/gauge.svg') center / 100% 100% no-repeat; }
.agent-catalog--website .website-gauge-track { background: var(--neutral-200); }
.agent-catalog--website .website-gauge-color { background: linear-gradient(100deg,var(--website-accent-start),var(--website-accent-mid),var(--website-accent-end)); opacity: .85; }
.agent-catalog--website .website-gauge-needle { position: absolute; left: 50%; bottom: 3%; width: 32%; height: var(--space-1); border-radius: var(--radius-full); background: var(--neutral-500); transform-origin: left center; transform: rotate(-40deg); }
.agent-catalog--website .website-gauge-needle::before { content: ''; position: absolute; left: calc(-1 * var(--space-2)); top: calc(-1 * var(--space-1)); width: var(--space-3); height: var(--space-3); border-radius: var(--radius-full); background: var(--neutral-500); border: var(--stroke-1) solid var(--white); }