/* App pages in the landing's materials: the template's nav and footer, its charcoal sections, dotted rules, mono labels,
   square gold blocks. Numbers in Fragment Mono. */
.hr-body { background: var(--bg); color: var(--ink); font-size: 16px; }
.hr-body .navbar { transform: none !important; }
.hr-page { padding-top: 7.5rem; min-height: 70vh; }
.hr-page a { color: var(--ink); }
.hr-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; }
.hr-mute, .hr-note, .hr-note-inline { color: var(--mute); }
.hr-note { font-size: 14px; line-height: 1.5; max-width: 52rem; margin: .2rem 0 1rem; }
.hr-note-inline { font-size: 14px; }
.hr-head { padding: 2.5rem 0 2rem; }
.hr-kicker { font-family: "Fragment Mono", monospace; font-size: 13px; background: var(--bg-3); color: var(--ink-2) !important; padding: 3px 7px; display: inline-block; }
.hr-h1 { font-family: "Host Grotesk", sans-serif; font-weight: 500; font-size: clamp(2.6rem, 6.4vw, 6rem); letter-spacing: -0.045em; line-height: .95; margin: 1rem 0 1.2rem; max-width: 18ch; }
.hr-sub { font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 46rem; margin: 0; }
.hr-sub a { color: var(--gold) !important; }
.hr-h2 { font-family: "Host Grotesk", sans-serif; font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -0.03em; margin: 0; }
.hr-h3 { font-family: "Host Grotesk", sans-serif; font-weight: 500; font-size: 1.3rem; letter-spacing: -0.02em; margin: 0 0 .8rem; }
.hr-sec { padding: 2.5rem 0; }
.hr-sec-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 2px dotted #4D463A; }
.hr-band { padding: .5rem 0 1rem; }
.hr-led-panel { display: block; width: 100%; height: 110px; background: #0B0A08; border: 1px solid var(--line); }
.hr-led-strip { display: block; width: 100%; height: 64px; background: #0B0A08; border: 1px solid var(--line); }
@media (max-width: 767px) { .hr-led-panel { height: 84px; } .hr-led-strip { height: 52px; } }

/* buttons, in the template's square CTA material */
.hr-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--gold); color: var(--gold-ink) !important; border: 0; padding: .7rem 1rem; font: 500 15px "Host Grotesk", sans-serif; text-decoration: none; cursor: pointer; }
.hr-btn:hover { background: #F0C55C; }
.hr-btn[disabled] { opacity: .55; cursor: wait; }
.hr-btn.ghost { background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line-2); }
.hr-btn-big { width: 100%; justify-content: center; padding: 1rem; font-size: 17px; }
.hr-pill { font-size: 13px; color: var(--gold); border: 1px solid var(--line-2); padding: 2px 7px; white-space: nowrap; }
.hr-tabs { display: flex; border: 1px solid var(--line-2); }
.hr-tabs button { background: none; border: 0; color: var(--ink-2); padding: .45rem .8rem; font: 14px "Fragment Mono", monospace; cursor: pointer; }
.hr-tabs button.on { background: var(--ink); color: var(--bg); }

/* rows: the board and rewards lists */
.hr-rows { display: flex; flex-direction: column; }
.hr-row { display: grid; grid-template-columns: 44px minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)) 24px; align-items: center; gap: 1rem; padding: .85rem .5rem; text-decoration: none; color: var(--ink) !important; border-bottom: 1px solid var(--line); transition: background .15s; }
.hr-row:hover { background: var(--bg-2); }
.hr-row .hr-row-name { min-width: 0; }
.hr-row .hr-row-name b { display: block; font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-row .hr-row-name span { color: var(--mute); font-size: 14px; }
.hr-row .num { font-family: "Fragment Mono", monospace; font-size: 14px; text-align: right; white-space: nowrap; }
.hr-row .num small { display: block; color: var(--mute); font-size: 12px; }
.hr-row .go { color: var(--gold); text-align: right; }
.hr-row-head { color: var(--mute); font: 13px "Fragment Mono", monospace; border-bottom: 1px solid var(--line-2); padding-top: 0; }
.hr-row-head:hover { background: none; }
.hr-meter { height: 6px; background: var(--bg-3); position: relative; }
.hr-meter i { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.hr-img { width: 44px; height: 44px; object-fit: cover; display: block; background: var(--bg-3); }
.hr-img.none { display: flex; align-items: center; justify-content: center; color: var(--gold); font: 500 18px "Fragment Mono", monospace; }
.hr-img.xl { width: 84px; height: 84px; }
.hr-empty { padding: 1.4rem 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.hr-empty a { color: var(--gold) !important; }
.hr-tag { font: 12px "Fragment Mono", monospace; color: var(--gold); border: 1px solid var(--line-2); padding: 1px 5px; margin-left: .4rem; vertical-align: middle; }

/* coin page */
.hr-coin-head { padding-bottom: 1rem; }
.hr-coin-title { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.hr-coin-title h1 { font-size: clamp(2.2rem, 5vw, 4.4rem); margin: 0; max-width: none; }
.hr-coin-title h1 .sym { color: var(--mute); font-size: .5em; letter-spacing: 0; margin-left: .3em; }
.hr-coin-meta { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.hr-mint { background: none; border: 1px solid var(--line-2); color: var(--ink-2); font: 14px "Fragment Mono", monospace; padding: 4px 8px; cursor: copy; align-self: flex-start; }
.hr-links { display: flex; gap: 1rem; font-size: 14px; flex-wrap: wrap; }
.hr-links a { color: var(--ink-2) !important; }
.hr-curve { margin-top: 1.4rem; max-width: 44rem; }
.hr-curve-top { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); margin-bottom: .4rem; gap: 1rem; }
.hr-fees { display: grid; grid-template-columns: repeat(5, minmax(0, auto)); margin-top: 1.2rem; width: max-content; max-width: 100%; border: 1px solid var(--line); }
.hr-fees div { padding: .6rem .9rem; border-right: 1px solid var(--line); }
.hr-fees div:last-child { border-right: 0; }
.hr-fees span { display: block; color: var(--mute); font-size: 13px; }
.hr-fees b { font: 500 16px "Fragment Mono", monospace; }
.hr-fees .hot { background: var(--gold); color: var(--gold-ink); }
.hr-fees .hot span { color: #4A3A12; }
.hr-coin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; align-items: start; }
.hr-coin-side { position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
.hr-block { background: var(--bg-2); border: 1px solid var(--line); padding: 1.2rem; min-width: 0; }
.hr-coin-main { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.hr-rules { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-bottom: 1rem; }
.hr-rules b { color: var(--ink); font-weight: 500; }
.hr-rules .m { color: var(--gold); }
.hr-vault { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.4rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hr-vault .lbl { color: var(--mute); font-size: 14px; grid-column: 1 / -1; }
.hr-vault-num { font: 500 clamp(1.8rem, 3vw, 2.6rem) "Fragment Mono", monospace; color: var(--gold); letter-spacing: -0.02em; }
.hr-vault p { grid-column: 1 / -1; margin: .3rem 0 0; color: var(--mute); font-size: 14px; line-height: 1.5; }
.hr-pay { padding: 1rem 0; display: flex; flex-direction: column; gap: .6rem; }
.hr-pay p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.hr-table-wrap { overflow-x: auto; }
.hr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hr-table th { text-align: left; color: var(--mute); font: 400 13px "Fragment Mono", monospace; padding: .5rem; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.hr-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.hr-table .num { text-align: right; font-family: "Fragment Mono", monospace; white-space: nowrap; }
.hr-table th.num { text-align: right; }
.hr-table .rk { color: var(--mute); font-family: "Fragment Mono", monospace; width: 2.4rem; }
.hr-table .pays { color: var(--gold); }
.hr-table tr.me td { background: #221d10; }
.hr-wbar { display: inline-block; height: 8px; background: var(--gold); vertical-align: middle; margin-right: .5rem; min-width: 1px; }
.hr-ex { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .8rem 0; font-size: 14px; color: var(--mute); }
.hr-ex b { color: var(--ink-2); font-weight: 400; font-family: "Fragment Mono", monospace; }
.side-buy { color: var(--gold); }
.side-sell { color: var(--ink-2); }

/* ticket */
.hr-ticket .sides { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); margin-bottom: 1rem; }
.hr-ticket .sides button { background: none; border: 0; padding: .7rem; color: var(--ink-2); font: 500 15px "Host Grotesk", sans-serif; cursor: pointer; }
.hr-ticket .sides button.on { background: var(--gold); color: var(--gold-ink); }
.hr-ticket.selling .sides button.on { background: var(--ink); color: var(--bg); }
.hr-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; min-width: 0; }
.hr-field > span { font-size: 14px; color: var(--ink-2); display: flex; justify-content: space-between; gap: .5rem; }
.hr-field > span i { font-style: normal; color: var(--mute); font-size: 13px; }
.hr-field input, .hr-field textarea, .hr-field select { background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); padding: .7rem .75rem; font: 16px "Host Grotesk", sans-serif; border-radius: 0; width: 100%; box-sizing: border-box; }
.hr-field input.m, .hr-field textarea.m { font-family: "Fragment Mono", monospace; }
.hr-field input:focus, .hr-field textarea:focus, .hr-field select:focus { outline: none; border-color: var(--gold); }
.hr-bal { display: flex; justify-content: space-between; font: 13px "Fragment Mono", monospace; color: var(--mute); margin: -.4rem 0 .9rem; gap: .5rem; }
.linkish { background: none; border: 0; color: var(--gold); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.hr-slip { display: flex; gap: .3rem; align-items: center; margin-bottom: 1rem; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
.hr-slip button { background: none; border: 1px solid var(--line-2); color: var(--ink-2); padding: .25rem .5rem; font: 13px "Fragment Mono", monospace; cursor: pointer; }
.hr-slip button.on { border-color: var(--gold); color: var(--gold); }
.hr-quote { display: grid; gap: .3rem; margin: 0 0 1rem; }
.hr-quote div { display: flex; justify-content: space-between; font-size: 14px; gap: .5rem; }
.hr-quote dt { color: var(--mute); }
.hr-quote dd { margin: 0; font-family: "Fragment Mono", monospace; }
.err { color: #E9A08A; font-size: 14px; line-height: 1.45; margin: .6rem 0 0; }
.notice { background: var(--bg-3); border-left: 3px solid var(--gold); padding: .8rem 1rem; font-size: 15px; line-height: 1.5; margin: .6rem 0; }
.notice a { color: var(--gold) !important; }
.notice ul { margin: .5rem 0 0; padding-left: 1rem; font-size: 14px; }

/* launch */
.hr-launch { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; align-items: start; }
.hr-launch-main { min-width: 0; }
.hr-fs { border: 0; border-top: 1px solid var(--line-2); padding: 1.4rem 0 .4rem; margin: 0; min-width: 0; }
.hr-fs legend { padding: 0 .6rem 0 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.hr-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hr-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hr-check { display: flex; gap: .6rem; align-items: center; font-size: 15px; margin-bottom: .9rem; cursor: pointer; }
.hr-check input { accent-color: var(--gold); width: 18px; height: 18px; }
.hr-drop { display: flex; align-items: center; gap: 1rem; min-height: 96px; border: 1px dashed var(--line-2); padding: 1rem; cursor: pointer; color: var(--ink-2); font-size: 15px; margin-bottom: 1rem; }
.hr-drop:hover, .hr-drop.over { border-color: var(--gold); }
.hr-drop img { width: 72px; height: 72px; object-fit: cover; }
.hr-steps { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 0 0 1.4rem; counter-reset: s; }
.hr-steps li { counter-increment: s; font: 13px "Fragment Mono", monospace; color: var(--mute); padding: .5rem 0; border-top: 3px solid var(--bg-3); }
.hr-steps li::before { content: "0" counter(s) " "; }
.hr-steps li.on { border-color: var(--gold); color: var(--ink); }
.hr-steps li.done { border-color: var(--gold-2); color: var(--ink-2); }
.hr-sticky { position: sticky; top: 6.5rem; }
.hr-json { background: var(--bg); border: 1px solid var(--line); padding: .8rem; font-size: 13px; line-height: 1.5; color: var(--gold); white-space: pre-wrap; word-break: break-all; margin: 0 0 1rem; }
.hr-dl { margin: 0; display: grid; gap: .8rem; }
.hr-dl dt { color: var(--mute); font-size: 13px; font-family: "Fragment Mono", monospace; }
.hr-dl dd { margin: .2rem 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* rewards */
.hr-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; align-items: start; }
.hr-split > div { min-width: 0; }
.hr-pay-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 15px; text-decoration: none; color: var(--ink) !important; }
.hr-pay-row .amt { font-family: "Fragment Mono", monospace; color: var(--gold); text-align: right; }
.hr-pay-row .meta { grid-column: 1 / -1; color: var(--mute); font-size: 13px; }
.hr-pay-row .meta a { color: var(--ink-2) !important; }

/* reversed */
.hr-rev td:first-child { width: 30%; }
.hr-rev td:first-child a { color: var(--gold) !important; text-decoration: none; word-break: break-word; }
.hr-rev td:first-child a:hover { text-decoration: underline; }
.hr-rev td { line-height: 1.5; font-size: 15px; color: var(--ink-2); padding: .9rem .6rem; }
.hr-where .hr-h2 { margin-bottom: 1.4rem; }
.hr-where-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border: 1px solid var(--line); }
.hr-where-grid > div { padding: 1.4rem; border-right: 1px solid var(--line); }
.hr-where-grid > div:first-child { background: var(--bg-2); }
.hr-where-grid > div:last-child { border-right: 0; }
.hr-where-grid p { color: var(--ink-2); font-size: 16px; line-height: 1.55; margin: 0; }

/* nav wallet button on app pages */
.hr-nav-wallet { display: flex; align-items: center; }
.hr-nav-wallet .nav_cta-button { border: 0; cursor: pointer; font: 500 15px "Host Grotesk", sans-serif; padding: .55rem .9rem; }
.hr-nav-wallet .nav_cta-button.on { background: var(--bg-3) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line-2); }

/* toasts */
.toasts { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 9999; max-width: min(380px, calc(100vw - 2rem)); }
.toast { background: var(--bg-3); border: 1px solid var(--line-2); border-left: 3px solid var(--gold); color: var(--ink); padding: .7rem .9rem; font-size: 14px; }
.toast.bad { border-left-color: #E9A08A; }
.toast a { color: var(--gold); }

@media (max-width: 991px) {
  .hr-coin-grid, .hr-launch, .hr-split { grid-template-columns: minmax(0, 1fr); }
  .hr-coin-side, .hr-sticky { position: static; }
  .hr-where-grid { grid-template-columns: 1fr; }
  .hr-where-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 767px) {
  .hr-page { padding-top: 5.5rem; }
  .hr-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: .7rem; }
  .hr-row .hide-s, .hr-row .go { display: none; }
  .hr-img { width: 40px; height: 40px; }
  .hr-2, .hr-3 { grid-template-columns: 1fr; gap: 0; }
  .hr-fees { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .hr-fees div { border-bottom: 1px solid var(--line); }
  .hr-table { font-size: 13px; }
  .hr-table .hide-s { display: none; }
  .hr-rev, .hr-rev tbody, .hr-rev tr, .hr-rev td { display: block; width: 100% !important; }
  .hr-rev thead { display: none; }
  .hr-rev tr { border-bottom: 1px solid var(--line-2); padding: .6rem 0; }
  .hr-rev td { border: 0; padding: .3rem 0; }
  .hr-steps li { font-size: 12px; }
}
.hr-body .custom_scroll { display: none; }
@media (max-width: 767px) {
  .footer_grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .footer_grid .footer_block_wrapper { display: block !important; height: auto !important; overflow: visible !important; }
  .footer_grid [footer-reveal] { gap: .6rem; }
}
@media (max-width: 991px) { .hr-nav-wallet { margin-left: auto; margin-right: .6rem; } }