/* =========================================================================
   CoLateral website - About page (/about)
   -------------------------------------------------------------------------
   Page-only styles for about.html. The shared look comes from
   site-atmosphere.css (.atm-card, .atm-glow, .atm-float*, [data-reveal]),
   which the build injects after this sheet; this file only lays the page out
   and restyles the shared livestream carousel and footer where they sit here.

   legal.css (privacy/terms) and livestreams.css (home) are shared, so every
   override of them lives here, scoped under .about-page.

   Light is the unscoped default. Dark values live only under
   html[data-site-theme="dark"] and follow the site-prefs.css dark palette.
   ========================================================================= */

.about-page {
  --ab-ink: #182130;
  --ab-muted: #42597a;
  --ab-quiet: #52677f;
  --ab-blue: #0067c0;
  --ab-blue-ink: #005a9e;
  --ab-on-blue: #ffffff;
  --ab-line: rgba(15, 23, 42, 0.09);
  --ab-tint: rgba(0, 103, 192, 0.08);
  --ab-well: linear-gradient(180deg, #f5f8fc 0%, #eef3f9 100%);
  --ab-mini: #ffffff;
  --ab-live: #d92d20;
  position: relative;
  display: block;
  overflow-x: clip;
  color: var(--ab-ink);
}

html[data-site-theme="dark"] .about-page {
  --ab-ink: #e6edf5;
  --ab-muted: #a1b1c4;
  --ab-quiet: #8b9cb1;
  --ab-blue: #4da6ff;
  --ab-blue-ink: #7cc0ff;
  --ab-on-blue: #06101f;
  --ab-line: rgba(148, 178, 220, 0.12);
  --ab-tint: rgba(77, 166, 255, 0.12);
  --ab-well: linear-gradient(180deg, rgba(8, 13, 24, 0.9) 0%, rgba(6, 10, 19, 0.9) 100%);
  --ab-mini: #121b2e;
  --ab-live: #ff5c50;
}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page p {
  text-align: left;
  hyphens: none;
}

.about-page ul,
.about-page ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-page a {
  color: var(--ab-blue-ink);
}

.about-page a:focus-visible {
  outline: 3px solid var(--ab-blue);
  outline-offset: 4px;
  border-radius: 6px;
}

.about-page [id] {
  scroll-margin-top: 110px;
}

.ab-wrap {
  width: min(1160px, calc(100% - 36px));
  margin-inline: auto;
}

.ab-section {
  padding-top: 88px;
}

.ab-last {
  padding-bottom: 88px;
}

/* ---- Section head: eyebrow, short h2, at most one sentence ------------- */
/* The section head every core page shares: dot eyebrow, a short h2 with no
   trailing period, one sentence at most, centred (the hero is the one head
   that sits left). */
.ab-head {
  max-width: 760px;
  margin: 0 0 48px;
}

.ab-head.is-center {
  margin-inline: auto;
  text-align: center;
}

.ab-head.is-center .ab-h2,
.ab-head.is-center .ab-sub {
  text-align: center;
}

.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ab-blue-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ab-eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent);
}

.ab-h2 {
  margin: 14px 0 0;
  color: var(--ab-ink);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 820;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-wrap: balance;
}

.ab-sub {
  margin: 14px 0 0;
  color: var(--ab-muted);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  text-wrap: balance;
}

/* ---- Buttons ------------------------------------------------------------ */
.ab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* The site button: the shared height, radius and primary fill from
   site-chrome.css, so it matches the header and /pricing. */
.about-page .ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--site-btn-h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--site-btn-radius);
  font-size: 15px;
  font-weight: 780;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.about-page .ab-btn-xl {
  padding: 0 26px;
  font-size: 15.5px;
}

.ab-btn svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.about-page .ab-btn-primary {
  background: var(--site-primary);
  color: var(--site-primary-ink);
  box-shadow: var(--site-primary-shadow);
}

.about-page .ab-btn-ghost {
  border-color: var(--ab-line);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ab-ink);
}

html[data-site-theme="dark"] .about-page .ab-btn-ghost {
  border-color: rgba(94, 178, 242, 0.24);
  background: rgba(94, 178, 242, 0.07);
}

.ab-btn-ghost svg {
  color: #5865f2;
}

html[data-site-theme="dark"] .ab-btn-ghost svg {
  color: #8c95ff;
}

.about-page .ab-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.about-page .ab-btn-primary:hover {
  background: var(--site-primary-hover);
  color: var(--site-primary-ink);
}

.about-page .ab-btn-ghost:hover {
  border-color: rgba(0, 120, 212, 0.45);
  background: rgba(255, 255, 255, 0.95);
}

html[data-site-theme="dark"] .about-page .ab-btn-ghost:hover {
  border-color: rgba(94, 178, 242, 0.45);
  background: rgba(94, 178, 242, 0.14);
}

/* ---- Hero --------------------------------------------------------------- */
.ab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding-top: clamp(56px, 8vw, 104px);
}

.about-page .ab-hero h1 {
  margin: 18px 0 0;
  color: var(--ab-ink);
  font-size: var(--site-h1);
  font-weight: 850;
  letter-spacing: var(--site-h1-tracking);
  line-height: var(--site-h1-leading);
  text-wrap: balance;
}

.ab-role {
  margin: 20px 0 0;
  color: var(--ab-ink);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.ab-role span {
  color: var(--ab-blue-ink);
}

.ab-place {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 0;
  padding: 6px 12px 6px 9px;
  border: 1px solid var(--ab-line);
  border-radius: 999px;
  background: var(--ab-tint);
  color: var(--ab-muted);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
}

.ab-place svg {
  width: 16px;
  height: 16px;
  color: var(--ab-blue-ink);
}

.ab-lede {
  max-width: 500px;
  margin: 26px 0 0;
  color: var(--ab-muted);
  font-size: 18px;
  line-height: 1.6;
}

/* The portrait sits in a canvas-card frame, with one small card floating
   beside it: the live badge. */
.ab-visual {
  position: relative;
  justify-self: end;
  width: min(100%, 380px);
  padding: 34px 0;
}

.about-page .ab-visual::before {
  inset: -4% -18%;
}

.about-page .ab-portrait {
  margin: 0;
  padding: 10px 10px 10px;
  border: 1px solid transparent;
  border-radius: var(--atm-radius, 18px);
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) padding-box,
    linear-gradient(140deg, rgba(0, 120, 212, 0.55), rgba(112, 96, 255, 0.28) 45%, rgba(15, 23, 42, 0.08) 75%, rgba(0, 170, 200, 0.4)) border-box;
}

html[data-site-theme="dark"] .about-page .ab-portrait {
  background:
    linear-gradient(180deg, rgba(20, 29, 48, 0.96) 0%, rgba(12, 18, 32, 0.96) 100%) padding-box,
    linear-gradient(140deg, rgba(77, 166, 255, 0.7), rgba(120, 96, 255, 0.35) 45%, rgba(148, 178, 220, 0.1) 75%, rgba(0, 190, 220, 0.45)) border-box;
}

.ab-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 12px;
}

.ab-chrome-icon,
.ab-mock-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: var(--ab-tint);
  color: var(--ab-blue-ink);
}

.ab-chrome-icon svg,
.ab-mock-icon svg {
  width: 15px;
  height: 15px;
}

.ab-chrome-title {
  color: var(--ab-ink);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.ab-chrome-type,
.ab-mock-head em {
  margin-left: auto;
  color: var(--ab-quiet);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ab-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 10px;
  object-fit: cover;
}

.ab-sat {
  position: absolute;
  z-index: 2;
}

.ab-sat-live {
  top: 46%;
  left: -76px;
}

.about-page .ab-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px 11px 13px;
  border-radius: 14px;
  white-space: nowrap;
}

.ab-chip b {
  display: block;
  color: var(--ab-ink);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.3;
}

.ab-chip small {
  display: block;
  color: var(--ab-muted);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
}

/* A steady dot, not a pulse. */
.ab-live-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--ab-live);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ab-live) 18%, transparent);
}

/* A small map through the founder story, before the longer build archive. */
.ab-page-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 44px;
  padding: 14px 0;
  border-top: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.ab-page-nav > span {
  margin-right: auto;
  padding-right: 20px;
  color: var(--ab-muted);
  font-size: 13px;
  font-weight: 650;
}

.about-page .ab-page-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--ab-ink);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.about-page .ab-page-nav a:hover {
  background: var(--ab-tint);
  color: var(--ab-blue-ink);
}

.ab-story {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 64px);
}

.ab-story .ab-h2 {
  font-size: clamp(30px, 3.4vw, 43px);
  line-height: 1.12;
}

.ab-story-text {
  margin: 18px 0 0;
  color: var(--ab-muted);
  font-size: 16px;
  line-height: 1.65;
}

.about-page .ab-story-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 750;
  text-underline-offset: 4px;
}

.ab-story-link span {
  transition: transform 0.2s ease;
}

.ab-story-link:hover span {
  transform: translateX(3px);
}

.about-page .ab-workspace {
  margin: 0;
  padding: 10px;
  overflow: hidden;
}

.ab-workspace-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 5px 15px;
  color: var(--ab-ink);
  font-size: 12px;
}

.ab-workspace-chrome .ab-live-dot {
  width: 6px;
  height: 6px;
  margin-inline: 3px;
  background: var(--ab-blue);
  box-shadow: 0 0 0 4px var(--ab-tint);
}

.ab-workspace-chrome > span:last-child {
  margin-left: auto;
  color: var(--ab-quiet);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ab-workspace img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.6;
  border: 1px solid var(--ab-line);
  border-radius: 10px;
  object-fit: contain;
  background: var(--ab-mini);
}

.ab-workspace .ab-workspace-dark,
html[data-site-theme="dark"] .ab-workspace .ab-workspace-light {
  display: none;
}

html[data-site-theme="dark"] .ab-workspace .ab-workspace-dark {
  display: block;
}

.ab-workspace figcaption {
  padding: 12px 5px 4px;
  color: var(--ab-quiet);
  font-size: 12px;
  line-height: 1.5;
}

/* ---- The story: three steps -------------------------------------------- */
.ab-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.ab-step {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 26px;
}

.ab-step-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 188px;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid var(--ab-line);
  border-radius: 12px;
  background:
    radial-gradient(var(--atm-dot, rgba(70, 90, 120, 0.2)) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--ab-well);
}

.ab-step-num,
.ab-step h3,
.ab-step p {
  padding-inline: 12px;
}

.ab-step-num {
  color: var(--ab-blue-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.about-page .ab-step h3 {
  margin: 8px 0 0;
  color: var(--ab-ink);
  font-size: 20px;
  font-weight: 780;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.about-page .ab-step p {
  margin: 8px 0 0;
  color: var(--ab-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Step 1: the pieces of one project, scattered. */
.ab-scatter {
  position: absolute;
  inset: 0;
}

.ab-bit {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px 7px 9px;
  border: 1px solid var(--ab-line);
  border-radius: 10px;
  background: var(--ab-mini);
  box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.35);
  color: var(--ab-ink);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

html[data-site-theme="dark"] .ab-bit {
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.8);
}

.ab-bit svg {
  width: 16px;
  height: 16px;
  color: var(--ab-blue-ink);
}

.ab-bit-1 { left: 8%; top: 14%; transform: rotate(-5deg); }
.ab-bit-2 { right: 8%; top: 30%; transform: rotate(4deg); }
.ab-bit-3 { left: 6%; bottom: 26%; transform: rotate(3deg); }
.ab-bit-4 { right: 10%; bottom: 9%; transform: rotate(-4deg); }

/* Steps 2 and 3: small canvas cards, with the same chrome as the real ones. */
.ab-mock {
  width: min(240px, 84%);
  margin-inline: auto;
  padding: 10px 12px 12px;
  border: 1px solid var(--ab-line);
  border-radius: 12px;
  background: var(--ab-mini);
  box-shadow: 0 16px 34px -18px rgba(15, 23, 42, 0.4);
}

html[data-site-theme="dark"] .ab-mock {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 18px 40px -16px rgba(0, 0, 0, 0.85), 0 0 50px -20px rgba(77, 166, 255, 0.35);
}

.ab-step-visual > div:not(.ab-scatter) {
  width: 100%;
}

.ab-mock-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ab-line);
}

.ab-mock-head b {
  color: var(--ab-ink);
  font-size: 12.5px;
  font-weight: 750;
}

.ab-mock-head em {
  font-size: 9.5px;
}

.ab-mock-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}

.ab-mock-icon svg {
  width: 13px;
  height: 13px;
}

.ab-term {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  color: var(--ab-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.4;
}

.ab-term i {
  color: var(--ab-blue-ink);
  font-style: normal;
}

.ab-term .is-dim {
  color: var(--ab-muted);
}

.ab-term .is-ok {
  color: #0e7a3e;
}

html[data-site-theme="dark"] .ab-term .is-ok {
  color: #5fd48f;
}

.ab-lines {
  display: grid;
  gap: 7px;
  padding: 12px 0 12px;
}

.ab-lines i {
  display: block;
  height: 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ab-muted) 22%, transparent);
}

.ab-lines i:nth-child(2) { width: 82%; }
.ab-lines i:nth-child(3) { width: 58%; }

.ab-mock-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.ab-pill {
  padding: 4px 10px;
  border: 1px solid var(--ab-line);
  border-radius: 7px;
  color: var(--ab-ink);
  font-size: 11px;
  font-weight: 750;
}

.ab-pill.is-solid {
  border-color: transparent;
  background: var(--ab-blue);
  color: var(--ab-on-blue);
}

/* ---- Icons ------------------------------------------------------------- */
.ab-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--ab-blue) 22%, transparent);
  border-radius: 13px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ab-blue) 14%, transparent), color-mix(in srgb, var(--ab-blue) 4%, transparent));
  color: var(--ab-blue-ink);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--ab-blue) 70%, transparent);
}

.ab-icon svg {
  width: 23px;
  height: 23px;
}

.ab-icon.is-small {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.ab-icon.is-small svg {
  width: 20px;
  height: 20px;
}

/* ---- Principles: one static row of four icon chips ----------------------
   The row reveals as one block and never moves after that: four chips each
   arriving on their own delay read as four things at four heights. */
.about-page .ab-principles {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 0;
}

@media (max-width: 1000px) {
  .about-page .ab-principles {
    grid-template-columns: repeat(2, max-content);
  }
}

.about-page .ab-principles li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  color: var(--ab-ink);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  white-space: nowrap;
}

.ab-icon.is-chip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: none;
}

.ab-icon.is-chip svg {
  width: 18px;
  height: 18px;
}

/* ---- Built live: the live module as one compact strip ------------------
   The same markup and hooks as the home page's player (livestreams.js drives
   it), drawn here as one line: the heading, the latest session and the link
   to all of them. The player, the list and the step buttons stay in the
   markup for the script and are simply not drawn on this page. */
.about-page .ab-live {
  max-width: 980px;
  margin: 40px auto 0;
}

.about-page .ab-live::before {
  inset: -30% 6%;
}

.about-page .ab-live .founder-streams {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  grid-template-areas: none;
  align-items: center;
  gap: 10px 28px;
  padding: 18px 24px;
}

.about-page .ab-live .stream-heading {
  display: contents;
}

.about-page .ab-live .stream-kicker {
  grid-column: 1;
  grid-row: 1;
  padding-right: 28px;
  border-right: 1px solid var(--ab-line);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.about-page .ab-live .stream-heading > a {
  grid-column: 3;
  grid-row: 1;
}

.about-page .ab-live .founder-streams .stream-caption {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  min-width: 0;
  margin: 0;
}

.about-page .ab-live .stream-now {
  color: var(--ab-muted);
  font-size: 11px;
}

.about-page .ab-live .stream-caption h3 {
  font-size: 17px;
  line-height: 1.3;
}

.about-page .ab-live .stream-caption h3:empty {
  display: none;
}

.about-page .ab-live .founder-streams .stream-stage,
.about-page .ab-live .founder-streams .stream-track,
.about-page .ab-live .founder-streams .stream-controls,
.about-page .ab-live .founder-streams .stream-player-status {
  display: none;
}

@media (max-width: 760px) {
  .about-page .ab-live .founder-streams {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px 18px;
  }

  .about-page .ab-live .stream-kicker {
    padding-right: 0;
    border-right: 0;
  }

  .about-page .ab-live .stream-heading > a {
    grid-column: 1;
    grid-row: 3;
  }

  .about-page .ab-live .founder-streams .stream-caption {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 12px;
    border-top: 1px solid var(--ab-line);
  }
}

/* ---- Connect ------------------------------------------------------------ */
.ab-socials {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.about-page .ab-socials::before {
  inset: -10% -6%;
}

.ab-socials > li {
  grid-column: span 2;
  display: flex;
}

.ab-socials > li.is-featured {
  grid-column: span 3;
}

.about-page .ab-social {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 96px;
  padding: 20px 20px 20px 20px;
  color: var(--ab-ink);
  text-decoration: none;
}

.about-page .ab-social:hover {
  text-decoration: none;
}

.is-featured .ab-social {
  min-height: 116px;
  padding: 24px;
}

.ab-brand {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 13px;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 12px 24px -14px rgba(15, 23, 42, 0.55);
}

.is-featured .ab-brand {
  width: 56px;
  height: 56px;
  border-radius: 15px;
}

.ab-brand svg {
  width: 24px;
  height: 24px;
}

.is-featured .ab-brand svg {
  width: 28px;
  height: 28px;
}

/* Brand fills with white glyphs read the same on either theme. X keeps its
   black plate, with a hairline so it does not sink into the dark canvas. */
.ab-brand-youtube { background: #ff0000; }
.ab-brand-discord { background: #5865f2; }
.ab-brand-x { background: #000000; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1); }
.ab-brand-linkedin { background: #0a66c2; }
.ab-brand-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

html[data-site-theme="dark"] .ab-brand-x {
  box-shadow: 0 0 0 1px rgba(230, 237, 245, 0.28), 0 12px 24px -14px rgba(0, 0, 0, 0.8);
}

.ab-social-name {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ab-social-name b {
  color: var(--ab-ink);
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.is-featured .ab-social-name b {
  font-size: 19px;
}

.ab-social-name small {
  color: var(--ab-muted);
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* The subscriber count rides in the subtitle line, as the Discord card's
   one line does; with no count the separator goes too. */
.ab-social-name small [data-youtube-subscribers] {
  white-space: nowrap;
}

.ab-social-sep:has(+ [data-youtube-subscribers]:empty) {
  display: none;
}

.ab-social-go {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  margin-left: auto;
  border: 1px solid var(--ab-line);
  border-radius: 50%;
  color: var(--ab-muted);
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.ab-social-go svg {
  width: 15px;
  height: 15px;
}

.ab-social:hover .ab-social-go {
  border-color: transparent;
  background: var(--ab-blue);
  color: var(--ab-on-blue);
}

/* ---- Get in touch ------------------------------------------------------- */
/* A closing card, centred like the home page's: the head, the one button,
   then three ways further in, side by side. */
.about-page .ab-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 40px;
  padding: clamp(32px, 4.5vw, 56px);
  border-radius: var(--atm-radius, 18px);
}

.about-page .ab-contact-copy,
.about-page .ab-contact-copy .ab-h2,
.about-page .ab-contact-copy .ab-sub {
  text-align: center;
}

.ab-contact-copy .ab-actions {
  justify-content: center;
}

.ab-contact-copy .ab-sub a {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ab-contact-copy .ab-actions {
  margin-top: 26px;
}

.ab-contact-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.about-page .ab-contact-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--ab-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ab-mini) 70%, transparent);
  color: var(--ab-ink);
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.about-page .ab-contact-links a:hover {
  transform: translateY(-2px);
  border-color: var(--atm-card-line-hover, var(--ab-blue));
  box-shadow: var(--atm-card-shadow, none);
  text-decoration: none;
}

.ab-contact-links b {
  display: block;
  color: var(--ab-ink);
  font-size: 15.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.ab-contact-links small {
  display: block;
  color: var(--ab-muted);
  font-size: 13px;
}

.ab-arrow {
  width: 18px;
  height: 18px;
  flex: none;
  margin-left: auto;
  color: var(--ab-blue-ink);
  transition: transform 0.3s ease;
}

.ab-contact-links a:hover .ab-arrow {
  transform: translateX(3px);
}

/* ---- Where software stops: one muted line under the contact card ------ */
.about-page .ab-legal {
  max-width: 1100px;
  margin: 26px auto 0;
  color: var(--ab-muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}

.about-page .ab-legal a {
  font-weight: 650;
}

/* ---- Footer (site-chrome.css markup; tokens it expects from the page) --- */
.site-footer {
  --ink: #182130;
  --muted: #42597a;
  --quiet: #52677f;
  --line: rgba(15, 23, 42, 0.1);
  --line-strong: rgba(0, 120, 212, 0.45);
  --blue: #0067c0;
  --blue-2: #005a9e;
  --tint: rgba(15, 23, 42, 0.04);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-site-theme="dark"] .site-footer {
  --ink: #e6edf5;
  --muted: #a1b1c4;
  --quiet: #8b9cb1;
  --line: rgba(148, 178, 220, 0.14);
  --line-strong: rgba(77, 166, 255, 0.5);
  --blue: #4da6ff;
  --blue-2: #7cc0ff;
  --tint: rgba(148, 178, 220, 0.06);
}

.site-footer .wrap {
  width: min(1160px, calc(100% - 36px));
  margin-inline: auto;
}

.site-footer a:hover {
  text-decoration: none;
}

.site-footer p {
  line-height: 1.6;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .ab-sat-live { left: -36px; }
}

@media (max-width: 980px) {
  .ab-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  }

  .ab-contact-links {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
  }

  .ab-story {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .ab-story-copy {
    max-width: 720px;
  }

  .ab-workspace {
    width: min(100%, 760px);
    justify-self: center;
    box-sizing: border-box;
  }
}

@media (max-width: 860px) {
  .about-page .ab-steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 580px;
    margin-inline: auto;
  }

  .ab-socials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-socials > li,
  .ab-socials > li.is-featured {
    grid-column: span 1;
  }

  .ab-socials > li:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .ab-section {
    padding-top: 64px;
  }

  .ab-last {
    padding-bottom: 64px;
  }

  .ab-head {
    margin-bottom: 32px;
  }

  .ab-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ab-visual {
    justify-self: center;
    width: min(100%, 300px);
    padding: 30px 0 34px;
  }

  .ab-sat-live { left: -14px; top: 44%; }
}

/* On a phone five full-width cards were a long scroll of the same shape.
   YouTube and Discord stay as cards across the column - they are where the
   build and the support happen - and X, LinkedIn and Instagram become a row
   of three icon tiles. The handle is only moved off screen, not removed, so
   each link keeps its full accessible name. */
@media (max-width: 640px) {
  .ab-socials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .ab-socials > li,
  .ab-socials > li:first-child {
    grid-column: span 1;
  }

  .ab-socials > li.is-featured {
    grid-column: 1 / -1;
  }

  .about-page .ab-socials > li:not(.is-featured) .ab-social {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 0;
    padding: 18px 8px 16px;
    text-align: center;
  }

  .ab-socials > li:not(.is-featured) .ab-brand {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .ab-socials > li:not(.is-featured) .ab-brand svg {
    width: 22px;
    height: 22px;
  }

  .ab-socials > li:not(.is-featured) .ab-social-name b {
    font-size: 14.5px;
  }

  .ab-socials > li:not(.is-featured) .ab-social-name small {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .ab-socials > li:not(.is-featured) .ab-social-go {
    display: none;
  }
}

@media (max-width: 600px) {
  .ab-page-nav {
    gap: 2px;
    margin-top: 22px;
  }

  .ab-page-nav > span {
    flex-basis: 100%;
    padding: 0 8px 8px;
  }

  .about-page .ab-page-nav a {
    padding-inline: 12px;
  }

  .ab-workspace-chrome > span:last-child {
    display: none;
  }

  .about-page .ab-principles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .about-page .ab-principles li {
    white-space: normal;
  }

  .ab-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .about-page .ab-btn {
    justify-content: center;
  }

  .about-page .ab-contact {
    padding: 28px 20px;
  }

  .ab-contact-copy .ab-sub {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .ab-sat-live { left: -8px; }

  .about-page .ab-chip {
    padding: 9px 12px 9px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .ab-btn,
  .about-page .ab-contact-links a,
  .ab-arrow,
  .ab-social-go,
  .about-page .ab-page-nav a,
  .ab-story-link span {
    transition: none;
  }

  .about-page .ab-btn:hover,
  .about-page .ab-contact-links a:hover,
  .ab-contact-links a:hover .ab-arrow,
  .ab-story-link:hover span {
    transform: none;
  }
}
.ab-social-name .social-stat{display:block;margin-top:7px;color:var(--ab-blue-ink);font-size:12px;font-weight:700;line-height:1.5}

[data-discord-members][hidden]{display:none}

/* Theme-aware emphasis stays on the interactive surface and image frame. */
.about-page { --ab-focus: var(--focus-ring, #00437c); }
.about-page :is(a, button, video):focus-visible {
  outline: 3px solid var(--ab-focus);
  outline-offset: 4px;
}
.about-page .ab-page-nav a:focus-visible {
  color: var(--ab-blue-ink);
  background: var(--ab-tint);
}
.about-page .ab-social:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--ab-blue-ink) 55%, transparent);
}
.about-page .ab-social:is(:hover, :focus-visible) .ab-social-go {
  border-color: transparent;
  background: var(--ab-blue);
  color: var(--ab-on-blue);
}
.about-page .ab-contact-links a:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--ab-blue-ink) 55%, transparent);
  background: color-mix(in srgb, var(--ab-blue) 6%, var(--ab-mini));
}
.about-page .ab-workspace-chrome {
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ab-line);
}
.about-page .ab-workspace img {
  border-color: color-mix(in srgb, var(--ab-blue-ink) 24%, var(--ab-mini));
}
html[data-site-theme="dark"] .about-page .ab-workspace img {
  border-color: rgba(124, 192, 255, .34);
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, .72);
}
.about-page .stream-start:focus-visible {
  /* The poster is clipped by its stage, so its ring belongs inside it. */
  outline-offset: -5px;
}
.about-page .stream-track { padding: 6px; }
.about-page .stream-card:focus-visible { outline-offset: 2px; }