:root {
    color-scheme: light
}

@media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        color-scheme: light
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

/* stop long-press "Save Image" / drag-out on every logo and watermark image site-wide */
img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none
}

a {
    color: inherit;
    text-decoration: none
}

body {
    font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
    color: #1C1C1C;
    background: #F4F4F4;
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden
}

h1,
h2,
h3 {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: .92;
    font-variation-settings: "wdth" 110
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px
}

.ph {
    background-color: #262626;
    color: #F4F4F4;
    font: 11px/1.4 Mulish, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    letter-spacing: .04em;
    background-image: linear-gradient(160deg, #333 0%, #1C1C1C 100%)
}

/* utility bar */
.util {
    background: #1C1C1C;
    color: #F4F4F4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.util .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 34px;
    gap: 16px
}

.util a {
    color: #F4F4F4
}

.util a.g {
    color: #F0A80D
}

.util .r {
    display: flex;
    gap: 16px
}

/* header */
header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(244, 244, 244, .92);
    backdrop-filter: blur(8px);
    border-bottom: 2px solid #1C1C1C
}

header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66px
}

header .brand {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 18px
}

header nav {
    display: flex;
    gap: 22px;
    font-size: 14px;
    font-weight: 800;
    color: #333
}

header nav a.on {
    color: #1C1C1C;
    border-bottom: 3px solid #F0A80D;
    padding-bottom: 2px
}

.btn {
    display: inline-block;
    font-weight: 800;
    font-size: 16px;
    padding: 14px 22px;
    border-radius: 6px;
    background: #1C1C1C;
    color: #fff
}

.btn.gold {
    background: #F0A80D;
    color: #1C1C1C
}

.btn.line {
    background: none;
    border: 2px solid #1C1C1C;
    color: #1C1C1C
}

.btn.w {
    background: #F4F4F4;
    color: #1C1C1C
}

/* spotlight hero */
.hero {
    position: relative;
    padding: 110px 0 90px;
    overflow: hidden
}

.hero .spot {
    position: absolute;
    width: 900px;
    height: 900px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(240, 168, 13, .9), rgba(240, 168, 13, 0) 65%);
    right: -300px;
    top: -300px;
    z-index: 0
}

.hero .in {
    position: relative;
    z-index: 1
}

.lab {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 800;
    color: #333
}

.hero h1 {
    font-size: clamp(56px, 10vw, 150px);
    margin: 16px 0 22px;
    max-width: 10ch
}

.hero h1 span {
    color: #fff;
    background: #1C1C1C;
    padding: 0 .1em
}

.hero p {
    font-size: 20px;
    max-width: 40ch;
    color: #333
}

.hero .acts {
    margin-top: 30px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

/* statements */
.stmt {
    padding: 100px 0;
    border-top: 2px solid #1C1C1C;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 30px;
    position: relative;
    grid-template-columns: 1fr;
}

@media (max-width:820px) {
    .stmt {
        grid-template-columns: 1fr;
        padding: 60px 0
    }
}

.stmt .n {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 64px;
    line-height: .8;
    color: #1C1C1C
}

.stmt h2 {
    font-size: clamp(40px, 6.6vw, 104px);
    max-width: 12ch
}

.stmt h2 span {
    color: #fff;
    background: #1C1C1C;
    padding: 0 .1em
}

.stmt p {
    font-size: 18px;
    color: #333;
    max-width: 52ch;
    margin-top: 20px
}

.row {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 30px
}

.row b {
    display: block;
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1
}

.row span {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    color: #333
}

.dark {
    background: #1C1C1C;
    color: #fff
}

.dark .stmt {
    border-top: 0
}

.dark .stmt .n {
    color: #F0A80D
}

.dark .stmt p,
.dark .row span,
.dark .lab {
    color: #F4F4F4
}

.dark .stmt h2 span {
    background: #F0A80D;
    color: #1C1C1C
}

/* banners (marquee rows) */
.rows {
    background: #1C1C1C;
    padding: 10px 0
}

.rw {
    white-space: nowrap;
    overflow: hidden;
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(40px, 7vw, 96px);
    line-height: 1;
    border-top: 2px solid #333;
    color: #F4F4F4
}

.rw:last-child {
    border-bottom: 2px solid #333
}

.rw span {
    display: inline-block;
    padding-right: .5em;
    animation: l 28s linear infinite
}

.rw.r span {
    animation-direction: reverse
}

.rw.g {
    color: #F0A80D
}

.rw.fill {
    background: #F0A80D;
    color: #1C1C1C
}

.rw.out span {
    color: transparent;
    -webkit-text-stroke: 2px #F4F4F4
}

@keyframes l {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

/* count */
.count {
    text-align: center;
    padding: 90px 0;
    border-top: 2px solid #1C1C1C
}

.count .big {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(80px, 16vw, 240px);
    line-height: .85;
    letter-spacing: -.05em
}

.count .big small {
    display: block;
    font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #333;
    margin-top: 14px
}

.count .bar {
    height: 10px;
    background: #E3E3E3;
    max-width: 720px;
    margin: 26px auto 8px
}

.count .bar i {
    display: block;
    height: 100%;
    background: #F0A80D;
    width: 12.5%
}

.count .k {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    color: #333
}

/* how it works */
.how {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px
}

@media (max-width:820px) {
    .how {
        grid-template-columns: 1fr
    }
}

.how>div {
    border-top: 3px solid #1C1C1C;
    padding-top: 16px
}

.how .i {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 44px;
    background: #F0A80D;
    color: #1C1C1C;
    display: inline-block;
    padding: 0 10px;
    line-height: 1.1
}

.how h3 {
    font-size: 28px;
    margin: 14px 0 8px
}

.how p {
    font-size: 16px;
    color: #333
}

.dark .how>div {
    border-top-color: #F0A80D
}

.dark .how p {
    color: #F4F4F4
}

/* footer */
footer {
    background: #1C1C1C;
    color: #F4F4F4;
    padding: 56px 0 40px;
    font-size: 14px
}

footer .cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px
}

@media (max-width:820px) {
    footer .cols {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:480px) {
    footer .cols {
        grid-template-columns: 1fr
    }
}

footer h4 {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #F0A80D;
    margin-bottom: 12px
}

footer a {
    display: block;
    padding: 4px 0;
    color: #fff
}

footer .soc {
    display: flex;
    gap: 10px;
    margin-top: 14px
}

footer .soc a {
    width: 38px;
    height: 38px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 12px;
    font-weight: 800;
    border-radius: 4px
}

footer .base {
    border-top: 1px solid #333;
    margin-top: 36px;
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px
}

footer .base a {
    display: inline;
    padding: 0 12px 0 0;
    color: #F4F4F4
}


.brandwrap {
    display: flex;
    align-items: center;
    gap: 10px
}

.brandwrap img {
    height: 30px;
    width: auto;
    display: block
}

.hero .mark {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    height: 72%;
    width: auto;
    z-index: 0;
    opacity: .95
}

@media (max-width:820px) {
    .hero .mark {
        display: none
    }
}

.roundel {
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 360px;
    height: 360px;
    opacity: .18;
    z-index: 0
}

@media (max-width:820px) {
    .roundel {
        display: none
    }
}

footer .fbrand {
    display: flex;
    align-items: center;
    gap: 12px
}

footer .fbrand img {
    height: 44px;
    width: auto
}

.join-mark {
    height: 120px;
    width: auto;
    margin-bottom: 22px;
    display: block
}

.dark .hero .mark {
    opacity: .14
}

.form input.bad,
.form textarea.bad,
.form select.bad,
.spr input.bad {
    border-color: #B3261E !important;
    box-shadow: 0 0 0 2px rgba(179, 38, 30, .25)
}

.ferr {
    color: #B3261E;
    font-size: 14px;
    font-weight: 700;
    margin: 6px 0 12px
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

footer {
    margin-top: auto
}

.reveal {
    display: inline-block;
    font-weight: 800;
    text-decoration: underline;
    margin: 14px 0 4px;
    font-size: 14px
}

.reveal.or {
    display: block;
    text-align: center;
    margin: 14px 0 4px
}

[hidden] {
    display: none !important
}

h1 span.i18t,
h2 span.i18t,
h3 span.i18t,
.stmt h2 span.i18t,
.page h2 span.i18t,
.hero h1 span.i18t {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important
}

.bagic {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 6px
}

.bagic .bagn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #F0A80D;
    color: #1C1C1C;
    font-size: 12px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px
}

.bagic .bagn[data-zero] {
    display: none
}

.totop {
    position: fixed;
    right: 16px;
    bottom: 96px;
    z-index: 34;
    background: #1C1C1C;
    color: #F4F4F4;
    font-weight: 800;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    display: none
}

.totop.show {
    display: block
}

body.cookie-open .sticky,
body.cookie-open .totop {
    display: none !important
}

.sum .it {
    grid-template-columns: 1fr auto auto;
    display: grid;
    gap: 14px;
    align-items: center
}

.sum .q {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid #1C1C1C;
    border-radius: 6px;
    padding: 4px 8px
}

.sum .q a {
    font-weight: 800;
    padding: 0 6px;
    font-size: 16px
}

.sum .q .n {
    font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    min-width: 14px;
    text-align: center
}

.shm {
    position: fixed;
    inset: 0;
    background: rgba(28, 28, 28, .6);
    z-index: 70;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.shm[hidden] {
    display: none
}

.shb {
    background: #F4F4F4;
    border-radius: 16px 16px 0 0;
    padding: 24px 24px 34px;
    width: 100%;
    max-width: 520px
}

.shl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.shl a {
    display: block;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    padding: 13px;
    border: 2px solid #1C1C1C;
    border-radius: 8px;
    background: #fff
}

.shx {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-weight: 800;
    color: #333
}

.hero .lab {
    white-space: nowrap;
    max-width: none;
    font-size: clamp(10px, 2.9vw, 12px)
}

.hero h1 .l1,
.hero h1 .l2 {
    white-space: nowrap;
    display: inline-block;
    background: none !important;
    color: inherit !important;
    padding: 0 !important
}

.hero-bone .hero h1 .l1,
.hero-bone .hero h1 .l2 {
    color: #1C1C1C !important
}

.hero h1 {
    font-size: clamp(34px, 8.6vw, 110px) !important;
    max-width: none !important;
    position: relative;
    z-index: 2
}

.stmt h2 .l1,
.stmt h2 .l2 {
    white-space: nowrap;
    display: inline-block;
    background: none !important;
    color: inherit !important;
    padding: 0 !important
}

.stmt h2 {
    font-size: clamp(34px, 6.2vw, 96px) !important
}

.hero .in {
    max-width: none !important
}

.cd h2 {
    white-space: nowrap;
    font-size: clamp(32px, 5vw, 64px) !important
}

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 800;
    color: #333
}

.trust span {
    border: 1.5px solid #E3E3E3;
    padding: 4px 8px;
    border-radius: 4px
}

.skip {
    position: absolute;
    left: 0;
    top: 0;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: #F0A80D;
    color: #1C1C1C;
    padding: 10px 14px;
    font-weight: 800;
    z-index: 100
}

.skip:focus {
    left: 16px;
    clip: auto;
    width: auto;
    height: auto;
    top: 16px
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #F0A80D;
    outline-offset: 2px
}

.sticky {
    display: none
}

@media (max-width:920px) {
    .sticky {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 35;
        background: #1C1C1C;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        gap: 10px;
        align-items: center;
        border-top: 1px solid #333
    }

    .sticky span {
        color: #F4F4F4;
        font-size: 12px;
        font-weight: 800;
        flex: 1
    }

    .sticky a {
        white-space: nowrap
    }

    .cookie {
        bottom: 76px
    }
}

.soc svg {
    width: 16px;
    height: 16px;
    fill: #fff
}

.hl {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #333;
    margin-right: 6px
}

.lang {
    position: relative
}

.lang.hl .menu {
    top: 26px
}

@media (max-width:920px) {
    .hl {
        display: none
    }
}

.lang .menu {
    display: none;
    position: absolute;
    left: 0;
    top: 28px;
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 0;
    min-width: 180px;
    z-index: 30;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px
}

.lang.open .menu {
    display: block
}

.lang .menu a {
    display: block;
    padding: 8px 14px;
    color: #F4F4F4
}

.lang .menu a:hover {
    background: #262626
}

/* Signed-in account menu — same dark dropdown as the language menu,
   right-aligned so it never runs past the edge of the screen. */
.lang.acct .cur {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.lang.acct .acctav {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1C1C1C;
    color: #F4F4F4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 0
}

.lang.acct .acctname {
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px
}

.lang.acct .menu {
    left: auto;
    right: 0;
    min-width: 230px;
    max-width: calc(100vw - 32px)
}

.lang.acct .menu .acctwho {
    padding: 10px 14px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid #333
}

.lang.acct .menu .acctwho b {
    display: block;
    font-size: 14px;
    overflow-wrap: anywhere
}

.lang.acct .menu .acctwho small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #F4F4F4
}

.lang.acct .menu .acctout {
    margin-top: 6px;
    border-top: 1px solid #333;
    padding-top: 10px
}

.hero h1,
.page h1,
.stmt h2,
.cd h2,
.audit h2 {
    line-height: 1.02
}

.hero h1 span,
.page h1 span,
.stmt h2 span,
.cd h2 span,
.audit h2 span {
    padding: 0 .12em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone
}

.oauth {
    display: flex;
    gap: 8px
}

.oauth a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800;
    font-size: 14px;
    padding: 13px;
    border: 2px solid #1C1C1C;
    border-radius: 6px;
    background: #fff;
    color: #1C1C1C
}

.oauth a.apple {
    background: #1C1C1C;
    color: #fff
}

.oauth svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px
}

.oauth a.apple svg {
    fill: #fff
}

.wallet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.wallet svg {
    width: 18px;
    height: 18px
}

.wallet a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #1C1C1C;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    padding: 13px;
    border-radius: 6px
}

.wallet a.g {
    background: #fff;
    color: #1C1C1C;
    border: 2px solid #1C1C1C
}

.or {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 800;
    color: #333;
    margin: 18px 0
}

.or:before,
.or:after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E3E3E3
}

.alert {
    display: none;
    background: #fff;
    border: 2px solid #1C1C1C;
    border-left: 8px solid #F0A80D;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    margin-top: 14px;
    border-radius: 4px
}

.steps {
    display: flex;
    gap: 6px;
    margin: 22px 0 0;
    max-width: 560px
}

.steps i {
    flex: 1;
    height: 5px;
    background: #E3E3E3
}

.steps i.on {
    background: #F0A80D
}

.tabs {
    display: flex;
    border: 2px solid #1C1C1C;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px
}

.tabs a {
    flex: 1;
    text-align: center;
    padding: 11px;
    font-weight: 800;
    font-size: 14px
}

.tabs a.on {
    background: #1C1C1C;
    color: #fff
}

.sum {
    border-top: 2px solid #1C1C1C;
    margin-top: 22px;
    max-width: 560px
}

.sum div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #E3E3E3;
    font-size: 16px
}

.sum div small {
    display: block;
    font-size: 12px;
    color: #333;
    font-weight: 400
}

.sum b {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 18px;
    white-space: nowrap
}

.sum div.now {
    background: #FFFFFF;
    margin: 0 -8px;
    padding: 12px 8px
}

.cookie {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    background: #1C1C1C;
    color: #F4F4F4;
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    font-size: 14px
}

.cookie p {
    flex: 1;
    min-width: 240px;
    margin: 0
}

.cookie p a {
    text-decoration: underline
}

.cookie .b {
    display: flex;
    gap: 8px
}

.cookie .b a {
    font-weight: 800;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 2px solid #F4F4F4
}

.cookie .b a.y {
    background: #F0A80D;
    color: #1C1C1C;
    border-color: #F0A80D
}

.burger {
    display: none;
    width: 40px;
    height: 40px;
    border: 2px solid #1C1C1C;
    border-radius: 6px;
    font-size: 20px;
    line-height: 36px;
    text-align: center
}

@media (max-width:920px) {
    header .brand {
        white-space: nowrap;
        font-size: 16px
    }

    header .wrap>div a.btn.line {
        display: none
    }

    /* Long button words (Indonesian "Gabung sekarang") used to push the
       header ~20px past the screen on phones. Let the button wrap onto two
       lines and let the right-hand group shrink instead. */
    header .wrap>div {
        min-width: 0
    }

    header .wrap>div a.btn {
        white-space: normal;
        overflow-wrap: break-word;
        text-align: center;
        line-height: 1.15
    }

    header .wrap>div .burger,
    header .wrap>div .bagic {
        flex: none
    }

    header nav {
        display: none
    }

    header nav.open {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        top: 66px;
        background: #F4F4F4;
        flex-direction: column;
        padding: 16px 28px 22px;
        border-bottom: 2px solid #1C1C1C;
        gap: 14px
    }

    .burger {
        display: block
    }

    header .wrap {
        position: relative
    }
}

.share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px
}

.share a {
    font-weight: 800;
    font-size: 14px;
    padding: 10px 14px;
    border: 2px solid #1C1C1C;
    border-radius: 6px
}

.chainno {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(56px, 10vw, 110px);
    letter-spacing: .08em;
    line-height: 1;
    margin-top: 18px
}

.page {
    padding: 70px 0 40px
}

.page h1 {
    font-size: clamp(40px, 6.4vw, 88px);
    max-width: none;
    margin-top: 26px
}

.page h1 span {
    color: #fff;
    background: #1C1C1C;
    padding: 0 .1em
}

.page .lede {
    font-size: 18px;
    color: #333;
    max-width: 60ch;
    margin-top: 18px;
    line-height: 1.6
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px
}

@media (max-width:820px) {
    .cards {
        grid-template-columns: 1fr
    }
}

.card {
    background: #fff;
    border: 2px solid #1C1C1C;
    padding: 0;
    display: flex;
    flex-direction: column
}

.card .ph {
    height: 220px
}

.card .tx {
    padding: 20px
}

.card .t {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 800;
    color: #333
}

.card h3 {
    font-size: 24px;
    margin: 8px 0 8px
}

.card p {
    font-size: 14px;
    color: #333
}

.card .m {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 2px solid #1C1C1C;
    margin-top: 26px;
    max-width: 720px
}

.kv div {
    padding: 12px 0;
    border-bottom: 1px solid #E3E3E3;
    font-size: 16px
}

.kv div b {
    display: block;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #333
}

.form {
    max-width: 560px;
    margin-top: 30px
}

.form label {
    display: block;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    color: #333;
    margin: 16px 0 6px
}

.form input,
.form select,
.form textarea {
    width: 100%;
    font: inherit;
    font-size: 16px;
    padding: 14px;
    border: 2px solid #1C1C1C;
    background: #fff;
    border-radius: 4px
}

.form textarea {
    min-height: 140px
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px
}

.chip {
    font-weight: 800;
    font-size: 16px;
    padding: 12px 16px;
    border: 2px solid #1C1C1C;
    border-radius: 4px;
    background: #fff
}

.chip.on {
    background: #F0A80D
}

.steps {
    display: flex;
    gap: 8px;
    margin: 20px 0 6px
}

.steps i {
    flex: 1;
    height: 6px;
    background: #E3E3E3
}

.steps i.on {
    background: #F0A80D
}

.faq details {
    border-top: 2px solid #1C1C1C;
    padding: 16px 0
}

.faq details:last-child {
    border-bottom: 2px solid #1C1C1C
}

.faq summary {
    cursor: pointer;
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 22px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    letter-spacing: -.02em
}

.faq summary:after {
    content: "+"
}

.faq details[open] summary:after {
    content: "–"
}

.faq p {
    font-size: 16px;
    color: #333;
    margin-top: 12px;
    max-width: 64ch
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 36px
}

@media (max-width:820px) {
    .two {
        grid-template-columns: 1fr
    }
}

.days {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px
}

@media (max-width:820px) {
    .days {
        grid-template-columns: 1fr
    }
}

.days>div {
    border-top: 3px solid #1C1C1C;
    padding-top: 14px
}

.days .d {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 800;
    background: #F0A80D;
    display: inline-block;
    padding: 3px 8px
}

.days h3 {
    font-size: 26px;
    margin: 12px 0 8px
}

.days p {
    font-size: 16px;
    color: #333
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px
}

.tags span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1.5px solid #1C1C1C;
    padding: 4px 8px
}

.pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #F0A80D;
    padding: 4px 10px;
    margin-bottom: 12px
}

.sizes {
    display: flex;
    gap: 6px;
    margin-top: 10px
}

.sizes span {
    border: 2px solid #1C1C1C;
    padding: 6px 10px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer
}

.sizes span.on {
    background: #F0A80D
}

.chip {
    cursor: pointer
}

.note {
    font-size: 14px;
    color: #333;
    margin-top: 16px;
    max-width: 60ch
}

.stmt .n {
    display: none
}

.acc {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    margin-top: 36px
}

@media (max-width:820px) {
    .acc {
        grid-template-columns: 1fr
    }
}

.side a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid #E3E3E3;
    font-weight: 800;
    font-size: 16px;
    color: #333
}

.side a.on {
    color: #1C1C1C;
    border-bottom: 3px solid #F0A80D
}

.chaincard {
    background: #1C1C1C;
    color: #fff;
    border-radius: 16px;
    padding: 26px;
    position: relative;
    overflow: hidden;
    contain: paint
}

.chaincard .spot {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(240, 168, 13, .85), rgba(240, 168, 13, 0) 65%);
    right: -160px;
    top: -160px
}

.chaincard .k {
    position: relative;
    color: #F0A80D
}

.chaincard .num {
    position: relative;
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 56px;
    letter-spacing: .08em;
    margin-top: 8px
}

.chaincard .meta {
    position: relative;
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 18px;
    font-size: 12px;
    color: #F4F4F4
}

.chaincard .meta b {
    display: block;
    color: #fff;
    font-size: 16px
}

.list {
    margin-top: 26px
}

.list a,
.list div.r {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #E3E3E3;
    font-size: 16px;
    align-items: center
}

.list a b,
.list div.r b {
    display: block;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #333
}

.list .amt {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 18px
}

.tog {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #E3E3E3
}

.tog i {
    width: 46px;
    height: 26px;
    border-radius: 99px;
    background: #F0A80D;
    position: relative;
    display: inline-block
}

.tog i:after {
    content: "";
    position: absolute;
    right: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 99px;
    background: #1C1C1C
}

.tog i.off {
    background: #6D6D6D
}

.tog i.off:after {
    right: auto;
    left: 3px;
    background: #fff
}

.lines {
    margin-top: 26px;
    border-top: 2px solid #1C1C1C
}

.lines div {
    padding: 14px 0;
    border-bottom: 1px solid #E3E3E3;
    font-size: 16px;
    color: #333
}

.lines div b {
    color: #1C1C1C;
    font-weight: 800
}

.days .tags {
    display: none
}

/* Legal */
.legal {
    max-width: 820px
}

.legal h1 {
    font-size: clamp(40px, 6vw, 80px)
}

.legal .updated {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    color: #333;
    margin-top: 14px
}

.legal .lede {
    margin-top: 18px
}

.legal h2 {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 26px;
    margin: 40px 0 12px;
    letter-spacing: -.02em
}

.legal h3 {
    font-size: 18px;
    margin: 22px 0 8px
}

.legal p,
.legal li {
    font-size: 16px;
    color: #333;
    line-height: 1.65;
    margin: 0 0 12px
}

.legal ul,
.legal ol {
    padding-left: 22px
}

.legal a {
    text-decoration: underline
}

.legal table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 14px 0
}

.legal td,
.legal th {
    border-top: 1px solid #E3E3E3;
    padding: 10px 8px;
    text-align: left;
    vertical-align: top
}

.legal th {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase
}

/* Join */

.sh {
    font-size: clamp(32px, 3.8vw, 48px);
    margin-bottom: 18px
}

.sp {
    display: grid;
    grid-template-columns: 420px 1fr;
    min-height: 80vh
}

@media (max-width:920px) {
    .sp {
        grid-template-columns: 1fr
    }
}

.spl {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
    background: #F4F4F4;
    color: #1C1C1C;
    border-right: 2px solid #1C1C1C
}

.spl .wm {
    position: absolute;
    right: -20px;
    top: 120px;
    height: 60%;
    opacity: .12
}

.spl h1 {
    font-size: clamp(40px, 5vw, 72px)
}

.spl h1 span {
    background: #1C1C1C;
    color: #fff;
    padding: 0 .1em
}

.spl p {
    margin-top: 16px;
    max-width: 34ch;
    font-size: 16px;
    color: #333
}

.spl .lab {
    color: #333
}

.live {
    border-top: 1px solid #E3E3E3;
    padding-top: 10px;
    position: relative
}

.lv {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #E3E3E3;
    font-size: 14px;
    color: #333
}

.lv b {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #1C1C1C
}

.spr {
    padding: 80px 56px;
    background: #1C1C1C;
    color: #F4F4F4
}

@media (max-width:920px) {
    .spr {
        padding: 50px 24px
    }
}

.spr .form {
    max-width: 580px;
    margin: 0
}

.spr .form label {
    margin: 26px 0 10px
}

.spr .chips {
    gap: 10px
}

.spr .chip {
    padding: 14px 18px;
    font-size: 16px
}

.spr .btn {
    padding: 16px 22px
}

.spr .note {
    margin-top: 20px
}

.spr .steps {
    margin: 0 0 30px !important
}

.spr .or {
    margin: 24px 0
}

.spr label {
    color: #F4F4F4 !important
}

.spr label[style] {
    color: #F4F4F4 !important
}

.spr input,
.spr select {
    border-color: #333;
    background: #262626;
    color: #fff
}

.spr .chip {
    background: #262626;
    color: #fff;
    border-color: #333
}

.spr .chip.on {
    background: #F0A80D;
    color: #1C1C1C;
    border-color: #F0A80D
}

.spr .steps i {
    background: #333
}

.spr .steps i.on {
    background: #F0A80D
}

.spr .or {
    color: #F4F4F4
}

.spr .or:before,
.spr .or:after {
    background: #333
}

.spr .oauth a {
    background: #262626;
    color: #fff;
    border-color: #333
}

.spr .oauth a.apple {
    background: #fff;
    color: #1C1C1C;
    border-color: #fff
}

.spr .oauth a.apple svg {
    fill: #1C1C1C
}

.spr .wallet a {
    background: #fff;
    color: #1C1C1C
}

.spr .wallet a svg {
    fill: #1C1C1C
}

.spr .wallet a.g {
    border-color: #fff
}

.spr .note,
.spr .note a {
    color: #F4F4F4
}

.spr .alert {
    background: #262626;
    color: #fff;
    border-color: #F0A80D
}

.spr .trust {
    color: #F4F4F4
}

.spr .trust span {
    border-color: #333
}

/* home */

.rows {
    background: #1C1C1C;
    padding: 0;
    border-top: 1px solid #333;
    overflow: hidden;
    max-width: 100vw
}

.rw {
    white-space: nowrap;
    overflow: hidden;
    font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 14px;
    line-height: 1;
    padding: 14px 0;
    color: #F4F4F4
}

.rw span {
    display: inline-block;
    padding-right: 3em;
    animation: l 60s linear infinite
}

.rw span i {
    color: #F0A80D;
    font-style: normal;
    padding: 0 1.2em
}

@keyframes l {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@media (prefers-reduced-motion:reduce) {
    .rw span {
        animation: none
    }
}

.cd {
    background: #F4F4F4;
    color: #1C1C1C;
    padding: 80px 0
}

.cd .in {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 440px);
    gap: 30px;
    align-items: center
}

.cd .in>div {
    min-width: 0
}

@media (max-width:820px) {
    .cd .in {
        grid-template-columns: 1fr
    }
}

@media (max-width:820px) {
    .cd .in {
        grid-template-columns: 1fr
    }
}

.cd h2 {
    font-size: clamp(36px, 5.6vw, 72px);
    color: #1C1C1C
}

.cd h2 span {
    color: #fff;
    background: #1C1C1C;
    padding: 0 .1em
}

.cd .lab {
    color: #333
}

.cd p {
    color: #333;
    margin-top: 10px;
    font-size: 16px
}

.clock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 440px
}

.clock div {
    background: #1C1C1C;
    color: #F0A80D;
    border-radius: 8px;
    padding: 16px 6px 14px;
    text-align: center;
    overflow: hidden;
    min-width: 0
}

.clock b {
    display: block;
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-variation-settings: "wdth" 100;
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.1;
    letter-spacing: -.02em
}

.clock span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 800;
    color: #F4F4F4;
    line-height: 1
}

.audit {
    background: #1C1C1C;
    color: #fff;
    padding: 56px 0
}

.audit .k {
    font-size: 12px;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-weight: 800;
    color: #F0A80D;
    text-align: center
}

.audit h2 {
    font-size: clamp(34px, 5vw, 64px);
    text-align: center;
    margin-top: 12px
}

.audit h2 span {
    background: #F0A80D;
    color: #1C1C1C;
    padding: 0 .1em
}

.audit p {
    color: #F4F4F4;
    max-width: 62ch;
    margin: 16px auto 0;
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
    text-wrap: balance
}

.audit .g {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: #333;
    border: 2px solid #333;
    max-width: 900px;
    margin: 36px auto 0
}

@media (max-width:820px) {
    .audit .g {
        grid-template-columns: 1fr
    }
}

.cap {
    max-width: 560px;
    margin: 34px auto 0;
    text-align: center
}

.cap p {
    color: #F4F4F4;
    font-size: 16px;
    margin: 0
}

.cap .row2 {
    display: flex;
    gap: 8px;
    margin-top: 14px
}

.cap input {
    flex: 1;
    font: inherit;
    font-size: 16px;
    padding: 13px;
    border: 2px solid #333;
    border-radius: 6px;
    background: #262626;
    color: #fff
}

.audit .g div {
    background: #1C1C1C;
    padding: 22px;
    text-align: center
}

.audit .g b {
    display: block;
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 40px;
    color: #F0A80D
}

.audit .g span {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 800;
    color: #F4F4F4
}

/* hero: solid bone */
.hero-bone {
    background: #F4F4F4 !important
}

.hero-bone .hero .spot {
    display: none
}

.hero-bone .hero .lab {
    color: #333 !important
}

.hero-bone .hero h1 {
    color: #1C1C1C !important
}

.stmt h2 span:not(.l1):not(.l2),
.page h2 span {
    background: #1C1C1C;
    color: #fff;
    padding: 0 .1em
}

.hero-bone .hero h1 span:not(.l1):not(.l2) {
    background: #1C1C1C !important;
    color: #fff !important
}

.hero-bone .hero p {
    color: #333 !important
}

.hero-bone .hero .btn.line {
    color: #1C1C1C !important;
    border-color: #1C1C1C !important
}

.hero-bone .hero .mark {
    opacity: .14
}

/* audit block: gold */
.audit {
    background: #F0A80D !important;
    color: #1C1C1C !important;
    padding: 70px 0 !important
}

.audit .k {
    color: #1C1C1C !important
}

.audit h2 span {
    background: #1C1C1C !important;
    color: #F0A80D !important
}

.audit p {
    color: #1C1C1C !important
}

.audit .btn.gold {
    background: #1C1C1C !important;
    color: #F4F4F4 !important
}

.audit .cap p {
    color: #1C1C1C !important
}

.audit .cap .lab {
    color: #1C1C1C !important
}

.audit .cap input {
    background: #fff !important;
    color: #1C1C1C !important;
    border-color: #1C1C1C !important
}

.audit .btn.w {
    background: #F4F4F4 !important;
    color: #1C1C1C !important
}

/* Stripe */
.stripe-element.has-error .Input {
    border-color: #B3261E !important;
}

.stripe-element.has-error .Input:focus {
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15) !important;
}

.stripe-element.has-complete .Input {
    border-color: #2e7d32 !important;
}

.StripeElement {
    width: 100%;
    color: #1C1C1C;
    font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    padding: 13px 14px;
    border: 1px solid #E3E3E3;
    border-radius: 8px;
    background: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    min-height: 52px;
}

.StripeElement--focus {
    border-color: #1C1C1C !important;
    box-shadow: 0 0 0 3px rgba(214, 146, 0, 0.35) !important;
    outline: none;
}

.StripeElement--invalid {
    border-color: #B3261E !important;
}

.StripeElement--complete {
    border-color: #2e7d32 !important;
}

#card-number-element,
#card-expiry-element,
#card-cvc-element,
#merch-card-number-element,
#merch-card-expiry-element,
#merch-card-cvc-element {
    width: 100%;
    min-height: 48px;
    max-height: 48px;
}

#card-number-element iframe,
#card-expiry-element iframe,
#card-cvc-element iframe,
#merch-card-number-element iframe,
#merch-card-expiry-element iframe,
#merch-card-cvc-element iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 48px !important;
}

.stripe-element .Input {
    font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
}

.stripe-element .Input--invalid {
    border-color: #B3261E !important;
}

.stripe-element .Input--focus {
    border-color: #1C1C1C !important;
    box-shadow: 0 0 0 3px rgba(214, 146, 0, 0.35) !important;
}

#card-number-element,
#card-expiry-element,
#card-cvc-element {
    min-height: 48px;
    max-height: 48px;
    width: 100%;
    background: #ffffff !important;
    border: 1.5px solid rgba(28, 28, 28, .24) !important;
    padding: 14px 15px !important;
    border-radius: 5px;
    color: #1C1C1C;
    font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    letter-spacing: .08em;
    outline: none;
}

/* loader */
.disable-actions {
    pointer-events: none;
    user-select: none;
}

body.disable-actions .loader-overlay {
    display: flex !important;
}

.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 28, 28, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: glow .4s ease;
}

.loader-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-box {
    position: relative;
    text-align: center;
    padding: 40px 50px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.loader-box img {
    position: absolute;
    top: 24%;
    left: 32%;
    width: 80px;
    animation: fadeText 1.5s ease-in-out infinite alternate;
}

.loader-spinner {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top: 4px solid #ffffff;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

.loader-logo {
    position: absolute;
    top: 100px;
    width: 45px;
    height: 45px;
    transform: translate(-50%, -50%);
    animation: pulse 1.8s ease-in-out infinite alternate;
}

.loader-text {
    margin-top: 25px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #ffffffcc;
}

@keyframes glow {
    0% {
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }

    100% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
    }
}

@keyframes fadeText {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* toastr */
#toastr-content {
    position: fixed;
    right: 20px;
    bottom: 20px;
    color: white;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    background: #333;
    height: auto;
    min-height: 45px;
    width: auto;
    min-width: 200px;
    max-width: 350px;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#toastr-wrap.toastr-show #toastr-content {
    opacity: 1;
    transform: translateY(0);
}

#toastr-wrap.toastr-success #toastr-content {
    background: #2E7D32;
}

#toastr-wrap.toastr-error #toastr-content {
    background: #B3261E;
}

#toastr-wrap.toastr-warning #toastr-content {
    background: #1C1C1C;
}

#toastr-wrap.toastr-info #toastr-content {
    background: #1C1C1C;
}

/* bootstrap */
.d-none {
    display: none !important;
}

.text-start {
    text-align: start !important;
}

.mt-1 {
    margin-top: 0.5rem !important;
}

.audit .cap p.text-danger {
    color: #FFFFFF !important;
}

/* ── Layout fix · 22 Sep 2026 ─────────────────────────────────────────────
   ROOT CAUSE: `body { display:flex }` (around line 610) turns every .wrap
   into a flex item. Because .wrap also has `margin: 0 auto`, those auto
   margins override the normal stretch, so each .wrap shrinks to fit its own
   content. That is why sections have different left edges — worst on wide
   screens, e.g. "The believers are the asset." sitting ~106px right of
   "The problem" on iPad landscape.
   FIX: give .wrap a real width so it fills the page up to its max-width.  */
.wrap {
    width: 100%;
    align-self: stretch;
}

/* Every .stmt section: one full-width column, hard left, in any language. */
.stmt {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    text-align: start;
}

.stmt > * {
    min-width: 0;
    margin-inline: 0;
    text-align: start;
}

/* the two heading lines must never widen the column past the page */
.stmt h2 .l1,
.stmt h2 .l2 {
    max-width: 100%;
}

@media (max-width: 560px) {
    .stmt h2 .l1,
    .stmt h2 .l2 {
        white-space: normal;
    }
}

/* ===========================================================================
   Website audit — 28 September 2026
   ---------------------------------------------------------------------------
   Everything below was added for the eleven changes signed off that day.
   Nothing above this line was altered, apart from .ferr and .bad which
   already existed and now also cover the dark panels.

   Wording follows the GOV.UK Design System; hint text is used in place of
   tooltips, because a tooltip needs a hover and a phone has none.
   ========================================================================= */

/* Visible to a screen reader, not on screen. Used for the group label on
   the six code boxes, where a heading would be visual noise. */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Hint text ---------------------------------------------------------- */

.hint {
    font-size: 14px;
    line-height: 1.45;
    color: #6D6D6D;
    margin: 0 0 8px;
    font-weight: 400;
}

.form .hint,
.spr .hint {
    color: #6D6D6D; /* 4.7:1 on #F4F4F4, 5.2:1 on white (was #9A9A9A, 2.8:1) */
    text-transform: none;
    letter-spacing: 0;
}

/* The join panel (.spr) is dark #1C1C1C: #6D6D6D would only be 3.4:1 there,
   so hints on it use the light grey already used for text on that panel. */
.spr .hint,
.spr .form .hint {
    color: #F4F4F4;
}

/* A figure with its explanation underneath, used in place of the tooltips
   on the Join pages and the member's chain page. */

.lv .hint,
.lines .hint,
.sum .hint {
    margin: 2px 0 0;
    font-size: 13.5px;
}

.linegrp {
    border-top: 1px solid #E3E3E3;
    padding: 12px 0;
}

.linegrp .top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.linegrp .top b {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 18px;
    white-space: nowrap;
}

/* --- Errors ------------------------------------------------------------- */

.ferr[hidden] {
    display: none;
}

.fld {
    position: relative;
}

/* The dark panels on the join and checkout pages need a lighter red than
   the one used on the bone background, or it disappears into the black. */

.form .ferr,
.spr .ferr,
.dark .ferr {
    color: #FFFFFF;
}

input.bad,
textarea.bad,
select.bad,
.comboinput.bad {
    border-color: #B3261E !important;
    box-shadow: 0 0 0 2px rgba(179, 38, 30, .25);
}

/* --- Country code picker ------------------------------------------------ */

.telwrap {
    display: flex;
    align-items: stretch;
    position: relative;
}

.telwrap input {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    flex: 1;
    min-width: 0;
}

.telcc {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 2px solid #1C1C1C;
    border-inline-end: 0;
    background: #fff;
    color: #1C1C1C;
    font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 0 12px;
    cursor: pointer;
    white-space: nowrap;
}

.form .telcc,
.spr .telcc {
    background: #262626;
    border-color: #333333;
    color: #fff;
}

.telflag {
    font-size: 19px;
    line-height: 1;
}

.telcar {
    font-size: 11px;
    color: #6D6D6D;
}

.telmenu {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 40;
    width: min(320px, 92vw);
    background: #fff;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    overflow: hidden;
}

.telsearch {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #E3E3E3;
    padding: 11px 13px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    color: #1C1C1C;
}

.telopts {
    max-height: 260px;
    overflow-y: auto;
}

.telopt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #F4F4F4;
    background: #fff;
    padding: 10px 13px;
    font: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
    color: #1C1C1C;
}

.telopt:last-child {
    border-bottom: 0;
}

.telopt:hover,
.telopt:focus {
    background: #F4F4F4;
}

.telname {
    flex: 1;
}

.teldial {
    color: #6D6D6D;
    font-weight: 700;
}

/* --- Searchable country list -------------------------------------------- */

.combo {
    position: relative;
}

/* The original <select> is kept so its value still posts, but taken out of
   the layout. !important because .form select and .spr select already set a
   full width, and an absolutely positioned full-width element pushes the
   page sideways on a phone. */

.combohidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.combomenu {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 40;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

.comboopt {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #F4F4F4;
    background: #fff;
    padding: 10px 13px;
    font: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
    color: #1C1C1C;
}

.comboopt:last-child {
    border-bottom: 0;
}

.comboopt:hover,
.comboopt:focus {
    background: #F4F4F4;
}

.combonone {
    padding: 12px 13px;
    font-size: 14px;
    color: #6D6D6D;
    margin: 0;
}

/* --- Address finder ----------------------------------------------------- */

.addrblock {
    position: relative;
}

.addrmenu {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 40;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

.addropt {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #F4F4F4;
    background: #fff;
    padding: 11px 13px;
    font: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
    color: #1C1C1C;
}

.addropt:last-child {
    border-bottom: 0;
}

.addropt:hover,
.addropt:focus {
    background: #F4F4F4;
}

.addrmanual {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: underline;
}

/* --- Card number brand -------------------------------------------------- */

.cardwrap {
    position: relative;
}

.cardwrap .brand {
    position: absolute;
    inset-inline-end: 12px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    background: #1A1F71;
    color: #fff;
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .04em;
    padding: 5px 9px;
    border-radius: 3px;
    pointer-events: none;
}

.cardwrap .brand[data-brand="mastercard"] {
    background: #EB001B;
}

.cardwrap .brand[data-brand="amex"] {
    background: #006FCF;
}

/* --- Six-digit code boxes ----------------------------------------------- */

.codeboxes {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.codebox {
    width: 100%;
    min-width: 0;
    height: 76px;
    padding: 0;
    text-align: center;
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 32px;
    border: 2px solid #1C1C1C;
    border-radius: 6px;
    background: #fff;
    color: #1C1C1C;
}

.codebox.fill {
    border-color: #F0A80D;
    background: #FFFFFF;
}

.codelab {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 20px;
    margin: 6px 0 14px;
}

.spam {
    margin-top: 14px;
    background: #FFFFFF;
    border-inline-start: 3px solid #F0A80D;
    padding: 12px 14px;
    font-size: 14px;
    color: #333;
}

@media (max-width: 560px) {
    .codeboxes {
        gap: 6px;
    }

    .codebox {
        height: 62px;
        font-size: 26px;
    }
}

/* --- Full-screen registration success ----------------------------------- */

.succ {
    /* Its own screen: tall enough to fill the window under the header, so the
       detail page below only appears once the person scrolls or presses the
       button. 76vh rather than 100vh leaves the top of the next section just
       visible, which is what tells people there is more. */
    min-height: 76vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 28px;
}

.succ .in {
    max-width: 620px;
}

.succ .tick {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #F0A80D;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 38px;
    line-height: 1;
    color: #1C1C1C;
    font-weight: 800;
}

.succ h1 {
    font-size: clamp(40px, 5.6vw, 72px);
    margin: 0;
}

.succ .perm {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.3;
    margin: 26px auto 0;
    max-width: 22ch;
}

.succ .no {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(46px, 7vw, 86px);
    letter-spacing: .08em;
    line-height: 1;
    margin-top: 34px;
}

.succ .acts {
    margin-top: 38px;
}

/* --- The dua, the one dark screen on the site --------------------------- */

.duaband {
    background: #1C1C1C;
    margin: 0;
    padding: 110px 0 120px;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
}

.duaband .wrap {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.duaband .lab {
    color: #F0A80D;
}

.duaband h1 {
    color: #FFFFFF;
}

.duaband h1 .mark {
    background: #F0A80D;
    color: #1C1C1C;
    padding: 0 .12em;
}

.duaband .lede {
    color: #F4F4F4;
    margin: 26px auto 0;
    font-size: 18px;
    max-width: 38em;
}

.duaband .acts {
    margin-top: 36px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.duaband .btn.line {
    color: #FFFFFF;
    border-color: #FFFFFF;
}

.duaband .btn.line:hover {
    background: #FFFFFF;
    color: #1C1C1C;
}

@media (max-width: 640px) {
    .duaband {
        padding: 72px 0 80px;
    }

    .duaband .lede {
        font-size: 16px;
    }
}

/* --- Invite block on the member's chain page ---------------------------- */

.invite {
    margin-top: 26px;
}

.invite h2 {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 20px;
    margin: 0;
}

.invite .hint {
    margin-top: 5px;
}

.linkbox {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #1C1C1C;
    border-radius: 6px;
    padding: 12px 14px;
    background: #fff;
}

.linkbox code {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 17px;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.linkbox .copy {
    text-decoration: underline;
    font-weight: 800;
    white-space: nowrap;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    color: #1C1C1C;
}

/* --- Added to the bag --------------------------------------------------- */

.added {
    margin-top: 12px;
    background: #FFFFFF;
    border-inline-start: 3px solid #F0A80D;
    padding: 12px 14px;
    font-size: 14px;
}

.added b {
    display: block;
    font-weight: 800;
}

.added .addedgo {
    display: inline-block;
    margin-top: 7px;
    font-weight: 800;
    text-decoration: underline;
}

/* --- Size guide --------------------------------------------------------- */

.sglink {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    color: #1C1C1C;
}

body.sg-open {
    overflow: hidden;
}

.sgwrap {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(28, 28, 28, .55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.sgbody {
    background: #fff;
    width: min(640px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: 24px;
    border-radius: 10px 10px 0 0;
}

.sghead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.sghead h2 {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 26px;
    margin: 0;
}

.sgclose {
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    color: #1C1C1C;
}

.sgfit {
    display: inline-block;
    margin-top: 10px;
    background: #1C1C1C;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 3px;
}

.sgtabs {
    display: flex;
    gap: 6px;
    margin-top: 14px;
}

.sgtab {
    border: 2px solid #1C1C1C;
    border-radius: 5px;
    background: #fff;
    padding: 6px 12px;
    font: inherit;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    color: #1C1C1C;
}

.sgtab.on {
    background: #1C1C1C;
    color: #fff;
}

.sgtable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    font-size: 14px;
}

.sgtable th,
.sgtable td {
    border-bottom: 1px solid #E3E3E3;
    padding: 9px 6px;
    text-align: start;
}

.sgtable th {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6D6D6D;
    font-weight: 800;
}

.sgtable td:first-child {
    font-weight: 800;
}

.sgnote {
    font-size: 13px;
    color: #6D6D6D;
    margin-top: 12px;
    line-height: 1.5;
}

.sgdraft {
    margin-top: 12px;
    background: #FFFFFF;
    border-inline-start: 3px solid #B3261E;
    padding: 11px 13px;
    font-size: 13px;
    color: #B3261E;
    font-weight: 700;
}

@media (min-width: 720px) {
    .sgwrap {
        align-items: center;
    }

    .sgbody {
        border-radius: 10px;
    }
}

/* --- Numbers stay left-to-right, even in Arabic and Urdu ----------------- */

/*
 * A card number, an expiry, a security code, a postcode, a phone number and a
 * verification code are all read left to right in every language. Left in an
 * RTL page they reorder: "4242 4242 4242 4241" renders as
 * "4241 4242 4242 4242", and the six code boxes fill from the right, so the
 * first digit typed lands in the last box.
 *
 * dir="ltr" is not set in the markup because these are inputs the person
 * types into; forcing the direction in CSS keeps the label, the hint and the
 * error message in the page's own direction where they belong.
 */

[data-rule="card"],
[data-rule="expiry"],
[data-rule="cvc"],
[data-rule="postcode"],
.telwrap input,
.codebox,
.linkbox code {
    direction: ltr;
    text-align: left;
}

.codebox {
    /* The boxes are centred, not left-aligned; only their order matters. */
    text-align: center;
}

.codeboxes,
.cardwrap,
.telwrap {
    direction: ltr;
}

/* The flag and dial code belong at the start of the number in both
   directions, and the brand tag at its end. */

[dir="rtl"] .telwrap,
[dir="rtl"] .cardwrap {
    direction: ltr;
}

[dir="rtl"] .telwrap .telmenu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    direction: rtl;
}

[dir="rtl"] .telopt,
[dir="rtl"] .telsearch {
    text-align: right;
}

/* The address fields while the finder is in front of them.
   Collapsed rather than hidden: validation skips anything inside [hidden],
   so hiding them would let someone reach Pay with no address at all. */

.addrcollapsed {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Round 9 (2 Oct 2026) — phone menu and sticky-bar spacing.
   Phone menu: below 920px the language menu, currency badge and account
   menu are hidden (.hl), so one menu button (.mmbtn, 44×44) opens a dark
   panel in the same style as the .lang .menu dropdown: the pages, the 8
   languages (current one gold with a tick) and the account links, or
   Sign in / Join now when signed out. Opened and closed by app.js.
   Desktop (921px and up) is unchanged: the button and panel never show.
   ------------------------------------------------------------------ */
.mmbtn,
.mmenu {
    display: none
}

.mmenu[hidden] {
    display: none !important
}

@media (max-width:920px) {
    .mmbtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 2px solid #1C1C1C;
        border-radius: 6px;
        cursor: pointer
    }

    /* While the menu is open the header (and its panel) sits above the sticky bar. */
    html.mm-open header {
        z-index: 40
    }

    .mmbtn[aria-expanded="true"] {
        background: #1C1C1C
    }

    .mmbtn[aria-expanded="true"] svg {
        stroke: #F4F4F4
    }

    .mmenu {
        display: block;
        position: absolute;
        top: 66px;
        inset-inline-end: 12px;
        width: min(300px, calc(100vw - 24px));
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #1C1C1C;
        border: 1px solid #333;
        border-radius: 6px;
        padding: 8px 0;
        z-index: 30;
        font-size: 14px;
        text-transform: none;
        letter-spacing: 0
    }

    .mmenu a {
        display: block;
        padding: 10px 14px;
        color: #F4F4F4;
        font-weight: 800
    }

    .mmenu a:hover {
        background: #262626
    }

    .mmenu a.on,
    .mmenu .mmlang a.active,
    .mmenu a.mmjoin {
        color: #F0A80D
    }

    .mmenu .mmlang a.active::after {
        content: " ✓"
    }

    .mmenu .mmgrp + .mmgrp {
        border-top: 1px solid #333;
        margin-top: 6px;
        padding-top: 6px
    }

    .mmenu .mmlab {
        margin: 0;
        padding: 8px 14px 4px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #F4F4F4
    }

    .mmenu .acctwho b {
        display: block
    }

    .mmenu .acctwho small {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        font-weight: 400;
        color: #F4F4F4;
        overflow-wrap: anywhere
    }

    /* Sticky "Join now" bar: keep the end of the page clear of it. app.js
       sets the exact height (it changes with the language); this is the
       fallback before the script runs. */
    body:has(> .sticky) {
        padding-bottom: calc(66px + env(safe-area-inset-bottom))
    }
}

/* ---- Wiring (3 Oct 2026): messages, busy buttons, Stripe card fields ---- */
.alert.is-shown { display: block }
.is-working { opacity: .6; pointer-events: none }
/* Stripe mounts its card fields (iframes) in these boxes; same look as the other inputs. */
.stripe-field { width: 100%; padding: 14px; border: 2px solid #1C1C1C; background: #fff; border-radius: 4px; min-height: 52px }
.stripe-field.StripeElement--focus { outline: 3px solid #F0A80D; outline-offset: 2px }
.stripe-field.StripeElement--invalid { border-color: #B3261E }

/* ---- Round 3 (6 Oct 2026, agent Q): readability + member flows ---- */
/* Messages: errors red #B3261E; success / info green #2E7D32 with white text. */
.alert.is-err { border-color: #B3261E; border-left-color: #B3261E; color: #B3261E }
.alert.is-ok { background: #2E7D32; border-color: #2E7D32; color: #fff }
.alert.is-ok a { color: #fff }
#toastr-wrap.toastr-success #toastr-content { background: #2E7D32; color: #fff }
#toastr-wrap.toastr-error #toastr-content { background: #B3261E; color: #fff }
#toastr-wrap.toastr-warning #toastr-content { background: #1C1C1C; color: #fff }
/* Destructive button (Cancel my membership on the are-you-sure step). */
.btn.red { background: #B3261E; color: #fff; border: 0; cursor: pointer; font-family: inherit }
/* Cancel → "are you sure?" box. */
.sure { margin-top: 22px; background: #fff; border: 2px solid #1C1C1C; border-left: 8px solid #B3261E; border-radius: 6px; padding: 16px 18px; max-width: 640px }
.sure p { font-size: 16px; font-weight: 700; line-height: 1.55; color: #1C1C1C; margin: 0 }
/* Cookie notice (round 3, items 7 + 11): a small bar at the top of the page on phones and on the pay page /
   checkout ("cookie-top"), in the page flow so it never covers the card fields or a button. */
@media (max-width:920px) {
    .cookie { position: static; left: auto; right: auto; bottom: auto; border-radius: 0; box-shadow: none; padding: 10px 16px; gap: 8px 12px; font-size: 12.5px; line-height: 1.45 }
    .cookie p { min-width: 0; flex-basis: 100% }
    .cookie .b a { padding: 7px 12px; font-size: 13px }
}
body.cookie-top .cookie { position: static; left: auto; right: auto; bottom: auto; border-radius: 0; box-shadow: none; padding: 10px 16px; gap: 8px 14px; font-size: 13px; line-height: 1.45 }
body.cookie-top .cookie .b a { padding: 7px 12px; font-size: 13px }
/* The pay page is for members finishing a payment from the app: no "Join now" there. */
body.paypage header a.btn.gold[data-i18n="n015"], body.paypage .mmenu a.mmjoin { display: none }
/* Empty bag (round 3, item 7): only "Your bag is empty." and the link to the shop — no form, no Pay button. */
#bag[data-empty="1"] > :not(.empty) { display: none !important }
.two:has(#bag[data-empty="1"]) > .form, .two:has(#bag[data-empty="1"]) .note { display: none !important }
#bag .empty { font-size: 17px; font-weight: 700; padding: 18px 0 }
/* Shop sizes are buttons now (round 3, item 8): same look, reachable with Tab, picked with Enter / Space. */
.sizes button { border: 2px solid #1C1C1C; padding: 6px 10px; font-weight: 800; font-size: 14px; cursor: pointer; background: #fff; color: #1C1C1C; font-family: inherit; border-radius: 0; min-width: 44px; min-height: 40px }
.sizes button.on { background: #F0A80D }
.sizes button:focus-visible { outline: 3px solid #1C1C1C; outline-offset: 2px }
/* Joined page (round 3, item 11): one block — the gold tick sits above the heading. */
.joined-tick { width: 64px; height: 64px; border-radius: 50%; background: #F0A80D; color: #1C1C1C; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; margin-bottom: 18px }
/* Member area on phones (round 3, item 11): the page itself first (the chain card on My chain), the menu below. */
@media (max-width:820px) {
    .acc > .side { order: 2 }
}
/* Field errors (round 3, item 8): red #B3261E on light pages; the lighter red stays only on the dark panels. */
.form .ferr { color: #B3261E }
/* Round 4 (H-078): on the dark panels the error text is white with a red mark (dark rule: red text shows as white). */
.spr .ferr, .dark .ferr, .spr .form .ferr, .dark .form .ferr { color: #FFFFFF; border-inline-start: 3px solid #B3261E; padding-inline-start: 8px }
/* Small links on light pages: black text with a gold underline (gold stays for buttons, big headings, dark backgrounds). */
main .note a:not(.btn), main .lede a:not(.btn), main .hint a:not(.btn), main .lab a:not(.btn), main .lines a:not(.btn),
main .empty a:not(.btn), main .safe a:not(.btn), main p.note a, .acc .side ~ div a[style*="underline"],
main a[style*="text-decoration:underline"]:not(.btn), main a[data-data-request] {
    color: #1C1C1C; text-decoration: underline; text-decoration-color: #D69200 !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px
}
.dark main a, footer a { text-decoration-color: currentColor }
main .drsent { font-weight: 700; color: #1C1C1C }

/* ==== Round 4 (7 Oct 2026, agent web) ==== */
/* H-079: the gold underline above wins over inline style="text-decoration:underline" (!important). */
/* H-012: links on the dark join / checkout panels are white with a gold underline (were black on black). */
main .spr .note a:not(.btn), main .spr p a:not(.btn), main .spr label a:not(.btn), main .spr a.reveal, main .spr .lines a:not(.btn),
main .dark .note a:not(.btn), main .dark p a:not(.btn) {
    color: #FFFFFF; text-decoration: underline; text-decoration-color: #D69200 !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px
}
.spr .or:before, .spr .or:after { background: #333333 }
/* H-080: buttons and form fields use the page font (were Arial). */
button, input, select, textarea { font-family: inherit }
/* H-013: the join amount and "Who is it for?" chips are buttons now — same look as before. */
button.chip { font-family: inherit; line-height: inherit; cursor: pointer; color: #1C1C1C }
.spr button.chip { color: #fff }
.spr button.chip.on { color: #1C1C1C }
/* H-083: keyboard focus — black ring on light pages, gold on dark areas. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, [role="switch"]:focus-visible { outline: 3px solid #1C1C1C; outline-offset: 2px }
.dark :focus-visible, .spr :focus-visible, footer :focus-visible, .util :focus-visible, .sticky :focus-visible,
.mmenu :focus-visible, .cookie :focus-visible, .chaincard :focus-visible, .rows :focus-visible { outline-color: #F0A80D }
.stripe-field.StripeElement--focus { outline-color: #1C1C1C }
.spr .stripe-field.StripeElement--focus { outline-color: #F0A80D }
/* H-173: simple hover on buttons and links (desktop). */
@media (hover: hover) {
    .btn { transition: background-color .15s ease, box-shadow .15s ease }
    .btn:hover { background: #333333 }
    .btn.gold:hover { background: #D69200 }
    .btn.w:hover { background: #FFFFFF }
    .btn.red:hover { background: #B3261E; box-shadow: inset 0 0 0 2px #1C1C1C }
    .btn.line:hover { background: transparent; box-shadow: inset 0 0 0 1px currentColor }
    .chip:hover, .sizes button:hover { box-shadow: inset 0 0 0 1px currentColor }
    header nav a:hover, footer a:hover, .util a:hover { text-decoration: underline; text-decoration-color: #D69200; text-decoration-thickness: 2px; text-underline-offset: 4px }
    main a:not(.btn):hover { text-decoration-color: #1C1C1C !important }
    main .spr a:not(.btn):hover, main .dark a:not(.btn):hover { text-decoration-color: #FFFFFF !important }
}
/* H-118 (Harun, D4): the faded logo stays on desktop in left-to-right languages only —
   hidden in Arabic and Urdu, and on phones in every language. */
@media (max-width:920px) { .spl .wm, .hero .mark { display: none } }
html[dir="rtl"] .spl .wm, html[dir="rtl"] .hero .mark { display: none }
/* H-026: the project timeline (2026 Feasibility · March 2027 Announced · 100,000 members Funded):
   3 columns on desktop, stacked on phones — same look as the Events day cards. */
.tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px }
.tl > div { border-top: 3px solid #1C1C1C; padding-top: 14px }
.tl .d { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; background: #F0A80D; display: inline-block; padding: 3px 8px }
.tl h3 { font-size: 26px; line-height: 1.05; margin: 12px 0 8px }
.tl p { font-size: 16px; color: #333 }
@media (max-width:820px) { .tl { grid-template-columns: 1fr } }
/* H-025: the "Road to 100,000" bar is filled from the real count (width set inline). */
.count .bar i { min-width: 6px }
.count .of { display: block; margin-top: 10px; font-size: 14px; font-weight: 800; letter-spacing: .04em }
/* H-014: footer language + currency */
footer .base span span { padding: 0 12px 0 0 }
/* H-081: one type scale, one button height per size, one field style. */
h1, h2, h3 { line-height: 1.05 }
.page h1, .hero h1, .stmt h2, .cd h2, .audit h2 { line-height: 1.05 }
.page h1 { font-size: clamp(40px, 6vw, 80px) }
.stmt h2, .cd h2, .audit h2 { font-size: clamp(32px, 5vw, 64px) }
h3 { font-size: 22px }
/* Buttons: big = 52px (16px text, 14px padding, line-height 1.5), small = 40px (header, sticky bar). */
.btn { line-height: 1.5; padding-top: 14px; padding-bottom: 14px }
.btn.line { border-width: 2px; padding-top: 12px; padding-bottom: 12px }
.spr .btn { padding-top: 14px; padding-bottom: 14px }
.sizes button { border-radius: 6px }
.form input, .form select, .form textarea, .audit .cap input, .spr input, .spr select { border-radius: 4px }
/* H-166: field errors are announced (role="alert" in the markup); visible labels on the checkout address. */
.addrlab { display: block; font-size: 13px; font-weight: 800; margin: 12px 0 6px }
/* H-104 / H-105: a message under a field */
.fmsg { font-size: 14px; font-weight: 700; margin-top: 8px; color: #B3261E }
.spr .fmsg, .dark .fmsg { color: #FFFFFF; border-inline-start: 3px solid #B3261E; padding-inline-start: 8px }
/* H-034: card failed (paused) banner on the account pages */
.pastdue { background: #FFFFFF; border: 2px solid #1C1C1C; border-inline-start: 8px solid #B3261E; border-radius: 6px; padding: 14px 18px; margin: 22px 0; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap }
.pastdue p { margin: 0; font-weight: 800; color: #1C1C1C }
/* D8: the "This page is in English…" line on the legal pages — shown in the 7 other languages only. */
.legal-en-only { background: #FFFFFF; border-inline-start: 4px solid #F0A80D; padding: 10px 14px; font-weight: 700; margin: 14px 0 0 }
html[lang="en"] .legal-en-only, html:not([lang]) .legal-en-only { display: none }

/* H-086: error pages (404, 403, 419…) inside the site's header and footer, with the site's buttons. */
.errpage h1 { font-size: clamp(36px, 5vw, 64px) }
.errpage .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px }
.errpage .acts .btn { background: #F0A80D; color: #1C1C1C }
.errpage .acts .btn.quiet { background: none; color: #1C1C1C; box-shadow: inset 0 0 0 2px #1C1C1C }
/* H-081: header Sign in (outlined) the same 40px height as Join now. */
header .btn.line { padding-top: 7px !important; padding-bottom: 7px !important }
/* H-078: form text in the page black (#1C1C1C, was browser #000); selects on white (was browser grey). */
input, select, textarea { color: #1C1C1C }
select { background-color: #FFFFFF }
.spr input, .spr select, .spr textarea { color: #FFFFFF; background-color: #262626 }
/* H-079: links in the legal pages' text — black with the gold underline too. */
main .legal a:not(.btn) { color: #1C1C1C; text-decoration: underline; text-decoration-color: #D69200 !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px }