/* =========================================================================
   Veri Vest Capital Investment— "Statement" design system
   An editorial, ledger-inspired system built from scratch for the public
   marketing site. No Bootstrap grid, no vendor theme classes, no carried-
   over styling from the old design. Anchored to the brand's real
   logo colors (near-black ink + warm gold) and brand green.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
    /* surfaces */
    --paper:        #F7F3EA;
    --paper-soft:   #EFE8D8;
    --paper-line:   rgba(20,18,15,.14);
    --paper-line-strong: rgba(20,18,15,.28);

    --ink:          #14120F;
    --ink-elevated: #1C1A15;
    --ink-line:     rgba(247,243,234,.16);
    --ink-line-strong: rgba(247,243,234,.30);

    /* brand accents (from the logo + original brand palette) */
    --gold:         #C0A478;
    --gold-deep:    #8F7248;
    --gold-tint:    rgba(192,164,120,.16);
    --forest:       #1C4C46;
    --forest-deep:  #123430;
    --forest-tint:  rgba(28,76,70,.14);

    /* text */
    --text-on-paper:        var(--ink);
    --text-muted-on-paper:  rgba(20,18,15,.64);
    --text-faint-on-paper:  rgba(20,18,15,.42);
    --text-on-ink:          var(--paper);
    --text-muted-on-ink:    rgba(247,243,234,.68);
    --text-faint-on-ink:    rgba(247,243,234,.44);

    /* type */
    --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    /* layout */
    --container: 1180px;
    --gutter: clamp(20px, 4vw, 56px);
    --radius: 3px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 20px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 72px;
    --space-8: 104px;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body{
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--text-on-paper);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; cursor: pointer; }
input, textarea, select{ font: inherit; }
::selection{ background: var(--gold); color: var(--ink); }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4{
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-3);
    overflow-wrap: break-word;
}
h1{ font-size: clamp(2.6rem, 5.5vw, 4.8rem); font-weight: 500; }
h2{ font-size: clamp(2rem, 3.4vw, 3rem); }
h3{ font-size: clamp(1.4rem, 2vw, 1.9rem); }
h4{ font-size: 1.15rem; letter-spacing: 0; }
p{ margin: 0 0 var(--space-4); max-width: 62ch; }
p:last-child{ margin-bottom: 0; }
.on-ink p, .on-ink li{ color: var(--text-muted-on-ink); }
.on-paper p, .on-paper li{ color: var(--text-muted-on-paper); }

.eyebrow{
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: var(--space-3);
}
.on-ink .eyebrow{ color: var(--gold); }
.eyebrow::before{
    content: "";
    width: 22px; height: 1px;
    background: currentColor;
}

.figure{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lede{ font-size: 1.15rem; color: var(--text-muted-on-paper); max-width: 58ch; }
.on-ink .lede{ color: var(--text-muted-on-ink); }

/* ---------- 4. Layout primitives ---------- */
.container{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.band{ padding: var(--space-8) 0; position: relative; }
.band + .band{ border-top: 1px solid var(--paper-line); }
.band.on-ink{ background: var(--ink); color: var(--text-on-ink); }
.band.on-ink + .band.on-ink{ border-top-color: var(--ink-line); }
.band.on-ink + .band:not(.on-ink),
.band:not(.on-ink) + .band.on-ink{ border-top: none; }
.band.soft{ background: var(--paper-soft); }
.band.tight{ padding: var(--space-6) 0; }

.grid{ display: grid; gap: var(--space-6); }
.grid-12{ grid-template-columns: repeat(12, 1fr); }
.grid-12 > [class*="g-col-"]{ min-width: 0; }
.g-col-3{ grid-column: span 3; }
.g-col-4{ grid-column: span 4; }
.g-col-5{ grid-column: span 5; }
.g-col-6{ grid-column: span 6; }
.g-col-7{ grid-column: span 7; }
.g-col-8{ grid-column: span 8; }
.g-col-12{ grid-column: span 12; }
@media (max-width: 860px){
    .grid-12{ grid-template-columns: 1fr; }
    .grid-12 > [class*="g-col-"]{ grid-column: 1 / -1; }
}

.split{
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-6);
    align-items: center;
}
.split > *{ min-width: 0; }
.split.reverse{ grid-template-columns: 7fr 5fr; }
.split.reverse > :first-child{ order: 2; }
@media (max-width: 860px){
    .split, .split.reverse{ grid-template-columns: 1fr; }
    .split.reverse > :first-child{ order: 0; }
}

.section-head{ margin-bottom: var(--space-6); max-width: 46rem; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }

hr.rule{ border: none; border-top: 1px solid var(--paper-line); margin: var(--space-6) 0; }
.on-ink hr.rule{ border-top-color: var(--ink-line); }

/* ---------- 5. Nav ---------- */
.site-nav{
    position: sticky; top: 0; z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--paper-line);
}
.site-nav.is-scrolled{ box-shadow: 0 1px 0 var(--paper-line-strong); }
.site-nav .container{
    display: flex; align-items: center; justify-content: space-between;
    height: 84px;
}
.site-nav .brand{ display: flex; align-items: center; gap: var(--space-2); }
.site-nav .brand img{ height: 34px; width: auto; }
.site-nav .brand span{ font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }

.site-nav .nav-links{ display: flex; align-items: center; gap: var(--space-5); }
.site-nav .nav-links a{
    font-size: .92rem; padding: var(--space-2) 0; position: relative;
    color: var(--text-muted-on-paper);
    transition: color .15s;
}
.site-nav .nav-links a:hover, .site-nav .nav-links a.is-active{ color: var(--ink); }
.site-nav .nav-links a.is-active::after{
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--gold);
}
.site-nav .nav-links .has-children{ position: relative; }
.site-nav .dropdown{
    position: absolute; top: 100%; left: 0; min-width: 220px;
    background: var(--paper); border: 1px solid var(--paper-line);
    padding: var(--space-2) 0; box-shadow: 0 12px 28px rgba(20,18,15,.12);
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: .15s;
}
.site-nav .has-children:hover .dropdown{ opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav .dropdown a{ display: block; padding: var(--space-2) var(--space-4); }
.site-nav .dropdown a:hover{ background: var(--paper-soft); }

.site-nav .cta{ display: flex; align-items: center; gap: var(--space-4); }
.nav-toggle{
    display: none; border: 1px solid var(--paper-line-strong); background: none;
    width: 40px; height: 40px; align-items: center; justify-content: center;
    border-radius: var(--radius);
}
.nav-toggle span{ display: block; width: 18px; height: 1px; background: var(--ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after{
    content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: var(--ink);
}
.nav-toggle span::before{ top: -6px; }
.nav-toggle span::after{ top: 6px; }

@media (max-width: 860px){
    .site-nav .nav-links{
        position: fixed; inset: 84px 0 0 0; background: var(--paper);
        flex-direction: column; align-items: flex-start; padding: var(--space-5) var(--gutter);
        gap: var(--space-4); display: none; overflow-y: auto;
    }
    .site-nav.is-open .nav-links{ display: flex; }
    .site-nav .dropdown{ position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; margin-top: var(--space-2); }
    .site-nav .has-children.is-open .dropdown{ display: block; }
    .nav-toggle{ display: inline-flex; }
    .site-nav .cta .btn span.btn-label-full{ display: none; }
}

/* ---------- 6. Hero band ---------- */
.hero{
    background: var(--ink); color: var(--text-on-ink);
    padding: var(--space-8) 0 var(--space-7);
    position: relative;
}
.hero .container{ position: relative; }
.hero h1{ color: var(--text-on-ink); }
.hero .breadcrumb{
    font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em;
    color: var(--text-faint-on-ink); margin-top: var(--space-3);
}
.hero .breadcrumb a{ color: var(--gold); }
.hero.compact{ padding: var(--space-6) 0; }

/* ---------- 7. Buttons ---------- */
.btn{
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-body); font-size: .92rem; font-weight: 600;
    padding: 13px 22px; border-radius: var(--radius);
    border: 1px solid transparent; transition: .15s;
    white-space: nowrap;
}
.btn .arrow{ transition: transform .15s; }
.btn:hover .arrow{ transform: translateX(3px); }
.btn-gold{ background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover{ background: var(--gold-deep); border-color: var(--gold-deep); }
.btn-line{ background: transparent; color: var(--ink); border-color: var(--paper-line-strong); }
.btn-line:hover{ border-color: var(--ink); }
.on-ink .btn-line{ color: var(--text-on-ink); border-color: var(--ink-line-strong); }
.on-ink .btn-line:hover{ border-color: var(--gold); color: var(--gold); }
.btn-ghost{ background: transparent; color: var(--gold-deep); padding-left: 0; padding-right: 0; }
.on-ink .btn-ghost{ color: var(--gold); }

/* ---------- 8. Data tiles / stat tiles ---------- */
.tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tiles-2col{ grid-template-columns: repeat(2, 1fr); }
.tile{
    border: 1px solid var(--paper-line);
    padding: var(--space-5);
    background: transparent;
    min-width: 0;
}
.tiles > .tile{ margin-left: -1px; margin-top: -1px; }
.on-ink .tile{ border-color: var(--ink-line); }
.tile .figure{ display: block; font-size: 2.1rem; color: var(--gold-deep); margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.on-ink .tile .figure{ color: var(--gold); }
@media (max-width: 480px){
    .tiles-2col{ grid-template-columns: 1fr; }
}
.tile h4{ margin-bottom: var(--space-2); }
.tile .icon-mark{
    width: 34px; height: 34px; border: 1px solid var(--paper-line-strong);
    display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3);
    color: var(--gold-deep);
}
.on-ink .tile .icon-mark{ border-color: var(--ink-line-strong); color: var(--gold); }

/* ---------- 9. Cards: pricing / exchange / testimonial / news ---------- */
.pricing-card{
    border: 1px solid var(--paper-line);
    padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.pricing-card .plan-name{ font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--text-faint-on-paper); }
.pricing-card .plan-min{ font-family: var(--font-mono); font-size: 2.1rem; color: var(--ink); overflow-wrap: anywhere; }
.pricing-card{ min-width: 0; }
.pricing-card .plan-min sup{ font-size: 1rem; top: -0.9em; }
.pricing-card ul{ display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.pricing-card li{
    font-size: .92rem; color: var(--text-muted-on-paper);
    padding-left: var(--space-4); position: relative;
}
.pricing-card li::before{ content: "—"; position: absolute; left: 0; color: var(--gold-deep); }
.pricing-card.is-featured{ border-color: var(--ink); background: var(--ink); color: var(--text-on-ink); }
.pricing-card.is-featured .plan-name{ color: var(--text-faint-on-ink); }
.pricing-card.is-featured .plan-min{ color: var(--gold); }
.pricing-card.is-featured li{ color: var(--text-muted-on-ink); }

.logo-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); }
.logo-grid a{ background: var(--paper); display: flex; align-items: center; justify-content: center; padding: var(--space-5) var(--space-4); transition: background .15s; }
.logo-grid a:hover{ background: var(--paper-soft); }
.logo-grid img{ max-height: 34px; width: auto; filter: grayscale(1); opacity: .75; transition: .15s; }
.logo-grid a:hover img{ filter: none; opacity: 1; }

.quote-card{ border-left: 2px solid var(--gold); padding-left: var(--space-5); }
.quote-card p{ font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--text-on-paper); }
.on-ink .quote-card p{ color: var(--text-on-ink); }
.quote-card .who{ font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted-on-paper); }
.on-ink .quote-card .who{ color: var(--text-muted-on-ink); }
.quote-card .stars{ color: var(--gold); font-size: .8rem; letter-spacing: .1em; margin-top: var(--space-2); }

.news-card{ display: flex; flex-direction: column; }
.news-card .thumb{ aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--paper-line); margin-bottom: var(--space-3); }
.news-card .thumb img{ width: 100%; height: 100%; object-fit: cover; }
.news-card .date{ font-family: var(--font-mono); font-size: .74rem; color: var(--gold-deep); letter-spacing: .06em; text-transform: uppercase; }
.news-card h4{ margin: var(--space-2) 0; }
.news-card .excerpt{ color: var(--text-muted-on-paper); font-size: .94rem; }

/* ---------- 10. Forms ---------- */
.field{ margin-bottom: var(--space-4); }
.field label{ display: block; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint-on-paper); margin-bottom: var(--space-2); }
.field input, .field textarea{
    width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--paper-line-strong);
    padding: 10px 2px; color: var(--text-on-paper); border-radius: 0;
}
.field textarea{ resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus{ outline: none; border-bottom-color: var(--gold-deep); }
.field input::placeholder, .field textarea::placeholder{ color: var(--text-faint-on-paper); }
.form-msg{ font-size: .92rem; margin-bottom: var(--space-4); }
.form-msg:not(:empty){ padding: var(--space-3); border: 1px solid var(--forest); background: var(--forest-tint); }
.form-msg.is-error{ border-color: #8A2E2E; background: rgba(138,46,46,.08); color: #8A2E2E; }

.check-field{ display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: .88rem; color: var(--text-muted-on-paper); }
.check-field input{ width: 16px; height: 16px; accent-color: var(--gold-deep); }
.check-field a{ color: var(--gold-deep); text-decoration: underline; }

/* ---------- 16. Auth (login / register) ---------- */
.auth-wrap{ max-width: 440px; margin: 0 auto; }
.auth-card{ border: 1px solid var(--paper-line); padding: var(--space-6) var(--space-5); }
.auth-card .btn{ width: 100%; justify-content: center; }
.auth-foot{ text-align: center; margin-top: var(--space-4); font-size: .9rem; color: var(--text-muted-on-paper); }
.auth-foot a{ color: var(--gold-deep); font-weight: 600; }
.field-note{ font-size: .84rem; color: var(--text-muted-on-paper); margin: -8px 0 var(--space-4); }

/* ---------- 11. Accordion (FAQ) ---------- */
.acc-item{ border-bottom: 1px solid var(--paper-line); }
.acc-item summary{
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-4) 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 500;
}
.acc-item summary::-webkit-details-marker{ display: none; }
.acc-item summary .mark{ font-family: var(--font-mono); color: var(--gold-deep); font-size: 1.1rem; flex: none; transition: transform .15s; }
.acc-item[open] summary .mark{ transform: rotate(45deg); }
.acc-item .acc-body{ padding: 0 0 var(--space-4); color: var(--text-muted-on-paper); max-width: 62ch; }

/* ---------- 12. Lists (clause rows, security lists) ---------- */
.clause-row{ display: grid; grid-template-columns: 1fr 3fr; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--paper-line); }
.clause-row:first-of-type{ border-top: none; }
.clause-row h4{ color: var(--gold-deep); }
@media (max-width: 700px){ .clause-row{ grid-template-columns: 1fr; gap: var(--space-2); } }

.dash-list li{ position: relative; padding-left: var(--space-4); margin-bottom: var(--space-2); color: var(--text-muted-on-paper); }
.dash-list li::before{ content: "–"; position: absolute; left: 0; color: var(--gold-deep); }
.on-ink .dash-list li{ color: var(--text-muted-on-ink); }

/* ---------- 13. Widget frame (market page) ---------- */
.widget-frame{ border: 1px solid var(--paper-line); padding: var(--space-4); }
.widget-frame + .widget-frame{ margin-top: var(--space-5); }

/* ---------- 14. Footer ---------- */
.site-footer{ background: var(--ink); color: var(--text-on-ink); padding: var(--space-7) 0 var(--space-4); }
.footer-top{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--ink-line); }
.footer-top .brand-col img{ height: 30px; margin-bottom: var(--space-3); }
.footer-top .brand-col p{ color: var(--text-muted-on-ink); max-width: 34ch; }
.footer-col h5{ font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-3); }
.footer-col li{ margin-bottom: var(--space-2); }
.footer-col a{ color: var(--text-muted-on-ink); }
.footer-col a:hover{ color: var(--paper); }
.footer-bottom{ display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-4); font-size: .82rem; color: var(--text-faint-on-ink); flex-wrap: wrap; gap: var(--space-3); }
.footer-bottom a{ color: var(--text-faint-on-ink); }
.footer-bottom a:hover{ color: var(--gold); }
.newsletter-form{ display: flex; border-bottom: 1px solid var(--ink-line-strong); }
.newsletter-form input{ flex: 1; background: none; border: none; padding: 12px 0; color: var(--text-on-ink); }
.newsletter-form input::placeholder{ color: var(--text-faint-on-ink); }
.newsletter-form button{ background: none; border: none; color: var(--gold); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 860px){
    .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
    .footer-top{ grid-template-columns: 1fr; }
}

/* ---------- 15. Utilities ---------- */
.text-center{ text-align: center; margin-left: auto; margin-right: auto; }
.mt-0{ margin-top: 0; } .mb-0{ margin-bottom: 0; }
.m-b30 { margin-bottom: var(--space-5); }
.stack{ display: flex; flex-direction: column; gap: var(--space-4); }
.row-actions{ display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.divider-dot::before{ content: "·"; margin: 0 var(--space-2); color: var(--text-faint-on-paper); }
.pagination{ display: flex; gap: var(--space-2); font-family: var(--font-mono); font-size: .85rem; }
.pagination a, .pagination span{ padding: var(--space-2) var(--space-3); border: 1px solid var(--paper-line); }
.pagination .is-active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

@media (max-width: 860px){
    :root{ --space-5: 20px; --space-6: 24px; --space-7: 40px; --space-8: 56px; }
    .band{ padding: var(--space-6) 0; }
    h1{ font-size: clamp(2.2rem, 9vw, 3rem); }
}