/* ---------- Sigrix Refined Design System — About and Team ----------
 * Two pages load this sheet, on two generations of the design.
 *
 * /about is on the clean pattern set: Sigrix_new/site/Site - About.html,
 * design repo commit f00a88d, which moved the page onto Home v2's parts —
 * the `.hm-hero`, the `.hm-sec` section shell, `.hm-perks` and `.hm-seats`,
 * the MCP section's `.sx-mcp-flow` and the `.sx-dia` panel, every one of
 * them in css/sx-home.css, which the shell bundle carries. The `ab-*` rules
 * below are the prototype's page layer (its `#ab-page` block), inverted the
 * usual way: the prototype is authored at data-theme="dark", so every value
 * here is a token that each theme block already resolves, and nothing needs
 * a `[data-theme]` selector.
 *
 * /about/team still wears the About page's previous design — the `.mx-hero`,
 * the `.ax-step` timeline and the `.ax-team-*` cards — so those rules stay,
 * at the foot of the sheet, and now serve it alone. */

/* ==========================================================================
   /about — the clean pattern set's page layer
   ========================================================================== */

/* style.css lays `.about-main` out as a flex column with a 40px gap, the old
   page's rhythm and still the team page's. The clean sections bring their
   own — `.hm-sec` is 120px apart, 88px on a phone — and the gap would sit on
   top of it. */
body.about-page .about-main { display: block; }

/* The wayfinder owns the gap above the title: `--sx-eb-gap`, which
   css/sx-eyebrow.css applies through `.sx-eb + * { margin-top: 0 }` (0,1,0).
   Home v2's `.hm-hero h1 { margin-top: 28px }` is (0,1,1) and outranks it;
   the home hero leads with its release pill rather than the wayfinder, so
   the two never meet there. The prototype answers the same collision with
   its own `.ab-hero h1 { margin-top: 18px }`; here the token decides, as it
   does on every other page that leads with the wayfinder. */
.hm-hero.ab-hero h1 { margin-top: 0; text-wrap: balance; }

/* `/about#curation` and `/about#ownership`, which the top bar's Company menu
   links to, stop with their heading clear of the sticky bar; 84px is the
   prototype's own `scrollMarginTop` on the same two sections. */
.ab-anchor { scroll-margin-top: 84px; }

/* ---------- What Sigrix sells: five flat cards ---------- */
.ab-types {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.ab-type {
  display: flex; flex-direction: column;
  padding: 20px 20px 18px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.ab-type h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
}
/* The type dot is the cover tag's, read from the same `--sx-lt-*` tokens
   (sx-home.css, `.sx-card-cover-tag .sx-chip--type-*::before`). The
   prototype says its dots "repeat the system's cover-tag dot colours", and
   its literals are its own system's: its agent dot is #7CE3D4, which here is
   the dark theme's `--sx-accent` and was crew's colour until crew moved
   (tests/test_palette_overlap.py), while this palette's agent is red. */
.ab-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ab-dot--prompt    { background: var(--sx-lt-prompt); }
.ab-dot--persona   { background: var(--sx-lt-persona); }
.ab-dot--skill     { background: var(--sx-lt-skill); }
.ab-dot--assistant { background: var(--sx-lt-assistant); }
.ab-dot--agent     { background: var(--sx-lt-agent); }
.ab-type p {
  margin-top: 10px;
  font-size: 13.5px; line-height: 1.6;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.ab-type-f {
  margin-top: auto; padding-top: 18px;
  font-size: 12px; line-height: 1.5;
  color: var(--sx-text-3);
}
.ab-type-f .k {
  display: block; margin-bottom: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
@media (max-width: 1100px) { .ab-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .ab-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .ab-types { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Our mission: the tenets beside the In-one-line card ----------
   `.hm-perks` and `.hm-seats` are Home's founding list and seats card; the
   card here carries a line instead of the seats. The head carries two
   actions where `.hm-act` expects one, and `.hm-act` is `flex: none`: at
   320px the pair held its one-row width and "Vision & principles →" ran 41px
   past the column, so this one may shrink to its line and wrap the second
   button under the first. */
.hm-act.ab-acts { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-line .q {
  margin-top: 12px;
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
  color: var(--sx-text);
  text-wrap: balance;
}
.ab-line .a {
  margin-top: 10px;
  font-size: 14px; line-height: 1.6;
  color: var(--sx-text-2);
  text-wrap: pretty;
}

/* ---------- From the creator, Strategic advisor ---------- */
.ab-person {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.ab-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--sx-r-lg);
  overflow: hidden;
  background: var(--sx-bg-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.ab-portrait img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
/* No photo uploaded at /admin/about-page: the frame, with the person's
   initial. The prototype's empty state is its design tool's drop target
   (`<image-slot>`) rather than a design for the page. */
.ab-portrait-initial {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--sx-text-3);
}
.ab-prose { max-width: 620px; }
.ab-prose p {
  font-size: 15px; line-height: 1.65;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.ab-prose p + p { margin-top: 16px; }
/* A link in the prose takes the text's own ink, underlined, as `.hm-sub a`
   does: brand blue is kept for the primary action. */
.ab-prose a {
  color: var(--sx-text);
  text-decoration: underline;
  text-decoration-color: var(--sx-line-2);
  text-underline-offset: 3px;
}
.ab-prose a:hover { text-decoration-color: currentColor; }
.ab-focus { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ab-sign {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 24px;
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--sx-line);
}
.ab-sign .n { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--sx-text); }
.ab-sign .r,
.ab-sign .m {
  font-family: var(--sx-font-mono);
  font-size: 12px; line-height: 1.5;
  color: var(--sx-text-3);
}
.ab-sign .r { margin-top: 2px; }
/* Under the advisor, the startup-program note (bbc3329): the section
   eyebrow and a sentence between two hairlines, on one line where they fit
   and the sentence under its label where they do not. */
.ab-ai-note {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 24px;
  margin-top: 40px; padding: 20px 0;
  border-top: 1px solid var(--sx-line);
  border-bottom: 1px solid var(--sx-line);
  font-size: 15px; line-height: 1.6;
  color: var(--sx-text);
  text-wrap: pretty;
}
@media (max-width: 820px) {
  .ab-person { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ab-portrait { max-width: 320px; }
}

/* ---------- How we curate: the MCP section's step flow, five across ----------
   `.sx-mcp-flow` is three columns in sx-home.css and one under 900px; the
   compound selector outranks both. Under 1100px each step lays its number
   beside its title and text, and under 560px stacks them again. */
.sx-mcp-flow.ab-flow { margin-top: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .sx-mcp-flow.ab-flow { grid-template-columns: minmax(0, 1fr); }
  .ab-flow .sx-mcp-step {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    column-gap: 24px;
    padding: 20px 22px;
  }
  .ab-flow .sx-mcp-step .n { grid-row: span 2; padding-top: 4px; }
  .ab-flow .sx-mcp-step h3 { margin-top: 0; }
}
@media (max-width: 560px) {
  .ab-flow .sx-mcp-step { display: flex; }
  .ab-flow .sx-mcp-step h3 { margin-top: 10px; }
}

/* ---------- Digital ownership: the prose beside the licence chain ---------- */
.ab-own {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.ab-chain { display: flex; flex-direction: column; }
.ab-node {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--sx-r-md);
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.ab-node .role {
  font-family: var(--sx-font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sx-text-3);
}
.ab-node .name { font-size: 14px; font-weight: 600; color: var(--sx-text); }
.ab-node .name small {
  display: block; margin-top: 2px;
  font-size: 12.5px; font-weight: 400; line-height: 1.45;
  color: var(--sx-text-3);
}
.ab-node .v {
  font-family: var(--sx-font-mono);
  font-size: 12px;
  color: var(--sx-text-2);
  white-space: nowrap;
}
/* The prototype's `.ac`, renamed: `.sx-dia .ac` was the wireframe diagrams'
   SVG accent stroke in sx-home.css when this was ported. The ink is
   `--sx-brand-text`, as the curation steps' numbers above it are. */
.ab-node .v--brand { color: var(--sx-brand-text); }
.ab-hop {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 32px;
}
.ab-hop::before {
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0;
  border-left: 1px dashed var(--sx-line-2);
}
.ab-hop span {
  position: relative;
  padding: 0 10px;
  background: var(--sx-surface);
  font-family: var(--sx-font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--sx-text-3);
}
@media (max-width: 960px) { .ab-own { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 480px) {
  .ab-node { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .ab-node .role { grid-column: 1 / -1; }
}

/* ---------- Get started: one button and two quiet links ---------- */
.ab-doors { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* The hero's and Get started's buttons carry the keyword labels (#3055), and
   `.sx-btn` is `white-space: nowrap` at a fixed 44px: at 320px "Compare AI
   agents in our marketplace →" ran 48px past the column and the hero's
   button 12px into the gutter. As on the v4 buy button (#6488), the label
   wraps and the button grows to hold it; where the label fits on one line the
   button is unchanged. (0,3,0) to outrank `.sx-btn.sx-btn--lg` on merit. */
.ab-hero .sx-btn.sx-btn--lg,
.ab-doors .sx-btn.sx-btn--lg {
  height: auto;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  text-wrap: pretty;
}

/* ==========================================================================
   /about/team — the previous design, which the team page still wears
   ========================================================================== */

/* ---------- Hero — same anatomy as home for cross-page alignment ----------
 * `.mx-hero` gets its full-viewport breakout from the shared `.sx-bleed`
 * rule in sx-home.css (#3080); no per-page breakout is declared here. */
.sx .mx-hero {
  position: relative;
  padding: 96px 0 72px;
  overflow: hidden;
}
.sx .mx-hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 440px at 18% 0%, rgba(26,31,107,0.14), transparent 60%),
    radial-gradient(700px 360px at 92% 30%, rgba(20,184,166,0.08), transparent 65%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}
.sx .mx-hero-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14,19,32,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,19,32,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(800px 420px at 30% 0%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(800px 420px at 30% 0%, black, transparent 75%);
}
.sx .mx-hero h1 {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.sx .mx-hero h1 .accent {
  background: linear-gradient(135deg, #3D4DFF 0%, #1A1F6B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sx .mx-hero .lede {
  margin-top: 20px;
  font-size: 18px;
  color: var(--sx-text-2);
  max-width: 60ch;
  line-height: 1.55;
}

/* -- ax-* accent ink -----------------------------------------------------
 * The timeline's step numbers are *text* on a low-alpha tint of their own
 * hue. They shipped as literals chosen for the light theme, so in dark mode
 * they sat as dark ink on a dark page (1.94:1 at worst) -- present, correctly
 * styled, unreadable.
 *
 * Page-scoped rather than promoted to base.html because publish_wizard.css
 * already declares --sx-skill and --sx-persona on :root with values of its
 * own (its skill is #0E9F6E, this page's #0F766E), so a global token of those
 * names would change the wizard. The dark values reuse the dark ramp the
 * retired AI Building Blocks page chose for these same hues.
 *
 * --ax-persona also moves in LIGHT: #C77800 measured 3.09:1 on its own tint,
 * so that one was never AA in either theme. The /about blocks, badges and
 * fifth step that read the other four tokens left with the clean port. */
.sx {
  --ax-prompt: #2A33C4;
  --ax-persona: #A64B08;
  --ax-skill: #0F766E;
  --ax-assistant: #6D28D9;
}
[data-theme="dark"] .sx {
  --ax-prompt: #6B78FF;
  --ax-persona: #F5B454;
  --ax-skill: #7CE3D4;
  --ax-assistant: #B48CFF;
}

/* ---------- Story timeline steps ---------- */
.sx .ax-step {
  position: relative;
  padding: 28px 24px;
  border-right: 1px solid var(--sx-line);
}
.sx .ax-step:last-child { border-right: 0; }
.sx .ax-step-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.sx .ax-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sx-font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--sx-bg);
  color: var(--sx-text);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx .ax-step:nth-child(1) .ax-step-num { color: var(--ax-prompt); box-shadow: 0 0 0 1px rgba(42,51,196,0.35) inset; background: rgba(42,51,196,0.08); }
.sx .ax-step:nth-child(2) .ax-step-num { color: var(--ax-persona); box-shadow: 0 0 0 1px rgba(199,120,0,0.35) inset; background: rgba(199,120,0,0.08); }
.sx .ax-step:nth-child(3) .ax-step-num { color: var(--ax-skill); box-shadow: 0 0 0 1px rgba(20,184,166,0.35) inset; background: rgba(20,184,166,0.08); }
.sx .ax-step:nth-child(4) .ax-step-num { color: var(--ax-assistant); box-shadow: 0 0 0 1px rgba(140,90,255,0.35) inset; background: rgba(140,90,255,0.08); }
.sx .ax-step-tag {
  font-family: var(--sx-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
.sx .ax-step h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.sx .ax-step p {
  font-size: 13px;
  color: var(--sx-text-2);
  line-height: 1.55;
  margin: 0;
}
.sx .ax-step-arrow {
  position: absolute;
  top: 41px;
  right: -8px;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sx-bg);
  color: var(--sx-text-3);
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx .ax-step:last-child .ax-step-arrow { display: none; }

/* ---------- Story timeline — milestones, same step family as the pipeline ---------- */
.sx .ax-timeline {
  position: relative;
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow: hidden;
}

/* ---------- Team page — compact people cards (#3350) ----------
   Deliberately not a reuse of the old /about's .ax-creator/.ax-advisor (a
   320px hero-style single-card layout, gone with the clean port) — this is a
   card-list context. The avatar mirrors the
   compact circle+initials pattern already used on the founding-sellers wall
   (.sx-seller-photo, src/static/css/sx-founding-sellers.css) rather than
   inventing a new visual language. auto-fit/minmax collapses to one column
   on narrow viewports without a dedicated breakpoint. */
.sx .ax-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.sx .ax-team-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-md);
  background: var(--sx-surface);
}
.sx .ax-team-avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(61,77,255,.18), rgba(61,77,255,.06));
  box-shadow: 0 0 0 1px rgba(61,77,255,.30) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sx-brand);
  font-family: var(--sx-font-display);
  font-weight: 700;
  font-size: 16px;
}
.sx .ax-team-body { min-width: 0; }
.sx .ax-team-body h3 { margin: 0 0 4px; font-size: 17px; }
.sx .ax-team-role {
  margin: 0 0 8px;
  color: var(--sx-text-3);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sx .ax-team-body p { margin: 0 0 10px; color: var(--sx-text-2); font-size: 15px; line-height: 1.6; }
.sx .ax-team-link { color: var(--sx-brand-3); font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sx .ax-timeline { grid-template-columns: 1fr; }
  .sx .ax-step { border-right: 0; border-bottom: 1px solid var(--sx-line); }
  .sx .ax-step:last-child { border-bottom: 0; }
  .sx .ax-step-arrow { display: none; }
}

@media (max-width: 1024px) {
  .sx .mx-hero { padding: 72px 0 56px; }
  .sx .mx-hero h1 { font-size: 52px; }
}

@media (max-width: 640px) {
  .sx .mx-hero h1 { font-size: 38px; }
}