/* $GOOD site chrome, shared by every page (tool pages get it injected by build.py): fonts, colour
   and type tokens, the cartoon UI kit (buttons, badges, panels, stickers), the contract card, the nav
   with its Tools menu, the tool switcher and the footer. Everything is prefixed (site-, gbtn, ca-,
   tool-, --site-*) so nothing collides with the tools' own CSS (groll-, gpfp-, the vault's .btn and
   --ink/--lime/--muted).

   Two typefaces, one rule: Cinema Outfit (the graffiti face from the original goodcoin.io) for
   anything that shouts, which is headings, numbers, buttons, nav and badges; Poppins for anything you
   read. A monospace is used for contract addresses only.

   Cartoon kit: 3px ink outlines, hard offset shadows, 16px corners, die-cut white edges on the GOOD
   stickers. On dark grounds the shadow turns cream so it still reads. */

/* Cinema Outfit: the file is the DEMO cut the Framer site ships, licensed for preview only. Buy the
   licence (same family name, swap the file) before launch. */
@font-face { font-family: "Cinema Outfit"; src: url("/assets/fonts/cinema-outfit-demo.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins Site"; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins Site"; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins Site"; src: url("/assets/fonts/poppins-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --site-ink: #0C0602;
  --site-black: #000;
  --site-lime: #CCFF00;
  --site-lime-2: #b8e600;
  --site-cream: #FEF9F4;
  --site-white: #fff;
  --site-muted: #342F2C;
  --site-gold: #F2C230;
  --site-hood: #0E4D2B;
  --site-hood-deep: #0f2418;
  --site-cream-70: rgba(254, 249, 244, .7);
  --site-cream-line: rgba(254, 249, 244, .16);
  --site-display: "Cinema Outfit", "Permanent Marker", "Arial Black", Impact, sans-serif;
  --site-body: "Poppins Site", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* type roles */
  --site-f-display-1: 400 clamp(52px, 8vw, 120px)/.9 var(--site-display);
  --site-f-display-2: 400 clamp(38px, 5.2vw, 72px)/.95 var(--site-display);
  --site-f-display-3: 400 clamp(22px, 2.2vw, 30px)/1.05 var(--site-display);
  --site-f-title-1: 400 clamp(24px, 2.4vw, 34px)/1.05 var(--site-display);
  --site-f-title-2: 400 22px/1.1 var(--site-display);
  --site-f-button: 400 18px/1 var(--site-display);
  --site-f-lead: 400 clamp(17px, 1.35vw, 20px)/1.6 var(--site-body);
  --site-f-body: 400 15px/1.65 var(--site-body);
  --site-f-strong: 700 15px/1.3 var(--site-body);
  --site-f-small: 400 13px/1.45 var(--site-body);
  --site-f-label: 700 12px/1.2 var(--site-body);
  --site-f-mono: 400 13px/1.2 var(--site-mono);
  /* cartoon kit */
  --site-line: 3px solid var(--site-ink);
  --site-shadow-c: var(--site-ink);
  --site-radius: 16px;
  --site-nav-top: 14px;
  --site-nav-h: 64px;
  --site-nav-clear: 96px;
}
@media (max-width: 809px) {
  :root { --site-nav-top: 10px; --site-nav-h: 60px; --site-nav-clear: 84px; }
}

/* ── Buttons: chunky, outlined, with a hard shadow that presses in ── */
.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; min-height: 48px; padding: 12px 22px 13px;
  font: var(--site-f-button); letter-spacing: .01em; color: var(--site-ink);
  background: var(--site-lime); border: var(--site-line); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--site-shadow-c);
  text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.gbtn:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 6px 6px 0 var(--site-shadow-c); }
.gbtn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--site-shadow-c); }
.gbtn:focus-visible { outline: 3px solid var(--site-shadow-c); outline-offset: 4px; }
.gbtn--cream { background: var(--site-cream); }
.gbtn--ink { background: var(--site-ink); color: var(--site-lime); }
.gbtn--ghost { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; }
.gbtn--ghost:hover { box-shadow: none; transform: translate(0, -2px); }
.gbtn--nav { min-height: 42px; padding: 9px 16px 10px; font-size: 17px; box-shadow: 3px 3px 0 var(--site-cream); border-color: var(--site-ink); }
.gbtn--sm { min-height: 42px; padding: 9px 16px 10px; font-size: 16px; }
.gbtn--lg { min-height: 58px; padding: 15px 28px 16px; font-size: 22px; }
@media (max-width: 809px) { .gbtn--lg { min-height: 52px; font-size: 19px; padding: 13px 20px 14px; } }
@media (prefers-reduced-motion: reduce) { .gbtn, .gbtn:hover, .gbtn:active { transition: none; transform: none; } }

/* ── Badges: a tilted sticker label ── */
.tag {
  display: inline-block; padding: 6px 11px 7px;
  background: var(--site-lime); color: var(--site-ink);
  border: 2px solid var(--site-ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--site-ink);
  font: 400 15px/1 var(--site-display); letter-spacing: .02em; rotate: -2deg;
}
.tag--gold { background: var(--site-gold); }
.tag--cream { background: var(--site-cream); }

/* ── Panels and stickers ── */
.panel { background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: var(--site-radius); box-shadow: 6px 6px 0 var(--site-shadow-c); }
/* GOOD stickers: the art carries its own ink outline, so only a hard drop (ink on light grounds, cream
   on dark ones) to lift him off the page */
.sticker { display: block; height: auto; max-width: 100%; filter: drop-shadow(7px 8px 0 var(--site-shadow-c)); }
@keyframes site-float { 0%, 100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -12px; rotate: 1deg; } }
@keyframes site-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@keyframes site-pop { 0% { opacity: 0; transform: translateY(18px) scale(.6) rotate(-8deg); } 60% { opacity: 1; transform: translateY(-6px) scale(1.06) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes site-spin { to { transform: rotateY(360deg); } }

/* ── Contract chip (compact, hero and ticker): short address, copies the full one ── */
.ca-chip {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 6px 6px 6px 14px; cursor: pointer; text-align: left;
  background: var(--site-ink); color: var(--site-cream);
  border: 2px solid var(--site-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--site-cream);
  font: 400 16px/1 var(--site-display);
}
.ca-chip code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--site-f-mono); font-size: 14px; color: var(--site-lime); }
.ca-chip__act { flex: none; padding: 8px 12px 9px; border-radius: 8px; background: var(--site-lime); color: var(--site-ink); font: 400 15px/1 var(--site-display); }
.ca-chip:hover .ca-chip__act { background: var(--site-cream); }
.ca-chip:focus-visible { outline: 3px solid var(--site-lime); outline-offset: 3px; }

/* ── Contract card: the one official place to copy and verify an address on a page ── */
.ca-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 18px;
  padding: 20px 22px; background: var(--site-cream); color: var(--site-ink);
  border: var(--site-line); border-radius: 20px; box-shadow: 7px 7px 0 var(--site-shadow-c);
}
.ca-card__coin { width: 64px; height: 64px; border-radius: 50%; transform-style: preserve-3d; }
.ca-card:hover .ca-card__coin { animation: site-spin 1.2s ease-in-out; }
.ca-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ca-card__title { font: var(--site-f-title-2); }
.ca-card__chain { padding: 4px 9px; border-radius: 999px; background: var(--site-ink); color: var(--site-lime); font: var(--site-f-label); }
.ca-card__addr { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 14px 16px; background: #fff; border: 2px solid var(--site-ink); border-radius: 12px; font: 500 clamp(15px, 1.6vw, 20px)/1.3 var(--site-mono); letter-spacing: .02em; }
.ca-card__addr span:nth-child(even) { color: rgba(12, 6, 2, .55); }
.ca-card__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.ca-card__note { grid-column: 1 / -1; font: var(--site-f-small); color: rgba(12, 6, 2, .7); }
.ca-card__note a { color: var(--site-ink); }
/* thumbs-up GOOD pops out of the card when the address is copied */
.ca-card__pop { position: absolute; right: -14px; top: -96px; width: 120px; pointer-events: none; opacity: 0; }
.ca-card.is-copied .ca-card__pop { animation: site-pop .5s cubic-bezier(.2, .9, .3, 1.3) forwards; }
@media (prefers-reduced-motion: reduce) { .ca-card:hover .ca-card__coin { animation: none; } .ca-card.is-copied .ca-card__pop { animation: none; opacity: 1; } }
@media (max-width: 809px) {
  .ca-card { padding: 16px; box-shadow: 5px 5px 0 var(--site-shadow-c); }
  .ca-card__coin { width: 48px; height: 48px; }
  .ca-card__actions .gbtn { flex: 1 1 auto; }
  .ca-card__pop { width: 90px; top: -76px; right: -6px; }
}

/* ── Floating nav pill ── */
.site-nav { position: fixed; top: var(--site-nav-top); left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.site-nav__bar {
  pointer-events: auto; position: relative; box-sizing: border-box;
  width: 1080px; max-width: 100%; min-height: var(--site-nav-h);
  display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 8px;
  background: var(--site-ink); border: 2px solid var(--site-ink); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.site-nav__logo { display: block; flex: none; border-radius: 12px; }
.site-nav__logo img { display: block; width: 46px; height: 46px; border-radius: 12px; }
.site-nav__logo:focus-visible { outline: 3px solid var(--site-lime); outline-offset: 2px; }
.site-nav__menu { display: flex; align-items: center; gap: 24px; margin: 0 0 0 16px; flex: 1; }
.site-nav__menu > a, .site-nav__item > a { font: 400 18px/1.2 var(--site-display); letter-spacing: .01em; color: var(--site-cream); text-decoration: none; white-space: nowrap; }
.site-nav__menu a:hover, .site-nav__menu a:focus-visible { color: var(--site-lime); }
.site-nav__menu a:focus-visible { outline: 2px solid var(--site-lime); outline-offset: 4px; border-radius: 4px; }
.site-nav__menu a[aria-current="page"] { color: var(--site-lime); }
.site-nav__social { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; }
.site-nav__social svg { width: 17px; height: 17px; fill: var(--site-cream); }
.site-nav__social a:hover svg, .site-nav__social a:focus-visible svg { fill: var(--site-lime); }
.site-nav__menu .gbtn { display: none; }
.site-nav__toggle { display: none; }
.site-nav__item { position: relative; }
.site-nav__item > a { display: inline-flex; align-items: center; gap: 7px; }
.site-nav__item > a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); }
.site-nav__dd { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 320px; padding: 30px 0 0; display: none; }
.site-nav__dd-in { display: grid; gap: 2px; padding: 8px; background: var(--site-ink); border: 2px solid var(--site-cream-line); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.site-nav__item:hover .site-nav__dd, .site-nav__item:focus-within .site-nav__dd { display: block; }
.site-nav__dd a { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; color: var(--site-cream); text-decoration: none; }
.site-nav__dd a:hover, .site-nav__dd a:focus-visible { background: rgba(204, 255, 0, .1); }
.site-nav__dd img { display: block; width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--site-hood-deep); }
.site-nav__dd b { display: block; font: 400 18px/1.1 var(--site-display); color: var(--site-lime); white-space: nowrap; }
.site-nav__dd small { display: block; margin-top: 2px; font: var(--site-f-small); color: var(--site-cream-70); }
.site-nav__dd a[aria-current="page"] { background: rgba(204, 255, 0, .14); }
@media (max-width: 1099px) and (min-width: 810px) {
  .site-nav__menu { gap: 16px; margin-left: 8px; }
  .site-nav__menu > a, .site-nav__item > a { font-size: 16px; }
  .site-nav__social { display: none; }
}
@media (max-width: 809px) {
  .site-nav__bar { width: 100%; padding: 7px 12px 7px 7px; }
  .site-nav__logo img { width: 44px; height: 44px; }
  /* phone bar: logo, then Buy and the menu button on the right, so buying is one tap away */
  .site-nav__bar > .gbtn--nav { margin-left: auto; order: 2; }
  .site-nav__toggle { order: 3; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 44px; margin-right: -8px; padding: 0 10px; background: transparent; border: 0; cursor: pointer; }
  .site-nav__toggle span { display: block; height: 2px; width: 20px; background: var(--site-cream); transition: transform .2s ease, opacity .2s ease; }
  .site-nav__toggle:focus-visible { outline: 2px solid var(--site-lime); border-radius: 6px; }
  .site-nav--open .site-nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-nav--open .site-nav__toggle span:nth-child(2) { opacity: 0; }
  .site-nav--open .site-nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-nav__menu {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - var(--site-nav-clear) - 20px); overflow: auto;
    padding: 8px 10px; background: var(--site-ink); border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  }
  .site-nav--open .site-nav__menu { display: flex; }
  .site-nav__menu > a, .site-nav__item > a { display: block; padding: 12px; font-size: 24px; border-radius: 8px; }
  .site-nav__item > a::after { display: none; }
  .site-nav__dd { position: static; transform: none; width: auto; display: block; padding: 0 0 6px 10px; }
  .site-nav__dd-in { border: 0; box-shadow: none; padding: 0; }
  .site-nav__social { margin: 4px 6px 8px; }
  .site-nav__social a { width: 44px; height: 44px; }
}

/* ── Tool switcher strip on the tool pages ── */
.tool-tabs { background: var(--site-ink); padding: 0 20px 14px; }
.tool-tabs__in { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.tool-tabs__home { margin-right: 8px; font: 400 16px/1 var(--site-display); color: var(--site-cream-70); text-decoration: none; }
.tool-tabs__home:hover { color: var(--site-lime); }
.tool-tabs a.tool-tabs__tab { font: 400 16px/1 var(--site-display); color: var(--site-cream); text-decoration: none; padding: 9px 14px; border-radius: 999px; border: 2px solid rgba(254, 249, 244, .28); }
.tool-tabs a.tool-tabs__tab:hover { border-color: var(--site-lime); color: var(--site-lime); }
.tool-tabs a.tool-tabs__tab[aria-current="page"] { background: var(--site-lime); border-color: var(--site-lime); color: var(--site-ink); }
.tool-tabs a:focus-visible { outline: 3px solid var(--site-lime); outline-offset: 2px; }
@media (max-width: 809px) {
  .tool-tabs { padding: 0 12px 10px; }
  .tool-tabs__home { width: 100%; text-align: center; margin: 0 0 6px; }
  .tool-tabs a.tool-tabs__tab { padding: 8px 12px; }
}

/* ── Footer: the graffiti wordmark, four link columns, the legal line ── */
.site-footer { background: var(--site-ink); color: var(--site-cream); padding: 72px 30px 28px; font-family: var(--site-body); }
.site-footer__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.site-footer__brand img { display: block; width: 220px; height: auto; }
.site-footer__tag { margin: 0; font: var(--site-f-title-2); color: var(--site-lime); }
.site-footer h4 { margin: 0 0 16px; font: 400 18px/1.1 var(--site-display); color: var(--site-lime); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer li a { color: var(--site-cream); text-decoration: none; font: var(--site-f-body); }
.site-footer li a:hover { color: var(--site-lime); }
.site-footer__bottom { max-width: 1180px; margin: 48px auto 0; padding-top: 18px; border-top: 1px solid var(--site-cream-line); display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; font: var(--site-f-small); color: var(--site-cream-70); }
.site-footer__bottom p { margin: 0; max-width: 78ch; }
a:focus-visible { outline: 3px solid var(--site-lime); outline-offset: 3px; }
@media (max-width: 1099px) and (min-width: 810px) { .site-footer__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 809px) {
  .site-footer { padding: 52px 20px 24px; }
  .site-footer__in { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .site-footer__brand { grid-column: 1 / -1; align-items: center; text-align: center; }
  .site-footer__bottom { flex-direction: column; margin-top: 32px; }
}

/* ── Tool pages: once chrome.js has injected the nav, hide the tool's own header and footer, clear
   the nav, and push the vault's sticky lane bar under the pill. Never in ?embed=1. ── */
html.site-chrome-on .groll-header,
html.site-chrome-on .groll-footer,
html.site-chrome-on .gpfp-header,
html.site-chrome-on .ghood-header,
html.site-chrome-on body > footer:not(.site-footer) { display: none !important; }
html.site-chrome-on .site-nav-spacer { height: var(--site-nav-clear); background: var(--site-ink); }
html.site-chrome-on .bar { top: calc(var(--site-nav-clear) - 10px) !important; }
html.site-chrome-on .site-footer { margin-top: 40px; }