/* Shared components: section frame, pills/badges, reveal. Loaded on every page. */
/* ---------- Shared section frame ---------- */

.bosly-section { position: relative; padding-block: 6rem; }
.bosly-section__head { max-width: 48rem; }
.bosly-section__badge { margin-top: 1rem; }
.bosly-section__title { margin: 1rem 0 0; font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.bosly-section__sub { max-width: 42rem; margin: 1.5rem 0 0; font-size: 1.125rem; line-height: 1.625; color: var(--muted-fg); }
.bosly-section__body { margin-top: 3.5rem; }
@media (min-width: 768px) {
	.bosly-section { padding-block: 8rem; }
	.bosly-section__title { font-size: 3.75rem; }
}

/* Reveal: visible without JS; JS adds .bosly-js then .is-revealed on intersect. */
.bosly-js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 650ms var(--ease) var(--d, 0s), transform 650ms var(--ease) var(--d, 0s); }
.bosly-js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Pills / badges */
.bosly-pill {
	display: inline-flex; max-width: 100%; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: 999px;
	font-family: var(--font-mono); font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.14em;
}
.bosly-pill .bosly-icon { flex: none; }
.bosly-pill--solid { background: var(--fg); color: var(--wp--preset--color--ink); }
.bosly-pill--line { border: 1px solid var(--border); color: var(--muted-fg); }
.bosly-pill--addon { background: var(--bg); color: var(--fg); }
.bosly-addon-border {
	display: inline-flex; padding: 1px; border-radius: 999px;
	background: linear-gradient(90deg, color-mix(in oklab, var(--accent-start) 55%, var(--border)), color-mix(in oklab, var(--accent-end) 55%, var(--border)));
}
.bosly-badge-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bosly-pill-note { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-fg); }


/* ---------- AI assistant ---------- */
.ai-wrap { max-width: 880px; margin-inline: auto; }
.ai-chat { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: color-mix(in oklab, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 85px color-mix(in oklab, var(--accent-start) 5%, transparent), 0 24px 70px color-mix(in oklab, var(--bg) 75%, transparent); scroll-margin-top: 7rem; }
.ai-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.ai-chat__id { display: flex; min-width: 0; align-items: center; gap: 0.75rem; }
.ai-chat__logo { display: grid; flex: none; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.ai-chat__logo img { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.ai-chat__id p { margin: 0; font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; line-height: 1.43; }
.ai-chat__id small { display: block; font-size: 10px; line-height: 1.5; color: var(--muted-fg); }
.ai-chat__ctrl { display: flex; flex: none; gap: 0.25rem; }
.ai-chat__btn { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; }
.ai-chat__btn:hover { background: var(--muted); }
.ai-chat__btn[hidden] { display: none; }
.ai-chat__body { padding: 1.25rem 1rem; }
.ai-chat__user { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
.ai-chat__user p { max-width: 92%; margin: 0; padding: 0.75rem 1rem; border-radius: var(--radius-xl); background: var(--primary); color: var(--primary-fg); font-size: 0.875rem; line-height: 1.625; }
.ai-chat__reply { display: flex; align-items: flex-start; gap: 0.75rem; }
.ai-chat__reply > img { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; object-fit: contain; }
.ai-chat__content { min-width: 0; flex: 1; }
.ai-chat__text { margin: 0; font-size: 0.875rem; line-height: 1.625; }
.ai-chat__text.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--accent-start); animation: ai-caret 0.8s step-end infinite; }
.ai-chat__table { margin-top: 1rem; overflow-x: auto; }
.ai-chat__table table { line-height: 1.333; width: 100%; min-width: 620px; border-collapse: collapse; text-align: left; font-size: 0.75rem; }
.ai-chat__table thead tr { border-block: 1px solid var(--border); }
.ai-chat__table th { padding: 0.75rem 1rem 0.75rem 0; font-weight: 400; color: var(--muted-fg); }
.ai-chat__table tbody td { padding: 0.625rem 1rem 0.625rem 0; border-bottom: 1px solid var(--border); }
.ai-chat__table tfoot th { color: var(--fg); font-weight: 700; }
.ai-chat__table tfoot td { padding: 0.75rem 1rem 0 0; }
.ai-chat__table .r { text-align: right; }
.ai-chat__table .mono, .ai-chat__rank .mono, .tile-prev .mono { font-family: var(--font-mono); }
.ai-chat__table .small, .ai-chat__rank .small { font-size: 10px; }
.ai-chat__table .dim, .ai-chat__rank .dim { color: var(--muted-fg); }
.ai-chat__table strong { font-weight: 400; }
.ai-chat__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.ai-chat__chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--input); border-radius: 10px; background: color-mix(in oklab, var(--input) 30%, transparent); color: var(--fg); font: inherit; font-size: 0.75rem; cursor: pointer; }
.ai-chat__chip:hover { background: var(--muted); }
.ai-chat__rank { margin: 1rem 0 0; padding: 0; list-style: none; }
.ai-chat__rank li { display: flex; align-items: center; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.ai-chat__rank li span:first-child { width: 1.25rem; }
.ai-chat__rank li span:nth-child(2) { flex: 1; }
.ai-chat__bullets { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.ai-chat__bullets li { display: flex; gap: 0.75rem; font-size: 0.875rem; line-height: 1.625; }
.ai-chat__bullets li span { flex: none; width: 4px; height: 4px; margin-top: 0.5rem; border-radius: 50%; background: var(--accent-start); }
.ai-chat__composer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 1rem 1rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
.ai-chat__composer p { margin: 0; font-size: 0.875rem; color: var(--muted-fg); }
.ai-chat__composer span { display: grid; flex: none; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 10px; background: var(--muted); color: var(--muted-fg); }
.ai-chat__foot { line-height: 1.5; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 1rem; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 9px; color: var(--muted-fg); }
.ai-prompts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.ai-prompt { height: auto; padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; white-space: normal; }
.ai-prompt[aria-pressed="true"] { border-color: color-mix(in oklab, var(--accent-start) 45%, var(--input)); }
.ai-meet { margin-top: 1.5rem; text-align: center; }
@media (min-width: 768px) { .ai-chat__head, .ai-chat__foot { padding-inline: 1.5rem; } .ai-chat__body { padding-inline: 1.75rem; } .ai-chat__composer { margin-inline: 1.5rem; } }

/* Heading leading (Tailwind text-2xl = 32px, text-lg = 28px) */
.bosly-section h3, .showcase-head h3, .security-copy h2 { line-height: 1.333; }
.flow-step h3 { line-height: 1.556; }


.surface-card { border: 1px solid var(--border); border-radius: var(--radius-xl); }