body.cm-hub-about { --hub-hero-end: #e6efec; --hub-dark: #173a35; --hub-highlight: #a8d8ce; }
.cm-hub-about .cm-about-hero { min-height: 620px; padding-top: 92px !important; padding-bottom: 48px !important; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr) !important; gap: clamp(40px, 5vw, 72px) !important; }
.cm-about-hero .cm-hub-hero-copy { align-self: center; }
.cm-hub-about .cm-about-hero h1 { max-width: 760px !important; font-size: clamp(50px, 4vw, 64px) !important; }
.cm-about-hero .cm-hub-hero-rail { width: 100%; max-width: 510px; justify-self: end; box-shadow: 0 18px 50px rgba(25, 57, 50, .07); }
.cm-about-hero .cm-hub-hero-rail .cm-hub-rail-item:nth-child(2) { background: rgba(255, 255, 255, .36); }
.cm-about-beliefs .cm-hub-path-card { min-height: 270px; }
.cm-about-beliefs .cm-hub-path-card p { margin: 18px 0 0; }

.cm-about-audiences { padding: 88px var(--hub-gutter) 96px; border-top: 1px solid var(--hub-rule); background: #f7f8f5; }
.cm-about-audience-grid { max-width: 1216px; margin: 0 auto; border-block: 1px solid var(--hub-rule); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-about-audience-grid article { min-width: 0; min-height: 250px; padding: 30px 32px 34px; border-right: 1px solid var(--hub-rule); }
.cm-about-audience-grid article:last-child { border-right: 0; }
.cm-about-audience-grid article > span,
.cm-about-beta > span { color: var(--hub-teal); font: 700 9px/1.2 Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.cm-about-audience-grid h3 { margin: 40px 0 12px; color: var(--hub-ink); font: 400 23px/1.2 "DM Sans", sans-serif; letter-spacing: -.02em; }
.cm-about-audience-grid p { margin: 0; color: var(--hub-muted); font-size: 14px; line-height: 1.65; }

.cm-about-beta { padding: 34px var(--hub-gutter); border-top: 1px solid var(--hub-rule); background: #fff; display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 34px; align-items: center; }
.cm-about-beta > div { max-width: 720px; }
.cm-about-beta h2 { margin: 0 0 7px; color: var(--hub-ink); font: 400 24px/1.2 "DM Sans", sans-serif; letter-spacing: -.02em; }
.cm-about-beta p { margin: 0; color: var(--hub-muted); font-size: 14px; line-height: 1.6; }
.cm-about-beta > a { color: var(--hub-teal); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.cm-about-beta > a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Actual product proof: the image is a direct capture of the signed-in /ai workspace. */
body.cm-hub-about .cm-ai-story.cm-ai-story-actual {
  width: 100%;
  padding: 96px var(--hub-gutter) 104px;
  border-block: 1px solid var(--hub-rule);
  background: #f3f6f2;
  color: var(--hub-ink);
  display: block;
  overflow: hidden;
}

.cm-hub-about .cm-ai-proof-head {
  width: min(100%, 1216px);
  margin: 0 auto 42px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .68fr);
  gap: clamp(56px, 8vw, 112px);
  align-items: end;
}

.cm-hub-about .cm-ai-story-copy { padding: 0; }
.cm-hub-about .cm-ai-story-actual .cm-rd-eyebrow {
  margin: 0 0 20px;
  color: var(--hub-teal);
  font: 700 10px/1.2 Manrope, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.cm-hub-about .cm-ai-story-actual .cm-rd-eyebrow span { width: 28px; background: var(--hub-teal); }
.cm-hub-about .cm-ai-story-actual h2 {
  max-width: 760px;
  margin: 0;
  color: var(--hub-ink);
  font: 400 clamp(46px, 5vw, 70px)/.98 "DM Serif Display", Georgia, serif;
  letter-spacing: -.042em;
}
.cm-hub-about .cm-ai-proof-intro { padding-bottom: 4px; }
.cm-hub-about .cm-ai-story-actual .cm-ai-story-lede {
  max-width: 520px;
  margin: 0;
  color: var(--hub-muted);
  font-size: 16px;
  line-height: 1.7;
}
.cm-hub-about .cm-ai-story-actions { margin-top: 24px; gap: 22px; }
.cm-hub-about .cm-ai-story-actual .cm-rd-button-primary {
  min-height: 48px;
  padding-inline: 20px;
  border-color: var(--hub-teal);
  border-radius: 10px;
  background: var(--hub-teal);
  color: #fff !important;
  font-weight: 500;
}
.cm-hub-about .cm-ai-story-actual .cm-rd-text-link { color: var(--hub-teal); font-weight: 500; }

.cm-hub-about .cm-ai-actual-screen {
  width: min(100%, 1216px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #cfd7d2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 72px rgba(22, 52, 45, .11);
}
.cm-hub-about .cm-ai-actual-screen-crop { aspect-ratio: 2.25 / 1; overflow: hidden; background: #fff; }
.cm-hub-about .cm-ai-actual-screen img {
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
}
.cm-hub-about .cm-ai-actual-screen figcaption {
  min-height: 58px;
  padding: 13px 18px;
  border-top: 1px solid var(--hub-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cm-hub-about .cm-ai-actual-screen figcaption span {
  color: var(--hub-teal);
  font: 700 9px/1.2 Manrope, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cm-hub-about .cm-ai-actual-screen figcaption strong {
  color: var(--hub-muted);
  font-size: 11px;
  font-weight: 400;
  text-align: right;
}

.cm-hub-about .cm-ai-actual-principles {
  width: min(100%, 1216px);
  margin: 28px auto 0;
  border-block: 1px solid var(--hub-rule);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cm-hub-about .cm-ai-actual-principles article {
  min-height: 154px;
  padding: 24px 26px 26px;
  border: 0;
  border-right: 1px solid var(--hub-rule);
  display: block;
}
.cm-hub-about .cm-ai-actual-principles article:last-child { border-right: 0; }
.cm-hub-about .cm-ai-actual-principles article > span {
  padding: 0;
  color: var(--hub-teal);
  font: 700 9px/1.2 Manrope, sans-serif;
  letter-spacing: .11em;
}
.cm-hub-about .cm-ai-actual-principles h3 {
  margin: 28px 0 8px;
  color: var(--hub-ink);
  font: 400 19px/1.25 "DM Sans", sans-serif;
  letter-spacing: -.015em;
}
.cm-hub-about .cm-ai-actual-principles p { margin: 0; color: var(--hub-muted); font-size: 13px; line-height: 1.6; }
.cm-hub-about .cm-ai-story-actual .cm-ai-disclaimer {
  width: min(100%, 1216px);
  max-width: none;
  margin: 15px auto 0;
  color: #7d8680;
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 1120px) {
  .cm-hub-about .cm-about-hero { min-height: 0; padding: 112px var(--hub-gutter) 64px !important; grid-template-columns: 1fr !important; gap: 42px !important; align-items: start !important; }
  .cm-about-hero .cm-hub-hero-copy { max-width: 780px; }
  .cm-about-hero .cm-hub-hero-rail { max-width: none; justify-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cm-about-hero .cm-hub-rail-item { min-height: 170px; border-right: 1px solid var(--hub-rule); border-bottom: 0; }
  .cm-about-hero .cm-hub-rail-item:last-child { border-right: 0; }
}

@media (max-width: 980px) {
  .cm-hub-about .cm-ai-proof-head { grid-template-columns: 1fr; gap: 24px; }
  .cm-hub-about .cm-ai-proof-intro { max-width: 680px; }
  .cm-about-audience-grid { grid-template-columns: 1fr; }
  .cm-about-audience-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--hub-rule); }
  .cm-about-audience-grid article:last-child { border-bottom: 0; }
  .cm-about-audience-grid h3 { margin-top: 24px; }
}

@media (max-width: 700px) {
  .cm-hub-about .cm-about-hero { padding: 104px 20px 58px !important; gap: 34px !important; }
  .cm-about-hero .cm-hub-hero-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 82vw); grid-template-columns: none; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; box-shadow: none; }
  .cm-about-hero .cm-hub-rail-item { min-height: 154px; border-right: 1px solid var(--hub-rule); scroll-snap-align: start; }
  .cm-about-audiences { padding-block: 64px 72px; }
  .cm-about-audience-grid article { padding: 26px 22px 30px; }
  .cm-about-beta { padding-block: 28px; grid-template-columns: 1fr; gap: 14px; }
  .cm-about-beta > a { margin-top: 4px; }
  body.cm-hub-about .cm-ai-story.cm-ai-story-actual { padding: 70px 20px 76px; }
  .cm-hub-about .cm-ai-proof-head { margin-bottom: 30px; }
  .cm-hub-about .cm-ai-story-actual h2 { font-size: clamp(42px, 13vw, 58px); }
  .cm-hub-about .cm-ai-story-actual .cm-ai-story-lede { font-size: 15px; }
  .cm-hub-about .cm-ai-actual-screen { border-radius: 12px; }
  .cm-hub-about .cm-ai-actual-screen-crop { aspect-ratio: 1.22 / 1; overflow-x: auto; }
  .cm-hub-about .cm-ai-actual-screen img { width: 900px; }
  .cm-hub-about .cm-ai-actual-screen figcaption { align-items: flex-start; flex-direction: column; gap: 7px; }
  .cm-hub-about .cm-ai-actual-screen figcaption strong { text-align: left; }
  .cm-hub-about .cm-ai-actual-principles { grid-template-columns: 1fr; }
  .cm-hub-about .cm-ai-actual-principles article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--hub-rule); }
  .cm-hub-about .cm-ai-actual-principles article:last-child { border-bottom: 0; }
  .cm-hub-about .cm-ai-actual-principles h3 { margin-top: 18px; }
}