/* ==========================================================================
   Proof of Internet — site
   Design tokens, type system and components mirrored from the live site.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: mondwest;
  src: url(/fonts/Mondwest_Regular-s.p.f125b64c.woff2) format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: neueBit;
  src: url(/fonts/NeueBit_Regular-s.p.b8027321.woff2) format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pixelify Sans';
  src: url(/fonts/01d67e7cc17e7674-s.p.5b396bc1.woff2) format('woff2');
  font-display: swap;
  font-weight: 400 700;
  font-style: normal;
}
@font-face {
  font-family: geistPixelSquare;
  src: url(/fonts/GeistPixel_Square.p.fcca60d3.woff2) format('woff2');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

/* ---------- Tokens ---------- */
:root {
  /* raw palette */
  --core-white: #fff;
  --core-black: #000;
  --stone-100: #f6f5f1;
  --stone-200: #e6e5e0;
  --stone-300: #cecdc9;
  --stone-400: #9f9b92;
  --stone-500: #645e54;
  --stone-600: #3d3934;
  --stone-700: #292623;
  --stone-800: #201c19;
  --stone-900: #16120f;
  --copper-300: #ffd3e0;
  --copper-400: #ffcada;
  --copper-500: #f7a8c4;
  --copper-600: #7d4455;
  --copper-800: #3a1d26;
  --marine-500: #16daaa;

  /* semantic (dark) */
  --text-primary: var(--core-white);
  --text-secondary: var(--stone-300);
  --text-tertiary: var(--stone-400);
  --surface-primary: var(--stone-800);
  --surface-secondary: var(--stone-700);
  --page-primary: var(--stone-900);
  --border: rgba(255, 255, 255, 0.1);

  /* families */
  --font-heading: mondwest, 'Times New Roman', serif;
  --font-body: neueBit, Arial, sans-serif;
  --font-caption: 'Pixelify Sans', Arial, sans-serif;
  --font-body-alt: geistPixelSquare, 'Courier New', monospace;

  /* type scale */
  --text-display-lg: 6rem;
  --text-heading-xl: 4rem;
  --text-heading-lg: 3rem;
  --text-heading-md: 2.5rem;
  --text-heading-sm: 2rem;
  --text-heading-xs: 1.75rem;
  --text-heading-2xs: 1.5rem;
  --text-body-xl: 2rem;
  --text-body-lg: 1.75rem;
  --text-body-md: 1.75rem;
  --text-body-sm: 1.5rem;
  --text-body-xs: 1.25rem;
  --text-body-2xs: 1rem;
  --text-body-xl-alt: 1.5rem;
  --text-body-lg-alt: 1.25rem;
  --text-body-md-alt: 1.125rem;
  --text-body-sm-alt: 1rem;
  --text-body-xs-alt: 0.875rem;
  --text-body-2xs-alt: 0.75rem;
  --text-caption-xl: 2rem;
  --text-caption-subtitle: 1.5rem;
  --text-caption-lg: 1rem;
  --text-caption-md: 0.875rem;
  --text-caption-sm: 0.75rem;

  --heading-leading: 105%;
  --heading-tracking: -0.75px;
}

@media (max-width: 767px) {
  :root {
    --text-display-lg: 5.25rem;
    --text-heading-xl: 3.5rem;
    --text-heading-lg: 2.625rem;
    --text-heading-md: 2.1875rem;
    --text-heading-sm: 1.75rem;
    --text-heading-xs: 1.53125rem;
    --text-heading-2xs: 1.3125rem;
    --text-body-xl: 1.75rem;
    --text-body-lg: 1.53125rem;
    --text-body-md: 1.53125rem;
    --text-body-sm: 1.3125rem;
    --text-body-xs: 1.09375rem;
    --text-body-2xs: 0.875rem;
    --text-body-xl-alt: 1.3125rem;
    --text-body-lg-alt: 1.09375rem;
    --text-body-md-alt: 0.984375rem;
    --text-body-sm-alt: 0.875rem;
    --text-caption-xl: 1.75rem;
    --text-caption-subtitle: 1.375rem;
    --text-caption-lg: 0.875rem;
    --text-caption-md: 0.765625rem;
    --text-caption-sm: 0.65625rem;
  }
}
@media (max-width: 639px) {
  :root {
    --text-display-lg: 3.75rem;
    --text-heading-xl: 2.625rem;
    --text-heading-lg: 2.25rem;
    --text-heading-md: 1.875rem;
    --text-heading-sm: 1.6875rem;
    --text-heading-xs: 1.5rem;
    --text-heading-2xs: 1.3125rem;
    --text-body-xl: 2.25rem;
    --text-body-lg: 1.875rem;
    --text-body-md: 1.6875rem;
    --text-body-sm: 1.5rem;
    --text-body-xs: 1.3125rem;
    --text-body-2xs: 1.125rem;
    --text-body-xl-alt: 1.3125rem;
    --text-body-lg-alt: 1.05rem;
    --text-body-md-alt: 0.84375rem;
    --text-body-sm-alt: 0.75rem;
    --text-caption-xl: 1.5rem;
    --text-caption-subtitle: 1.25rem;
    --text-caption-lg: 1.125rem;
    --text-caption-md: 0.9375rem;
    --text-caption-sm: 0.9375rem;
  }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}
body {
  background-color: var(--page-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  cursor: url(/cursors/cursor-default.svg) 2 2, auto;
  overflow-x: clip;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
  color: inherit;
  background: none;
}
ul,
ol {
  list-style: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type classes ---------- */
.type-display-lg {
  font-family: var(--font-heading);
  font-size: var(--text-display-lg);
  line-height: 100%;
  letter-spacing: -0.75px;
  font-weight: 400;
}
.type-heading-xl,
.type-heading-lg,
.type-heading-md,
.type-heading-sm,
.type-heading-xs,
.type-heading-2xs {
  font-family: var(--font-heading);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  font-weight: 400;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.type-heading-xl {
  font-size: var(--text-heading-xl);
}
.type-heading-lg {
  font-size: var(--text-heading-lg);
}
.type-heading-md {
  font-size: var(--text-heading-md);
}
.type-heading-sm {
  font-size: var(--text-heading-sm);
}
.type-heading-xs {
  font-size: var(--text-heading-xs);
}
.type-heading-2xs {
  font-size: var(--text-heading-2xs);
}

.type-body-xl,
.type-body-lg,
.type-body-md,
.type-body-sm,
.type-body-xs,
.type-body-2xs {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.type-body-xl {
  font-size: var(--text-body-xl);
  line-height: 90%;
}
.type-body-lg {
  font-size: var(--text-body-lg);
  line-height: 90%;
}
.type-body-md {
  font-size: var(--text-body-md);
  line-height: 90%;
}
.type-body-sm {
  font-size: var(--text-body-sm);
  line-height: 85%;
}
.type-body-xs {
  font-size: var(--text-body-xs);
  line-height: 85%;
}
.type-body-2xs {
  font-size: var(--text-body-2xs);
  line-height: 85%;
}

.type-body-xl-alt,
.type-body-lg-alt,
.type-body-md-alt,
.type-body-sm-alt,
.type-body-xs-alt,
.type-body-2xs-alt {
  font-family: var(--font-body-alt);
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.25px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.type-body-xl-alt {
  font-size: var(--text-body-xl-alt);
}
.type-body-lg-alt {
  font-size: var(--text-body-lg-alt);
}
.type-body-md-alt {
  font-size: var(--text-body-md-alt);
}
.type-body-sm-alt {
  font-size: var(--text-body-sm-alt);
}
.type-body-xs-alt {
  font-size: var(--text-body-xs-alt);
}
.type-body-2xs-alt {
  font-size: var(--text-body-2xs-alt);
}

.type-caption-xl,
.type-caption-lg,
.type-caption-md,
.type-caption-sm {
  font-family: var(--font-caption);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 100%;
  text-transform: uppercase;
}
.type-caption-xl {
  font-size: var(--text-caption-xl);
  line-height: 110%;
}
.type-caption-lg {
  font-size: var(--text-caption-lg);
}
.type-caption-md {
  font-size: var(--text-caption-md);
}
.type-caption-sm {
  font-size: var(--text-caption-sm);
}
.normal-case {
  text-transform: none;
}

/* ---------- Layout helpers ---------- */
.page-container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 1rem;
  width: 100%;
}
@media (min-width: 768px) {
  .page-container {
    padding-inline: 2rem;
  }
}
@media (min-width: 1024px) {
  .page-container {
    padding-inline: 4rem;
  }
}

.text-primary {
  color: var(--text-primary);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-tertiary {
  color: var(--text-tertiary);
}
.text-copper {
  color: var(--copper-500);
}

/* ---------- Pixel chrome ---------- */
.clip-pixel-corners,
.pixel-border {
  clip-path: polygon(
    4px 0%,
    calc(100% - 4px) 0%,
    calc(100% - 4px) 4px,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) 100%,
    4px 100%,
    4px calc(100% - 4px),
    0% calc(100% - 4px),
    0% 4px,
    4px 4px
  );
}
.pixel-border {
  --pixel-border-width: 1px;
  isolation: isolate;
  position: relative;
}
.pixel-border::before,
.pixel-border::after {
  content: '';
  position: absolute;
  pointer-events: none;
  clip-path: inherit;
}
.pixel-border::before {
  inset: 0;
  z-index: -2;
  background: currentColor;
}
.pixel-border::after {
  inset: var(--pixel-border-width);
  z-index: -1;
  background-color: inherit;
}

.tile-shadow {
  box-shadow: inset 0 4px 0 var(--stone-600), inset -4px 0 0 var(--stone-600),
    inset 0 -4px 0 var(--stone-900), inset 4px 0 0 var(--stone-900);
}
.tile-shadow-pressed {
  box-shadow: inset 0 4px 0 var(--stone-900), inset -4px 0 0 var(--stone-900),
    inset 0 -4px 0 var(--stone-600), inset 4px 0 0 var(--stone-600);
}

/* Pixel frame (dotted decorative border built from 4px cells) */
.pf {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
.pf-row {
  display: flex;
  height: 12px;
  flex-shrink: 0;
}
.pf-row-fill {
  flex: 1 1 0;
  height: auto;
}
.pf-corner {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.pf-cell {
  width: 4px;
  height: 4px;
}
.pf-on {
  background: currentColor;
}
.pf-hline {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  height: 12px;
}
.pf-hline > i {
  display: block;
  height: 4px;
  background: currentColor;
}
.pf-vline {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 12px;
}
.pf-vline > i {
  display: block;
  width: 4px;
  height: 100%;
  background: currentColor;
}
.pf-gap {
  flex: 1 1 0;
}

/* hover frame that sits outside a control */
.pf-hover {
  position: absolute;
  inset: -12px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.12s linear;
}
.btn:hover .pf-hover,
.icon-link:hover .pf-hover {
  opacity: 0.5;
}
.btn:active .pf-hover,
.btn:focus-visible .pf-hover,
.icon-link:active .pf-hover {
  opacity: 1;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  cursor: url(/cursors/cursor-pointer.svg) 8 2, pointer;
  outline: none;
}
.btn > .btn-face {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-caption);
  font-size: var(--text-caption-lg);
  line-height: 100%;
  font-weight: 500;
  text-transform: uppercase;
  clip-path: polygon(
    4px 0%,
    calc(100% - 4px) 0%,
    calc(100% - 4px) 4px,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) 100%,
    4px 100%,
    4px calc(100% - 4px),
    0% calc(100% - 4px),
    0% 4px,
    4px 4px
  );
}
.btn-sm > .btn-face {
  padding: 0.5rem;
  font-size: var(--text-caption-md);
  justify-content: flex-start;
}
.btn-md > .btn-face {
  padding: 0.5rem 1rem;
  font-size: var(--text-caption-md);
  justify-content: flex-start;
}
.btn-white > .btn-face {
  background: var(--core-white);
  color: var(--stone-800);
}
.btn-white .pf-hover {
  color: rgba(41, 38, 35, 0.4);
}
.btn-stone > .btn-face {
  background: var(--stone-800);
  color: var(--text-primary);
}
.btn-copper > .btn-face {
  background: var(--copper-500);
  /* the accent is a light pink, so the label on it is dark, not white */
  color: var(--stone-900);
}
.btn-sand > .btn-face {
  background: var(--stone-200);
  color: var(--stone-800);
}
.btn .pf-hover {
  color: var(--text-primary);
}
.btn-white .btn-face,
.btn-sand .btn-face {
  color: var(--stone-800);
}
.btn-start > .btn-face {
  justify-content: flex-start;
}
.btn-face > span:not(.btn-icon) {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.btn-nowrap > .btn-face {
  white-space: nowrap;
}
.btn-icon {
  display: flex;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.btn-icon > img,
.btn-icon > svg {
  width: 1.5rem;
  height: 1.5rem;
  max-width: none;
}
.btn-icon > svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ---------- Global CRT overlay ---------- */
.crt-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0.5;
}
.crt-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(
    rgba(255, 255, 255, 0.08) 0px,
    rgba(255, 255, 255, 0.08) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 7px
  );
}
.crt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.35) 100%);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding-top: 0.75rem;
  overflow: visible;
}
.site-nav {
  position: relative;
  z-index: 10;
  width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  color: var(--stone-700);
  background-color: var(--surface-primary);
  --pixel-border-width: 4px;
  clip-path: none;
  overflow: visible;
}
.site-nav::before,
.site-nav::after {
  clip-path: polygon(
    4px 0%,
    calc(100% - 4px) 0%,
    calc(100% - 4px) 4px,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) 100%,
    4px 100%,
    4px calc(100% - 4px),
    0% calc(100% - 4px),
    0% 4px,
    4px 4px
  );
}
.site-nav::after {
  background-color: var(--surface-primary);
}
@media (min-width: 768px) {
  .site-nav {
    justify-content: space-between;
  }
}
.nav-left {
  display: none;
  align-items: center;
  gap: 0.5rem;
  overflow: visible;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: visible;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-list > li {
  position: relative;
  display: flex;
}
.nav-logo {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.nav-logo img {
  width: 2rem;
  height: 2rem;
}
.nav-desktop-only {
  display: none !important;
}
@media (min-width: 768px) {
  .nav-left {
    display: flex;
  }
  .nav-logo {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .nav-menu-btn {
    display: none !important;
  }
  .nav-desktop-only {
    display: inline-flex !important;
  }
}
.nav-chevron {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.2s;
}
[aria-expanded='true'] .nav-chevron {
  transform: rotate(180deg);
}

.nav-panel {
  position: absolute;
  top: calc(100% + 1rem);
  left: 0;
  min-width: 13rem;
  z-index: 60;
  display: none;
  color: var(--stone-400);
  padding: 12px;
}
.nav-panel[data-open='true'] {
  display: block;
}
/* The panel hangs a centimetre below the trigger, and the pointer has to cross
   that gap to reach it. Without something to hover, the pointer is briefly
   over neither, the menu reads that as "left" and shuts in your face. This
   bridges the gap: invisible, not clickable through, and exactly the height of
   the space it covers. */
.nav-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1rem;
  height: 1rem;
}
.nav-panel-inner {
  background: var(--core-white);
  color: var(--stone-800);
  padding: 0.25rem 0.75rem;
}
.nav-panel-inner a {
  display: block;
  padding: 0.85rem 0.25rem;
  font-family: var(--font-caption);
  font-size: var(--text-caption-md);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.15;
  border-bottom: 1px solid var(--stone-300);
}
.nav-panel-inner a:last-child {
  border-bottom: 0;
}
.nav-panel-inner a:hover {
  color: var(--copper-500);
}

/* mobile menu sheet */
.mobile-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--page-primary);
  padding: 6rem 1.5rem 2rem;
  overflow-y: auto;
}
.mobile-sheet[data-open='true'] {
  display: block;
}
.mobile-sheet nav {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.mobile-sheet a,
.mobile-sheet .ms-label {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 90%;
}
.mobile-sheet .ms-label {
  color: var(--text-tertiary);
  font-family: var(--font-caption);
  font-size: var(--text-caption-md);
  text-transform: uppercase;
}
.mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 780px;
  flex-direction: column;
  align-items: center;
  overflow: clip;
  background: var(--page-primary);
  padding-top: 5rem;
}
@media (min-width: 640px) {
  .hero {
    min-height: 900px;
  }
}
.hero-splash {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 0;
  bottom: -100px;
  z-index: 10;
  will-change: transform;
}
.hero-splash img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  user-select: none;
}
.hero-content {
  position: relative;
  z-index: 20;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  padding-block: 6rem;
  text-align: center;
  will-change: transform, opacity;
}
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.hero h1 {
  white-space: pre-line;
  filter: drop-shadow(4px 4px 0px rgba(255, 255, 255, 0.2));
}
.hero-sub {
  max-width: 48rem;
}

/* The two-line hero headline: one line each, centred, the same leading as the
   display scale, and sized so neither line wraps at any width. */
.hero-headline {
  white-space: normal;
  font-size: clamp(1.5rem, 7.3vw, 6rem);
  text-align: center;
}
.hero-line {
  display: block;
}
.hero-line + .hero-line {
  margin-top: 0.12em;
}

/* On a phone a single line would shrink below the body copy, so each line is
   allowed to break in two and keeps its weight. */
@media (max-width: 639px) {
  .hero-headline {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
    line-height: 102%;
  }
  .hero-line {
    text-wrap: balance;
  }
  .hero-line + .hero-line {
    margin-top: 0.08em;
  }
}

.hero-actions {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
}
.hero-crt {
  position: relative;
  z-index: 30;
  display: none;
  width: 100%;
  padding-inline: 1rem;
  will-change: transform;
}
@media (min-width: 768px) {
  .hero-crt {
    display: block;
    padding-inline: 4rem;
  }
}
@media (min-width: 1024px) {
  .hero-crt {
    padding-inline: 8rem;
  }
}
.hero-trees {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 0;
  bottom: -250px;
  z-index: 40;
  will-change: transform;
}
.hero-trees img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.pixel-gradient {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.pixel-gradient > span {
  display: block;
  height: 1.5rem;
  width: 100%;
  background: var(--page-primary);
}

/* ---------- CRT monitor ---------- */
.crt-shell {
  position: relative;
  aspect-ratio: 909 / 840;
  width: 100%;
}
.crt-blackout {
  position: absolute;
  z-index: 0;
  background: var(--core-black);
  top: 11.03%;
  bottom: 26.39%;
  left: 11.48%;
  right: 11.48%;
}
.crt-screen {
  position: absolute;
  z-index: 10;
  overflow: clip;
  top: 11.43%;
  bottom: 26.79%;
  left: 11.88%;
  right: 11.88%;
}
.crt-frame-img {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  height: 100%;
  width: 100%;
  user-select: none;
}
.crt-desktop {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--core-black);
  user-select: none;
  animation: pipboy-power-on 850ms linear both;
}
.crt-desktop-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--stone-200);
  clip-path: polygon(
    68.25% 0%, 68.25% 1.16%, 82.11% 1.16%, 82.11% 1.73%, 89.9% 1.73%, 89.9% 2.31%,
    94.66% 2.31%, 94.66% 2.89%, 97.26% 2.89%, 97.26% 3.47%, 97.69% 3.47%, 97.69% 4.05%,
    98.12% 4.05%, 98.12% 7.51%, 98.56% 7.51%, 98.56% 17.92%, 98.99% 17.92%, 98.99% 29.48%,
    99.86% 29.48%, 99.86% 71.1%, 98.99% 71.1%, 98.99% 82.08%, 98.56% 82.08%, 98.56% 91.91%,
    98.12% 91.91%, 98.12% 95.95%, 97.69% 95.95%, 97.69% 97.11%, 97.26% 97.11%, 97.26% 97.69%,
    95.96% 97.69%, 95.96% 98.27%, 88.6% 98.27%, 88.6% 98.84%, 78.64% 98.84%, 78.64% 99.42%,
    66.09% 99.42%, 66.09% 100%, 33.77% 100%, 33.77% 99.42%, 21.21% 99.42%, 21.21% 98.84%,
    11.26% 98.84%, 11.26% 98.27%, 3.9% 98.27%, 3.9% 97.69%, 2.6% 97.69%, 2.6% 97.11%,
    2.16% 97.11%, 2.16% 95.95%, 1.73% 95.95%, 1.73% 91.91%, 1.3% 91.91%, 1.3% 82.08%,
    0.87% 82.08%, 0.87% 71.1%, 0% 71.1%, 0% 29.48%, 0.87% 29.48%, 0.87% 17.92%,
    1.3% 17.92%, 1.3% 7.51%, 1.73% 7.51%, 1.73% 4.05%, 2.16% 4.05%, 2.16% 3.47%,
    2.6% 3.47%, 2.6% 2.89%, 5.19% 2.89%, 5.19% 2.31%, 9.96% 2.31%, 9.96% 1.73%,
    17.75% 1.73%, 17.75% 1.16%, 31.6% 1.16%, 31.6% 0%
  );
}
.crt-wallpaper {
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}
.crt-icons {
  position: absolute;
  top: 8.7%;
  right: 2.8%;
  bottom: 3.6%;
  left: 2.8%;
}
.crt-icon {
  position: absolute;
  z-index: 10;
  display: flex;
  width: 10cqw;
  min-height: 4.5rem;
  min-width: 5.5rem;
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3cqw;
  padding: 0.375rem 0.5rem;
  color: var(--core-black);
  outline: none;
  text-align: center;
  cursor: url(/cursors/cursor-pointer.svg) 8 2, pointer;
}
@media (min-width: 1024px) {
  .crt-icon {
    min-width: 6.5rem;
  }
}
.crt-icon:hover,
.crt-icon:focus-visible,
.crt-icon[data-selected] {
  background: var(--copper-500);
  color: var(--stone-900);
}
.crt-icon[data-dragging] {
  z-index: 40;
  cursor: url(/cursors/cursor-grab.svg) 8 8, grabbing;
}
.crt-icon .glyph {
  display: flex;
  width: 6.3cqw;
  height: 6.3cqw;
  align-items: center;
  justify-content: center;
}
.crt-icon .glyph svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.crt-icon .label {
  width: 100%;
  text-align: center;
  font-family: var(--font-body-alt);
  font-size: var(--text-body-2xs-alt);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .crt-icon .label {
    font-size: var(--text-body-xs-alt);
  }
}
.crt-menubar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 8.7%;
  background: var(--stone-100);
  color: var(--core-black);
}
.crt-menubar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 63.2183908045977%;
  padding-inline: 4%;
  font-family: var(--font-body-alt);
  font-size: var(--text-body-2xs-alt);
  line-height: 1;
}
@media (min-width: 1024px) {
  .crt-menubar-row {
    font-size: var(--text-body-xs-alt);
  }
}
.crt-menubar-left {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}
.crt-menubar-left svg {
  width: 2.1cqw;
  height: 2.1cqw;
  fill: currentColor;
}
.crt-clock {
  font-variant-numeric: tabular-nums;
}
.crt-scanlines,
.crt-vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 40;
}
.crt-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.06) 3px,
    rgba(0, 0, 0, 0.06) 4px
  );
}
.crt-vignette {
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.18) 100%);
}

@keyframes pipboy-power-on {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 0.85;
  }
  16% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.65;
  }
  38% {
    opacity: 0.25;
  }
  52% {
    opacity: 0.9;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Workflow intro ---------- */
.section {
  background: var(--page-primary);
}
.section-intro {
  padding-top: 3rem;
}
.section-pad {
  padding-block: 3rem;
}
@media (min-width: 768px) {
  .section-intro {
    padding-top: 4rem;
  }
  .section-pad {
    padding-block: 4rem;
  }
}
@media (min-width: 1024px) {
  .section-intro {
    padding-top: 6rem;
  }
  .section-pad {
    padding-block: 5rem;
  }
}
.intro-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--surface-secondary);
  padding-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  .intro-row {
    flex-direction: row;
    align-items: flex-end;
    gap: 4rem;
  }
}
.intro-copy {
  display: flex;
  max-width: 42rem;
  flex-direction: column;
  gap: 1.25rem;
}
.intro-copy h2 {
  white-space: pre-line;
  text-wrap: balance;
}
.intro-copy p:last-child {
  max-width: 36rem;
}
.step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 1rem;
}
@media (min-width: 640px) {
  .step-list {
    display: flex;
    gap: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .step-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .step-nav {
    padding-bottom: 0.25rem;
  }
}
.step-list a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-secondary);
  transition: color 0.15s;
}
.step-list a:hover {
  color: var(--copper-500);
}
.step-list a span {
  color: var(--copper-500);
}

/* ---------- Feature rows ---------- */
.feature-grid {
  display: grid;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.5rem;
  }
  .feature-copy {
    grid-column: span 4;
  }
  .feature-media {
    grid-column: span 8;
  }
}
@media (min-width: 1280px) {
  .feature-grid {
    gap: 3.5rem;
  }
}
.feature-copy {
  display: grid;
  min-width: 0;
  gap: 1.5rem;
}
.feature-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--copper-500);
  text-transform: none;
}
.feature-eyebrow span {
  color: var(--text-tertiary);
}
.feature-copy h2 {
  text-wrap: balance;
}
.feature-copy p.body {
  max-width: 32rem;
  text-wrap: pretty;
  color: var(--text-secondary);
}
.feature-copy .btn {
  margin-top: 0.5rem;
  min-height: 2.75rem;
  justify-self: start;
}
.product-demo-frame {
  position: relative;
  padding: 12px;
  color: var(--stone-700);
}
.product-demo-frame > .pf {
  position: absolute;
  inset: 0;
}
.product-demo-media {
  position: relative;
  overflow: hidden;
  background: var(--stone-900);
  aspect-ratio: 16 / 9;
}
.product-demo-media video,
.product-demo-media canvas,
.product-demo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Security ---------- */
.section-security {
  padding-block: 2rem;
}
@media (min-width: 768px) {
  .section-security {
    padding-block: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .section-security {
    padding-block: 4rem;
  }
}
.security-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .security-stack {
    gap: 2.5rem;
  }
}
.security-head {
  display: flex;
  max-width: 48rem;
  flex-direction: column;
  gap: 1.5rem;
}
.badge {
  --pixel-border-width: 1px;
  display: inline-flex;
  width: fit-content;
  flex-shrink: 0;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.375rem 0.75rem;
  background: var(--stone-800);
  color: var(--copper-500);
}
.security-wrap {
  position: relative;
  width: 100%;
  padding: 12px;
  color: var(--surface-primary);
}
.security-wrap > .pf {
  position: absolute;
  inset: 0;
}
.security-list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
  row-gap: 1.5rem;
  background: var(--surface-primary);
  padding: 1.5rem;
}
@media (min-width: 640px) {
  .security-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .security-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 2rem;
  }
}
.security-list li {
  display: flex;
  gap: 1rem;
}
.security-tile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  background: var(--stone-700);
}
.security-tile img {
  width: 2rem;
  height: 2rem;
}
.security-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.25rem;
}
.security-text h4 {
  color: var(--text-primary);
}
.security-text p {
  color: var(--text-primary);
  opacity: 0.6;
  hyphens: none;
}

/* ---------- Newsletter strip ---------- */
.newsletter {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--page-primary);
  padding-block: 4rem;
}
.newsletter-row {
  display: flex;
  align-items: stretch;
}
.newsletter-rail {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
}
.newsletter-rail > i {
  position: absolute;
  inset: 0;
  background: var(--copper-500);
  mask-image: url('/images/research/pixel-frame.png');
  mask-repeat: repeat-x;
  mask-size: auto 100%;
  mask-position: center;
  -webkit-mask-image: url('/images/research/pixel-frame.png');
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: center;
}
.newsletter-card {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 3rem);
  max-width: 760px;
  color: var(--copper-500);
}
@media (min-width: 640px) {
  .newsletter-card {
    width: 640px;
  }
}
@media (min-width: 1024px) {
  .newsletter-card {
    width: 760px;
  }
}
.newsletter-inner {
  background: var(--surface-primary);
  padding: 1rem;
  color: var(--text-primary);
}
@media (min-width: 640px) {
  .newsletter-inner {
    padding: 1.25rem;
  }
}
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .newsletter-form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }
  .newsletter-label {
    padding-left: 0.25rem;
  }
}
.newsletter-label {
  flex-shrink: 0;
  color: var(--text-primary);
}
.newsletter-fields {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .newsletter-fields {
    flex-direction: row;
    align-items: center;
  }
}
.newsletter-fields > .btn {
  width: 100%;
}
@media (min-width: 640px) {
  .newsletter-fields > .btn {
    width: auto;
  }
}
.newsletter-input {
  min-width: 0;
  flex: 1 1 0;
  background: var(--surface-secondary);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  outline: none;
  text-transform: none;
  font-family: var(--font-caption);
  font-size: var(--text-caption-lg);
  line-height: 100%;
}
.newsletter-input::placeholder {
  color: var(--text-tertiary);
}
.newsletter-note {
  color: var(--text-tertiary);
}
@media (min-width: 640px) {
  .newsletter-note {
    flex-basis: 100%;
    padding-left: 0.25rem;
  }
}
.newsletter-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.newsletter-note a:hover {
  color: var(--text-primary);
}

/* ---------- Final CTA ---------- */
.cta {
  background: var(--page-primary);
  padding-block: 6rem;
}
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-head {
  margin-inline: auto;
  margin-bottom: 4rem;
  display: flex;
  max-width: 768px;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}
.cta-head h2 {
  white-space: pre-line;
}
.cta-frame {
  position: relative;
  width: 100%;
  max-width: 768px;
}
.cta-vine {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--copper-500);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('/images/about/pixel-frame-vine.png');
  -webkit-mask-image: url('/images/about/pixel-frame-vine.png');
}
@media (min-width: 640px) {
  .cta-vine {
    mask-image: url('/icons/pixel-frame-02.png');
    -webkit-mask-image: url('/icons/pixel-frame-02.png');
  }
}
.cta-body {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
}
.cta-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--surface-primary);
}
.cta-actions {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface-primary);
  padding: 1.5rem;
}
.cta-actions > .btn {
  width: 100%;
}
@media (min-width: 640px) {
  .cta-actions {
    flex-direction: row;
  }
  .cta-actions > .btn {
    width: 50%;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  height: 175vh;
  display: flex;
  background: var(--page-primary);
}
.footer-art {
  pointer-events: none;
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}
.footer-art > .fa-base {
  position: absolute;
  inset: 0;
  background: var(--copper-500);
}
.footer-art > .fa-grad,
.footer-art > .fa-b2,
.footer-art > .fa-b1 {
  position: absolute;
  mix-blend-mode: multiply;
}
.footer-art > .fa-grad {
  inset: 0;
}
.footer-art > .fa-b2,
.footer-art > .fa-b1 {
  inset-inline: 0;
  top: 0;
  bottom: -160px;
  will-change: transform;
}
.footer-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer-art .fa-b2 img,
.footer-art .fa-b1 img {
  object-position: bottom;
}
.footer-body {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-top: 3rem;
  padding-bottom: 3.75rem;
}
@media (min-width: 640px) {
  .footer-body {
    padding-top: 4rem;
  }
}
@media (min-width: 1024px) {
  .footer-body {
    padding-top: 5rem;
  }
}
.footer-grid {
  display: none;
  flex-direction: column;
  gap: 2rem;
}
.footer-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .footer-grid {
    display: flex;
  }
  .footer-stack {
    display: none;
  }
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 4rem;
}
.footer-cols nav,
.footer-cols > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-link {
  width: fit-content;
  color: var(--text-primary);
  transition: color 0.15s;
}
.footer-link:hover {
  color: var(--text-secondary);
}
.footer-socials {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.icon-link {
  position: relative;
  display: block;
}
.icon-link > a {
  display: block;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.icon-link > a:hover {
  opacity: 1;
}
.icon-link img {
  width: 2rem;
  height: 2rem;
}
.footer-stack-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.footer-stack-cols {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2rem;
  column-gap: 2rem;
}
@media (min-width: 640px) {
  .footer-stack-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.footer-stack-cols nav,
.footer-stack-cols > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---------- Pixel reveal ---------- */
html.js .pixel-reveal {
  visibility: hidden;
}
.pixel-reveal {
  display: block;
  padding-bottom: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html.js .pixel-reveal {
    visibility: visible;
  }
  .crt-desktop {
    animation: none;
  }
}

/* ---------- CRT desktop windows ---------- */
.crt-window {
  position: absolute;
  z-index: 21;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--core-black);
  background: var(--core-black);
  color: var(--stone-100);
  outline: none;
}
.crt-window:focus-visible {
  outline: 2px solid var(--copper-500);
  outline-offset: 2px;
}
.term-window {
  height: 85%;
  width: 70cqw;
}
.bricks-window {
  height: 70%;
  width: 52cqw;
}
.win-bar {
  display: flex;
  height: 3.3cqw;
  flex-shrink: 0;
  touch-action: none;
  align-items: center;
  gap: 0.6cqw;
  border-bottom: 2px solid var(--core-black);
  background: var(--stone-100);
  padding: 0.5cqw 0.3cqw;
  color: var(--core-black);
  user-select: none;
  cursor: url(/cursors/cursor-grab.svg) 8 8, grab;
}
.win-bar[data-dragging] {
  cursor: url(/cursors/cursor-grab.svg) 8 8, grabbing;
}
.win-bar-left {
  display: flex;
  height: 100%;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  gap: 0.55cqw;
}
.win-bar-right {
  display: flex;
  height: 100%;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
}
.stripes {
  display: block;
  height: 100%;
  fill: currentColor;
}
.stripes-tick {
  width: 1cqw;
  flex-shrink: 0;
}
.stripes-fill {
  min-width: 0;
  flex: 1 1 0;
}
.win-widget {
  display: flex;
  width: 1.55cqw;
  height: 1.55cqw;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: url(/cursors/cursor-pointer.svg) 8 2, pointer;
}
button.win-widget:hover,
button.win-widget:focus-visible {
  color: var(--copper-500);
}
.widget {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.win-title {
  flex-shrink: 0;
  line-height: 1;
}
@media (min-width: 1024px) {
  .win-title,
  .term-log,
  .term-input,
  .bricks-hud {
    font-size: var(--text-body-xs-alt);
  }
}

/* terminal */
.term-body {
  display: flex;
  min-height: 0;
  flex: 1 1 0;
  flex-direction: column;
  background: var(--core-black);
  padding: 1cqw 1.2cqw;
}
.term-log {
  min-height: 0;
  flex: 1 1 0;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: 1.375;
  color: var(--stone-200);
}
.term-banner {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.8cqw;
  color: var(--copper-500);
}
.term-lead {
  color: var(--stone-100);
}
.term-hint {
  margin-bottom: 0.8cqw;
  color: var(--stone-500);
}
.term-line {
  margin-bottom: 0.4cqw;
}
.term-line-user {
  color: var(--stone-100);
}
.term-prompt {
  color: var(--copper-500);
}
.term-form {
  margin-top: 0.6cqw;
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  gap: 0.5cqw;
}
.term-input {
  min-width: 0;
  flex: 1 1 0;
  background: none;
  color: var(--stone-100);
  outline: none;
  caret-color: var(--stone-200);
}

/* bricks */
.bricks-hud {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 1.2cqw;
  border-bottom: 2px solid var(--stone-700);
  padding: 0.45cqw 0.9cqw;
  line-height: 1;
  color: var(--stone-200);
}
.bricks-hud .tabular {
  font-variant-numeric: tabular-nums;
}
.bricks-hud [data-lives] {
  color: var(--copper-500);
}
.bricks-help {
  margin-left: auto;
  color: var(--stone-500);
}
.bricks-stage {
  position: relative;
  min-height: 0;
  flex: 1 1 0;
  background: var(--core-black);
}
.bricks-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The standing note under the updates form. It is small, and it is never
   hidden: a form that cannot collect an address has to say so. */
.newsletter-note {
  color: var(--stone-500);
  margin-top: 0.75rem;
  max-width: 46ch;
  line-height: 1.5;
}
.newsletter-note[data-said] {
  color: var(--copper-400);
}

/* A control that is deliberately not a link yet. It keeps the shape of the
   button it will become, so the page does not move when it is turned on, and
   it never pretends to be clickable. */
.btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(1);
}
.btn.is-disabled .btn-face {
  pointer-events: none;
}

/* ---- navbar: the X link and the contract address ------------------------ */
.nav-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  color: var(--stone-400);
  transition: color 0.12s linear;
}
.nav-x:hover {
  color: var(--copper-400);
}
.nav-x svg {
  width: 16px;
  height: 16px;
}

/* Hidden until config.js carries an address. A display rule beats the
   browser's own [hidden] styling, so it has to be said again here or the chip
   renders as an empty box. */
.nav-ca[hidden] {
  display: none !important;
}
.nav-ca {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid var(--stone-700);
  color: var(--stone-400);
  padding: 0.3rem 0.55rem;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s linear, color 0.12s linear;
}
.nav-ca:hover {
  border-color: var(--copper-600);
  color: var(--copper-400);
}
.nav-ca-label {
  color: var(--stone-500);
}
.nav-ca-value {
  font-variant-numeric: tabular-nums;
}