/* /bot/ — the landing page. base.css carries the tokens, header, buttons, panels and footer. */

/* ---------- hero ---------- */
.lp-hero { padding-top: clamp(3rem, 2rem + 8vw, 7.5rem); padding-bottom: clamp(1rem, 3vw, 2rem); }
/* a computer: the copy on the left, the three facts stacked on the right */
@media (min-width: 1024px) {
  .lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 4rem; align-items: end; }
  .lp-hero .lp-facts { grid-template-columns: minmax(0, 1fr); margin: 0; border-bottom: 0; }
  .lp-hero .lp-facts > div { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
  .lp-hero .lp-facts > div + div { padding-left: 0; border-left: 0; }
}
.lp-title span { display: block; }
.lp-price { margin: 1.75rem 0 0; }
.lp-price span { color: var(--fg-35); margin: 0 .35em; }
.lp-live { margin: .75rem 0 0; font: 500 .875rem/1.5 var(--mono); color: var(--fg-60); }
.lp-live b { color: var(--accent); font-weight: 700; }
.lp-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2.75rem 0 0; max-width: 44rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.lp-facts > div { padding: 1rem .75rem 1rem 0; min-width: 0; }
.lp-facts > div + div { padding-left: .9rem; border-left: 1px solid var(--line); }
.lp-facts dt { font: 700 10px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--fg-45); }
.lp-facts dd { margin: .3rem 0 0; font: 800 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.15 var(--mono); letter-spacing: -.02em; color: var(--fg); }
.lp-facts .lp-fact-sub { margin-top: .25rem; font: 400 .8125rem/1.4 var(--sans); letter-spacing: 0; color: var(--fg-60); }

/* ---------- sections ---------- */
.lp-sec { padding-top: clamp(4rem, 3rem + 6vw, 7rem); scroll-margin-top: 72px; }
.lp-sec > .h2 { max-width: 52rem; margin-bottom: 1.75rem; }

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 820px) { .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-steps li { padding: 1.5rem 1.5rem 1.6rem; }
.lp-steps .h3 { padding-right: 3rem; }
.lp-steps p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--fg-60); }
.lp-steps b { color: var(--fg-90); }
.lp-step-n {
  position: absolute; top: 1.1rem; right: 1.25rem;
  font: 800 1.75rem/1 var(--mono); color: rgba(255, 255, 255, .1); transition: color .2s;
}
.lp-steps li:hover .lp-step-n { color: rgba(16, 185, 129, .3); }

/* what holders see: the Discord drawing + four flat points */
.lp-sees { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 880px) { .lp-sees { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; } }
.lp-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lp-points li { display: grid; gap: .3rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .lp-points li { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; } }
.lp-points b { padding-top: .2rem; font: 700 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lp-points span { color: var(--fg-75); }

/* Discord's dark theme, drawn — its own greys and blurple, scoped here (a product depiction, not the site's palette) */
.dmock {
  --d-bg: #313338; --d-text: #dbdee1; --d-dim: #949ba4; --d-head: #f2f3f5; --d-green: #248046; --d-grey: #4e5058; --d-app: #5865f2;
  margin: 0; padding: 1rem 1rem 1.2rem; border-radius: var(--r-xl); border: 1px solid var(--line);
  background: var(--d-bg); color: var(--d-text);
  font: 400 .95rem/1.4 "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.dm-chan { margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 1px solid #3f4147; font-weight: 700; color: var(--d-head); }
.dm-chan span { color: var(--d-dim); margin-right: .15rem; font-weight: 400; }
.dm-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .8rem; }
.dm-msg + .dm-msg { margin-top: 1.1rem; }
.dm-av { width: 40px; height: 40px; border-radius: 50%; background: #000; }
.dm-body p { margin: 0; }
.dm-body b { color: var(--d-head); font-weight: 700; }
.dm-name { font-weight: 600; color: var(--d-head); }
.dm-app { display: inline-block; margin-left: .25rem; padding: 0 .3rem; border-radius: 3px; background: var(--d-app); color: #fff; font-size: .62rem; font-weight: 700; vertical-align: .12em; }
.dm-time { margin-left: .3rem; color: var(--d-dim); font-size: .72rem; font-weight: 400; }
.dm-embed { margin-top: .35rem; padding: .55rem .8rem .6rem; border-left: 4px solid #34d399; border-radius: 4px; background: #2b2d31; }
.dm-embed p + p { margin-top: .4rem; }
.dm-title { font-weight: 700; color: var(--d-head); }
.dm-small { font-size: .82rem; color: var(--d-dim); }
.dm-foot { font-size: .72rem; color: var(--d-dim); }
.dm-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem !important; }
.dm-btn { display: inline-block; padding: .35rem .9rem; border-radius: 4px; background: var(--d-grey); color: #fff; font-size: .85rem; font-weight: 600; }
.dm-btn.is-go { background: var(--d-green); }

/* ---------- pricing ---------- */
.lp-tiers { display: grid; gap: 1rem; }
@media (min-width: 720px) { .lp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-tier { padding: 1.6rem 1.5rem 1.7rem; }
.lp-tier p { margin: 0; }
.lp-tier-tag { font: 700 11px/1.5 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--fg-45); }
.lp-tier-name { margin: .35rem 0 .9rem !important; font: 800 clamp(2.1rem, 1.6rem + 2vw, 2.75rem)/1.05 var(--mono); letter-spacing: -.03em; color: var(--fg); }
.lp-tier-req { font-size: 1.05rem; line-height: 1.5; color: var(--fg-80); }
.lp-tier-get { margin-top: .6rem !important; color: var(--fg-60); }
.lp-tier-link { margin-top: 1.1rem !important; font: 700 .8125rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.lp-tier-link a { text-decoration: none; }
.lp-tier-link a:hover { text-decoration: underline; }

/* ---------- FAQ: flat rows ---------- */
.lp-faq { max-width: 48rem; border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: .9rem 0; font: 700 1rem/1.4 var(--mono); color: var(--fg);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; flex: none; font: 400 1.4rem/1 var(--mono); color: var(--accent); transition: transform .2s var(--ease); }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq summary:hover { color: var(--accent); }
.lp-faq details p { margin: 0 0 1.2rem; max-width: 42rem; color: var(--fg-75); }

/* ---------- close ---------- */
.lp-close { padding: clamp(1.5rem, 4vw, 2.75rem); }
.lp-close .prose { margin: 0; }
.lp-close .cta-row { margin-top: 1.75rem; }