/* Boskana on top of the reference stylesheet: only what the reference did not have.
   The panel carries live chain data instead of a video, and there is a stock table. */

/* brand: a wordmark instead of an image */
#site .nav .logo .brand-word, .m-nav .logo .brand-word { letter-spacing: -.03em; font-weight: 600; font-size: 1.35rem; line-height: 1; color: var(--ink); margin-left: .45rem; }
.footer .brand .logo .brand-word { margin-left: .6rem; }
.footer .brand .logo .brand-word { font-size: 1.6rem; }
.brand-word .hash { background-image: var(--grad); color: #0000; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; }

/* no panel: the hero is the headline alone, centred once it has loaded */
#site .stage { height: min(100dvh, 62rem); }
.hero-left { left: 50%; transform: translateX(-50%); width: min(48rem, calc(100% - 3rem)); max-width: none; align-items: center; text-align: center; padding: 6rem 0 3rem; }
.hero-left .headline-block { align-items: center; }
h1.headline { text-align: center; }
.subline { text-align: left; }
.hero-left .subline { text-align: center; }
.hero-actions { justify-content: center; }
.m-hero { padding-top: 4rem; padding-bottom: 4rem; }

/* stock table, in the card language of the steps */
.table-card { border: 1px solid var(--hairline); border-radius: var(--radius-card); background: #fff; overflow: hidden; }
.table-card .scroll { overflow-x: auto; }
table.stocks { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.stocks th { text-align: left; font-weight: 500; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--hairline); }
table.stocks td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--hairline); color: var(--ink); vertical-align: middle; }
table.stocks tr:last-child td { border-bottom: 0; }
table.stocks .r { text-align: right; font-variant-numeric: tabular-nums; }
table.stocks .soft { color: var(--ink-soft); }
table.stocks .sym { font-weight: 500; }
table.stocks .sym small { display: block; font-weight: 400; color: var(--ink-faint); font-size: .8rem; }
table.stocks .up { background-image: var(--grad); color: #0000; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; font-weight: 500; }
.table-note { padding: 1rem 1.5rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; border-top: 1px solid var(--hairline); background: #fef4ef80; }
@media (width<=760px) { table.stocks th:nth-child(3), table.stocks td:nth-child(3), table.stocks th:nth-child(6), table.stocks td:nth-child(6) { display: none; } table.stocks th, table.stocks td { padding: .8rem .9rem; } }

/* stagger units the reference animated with JS */
.unit { transition-delay: var(--d, 0ms); }
.preloader { transition: opacity .5s ease; }
.preloader.done { opacity: 0; }
.section-head { align-items: flex-start; }
.hero-left h1.headline { font-size: clamp(2.6rem, 4.4vw, 4.4rem); }
.hero-left .subline { max-width: 34rem; font-size: 1.05rem; }

/* the token pill: symbol in the brand gradient, then the address, then copy */
.ca-pill { gap: .6rem; }
.ca-pill .ca-sym { font-weight: 600; background-image: var(--grad); color: #0000; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; }
.ca-pill .ca-sep { color: var(--ink-faint); }
.ca-pill .ca-val { font-variant-numeric: tabular-nums; }
.ca-pill.copied .ca-val { display: none; }
.ca-pill.copied:after { content: "Copied"; }
.footer .col .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; word-break: break-all; display: block; }