/* MOAT: fonts and palette over the template's stylesheet (loaded after it).
   Deep green-black ground, cream text, ticker-tape amber as the one accent:
   bg #08130F, panel #0D1C16, panel2 #12261D, amber #F2A33A, sand #8C8270 (second-tier lines only), cream #EFE6D2,
   rust #D9604A only for sells and losses. */
@font-face { font-family: "Hanken Grotesk"; src: url(/by/fonts/HankenGrotesk-var.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/by/fonts/DMMono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/by/fonts/DMMono-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root, :host {
  --by-bg: #08130F; --by-panel: #0D1C16; --by-panel2: #12261D; --by-amber: #F2A33A; --by-amber2: #B8761F; --by-sand: #8C8270;
  --by-text: #EFE6D2; --by-red: #D9604A; --by-line: rgba(239, 230, 210, .12); --by-line2: rgba(239, 230, 210, .22); --by-dim: rgba(239, 230, 210, .66); --by-mute: rgba(239, 230, 210, .5);
  --by-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --by-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --color-black: #08130F;
  --color-cream: #EFE6D2;
  --color-light-blue: #F2A33A;
  --color-dark-blue: #F2A33A;
  --color-dark-cream: #0D1C16;
  --color-water-blue: #F2A33A;
  --color-grey: rgba(239, 230, 210, .66);
}
html, body { color: var(--by-text); background-color: var(--by-bg); }
html, body, .font-main { font-family: var(--by-sans); }
h1, h2, h3, .title-text-item h4 { letter-spacing: -.02em; }
::selection { background: rgba(242, 163, 58, .35); }
.font-mono, .text-11.uppercase { font-family: var(--by-mono); }

/* the light sections of the template are dark here: text and hairlines turn light */
header.text-black { color: var(--by-text); }
.border-black\/12 { border-color: var(--by-line); }
.text-grey { color: var(--by-dim); }
.outline-black { outline-color: var(--by-amber); }

/* buttons: amber with dark text, square corners */
a.h-45, button.h-45 { background-color: var(--by-amber) !important; color: var(--by-bg) !important; font-family: var(--by-sans); font-weight: 600; letter-spacing: .01em; border-radius: 0 !important; }
a.h-45:hover, button.h-45:hover { background-color: var(--by-text) !important; color: var(--by-bg) !important; }

/* panels: the specs accordion and the footer block */
section#specifications .bg-light-blue, footer .bg-light-blue { background-color: var(--by-panel); }
.bg-dark-blue { color: var(--by-bg); }
h3.bg-dark-blue { font-family: var(--by-mono); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

/* numbers in mono */
.title-text-item h5, .tech-part2 h5 { font-family: var(--by-mono); font-weight: 500; letter-spacing: -.03em; color: var(--by-amber); }
section#specifications [class*="text-grey"] { font-family: var(--by-mono); font-size: 13px; }

/* the wordmark */
header svg.w-161 text, footer svg text { font-family: var(--by-sans); font-weight: 700; letter-spacing: .06em; }
header svg.w-161 { overflow: visible; }

/* our canvases over the template's media frames */
.by-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 3; pointer-events: none; }
/* the contract address and the X button, side by side under the hero sentence (square, hairline, mono like the specs) */
.by-ca-row { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 18px; pointer-events: auto; }
.by-ca, .by-xbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; border: 1px solid var(--by-line2); border-radius: 0; background: rgba(8, 19, 15, .72); color: var(--by-text); font: 400 13px/1 var(--by-mono); padding: 0 14px; cursor: pointer; text-decoration: none; transition: border-color .2s, color .2s; }
.by-ca .k { color: var(--by-mute); }
.by-ca .cp { color: var(--by-amber); border-left: 1px solid var(--by-line2); padding-left: 10px; }
.by-ca .short { display: none; }
.by-xbtn { font-weight: 500; }
.by-xbtn svg { flex: none; }
.by-ca:hover, .by-xbtn:hover { border-color: var(--by-amber); }
.by-xbtn:hover { color: var(--by-amber); }
@media (max-width: 720px) { .by-ca .full { display: none; } .by-ca .short { display: inline; } }

/* the hero's button, under the sentence */
.by-hero-cta { position: relative; margin: -40px 0 52px; }
@media (min-width: 800px) { .by-hero-cta { margin: -64px 0 72px; height: 48px; padding: 0 28px; font-size: 14px; } }

/* phones: a smaller header button, same primary style */
@media (max-width: 799px) { header a.h-45 { height: 36px; padding: 0 14px; font-size: 12px; } }

/* the fixed header stays above every section; once scrolled it is a solid band with a hairline */
header.fixed { z-index: 1000 !important; transition: background-color .3s, border-color .3s; border-bottom: 1px solid transparent; }
html[data-by-scrolled] header.fixed { background-color: var(--by-bg); border-bottom-color: var(--by-line); }

/* live figures home.js writes under a section's own words */
.by-live { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 18px; font: 500 13px/1.3 var(--by-mono); letter-spacing: .02em; color: var(--by-dim); }
.by-live b { color: var(--by-amber); font-weight: 500; font-size: 15px; }
.by-live i { width: 7px; height: 7px; background: var(--by-amber); display: inline-block; align-self: center; animation: by-blink 1.6s steps(2) infinite; }
@keyframes by-blink { 50% { opacity: .2; } }
.by-live.center { justify-content: center; width: 100%; }

/* Float vs MOAT, in the about block */
.by-vs { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 14px; line-height: 1.4; }
.by-vs th { text-align: left; font: 500 12px/1 var(--by-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--by-mute); padding: 0 12px 12px 0; border-bottom: 1px solid var(--by-line2); }
.by-vs td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--by-line); vertical-align: top; }
.by-vs td:first-child { font-weight: 600; width: 26%; }
.by-vs td.f { color: var(--by-mute); width: 30%; }
.by-vs td.b { color: var(--by-text); }
.by-vs td.b em { font-style: normal; font-family: var(--by-mono); color: var(--by-amber); font-size: 13px; }
.by-vs a { color: var(--by-amber); text-underline-offset: 3px; }
.by-vs-wrap { grid-column: 1 / -1; padding: 0 0 24px; }
@media (max-width: 767px) { .by-vs td:first-child { width: auto; } .by-vs td.f { display: none; } .by-vs th.f { display: none; } }

/* with the CA row present, the hero button gives its bottom space to the row (the hero is bottom-aligned) */
.by-hero-cta:has(~ .by-ca-row) { margin-bottom: 0; }
.by-hero-cta ~ .by-ca-row { margin: 16px 0 52px; justify-content: center; }
@media (min-width: 800px) { .by-hero-cta ~ .by-ca-row { margin: 18px 0 72px; } }