/* peep.moe/business: additions to the site's style.css (same tokens, light and dark) */

.biz-hero { padding-block: 84px 64px; border-bottom: 1px solid var(--line); background: radial-gradient(90% 120% at 100% 0%, var(--red-soft), transparent 60%); }
.biz-hero h1 { font-size: clamp(38px, 5.4vw, 64px); letter-spacing: -.035em; line-height: 1.05; margin-top: 14px; max-width: 18ch; }
.biz-hero .lede { color: var(--fg-2); font-size: 19px; max-width: 60ch; margin-top: 18px; }
.biz-hero .hero-actions { margin-top: 28px; }
.biz-hero .hero-note { color: var(--muted); font-size: 14px; margin-top: 14px; }

.suite.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.part .part-k { font: 700 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.steps-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.steps-3 > div { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 24px; display: grid; gap: 10px; align-content: start; counter-increment: s; }
.steps-3 > div::before { content: counter(s); font: 700 13px/1 var(--f-mono); color: var(--on-red, #fff); background: var(--red); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.steps-3 h3 { font-size: 19px; }
.steps-3 p { color: var(--fg-2); font-size: 15px; }

.price-big { font: 700 44px/1 var(--f-body); letter-spacing: -.03em; }
.price-big small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.edition .price-note { color: var(--muted); font-size: 14px; }

.calc { display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 28px; }
.calc label { display: grid; gap: 8px; font-weight: 600; }
.calc input[type=range] { width: 100%; accent-color: var(--red); }
.calc .out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.calc .out div { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: var(--panel-2); }
.calc .out b { display: block; font-size: 24px; letter-spacing: -.02em; }
.calc .out span { color: var(--muted); font-size: 13px; }

.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--fg-2); margin-top: 10px; }

.legal .doc h2 { font-size: 24px; }
.legal .doc h3 { font-size: 17px; }
.draft { border: 1px dashed var(--red); border-radius: 8px; padding: 12px 16px; margin-bottom: 28px; color: var(--fg-2); background: var(--red-soft); }

@media (max-width: 900px) {
  .suite.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .suite.four { grid-template-columns: 1fr; }
  .calc .out { grid-template-columns: 1fr; }
  .biz-hero { padding-block: 56px 44px; }
}
.edition > .tag { align-self: flex-start; }