/* The template's material, marigold instead of blue. Loaded after its own stylesheets on every page. */
:root {
  --sh-base: #0B0A08; --sh-panel: #16130E; --sh-text: #EBE2D2; --sh-mute: #9C907C; --sh-line: #2B261C; --sh-accent: #F2B632; --sh-warn: #E5553B;
  --sh-num: "IBM Plex Mono", ui-monospace, monospace;
  --lightning-color: #F2B632;
}
html, body { background-color: var(--sh-base); color: var(--sh-text); }
::selection { background: var(--sh-accent); color: var(--sh-base); }
.m { font-family: var(--sh-num); letter-spacing: 0; font-size: .86em; }

.highlight.is-dark { background-color: var(--sh-accent); }
.stat-number-circle { background: var(--sh-line) border-box; }

/* nothing under 12px */
.loader-span { font-size: .75rem; letter-spacing: .04rem; }
.micro-text { font-size: .75rem; letter-spacing: .02rem; }
.micro-text.micro { color: #8A7E69; }
.step-number { font-family: var(--sh-num); }
.stat-number { font-family: var(--font--sans-typography); }
.nav-button, .icon-button { font-size: .75rem; letter-spacing: .12rem; }
.subheading.is-legal { font-size: .75rem; }

/* hero: the hook is longer than the template's line */
.hero-title { max-width: 72vw; }
.nav-bar .nav-button.is-non { opacity: .4; }

/* the template's footer is white: here it is a panel with a marigold wordmark */
.footer-section { background-color: var(--sh-panel); }
.footer-letterform { color: var(--sh-accent); }
.footer-heading { color: var(--sh-text); }
.subheading.is-legal, .sf-link { color: var(--sh-mute); }
.sf-link:hover { color: var(--sh-accent); }
.icon-button.is-dark { background-color: var(--sh-accent); color: var(--sh-base); }
.icon-button.is-dark .gate-icon { color: var(--sh-base); }
.main-logo.is-footer { color: var(--sh-text); }
.benefits-box-logo { color: var(--sh-text); width: 10vw; min-width: 8.5rem; }
.loader-logo { width: 9rem; }

/* the grid of words links to the page that explains them */
.word-link { color: inherit; text-decoration: none; display: block; transition: color .2s; }
.word-link:hover { color: var(--sh-accent); }
.heading-3.is-industry { white-space: nowrap; }

/* LED band in the partner marquee's slot */
.logo-section { padding-top: var(--_responsive-sizes---spacing--m); }
.led-band { width: 100%; background: var(--sh-base); border-block: 1px solid var(--sh-line); padding: 1.1rem 0; }
.led-band canvas { display: block; width: 100%; height: 108px; }

.split-break { color: var(--sh-accent); }

/* text sits on this loop, so it stays low */
.letter-video video { filter: brightness(.5); }
.stat-number-micro-text { display: none; }

@media (max-width: 767px) {
  .hero-title { max-width: 94vw; }
  .heading-3.is-industry { font-size: 8.4vw; }
  .nav-button { letter-spacing: .05rem; }
  .nav-bar { display: flex !important; padding-left: .7rem; padding-right: .7rem; max-width: calc(100vw - 2rem); }
  .nav-button { white-space: nowrap; }
  .hero-section .nav-button { letter-spacing: .01rem; }
  .nav-bar { column-gap: .35rem; }
  .nav-button.is-non { padding-inline: .1rem; }
  .subheading.is-legal { letter-spacing: .03rem; }
  .sf-link { white-space: nowrap; }
  .led-band canvas { height: 60px; }
}

/* DIVVY wordmark: the approved mark beside the name; sized by height so it keeps its proportions */
.main-logo, .main-logo.is-footer { width: auto; height: 2.1rem; }
.loader-logo { width: 6rem; }

/* hero: contract address + X, built from the template's own icon button. px on purpose: the site's rem follows the viewport */
.ca-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 8px; }
.ca-row .icon-button { min-height: 40px; justify-content: center; gap: 10px; letter-spacing: .12rem; cursor: pointer; border: 0; font-size: 12px; }
.ca-copy { font-family: var(--font--mono-typography); }
.ca-copy .ca-tag { color: var(--sh-mute); }
.ca-copy .ca-addr { font-family: var(--sh-num); letter-spacing: .02rem; text-transform: none; font-size: 13px; }
.ca-copy .ca-short { display: none; }
.ca-copy .ca-done { display: none; color: var(--sh-accent); }
.ca-copy.is-copied .ca-addr { display: none !important; }
.ca-copy.is-copied .ca-done { display: inline; }
.ca-copy-icon { width: 14px; height: 14px; flex: none; }
.ca-x-icon { width: 15px; height: 15px; flex: none; }
.ca-x span { text-transform: none; letter-spacing: .06rem; }
@media (prefers-reduced-motion: no-preference) {
  html.is-ready.fonts-loaded .ca-row { animation: ca-in .9s var(--ease-out-power2) both; animation-delay: .7s; }
  @keyframes ca-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1100px) {
  .ca-copy .ca-full { display: none; }
  .ca-copy .ca-short { display: inline; }
}
@media (max-width: 767px) {
  .main-logo, .main-logo.is-footer { height: 1.9rem; }
  .ca-row { gap: 6px; max-width: calc(100vw - 2rem); }
  .ca-row .icon-button { padding: 0 14px; letter-spacing: .06rem; }
  .icon-button.is-mobile { margin-top: 4px; }
  .ca-copy .ca-tick { display: none; }
}
/* short phones: the hero's own spacing tightens so the subline keeps clear of the wordmark */
@media (max-width: 767px) and (max-height: 700px) {
  .hero-flex { row-gap: 12px; }
  .ca-row .icon-button { min-height: 38px; }
}