/* staffboard landing sections (relaunch 2026-11).
   Used by page content (HTML cards) with the `sb-` prefix. Sections are <section>
   elements so the theme's `.gh-content > div` flex rules do not apply to them. */

:root {
  --sb-accent: #00a8e8;
  --sb-accent-strong: #0089c2;
  --sb-ink: #15171a;
  --sb-ink-soft: #4a5260;
  --sb-sky: #e0f2f8;
  --sb-sky-soft: #f3fafd;
  --sb-pain: #ff7a59;
  --sb-pain-soft: #fff1ec;
  --sb-ok: #22a565;
  --sb-line: rgba(21, 23, 26, 0.09);
  --sb-radius: 18px;
  --sb-max: 1200px;
}

/* homepage: content-driven, full-bleed sections below the fixed navbar */
.sb-home .sb-page { display: block; max-width: none; padding: 0; }
.sb-home .sb-page > section.sb:first-child { padding-top: clamp(8px, 2vw, 24px); }
/* customer logos (Ghost gallery card reused from the old homepage) */
.sb-page > figure.kg-gallery-card, .gh-content > figure.kg-gallery-card.sb-logos {
  max-width: var(--sb-max); margin: -40px auto 0; padding: 0 clamp(20px, 4vw, 40px) clamp(40px, 6vw, 72px);
}
.sb-page .kg-gallery-container, .sb-page .kg-gallery-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 56px);
}
.sb-page .kg-gallery-container { gap: clamp(16px, 3vw, 32px); }
.sb-page .kg-gallery-row { height: auto !important; margin: 0 !important; }
.sb-page .kg-gallery-image { flex: 0 0 auto !important; width: auto !important; height: auto !important; margin: 0 !important; }
.sb-page .kg-gallery-image img {
  height: clamp(28px, 4vw, 44px) !important; width: auto !important; max-width: 170px; object-fit: contain;
  filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s;
}
.sb-page .kg-gallery-image img:hover { filter: none; opacity: 1; }
.sb-row p + p, .sb-facts p + p { margin-top: 12px; }

.gh-content > section.sb,
.gh-main > section.sb {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: clamp(48px, 7vw, 96px) 0;
}
.sb-in {
  max-width: var(--sb-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.sb * { box-sizing: border-box; }
.sb p, .sb li, .sb dd { color: var(--sb-ink-soft); font-size: 1.7rem; line-height: 1.6; }
.sb h1, .sb h2, .sb h3 { color: var(--sb-ink); letter-spacing: -0.01em; }
.sb h1 { font-size: clamp(3.4rem, 4.6vw, 5.4rem); line-height: 1.08; margin: 0 0 20px; }
.sb h2 { font-size: clamp(2.8rem, 3.2vw, 4rem); line-height: 1.15; margin: 0 0 16px; }
.sb h3 { font-size: 2rem; line-height: 1.3; margin: 0 0 8px; }
.sb-eyebrow {
  display: inline-block; font-size: 1.3rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sb-accent-strong); margin-bottom: 14px;
}
.sb-lead { font-size: clamp(1.8rem, 1.6vw, 2.1rem) !important; max-width: 60ch; }
.sb-center { text-align: center; }
.sb-center .sb-lead { margin-left: auto; margin-right: auto; }
.sb-alt { background: var(--sb-sky-soft); }
.sb-dark { background: var(--sb-ink); }
.sb-dark h2, .sb-dark p { color: #fff; }

/* buttons */
.sb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sb-center .sb-actions { justify-content: center; }
.sb a.sb-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 10px;
  font-weight: 600; font-size: 1.6rem; text-decoration: none; transition: transform .15s, background .15s;
}
.sb a.sb-btn:hover { transform: translateY(-1px); text-decoration: none; }
.sb a.sb-btn-primary { background: var(--sb-accent); color: #fff !important; }
.sb a.sb-btn-primary:hover { background: var(--sb-accent-strong); color: #fff !important; }
.sb a.sb-btn-ghost { background: #fff; color: var(--sb-ink) !important; box-shadow: inset 0 0 0 1.5px var(--sb-line); }
.sb-dark a.sb-btn-ghost { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.sb-note { font-size: 1.4rem !important; margin-top: 12px; }

/* hero */
.sb-hero .sb-in { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.sb-hero.sb-hero-stack .sb-in { grid-template-columns: 1fr; text-align: center; }
.sb-hero.sb-hero-stack .sb-lead { margin-left: auto; margin-right: auto; }
.sb-hero.sb-hero-stack .sb-actions { justify-content: center; }
.sb-checks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.sb-checks li { position: relative; padding-left: 28px; font-size: 1.6rem; }
.sb-checks li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--sb-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* product screenshot in a browser frame */
.sb-shot { margin: 0; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 0 var(--sb-line), 0 24px 60px -24px rgba(16, 60, 90, .35); border: 1px solid var(--sb-line); }
.sb-shot::before { content: ""; display: block; height: 28px; background:
  radial-gradient(circle at 16px 14px, #ff6159 5px, transparent 6px),
  radial-gradient(circle at 34px 14px, #ffbd2e 5px, transparent 6px),
  radial-gradient(circle at 52px 14px, #28c941 5px, transparent 6px), #f1f3f5; }
.sb-shot img { display: block; width: 100%; height: auto; }
.sb-shot figcaption { font-size: 1.3rem; color: var(--sb-ink-soft); padding: 10px 14px; border-top: 1px solid var(--sb-line); }

/* pains */
.sb-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.sb-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.sb-grid.sb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sb-grid.sb-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sb-card { background: #fff; border: 1px solid var(--sb-line); border-radius: var(--sb-radius); padding: 26px; }
.sb-card svg { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto 18px; }
.sb-pain-card { background: #fff; }
.sb-pain-card h3::before { content: "Problem"; display: block; font-size: 1.2rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sb-pain); margin-bottom: 6px; }
html[lang="en"] .sb-pain-card h3::before { content: "The problem"; }
.sb-card p { font-size: 1.6rem; margin: 0; }
.sb-card a.sb-more { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 1.5rem; color: var(--sb-accent-strong); }

/* problem -> solution rows */
.sb-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 6vw, 80px); }
.sb-row:first-of-type { margin-top: 0; }
.sb-row.sb-flip > :first-child { order: 2; }
.sb-fix { border-left: 3px solid var(--sb-pain); background: var(--sb-pain-soft); border-radius: 0 12px 12px 0; padding: 12px 16px; margin: 0 0 18px; }
.sb-fix p { margin: 0; font-size: 1.55rem; color: #7a3b28; }
.sb-fix strong { color: #b5482a; }

/* facts (answer-first block, good for search and AI answers) */
.sb-facts { border: 1px solid var(--sb-line); border-radius: var(--sb-radius); background: #fff; padding: clamp(22px, 3vw, 36px); }
.sb-facts > p { margin-top: 0; }
.sb-facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 18px 0 0; }
.sb-facts dt { font-weight: 600; color: var(--sb-ink); font-size: 1.55rem; }
.sb-facts dd { margin: 0; font-size: 1.55rem; }

/* FAQ */
.sb-faq { max-width: 860px; margin: 0 auto; }
.sb-faq details { border-bottom: 1px solid var(--sb-line); padding: 18px 0; }
.sb-faq summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 1.8rem; color: var(--sb-ink); padding-right: 32px; position: relative; }
.sb-faq summary::-webkit-details-marker { display: none; }
.sb-faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 2.4rem; color: var(--sb-accent-strong); }
.sb-faq details[open] summary::after { content: "–"; }
.sb-faq details p { margin: 12px 0 0; }

/* modules overview */
.sb-mod { display: flex; flex-direction: column; text-decoration: none !important; transition: border-color .15s, transform .15s; }
.sb-mod:hover { border-color: var(--sb-accent); transform: translateY(-2px); }
.sb-mod h3 { font-size: 1.8rem; }
.sb-mod p { flex: 1; }
.sb-mod span { margin-top: 12px; font-weight: 600; font-size: 1.45rem; color: var(--sb-accent-strong); }

/* trust */
.sb-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sb-trust div { background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; padding: 18px; }
.sb-trust strong { display: block; color: var(--sb-ink); font-size: 1.6rem; margin-bottom: 4px; }
.sb-trust span { color: var(--sb-ink-soft); font-size: 1.45rem; line-height: 1.5; }
.sb-quote { max-width: 820px; margin: 0 auto; text-align: center; }
.sb-quote blockquote { margin: 0; border: 0; padding: 0; font-size: clamp(2.2rem, 2.4vw, 3rem); line-height: 1.35; color: var(--sb-ink); font-weight: 500; }
.sb-quote cite { display: block; margin-top: 16px; font-style: normal; color: var(--sb-ink-soft); font-size: 1.5rem; }

/* comparison table */
.sb-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 1.55rem; table-layout: fixed; }
.sb-table th:first-child, .sb-table td:first-child { width: 20%; font-weight: 600; color: var(--sb-ink); }
.sb-table th:not(:first-child), .sb-table td:not(:first-child) { width: 40%; white-space: normal; }
.sb .sb-in > h3 { margin-top: 28px; }
.sb-table th, .sb-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--sb-line); vertical-align: top; }
.sb-table th { color: var(--sb-ink); background: var(--sb-sky-soft); }
.sb-table-wrap { overflow-x: auto; border: 1px solid var(--sb-line); border-radius: 14px; }

@media (max-width: 900px) {
  .sb-hero .sb-in, .sb-row { grid-template-columns: 1fr; }
  .sb-row.sb-flip > :first-child { order: 0; }
  .sb-grid, .sb-grid.sb-grid-4 { grid-template-columns: 1fr 1fr; }
  .sb-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sb-grid, .sb-grid.sb-grid-2, .sb-grid.sb-grid-4, .sb-trust { grid-template-columns: 1fr; }
  .sb-facts dl { grid-template-columns: 1fr; gap: 2px; }
  .sb-facts dd { margin-bottom: 10px; }
}