/*
 * Boardio design system (2026 look, from the new homepage)
 * ---------------------------------------------------------
 * Plain CSS, no build step. Load it on a page with:
 *   @push('styles')
 *       <link rel="stylesheet" href="/v3/css/boardio-ds.css?v={{ filemtime(public_path('v3/css/boardio-ds.css')) }}">
 *   @endpush
 *
 * Put class "bd" on every section that uses these styles. It sets the
 * colour tokens (--bd-*), the font and the link reset for that section.
 *
 * Tokens
 *   --bd-ink #111111      text, dark surfaces
 *   --bd-red #eb1c22      brand red, primary buttons
 *   --bd-red-dark         red hover
 *   --bd-red-text         red for small text on light backgrounds (contrast)
 *   --bd-red-soft         red for small text on dark backgrounds
 *   --bd-paper #f5f3ef    warm light background
 *   --bd-muted #5b5752    secondary text
 *   --bd-line #e0dcd5     dividers and borders
 *
 * Components
 *   Sections      .bd-section  + --paper | --white | --dark
 *   Type          .bd-eyebrow  .bd-h2  .bd-link  .bd-kicker  .bd-dot
 *   Buttons       .bd-btn  + --red | --dark | --ghost | --lg
 *   Section head  .bd-section-head  (heading left, link right)  .bd-skip
 *   Cards         .bd-card  (white, rounded)
 *   Tiles         .bd-bento > .bd-tile  + --7 | --5 | --tall | --dark | --red | --light
 *                 inside: .bd-tile-eyebrow  .bd-tile-body  .bd-tile-more
 *   Steps         .bd-step > .bd-step-num  .bd-step-title  .bd-step-desc
 *   Quotes        .bd-quote-feature (dark, large)  .bd-quote-card (white)
 *                 .bd-stars  .bd-person  .bd-avatar  .bd-person-name  .bd-person-role
 *   Carousel nav  .bd-nav > .bd-nav-btn
 *   Stats         .bd-stats > .bd-stat (+ --red)  with <strong> and <span>
 *
 * Breakpoints: tablet max-width 1023px, phone max-width 640px.
 */

/* Tokens and scope */
.bd { --bd-ink: #111111; --bd-red: #eb1c22; --bd-red-dark: #c8161b; --bd-red-text: #c4161b; --bd-red-soft: #ff5a5f; --bd-paper: #f5f3ef; --bd-muted: #5b5752; --bd-line: #e0dcd5; font-family: Poppins, sans-serif; color: var(--bd-ink); }
.bd a { text-decoration: none; }
.bd a:hover { text-decoration: none; }

/* Sections */
.bd-section { padding: 104px 0; }
.bd-section--paper { background: var(--bd-paper); }
.bd-section--white { background: #fff; }
.bd-section--dark { background: var(--bd-ink); color: #fff; }

/* Type */
.bd-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bd-red-text); margin: 0 0 16px; }
.bd-h2 { font-family: Poppins, sans-serif; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: var(--bd-ink); margin: 0; }
.bd-link { font-size: 14px; font-weight: 600; color: var(--bd-ink); border-bottom: 1.5px solid var(--bd-ink); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.bd-link:hover { color: var(--bd-red); border-color: var(--bd-red); }
.bd-kicker { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--bd-muted); margin-bottom: 28px; }
.bd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bd-red); flex-shrink: 0; }

/* Buttons */
.bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px; line-height: 1; padding: 16px 28px; border-radius: 999px; border: 1.5px solid transparent; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.bd-btn--lg { font-size: 16px; padding: 20px 32px; }
.bd-btn--red { background: var(--bd-red); color: #fff; }
.bd-btn--red:hover { background: var(--bd-red-dark); color: #fff; }
.bd-btn--dark { background: var(--bd-ink); color: #fff; }
.bd-btn--dark:hover { background: var(--bd-red); color: #fff; }
.bd-btn--ghost { background: transparent; color: var(--bd-ink); border-color: var(--bd-ink); }
.bd-btn--ghost:hover { background: var(--bd-ink); color: #fff; }

/* Section head */
.bd-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 48px; }
.bd-skip { font-size: 15px; font-weight: 600; color: var(--bd-red-text); white-space: nowrap; }
.bd-skip:hover { color: var(--bd-ink); }

/* Cards */
.bd-card { background: #fff; border-radius: 24px; padding: 48px; }

/* Tiles (bento grid) */
.bd-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.bd-tile { border-radius: 24px; padding: 44px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; transition: transform .2s, box-shadow .2s; }
.bd-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(17,17,17,.10); }
.bd-tile--7 { grid-column: span 7; }
.bd-tile--5 { grid-column: span 5; }
.bd-tile--tall { min-height: 360px; }
.bd-tile--dark { background: var(--bd-ink); color: #fff; }
.bd-tile--red { background: var(--bd-red); color: #fff; }
.bd-tile--light { background: #fff; color: var(--bd-ink); }
.bd-tile-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bd-tile--dark .bd-tile-eyebrow { color: var(--bd-red-soft); }
.bd-tile--light .bd-tile-eyebrow { color: var(--bd-red-text); }
.bd-tile-body { display: flex; flex-direction: column; gap: 14px; }
.bd-tile h2 { font-family: Poppins, sans-serif; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.1; font-weight: 700; color: inherit; margin: 0; min-height: 2.2em; }
.bd-tile p { font-size: 16px; line-height: 1.55; margin: 0; max-width: 540px; }
.bd-tile--dark p { color: #c9c9c9; }
.bd-tile--light p { color: var(--bd-muted); }
.bd-tile-more { font-size: 14px; font-weight: 600; }
/* Keep tile text colours on hover/focus (the global a:hover colour is blue, never use it) */
.bd a.bd-tile--dark:hover, .bd a.bd-tile--dark:focus,
.bd a.bd-tile--red:hover, .bd a.bd-tile--red:focus { color: #fff; }
.bd a.bd-tile--light:hover, .bd a.bd-tile--light:focus { color: var(--bd-ink); }
.bd a.bd-tile--dark:hover .bd-tile-more { color: var(--bd-red-soft); }
.bd a.bd-tile--light:hover .bd-tile-more { color: var(--bd-red-text); }

/* Numbered steps */
.bd-step { display: grid; grid-template-columns: 96px 1fr 1.4fr; gap: 24px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--bd-line); }
.bd-step:first-child { border-top: 2px solid var(--bd-ink); }
.bd-step:last-of-type { border-bottom: 1px solid var(--bd-line); }
.bd-step-num { font-size: 44px; font-weight: 700; line-height: 1; color: var(--bd-red); }
.bd-step-title { font-size: 22px; font-weight: 600; line-height: 1.3; }
.bd-step-desc { font-size: 15px; line-height: 1.6; color: var(--bd-muted); margin: 0; }

/* Quotes and people */
.bd-quote-feature { background: var(--bd-ink); color: #fff; border-radius: 24px; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.bd-quote-feature blockquote { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.35; font-weight: 500; margin: 0; padding: 0; border: 0; color: #fff; }
.bd-quote-card { background: #fff; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.bd-quote-card p { font-size: 15px; line-height: 1.6; color: var(--bd-ink); margin: 0; flex-grow: 1; }
.bd-stars { color: var(--bd-red); letter-spacing: 2px; font-size: 14px; }
.bd-person { display: flex; align-items: center; gap: 12px; }
.bd-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bd-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.bd-person-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.bd-person-role { font-size: 13px; color: var(--bd-muted); }
.bd-quote-feature .bd-person-role { color: #a8a8a8; }

/* Carousel nav */
.bd-nav { display: flex; gap: 8px; }
.bd-nav-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--bd-ink); background: transparent; color: var(--bd-ink); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: Poppins, sans-serif; transition: background .2s, color .2s; }
.bd-nav-btn:hover { background: var(--bd-ink); color: #fff; }

/* Stats row */
.bd-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--bd-ink); }
.bd-stat { padding-top: 36px; display: flex; flex-direction: column; gap: 6px; color: var(--bd-ink); transition: opacity .2s; }
.bd-stat:hover { opacity: .7; color: var(--bd-ink); }
.bd-stat strong { font-size: clamp(40px, 5vw, 72px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.bd-stat--red strong { color: var(--bd-red); }
.bd-stat span { font-size: 14px; color: var(--bd-muted); }

/* Tablet */
@media (max-width: 1023px) {
    .bd-tile--7, .bd-tile--5 { grid-column: span 12; }
    .bd-tile, .bd-tile--tall { min-height: 0; }
    .bd-section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Phone */
@media (max-width: 640px) {
    .bd-section { padding: 56px 0; }
    .bd-card { padding: 26px; border-radius: 20px; }
    .bd-bento { gap: 14px; }
    .bd-tile { padding: 26px; border-radius: 20px; gap: 16px; }
    .bd-tile p { font-size: 14px; }
    .bd-step { grid-template-columns: 52px 1fr; gap: 6px 12px; padding: 22px 0; }
    .bd-step-num { font-size: 30px; }
    .bd-step-title { font-size: 18px; }
    .bd-step-desc { grid-column: 2; font-size: 14px; }
    .bd-stat { padding-top: 18px; }
    .bd-stat span { font-size: 11px; line-height: 1.4; }
}