/* Post assets. Fixed design canvases that scale with their slot through container units.
   They keep their own colours in both site themes, like an uploaded image would. */
.asset-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
}
.asset {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-feature-settings: normal;
  letter-spacing: normal;
  text-align: left;
}

/* Claude reply, light mode, cropped. Canvas 1200 x 900. */
.a-claude {
  --u: calc(100cqw / 1200);
  background: #faf9f5;
  color: #141413;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
.cl-user { display: flex; justify-content: flex-end; padding: 0 calc(var(--u) * 80); margin-top: calc(var(--u) * -26); }
.cl-bubble {
  max-width: 72%;
  padding: calc(var(--u) * 22) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 26);
  background: #f0eee6;
  font-size: calc(var(--u) * 29);
  line-height: 1.45;
}
.cl-reply {
  padding: calc(var(--u) * 46) calc(var(--u) * 80) 0;
  font-family: "Tiempos Text", "Iowan Old Style", Charter, "Palatino Linotype", Georgia, ui-serif, serif;
  font-size: calc(var(--u) * 29);
  line-height: 1.5;
}
.cl-table { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 27); }
.cl-table th, .cl-table td {
  padding: calc(var(--u) * 13) calc(var(--u) * 20);
  border-bottom: calc(var(--u) * 1.5) solid #e3e0d6;
  text-align: left;
  font-weight: 400;
}
.cl-table thead th { font-weight: 600; border-bottom-width: calc(var(--u) * 2.5); border-bottom-color: #cfcbbf; }
.cl-table tbody th { font-weight: 500; color: #3d3d3a; }
.cl-table td { font-variant-numeric: tabular-nums; }
.cl-note { margin: calc(var(--u) * 30) 0 0; }
.cl-tools { display: flex; align-items: center; gap: calc(var(--u) * 26); padding: calc(var(--u) * 30) calc(var(--u) * 80) 0; color: #73726c; }
.cl-spark svg { display: block; width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.cl-icons { display: flex; gap: calc(var(--u) * 22); }
.cl-icons svg { display: block; width: calc(var(--u) * 30); height: calc(var(--u) * 30); }

/* Ruben's single image guide. Canvas 1080 wide, any height. */
.a-guide {
  --u: calc(100cqw / 1080);
  background: #fffaf0;
  color: #111;
  font-family: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, sans-serif;
}
.gd-head { padding: calc(var(--u) * 72) calc(var(--u) * 72) calc(var(--u) * 30); }
.gd-title { font-size: calc(var(--u) * 78); line-height: 1.0; font-weight: 800; letter-spacing: -0.025em; max-width: 13ch; }
.gd-sub { margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 36); font-weight: 500; color: #555; }
.gd-steps { list-style: none; margin: 0; padding: 0 calc(var(--u) * 72); display: grid; gap: calc(var(--u) * 22); }
.gd-step {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 26);
  padding: calc(var(--u) * 18) calc(var(--u) * 26);
  border: calc(var(--u) * 4) solid #111;
  border-radius: calc(var(--u) * 22);
  background: #fff;
  box-shadow: calc(var(--u) * 7) calc(var(--u) * 7) 0 #111;
}
.gd-num {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 70);
  height: calc(var(--u) * 70);
  border: calc(var(--u) * 4) solid #111;
  border-radius: 50%;
  background: var(--c);
  font-size: calc(var(--u) * 36);
  font-weight: 800;
}
.gd-text { font-size: calc(var(--u) * 40); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.gd-foot {
  position: absolute;
  left: calc(var(--u) * 72);
  right: calc(var(--u) * 72);
  bottom: calc(var(--u) * 52);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: calc(var(--u) * 30);
  font-weight: 700;
}
.gd-name { font-size: calc(var(--u) * 24); font-weight: 500; color: #777; }

/* Dashboard export, unused since the Nov 4 LinkedIn repick. Canvas 1200 x 627. */
.a-dash {
  --u: calc(100cqw / 1200);
  --acc: #f2542d;
  background: #fff;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.db-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 24);
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 24);
  background: #f6f7f9;
  border-bottom: calc(var(--u) * 1.5) solid #e6e8ec;
  font-size: calc(var(--u) * 19);
  color: #6b7280;
}
.db-dots { display: flex; gap: calc(var(--u) * 9); }
.db-dots i { width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: 50%; background: #d9dce2; }
.db-crumb span { margin: 0 calc(var(--u) * 10); color: #c2c6ce; }
.db-export { margin-left: auto; padding: calc(var(--u) * 6) calc(var(--u) * 16); border: calc(var(--u) * 1.5) solid #d9dce2; border-radius: calc(var(--u) * 8); background: #fff; color: #374151; }
.db-head { display: flex; justify-content: space-between; align-items: flex-end; padding: calc(var(--u) * 26) calc(var(--u) * 40) calc(var(--u) * 16); }
.db-title { font-size: calc(var(--u) * 30); font-weight: 650; letter-spacing: -0.01em; }
.db-range { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 18); color: #6b7280; }
.db-legend { display: flex; gap: calc(var(--u) * 20); font-size: calc(var(--u) * 18); color: #4b5563; }
.db-legend .k::before { content: ""; display: inline-block; width: calc(var(--u) * 14); height: calc(var(--u) * 14); margin-right: calc(var(--u) * 8); border-radius: calc(var(--u) * 3); vertical-align: -0.1em; }
.db-legend .k.b::before { background: #d1d5db; }
.db-legend .k.a::before { background: var(--acc); }
.db-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 18); padding: 0 calc(var(--u) * 40); }
.db-card { padding: calc(var(--u) * 20) calc(var(--u) * 22) calc(var(--u) * 16); border: calc(var(--u) * 1.5) solid #e5e7eb; border-radius: calc(var(--u) * 14); }
.db-label { height: calc(var(--u) * 50); font-size: calc(var(--u) * 19); line-height: 1.3; font-weight: 550; color: #374151; }
.db-chart {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(var(--u) * 40);
  height: calc(var(--u) * 268);
  border-bottom: calc(var(--u) * 1.5) solid #e5e7eb;
  background: repeating-linear-gradient(to top, transparent 0, transparent calc(var(--u) * 66), #f1f2f4 calc(var(--u) * 66), #f1f2f4 calc(var(--u) * 67.5));
}
.db-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; width: calc(var(--u) * 92); }
.db-val { min-height: calc(var(--u) * 34); font-size: calc(var(--u) * 24); font-weight: 650; color: #6b7280; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-val.a { color: var(--acc); font-size: calc(var(--u) * 24); }
.db-val.long { width: calc(var(--u) * 130); white-space: normal; font-size: calc(var(--u) * 20); line-height: 1.15; padding-bottom: calc(var(--u) * 6); }
.db-barv { width: 100%; max-height: calc(100% - var(--u) * 40); border-radius: calc(var(--u) * 7) calc(var(--u) * 7) 0 0; }
.db-barv.b { background: #d1d5db; }
.db-barv.a { background: var(--acc); }
.db-axis { display: flex; justify-content: center; gap: calc(var(--u) * 40); margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 16); color: #9ca3af; }
.db-axis span { width: calc(var(--u) * 92); text-align: center; }

/* How it works diagram, unused since the Nov 5 LinkedIn swap. Canvas 1080 x 1080. */
.a-pipe {
  --u: calc(100cqw / 1080);
  background: #fff;
  color: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-image: radial-gradient(circle, #e8ebf0 calc(var(--u) * 1.6), transparent calc(var(--u) * 2));
  background-size: calc(var(--u) * 36) calc(var(--u) * 36);
}
.pl-head { display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 52) calc(var(--u) * 64) calc(var(--u) * 28); text-align: center; }
.pl-kicker { font-size: calc(var(--u) * 21); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #64748b; }
.pl-title { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 60); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.pl-sub { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 25); color: #475569; }
.pl-stages { display: flex; flex-direction: column; align-items: stretch; padding: 0 calc(var(--u) * 96); }
.pl-stage {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 22);
  padding: calc(var(--u) * 16) calc(var(--u) * 26);
  border: calc(var(--u) * 2.5) solid var(--st-ac);
  border-radius: calc(var(--u) * 18);
  background: var(--st-bg);
  box-shadow: 0 calc(var(--u) * 4) 0 color-mix(in srgb, var(--st-ac) 30%, transparent);
}
.pl-num {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 50);
  border-radius: 50%;
  background: var(--st-ac);
  color: #fff;
  font-size: calc(var(--u) * 25);
  font-weight: 800;
}
.pl-body { display: flex; flex-direction: column; min-width: 0; }
.pl-name { font-size: calc(var(--u) * 28); line-height: 1.2; font-weight: 750; }
.pl-line { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 21); line-height: 1.3; color: #334155; }
.pl-arrow { display: grid; place-items: center; height: calc(var(--u) * 30); }
.pl-arrow svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.pl-name-tag { position: absolute; right: calc(var(--u) * 40); bottom: calc(var(--u) * 30); font-size: calc(var(--u) * 20); font-weight: 600; color: #94a3b8; }

/* Aakash Gupta's stat chart, drawn in his style: cream ground, pictogram bars, his blue for highlighted rows.
   Instrument Sans stands in for his geometric sans. Canvas 1080 x 1350. */
.a-stat {
  --u: calc(100cqw / 1080);
  --blue: #2b59a6;
  --fig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Ccircle cx='5' cy='3' r='2.9'/%3E%3Crect x='0.6' y='6.6' width='8.8' height='10.4' rx='2.4'/%3E%3C/svg%3E");
  padding: calc(var(--u) * 58) calc(var(--u) * 58) 0;
  background: #f4f2ea;
  color: #15130f;
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}
.st-title { max-width: 15ch; font-size: calc(var(--u) * 68); line-height: 1.04; font-weight: 600; letter-spacing: -0.022em; }
.st-sub { margin: calc(var(--u) * 30) 0 0; max-width: calc(var(--u) * 950); font-size: calc(var(--u) * 23); line-height: 1.42; font-weight: 450; color: #6d6960; }
.st-sub b { font-weight: 600; color: var(--blue); }
.st-rows { margin-top: calc(var(--u) * 40); }
.st-row { display: flex; align-items: center; height: calc(var(--u) * 92); }
.st-label { flex: none; width: calc(var(--u) * 374); font-size: calc(var(--u) * 27); font-weight: 600; letter-spacing: -0.005em; }
.st-bar { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.st-bar i {
  display: block;
  width: calc(var(--u) * 14.5 * var(--n));
  height: calc(var(--u) * 19.5);
  background: #b6ac9f;
  -webkit-mask: var(--fig) left center / calc(var(--u) * 14.5) 100% repeat-x;
  mask: var(--fig) left center / calc(var(--u) * 14.5) 100% repeat-x;
}
.st-num { font-size: calc(var(--u) * 30); font-weight: 650; color: #7a6e61; font-variant-numeric: tabular-nums; }
.st-row.hi .st-bar i { background: var(--blue); }
.st-row.hi .st-num { color: var(--blue); }
.st-foot { margin: calc(var(--u) * 34) 0 0; max-width: calc(var(--u) * 960); font-size: calc(var(--u) * 18.5); line-height: 1.5; color: #6d6960; }
.st-base {
  position: absolute;
  left: calc(var(--u) * 58);
  right: calc(var(--u) * 70);
  bottom: calc(var(--u) * 46);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: calc(var(--u) * 19.5);
  color: #6d6960;
}
.st-base b { font-weight: 650; color: #2a2722; }