/* 21 Oct (feature 2 · theme): every colour is a token with its light value as the fallback, so the light look is
   exactly as before. <html data-theme="dark"> (set before the first paint by the small script in the page head —
   Light / Dark / System, "Appearance") swaps in dark look A: #141414 page, #1F1F1F cards, gold unchanged, and the
   text on gold stays dark. Token names: --bg page · --surface cards and fields · --ink text · --ink-2 softer text ·
   --muted quiet text · --edge the thick outlines · --line thin lines · --solid dark blocks · --act / --act-ink
   black buttons and selected states (light in dark) · --err / --ok red and green text. */
:root {
    color-scheme: light;
    --bg: #F4F4F4; --surface: #fff; --surface-2: #FAFAFA; --ink: #1C1C1C; --ink-2: #333; --ink-3: #555;
    --muted: #6D6D6D; --muted-2: #8A8A8A; --muted-3: #5C5C5C; --muted-4: #9A9A9A;
    --edge: #1C1C1C; --edge-2: #333; --field-edge: #1C1C1C; --line: #E3E3E3; --line-2: #DADADA; --line-3: #C9C9C9; --line-4: #EEEEEE; --line-5: #F4F4F4;
    --solid: #1C1C1C; --act: #1C1C1C; --act-ink: #fff; --act-hover: #333;
    --track: #E3E3E3; --off: #BDBDBD; --off-2: #6D6D6D; --tint: #FFF4D6; --tint-2: #FCEBC2;
    --err: #B3261E; --ok: #2E7D32; --gold-deep: #9A6A00; --gold-deep-2: #B97A00; --gold-deep-3: #D69200;
    --header-bg: rgba(244, 244, 244, .92); --focus: #1C1C1C
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #141414; --surface: #1F1F1F; --surface-2: #1A1A1A; --ink: #EDEDED; --ink-2: #D4D4D4; --ink-3: #C2C2C2;
    --muted: #A8A8A8; --muted-2: #A0A0A0; --muted-3: #A8A8A8; --muted-4: #8C8C8C;
    --edge: #3A3A3A; --edge-2: #4A4A4A; --field-edge: #5A5A5A; --line: #3A3A3A; --line-2: #3A3A3A; --line-3: #444; --line-4: #2E2E2E; --line-5: #2A2A2A;
    --solid: #262626; --act: #EDEDED; --act-ink: #141414; --act-hover: #D0D0D0;
    --track: #333; --off: #4A4A4A; --off-2: #4A4A4A; --tint: #2E2610; --tint-2: #3A2F12;
    --err: #FF8A80; --ok: #81C784; --gold-deep: #F0A80D; --gold-deep-2: #F0A80D; --gold-deep-3: #F0A80D;
    --header-bg: rgba(20, 20, 20, .92); --focus: #F0A80D
}

* {
    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: var(--ink, #1C1C1C);
    background: var(--bg, #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: var(--header-bg, rgba(244, 244, 244, .92));
    backdrop-filter: blur(8px);
    border-bottom: 2px solid var(--edge, #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: var(--ink-2, #333)
}

header nav a.on {
    color: var(--ink, #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: var(--act, #1C1C1C);
    color: var(--act-ink, #fff)
}

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

.btn.line {
    background: none;
    border: 2px solid var(--ink, #1C1C1C);
    color: var(--ink, #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: var(--ink-2, #333)
}

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

.hero h1 span {
    color: #fff;
    background: var(--solid, #1C1C1C);
    padding: 0 .1em
}

.hero p {
    font-size: 20px;
    max-width: 40ch;
    color: var(--ink-2, #333)
}

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

/* statements */
.stmt {
    padding: 100px 0;
    border-top: 2px solid var(--edge, #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: var(--ink, #1C1C1C)
}

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

.stmt h2 span {
    color: #fff;
    background: var(--solid, #1C1C1C);
    padding: 0 .1em
}

.stmt p {
    font-size: 18px;
    color: var(--ink-2, #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: var(--ink-2, #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 var(--edge, #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: var(--ink-2, #333);
    margin-top: 14px
}

.count .bar {
    height: 10px;
    background: var(--track, #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: var(--ink-2, #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 var(--edge, #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: var(--ink-2, #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: var(--err, #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: var(--act, #1C1C1C);
    color: var(--act-ink, #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 var(--edge, #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: var(--bg, #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 var(--edge, #1C1C1C);
    border-radius: 8px;
    background: var(--surface, #fff)
}

.shx {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-weight: 800;
    color: var(--ink-2, #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: var(--ink, #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: var(--ink-2, #333)
}

.trust span {
    border: 1.5px solid var(--line, #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: var(--ink-2, #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: var(--act, #1C1C1C);
    color: var(--act-ink, #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 var(--edge, #1C1C1C);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--ink, #1C1C1C)
}

.oauth a.apple {
    background: var(--act, #1C1C1C);
    color: var(--act-ink, #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: var(--act, #1C1C1C);
    color: var(--act-ink, #fff);
    font-weight: 800;
    font-size: 16px;
    padding: 13px;
    border-radius: 6px
}

.wallet a.g {
    background: var(--surface, #fff);
    color: var(--ink, #1C1C1C);
    border: 2px solid var(--edge, #1C1C1C)
}

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

.or:before,
.or:after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--track, #E3E3E3)
}

.alert {
    display: none;
    background: var(--surface, #fff);
    border: 2px solid var(--edge, #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: var(--track, #E3E3E3)
}

.steps i.on {
    background: #F0A80D;
    color: #1C1C1C; /* 28 Oct: text on gold is always graphite (was white in dark mode) */
}

.tabs {
    display: flex;
    border: 2px solid var(--edge, #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: var(--act, #1C1C1C);
    color: var(--act-ink, #fff)
}

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

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

.sum div small {
    display: block;
    font-size: 12px;
    color: var(--ink-2, #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: var(--surface, #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 var(--edge, #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: var(--bg, #F4F4F4);
        flex-direction: column;
        padding: 16px 28px 22px;
        border-bottom: 2px solid var(--edge, #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 var(--edge, #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: var(--solid, #1C1C1C);
    padding: 0 .1em
}

.page .lede {
    font-size: 18px;
    color: var(--ink-2, #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: var(--surface, #fff);
    border: 2px solid var(--edge, #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: var(--ink-2, #333)
}

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

.card p {
    font-size: 14px;
    color: var(--ink-2, #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 var(--edge, #1C1C1C);
    margin-top: 26px;
    max-width: 720px
}

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

.kv div b {
    display: block;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2, #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: var(--ink-2, #333);
    margin: 16px 0 6px
}

.form input,
.form select,
.form textarea {
    width: 100%;
    font: inherit;
    font-size: 16px;
    padding: 14px;
    border: 2px solid var(--field-edge, #1C1C1C);
    background: var(--surface, #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 var(--edge, #1C1C1C);
    border-radius: 4px;
    background: var(--surface, #fff)
}

.chip.on {
    background: #F0A80D;
    color: #1C1C1C; /* 28 Oct: text on gold is always graphite (was white in dark mode) */
}

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

.steps i {
    flex: 1;
    height: 6px;
    background: var(--track, #E3E3E3)
}

.steps i.on {
    background: #F0A80D;
    color: #1C1C1C; /* 28 Oct: text on gold is always graphite (was white in dark mode) */
}

.faq details {
    border-top: 2px solid var(--edge, #1C1C1C);
    padding: 16px 0
}

.faq details:last-child {
    border-bottom: 2px solid var(--edge, #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: var(--ink-2, #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 var(--edge, #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;
    color: #1C1C1C; /* 28 Oct: text on gold is always graphite (was white in dark mode) */
}

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

.days p {
    font-size: 16px;
    color: var(--ink-2, #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 var(--edge, #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;
    color: #1C1C1C; /* 28 Oct: text on gold is always graphite (was white in dark mode) */
}

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

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

.sizes span.on {
    background: #F0A80D;
    color: #1C1C1C; /* 28 Oct: text on gold is always graphite (was white in dark mode) */
}

.chip {
    cursor: pointer
}

.note {
    font-size: 14px;
    color: var(--ink-2, #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 var(--line, #E3E3E3);
    font-weight: 800;
    font-size: 16px;
    color: var(--ink-2, #333)
}

.side a.on {
    color: var(--ink, #1C1C1C);
    border-bottom: 3px solid #F0A80D
}

.chaincard {
    background: var(--solid, #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 var(--line, #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: var(--ink-2, #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 var(--line, #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: var(--act, #1C1C1C)
}

.tog i.off {
    background: var(--off-2, #6D6D6D)
}

.tog i.off:after {
    right: auto;
    left: 3px;
    background: var(--surface, #fff)
}

.lines {
    margin-top: 26px;
    border-top: 2px solid var(--edge, #1C1C1C)
}

.lines div {
    padding: 14px 0;
    border-bottom: 1px solid var(--line, #E3E3E3);
    font-size: 16px;
    color: var(--ink-2, #333)
}

.lines div b {
    color: var(--ink, #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: var(--ink-2, #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: var(--ink-2, #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 var(--line, #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: var(--bg, #F4F4F4);
    color: var(--ink, #1C1C1C);
    border-right: 2px solid var(--edge, #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: var(--solid, #1C1C1C);
    color: #fff;
    padding: 0 .1em
}

.spl p {
    margin-top: 16px;
    max-width: 34ch;
    font-size: 16px;
    color: var(--ink-2, #333)
}

.spl .lab {
    color: var(--ink-2, #333)
}

.live {
    border-top: 1px solid var(--line, #E3E3E3);
    padding-top: 10px;
    position: relative
}

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

.lv b {
    font-family: Anybody, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--ink, #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;
    color: #1C1C1C; /* 28 Oct: text on gold is always graphite (was white in dark mode) */
}

.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: var(--bg, #F4F4F4);
    color: var(--ink, #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: var(--ink, #1C1C1C)
}

.cd h2 span {
    color: #fff;
    background: var(--solid, #1C1C1C);
    padding: 0 .1em
}

.cd .lab {
    color: var(--ink-2, #333)
}

.cd p {
    color: var(--ink-2, #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: var(--bg, #F4F4F4) !important
}

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

.hero-bone .hero .lab {
    color: var(--ink-2, #333) !important
}

.hero-bone .hero h1 {
    color: var(--ink, #1C1C1C) !important
}

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

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

.hero-bone .hero p {
    color: var(--ink-2, #333) !important
}

.hero-bone .hero .btn.line {
    color: var(--ink, #1C1C1C) !important;
    border-color: var(--edge, #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: var(--err, #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: var(--ok, #2e7d32) !important;
}

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

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

.StripeElement--invalid {
    border-color: var(--err, #B3261E) !important;
}

.StripeElement--complete {
    border-color: var(--ok, #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: var(--err, #B3261E) !important;
}

.stripe-element .Input--focus {
    border-color: var(--edge, #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: var(--surface, #ffffff) !important;
    border: 1.5px solid rgba(28, 28, 28, .24) !important;
    padding: 14px 15px !important;
    border-radius: 5px;
    color: var(--ink, #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);
}

/* Round 20 (testing list 4): the gold COD mark (logo-gold-sm.png, tall 1:3) centred inside the spinner ring
   (was the round "Chain of Deeds" badge). The ring is 120px, 40px from the top of the box. */
.loader-box img {
    position: absolute;
    top: 40px;
    left: 50%;
    height: 76px;
    width: auto;
    margin-top: 22px;
    transform: translateX(-50%);
    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;
}

/* 23 Oct (owner board 8): the payment cover (core.js COD.payCover) — the same loader with two lines, then a gold
   circle with a dark tick in place of the ring when the payment is taken. Hidden unless .is-pay. */
.loader-tick,
.loader-pay-t,
.loader-pay-s {
    display: none;
}

.loader-overlay.is-pay .loader-box {
    max-width: calc(100vw - 32px);
    padding: 40px 28px 34px;
}

.loader-overlay.is-pay .loader-text {
    display: none;
}

.loader-overlay.is-pay .loader-pay-t {
    display: block;
    margin: 26px 0 0;
    font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

.loader-overlay.is-pay .loader-pay-s {
    display: block;
    margin: 8px 0 0;
    font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: #ffffffcc;
    overflow-wrap: anywhere;
}

.loader-overlay.is-done .loader-spinner,
.loader-overlay.is-done .loader-box img {
    display: none;
}

.loader-overlay.is-done .loader-tick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    background: #F0A80D;
    color: #1C1C1C;
}

.loader-overlay.is-done .loader-tick svg {
    width: 56px;
    height: 56px;
}

html.paycover-open,
html.paycover-open body {
    overflow: hidden;
}

@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: var(--muted, #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 var(--line, #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: var(--err, #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 var(--edge, #1C1C1C);
    border-inline-end: 0;
    background: var(--surface, #fff);
    color: var(--ink, #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: var(--muted, #6D6D6D);
}

.telmenu {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 40;
    width: min(320px, 92vw);
    background: var(--surface, #fff);
    border: 1px solid var(--line, #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 var(--line, #E3E3E3);
    padding: 11px 13px;
    font: inherit;
    font-size: 14px;
    background: var(--surface, #fff);
    color: var(--ink, #1C1C1C);
}

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

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

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

.telopt:hover,
.telopt:focus {
    background: var(--bg, #F4F4F4);
}

.telname {
    flex: 1;
}

.teldial {
    color: var(--muted, #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: var(--surface, #fff);
    border: 1px solid var(--line, #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 var(--line-5, #F4F4F4);
    background: var(--surface, #fff);
    padding: 10px 13px;
    font: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
    color: var(--ink, #1C1C1C);
}

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

.comboopt:hover,
.comboopt:focus {
    background: var(--bg, #F4F4F4);
}

.combonone {
    padding: 12px 13px;
    font-size: 14px;
    color: var(--muted, #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: var(--surface, #fff);
    border: 1px solid var(--line, #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 var(--line-5, #F4F4F4);
    background: var(--surface, #fff);
    padding: 11px 13px;
    font: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
    color: var(--ink, #1C1C1C);
}

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

.addropt:hover,
.addropt:focus {
    background: var(--bg, #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 var(--edge, #1C1C1C);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--ink, #1C1C1C);
}

.codebox.fill {
    border-color: #F0A80D;
    background: var(--surface, #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: var(--surface, #FFFFFF);
    border-inline-start: 3px solid #F0A80D;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--ink-2, #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 var(--edge, #1C1C1C);
    border-radius: 6px;
    padding: 12px 14px;
    background: var(--surface, #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: var(--ink, #1C1C1C);
}

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

.added {
    margin-top: 12px;
    background: var(--surface, #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: var(--ink, #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: var(--surface, #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: var(--ink, #1C1C1C);
}

.sgfit {
    display: inline-block;
    margin-top: 10px;
    background: var(--solid, #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 var(--edge, #1C1C1C);
    border-radius: 5px;
    background: var(--surface, #fff);
    padding: 6px 12px;
    font: inherit;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    color: var(--ink, #1C1C1C);
}

.sgtab.on {
    background: var(--act, #1C1C1C);
    color: var(--act-ink, #fff);
}

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

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

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

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

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

.sgdraft {
    margin-top: 12px;
    background: var(--surface, #FFFFFF);
    border-inline-start: 3px solid var(--err, #B3261E);
    padding: 11px 13px;
    font-size: 13px;
    color: var(--err, #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;
        /* Round 21 (13 Oct): gold menu button, open or closed (matches the gold logo and Join now). */
        background: #F0A80D;
        border: 2px solid #F0A80D;
        border-radius: 6px;
        cursor: pointer;
    color: #1C1C1C; /* 28 Oct: text on gold is always graphite (was white in dark mode) */
}

    .mmbtn svg {
        stroke: #1C1C1C
    }

    /* 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: #F0A80D;
    color: #1C1C1C; /* 28 Oct: text on gold is always graphite (was white in dark mode) */
}

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

    .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 var(--field-edge, #1C1C1C); background: var(--surface, #fff); border-radius: 4px; min-height: 52px }
.stripe-field.StripeElement--focus { outline: 3px solid #F0A80D; outline-offset: 2px }
.stripe-field.StripeElement--invalid { border-color: var(--err, #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: var(--err, #B3261E); border-left-color: var(--err, #B3261E); color: var(--err, #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: var(--surface, #fff); border: 2px solid var(--edge, #1C1C1C); border-left: 8px solid var(--err, #B3261E); border-radius: 6px; padding: 16px 18px; max-width: 640px }
.sure p { font-size: 16px; font-weight: 700; line-height: 1.55; color: var(--ink, #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 var(--edge, #1C1C1C); padding: 6px 10px; font-weight: 800; font-size: 14px; cursor: pointer; background: var(--surface, #fff); color: var(--ink, #1C1C1C); font-family: inherit; border-radius: 0; min-width: 44px; min-height: 40px }
.sizes button.on { background: #F0A80D; color: #1C1C1C }
.sizes button:focus-visible { outline: 3px solid var(--ink, #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: var(--err, #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: var(--ink, #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: var(--ink, #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: var(--ink, #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 var(--ink, #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: var(--ink, #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: var(--act-hover, #333333) }
    .btn.gold:hover { background: #D69200; color: #1C1C1C }
    .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: var(--ink, #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 var(--edge, #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; color: #1C1C1C }
.tl h3 { font-size: 26px; line-height: 1.05; margin: 12px 0 8px }
.tl p { font-size: 16px; color: var(--ink-2, #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: var(--err, #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: var(--surface, #FFFFFF); border: 2px solid var(--edge, #1C1C1C); border-inline-start: 8px solid var(--err, #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: var(--ink, #1C1C1C) }
/* D8: the "This page is in English…" line on the legal pages — shown in the 7 other languages only. */
.legal-en-only { background: var(--surface, #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: var(--ink, #1C1C1C); box-shadow: inset 0 0 0 2px var(--edge, #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: var(--ink, #1C1C1C) }
select { background-color: var(--surface, #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: var(--ink, #1C1C1C); text-decoration: underline; text-decoration-color: #D69200 !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px }


/* ===========================================================================
   Round 10 (decision 4, 10 Oct 2026): info boxes ("i" boxes / tooltips).
   One behaviour everywhere on the website (the browser app /app has the same rule in its own .tip):
     - computer (a mouse: hover + fine pointer): opens on hover;
     - phone / tablet (touch): opens on tap, closes on a second tap, a tap elsewhere or Esc (app.js "Info boxes");
     - keyboard: opens on focus.
   Markup: <span class="cod-tip" tabindex="0" role="button" aria-expanded="false" aria-describedby="X">label
             <span class="cod-tipbox" role="tooltip" id="X">text</span></span>
   ========================================================================= */
.cod-tip { position: relative; cursor: help; outline-offset: 3px }
.cod-tipbox {
    position: absolute; z-index: 60; top: calc(100% + 10px); right: 0;
    width: max-content; max-width: min(280px, 80vw);
    padding: 10px 12px; border-radius: 10px;
    background: #1C1C1C; color: #FFFFFF;
    font: 400 13px/1.45 Mulish, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-transform: none; text-align: start;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    pointer-events: none;
}
.cod-tipbox::before { content: ""; position: absolute; top: -6px; right: 16px; border: 6px solid transparent; border-top: 0; border-bottom-color: #1C1C1C }
html[dir="rtl"] .cod-tipbox { right: auto; left: 0 }
html[dir="rtl"] .cod-tipbox::before { right: auto; left: 16px }
.cod-tip.open .cod-tipbox,
.cod-tip:focus-visible .cod-tipbox {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s; pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
    .cod-tip:hover .cod-tipbox { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; pointer-events: auto }
}

/* Round 10 (decision 2): receipts-only visitor — "Receipts · Sign out" top right instead of Sign in / Join now. */
header .rcpnav { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; letter-spacing: 0; text-transform: none }
header .rcpnav a { font-weight: 800; color: var(--ink, #1C1C1C); text-decoration: none }
header .rcpnav a.on, header .rcpnav a:hover { text-decoration: underline; text-decoration-color: #F0A80D; text-decoration-thickness: 2px; text-underline-offset: 4px }

/* Round 10 (decision 6): "Someone invited me" on Join step 1. */
.spr .invlink { background: none; border: 0; padding: 0; margin-top: 22px; color: #F4F4F4; font: inherit; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
.spr .invbox { margin-top: 10px; max-width: 280px }
.spr .invbox label { margin: 0 0 6px !important }

/* Round 10 (decision 5): Join from the browser app (/join?from=webapp) — the join pages in the app's look:
   no site header / footer / join bar, bone background, a slim top bar with ‹ back, rounded app-style fields. */
body.appchrome { background: var(--bg, #F4F4F4) }
.apptop {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 6px;
    height: 54px; padding: 0 8px; padding-top: env(safe-area-inset-top);
    background: var(--bg, #F4F4F4); border-bottom: 1px solid var(--line, #E3E3E3);
}
.apptop .appback { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--ink, #1C1C1C) }
.apptop .appback svg { width: 24px; height: 24px }
html[dir="rtl"] .apptop .appback svg { transform: scaleX(-1) }
.apptop .appt { font-family: Anybody, "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 15px; color: var(--ink, #1C1C1C); display: inline-flex; align-items: center; gap: 8px }
.apptop .appt img { height: 22px }
body.appchrome .sp { min-height: calc(100vh - 54px) }
body.appchrome .spl { border-right: 0; padding: 28px 24px 24px }
body.appchrome .spl .wm { display: none }
body.appchrome .spl h1 { font-size: clamp(34px, 9vw, 52px) }
body.appchrome .spr { border-radius: 24px 24px 0 0; padding: 32px 24px 40px }
body.appchrome .spr input, body.appchrome .spr select, body.appchrome .spr .stripe-field { border-radius: 14px }
body.appchrome .spr .chip { border-radius: 999px }
body.appchrome .btn { border-radius: 12px }
body.appchrome .page { padding-top: 28px }
@media (min-width: 921px) {
    body.appchrome .sp { max-width: 1040px; margin: 24px auto; border-radius: 24px; overflow: hidden; background: var(--surface, #FFFFFF) }
    body.appchrome .spr { border-radius: 0 }
}

/* ------------------------------------------------------------------
   Round 20 (Harun's testing list, item 6): payment pop-up — a payment that did not go through (card declined,
   payment failed, any payment error) opens this instead of the red box under the Pay button. Brand look:
   white card on a graphite scrim, graphite text, one gold button ("Try again" / "OK"). core.js COD.payError().
   ------------------------------------------------------------------ */
.payerr {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 28, 28, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
}

html.payerr-open,
html.payerr-open body {
    overflow: hidden
}

.payerr-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface, #FFFFFF);
    color: var(--ink, #1C1C1C);
    border-radius: 18px;
    padding: 26px 22px 22px;
    text-align: center;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .3)
}

.payerr-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--solid, #1C1C1C);
    color: #F0A80D;
    font-family: Anybody, "Arial Black", Arial, sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 1
}

.payerr-t {
    margin: 14px 0 0;
    font-family: Mulish, Arial, sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
    color: var(--ink, #1C1C1C);
    text-transform: none;
    letter-spacing: 0
}

.payerr .payerr-go {
    display: block;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    border-radius: 14px;
    min-height: 52px;
    font-family: Mulish, Arial, sans-serif;
    font-size: 17px;
    border: 0;
    cursor: pointer
}

.payerr .payerr-go:focus-visible {
    outline: 3px solid var(--ink, #1C1C1C);
    outline-offset: 3px
}

/* Round 20 (testing list 8): phone menu — the 8 languages are one row "Language · English" (current language in
   gold); a tap opens the list underneath (the same rows as before, current one gold with a tick). Desktop header
   dropdown unchanged. */
@media (max-width:920px) {
    .mmenu .mmlrow {
        display: flex;
        align-items: center;
        gap: 0;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        margin: 0;
        background: none;
        border: 0;
        color: #F4F4F4;
        font: inherit;
        font-weight: 800;
        text-align: start;
        cursor: pointer
    }

    .mmenu .mmlrow:hover {
        background: #262626
    }

    .mmenu .mmlrow .mmlsep {
        white-space: pre
    }

    .mmenu .mmlrow .mmlcur {
        color: #F0A80D;
        font-weight: 800;
        min-width: 0;
        overflow-wrap: anywhere
    }

    .mmenu .mmlrow .mmlchev {
        margin-inline-start: auto;
        padding-inline-start: 10px;
        font-style: normal;
        transition: transform .15s ease
    }

    .mmenu .mmlrow[aria-expanded="true"] .mmlchev {
        transform: rotate(180deg)
    }

    .mmenu .mmlangs a {
        padding-inline-start: 28px
    }

    .mmenu .mmlangs[hidden] {
        display: none
    }
}

/* ===========================================================================
   Round 21 (12 Oct 2026) · Harun's chosen designs
   ========================================================================= */

/* ---- B1 "One bar": the audit email box (Home + Independent Auditing) — email and button in one white bar ---- */
.obar { display: flex; align-items: center; gap: 0; background: #FFFFFF; border-radius: 999px; padding: 5px; min-height: 60px; max-width: 520px; margin: 14px auto 0; box-shadow: inset 0 0 0 1px rgba(28, 28, 28, .08) }
.obar .fld { margin: 0 !important; min-width: 0 }
body .obar input, body .audit .cap .obar input, body .form .obar input {
    flex: 1; min-width: 0; width: 100%; height: 50px; border: 0 !important; background: transparent !important; box-shadow: none !important;
    padding: 0 14px !important; font: 500 16px Mulish, "Helvetica Neue", Arial, sans-serif; color: #1C1C1C !important; border-radius: 999px !important; outline-offset: -3px
}
.obar input::placeholder { color: #8A8A8A }
body .obar .btn, body .audit .obar .btn.w, body .audit .obar .btn.gold {
    flex: none; max-width: 60%; min-height: 50px; margin: 0; border: 0; border-radius: 999px; padding: 8px 18px;
    background: #1C1C1C !important; color: #FFFFFF !important; font: 800 15px/1.15 Mulish, "Helvetica Neue", Arial, sans-serif;
    white-space: normal; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: none
}
.audit .cap > p:first-child { font-weight: 800; font-size: 17px; line-height: 1.4 }
.form .obar { margin: 0 0 0; max-width: none }
/* the white bar on the light Auditing page: a thin edge so it reads as a box */
.page .obar { box-shadow: inset 0 0 0 1px #DADADA }

/* ---- Header "Join now" on phones / tablets (≤920px, the same breakpoint as the black "… · Join now" bar at the
        bottom, which has the Join button there). The only pages without that bar are the join steps themselves, the
        pay pages and the staff sign-in — no header "Join now" needed there either. Desktop unchanged. ---- */
@media (max-width: 920px) {
    header .hjoin { display: none !important }
}

/* ---- Shop heading: one line from 600px up; on a phone it may wrap (no sideways page) ---- */
@media (min-width: 600px) { .shop-h1 { white-space: nowrap } }

/* ---- A1 "App twin": the member area (My chain + Pledge, Contact details, Payment card, Receipts,
        Emails & privacy, Cancel) in the app's Option 2 look ---- */
.mem2 { --m2-line: #EEEEEE; --m2-mut: #5C5C5C; --m2-soft: #FCEBC2; padding-top: 22px !important; max-width: 680px; margin: 0 auto }
.mem2 .lab { font: 800 12px Mulish, "Helvetica Neue", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--m2-mut); margin: 0 4px }
.mem2.memsub .lab { display: none }
body .mem2 h1 { font: 800 30px/1.1 Mulish, "Helvetica Neue", Arial, sans-serif !important; letter-spacing: -.01em; margin: 6px 2px 14px; max-width: none }
body .mem2 h1 span { background: none !important; color: inherit !important; padding: 0 !important }
@media (min-width: 921px) { body .mem2 h1 { font-size: 40px !important } }
.mem2 .memback { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 800 15px Mulish, "Helvetica Neue", Arial, sans-serif; color: var(--ink, #1C1C1C); text-decoration: none; margin: 0 0 2px -4px }
.mem2 .memback svg { width: 24px; height: 24px; flex: none }
html[dir="rtl"] .mem2 .memback svg, html[dir="rtl"] .mem2 .cv { transform: scaleX(-1) }
.mem2 .acc { display: block; margin-top: 0 }
.mem2 .acc > div { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.mem2 .lede { font: 500 15px/1.5 Mulish, "Helvetica Neue", Arial, sans-serif !important; color: var(--m2-mut) !important; margin: 0 2px 4px; max-width: none }
.mem2 .note { font: 500 13px/1.45 Mulish, "Helvetica Neue", Arial, sans-serif !important; color: var(--m2-mut); margin: 0 4px; max-width: none }
/* number card: white, gold number */
.mem2 .chaincard { background: var(--surface, #FFFFFF); color: var(--ink, #1C1C1C); border-radius: 18px; padding: 18px 18px 16px; contain: none }
.mem2 .chaincard .spot { display: none }
.mem2 .chaincard .k { color: var(--gold-deep, #9A6A00); font: 800 12px Mulish, "Helvetica Neue", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase }
.mem2 .chaincard .num { font-family: Anybody, "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-stretch: 110%; font-size: 64px; line-height: .95; letter-spacing: -.01em; color: var(--gold-deep-3, #D69200); margin: 8px 0 12px }
.mem2 .chaincard .meta { margin-top: 0; gap: 10px 28px; font: 500 13px/1.45 Mulish, "Helvetica Neue", Arial, sans-serif; color: var(--m2-mut) }
.mem2 .chaincard .meta b { color: var(--ink, #1C1C1C); font: 800 16px Mulish, "Helvetica Neue", Arial, sans-serif }
/* one grouped white card with soft-gold icon circles */
.mem2 .list { margin-top: 0; background: var(--surface, #FFFFFF); border-radius: 18px; overflow: hidden }
.mem2 .list a, .mem2 .list div.r {
    display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border-bottom: 0; border-top: 1px solid var(--m2-line);
    font: 500 14px/1.35 Mulish, "Helvetica Neue", Arial, sans-serif; color: var(--m2-mut); text-decoration: none
}
.mem2 .list a:first-child, .mem2 .list div.r:first-child { border-top: 0 }
.mem2 .list a > span:not(.ic), .mem2 .list div.r > span:first-child { flex: 1; min-width: 0 }
.mem2 .list a b, .mem2 .list div.r b { display: block; font: 700 16px/1.3 Mulish, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink, #1C1C1C); margin-bottom: 2px }
.mem2 .list .amt { font: 800 16px Mulish, "Helvetica Neue", Arial, sans-serif; color: var(--ink, #1C1C1C); white-space: nowrap }
.mem2 .ic { width: 34px; height: 34px; border-radius: 99px; background: var(--m2-soft); display: flex; align-items: center; justify-content: center; flex: none; color: var(--ink, #1C1C1C) }
.mem2 .ic svg { width: 18px; height: 18px }
.mem2 .cv { width: 16px; height: 16px; flex: none; color: var(--muted-2, #8A8A8A) }
.mem2 .list a:hover { background: var(--surface-2, #FAFAFA) }
/* the counts: one white card, label + its line on the left, number on the right */
.mem2 .lines { margin-top: 0 !important; border-top: 0; background: var(--surface, #FFFFFF); border-radius: 18px; overflow: hidden }
.mem2 .lines > div { padding: 12px 16px; border-bottom: 0; border-top: 1px solid var(--m2-line); font: 500 15px/1.45 Mulish, "Helvetica Neue", Arial, sans-serif; color: var(--m2-mut) }
.mem2 .lines > div:first-child { border-top: 0 }
.mem2 .lines > div b { color: var(--ink, #1C1C1C); font-weight: 800 }
.mem2 .lines > p { margin: 0; padding: 0 16px 14px; font: 500 13px/1.45 Mulish, "Helvetica Neue", Arial, sans-serif !important; color: var(--m2-mut) !important }
.mem2 .linegrp { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center }
.mem2 .linegrp .top { display: contents }
.mem2 .linegrp .top span { grid-column: 1; font: 700 16px Mulish, "Helvetica Neue", Arial, sans-serif; color: var(--ink, #1C1C1C) }
.mem2 .linegrp .top b { grid-column: 2; grid-row: 1 / span 2; font: 800 16px Mulish, "Helvetica Neue", Arial, sans-serif; white-space: nowrap }
.mem2 .linegrp .hint { grid-column: 1; margin: 2px 0 0; font: 500 14px/1.35 Mulish, "Helvetica Neue", Arial, sans-serif; color: var(--m2-mut) }
/* invite card */
.mem2 .invite { margin-top: 0; background: var(--surface, #FFFFFF); border-radius: 18px; padding: 16px }
.mem2 .invite h2 { font: 800 17px/1.3 Mulish, "Helvetica Neue", Arial, sans-serif }
.mem2 .invite .hint { font: 500 13px/1.45 Mulish, "Helvetica Neue", Arial, sans-serif; color: var(--m2-mut); margin-top: 4px }
.mem2 .linkbox { border: 0; background: var(--bg, #F4F4F4); border-radius: 12px; padding: 12px 14px }
.mem2 .linkbox code { font: 800 15px Mulish, "Helvetica Neue", Arial, sans-serif }
body .mem2 .linkbox .copy { text-decoration: none; border-bottom: 2px solid #F0A80D; padding: 0 0 1px; font: 800 14px Mulish, "Helvetica Neue", Arial, sans-serif; color: var(--ink, #1C1C1C); min-height: 32px }
.mem2 .share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
body .mem2 .share a { border: 0 !important; border-radius: 99px; background: var(--bg, #F4F4F4); color: var(--ink, #1C1C1C); min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; font: 800 14px Mulish, "Helvetica Neue", Arial, sans-serif; text-decoration: none }
/* buttons, fields and choices */
body .mem2 .btn { border-radius: 18px; min-height: 52px; border-width: 2px; font: 800 16px Mulish, "Helvetica Neue", Arial, sans-serif; display: inline-flex !important; align-items: center; justify-content: center; text-align: center }
body .mem2 .btn.gold { border-color: #F0A80D; background: #F0A80D; color: #1C1C1C }
@media (max-width: 920px) { body .mem2 .acc .btn.gold, body .mem2 #cancel-start, body .mem2 .form > .btn { width: 100% } }
.mem2 .form { margin-top: 0; max-width: none }
.mem2 .form label, .mem2 .form .codelab { font: 800 12px Mulish, "Helvetica Neue", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--m2-mut); margin: 14px 4px 6px }
body .mem2 .form input:not(.codebox), body .mem2 .form select, body .mem2 .form textarea { border: 1px solid var(--line-2, #DADADA); border-radius: 12px; background: var(--surface, #FFFFFF); min-height: 52px }
.mem2 .fld .hint { margin: 0 4px 6px; font-size: 13px; color: var(--m2-mut) }
.mem2 .form .fld > p:not(.hint) { margin: 0 4px }
/* pledge amounts: 4 across, white rounded tiles, the chosen one gold */
.mem2 #sadaqah-form .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 0 }
body .mem2 #sadaqah-form .chip { min-height: 52px; padding: 0 6px; border: 2px solid transparent; border-radius: 14px; background: var(--surface, #FFFFFF); color: var(--ink, #1C1C1C); font: 800 16px Mulish, "Helvetica Neue", Arial, sans-serif; box-shadow: none }
body .mem2 #sadaqah-form .chip.on { background: #F0A80D; border-color: #F0A80D; color: #1C1C1C }
.mem2 #sadaqah-form > label { margin-top: 4px }
.mem2 #sadaqah-form .note { margin: 8px 4px 0 }
.mem2 .kv { margin-top: 10px !important; border-top: 0; background: var(--surface, #FFFFFF); border-radius: 18px 18px 0 0; display: block; max-width: none; overflow: hidden }
.mem2 .kv div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-bottom: 0; border-top: 1px solid var(--m2-line); font: 800 16px Mulish, "Helvetica Neue", Arial, sans-serif; white-space: nowrap }
.mem2 .kv div:first-child { border-top: 0 }
.mem2 .kv div b { display: block; font: 700 16px/1.3 Mulish, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink, #1C1C1C); white-space: normal }
.mem2 #sadaqah-form details.faq { margin-top: 0 !important; background: var(--surface, #FFFFFF); border-top: 1px solid var(--m2-line); border-radius: 0 0 18px 18px; padding: 0 16px }
.mem2 #sadaqah-form details.faq summary { min-height: 56px; display: flex; align-items: center; font: 700 16px Mulish, "Helvetica Neue", Arial, sans-serif !important }
.mem2 #sadaqah-form details.faq > p { padding-bottom: 14px; margin: 0 }
.mem2 #sadaqah-form > div[style*="flex"] { flex-direction: column; align-items: stretch !important; gap: 8px !important; margin-top: 16px !important }
.mem2 #sadaqah-form #sadaqah-save { width: 100% }
.mem2 #sadaqah-form > div[style*="flex"] .note { text-align: center; font-size: 13px !important }
/* switches and plain rows (Emails & privacy, Payment card) */
.mem2 .tog { background: var(--surface, #FFFFFF); padding: 12px 16px; border-bottom: 0; border-top: 1px solid var(--m2-line); gap: 14px; cursor: pointer }
.mem2 .tog:first-child, .mem2 .acc > div > .tog:first-of-type { border-radius: 18px 18px 0 0; border-top: 0 }
.mem2 .tog + .tog { border-radius: 0 0 18px 18px }
.mem2 .tog b { font: 700 16px Mulish, "Helvetica Neue", Arial, sans-serif }
.mem2 .tog small { color: var(--m2-mut) !important; font-size: 14px }
.mem2 .tog i { flex: none; width: 50px; height: 30px; background: #F0A80D; box-shadow: none }
.mem2 .tog i:after { top: 3px; right: 3px; width: 24px; height: 24px; background: var(--surface, #FFFFFF); box-shadow: 0 1px 3px rgba(0, 0, 0, .25) }
.mem2 .tog i.off { background: var(--off, #BDBDBD); box-shadow: inset 0 0 0 1px var(--muted-2, #8A8A8A) }
.mem2 .tog i.off:after { left: 3px; right: auto; background: var(--surface, #FFFFFF) }
.mem2 .reinstate { border: 0; border-radius: 18px }
.mem2 .pastdue { border-radius: 18px; margin: 0 }
.mem2 .rstatement { border-radius: 18px !important; border: 0 !important }
.mem2 .sure { background: var(--surface, #FFFFFF); border-radius: 18px; padding: 16px; margin-top: 12px }

/* ---- 20 Oct: sign-in / sign-out batch ---- */
/* M9: phones and tablets (account menu hidden) — initial + "No. X" pill, a tap opens My chain. */
.mpill { display: none }
@media (max-width:920px) {
    .mpill { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 10px 0 4px; border: 2px solid var(--edge, #1C1C1C); border-radius: 999px; background: var(--surface, #FFFFFF); color: var(--ink, #1C1C1C); font-size: 13px; font-weight: 800; white-space: nowrap; text-decoration: none }
    .mpill .acctav { width: 26px; height: 26px; border-radius: 50%; background: var(--act, #1C1C1C); color: var(--act-ink, #F4F4F4); display: inline-flex; align-items: center; justify-content: center; font-size: 12px }
    .mpill:focus-visible { outline: 3px solid #F0A80D; outline-offset: 2px }
    /* M10: "Sign out" alone below a line */
    .mmenu .mmout .acctout { color: #F4F4F4 }
}
@media (max-width:380px) { .mpill { padding: 0 4px } .mpill > span:not(.acctav) { display: none } }
/* M15: yellow note on the sign-in page */
.alert.is-warn { background: var(--tint, #FFF4D6); border-color: #F0A80D; border-left-color: #F0A80D; color: var(--ink, #1C1C1C) }
/* M28: "Still there?" box */
.idlebox { position: fixed; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; max-width: 420px; margin-inline: auto; background: var(--surface, #FFFFFF); border: 2px solid var(--edge, #1C1C1C); border-left: 8px solid #F0A80D; border-radius: 6px; padding: 16px 18px; box-shadow: 0 8px 30px rgba(0,0,0,.18) }
.idlebox[hidden] { display: none }
.idlebox h2 { font-size: 18px; margin: 0 0 6px }
.idlebox p { font-size: 15px; font-weight: 700; line-height: 1.5; margin: 0 }
.idlebox .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px }
.idlebox .btn { padding: 10px 14px; font-size: 14px; cursor: pointer; font-family: inherit }
/* M6: the Sign out button on the GET /signout page */
.signout-form { display: inline }


/* =====================================================================================================================
   21 Oct — feature 1 (maintenance bar), feature 2 (Appearance: Light / Dark / System + dark look A), feature 3 (globe)
   ===================================================================================================================== */

/* ---- Feature 1 · design A: thin dark bar above the header ---- */
.mtbar { background: #1C1C1C; color: #F4F4F4; font-size: 14px; line-height: 1.4; position: relative; z-index: 21 }
.mtbar[hidden] { display: none }
.mtin { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-top: 6px; padding-bottom: 6px }
.mtic { flex: none; color: #F0A80D }
.mttx { flex: 1; min-width: 0; margin: 0; font-weight: 700 }
.mtt { color: #F0A80D; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap }
.mtm { font-weight: 400; overflow-wrap: anywhere }
.mtx { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-inline-end: -8px; padding: 0; background: none; border: 0; border-radius: 6px; color: #F4F4F4; cursor: pointer }
.mtx:hover { background: #333 }
.mtx:focus-visible { outline: 3px solid #F0A80D; outline-offset: 1px }
@media (max-width: 520px) { .mtbar { font-size: 13px } .mtin { padding-top: 5px; padding-bottom: 5px } }
:root[data-theme="dark"] .mtbar { background: #262626; border-bottom: 1px solid #3A3A3A }

/* ---- Feature 3 · design B: one globe button → Language + Currency panel ---- */
.globe { position: relative; display: inline-flex; align-items: center }
.globebtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 999px;
    border: 1.5px solid var(--line-3, #C9C9C9); background: none; color: var(--ink, #1C1C1C); cursor: pointer }
.globebtn:hover, .globebtn.on { border-color: var(--ink, #1C1C1C) }
.globebtn:focus-visible { outline: 3px solid #F0A80D; outline-offset: 2px }
.globepanel { position: absolute; top: calc(100% + 12px); inset-inline-end: -64px; width: min(320px, calc(100vw - 32px)); z-index: 30;
    background: var(--surface, #fff); color: var(--ink, #1C1C1C); border: 2px solid var(--edge, #1C1C1C); border-radius: 10px;
    padding: 14px 16px 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400 }
.globepanel[hidden] { display: none }
@media (max-width: 920px) { .globe.hl { display: none } }   /* phones / tablets: the ☰ menu has the languages and the currency */
.globepanel .gph { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #6D6D6D) }
.globepanel .glangs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin: 0 0 14px }
.globepanel .glangs a { display: block; padding: 7px 8px; border-radius: 6px; font-weight: 700; color: var(--ink, #1C1C1C) }
.globepanel .glangs a:hover { background: var(--bg, #F4F4F4) }
.globepanel .glangs a.active { font-weight: 800; background: var(--bg, #F4F4F4) }
.globepanel .glangs a.active::after { content: " ✓"; color: var(--gold-deep-2, #B97A00) }
.globepanel .glangs a:focus-visible { outline: 3px solid #F0A80D; outline-offset: 1px }
.globepanel .gpcur { margin: 0; line-height: 1.5 }
.globepanel .gpcur b { font-weight: 800 }
.globepanel .gpcur span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted, #6D6D6D) }
html[dir="rtl"] .globepanel .gph { letter-spacing: 0 }
/* Phone ☰ menu: the currency line under the languages */
.mmenu .mmcur { padding: 4px 14px 8px }
.mmenu .mmcurrow { margin: 0; padding: 6px 0 0; font-weight: 800; color: #F4F4F4 }
.mmenu .mmcurrow .mmlsep { font-weight: 400 }
.mmenu .mmcurnote { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: #C9C9C9 }

/* ---- Feature 2 · design A: "Appearance" Light / Dark / System ---- */
.thsw { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.thsw-l { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase }
.thsw-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1.5px solid var(--edge, #1C1C1C); border-radius: 999px; background: var(--surface, #fff) }
.thsw-seg button { min-height: 34px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--ink, #1C1C1C);
    font: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: none; cursor: pointer }
.thsw-seg button[aria-pressed="true"] { background: var(--act, #1C1C1C); color: var(--act-ink, #fff) }
.thsw-seg button:focus-visible { outline: 3px solid #F0A80D; outline-offset: 2px }
/* on the dark panels (footer, account menu, phone menu) */
.thsw-dark .thsw-l { color: #F4F4F4 }
.thsw-dark .thsw-seg { background: #262626; border-color: #4A4A4A }
.thsw-dark .thsw-seg button { color: #F4F4F4 }
.thsw-dark .thsw-seg button[aria-pressed="true"] { background: #F4F4F4; color: #1C1C1C }
html[dir="rtl"] .thsw-l { letter-spacing: 0 }
.thsw-foot { margin-top: 20px }
.lang.acct .menu .acctth { margin-top: 6px; padding: 10px 14px 10px; border-top: 1px solid #333 }
.lang.acct .menu .acctth .thsw, .mmenu .mmtheme .thsw { flex-direction: column; align-items: flex-start; gap: 6px }
.lang.acct .menu .acctth .thsw-l, .mmenu .mmtheme .thsw-l { font-size: 11px }
.mmenu .mmtheme { padding: 6px 14px 10px }

/* ---- Feature 2 · dark look A: the few places a token can't reach ---- */
:root[data-theme="dark"] .mem2 { --m2-line: #2E2E2E; --m2-mut: #A8A8A8; --m2-soft: #3A2F12 }
:root[data-theme="dark"] footer { border-top: 1px solid #2E2E2E }
:root[data-theme="dark"] .sticky { border-top-color: #3A3A3A }
:root[data-theme="dark"] .lang .menu, :root[data-theme="dark"] .mmenu { border-color: #3A3A3A }
:root[data-theme="dark"] :focus-visible { outline-color: #F0A80D }
:root[data-theme="dark"] .tog i:after, :root[data-theme="dark"] .tog i.off:after { background: #F4F4F4 }

/* =========================================================================
   Audit 23 Oct 2026 · approved fixes (website pages + member area)
   ========================================================================= */
/* Item 4 · one button shape: every button corner 18 (as the member area and both apps); colours unchanged — the black
   buttons on the gold band stay black. The audit box's "Send me the audit" (was a 999px pill) is 18 too. */
.btn, .oauth a, .wallet a, .cookie .b a, .share a, body.appchrome .btn { border-radius: 18px }
body .obar .btn, body .audit .obar .btn.w, body .audit .obar .btn.gold { border-radius: 18px }
/* Item 4 · choice chips (Join amounts and "Who is it for?", the member pledge page) — one shared corner, 14 */
.chip, .spr .chip, body .mem2 #sadaqah-form .chip { border-radius: 14px }
/* Item 4 (approved follow-up) · the shop's size buttons (S M L XL) and the chips on the pay pages opened from the apps
   share the same corner, 14 (were 6 and a 999px pill) */
.sizes button, body.appchrome .spr .chip { border-radius: 14px }

/* Item 6 · the last links with a dark underline get the gold one, as every other link: "+ Add attachment" (Contact),
   "Tell us why (optional)" (Cancel), "See the project →" (Projects), "← All projects" and the next-project link. */
main a.reveal:not(.btn), main .pcard .go, main .pg2 .back, main .pg2 .nextp a {
    text-decoration: underline; text-decoration-color: #D69200 !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px
}

/* Item 12 · Join on a phone: the computer-screen divider line on the right of the left panel is for wide screens only */
@media (max-width: 920px) { .spl { border-right: 0 } }
/* Item 12 · Join code step: "Send a new code" sits in the white "Not there?" box — dark words there (they were white on
   white, which left only the gold underline showing); join.js shows it once a new code can be sent. */
main .spr .spam a:not(.btn) { color: var(--ink, #1C1C1C) }

/* 23 Oct · About us: "The believers are the asset." is the same size and look as the other subheadings on the page
   ("Hug the planet.", "Built with partners."), phone and computer. */
.page h1.sub-h, .page h2.sub-h { font-size: 24px; line-height: 1.05; margin-top: 10px }
/* 23 Oct · Events "Update coming soon." — same look, a little air under the page title */
#events-soon { margin: 36px 0 56px }
/* 23 Oct · Partner with us: "Build it with us." always on one line (on a narrow phone the heading fitter shrinks it). */
.page h1.one-line { white-space: nowrap }
/* 23 Oct · Home: "Share the chain" sits at the bottom of the gold "Audit us." band — centred, dark words and edge
   like the black "Independent Auditing" button above it. */
.audit-share .share { justify-content: center }
.audit-share .lab { color: #1C1C1C }
.audit-share .btn.line { color: #1C1C1C; border-color: #1C1C1C; background: transparent }