@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600&family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0");

.ta-onecircle-landing {
    --oc-primary: #ba0015;
    --oc-primary-container: #e21f26;
    --oc-on-primary: #ffffff;
    --oc-on-primary-container: #fffaf9;
    --oc-background: #f8f9fa;
    --oc-on-background: #191c1d;
    --oc-on-surface: #191c1d;
    --oc-on-surface-variant: #5d3f3c;
    --oc-surface: #f8f9fa;
    --oc-surface-container-low: #f3f4f5;
    --oc-surface-container-lowest: #ffffff;
    --oc-surface-container: #edeeef;
    --oc-surface-variant: #e1e3e4;
    --oc-error-container: #ffdad6;
    --oc-secondary: #5f5e5e;
    --oc-margin-mobile: 16px;
    --oc-margin-desktop: 64px;
    --oc-space-md: 24px;
    --oc-space-lg: 48px;
    --oc-space-xl: 80px;
    --oc-radius: 0.125rem;
    --oc-radius-lg: 0.25rem;
    --oc-max-inner: 80rem;
    box-sizing: border-box;
    width: 100%;
    color: var(--oc-on-background);
    background: var(--oc-background);
    font-family: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ta-onecircle-landing *,
.ta-onecircle-landing *::before,
.ta-onecircle-landing *::after {
    box-sizing: border-box;
}

.ta-onecircle-landing .material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    font-size: 24px;
    line-height: 1;
}

.ta-onecircle-landing .oc-icon-fill {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.ta-onecircle-landing .oc-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

/* Hero */
.ta-onecircle-landing .oc-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 614px;
    padding: var(--oc-space-xl) var(--oc-margin-mobile);
    overflow: hidden;
    background: var(--oc-surface-container-low);
}

.ta-onecircle-landing .oc-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135deg, var(--oc-surface-container-low) 0%, var(--oc-surface-variant) 100%);
}

.ta-onecircle-landing .oc-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    filter: grayscale(100%);
}

.ta-onecircle-landing .oc-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

.ta-onecircle-landing .oc-hero__title {
    margin: 0 0 var(--oc-space-md);
    font-family: "Bebas Neue", "Arial Narrow", "Helvetica Condensed", Impact, sans-serif;
    font-size: clamp(2.75rem, 8vw, 5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--oc-primary);
}

.ta-onecircle-landing .oc-hero__copy {
    margin: 0 auto;
    max-width: 48rem;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    color: var(--oc-on-surface-variant);
}

.ta-onecircle-landing .oc-hero__cta {
    margin-top: var(--oc-space-lg);
}

.ta-onecircle-landing .oc-btn-join {
    display: inline-block;
    padding: 12px 48px;
    border: none;
    border-radius: var(--oc-radius);
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--oc-on-primary);
    background: var(--oc-primary-container);
    transition: transform 0.3s ease;
}

.ta-onecircle-landing .oc-btn-join:hover,
.ta-onecircle-landing .oc-btn-join:focus {
    transform: scale(1.02);
    color: var(--oc-on-primary);
    text-decoration: none;
}

/* Sections */
.ta-onecircle-landing .oc-section {
    padding: var(--oc-space-xl) var(--oc-margin-mobile);
}

.ta-onecircle-landing .oc-section--features {
    background: var(--oc-background);
}

.ta-onecircle-landing .oc-section--upcoming {
    background: var(--oc-surface-container-low);
}

.ta-onecircle-landing .oc-section__inner {
    max-width: var(--oc-max-inner);
    margin: 0 auto;
}

.ta-onecircle-landing .oc-section__head {
    margin-bottom: var(--oc-space-xl);
    text-align: center;
}

.ta-onecircle-landing .oc-section__title {
    margin: 0 0 12px;
    font-family: "Bebas Neue", "Arial Narrow", "Helvetica Condensed", Impact, sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--oc-on-surface);
}

.ta-onecircle-landing .oc-section__intro {
    margin: 0 auto 12px;
    max-width: 42rem;
    font-size: 16px;
    line-height: 24px;
    color: var(--oc-on-surface-variant);
}

.ta-onecircle-landing .oc-section__rule {
    width: 4rem;
    height: 4px;
    margin: 0 auto;
    background: var(--oc-primary);
}

/* Card grid */
.ta-onecircle-landing .oc-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-md);
}

@media (min-width: 768px) {
    .ta-onecircle-landing .oc-hero {
        padding-left: var(--oc-margin-desktop);
        padding-right: var(--oc-margin-desktop);
    }

    .ta-onecircle-landing .oc-section {
        padding-left: var(--oc-margin-desktop);
        padding-right: var(--oc-margin-desktop);
    }

    .ta-onecircle-landing .oc-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ta-onecircle-landing .oc-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ta-onecircle-landing .oc-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--oc-space-lg);
    border: 1px solid var(--oc-surface-variant);
    border-radius: var(--oc-radius-lg);
    background: var(--oc-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(25, 28, 29, 0.06);
    transition: transform 0.3s ease;
}

.ta-onecircle-landing .oc-card--feature:hover,
.ta-onecircle-landing .oc-card--upcoming:hover {
    transform: translateY(-4px);
}

.ta-onecircle-landing .oc-card--upcoming {
    opacity: 0.8;
}

.ta-onecircle-landing .oc-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--oc-space-md);
    border-radius: 999px;
}

.ta-onecircle-landing .oc-card__icon--primary {
    color: var(--oc-primary);
    background: var(--oc-error-container);
}

.ta-onecircle-landing .oc-card__icon--muted {
    color: var(--oc-secondary);
    background: var(--oc-surface-container);
}

.ta-onecircle-landing .oc-card__title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--oc-on-surface);
}

.ta-onecircle-landing .oc-card__body {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--oc-on-surface-variant);
}

@media (prefers-reduced-motion: reduce) {
    .ta-onecircle-landing .oc-btn-join:hover,
    .ta-onecircle-landing .oc-btn-join:focus,
    .ta-onecircle-landing .oc-card--feature:hover,
    .ta-onecircle-landing .oc-card--upcoming:hover {
        transform: none;
    }
}

/* ================================
   One Circle — Become a Member
   ================================ */
.ta-onecircle-member,
#modal-memberverify.oc-member-modal {
    --oc-primary: #ba0015;
    --oc-primary-container: #e21f26;
    --oc-on-primary: #ffffff;
    --oc-background: #f8f9fa;
    --oc-on-background: #191c1d;
    --oc-on-surface: #191c1d;
    --oc-on-surface-variant: #5d3f3c;
    --oc-font-body: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --oc-font-display: "Bebas Neue", "Arial Narrow", "Helvetica Condensed", Impact, sans-serif;
    --oc-text-label-size: 14px;
    --oc-text-label-leading: 20px;
    --oc-text-label-tracking: 0.05em;
    --oc-text-body-size: 16px;
    --oc-text-body-leading: 24px;
    --oc-text-body-lg-size: 18px;
    --oc-text-body-lg-leading: 28px;
    --oc-text-display-sm-size: 20px;
    --oc-text-display-sm-leading: 1.1;
    --oc-text-display-sm-tracking: 0.03em;
    --oc-text-btn-size: 20px;
    --oc-text-btn-tracking: 0.05em;
    --oc-surface: #f8f9fa;
    --oc-surface-container-lowest: #ffffff;
    --oc-surface-container: #edeeef;
    --oc-surface-container-low: #f3f4f5;
    --oc-surface-variant: #e1e3e4;
    --oc-outline-variant: #e7bdb8;
    --oc-margin-mobile: 16px;
    --oc-margin-desktop: 64px;
    --oc-space-sm: 12px;
    --oc-space-md: 24px;
    --oc-space-lg: 48px;
    --oc-space-xl: 80px;
    --oc-radius: 0.125rem;
    --oc-radius-lg: 0.25rem;
    --oc-radius-xl: 0.5rem;
    --oc-max-width: 90rem;
    box-sizing: border-box;
    width: 100%;
    color: var(--oc-on-background);
    background: var(--oc-background);
    font-family: var(--oc-font-body);
    font-size: var(--oc-text-body-size);
    line-height: var(--oc-text-body-leading);
    -webkit-font-smoothing: antialiased;
}

.ta-onecircle-member *,
.ta-onecircle-member *::before,
.ta-onecircle-member *::after,
#modal-memberverify.oc-member-modal *,
#modal-memberverify.oc-member-modal *::before,
#modal-memberverify.oc-member-modal *::after {
    box-sizing: border-box;
}

.ta-onecircle-member .required,
#modal-memberverify.oc-member-modal .required {
    color: var(--oc-primary);
}

.ta-onecircle-member .material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    font-size: 24px;
    line-height: 1;
}

.ta-onecircle-member .oc-icon-fill {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.ta-onecircle-member .oc-member-main {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.ta-onecircle-member .oc-member-main__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 100% 0%, rgba(226, 31, 38, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(25, 28, 29, 0.02) 0%, transparent 30%);
}

.ta-onecircle-member .oc-member-main__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-lg);
    max-width: var(--oc-max-width);
    margin: 0 auto;
    padding: var(--oc-space-xl) var(--oc-margin-mobile);
}

@media (min-width: 1024px) {
    .ta-onecircle-member .oc-member-main__inner {
        grid-template-columns: 5fr 7fr;
        padding-left: var(--oc-margin-desktop);
        padding-right: var(--oc-margin-desktop);
    }

    .ta-onecircle-member .oc-member-aside {
        position: sticky;
        top: 8rem;
        align-self: start;
    }
}

/* Left column */
.ta-onecircle-member .oc-member-aside {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-lg);
}

.ta-onecircle-member .oc-member-aside__intro {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-sm);
}

.ta-onecircle-member .oc-member-aside__eyebrow {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--oc-primary);
}

.ta-onecircle-member .oc-member-aside__eyebrow-line {
    display: block;
    width: 2rem;
    height: 2px;
    background: var(--oc-primary);
}

.ta-onecircle-member .oc-member-aside__title {
    margin: 0;
    font-family: "Bebas Neue", "Arial Narrow", "Helvetica Condensed", Impact, sans-serif;
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--oc-on-surface);
}

.ta-onecircle-member .oc-member-aside__copy {
    margin: 0;
    max-width: 28rem;
    font-size: 18px;
    line-height: 28px;
    color: var(--oc-on-surface-variant);
}

.ta-onecircle-member .oc-member-benefits {
    padding: var(--oc-space-md);
    border: 1px solid var(--oc-surface-variant);
    border-radius: var(--oc-radius-lg);
    background: var(--oc-surface-container-lowest);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.03);
}

.ta-onecircle-member .oc-member-benefits__title {
    margin: 0 0 var(--oc-space-md);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--oc-on-surface);
}

.ta-onecircle-member .oc-member-benefits__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-sm);
}

.ta-onecircle-member .oc-member-benefits__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--oc-space-sm);
    font-size: 16px;
    line-height: 24px;
    color: var(--oc-on-surface-variant);
}

.ta-onecircle-member .oc-member-benefits__list .material-symbols-outlined {
    flex-shrink: 0;
    color: var(--oc-primary);
}

/* Form card */
.ta-onecircle-member .oc-member-form {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-xl);
    margin: 0;
    padding: var(--oc-space-md);
    border: 1px solid var(--oc-surface-variant);
    border-radius: var(--oc-radius-xl);
    background: var(--oc-surface-container-lowest);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
    .ta-onecircle-member .oc-member-form {
        padding: var(--oc-space-lg);
    }
}

.ta-onecircle-member .oc-member-form__progress {
    display: flex;
    align-items: center;
    gap: var(--oc-space-sm);
}

.ta-onecircle-member .oc-member-form__progress-seg {
    flex: 1;
    height: 4px;
    border-radius: var(--oc-radius);
    background: var(--oc-surface-variant);
    transition: background-color 0.2s ease;
}

.ta-onecircle-member .oc-member-form__progress-seg.is-active {
    background: var(--oc-primary-container);
}

/* Sections */
.ta-onecircle-member .oc-member-section {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.ta-onecircle-member .oc-member-section__legend {
    display: flex;
    align-items: center;
    gap: var(--oc-space-sm);
    width: 100%;
    margin: 0 0 var(--oc-space-md);
    padding: 0 0 var(--oc-space-sm);
    border: 0;
    border-bottom: 1px solid var(--oc-surface-variant);
    font-family: "Bebas Neue", "Arial Narrow", "Helvetica Condensed", Impact, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--oc-on-surface);
}

.ta-onecircle-member .oc-member-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-md);
}

@media (min-width: 768px) {
    .ta-onecircle-member .oc-member-fields--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ta-onecircle-member .oc-member-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ta-onecircle-member .oc-member-field--full {
    grid-column: 1 / -1;
}

.ta-onecircle-member .oc-member-label,
#modal-memberverify.oc-member-modal .oc-member-label {
    font-family: var(--oc-font-body);
    font-size: var(--oc-text-label-size);
    font-weight: 600;
    line-height: var(--oc-text-label-leading);
    letter-spacing: var(--oc-text-label-tracking);
    color: var(--oc-on-surface-variant);
}

.ta-onecircle-member .oc-member-input,
.ta-onecircle-member select.oc-member-select,
#modal-memberverify.oc-member-modal .oc-member-input {
    width: 100%;
    min-height: 44px;
    padding: 12px;
    border: none;
    border-radius: var(--oc-radius);
    font-family: var(--oc-font-body);
    font-size: var(--oc-text-body-size);
    line-height: var(--oc-text-body-leading);
    color: #191c1d;
    -webkit-text-fill-color: #191c1d;
    background-color: #f3f4f6;
    box-shadow: none;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.ta-onecircle-member select.oc-member-select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23191c1d' d='M1.41 0 6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ta-onecircle-member select.oc-member-select option {
    color: #191c1d;
    background-color: #ffffff;
}

.ta-onecircle-member select.oc-member-select option:checked {
    color: #ffffff;
    background-color: var(--oc-primary-container);
}

.ta-onecircle-member .oc-member-input:focus,
.ta-onecircle-member select.oc-member-select:focus,
#modal-memberverify.oc-member-modal .oc-member-input:focus {
    outline: none;
    background-color: #f3f4f6;
    box-shadow: 0 0 0 2px rgba(226, 31, 38, 0.35);
}

.ta-onecircle-member .oc-member-input.ta-error,
.ta-onecircle-member select.oc-member-select.ta-error,
#modal-memberverify.oc-member-modal .oc-member-input.ta-error {
    box-shadow: 0 0 0 2px rgba(186, 0, 21, 0.45);
}

.ta-onecircle-member select.oc-member-select--readonly,
.ta-onecircle-member select.oc-member-select:disabled {
    color: #191c1d;
    -webkit-text-fill-color: #191c1d;
    background-color: #f3f4f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23191c1d' d='M1.41 0 6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    cursor: not-allowed;
    opacity: 1;
}

.ta-onecircle-member label.ta-error,
.ta-onecircle-member .oc-member-label.ta-error {
    color: var(--oc-primary);
}

/* Radios */
.ta-onecircle-member .oc-member-radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-md);
}

.ta-onecircle-member .oc-member-radios--align-end {
    flex: 1;
    align-items: center;
    min-height: 42px;
}

.ta-onecircle-member .oc-member-radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    color: var(--oc-on-surface);
    transition: color 0.15s ease;
}

.ta-onecircle-member .oc-member-radio:hover {
    color: var(--oc-primary);
}

.ta-onecircle-member .oc-member-radio input[type="radio"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--oc-primary-container);
    cursor: pointer;
}

/* Genre checkboxes */
.ta-onecircle-member .oc-member-genres {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--oc-space-sm);
}

@media (min-width: 768px) {
    .ta-onecircle-member .oc-member-genres {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ta-onecircle-member .oc-member-genre {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: var(--oc-space-sm);
    border: 1px solid var(--oc-surface-variant);
    border-radius: var(--oc-radius);
    background: var(--oc-surface);
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    color: var(--oc-on-surface);
    transition: border-color 0.15s ease;
}

.ta-onecircle-member .oc-member-genre:hover {
    border-color: var(--oc-primary-container);
}

.ta-onecircle-member .oc-member-genre input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--oc-primary-container);
    cursor: pointer;
}

.ta-onecircle-member .oc-member-genre:has(input:checked),
.ta-onecircle-member .oc-member-genre.is-selected {
    border-color: var(--oc-primary-container);
    background: rgba(226, 31, 38, 0.1);
    box-shadow: inset 0 0 0 1px var(--oc-primary-container);
}

.ta-onecircle-member .oc-member-genre:has(input:checked) span,
.ta-onecircle-member .oc-member-genre.is-selected span {
    color: #191c1d;
    font-weight: 600;
}

/* Footer */
.ta-onecircle-member .oc-member-footer {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-lg);
    padding-top: var(--oc-space-md);
    margin-top: var(--oc-space-md);
    border-top: 1px solid var(--oc-surface-variant);
}

.ta-onecircle-member .oc-member-quote {
    margin: 0;
    padding-left: var(--oc-space-md);
    border-left: 2px solid var(--oc-primary);
    font-size: 16px;
    line-height: 24px;
    font-style: italic;
    color: var(--oc-on-surface-variant);
}

.ta-onecircle-member .oc-member-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--oc-space-md);
}

@media (min-width: 768px) {
    .ta-onecircle-member .oc-member-actions {
        flex-direction: row;
        align-items: center;
    }
}

.ta-onecircle-member .oc-member-terms {
    display: flex;
    align-items: flex-start;
    gap: var(--oc-space-sm);
    max-width: 32rem;
    cursor: pointer;
}

.ta-onecircle-member .oc-member-terms__input {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 4px;
    accent-color: var(--oc-primary-container);
    cursor: pointer;
}

.ta-onecircle-member .oc-member-terms__text {
    font-size: 16px;
    line-height: 24px;
    color: var(--oc-on-surface);
}

.ta-onecircle-member .oc-member-link {
    color: var(--oc-primary);
    text-decoration: none;
}

.ta-onecircle-member .oc-member-link:hover {
    text-decoration: underline;
}

.ta-onecircle-member .oc-member-btn,
#modal-memberverify.oc-member-modal .oc-member-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--oc-space-sm) var(--oc-space-lg);
    border: none;
    border-radius: var(--oc-radius);
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-btn-size);
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--oc-text-btn-tracking);
    text-transform: uppercase;
    color: var(--oc-on-primary);
    background: var(--oc-primary-container);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ta-onecircle-member .oc-member-btn:hover:not(:disabled),
#modal-memberverify.oc-member-modal .oc-member-btn:hover {
    background: var(--oc-primary);
    transform: translateY(-2px);
}

.ta-onecircle-member .oc-member-btn:active:not(:disabled),
#modal-memberverify.oc-member-modal .oc-member-btn:active {
    transform: scale(0.98);
}

.ta-onecircle-member .oc-member-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (min-width: 768px) {
    .ta-onecircle-member .oc-member-btn,
    #modal-memberverify.oc-member-modal .oc-member-btn {
        width: auto;
        min-width: 10rem;
    }
}

.ta-onecircle-member .oc-member-btn--outline,
#modal-memberverify.oc-member-modal .oc-member-btn--outline {
    color: var(--oc-primary);
    background: transparent;
    border: 2px solid var(--oc-primary-container);
}

.ta-onecircle-member .oc-member-btn--outline:hover:not(:disabled),
#modal-memberverify.oc-member-modal .oc-member-btn--outline:hover {
    color: var(--oc-on-primary);
    background: var(--oc-primary-container);
    transform: translateY(-2px);
}

/* Verification modal — reuses .oc-member-* tokens (lives outside .ta-onecircle-member) */
#modal-memberverify.oc-member-modal {
    font-family: var(--oc-font-body);
    font-size: var(--oc-text-body-size);
    line-height: var(--oc-text-body-leading);
    color: var(--oc-on-background);
}

/* Force form typography over global modal / site fonts (e.g. Montserrat) */
#modal-memberverify.oc-member-modal .modal-card,
#modal-memberverify.oc-member-modal .modal-card-head,
#modal-memberverify.oc-member-modal .modal-card-body,
#modal-memberverify.oc-member-modal .modal-card-foot,
#modal-memberverify.oc-member-modal .oc-member-verify-form,
#modal-memberverify.oc-member-modal p {
    font-family: inherit;
}

#modal-memberverify.oc-member-modal .oc-member-modal__card {
    max-width: 560px;
    border: 1px solid var(--oc-surface-variant);
    border-radius: var(--oc-radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
}

#modal-memberverify.oc-member-modal .oc-member-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--oc-space-md) var(--oc-space-md);
    background: var(--oc-primary-container);
}

#modal-memberverify.oc-member-modal .modal-card-title.oc-member-modal__title,
#modal-memberverify.oc-member-modal .oc-member-modal__title {
    margin: 0;
    flex: 1;
    text-align: center;
    font-family: var(--oc-font-display) !important;
    font-size: var(--oc-text-display-sm-size) !important;
    font-weight: 400 !important;
    line-height: var(--oc-text-display-sm-leading) !important;
    letter-spacing: var(--oc-text-display-sm-tracking) !important;
    text-transform: uppercase;
    color: var(--oc-on-primary) !important;
}

#modal-memberverify.oc-member-modal .oc-member-modal__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    margin-left: var(--oc-space-sm);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

#modal-memberverify.oc-member-modal .oc-member-modal__close::before,
#modal-memberverify.oc-member-modal .oc-member-modal__close::after {
    background: var(--oc-on-primary);
}

#modal-memberverify.oc-member-modal .oc-member-modal__close:hover {
    background: rgba(255, 255, 255, 0.32);
}

#modal-memberverify.oc-member-modal .oc-member-modal__body {
    padding: var(--oc-space-lg);
    background: var(--oc-surface-container-lowest);
}

#modal-memberverify.oc-member-modal .oc-member-verify-form {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-md);
}

#modal-memberverify.oc-member-modal .oc-member-verify-info {
    padding-bottom: var(--oc-space-md);
    border-bottom: 1px solid var(--oc-surface-variant);
}

#modal-memberverify.oc-member-modal .oc-member-modal__message {
    margin: 0 0 var(--oc-space-sm);
    font-family: var(--oc-font-body) !important;
    font-size: var(--oc-text-body-size) !important;
    font-weight: 400;
    line-height: var(--oc-text-body-leading) !important;
    text-align: center;
    color: var(--oc-on-surface);
}

#modal-memberverify.oc-member-modal .oc-member-modal__message:last-child {
    margin-bottom: 0;
}

#modal-memberverify.oc-member-modal .oc-member-modal__message strong {
    font-weight: 600;
    color: var(--oc-on-surface);
}

#modal-memberverify.oc-member-modal .oc-member-modal__instruction {
    margin: 0;
    font-family: var(--oc-font-body) !important;
    font-size: var(--oc-text-body-size) !important;
    font-weight: 400;
    line-height: var(--oc-text-body-leading) !important;
    text-align: center;
    color: var(--oc-on-surface-variant);
}

#modal-memberverify.oc-member-modal .oc-member-label {
    font-family: var(--oc-font-body) !important;
    font-size: var(--oc-text-label-size) !important;
    font-weight: 600 !important;
    line-height: var(--oc-text-label-leading) !important;
    letter-spacing: var(--oc-text-label-tracking) !important;
    color: var(--oc-on-surface-variant) !important;
}

#modal-memberverify.oc-member-modal .oc-member-input {
    font-family: var(--oc-font-body) !important;
    font-size: var(--oc-text-body-size) !important;
    line-height: var(--oc-text-body-leading) !important;
    font-weight: 400;
    color: #191c1d !important;
}

#modal-memberverify.oc-member-modal .oc-member-input::placeholder {
    font-family: var(--oc-font-body);
    font-size: var(--oc-text-body-size);
    line-height: var(--oc-text-body-leading);
    color: var(--oc-on-surface-variant);
    opacity: 0.75;
}

#modal-memberverify.oc-member-modal .oc-member-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#modal-memberverify.oc-member-modal .oc-member-modal__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--oc-space-md);
    padding: var(--oc-space-md) var(--oc-space-lg) var(--oc-space-lg);
    border-top: 1px solid var(--oc-surface-variant);
    background: var(--oc-surface-container-lowest);
}

/* Reset legacy global modal button rules */
#modal-memberverify.oc-member-modal .oc-member-modal__foot .oc-member-btn {
    width: auto;
    min-width: 10rem;
    height: auto;
    margin: 0;
    font-family: var(--oc-font-display) !important;
    font-size: var(--oc-text-btn-size) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: var(--oc-text-btn-tracking) !important;
    text-transform: uppercase !important;
}

@media (prefers-reduced-motion: reduce) {
    .ta-onecircle-member .oc-member-btn:hover:not(:disabled),
    .ta-onecircle-member .oc-member-btn:active:not(:disabled),
    #modal-memberverify.oc-member-modal .oc-member-btn:hover,
    #modal-memberverify.oc-member-modal .oc-member-btn:active {
        transform: none;
    }
}