/* How buying works (/buy) — the page layer of the design repo's
 * `site/Site - Buy.html` (`f00a88d`), its `by-page` and `sl-page` style blocks.
 *
 * The page is built from the clean pattern set in css/sx-home.css, which the
 * shell bundle carries: `.hm-sec`, `.hm-head`, `.hm-eb`, `.hm-sub`, `.hm-act`,
 * `.hm-found`, `.hm-perks`, `.hm-seats`, `.hm-alt`, `.sx-mcp-flow` and the
 * walkthrough. This sheet holds only what the prototype adds on top, and
 * every atom it borrowed from the Sell page (`sl-type`, `sl-faq`, `sl-note`,
 * `sl-foot`, `sl-doors`, `sl-dot`) is renamed `by-*`: `/sell` dresses its own
 * `.sl-*` classes in css/sx-sell.css, differently.
 *
 * Inverted from the prototype the usual way: it authors at
 * data-theme="dark" on its `.sx` div, so every value here is a token that
 * each theme already resolves, and the one rule that differs by theme is a
 * `[data-theme="dark"]` override at the foot. Its `.sx` prefixes are gone:
 * they lifted its rules past its own `.sx p` / `.sx h3` / `.sx button`
 * resets, which here are `:where(.sx) …` at (0,0,1), so a class wins alone.
 * Its one-column tracks are `minmax(0, 1fr)`, never its bare `1fr`. */

/* Anchored sections clear the sticky top bar. */
.by-page section[id] { scroll-margin-top: 84px; }

/* ---------- Hero ----------
   `.sx-hero` with the prototype's `.hm-hero` rhythm, as Home v2's: 8px below,
   the next section's margin doing the rest. The wayfinder decides the top. */
.by-hero { padding-bottom: 8px; }
.by-hero h1 { text-wrap: balance; }
.by-hero .lede { margin-top: 22px; line-height: 1.55; max-width: 56ch; }
@media (max-width: 720px) {
  .by-hero h1 { font-size: 40px; }
}

/* ---------- What you can buy ---------- */
.by-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.by-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;
}
.by-type h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
}
.by-type p { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--sx-text-2); text-wrap: pretty; }
/* As wide as its words, at the foot of the card whatever the blurb's length. */
.by-type .by-go { align-self: flex-start; margin-top: auto; padding-top: 18px; }
.by-type--guide { background: transparent; }
@media (max-width: 1040px) { .by-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .by-types { grid-template-columns: minmax(0, 1fr); } }

/* A type's dot, in its canonical accent (tests/test_listing_type_colors.py).
   It sits beside the type's name, so it carries no meaning of its own. */
.by-type .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.by-type .dot--prompt     { background: var(--sx-lt-prompt, #5B7CFF); }
.by-type .dot--persona    { background: var(--sx-lt-persona, #F5B454); }
.by-type .dot--skill      { background: var(--sx-lt-skill, #56C2F0); }
.by-type .dot--assistant  { background: var(--sx-lt-assistant, #B48CFF); }
.by-type .dot--agent      { background: var(--sx-lt-agent, #F47B7B); }
.by-type .dot--crew       { background: var(--sx-lt-crew, #9B8CFF); }
.by-type .dot--product    { background: var(--sx-lt-product, #EC6AB8); }
.by-type .dot--mcp_server { background: var(--sx-lt-mcp_server, #4F46E5); }
.by-type .dot--system     { background: var(--sx-lt-system, #EA580C); }

/* ---------- Before you pay / What you own ---------- */
.by-perks b { display: block; margin-bottom: 4px; }
.by-rows { margin: 16px 0 0; }
.by-rows .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--sx-line);
  font-size: 13.5px; color: var(--sx-text-2);
}
.by-rows .row:first-child { border-top: 0; padding-top: 0; }
.by-rows dd {
  margin: 0;
  font-family: var(--sx-font-mono); font-size: 12.5px; font-weight: 500;
  color: var(--sx-text); text-align: right;
}
.by-note {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--sx-line);
  font-size: 13px; line-height: 1.55; color: var(--sx-text-2); text-wrap: pretty;
}
.by-note .hm-alt { font-size: 13px; }

/* ---------- How we curate ----------
   The shared three-column flow, five across: three at 1100px, one at 900px. */
.by-flow { margin-top: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .by-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .by-flow { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ----------
   Every answer is open until the script runs: it marks the list `is-ready`,
   and only then do the closed ones collapse, so a page without JavaScript
   shows every answer rather than six it cannot open. A closed answer is
   `visibility: hidden` once its row has finished closing, which takes it out
   of the tab order and the accessibility tree as well as out of sight. */
.by-faq { max-width: 820px; border-top: 1px solid var(--sx-line); }
.by-faq-i { border-bottom: 1px solid var(--sx-line); }
.by-faq-q {
  width: 100%;
  display: flex; align-items: center; gap: 24px;
  padding: 20px 4px;
  text-align: left;
  font-size: 16px; font-weight: 500; color: var(--sx-text);
  transition: color .12s;
}
.by-faq-q:hover { color: var(--sx-brand); }
.by-faq-q .q { flex: 1; letter-spacing: -0.01em; line-height: 1.4; }
.by-faq-chev { flex: none; color: var(--sx-text-3); transition: transform .26s cubic-bezier(.16, 1, .3, 1), color .14s; }
.by-faq-i.is-open .by-faq-chev { transform: rotate(180deg); color: var(--sx-text); }
.by-faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s cubic-bezier(.16, 1, .3, 1); }
.by-faq-a > div { overflow: hidden; transition: visibility 0s; }
.by-faq.is-ready .by-faq-i:not(.is-open) .by-faq-a { grid-template-rows: 0fr; }
.by-faq.is-ready .by-faq-i:not(.is-open) .by-faq-a > div { visibility: hidden; transition: visibility 0s .28s; }
.by-faq-a p { padding: 0 48px 22px 4px; font-size: 14px; line-height: 1.65; color: var(--sx-text-2); text-wrap: pretty; }
@media (max-width: 560px) { .by-faq-a p { padding-right: 4px; } }
@media (prefers-reduced-motion: reduce) {
  .by-faq-chev, .by-faq-a, .by-faq-a > div { transition: none; }
}

/* ---------- Get started ---------- */
.by-doors { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.by-foot { margin-top: 18px; font-size: 13px; color: var(--sx-text-3); }

/* ---------- Dark ---------- */
[data-theme="dark"] .by-faq-q:hover { color: var(--sx-brand-3); }