:root {
  --page-margin: 1.25rem;
  --radius-card: 1.875rem;
  --radius-btn: 0.625rem;
  --btn-h: 3.125rem;
  --header-h: 3.75rem;
  --shadow-header: 0 0.125rem 0.25rem rgba(0, 0, 0, .05);
  --rule: color-mix(in srgb, var(--lavender) 28%, transparent);
  --field-bg: color-mix(in srgb, var(--lavender) 15%, transparent);
  --badge-w: 10.9375rem;
  --cw: calc(100vw - 2 * var(--page-margin));

  --sec-pad: clamp(3.125rem, calc(1.44118rem + 7.0588vw), 5rem);
  --corner-gap: clamp(1.1875rem, calc(0.58088rem + 2.5882vw), 1.875rem);
  --section-gap: 1.875rem;
  --t: .2s;

  --fs-badge-label: 0.875rem;
  --fs-badge-value: 1.125rem;
  --badge-label-gap: clamp(0.5rem, calc(0.38971rem + 0.4706vw), 0.625rem);
}

@media (min-width: 800px) {
  :root {
    --sec-pad: clamp(5rem, calc(1.875rem + 6.25vw), 8.125rem);
  }
}

@media (min-width: 1280px) { :root {
    --page-margin: 2.5rem;
    --section-gap: 3.125rem;
    --corner-gap: clamp(3.125rem, calc(-1.875rem + 6.25vw), 4.375rem);
    --fs-badge-label: 1.0625rem;
    --badge-label-gap: clamp(0.75rem, calc(0.25rem + 0.625vw), 0.875rem); } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--beige-darker);
  color: var(--indigo);
  padding-top: var(--header-h);
  overflow-anchor: none;
  font-family: 'Fixel', system-ui, sans-serif;
  font-stretch: 100%;
  font-variation-settings: 'wdth' 100;
  font-weight: 500;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }

.section-inner { position: relative; z-index: 1; padding-block: var(--sec-pad); }

.section-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.section-intro { grid-column: 2 / span 4; grid-row: 1; }
.section-side  { grid-column: 7 / span 5; grid-row: 1; }

@media (min-width: 800px) and (max-width: 1279px) { .grid-12 > .col-steps { grid-column: 4 / span 6; } }
@media (min-width: 800px) and (max-width: 1119px) { .grid-12 > .col-steps { grid-column: 3 / span 8; } }
@media (min-width: 800px) and (max-width: 959px)  { .grid-12 > .col-steps { grid-column: 2 / span 10; } }

main > section + section { padding-top: var(--section-gap); }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); }

.section-card {
  margin-inline: var(--page-margin);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.stat__label {
  display: block;
  font-family: 'Fixel', sans-serif; font-style: italic; font-weight: 500;
  font-size: var(--fs-badge-label); line-height: 1.5; letter-spacing: .02em;
  color: var(--indigo);
  text-align: center;
  margin-bottom: var(--badge-label-gap);
}
.stat__value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding-block: .5rem;
  text-align: center;
  overflow-wrap: anywhere;
  border-radius: .625rem;
  background: var(--accent-secondary);
  color: var(--text-white);
  font-weight: 500;
  font-size: var(--fs-badge-value);
  line-height: 1.3;
}
.stat--status .stat__value { background: var(--accent-live); color: var(--text-white); }
.stat--status.is-down .stat__value { background: var(--accent-primary-1); color: var(--text-white); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding-inline: 10px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: var(--fs-btn1);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--t) ease, color var(--t) ease, box-shadow var(--t) ease;
}
.btn--primary { background: var(--accent-primary-2); color: var(--text-white); }
.btn--primary:hover { background: var(--accent-primary-1); }

section[id] { scroll-margin-top: calc(var(--header-h) - var(--section-gap) - var(--corner-gap)); }

.to-top {
  position: fixed;
  right: var(--page-margin);
  bottom: var(--page-margin);
  z-index: 40;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--beige-light);
  box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--indigo) 30%, transparent);
  opacity: 0; visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity var(--t) ease, transform var(--t) ease, visibility var(--t), background-color var(--t) ease;
}
.to-top svg { width: 1.25rem; height: 1.25rem; }
.to-top:hover { background: var(--accent-primary-1); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

.corner {
  position: absolute; width: 1.875rem; height: 1.875rem;
  border: .0625rem solid var(--corner-color, var(--accent-secondary));
  pointer-events: none;
}
.corner--tl { top: var(--corner-inset-y, var(--corner-gap)); left:  var(--corner-inset-x, var(--corner-gap)); border-right: 0; border-bottom: 0; }
.corner--tr { top: var(--corner-inset-y, var(--corner-gap)); right: var(--corner-inset-x, var(--corner-gap)); border-left: 0; border-bottom: 0; }
.corner--bl { bottom: var(--corner-inset-y, var(--corner-gap)); left:  var(--corner-inset-x, var(--corner-gap)); border-right: 0; border-top: 0; }
.corner--br { bottom: var(--corner-inset-y, var(--corner-gap)); right: var(--corner-inset-x, var(--corner-gap)); border-left: 0; border-top: 0; }

a,
button,
.copy-word,
[data-copy],
[data-scroll-to],
[data-scroll-top] {
  cursor: url('../assets/coin-cursor.png') 16 16, pointer;
}