#cases { --paper:#f2efe7; --ink:#161616; --orange:#f24b2b; --lime:#dfff62; --cream:#fffdf8; --soft:#e6e1d5; --line:rgba(22,22,22,.24); --muted:#6d6961; --site-min-text:14px; --site-display:"Apple SD Gothic Neo"; --site-body:"Apple SD Gothic Neo"; --font-geist-mono:ui-monospace; }
#cases .section-kicker{display:flex;justify-content:space-between;gap:20px;padding-bottom:21px;border-bottom:1px solid currentColor;color:var(--orange);font-size:14px;font-weight:850;letter-spacing:.14em}#cases .section-kicker span:last-child{color:var(--muted)}#cases .mini-label{color:var(--orange);font-family:ui-monospace,monospace;font-size:14px;font-weight:800;letter-spacing:.13em}
#cases {
  padding: 54px clamp(22px, 4vw, 64px) clamp(82px, 9vw, 140px);
  border-top: 1px solid var(--ink);
  background: var(--soft);
}
#cases .use-cases-heading {
  margin: clamp(58px, 7vw, 104px) 0 clamp(50px, 6vw, 86px);
}
#cases .use-cases-heading h2 {
  max-width: 980px;
  margin: 20px 0 0;
  font-family: var(--site-display), sans-serif;
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 880;
  letter-spacing: -0.07em;
  line-height: 1.04;
}
#cases .use-case-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
#cases .use-case-card {
  display: flex;
  grid-column: span 4;
  min-width: 0;
  flex-direction: column;
  padding: clamp(22px, 2.3vw, 34px);
  border: 1px solid var(--ink);
  background: var(--cream);
}
#cases .use-case-card-featured {
  grid-column: span 6;
}
#cases .use-case-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--orange);
  font-family: var(--font-geist-mono), monospace;
  font-size: var(--site-min-text);
  font-weight: 850;
  letter-spacing: 0.08em;
}
#cases .use-case-meta > div {
  display: flex;
  align-items: center;
  gap: 11px;
}
#cases .use-case-meta small {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-family: var(--site-body), sans-serif;
  font-size: var(--site-min-text);
  font-weight: 750;
  letter-spacing: -0.02em;
}
#cases .use-case-visual {
  position: relative;
  height: 240px;
  margin: 28px 0 30px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--paper);
}
#cases .use-case-card-featured .use-case-visual {
  height: 320px;
}
#cases .use-case-card h3 {
  min-height: 2.4em;
  margin: 0 0 18px;
  font-size: clamp(28px, 2.8vw, 44px);
  font-weight: 860;
  letter-spacing: -0.06em;
  line-height: 1.2;
}
#cases .use-case-meta + h3 {
  margin-top: 28px;
}
#cases .use-case-card h3 + .use-case-visual {
  margin-top: 8px;
}
#cases .use-case-card p {
  max-width: 620px;
  margin: auto 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.65;
}
#cases .mock-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 15px;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-geist-mono), monospace;
  font-size: var(--site-min-text);
  font-weight: 800;
}
#cases .dashboard-mock {
  padding: 0 18px 18px;
  background: var(--ink);
  color: var(--cream);
}
#cases .dashboard-mock .mock-window-head {
  margin: 0 -18px 16px;
  border-color: rgba(255, 253, 248, 0.28);
  color: var(--lime);
}
#cases .dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
#cases .dashboard-kpis > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(255, 253, 248, 0.24);
}
#cases .dashboard-kpis span,
#cases .dashboard-kpis small {
  overflow: hidden;
  color: rgba(255, 253, 248, 0.62);
  font-size: var(--site-min-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cases .dashboard-kpis strong {
  font-size: clamp(20px, 2.2vw, 34px);
  letter-spacing: -0.04em;
}
#cases .dashboard-kpis small {
  color: var(--lime);
}
#cases .dashboard-chart {
  position: relative;
  min-height: 120px;
  margin-top: 14px;
  padding: 12px 12px 28px;
  border: 1px solid rgba(255, 253, 248, 0.24);
}
#cases .chart-bars {
  display: flex;
  align-items: end;
  justify-content: space-around;
  height: 76px;
  gap: 10px;
}
#cases .chart-bars i {
  width: 10%;
  background: var(--orange);
}
#cases .chart-bars .bar-1 {
  height: 38%;
}
#cases .chart-bars .bar-2 {
  height: 55%;
}
#cases .chart-bars .bar-3 {
  height: 48%;
}
#cases .chart-bars .bar-4 {
  height: 72%;
}
#cases .chart-bars .bar-5 {
  height: 64%;
}
#cases .chart-bars .bar-6 {
  height: 88%;
  background: var(--lime);
}
#cases .chart-axis {
  position: absolute;
  right: 10px;
  bottom: 7px;
  left: 10px;
  display: flex;
  justify-content: space-around;
  color: rgba(255, 253, 248, 0.52);
  font-size: var(--site-min-text);
}
#cases .article-mock {
  display: grid;
  grid-template-columns: minmax(160px, 0.72fr) 1.28fr;
  background: var(--ink);
  color: var(--cream);
}
#cases .article-files {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 18px;
  border-right: 1px solid rgba(255, 253, 248, 0.25);
  font-family: var(--font-geist-mono), monospace;
  font-size: var(--site-min-text);
}
#cases .article-files strong {
  margin-top: 4px;
  color: var(--orange);
}
#cases .article-files span {
  overflow: hidden;
  color: rgba(255, 253, 248, 0.7);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cases .article-editor {
  min-width: 0;
  padding: 0 18px 18px;
  background: var(--paper);
  color: var(--ink);
}
#cases .article-editor .mock-window-head {
  margin: 0 -18px 22px;
  color: var(--orange);
}
#cases .article-editor > strong {
  display: block;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -0.04em;
}
#cases .article-editor p {
  margin: 14px 0 20px;
  color: var(--muted);
  font-size: var(--site-min-text);
  line-height: 1.6;
}
#cases .editor-lines {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#cases .editor-lines i {
  width: 100%;
  height: 5px;
  background: var(--line);
}
#cases .editor-lines i:nth-child(2) {
  width: 88%;
}
#cases .editor-lines i:nth-child(3) {
  width: 94%;
}
#cases .editor-lines i:nth-child(4) {
  width: 63%;
}
#cases .survey-mock {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 20px;
  padding: 22px;
  background: var(--paper);
}
#cases .survey-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
#cases .survey-donut {
  display: grid;
  width: 104px;
  aspect-ratio: 1;
  place-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--paper) 54%, transparent 56%),
    conic-gradient(var(--orange) 0 87%, var(--soft) 87% 100%);
  text-align: center;
}
#cases .survey-donut strong,
#cases .survey-score > div:last-child strong {
  display: block;
  font-size: 25px;
  letter-spacing: -0.04em;
}
#cases .survey-donut span,
#cases .survey-score > div:last-child span {
  display: block;
  color: var(--muted);
  font-size: var(--site-min-text);
}
#cases .survey-score > div:last-child {
  text-align: center;
}
#cases .survey-bars {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#cases .survey-bars > div {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 10px;
  font-size: var(--site-min-text);
}
#cases .survey-bars i {
  height: 12px;
  background: var(--soft);
}
#cases .survey-bars b {
  display: block;
  height: 100%;
  background: var(--orange);
}
#cases .survey-bar-1 {
  width: 83%;
}
#cases .survey-bar-2 {
  width: 91%;
}
#cases .survey-bar-3 {
  width: 78%;
}
#cases .admin-mock {
  padding: 18px;
  background: var(--paper);
}
#cases .admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}
#cases .admin-toolbar strong {
  font-size: 18px;
}
#cases .admin-toolbar > div {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--site-min-text);
}
#cases .admin-table {
  display: flex;
  flex-direction: column;
}
#cases .admin-row {
  display: grid;
  grid-template-columns: 0.8fr 1fr 0.5fr;
  align-items: center;
  gap: 8px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: var(--site-min-text);
}
#cases .admin-row-head {
  color: var(--muted);
  font-weight: 750;
}
#cases .admin-row b {
  width: max-content;
  padding: 5px 8px;
  border: 1px solid var(--ink);
  background: var(--lime);
  font-size: var(--site-min-text);
}
#cases .reels-mock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 18px 12px 44px;
  background: var(--ink);
}
#cases .reel-phone {
  position: relative;
  display: flex;
  width: 29%;
  height: 154px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 248, 0.48);
  border-radius: 16px;
  color: var(--cream);
}
#cases .reel-phone::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(155deg, transparent 45%, rgba(22, 22, 22, 0.72)),
    var(--orange);
  content: "";
}
#cases .reel-phone-2::before {
  background:
    linear-gradient(155deg, transparent 45%, rgba(22, 22, 22, 0.72)),
    #5d62d5;
}
#cases .reel-phone-3::before {
  background:
    linear-gradient(155deg, transparent 45%, rgba(22, 22, 22, 0.72)),
    #79942c;
}
#cases .reel-phone svg,
#cases .reel-phone span {
  position: relative;
  z-index: 1;
}
#cases .reel-phone span {
  max-width: 85%;
  font-size: var(--site-min-text);
  font-weight: 800;
  text-align: center;
}
#cases .reel-timeline {
  position: absolute;
  right: 14px;
  bottom: 13px;
  left: 14px;
  display: grid;
  grid-template-columns: 0.7fr 1.4fr 0.8fr 1.1fr 0.5fr;
  gap: 4px;
}
#cases .reel-timeline i {
  height: 10px;
  background: var(--orange);
}
#cases .reel-timeline i:nth-child(even) {
  background: var(--lime);
}
#cases .transformation-mock {
  display: grid;
  height: 620px;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(230px, 0.9fr) 72px minmax(270px, 1.1fr);
  align-items: stretch;
  overflow: visible;
  border: 0;
  background: transparent;
}
#cases .use-case-card-featured .transformation-mock,
#cases .use-case-card:last-child .transformation-mock {
  height: 620px;
}
#cases .transform-panel {
  position: relative;
  min-width: 0;
  padding: 52px 18px 18px;
  overflow: hidden;
  border: 1px solid #8f969f;
}
#cases .transform-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-height: 38px;
  align-items: center;
  padding: 0 13px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.82);
  color: #374151;
  font-family: var(--font-geist-mono), monospace;
  font-size: var(--site-min-text);
  font-weight: 800;
  letter-spacing: 0.02em;
}
#cases .transform-arrow {
  display: flex;
  z-index: 2;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: #334155;
}
#cases .transformation-mock .transform-arrow {
  background: var(--cream);
}
#cases .transform-arrow span {
  padding: 6px 10px;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  background: #f8fafc;
  font-size: var(--site-min-text);
  font-weight: 800;
  white-space: nowrap;
}
#cases .transform-arrow svg {
  transform: rotate(90deg);
}
#cases .raw-sheet,
#cases .raw-admin {
  height: 100%;
  padding: 12px;
  border: 1px solid #aeb8b2;
  background: #f7fbf8;
  color: #27332c;
  box-shadow: 0 8px 24px rgba(37, 83, 58, 0.08);
}
#cases .raw-tabs {
  display: flex;
  gap: 4px;
  margin: -4px -4px 10px;
}
#cases .raw-tabs b {
  padding: 5px 9px;
  border: 1px solid #b8c8bd;
  background: #e3efe7;
  font-size: var(--site-min-text);
}
#cases .raw-tabs b:first-child {
  background: #217346;
  color: #fff;
}
#cases .raw-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.85fr 0.7fr;
  border-top: 1px solid #c4cec7;
  border-left: 1px solid #c4cec7;
}
#cases .raw-grid > * {
  min-width: 0;
  padding: 6px 7px;
  overflow: hidden;
  border-right: 1px solid #c4cec7;
  border-bottom: 1px solid #c4cec7;
  font-size: var(--site-min-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cases .raw-grid b {
  background: #e7ece9;
}
#cases .raw-alert {
  background: #fee2e2;
  color: #b91c1c;
}
#cases .raw-sheet small,
#cases .raw-admin small,
#cases .article-files small {
  display: block;
  margin-top: 9px;
  color: #64748b;
  font-size: var(--site-min-text);
  line-height: 1.35;
}
#cases .dashboard-transform .transform-before {
  background: #dce7df;
}
#cases .dashboard-transform .dashboard-mock {
  padding: 52px 15px 15px;
  background: #111827;
  color: #eff6ff;
}
#cases .dashboard-transform .dashboard-mock .transform-label {
  background: #1d4ed8;
  color: #fff;
}
#cases .dashboard-transform .dashboard-kpis > div {
  border-color: rgba(191, 219, 254, 0.24);
  background: rgba(255, 255, 255, 0.04);
}
#cases .dashboard-transform .dashboard-kpis small,
#cases .dashboard-transform .chart-bars .bar-6 {
  color: #67e8f9;
}
#cases .dashboard-transform .chart-bars i {
  background: #38bdf8;
}
#cases .dashboard-transform .chart-bars .bar-6 {
  background: #fbbf24;
}
#cases .article-transform {
  background: #e8edf5;
}
#cases .article-transform .article-files {
  display: block;
  padding: 52px 14px 14px;
  border-right: 0;
  background: #e9edf2;
  color: #1f2937;
}
#cases .article-transform .article-files .transform-label {
  background: #334155;
  color: #fff;
}
#cases .explorer-window {
  height: 100%;
  overflow: hidden;
  border: 1px solid #aeb5bf;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
}
#cases .explorer-titlebar {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: #f7f8fa;
  color: #374151;
  font-family: "Segoe UI", var(--site-body), sans-serif;
  font-size: var(--site-min-text);
}
#cases .explorer-titlebar svg {
  color: #f4b400;
}
#cases .explorer-titlebar > div {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
#cases .explorer-titlebar i {
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid #687281;
}
#cases .explorer-titlebar i:first-child {
  height: 1px;
  border: 0;
  background: #687281;
}
#cases .explorer-titlebar i:last-child {
  border: 0;
}
#cases .explorer-titlebar i:last-child::before,
#cases .explorer-titlebar i:last-child::after {
  position: absolute;
  width: 11px;
  height: 1px;
  background: #687281;
  content: "";
  transform: rotate(45deg);
}
#cases .explorer-titlebar i:last-child::after {
  transform: rotate(-45deg);
}
#cases .explorer-toolbar {
  display: flex;
  height: 38px;
  align-items: center;
  gap: 13px;
  padding: 0 10px;
  border-top: 1px solid #e2e5e9;
  border-bottom: 1px solid #d6dbe1;
  background: #fbfcfd;
  color: #5b6470;
}
#cases .explorer-toolbar > span {
  padding: 0;
  border: 0;
  background: transparent;
  color: #5b6470;
  font-size: 19px;
}
#cases .explorer-toolbar strong {
  min-width: 0;
  flex: 1;
  padding: 5px 10px;
  overflow: hidden;
  border: 1px solid #c9ced6;
  border-radius: 3px;
  background: #fff;
  color: #374151;
  font-family: "Segoe UI", var(--site-body), sans-serif;
  font-size: var(--site-min-text);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cases .explorer-table {
  padding: 6px 8px 0;
}
#cases .explorer-row {
  display: grid;
  min-height: 30px;
  grid-template-columns: minmax(0, 1.65fr) minmax(74px, 0.75fr) 54px;
  align-items: center;
  border-bottom: 1px solid #edf0f3;
  color: #293241;
  font-family: "Segoe UI", var(--site-body), sans-serif;
  font-size: var(--site-min-text);
}
#cases .explorer-row > span {
  min-width: 0;
  padding: 0 7px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cases .explorer-row > span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}
#cases .explorer-row svg {
  flex: 0 0 auto;
  color: #2563eb;
}
#cases .explorer-row:last-child svg {
  color: #eab308;
}
#cases .explorer-head {
  min-height: 26px;
  border-bottom-color: #d8dde4;
  color: #697386;
}
#cases .explorer-status {
  padding: 6px 12px;
  color: #6b7280;
  font-family: "Segoe UI", var(--site-body), sans-serif;
  font-size: var(--site-min-text);
}
#cases .article-transform .article-editor {
  padding: 58px 18px 18px;
  background: #fff;
  color: #111827;
}
#cases .article-transform .article-editor .transform-label {
  background: #2563eb;
  color: #fff;
}
#cases .article-transform .article-editor > strong {
  color: #111827;
}
#cases .article-transform .editor-lines i {
  background: #d6deea;
}
#cases .survey-transform {
  grid-template-columns: 1fr;
  background: #eef2ef;
}
#cases .survey-transform .transform-before {
  background: #e7efe9;
}
#cases .raw-survey {
  border: 1px solid #aebbb2;
  background: #fff;
  box-shadow: 0 8px 22px rgba(34, 92, 58, 0.1);
}
#cases .raw-survey > div {
  display: grid;
  grid-template-columns: 0.55fr 0.75fr 1.7fr;
}
#cases .raw-survey span,
#cases .raw-survey b {
  min-width: 0;
  padding: 7px 6px;
  overflow: hidden;
  border-right: 1px solid #d4ddd7;
  border-bottom: 1px solid #d4ddd7;
  font-size: var(--site-min-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cases .raw-survey b {
  background: #dce9e0;
  color: #185c37;
}
#cases .survey-transform .survey-mock {
  grid-template-columns: 0.8fr 1.2fr;
  padding: 52px 14px 14px;
  background: #faf9ff;
}
#cases .survey-transform .survey-mock .transform-label {
  background: #6d28d9;
  color: #fff;
}
#cases .survey-transform .survey-donut {
  width: 86px;
  background:
    radial-gradient(circle, #faf9ff 54%, transparent 56%),
    conic-gradient(#7c3aed 0 87%, #ede9fe 87% 100%);
}
#cases .survey-transform .survey-bars b {
  background: #8b5cf6;
}
#cases .admin-transform {
  grid-template-columns: 1fr;
  background: #e7ece9;
}
#cases .admin-transform .transform-before {
  background: #dfe9e2;
}
#cases .admin-transform .raw-admin {
  background: #f8fcf9;
  color: #27332c;
}
#cases .admin-transform .transform-before .transform-label {
  background: #217346;
  color: #fff;
}
#cases .departure-email {
  padding: 52px 14px 14px;
  background: #edf3f9;
  color: #1f2937;
}
#cases .departure-email .transform-label {
  background: #1264a3;
  color: #fff;
}
#cases .email-window {
  display: grid;
  height: 100%;
  grid-template-columns: 46px 1fr;
  overflow: hidden;
  border: 1px solid #aab5c2;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(30, 64, 100, 0.12);
}
#cases .email-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  padding-top: 16px;
  background: #0f6cbd;
  color: #fff;
}
#cases .email-sidebar i {
  width: 17px;
  height: 2px;
  background: rgba(255, 255, 255, 0.62);
}
#cases .email-content {
  min-width: 0;
  padding: 12px 14px;
}
#cases .email-meta {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 4px 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dce3ea;
  font-size: var(--site-min-text);
}
#cases .email-meta span {
  color: #6b7280;
}
#cases .email-meta b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cases .email-content > strong {
  display: block;
  margin: 10px 0 4px;
  font-size: 17px;
  letter-spacing: -0.03em;
}
#cases .email-content > p {
  margin: 0 0 8px;
  color: #64748b;
  font-size: var(--site-min-text);
  line-height: 1.4;
}
#cases .departure-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
#cases .departure-list > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px;
  border-left: 3px solid #0f6cbd;
  background: #edf6fc;
}
#cases .departure-list b,
#cases .departure-list span,
#cases .email-content small {
  font-size: var(--site-min-text);
}
#cases .departure-list span,
#cases .email-content small {
  color: #64748b;
}
#cases .email-content small {
  display: block;
  margin-top: 7px;
}
#cases .reels-transform {
  grid-template-columns: 1fr;
  background: #292a33;
}
#cases .reels-transform .transform-before {
  background: #20212a;
  color: #f8fafc;
}
#cases .reels-transform .transform-before .transform-label {
  background: #343640;
  color: #fff;
}
#cases .raw-video {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(145deg, #384152, #111827);
  color: #f8fafc;
  text-align: center;
}
#cases .raw-video span {
  color: #cbd5e1;
  font-size: var(--site-min-text);
}
#cases .raw-waveform {
  display: flex;
  height: 28px;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
}
#cases .raw-waveform i {
  width: 3px;
  height: 35%;
  background: #60a5fa;
}
#cases .raw-waveform i:nth-child(2n) {
  height: 80%;
}
#cases .raw-waveform i:nth-child(3n) {
  height: 55%;
}
#cases .reels-transform .reels-mock {
  padding: 52px 10px 12px;
  background: #18151f;
}
#cases .reels-transform .reels-mock .transform-label {
  background: #86198f;
  color: #fff;
}
#cases .reels-transform .reel-phone {
  height: 126px;
}
#cases .reels-transform .reel-phone::before {
  background:
    linear-gradient(155deg, transparent 35%, rgba(17, 24, 39, 0.75)),
    #db2777;
}
#cases .reels-transform .reel-phone-2::before {
  background:
    linear-gradient(155deg, transparent 35%, rgba(17, 24, 39, 0.75)),
    #7c3aed;
}
#cases .reels-transform .reel-phone-3::before {
  background:
    linear-gradient(155deg, transparent 35%, rgba(17, 24, 39, 0.75)),
    #0891b2;
}
/* Keep source structure; fit the Soonlee page width and responsive layout. */
#cases{background:#fff;border-top:1px solid #20232218;padding:95px 60px}#cases .use-case-card{border-color:#20232230;border-radius:16px;background:#fff}#cases .use-case-card>p{word-break:keep-all}#cases .use-case-meta{letter-spacing:.04em}#cases .use-cases-heading h2{font-size:68px;letter-spacing:-3px}
@media(max-width:900px){#cases .use-case-card,#cases .use-case-card-featured{grid-column:1/-1}#cases .use-case-card h3{min-height:0}#cases .transformation-mock,#cases .use-case-card-featured .transformation-mock,#cases .use-case-card:last-child .transformation-mock{height:620px}}
@media(max-width:680px){#cases{padding:65px 24px}#cases .section-kicker{font-size:11px;letter-spacing:0}#cases .use-cases-heading{margin:44px 0 38px}#cases .use-cases-heading h2{font-size:40px;letter-spacing:-1.8px}#cases .use-case-grid{gap:18px}#cases .use-case-card{padding:20px}#cases .use-case-meta{font-size:10px;letter-spacing:0}#cases .use-case-meta small{font-size:11px}#cases .use-case-card h3{font-size:29px}#cases .transformation-mock,#cases .use-case-card-featured .transformation-mock,#cases .use-case-card:last-child .transformation-mock{height:620px;min-height:580px;grid-template-columns:1fr;grid-template-rows:minmax(220px,.9fr) 68px minmax(260px,1.1fr)}#cases .transform-panel{min-height:200px}#cases .dashboard-kpis{grid-template-columns:repeat(2,1fr)}#cases .dashboard-kpis>div:last-child{grid-column:1/-1}#cases .dashboard-chart{min-height:92px}#cases .chart-bars{height:52px}#cases .article-editor{padding-right:14px;padding-left:14px}#cases .email-content{padding:11px}#cases .email-meta{gap:4px 6px}#cases .email-meta b,#cases .email-meta span{font-size:11px}#cases .departure-list{gap:6px}#cases .departure-list>div{padding:7px}#cases .departure-list b,#cases .departure-list span,#cases .email-content small{font-size:11px}}
#cases .use-case-card h3{word-break:keep-all}
#cases .raw-admin{padding:8px}
#cases .raw-admin .raw-grid>*{padding:4px 6px;font-size:12px;line-height:1.25}
#cases .raw-admin small{font-size:11px;line-height:1.35;margin-top:7px;word-break:keep-all}
@media(max-width:680px){#cases .admin-transform{grid-template-rows:240px 68px 300px}}