/* Fonts: each page links Google Fonts in its <head> (see AGENTS.md). */
/* Belay components. Every value comes from tokens.css (generated from tokens.json). */

.by-root, .by-root * { box-sizing: border-box; }
.by-root {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Button ---------- */
.by-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: 400 16px/24px var(--font-sans);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background: var(--emerald); color: var(--on-emerald);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: opacity .15s ease, background-color .15s ease;
}
.by-btn:hover { opacity: .86; }
.by-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.by-btn--secondary { background: transparent; color: var(--emerald); border: 1px solid var(--emerald); padding: 13px 25px; }
.by-btn--secondary:hover { background: var(--surface-marble); opacity: 1; }
.by-btn--inverse { background: #ffffff; color: #17171c; }
.by-btn--inverse:focus-visible { outline-color: #ffffff; }
.by-btn--compact { padding: 0 var(--space-4); height: 40px; }
.by-btn[disabled], .by-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

.by-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.by-link:hover { text-decoration-thickness: 2px; }
.by-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- Eyebrow & Tag ---------- */
.by-eyebrow {
  font: 400 14px/20px var(--font-mono);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0;
}
.by-tag {
  display: inline-flex; align-items: center;
  font: 400 14px/20px var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--ink-strong); color: var(--on-ink-strong);
}
.by-tag--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.by-tag--success { background: var(--mint); color: var(--success); }

/* ---------- Announcement bar ---------- */
.by-announce {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: var(--space-2) var(--space-12) var(--space-2) var(--space-4);
  background: #000000; color: #ffffff;
  font: 400 14px/20px var(--font-sans); position: relative; text-align: center; flex-wrap: wrap;
}
.by-announce a { color: #ffffff; }
.by-announce__close {
  position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #ffffff; font-size: 18px; line-height: 1; cursor: pointer; padding: var(--space-1);
}

/* ---------- Nav bar ---------- */
.by-nav {
  display: flex; align-items: center; gap: var(--space-8);
  height: var(--nav-height); padding: 0 var(--space-6);
  background: var(--surface); border-bottom: 1px solid var(--hairline);
}
.by-wordmark { font: 500 26px/1 var(--font-sans); letter-spacing: -.02em; color: var(--pine); text-decoration: none; }
.by-nav__links { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.by-nav__links a { color: var(--ink); text-decoration: none; font-size: 16px; }
.by-nav__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.by-nav__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-6); }
.by-nav__end > a:not(.by-btn) { color: var(--ink); text-decoration: none; }

.by-nav--sticky { position: sticky; top: 0; z-index: 10; }

/* ---------- Hero ---------- */
.by-hero { text-align: center; padding: var(--space-24) var(--space-6) var(--space-16); }
.by-hero__title {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 96px; line-height: 96px; letter-spacing: -1.92px;
  margin: 0 auto; max-width: 14ch; text-wrap: balance; color: var(--ink);
}
.by-hero__dek { font-size: 18px; line-height: 25.2px; max-width: var(--measure); margin: var(--space-6) auto 0; color: var(--ink); }
.by-hero__actions { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-8); flex-wrap: wrap; }
@media (max-width: 720px) { .by-hero__title { font-size: 56px; line-height: 56px; letter-spacing: -1.1px; } }

/* ---------- Section headings ---------- */
.by-h-xl { font: 400 60px/60px var(--font-sans); letter-spacing: -1.2px; margin: 0; text-wrap: balance; }
.by-h-lg { font: 400 48px/57.6px var(--font-sans); letter-spacing: -.48px; margin: 0; text-wrap: balance; }
.by-h-md { font: 400 32px/38.4px var(--font-sans); letter-spacing: -.32px; margin: 0; }
.by-title { font: 400 24px/31.2px var(--font-sans); margin: 0; }
@media (max-width: 720px) { .by-h-lg { font-size: 36px; line-height: 43px; } .by-h-xl { font-size: 44px; line-height: 46px; } }

/* ---------- Product panel ---------- */
.by-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center;
  padding: var(--space-16); border-radius: var(--radius-xl);
  background: var(--surface-stone); color: var(--ink);
}
.by-panel--dark { background: #000000; color: #ffffff; }
.by-panel--dark .by-eyebrow { color: #bbbbc3; }
.by-panel__copy { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; min-width: 0; }
.by-panel__copy p { margin: 0; max-width: 440px; }
.by-panel__copy .by-btn { margin-top: var(--space-4); }
.by-panel__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--surface-mist); max-width: 100%; overflow: hidden; }
.by-panel--dark .by-panel__media { background: #1d1d22; }
@media (max-width: 720px) { .by-panel { grid-template-columns: 1fr; padding: var(--space-8) var(--space-6); } }

/* ---------- Story card ---------- */
.by-card { display: flex; flex-direction: column; gap: var(--space-4); color: var(--ink); text-decoration: none; min-width: 0; }
.by-card__media { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: var(--surface-mist); overflow: hidden; position: relative; }
.by-card__media .by-tag { position: absolute; top: var(--space-4); left: var(--space-4); }
.by-card__body { display: flex; flex-direction: column; gap: var(--space-2); }
.by-card__meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.by-card:hover .by-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.by-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-lg); }

/* ---------- Industry card (bulleted) ---------- */
.by-icard { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-top: 1px solid var(--hairline); }
.by-icard ul { margin: 0; padding-left: 18px; color: var(--ink-muted); display: grid; gap: var(--space-1); }


/* ---------- Forest CTA band ---------- */
.by-cta { background: var(--forest); color: var(--on-forest); padding: var(--space-24) var(--space-6); text-align: center; border-radius: var(--radius-xl); }
.by-cta .by-h-lg { color: var(--on-forest); }
.by-cta p { color: var(--on-forest-muted); margin: var(--space-4) auto 0; max-width: var(--measure); font-size: 18px; line-height: 25.2px; }
.by-cta .by-btn { margin-top: var(--space-8); }


/* ---------- Centered nav, split hero, facts row, UI cards (from the homepage) ---------- */
.by-nav--centered{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-8)}
.by-nav--centered .by-nav__links{gap:var(--space-12)}
.by-nav--centered .by-nav__end{justify-self:end;margin-left:0}
.by-media{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface-mist)}
.by-media img,.by-media video{display:block;width:100%;height:100%;object-fit:cover}
.by-hero--split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-12);align-items:center;padding-block:var(--space-24);text-align:left}
.by-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);min-width:0}
.by-hero--split .by-eyebrow,.by-hero--split .by-hero__title,.by-hero--split .by-hero__dek,.by-hero--split .by-hero__actions{margin:0}
.by-hero--split .by-hero__title{max-width:none}
.by-hero--split .by-hero__dek{max-width:520px}
.by-hero--split .by-hero__actions{justify-content:flex-start}
.by-hero__media{aspect-ratio:16/9;border-radius:var(--radius-xl) 0 0 var(--radius-xl);margin-right:calc((min(100vw, var(--container)) - 100vw) / 2 - var(--space-6))}

/* at-a-glance facts over the hero video */
.by-facts{z-index:1;position:absolute;left:0;right:0;bottom:0;margin:0;padding:var(--space-16) var(--space-8) var(--space-6);list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:linear-gradient(to top,color-mix(in srgb,var(--scrim) 72%,transparent),color-mix(in srgb,var(--scrim) 0%,transparent));color:var(--on-forest);pointer-events:none}
.by-facts li{display:flex;flex-direction:column;gap:2px;padding-inline:var(--space-6);border-left:1px solid color-mix(in srgb,var(--on-forest) 30%,transparent);min-width:0}
.by-facts li:first-child{padding-left:0;border-left:0}
.by-facts strong{font-weight:400;font-size:16px;line-height:24px}
.by-facts span{font-size:14px;line-height:20px;color:color-mix(in srgb,var(--on-forest) 75%,transparent)}
@media (max-width:900px){
  .by-hero__media{aspect-ratio:auto;background:none}
  .by-hero__media video{border-radius:var(--radius-xl) 0 0 var(--radius-xl)}
  .by-uicards--hero{display:none}
  .by-hero__media video{aspect-ratio:16/9;height:auto}
  .by-facts{position:static;background:none;color:var(--ink);padding:var(--space-6) 0 0;gap:var(--space-4)}
  .by-facts li{border-left-color:var(--hairline)}
  .by-facts span{color:var(--ink-muted)}
}
@media (max-width:640px){.by-facts{grid-template-columns:1fr}.by-facts li{border-left:0;padding-left:0}}
.by-uicards--hero .by-uicard:nth-child(2) .by-sk:last-child{display:none}
.by-uicards{position:absolute;right:calc(-1 * var(--space-16));top:38%;width:56%;display:grid;gap:var(--space-3)}
.by-uicard{background:var(--surface);border-radius:var(--radius-lg);padding:var(--space-6);display:grid;gap:var(--space-3);box-shadow:0 24px 48px -16px color-mix(in srgb,var(--scrim) 22%,transparent),0 6px 16px color-mix(in srgb,var(--scrim) 6%,transparent)}
.by-uicard:first-child{background:color-mix(in srgb,var(--on-forest) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.by-hero__media--cards{overflow:visible}
.by-hero__media--cards video{border-radius:inherit}
.by-hero__media--cards .by-facts{border-bottom-left-radius:inherit}
.by-uicards--hero{z-index:2;right:auto;left:calc(-1 * var(--space-12) - var(--space-1));top:var(--space-6);width:34%;gap:var(--space-2)}
.by-uicards--hero .by-uicard{padding:var(--space-4);gap:var(--space-2)}
.by-uicards--hero .by-sk--btn{height:24px}
@media (max-width:900px){.by-uicards--hero{left:calc(-1 * var(--space-4));width:56%}}
.by-uicard--float{position:absolute;left:calc(-1 * var(--space-12));bottom:12%;width:46%;background:color-mix(in srgb,var(--on-forest) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media (max-width:720px){.by-uicard--float{left:50%;transform:translateX(-50%);width:70%;bottom:var(--space-6)}}
.by-uicards .by-uicard{position:relative}
.by-uicards .by-uicard:nth-child(1){z-index:1}.by-uicards .by-uicard:nth-child(2){z-index:2}.by-uicards .by-uicard:nth-child(3){z-index:3}
.by-sk{display:block;height:10px;border-radius:var(--radius-pill);background:var(--surface-mist)}
.by-sk--title{height:16px;width:70%;background:var(--hairline)}
.by-sk--short{width:55%}
.by-sk--btn{height:32px;width:44%;background:var(--emerald);margin-top:var(--space-1)}
@media (max-width:900px){
  .by-hero--split{grid-template-columns:1fr}
  .by-hero__media{aspect-ratio:16/9;margin-right:calc(-1 * var(--space-6))}
  .by-nav__links{display:none}
  .by-nav--centered{grid-template-columns:1fr auto}
}

@media (prefers-reduced-motion: reduce) { .by-btn { transition: none; } }