:root {
    --hy-black: #090806;
    --hy-black-soft: #100e0a;
    --hy-bone: #efe8db;
    --hy-bone-dark: #e7ddcc;
    --hy-gold: #c99543;
    --hy-gold-light: #e0b45f;
    --hy-text: #17140f;
    --hy-muted: #756d61;
}


.hy {
    overflow: hidden;
    color: var(--hy-text);
    background: var(--hy-bone);
    font-family: "Manrope", sans-serif;
}


.hy *,
.hy *::before,
.hy *::after {
    box-sizing: border-box;
}


.hy-shell {
    width: min(calc(100% - 72px), 1360px);
    margin-inline: auto;
    position: relative;
    z-index: 5;
}


.hy-code,
.hy-section-number {
    font-family: "IBM Plex Mono", monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
}


.hy-section-number,
.hy-code {
    color: var(--hy-gold);
}


/* ==========================================================
   HEADER
   ========================================================== */

body > header,
header {
    min-height: 76px !important;
    background: #090806 !important;

    border-bottom:
        1px solid rgba(204,157,76,.20)
        !important;
}


header .container {
    min-height: 76px;
}



/* ==========================================================
   HERO
   ========================================================== */

.hy-hero {
    min-height: calc(100vh - 76px);
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

    color: #f4eee3;

    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(193,139,55,.13),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #090806,
            #0d0b08 55%,
            #080705
        );
}


.hy-grid-bg {
    position: absolute;
    inset: 0;

    opacity: .19;

    background-image:
        linear-gradient(
            rgba(211,168,92,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(211,168,92,.06) 1px,
            transparent 1px
        );

    background-size: 78px 78px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 95%
        );
}


.hy-hero-glow {
    position: absolute;

    width: 650px;
    height: 650px;

    top: -300px;
    right: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(204,151,66,.13),
            transparent 67%
        );
}


.hy-hero .hy-shell {
    padding: 42px 0 58px;
}


.hy-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 42px;
}


.hy-back {
    color: rgba(245,239,227,.46);
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
}


.hy-live {
    display: flex;
    align-items: center;
    gap: 9px;

    color: rgba(245,239,227,.40);

    font-family: "IBM Plex Mono", monospace;
    font-size: 8px;
    letter-spacing: .12em;
}


.hy-live span,
.hy-online-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #51c681;

    box-shadow:
        0 0 0 6px
        rgba(81,198,129,.08);
}


.hy-hero-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(440px,.82fr);

    gap: clamp(70px,8vw,130px);

    align-items: center;
}


.hy-hero-copy h1 {
    max-width: 700px;

    margin: 20px 0 22px;

    color: #f2ecdf;

    font-family: "Barlow Condensed", sans-serif;

    font-size:
        clamp(88px,10vw,158px);

    font-weight: 700;

    line-height: .76;

    letter-spacing: -.035em;
}


.hy-hero-copy > p {
    max-width: 500px;

    margin: 0;

    color: rgba(242,236,223,.56);

    font-size: 17px;

    line-height: 1.7;
}


.hy-actions {
    display: flex;
    gap: 10px;

    margin-top: 32px;
}


.hy-button {
    min-height: 48px;

    padding: 0 21px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    border-radius: 3px;

    border: 1px solid transparent;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}


.hy-button:hover {
    transform: translateY(-2px);
}


.hy-button-gold {
    color: #0c0a07;

    background:
        linear-gradient(
            135deg,
            #d8a958,
            #b97f2e
        );

    box-shadow:
        0 12px 28px
        rgba(184,128,45,.14);
}


.hy-button-dark {
    color: #eee7dc;

    border-color:
        rgba(216,171,92,.21);

    background:
        rgba(255,255,255,.018);
}


.hy-button-light {
    color: #282219;

    border-color:
        rgba(145,103,41,.23);

    background: transparent;
}


.hy-stat-rail {
    max-width: 650px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    margin-top: 52px;

    border-top:
        1px solid rgba(213,168,91,.18);

    border-bottom:
        1px solid rgba(213,168,91,.18);
}


.hy-stat-rail > div {
    padding: 17px 16px 18px 0;
}


.hy-stat-rail > div + div {
    padding-left: 17px;

    border-left:
        1px solid rgba(213,168,91,.12);
}


.hy-stat-rail span {
    display: block;

    margin-bottom: 6px;

    color: rgba(242,236,223,.32);

    font-family: "IBM Plex Mono", monospace;

    font-size: 7px;

    letter-spacing: .10em;
}


.hy-stat-rail strong {
    color: #f2ecdf;

    font-family: "Barlow Condensed", sans-serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1;
}


.hy-stat-rail b {
    font: inherit;
}


.hy-stat-rail small {
    margin-left: 3px;

    color: rgba(242,236,223,.34);

    font-size: 9px;
}


/* ==========================================================
   HERO ART
   ========================================================== */

.hy-hero-visual {
    min-height: 610px;
    position: relative;
}


.hy-art-frame {
    width: min(100%,500px);

    aspect-ratio: .83;

    position: absolute;

    top: 0;
    right: 0;

    overflow: hidden;

    border:
        1px solid rgba(216,171,92,.36);

    border-radius: 14px;

    background: #14110d;

    box-shadow:
        0 50px 110px
        rgba(0,0,0,.44);

    transform:
        perspective(1200px)
        rotateX(var(--rx,0deg))
        rotateY(var(--ry,0deg));

    transition:
        transform .16s ease-out;
}


.hy-art {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        saturate(.94)
        contrast(1.04);
}


.hy-art-logo {
    padding: 90px;

    object-fit: contain;

    background:
        linear-gradient(
            145deg,
            #1b1710,
            #0b0907
        );
}


.hy-art-shadow {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 42%,
            rgba(7,6,5,.12) 60%,
            rgba(7,6,5,.93) 100%
        );
}


.hy-art-top {
    position: absolute;

    top: 20px;
    left: 20px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 11px;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius: 999px;

    background:
        rgba(9,8,6,.58);

    backdrop-filter:
        blur(14px);
}


.hy-art-top img {
    width: 30px;
    height: 30px;

    border-radius: 50%;

    object-fit: cover;
}


.hy-art-top span,
.hy-art-bottom span {
    display: block;

    color: rgba(243,237,227,.40);

    font-family: "IBM Plex Mono", monospace;

    font-size: 7px;
}


.hy-art-top strong,
.hy-art-bottom strong {
    display: block;

    margin-top: 2px;

    color: #f3ede2;

    font-size: 10px;
}


.hy-art-bottom {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 22px;

    display: flex;
    align-items: center;
    gap: 11px;
}


.hy-representation {
    width: 260px;

    position: absolute;

    left: -55px;
    bottom: 18px;

    z-index: 5;

    padding: 22px;

    color: #f3ede1;

    border:
        1px solid rgba(217,171,91,.37);

    border-radius: 10px;

    background:
        rgba(14,12,9,.89);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 30px 65px
        rgba(0,0,0,.32);
}


.hy-representation .hy-code {
    color: rgba(243,237,225,.40);
    font-size: 7px;
}


.hy-percent {
    margin: 8px 0 4px;

    color: var(--hy-gold-light);

    font-family: "Barlow Condensed", sans-serif;

    font-size: 66px;

    font-weight: 700;

    line-height: .9;
}


.hy-representation p {
    margin: 0;

    color: rgba(243,237,225,.43);

    font-size: 9px;
}


.hy-progress {
    height: 2px;

    margin-top: 16px;

    overflow: hidden;

    background:
        rgba(255,255,255,.09);
}


.hy-progress span {
    width: 0;
    height: 100%;

    display: block;

    background:
        var(--hy-gold-light);

    transition:
        width 1.35s
        cubic-bezier(.22,.8,.24,1);
}


.hy.is-ready
.hy-progress span {
    width: var(--progress);
}



/* ==========================================================
   VERIFY
   ========================================================== */

.hy-verify {
    min-height: 880px;

    position: relative;

    overflow: hidden;

    padding: 112px 0 120px;

    background:
        radial-gradient(
            circle at 81% 40%,
            rgba(187,138,68,.10),
            transparent 28%
        ),
        var(--hy-bone);
}


.hy-watermark {
    position: absolute;

    right: -20px;
    top: 20px;

    color:
        rgba(82,61,31,.027);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(180px,23vw,360px);

    font-weight: 700;

    line-height: .9;

    pointer-events: none;
}


.hy-verify-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(420px,.82fr);

    gap:
        clamp(75px,9vw,140px);

    align-items: center;

    margin-top: 35px;
}


.hy-connected {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #665f54;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    letter-spacing: .09em;
}


.hy-connected > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4dc680;
}


.hy-offline > span {
    background: #aaa091;
}


.hy-verify-main h2,
.hy-leader-head h2,
.hy-reward-heading h2 {
    font-family: "Space Grotesk", sans-serif;

    font-weight: 700;

    letter-spacing: -.055em;
}


.hy-verify-main h2 {
    margin: 18px 0 20px;

    font-size:
        clamp(52px,5.4vw,82px);

    line-height: .94;
}


.hy-intro {
    max-width: 570px;

    color: var(--hy-muted);

    font-size: 15px;

    line-height: 1.75;
}


.hy-wallet {
    margin-top: 42px;
}


.hy-step {
    display: grid;

    grid-template-columns:
        48px 1fr;

    gap: 17px;
}


.hy-step-number {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    color: #9d6e2d;

    border:
        1px solid rgba(163,114,44,.31);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 9px;
}


.hy-step h3 {
    margin: 5px 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 19px;

    font-weight: 600;
}


.hy-step p {
    margin: 0;

    color: #766e62;

    font-size: 12px;
}


.hy-step .hy-code {
    font-size: 7px;
}


.hy-step-second {
    margin-top: 35px;
}


.hy-wallet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin:
        22px 0 14px 65px;
}


.hy-wallet-status {
    max-width: 570px;

    margin-left: 65px;

    padding: 12px 14px;

    color: #6d665b;

    border-left:
        2px solid
        rgba(173,122,49,.42);

    background:
        rgba(89,72,49,.052);

    font-size: 11px;
}


.hy-owned {
    margin-top: 30px;
}


.hy-owned
.owned-nft-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(120px,1fr)
        );

    gap: 11px;

    margin-top: 22px;
}


.hy-owned
.owned-nft-card {
    padding: 7px;

    color: #19150f;

    border:
        1px solid
        rgba(151,106,42,.19);

    border-radius: 0;

    background:
        rgba(255,255,255,.25);

    cursor: pointer;
}


.hy-owned
.owned-nft-card.is-selected {
    border-color: #b77d2d;
}


.hy-owned
.owned-nft-image {
    aspect-ratio: 1;

    overflow: hidden;

    margin-bottom: 7px;

    background: #d9cebd;
}


.hy-owned
.owned-nft-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.hy-owned
.owned-nft-card strong {
    font-size: 10px;
}


.hy-verify-action {
    margin:
        21px 0 0 65px;
}



/* ==========================================================
   PREVIEW
   ========================================================== */

.hy-preview {
    border:
        1px solid
        rgba(147,104,41,.24);

    background:
        rgba(255,255,255,.28);

    box-shadow:
        0 35px 90px
        rgba(72,52,24,.10);
}


.hy-preview-header {
    min-height: 62px;

    padding: 0 18px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}


.hy-preview-header strong {
    display: block;

    margin-top: 3px;

    color: #524b40;

    font-size: 9px;
}


.hy-preview-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #b99860;
}


.hy-preview.is-verified
.hy-preview-dot {
    background: #4cc57f;
}


.hy-preview-art {
    position: relative;

    aspect-ratio: .95;

    margin: 0 17px;

    overflow: hidden;

    background: #0b0907;
}


.hy-preview-art > img {
    width: 100%;
    height: 100%;

    display: block;

    padding: 25%;

    object-fit: contain;

    opacity: .72;

    transition:
        opacity .25s ease,
        transform .4s ease;
}


.hy-preview-art
> img.has-asset {
    padding: 0;

    object-fit: cover;

    opacity: 1;
}


.hy-preview-fade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7,6,5,.90),
            transparent 56%
        );
}


.hy-preview-label {
    position: absolute;

    left: 21px;
    right: 21px;
    bottom: 19px;
}


.hy-preview-label span {
    display: block;

    margin-bottom: 5px;

    color: #d1a451;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;
}


.hy-preview-label strong {
    color: #f4ede2;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 19px;
}


.hy-preview-data {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    margin: 0 17px 17px;

    border:
        1px solid
        rgba(145,101,39,.14);

    border-top: 0;
}


.hy-preview-data div {
    padding: 11px;
}


.hy-preview-data div + div {
    border-left:
        1px solid
        rgba(145,101,39,.12);
}


.hy-preview-data span {
    display: block;

    color: #958d81;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 6px;
}


.hy-preview-data strong {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: #302a21;

    font-size: 8px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.hy-green {
    color: #3f9861 !important;
}



/* ==========================================================
   LEADERBOARD
   ========================================================== */

.hy-leaderboard {
    padding: 105px 0 120px;

    color: #f2ecdf;

    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(181,126,48,.07),
            transparent 28%
        ),
        #090806;
}


.hy-leader-head {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 70px;

    margin-bottom: 46px;
}


.hy-leader-head h2 {
    margin: 18px 0 12px;

    color: #f2ecdf;

    font-size:
        clamp(55px,6vw,88px);

    line-height: .92;
}


.hy-leader-head p {
    max-width: 560px;

    margin: 0;

    color:
        rgba(242,236,223,.43);

    font-size: 13px;

    line-height: 1.7;
}


.hy-representing {
    min-width: 210px;

    padding: 18px 0;

    border-top:
        1px solid
        rgba(210,162,79,.26);

    border-bottom:
        1px solid
        rgba(210,162,79,.26);
}


.hy-representing > span {
    display: block;

    margin-bottom: 7px;

    color:
        rgba(242,236,223,.30);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;
}


.hy-representing strong {
    color: var(--hy-gold-light);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 46px;

    font-weight: 600;
}


.hy-representing b {
    font: inherit;
}


.hy-representing small {
    color:
        rgba(242,236,223,.30);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;
}


.hy-table {
    border-top:
        1px solid
        rgba(255,255,255,.10);
}


.hy-table-head,
.hy-row {
    display: grid;

    grid-template-columns:
        70px
        minmax(260px,1fr)
        150px
        150px;

    gap: 20px;

    align-items: center;
}


.hy-table-head {
    min-height: 50px;

    color:
        rgba(242,236,223,.27);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .09em;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.hy-row {
    min-height: 108px;

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    transition:
        background .2s ease,
        padding .2s ease;
}


.hy-row:hover {
    padding-left: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(202,151,68,.05),
            transparent
        );
}


.hy-rank {
    color: var(--hy-gold);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 28px;

    font-weight: 600;
}


.hy-member {
    display: flex;

    align-items: center;

    gap: 15px;
}


.hy-member-image {
    width: 62px;
    height: 62px;

    overflow: hidden;

    border:
        1px solid
        rgba(202,155,75,.34);
}


.hy-member-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.hy-member strong {
    display: block;

    color: #f2ecdf;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 14px;
}


.hy-member span {
    display: block;

    margin-top: 4px;

    color:
        rgba(242,236,223,.28);

    font-size: 8px;
}


.hy-days strong {
    color: #eee7dc;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 38px;

    font-weight: 600;
}


.hy-current strong {
    color: var(--hy-gold);
}


.hy-days span {
    margin-left: 4px;

    color:
        rgba(242,236,223,.28);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 6px;
}



/* ==========================================================
   REWARDS
   ========================================================== */

.hy-rewards {
    position: relative;

    overflow: hidden;

    padding: 105px 0 130px;

    background:
        linear-gradient(
            135deg,
            #f0eadd,
            #e7ddcd
        );
}


.hy-rewards-bg {
    position: absolute;

    top: 0;
    right: -10px;

    color:
        rgba(78,57,27,.025);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(150px,22vw,360px);

    font-weight: 700;

    line-height: .9;

    pointer-events: none;
}


.hy-reward-heading {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 60px;

    margin: 22px 0 48px;
}


.hy-reward-heading h2 {
    max-width: 790px;

    margin: 0;

    font-size:
        clamp(55px,6vw,86px);

    line-height: .93;
}


.hy-reward-heading p {
    max-width: 320px;

    margin: 0 0 8px;

    color: #756d61;

    font-size: 13px;

    line-height: 1.7;
}


.hy-reward-grid {
    display: grid;

    gap: 22px;
}


.hy-reward-card {
    min-height: 315px;

    display: grid;

    grid-template-columns:
        170px
        minmax(300px,1fr)
        minmax(340px,.9fr);

    align-items: stretch;

    overflow: hidden;

    border:
        1px solid
        rgba(154,109,42,.25);

    background:
        rgba(255,255,255,.24);

    box-shadow:
        0 28px 76px
        rgba(70,48,17,.065);

    transition:
        transform .24s ease,
        box-shadow .24s ease;
}


.hy-reward-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 34px 86px
        rgba(70,48,17,.10);
}


.hy-reward-days {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: 34px;

    border-right:
        1px solid
        rgba(154,109,43,.15);
}


.hy-reward-days strong {
    color: #bb8235;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 88px;

    font-weight: 700;

    line-height: .8;
}


.hy-reward-days span {
    margin-top: 10px;

    color: #a77838;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;
}


.hy-reward-copy {
    align-self: center;

    padding: 44px;
}


.hy-reward-copy .hy-code {
    font-size: 7px;
}


.hy-reward-copy h3 {
    margin: 10px 0 13px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(29px,3vw,42px);

    font-weight: 600;

    letter-spacing: -.04em;
}


.hy-reward-copy p {
    max-width: 430px;

    margin: 0;

    color: #756d61;

    font-size: 12px;

    line-height: 1.65;
}


.hy-reward-prize {
    margin-top: 21px;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(153,108,43,.15);
}


.hy-reward-prize span {
    display: block;

    color: #a67637;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 6px;
}


.hy-reward-prize strong {
    display: block;

    margin-top: 4px;

    color: #2c261d;

    font-size: 11px;
}


.hy-reward-art {
    min-height: 315px;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(202,155,75,.14),
            transparent 30%
        ),
        #0c0a07;
}


.hy-reward-art
> img:not(.hy-reward-logo) {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.hy-giant-number {
    position: absolute;

    left: -10px;
    bottom: -32px;

    color:
        rgba(207,157,71,.13);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 255px;

    font-weight: 700;

    line-height: .9;
}


.hy-reward-logo {
    position: absolute;

    width: 68px;
    height: 68px;

    top: 28px;
    right: 28px;

    object-fit: cover;

    border-radius: 50%;

    border:
        1px solid
        rgba(211,165,88,.30);
}



/* ==========================================================
   MODAL
   ========================================================== */

.hy-modal {
    color: #f2ecdf;

    background: #0d0b08 !important;

    border:
        1px solid
        rgba(203,158,78,.26)
        !important;
}


.hy-modal h3 {
    color: #f2ecdf;

    font-family:
        "Space Grotesk",
        sans-serif;
}



/* ==========================================================
   REVEALS
   ========================================================== */

[data-hy-reveal] {
    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity .7s ease,
        transform .7s
        cubic-bezier(.22,.8,.24,1);
}


[data-hy-reveal].is-visible {
    opacity: 1;

    transform: translateY(0);
}



/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1050px) {

    .hy-hero-layout,
    .hy-verify-layout {
        grid-template-columns: 1fr;
    }

    .hy-hero-visual {
        width: min(100%,610px);

        margin-inline: auto;
    }

    .hy-representation {
        left: 0;
    }

    .hy-preview {
        width: min(100%,580px);
    }

    .hy-reward-card {
        grid-template-columns:
            150px 1fr;
    }

    .hy-reward-art {
        grid-column: 1 / -1;

        min-height: 280px;
    }

}


@media (max-width: 720px) {

    .hy-shell {
        width:
            min(
                calc(100% - 34px),
                1360px
            );
    }

    .hy-hero {
        min-height: auto;
    }

    .hy-hero-copy h1 {
        font-size:
            clamp(80px,24vw,120px);
    }

    .hy-stat-rail {
        grid-template-columns:
            1fr 1fr;
    }

    .hy-stat-rail
    > div:nth-child(3) {
        border-left: 0;

        padding-left: 0;
    }

    .hy-stat-rail
    > div:nth-child(3),
    .hy-stat-rail
    > div:nth-child(4) {
        border-top:
            1px solid
            rgba(213,168,91,.12);
    }

    .hy-verify,
    .hy-leaderboard,
    .hy-rewards {
        padding: 80px 0;
    }

    .hy-verify-main h2,
    .hy-leader-head h2,
    .hy-reward-heading h2 {
        font-size:
            clamp(46px,13vw,66px);
    }

    .hy-wallet-actions,
    .hy-wallet-status,
    .hy-verify-action {
        margin-left: 0;
    }

    .hy-leader-head,
    .hy-reward-heading {
        display: block;
    }

    .hy-representing {
        margin-top: 28px;
    }

    .hy-table-head {
        display: none;
    }

    .hy-row {
        grid-template-columns:
            42px 1fr auto;
    }

    .hy-row
    .hy-days:last-child {
        display: none;
    }

    .hy-reward-heading p {
        margin-top: 20px;
    }

    .hy-reward-card {
        grid-template-columns: 1fr;
    }

    .hy-reward-days {
        padding: 28px 28px 0;

        border: 0;
    }

    .hy-reward-copy {
        padding: 28px;
    }

    .hy-reward-art {
        grid-column: auto;
    }

}


@media (prefers-reduced-motion: reduce) {

    [data-hy-reveal] {
        opacity: 1;

        transform: none;

        transition: none;
    }

}



/* ==========================================================
   TEMPLE LOYALTY - FINAL PROJECT TYPOGRAPHY
   ----------------------------------------------------------
   Barlow Condensed = display / impact
   Manrope          = copy / UI / secondary headings
   IBM Plex Mono    = technical labels only
   ========================================================== */


/* ==========================================================
   1. MAJOR DISPLAY HEADINGS
   ========================================================== */

.hy-hero-copy h1,
.hy-verify-main h2,
.hy-leader-head h2,
.hy-reward-heading h2 {
    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-weight: 700 !important;

    letter-spacing: -.03em !important;
}


/* Keep hero exactly in its strong current direction */

.hy-hero-copy h1 {
    line-height: .76 !important;
}


/* Same family as hero, smaller hierarchy */

.hy-verify-main h2 {
    font-size:
        clamp(64px, 6.3vw, 96px)
        !important;

    line-height: .86 !important;

    margin:
        18px 0 22px
        !important;
}


.hy-leader-head h2 {
    font-size:
        clamp(68px, 6.7vw, 104px)
        !important;

    line-height: .85 !important;

    margin:
        18px 0 20px
        !important;
}


.hy-reward-heading h2 {
    font-size:
        clamp(66px, 6.5vw, 100px)
        !important;

    line-height: .86 !important;
}


/* ==========================================================
   2. THE THREE DESCRIPTIVE LINES
   EXACT SAME TYPOGRAPHY
   ========================================================== */

/*
   Represent the collection...
   Verify your wallet, select an NFT...
   Ranked by continuous days...
*/

.hy-hero-copy > p,
.hy-verify-main > .hy-intro,
.hy-leader-head > div > p {
    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        17px !important;

    font-weight:
        400 !important;

    line-height:
        1.68 !important;

    letter-spacing:
        0 !important;

    max-width:
        560px;
}


/* Dark-section descriptive copy */

.hy-hero-copy > p,
.hy-leader-head > div > p {
    color:
        rgba(
            242,
            236,
            223,
            .60
        )
        !important;
}


/* Light-section descriptive copy */

.hy-verify-main > .hy-intro {
    color:
        #756d61
        !important;
}


/* Deliberate spacing - no inherited paragraph margins */

.hy-hero-copy > p {
    margin:
        0 !important;
}


.hy-verify-main > .hy-intro {
    margin:
        0 !important;
}


.hy-leader-head > div > p {
    margin:
        0 !important;
}


/* ==========================================================
   3. SECONDARY UI HEADINGS
   These should all look related.
   ========================================================== */

/*
   Verify your Solana wallet
   Select an NFT to preview
   100 Days Trained Role
   Member names
*/

.hy-step h3,
.hy-preview-label strong,
.hy-reward-copy h3,
.hy-member strong {
    font-family:
        "Manrope",
        sans-serif !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.025em !important;
}


/* Verify your Solana wallet */

.hy-step h3 {
    margin:
        5px 0 6px
        !important;

    font-size:
        20px !important;

    line-height:
        1.28 !important;
}


/* Sign a verification message... */

.hy-step p {
    margin:
        0 !important;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        400 !important;

    line-height:
        1.58 !important;

    letter-spacing:
        0 !important;

    color:
        #766e62
        !important;
}


/* Select an NFT to preview */

.hy-preview-label strong {
    display: block;

    font-size:
        21px !important;

    line-height:
        1.25 !important;
}


/* Awaiting selection */

.hy-preview-header strong {
    display: block;

    margin-top:
        5px !important;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    line-height:
        1.4 !important;

    letter-spacing:
        0 !important;
}


/* 100 Days Trained Role */

.hy-reward-copy h3 {
    margin:
        10px 0 14px
        !important;

    font-size:
        clamp(
            28px,
            2.5vw,
            38px
        )
        !important;

    line-height:
        1.12 !important;
}


/* Reward descriptive text */

.hy-reward-copy p {
    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        400 !important;

    line-height:
        1.62 !important;

    letter-spacing:
        0 !important;
}


/* Member */

.hy-member strong {
    font-size:
        15px !important;

    line-height:
        1.3 !important;
}


.hy-member span {
    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        10px !important;

    line-height:
        1.4 !important;
}


/* ==========================================================
   4. NORMAL UI / BUTTONS / VALUES
   ========================================================== */

.hy-button,
.hy-wallet-status,
.hy-preview-data strong,
.hy-representation p {
    font-family:
        "Manrope",
        sans-serif !important;
}


.hy-button {
    font-weight:
        600 !important;
}


.hy-wallet-status {
    font-size:
        12px !important;

    line-height:
        1.5 !important;

    letter-spacing:
        0 !important;
}


.hy-preview-data strong {
    font-size:
        11px !important;

    font-weight:
        600 !important;

    line-height:
        1.4 !important;
}


.hy-representation p {
    font-size:
        13px !important;

    font-weight:
        400 !important;

    line-height:
        1.45 !important;

    letter-spacing:
        0 !important;

    color:
        rgba(
            243,
            237,
            225,
            .64
        )
        !important;
}


/* ==========================================================
   5. TECHNICAL LABELS
   ONE CONSISTENT SYSTEM
   ========================================================== */

.hy-code,
.hy-section-number,
.hy-live,
.hy-connected,
.hy-step-number,
.hy-stat-rail span,
.hy-table-head,
.hy-preview-label span,
.hy-preview-data span,
.hy-representing > span,
.hy-days span,
.hy-reward-days span,
.hy-reward-prize span,
.hy-art-top span,
.hy-art-bottom span {
    font-family:
        "IBM Plex Mono",
        monospace !important;

    font-weight:
        600 !important;

    letter-spacing:
        .10em !important;

    text-transform:
        uppercase;
}


/* Main technical labels */

.hy-code,
.hy-section-number {
    font-size:
        10px !important;

    line-height:
        1.45 !important;
}


/* Discord connected / live tracking */

.hy-live,
.hy-connected {
    font-size:
        9px !important;

    line-height:
        1.4 !important;
}


/* Wallet step number */

.hy-step-number {
    font-size:
        9px !important;
}


/* Hero stat labels */

.hy-stat-rail span {
    font-size:
        9px !important;

    line-height:
        1.35 !important;
}


/* Collection Representation */

.hy-representation .hy-code {
    font-size:
        10px !important;

    line-height:
        1.4 !important;

    color:
        rgba(
            243,
            237,
            225,
            .58
        )
        !important;
}


/* Preview label */

.hy-preview-header .hy-code {
    font-size:
        10px !important;
}


.hy-preview-label span {
    font-size:
        9px !important;

    line-height:
        1.4 !important;
}


/* NETWORK / COLLECTION / STATUS */

.hy-preview-data span {
    font-size:
        9px !important;

    line-height:
        1.35 !important;
}


/* Leaderboard column headings */

.hy-table-head {
    font-size:
        10px !important;

    line-height:
        1.4 !important;

    color:
        rgba(
            242,
            236,
            223,
            .45
        )
        !important;
}


/* REPRESENTING NOW */

.hy-representing > span {
    font-size:
        10px !important;

    line-height:
        1.4 !important;
}


/* DAYS beside leaderboard numbers */

.hy-days span {
    font-size:
        9px !important;
}


/* Reward labels */

.hy-reward-days span,
.hy-reward-prize span {
    font-size:
        9px !important;
}


/* ==========================================================
   6. IMPACT NUMBERS
   ========================================================== */

.hy-percent,
.hy-stat-rail strong,
.hy-representing strong,
.hy-rank,
.hy-days strong,
.hy-reward-days strong,
.hy-giant-number {
    font-family:
        "Barlow Condensed",
        sans-serif !important;
}


/* Representing now value */

.hy-representing strong {
    font-size:
        50px !important;
}


.hy-representing small {
    margin-left:
        5px;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        11px !important;
}


/* ==========================================================
   7. SPACING REFINEMENT
   ========================================================== */

/* Proof */

.hy-verify {
    min-height:
        0 !important;

    padding:
        88px 0 102px
        !important;
}


.hy-verify-layout {
    margin-top:
        26px !important;
}


/* Leaderboard */

.hy-leaderboard {
    padding:
        94px 0 105px
        !important;
}


.hy-leader-head {
    margin-bottom:
        42px !important;
}


/* Rewards */

.hy-rewards {
    padding:
        92px 0 110px
        !important;
}


/* ==========================================================
   8. FOOTER
   HTML already contains correct single spacing.
   Do not manipulate word spacing.
   ========================================================== */

footer,
footer *,
footer a {
    word-spacing:
        normal !important;

    letter-spacing:
        normal !important;
}


footer a {
    margin:
        0 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .hy-hero-copy > p,
    .hy-verify-main > .hy-intro,
    .hy-leader-head > div > p {
        font-size:
            15px !important;

        line-height:
            1.65 !important;
    }


    .hy-verify-main h2,
    .hy-leader-head h2,
    .hy-reward-heading h2 {
        font-size:
            clamp(
                55px,
                16vw,
                78px
            )
            !important;

        line-height:
            .87 !important;
    }


    .hy-code,
    .hy-section-number {
        font-size:
            9px !important;
    }

}



/* ==========================================================
   FINAL SHARED SECTION HEADING SCALE
   ========================================================== */

/*
   Choose The PFP You Represent.
   Longest Current Streaks
   Represent. Progress. Unlock.
*/

.hy-verify-main h2,
.hy-leader-head h2,
.hy-reward-heading h2 {
    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        clamp(62px, 5vw, 88px)
        !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        -.015em !important;

    word-spacing:
        normal !important;

    font-kerning:
        normal !important;
}


/* Give multiline headings safe physical spacing */

.hy-verify-main h2 {
    max-width:
        700px;
}


/* Keep supporting copy consistently separated */

.hy-verify-main > .hy-intro,
.hy-leader-head > div > p,
.hy-reward-heading > p {
    margin-top:
        24px !important;
}



/* ==========================================================
   PROJECT HEADING TITLE CASE
   Guaranteed visual result
   ========================================================== */

.hy-verify-main h2 {
    text-transform: capitalize !important;
}



/* ==========================================================
   PROJECT PAGE MOBILE FINAL PASS
   ONLY <= 720px
   ========================================================== */

@media (max-width: 720px) {


    /* Prevent sideways movement */

    .hy {
        width:
            100% !important;

        max-width:
            100% !important;

        overflow-x:
            hidden !important;
    }


    /* ------------------------------------------------------
       SAME MOBILE SECTION HEADING SIZE AS OTHER PAGES

       Choose The PFP You Represent.
       Longest Current Streaks
       Represent. Progress. Unlock.
       ------------------------------------------------------ */

    .hy-verify-main h2,
    .hy-leader-head h2,
    .hy-reward-heading h2 {
        font-family:
            "Barlow Condensed",
            sans-serif !important;

        font-size:
            clamp(42px, 11.5vw, 50px)
            !important;

        font-weight:
            700 !important;

        line-height:
            1.02 !important;

        letter-spacing:
            -.01em !important;

        word-spacing:
            normal !important;

        max-width:
            100% !important;
    }


    /* ------------------------------------------------------
       CONNECT DISCORD
       Give the button breathing room.
       ------------------------------------------------------ */

    .loyalty-join-action {
        margin-top:
            22px !important;
    }


    .loyalty-join-action
    .loyalty-primary-button {
        margin-top:
            4px !important;
    }


    /* ------------------------------------------------------
       PREVIEW PANEL
       ------------------------------------------------------ */

    .hy-preview,
    .hy-preview-card,
    .hy-preview-shell {
        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }

}



/* ==========================================================
   REWARD IMAGE CONTAINMENT
   Uploaded square artwork must never enlarge the reward card.
   ========================================================== */

.hy-reward-art {
    overflow: hidden !important;
}


.hy-reward-art > img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center !important;
}



/* ==========================================================
   FINAL REWARD IMAGE FIT
   Show the complete uploaded artwork.
   Never enlarge the reward panel.
   ========================================================== */

.hy-reward-art {
    overflow: hidden !important;
}


.hy-reward-art > img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center !important;
}



/* ==========================================================
   REWARD ART: FINAL BEHAVIOUR
   Uploaded image fills panel.
   Fallback project logo stays small.
   ========================================================== */


/* Actual uploaded reward image only */
.hy-reward-art > img:not(.hy-reward-logo) {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center !important;
}


/* Fallback project logo */
.hy-reward-art > .hy-reward-logo {
    width: 72px !important;
    height: 72px !important;

    max-width: 72px !important;
    max-height: 72px !important;

    object-fit: contain !important;

    position: absolute !important;
    top: 26px !important;
    right: 26px !important;

    left: auto !important;
    bottom: auto !important;
}



/* ==========================================================
   MOBILE HEADING -> BODY COPY SPACING
   One consistent rhythm across the project page.
   Desktop untouched.
   ========================================================== */

@media (max-width: 720px) {

    /* Hero description */
    .hy-hero-copy > p {
        margin-top: 30px !important;
    }


    /* Choose The PFP section */
    .hy-verify-main > .hy-intro {
        margin-top: 30px !important;
    }


    /* Leaderboard introduction */
    .hy-leader-head > div > p {
        margin-top: 30px !important;
    }


    /* Rewards & Milestones introduction */
    .hy-reward-heading > p {
        margin-top: 30px !important;
    }

}



/* ==========================================================
   MOBILE CONNECT DISCORD SPACING
   Desktop untouched.
   ========================================================== */

@media (max-width: 720px) {

    .loyalty-join-action {
        margin-top: 32px !important;
    }

}


/* ==========================================================
   MOBILE CONNECT DISCORD GAP
   Match dark hero button spacing
   ========================================================== */

@media (max-width: 720px) {

    .hy-intro + .hy-button {
        margin-top: 30px !important;
    }

}



/* ==========================================================
   MOBILE REWARD ART — SHOW COMPLETE IMAGE
   Desktop untouched.
   ========================================================== */

@media (max-width: 720px) {

    .hy-reward-art {
        width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        aspect-ratio: 16 / 9 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: relative !important;

        overflow: hidden !important;
    }


    /* Uploaded milestone artwork */
    .hy-reward-art > img:not(.hy-reward-logo) {
        width: auto !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: 100% !important;

        display: block !important;

        object-fit: contain !important;
        object-position: center !important;

        position: static !important;

        margin: auto !important;
    }


    /* Keep fallback logo behaviour unchanged */
    .hy-reward-art > .hy-reward-logo {
        width: 72px !important;
        height: 72px !important;

        max-width: 72px !important;
        max-height: 72px !important;

        position: absolute !important;

        top: 26px !important;
        right: 26px !important;

        left: auto !important;
        bottom: auto !important;

        margin: 0 !important;

        object-fit: contain !important;
    }

}