/*
    KYC CMS Content Typography System
    Shared by front-end article/page-builder content and the admin Rich Text Editor.

    Recommended usage:
    <div class="kyc-content kyc-content--tactical">...</div>
    <div class="rte-editor kyc-content kyc-content--tactical" contenteditable="true">...</div>
*/

:root {
    --kyc-neutral-950: #0a0a0a;
    --kyc-neutral-925: #111111;
    --kyc-neutral-900: #171717;
    --kyc-neutral-850: #1b1b1b;
    --kyc-neutral-800: #262626;
    --kyc-neutral-750: #333333;
    --kyc-neutral-650: #525252;
    --kyc-neutral-200: #c8c6c5;
    --kyc-neutral-50: #fafafa;
    --kyc-orange-700: #ae3200;
    --kyc-orange-500: #ff4d00;
    --kyc-orange-300: #fcdcd3;
    --kyc-red-300: #ee3a34;
    --kyc-body-font: "Chivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --kyc-tactical-font: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.kyc-content,
.rte-editor {
    color: var(--kyc-orange-300);
    font-family: var(--kyc-body-font);
    font-size: 1.0625rem;
    line-height: 1.8;
}

.kyc-turnstile {
    display: flex;
    justify-content: center;
}

.rte-editor {
    min-height: 16rem;
    background:
        linear-gradient(135deg, rgba(17, 17, 17, 0.98), rgba(10, 10, 10, 0.98));
}

.kyc-content > *:first-child,
.rte-editor > *:first-child {
    margin-top: 0;
}

.kyc-content > *:last-child,
.rte-editor > *:last-child {
    margin-bottom: 0;
}

.kyc-content h1,
.rte-editor h1,
.kyc-content h2,
.rte-editor h2,
.kyc-content h3,
.rte-editor h3,
.kyc-content h4,
.rte-editor h4 {
    font-family: var(--kyc-body-font);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.kyc-content h1,
.rte-editor h1 {
    margin: 0 0 1.5rem;
    font-size: clamp(2.75rem, 8vw, 5.5rem);
}

.kyc-content h2,
.rte-editor h2 {
    margin: 3.5rem 0 1.25rem;
    font-size: clamp(2.25rem, 5.5vw, 4rem);
}

.kyc-content h3,
.rte-editor h3 {
    margin: 2.75rem 0 1rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
}

.kyc-content h4,
.rte-editor h4 {
    margin: 2rem 0 .75rem;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    letter-spacing: -0.01em;
}

.kyc-content h2 strong,
.rte-editor h2 strong {
    color: var(--kyc-orange-500);
}

.kyc-content h3 strong,
.rte-editor h3 strong {
    color: var(--kyc-red-300);
}

.kyc-content p,
.rte-editor p {
    margin: 0 0 1.25rem;
    color: var(--kyc-orange-300);
    font-size: 1.0625rem;
    line-height: 1.8;
}

.kyc-content .lead,
.rte-editor .lead,
.kyc-content p.lead,
.rte-editor p.lead {
    color: var(--kyc-orange-300);
    font-size: clamp(1.125rem, 2vw, 1.35rem);
    line-height: 1.7;
}

.kyc-content a,
.rte-editor a {
    color: var(--kyc-orange-500);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: rgba(255, 77, 0, .45);
    text-underline-offset: .22em;
    transition: color 160ms ease, text-decoration-color 160ms ease;
}

.kyc-content a:hover,
.rte-editor a:hover {
    color: var(--kyc-red-300);
    text-decoration-color: currentColor;
}

.kyc-content strong,
.rte-editor strong {
    color: var(--kyc-neutral-100);
    font-weight: 900;
}

.kyc-content em,
.rte-editor em {
    color: var(--kyc-neutral-50);
}

.kyc-content ul,
.rte-editor ul,
.kyc-content ol,
.rte-editor ol {
    margin: 1.5rem 0 2rem;
    padding-left: 0;
    list-style: none;
}

.kyc-content li,
.rte-editor li {
    position: relative;
    margin: .75rem 0;
    padding-left: 2.1rem;
    color: var(--kyc-orange-300);
    line-height: 1.75;
}

.kyc-content ul li::before,
.rte-editor ul li::before {
    content: "//";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--kyc-orange-500);
    font-family: var(--kyc-tactical-font);
    font-weight: 900;
    letter-spacing: -.08em;
}

.kyc-content ol,
.rte-editor ol {
    counter-reset: kyc-counter;
}

.kyc-content ol li,
.rte-editor ol li {
    counter-increment: kyc-counter;
}

.kyc-content ol li::before,
.rte-editor ol li::before {
    content: counter(kyc-counter, decimal-leading-zero) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--kyc-orange-500);
    font-family: var(--kyc-tactical-font);
    font-weight: 900;
}

.kyc-content blockquote,
.rte-editor blockquote {
    position: relative;
    margin: 2.5rem 0;
    padding: 2rem;
    border-left: .5rem solid var(--kyc-orange-500);
    background: var(--kyc-neutral-850);
    color: var(--kyc-neutral-50);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 800;
    line-height: 1.45;
    text-transform: uppercase;
}

.kyc-content blockquote p,
.rte-editor blockquote p {
    color: var(--kyc-neutral-50);
    font-size: inherit;
    line-height: inherit;
}

.kyc-content blockquote::before,
.rte-editor blockquote::before {
    content: "[ INTEL ]";
    display: block;
    margin-bottom: .9rem;
    color: var(--kyc-orange-500);
    font-family: var(--kyc-tactical-font);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .18em;
}

.kyc-content img,
.rte-editor img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2rem 0;
    border: 2px solid var(--kyc-neutral-800);
    background: var(--kyc-neutral-900);
}

.kyc-content figure,
.rte-editor figure {
    margin: 2.5rem 0;
    border: 2px solid var(--kyc-neutral-800);
    background: var(--kyc-neutral-750);
    padding: .5rem;
}

.kyc-content figure img,
.rte-editor figure img {
    margin: 0;
    width: 100%;
    border: 0;
}

.kyc-content figcaption,
.rte-editor figcaption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--kyc-neutral-800);
    color: var(--kyc-orange-300);
    font-family: var(--kyc-tactical-font);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.kyc-content table,
.rte-editor table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: collapse;
    border: 1px solid var(--kyc-neutral-800);
    background: var(--kyc-neutral-925);
}

.kyc-content th,
.rte-editor th {
    border: 1px solid var(--kyc-neutral-800);
    background: var(--kyc-neutral-850);
    color: var(--kyc-orange-500);
    font-family: var(--kyc-tactical-font);
    font-size: .75rem;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .9rem;
}

.kyc-content td,
.rte-editor td {
    border: 1px solid var(--kyc-neutral-800);
    color: var(--kyc-orange-300);
    padding: .9rem;
    vertical-align: top;
}

.kyc-content hr,
.rte-editor hr {
    height: 1px;
    margin: 3rem 0;
    border: 0;
    background: linear-gradient(to right, transparent, var(--kyc-orange-500), transparent);
}

.kyc-content code,
.rte-editor code {
    border: 1px solid var(--kyc-neutral-800);
    background: var(--kyc-neutral-900);
    color: var(--kyc-orange-500);
    font-family: var(--kyc-tactical-font);
    font-size: .9em;
    padding: .15rem .35rem;
}

.kyc-content pre,
.rte-editor pre {
    overflow-x: auto;
    margin: 2rem 0;
    padding: 1.25rem;
    border: 1px solid var(--kyc-neutral-800);
    background: var(--kyc-neutral-925);
    color: var(--kyc-orange-300);
}

.kyc-content pre code,
.rte-editor pre code {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
}

/* Reusable micro-patterns from the blog/home style. */
.kyc-content .kyc-label,
.rte-editor .kyc-label,
.kyc-content .intel-label,
.rte-editor .intel-label {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .35rem .75rem;
    border-left: 4px solid var(--kyc-orange-500);
    background: var(--kyc-neutral-800);
    color: var(--kyc-neutral-50);
    font-family: var(--kyc-tactical-font);
    font-size: .75rem;
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.kyc-content .kyc-callout,
.rte-editor .kyc-callout {
    margin: 2.5rem 0;
    padding: 2rem;
    border-left: .5rem solid var(--kyc-orange-500);
    background: var(--kyc-neutral-850);
}

.kyc-content .kyc-card-grid,
.rte-editor .kyc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.kyc-content .kyc-mini-card,
.rte-editor .kyc-mini-card {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid var(--kyc-neutral-800);
    background: var(--kyc-neutral-850);
}

.kyc-content .kyc-mini-card h3,
.rte-editor .kyc-mini-card h3,
.kyc-content .kyc-mini-card h4,
.rte-editor .kyc-mini-card h4 {
    margin-top: 0;
}

.rte-editor:focus {
    box-shadow: inset 0 0 0 2px rgba(255, 77, 0, .35);
}

.rte-editor:empty::before {
    content: "Start typing tactical content...";
    color: rgba(252, 220, 211, .35);
}

@media (max-width: 640px) {
    .kyc-turnstile{
        transform:scale(.90);
        transform-origin:center top;
    }
    
    .kyc-content,
    .rte-editor {
        font-size: 1rem;
        line-height: 1.75;
    }

    .kyc-content h2,
    .rte-editor h2 {
        margin-top: 2.5rem;
    }

    .kyc-content blockquote,
    .rte-editor blockquote {
        padding: 1.5rem;
    }

    .kyc-content figcaption,
    .rte-editor figcaption {
        display: block;
    }
}