/* Agentic Syndicate — page-only rules on top of ../assets/v3.css (task #8413,
   rebuilt for #8541). The hero is the members' hall; what you learn is four
   doors, three of them onto their own pages; where the community meets is
   three cards, each drawn as the thing itself: a group thread, a weekly call,
   the member area. No words in the drawings that the page does not say. */

/* ------------------------------------------------------------ the hero */
/* The people sit in the band 26-51% down the picture and the floor below them
   is empty, so the copy takes the floor. Two lines stacked, the second lit
   gold as on Home, then the one sentence that says what you get. */
#top { --pic-at: 50% 22%; }
#top .hero-copy { bottom: clamp(48px, 7cqh, 88px); }
#top .kicker { margin-bottom: 20px; font-size: 15px; font-weight: 600; color: #f2d398; }
#top .display { --d: clamp(52px, 5.4vw, 88px); line-height: 1.06; }
#top .display span { display: block; }
#top .display span:last-child { background-image: linear-gradient(to bottom, #f6e6b8 8%, #e6c88f 52%, #c99f62 96%); }
#top .hero-sub {
  max-width: 34em;
  margin-top: clamp(20px, 2.6cqh, 28px);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.45;
  color: #dcd8d1;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.9));
}
#top .actions { margin-top: clamp(24px, 3.6cqh, 40px); }

/* ------------------------------------------------------------ what you learn */
/* four doors, two by two, three onto the page that tells it; the system's is
   Why, the story of the man who built it */
#learn .doors { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#learn .door { height: clamp(320px, 28vw, 420px); }
#learn .door-t b { line-height: 1.1; text-wrap: balance; }
/* Agentic Agency has no page of its own yet: its door is a picture, not a link */
#learn .door a:not([href]):hover img { transform: none; }
/* the tower's light column runs up the middle: move it off the title's side
   and darken the top a little more than the others */
#learn .door-ad img { object-position: 0% 30%; }
#learn .door-ad a::before { background: linear-gradient(to bottom, rgba(2, 6, 13, 0.94) 0%, rgba(2, 6, 13, 0.62) 34%, rgba(2, 6, 13, 0) 62%, rgba(2, 6, 13, 0.35) 100%); }

/* ------------------------------------------------------------ support */

/* the group: a thread, lines for words, a few members and you */
#support .grp { display: grid; gap: 12px; padding: 18px 18px 20px; }
#support .grp .lb { margin-bottom: 4px; }
#support .grp-row { display: flex; align-items: end; gap: 10px; }
#support .grp-row > i {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(160, 182, 240, 0.55), rgba(110, 121, 201, 0.35));
}
#support .grp-row:nth-child(3) > i { background: linear-gradient(135deg, rgba(110, 215, 205, 0.55), rgba(60, 150, 160, 0.35)); }
#support .grp-row:nth-child(5) > i { background: linear-gradient(135deg, rgba(238, 190, 110, 0.6), rgba(190, 130, 70, 0.35)); }
#support .grp-bub {
  display: grid;
  gap: 7px;
  width: 72%;
  padding: 11px 13px;
  border-radius: 12px 12px 12px 4px;
  background: rgba(255, 255, 255, 0.07);
}
#support .grp-bub s { display: block; height: 7px; border-radius: 4px; background: rgba(228, 226, 221, 0.32); }
#support .grp-bub s + s { width: 62%; }
#support .grp-row.me { justify-content: flex-end; }
#support .grp-row.me .grp-bub { width: 58%; border-radius: 12px 12px 4px 12px; background: rgba(120, 146, 222, 0.34); }

/* the call: the warm glass the site uses for a call that is yours */
#support .wk { display: grid; justify-items: start; gap: 10px; padding: 22px; }
#support .wk .tq { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; color: #f4ecdb; }
#support .wk .chip-need { margin-top: 6px; }

@media (max-width: 760px) {
  /* a landscape picture in a portrait frame: the people get the top of it and
     the copy gets clear ground below, rather than sitting on their heads */
  #top .hero-pic {
    height: 60%;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
            mask-image: linear-gradient(to bottom, #000 72%, transparent);
  }
  #top { --pic-at: 50% 40%; }
  #top .hero-copy { bottom: 40px; }
  #top .kicker { margin-bottom: 14px; font-size: 12px; }
  #top .display { --d: clamp(34px, 9.4vw, 44px); line-height: 1.06; }
  #top .display span { text-wrap: balance; }
  #top .hero-sub { max-width: 20em; margin-top: 16px; font-size: 17px; }
  #learn .doors { grid-template-columns: minmax(0, 1fr); }
  #learn .door { height: 300px; }
  #support .wk .tq { font-size: 22px; }
}