/* Trust band, Try it, footer, and the Whitechain lockup in the nav and hero. Owned by the "proof" designer.
   Loaded after style.css. The band is dark in both themes, so it sets its own colour tokens (the page's light-theme
   accent would be too dark on navy). The browser mock in Try it stays dark too: the portfolio it copies is dark. */

/* ---- Whitechain art: each file is an <img>; the variant that suits the theme is the one shown ---- */
.wc-img { display: block; height: auto; flex: none; }
.wc-img.on-dark { display: none; }
:root[data-theme="dark"] .wc-img.on-light { display: none; }
:root[data-theme="dark"] .wc-img.on-dark { display: block; }

/* Nav: "Built on" and the lockup; below 480px only the mark, so the bar never overflows. */
.top-left { display: flex; align-items: center; gap: 4px; min-width: 0; }
.top a.wc-nav { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; margin-left: 6px; border-radius: 999px; color: var(--muted); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; transition: color 0.2s, background-color 0.2s; }
.top a.wc-nav:hover { color: var(--ink); background: rgba(var(--rl), 0.06); }
.wc-nav-t { font-size: var(--fs-xs); letter-spacing: 0.02em; }
:root[data-theme] .wc-nav .wc-l { width: auto; height: 15px; }
:root[data-theme] .wc-nav .wc-m { width: 20px; height: 20px; display: none; }
@media (max-width: 560px) {
  .wc-nav-t { display: none; }
  :root[data-theme] .wc-nav .wc-l { display: none; }
  :root[data-theme="light"] .wc-nav .wc-m.on-light, :root[data-theme="dark"] .wc-nav .wc-m.on-dark { display: block; }
}

/* Hero pill */
.wc-pill {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: var(--s3); padding: 7px 14px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--field); box-shadow: 0 1px 2px var(--sh1);
  color: var(--ink); font-size: var(--fs-sm); font-weight: 550; letter-spacing: -0.005em; text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.wc-pill:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); box-shadow: 0 0 0 3px var(--ring); }
.wc-pill .wc-img { width: auto; height: 15px; }
.wc-pill::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--spot), 0.5); }
@media (prefers-reduced-motion: no-preference) {
  .wc-pill { animation: rise 0.3s var(--ease) both; }
  .wc-pill::after { animation: wc-live 2.4s ease-out infinite; }
  @keyframes wc-live { 0% { box-shadow: 0 0 0 0 rgba(var(--spot), 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(var(--spot), 0); } }
}

/* ================================================================ TRUST BAND */
.band.verify {
  --ink: #eef0ee; --muted: #a3aaa6; --line: rgba(255, 255, 255, 0.11); --line-2: rgba(255, 255, 255, 0.2);
  --surface: #111417; --sunk: rgba(255, 255, 255, 0.04);
  --accent: #3fd69a; --accent-ink: #04150d; --ring: rgba(63, 214, 154, 0.3);
  --warn: #f1c56b; --err: #ff9a90; --rl: 255, 255, 255;
  --wc: #3fd69a;                      /* the site accent: structure and icons; Whitechain keeps its own colors in the logo */
  position: relative; isolation: isolate; overflow: clip; max-width: none; margin: clamp(24px, 5vw, 64px) 0;
  padding: clamp(56px, 8vw, 104px) var(--pad);
  color: var(--ink);
  background:
    radial-gradient(860px 460px at 92% -10%, rgba(63, 214, 154, 0.16), transparent 66%),
    radial-gradient(640px 380px at -4% 108%, rgba(63, 214, 154, 0.08), transparent 70%),
    #07080a;
}
.verify::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1.5px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.v-in { max-width: calc(1040px - 2 * var(--pad)); margin-inline: auto; }
.v-hero { display: grid; gap: clamp(32px, 5vw, 48px); align-items: center; }
@media (min-width: 1000px) { .v-hero { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s8); } }
.v-built, .v-eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.v-eyebrow { color: var(--wc); }
.v-chain {
  display: grid; justify-items: start; gap: var(--s2); padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: radial-gradient(260px 160px at 100% 0%, rgba(63, 214, 154, 0.12), transparent 70%), rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.v-lock { width: auto; height: clamp(40px, 5vw, 52px); margin-block: 2px 8px; }
.v-meta { display: grid; gap: 12px; width: 100%; padding-top: var(--s2); border-top: 1px solid var(--line); }
.v-meta div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; font-size: var(--fs-sm); }
.v-meta dt { color: var(--muted); }
.v-meta a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.v-meta a:hover { text-decoration-color: currentColor; }
.v-meta code { font: 0.875rem var(--mono); }
.v-h {
  max-width: 17ch; margin-top: var(--s2);
  font-size: clamp(2.25rem, 1.1rem + 4.6vw, 4.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance;
}
.v-lead { max-width: 58ch; margin-top: var(--s3); color: var(--muted); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.55; text-wrap: pretty; }

.v-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) { .v-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s2); } }
@media (max-width: 899px) { .v-tile:nth-child(n+3) { margin-top: 12px; } }
/* Each tile is a subgrid of four rows (icon, number, label, source), so the dividers line up across the row. */
.v-tile {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.v-ico {
  justify-self: start; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(63, 214, 154, 0.12);
  fill: none; stroke: var(--wc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.v-ico :is(path, rect) { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.v-num {
  margin-top: clamp(20px, 3vw, 32px); font-size: clamp(2.5rem, 1.5rem + 2.8vw, 3.75rem); font-weight: 700;
  letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums;
}
.v-lab { margin: 8px 0 var(--s2); font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
.v-src { align-self: end; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
.v-src a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.v-src a:hover { text-decoration-color: currentColor; }
.v-src a::after { content: "\2197"; margin-left: 3px; font-size: 0.85em; }

.v-grid { display: grid; gap: var(--s2); margin-top: var(--s2); }
@media (min-width: 900px) { .v-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s3); margin-top: var(--s3); } }
.v-actions { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.v-h3 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.v-links { flex: 1; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 12px; }
.v-links li { display: flex; }
.v-links a {
  display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--s2); padding: 18px 20px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); text-decoration: none; transition: border-color 0.2s, background-color 0.2s;
}
.v-links a:hover { border-color: var(--wc); background: rgba(63, 214, 154, 0.08); }
.v-links b { display: block; font-weight: 600; letter-spacing: -0.01em; }
.v-links small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.v-links svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--wc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease); }
.v-links a:hover svg { transform: translate(2px, -2px); }

/* The live check card, restyled for the dark band. Its ids and the chip and result classes belong to main.js. */
.verify .vcard { margin: 0; padding: clamp(18px, 3vw, 28px); border-color: var(--line-2); background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.verify .vfacts dd { color: var(--ink); }
.verify .vresult { background: rgba(255, 255, 255, 0.03); }
.verify :focus-visible { outline-color: var(--wc); }

/* ================================================================ TRY IT */
.band.try { padding-block: clamp(56px, 8vw, 96px); }
.t-grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .t-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.t-copy { min-width: 0; }
.try .ticks { gap: 10px; }
.try .ticks li { padding-left: 30px; color: var(--ink); }
.try .ticks li::before {
  left: 0; top: 0.2em; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 13%, transparent) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a5a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .try .ticks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fd69a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.t-demo { display: grid; gap: 12px; min-width: 0; margin: 0; }
.mock {
  padding: clamp(12px, 3vw, 28px); border: 1px solid var(--line); border-radius: 24px; background-color: var(--sunk);
  background-image:
    radial-gradient(520px 300px at 85% 0%, rgba(var(--spot), 0.1), transparent 70%),
    radial-gradient(circle, rgba(var(--rl), var(--dot-a)) 1px, transparent 1.5px);
  background-size: auto, 24px 24px;
}
.mk-win {
  --m-line: #262626; --m-soft: #b4b4b8; --m-mute: #8a8a90;
  position: relative; overflow: hidden; height: 440px; border: 1px solid #2c2c2c; border-radius: 12px; background: #111;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.2);
  color: #fafafa; font-family: var(--font); text-align: left;
}
.mk-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--m-line); background: #181818; }
.mk-dots { display: flex; gap: 6px; }
.mk-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.mk-url {
  display: flex; align-items: center; gap: 6px; flex: 1; max-width: 270px; min-width: 0; margin-inline: auto 40px; padding: 5px 12px;
  border-radius: 999px; background: #0f0f0f; color: var(--m-soft); font-size: 0.75rem; white-space: nowrap; overflow: hidden;
}
.mk-url svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
.mk-page { padding: 22px 22px 0; }
.mk-h { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; }
.mk-line { margin-top: 6px; color: var(--m-soft); font-size: 0.8125rem; line-height: 1.5; }
.mk-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mk-b {
  position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid #303030; border-radius: 8px;
  background: transparent; color: #fafafa; font-size: 0.8125rem; font-weight: 500; white-space: nowrap;
}
.mk-b1 { border-color: #5a5a5a; background: #1f1f1f; }   /* the picked amount; animated below */
.mk-note { margin-top: 14px; color: var(--m-mute); font-size: 0.75rem; line-height: 1.5; }
.mk-note code { font: 0.6875rem ui-monospace, Menlo, monospace; color: var(--m-soft); }
.mk-sk { display: block; height: 8px; margin-top: 16px; border-radius: 4px; background: #1c1c1c; }
.mk-sk1 { width: 72%; } .mk-sk2 { width: 48%; }
.mk-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.58); }

/* The Sitebound window, laid out like the real frame: brand, the site, the amount, one Touch ID button. It follows the page theme. */
.mk-frame {
  position: absolute; left: 50%; bottom: 16px; width: min(300px, calc(100% - 28px)); transform: translateX(-50%);
  padding: 12px 18px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.fr-head { display: flex; align-items: center; justify-content: space-between; }
.fr-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 650; letter-spacing: -0.02em; }
.fr-brand svg { width: 17px; height: 17px; }
.fr-brand .mark-dot { fill: var(--accent); }
.fr-x { color: var(--muted); font-size: 1.25rem; line-height: 1; }
.fr-k { margin-top: 10px; color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fr-site { margin-top: 2px; font-size: 1.375rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.2; overflow-wrap: anywhere; }
.fr-amt { margin-top: 6px; font-size: 2rem; font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fr-amt small { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.fr-pay {
  position: relative; display: block; height: 46px; margin-top: 12px; border-radius: 10px; background: var(--accent); color: var(--accent-ink);
  font-size: 0.875rem; font-weight: 600;
}
.fr-l { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.fr-l2 { opacity: 0; }
.fr-l2 svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fr-ring { position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: 10px; opacity: 0; }
.fr-fee { margin-top: 8px; color: var(--muted); font-size: 0.75rem; text-align: center; }

/* The tap cursor: hidden at rest, drawn by the loop. */
.mk-cur { position: absolute; left: 56%; top: 52%; width: 20px; height: 20px; opacity: 0; pointer-events: none; }
.mk-cur svg { width: 100%; height: 100%; fill: #fff; stroke: #111; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }

.t-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; color: var(--muted); font-size: var(--fs-sm); }
.t-pause {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--muted);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.t-pause .gi { width: 15px; height: 15px; }
.t-pause:hover { color: var(--ink); border-color: var(--hover-line, var(--muted)); }
@media (prefers-reduced-motion: reduce) { .t-pause { display: none; } }

/* One 9 s loop: tap Pay 3 USDT, the Sitebound window rises, tap Pay with Touch ID, it reads Paid, it clears.
   Every step is 0.3 s or longer and eases out. Starts when the mock scrolls into view (proof.js adds .is-live);
   reduced motion, or the Pause button, leave the still frame above: window open, 3 USDT picked. */
@media (prefers-reduced-motion: no-preference) {
  .mock.is-live:not(.is-still) :is(.mk-b1, .mk-scrim, .mk-frame, .mk-cur, .fr-pay, .fr-ring, .fr-l1, .fr-l2) { animation: 9s ease-out infinite both; }
  .mock.is-live:not(.is-still) .mk-b1 { animation-name: mk-pick; }
  .mock.is-live:not(.is-still) .mk-scrim { animation-name: mk-scrim; }
  .mock.is-live:not(.is-still) .mk-frame { animation-name: mk-frame; }
  .mock.is-live:not(.is-still) .mk-cur1 { animation-name: mk-cur1; }
  .mock.is-live:not(.is-still) .mk-cur2 { animation-name: mk-cur2; }
  .mock.is-live:not(.is-still) .fr-pay { animation-name: mk-press; }
  .mock.is-live:not(.is-still) .fr-ring { animation-name: mk-ring; }
  .mock.is-live:not(.is-still) .fr-l1 { animation-name: mk-l1; }
  .mock.is-live:not(.is-still) .fr-l2 { animation-name: mk-l2; }
  @keyframes mk-pick {
    0%, 20% { transform: scale(1); border-color: #303030; background-color: transparent; }
    23% { transform: scale(0.94); border-color: #5a5a5a; background-color: #1f1f1f; }
    27%, 88% { transform: scale(1); border-color: #5a5a5a; background-color: #1f1f1f; }
    94%, 100% { transform: scale(1); border-color: #303030; background-color: transparent; }
  }
  @keyframes mk-scrim { 0%, 26% { opacity: 0; } 33%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
  @keyframes mk-frame {
    0%, 28% { opacity: 0; transform: translate(-50%, 16px); }
    36%, 88% { opacity: 1; transform: translate(-50%, 0); }
    94%, 100% { opacity: 0; transform: translate(-50%, 8px); }
  }
  @keyframes mk-cur1 {
    0%, 7% { opacity: 0; transform: translate(54px, 46px); }
    11% { opacity: 1; transform: translate(54px, 46px); }
    20%, 26% { opacity: 1; transform: translate(0, 0); }
    31%, 100% { opacity: 0; transform: translate(0, 0); }
  }
  @keyframes mk-cur2 {
    0%, 41% { opacity: 0; transform: translate(60px, 50px); }
    45% { opacity: 1; transform: translate(60px, 50px); }
    54%, 60% { opacity: 1; transform: translate(0, 0); }
    65%, 100% { opacity: 0; transform: translate(0, 0); }
  }
  @keyframes mk-press { 0%, 56% { transform: scale(1); } 58.5% { transform: scale(0.97); } 62%, 100% { transform: scale(1); } }
  @keyframes mk-ring { 0%, 57% { opacity: 0; transform: scale(1); } 58.5% { opacity: 0.6; transform: scale(1); } 66%, 100% { opacity: 0; transform: scale(1.1, 1.35); } }
  @keyframes mk-l1 { 0%, 58% { opacity: 1; } 63%, 95% { opacity: 0; } 98%, 100% { opacity: 1; } }
  @keyframes mk-l2 { 0%, 60% { opacity: 0; } 66%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
}

/* ================================================================ FOOTER */
.foot { position: relative; z-index: 1; width: 100%; border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); max-width: 1040px; margin-inline: auto; padding: var(--s4) var(--pad); }
.foot .top-brand { margin-left: -6px; }
.foot-built { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); }
.foot-built .wc-img { width: auto; height: 15px; }
.foot nav { display: flex; gap: var(--s1); margin-right: -12px; }
.foot nav a { padding: 8px 12px; border-radius: 999px; color: var(--muted); font-size: var(--fs-sm); text-decoration: none; transition: color 0.2s, background-color 0.2s; }
.foot nav a:hover { color: var(--ink); background: rgba(var(--rl), 0.06); }
@media (max-width: 560px) { .foot .top-brand span { display: inline; } .foot-in { flex-direction: column; align-items: flex-start; } .foot nav { margin-left: -12px; } }

/* The one honest line: testnet only, not audited. The long list of limits lives in the docs. */
.foot-limit { max-width: 1040px; margin-inline: auto; padding: 0 var(--pad) var(--s1); color: var(--ink); font-size: var(--fs-sm); font-weight: 550; text-wrap: balance; }

/* One quiet credit line at the very bottom of the page. */
.foot-credit { max-width: 1040px; margin-inline: auto; padding: 0 var(--pad) var(--s4); color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; text-wrap: balance; }
.foot-credit a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: color 0.2s, text-decoration-color 0.2s; }
.foot-credit a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Whitechain lockup inside the hero subline */
.wc-inline { display: inline-flex; vertical-align: -0.2em; margin: 0 0.15em; }
.wc-inline .wc-img { width: auto; height: 1.15em; }
.tagline .tl { display: block; }