/* =========================================================================
   FBW CAPITAL — DESIGN SYSTEM
   Palette sampled directly from assets/images/logo.png
     background : #F7F1E7  (logo cream / ivory)
     green      : #073827  (logo wordmark "FB" + "CAPITAL")
     gold       : #C78C32  (logo "W" + arrow + tagline)
   ========================================================================= */

:root {
    /* --- Core brand (exact logo values) --- */
    --fbw-cream:        #F7F1E7;
    --fbw-green:        #073827;
    --fbw-gold:         #C78C32;

    /* --- Brand ramp --- */
    --fbw-green-900:    #042118;
    --fbw-green-800:    #073827;
    --fbw-green-700:    #0B4D35;
    --fbw-green-600:    #106245;
    --fbw-green-300:    #6E9C8A;

    --fbw-gold-700:     #9A6B22;
    --fbw-gold-600:     #B07C2A;
    --fbw-gold-500:     #C78C32;
    --fbw-gold-400:     #DBA854;
    --fbw-gold-200:     #EBD3A6;

    /* --- Surfaces (all derived from the logo cream) --- */
    --fbw-bg:           #F7F1E7;
    --fbw-bg-deep:      #F1E9DA;
    --fbw-surface:      #FFFDF9;
    --fbw-surface-alt:  #FBF6EE;
    --fbw-border:       #E3D8C4;
    --fbw-border-soft:  #EDE4D5;

    /* --- Text --- */
    --fbw-ink:          #14261F;
    --fbw-ink-soft:     #4A5A52;
    --fbw-ink-mute:     #77857D;
    --fbw-on-dark:      #F2EDE3;
    --fbw-on-dark-soft: #B9C7BF;

    /* --- Effects --- */
    --fbw-shadow-sm: 0 1px 2px rgba(7,56,39,.06), 0 2px 8px rgba(7,56,39,.05);
    --fbw-shadow-md: 0 4px 14px rgba(7,56,39,.08), 0 12px 32px rgba(7,56,39,.06);
    --fbw-shadow-lg: 0 10px 26px rgba(7,56,39,.10), 0 26px 60px rgba(7,56,39,.10);
    --fbw-ring:      0 0 0 3px rgba(199,140,50,.28);

    --fbw-r-sm: 8px;
    --fbw-r:    14px;
    --fbw-r-lg: 22px;
    --fbw-r-pill: 999px;

    --fbw-serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
    --fbw-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --fbw-maxw: 1200px;
    --fbw-gut:  clamp(1.15rem, 4vw, 2.5rem);
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fbw-sans);
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--fbw-ink);
    /* The logo cream is the page ground everywhere. */
    background-color: var(--fbw-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--fbw-green-700); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--fbw-gold-600); }

ul, ol { margin: 0 0 1.25rem; padding-left: 1.15rem; }
li { margin-bottom: .45rem; }

:focus-visible { outline: none; box-shadow: var(--fbw-ring); border-radius: var(--fbw-r-sm); }

/* =========================================================================
   TYPE
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fbw-serif);
    color: var(--fbw-green-800);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.012em;
    margin: 0 0 .85rem;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4.15rem); }
h2 { font-size: clamp(2rem, 4vw, 3.05rem); }
h3 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
h4 { font-size: clamp(1.18rem, 1.9vw, 1.4rem); font-family: var(--fbw-sans); font-weight: 700; letter-spacing: -.005em; }
h5 { font-size: 1.06rem; font-family: var(--fbw-sans); font-weight: 700; }
h6 { font-size: .95rem; font-family: var(--fbw-sans); font-weight: 700; }

p { margin: 0 0 1.15rem; color: var(--fbw-ink-soft); }
p:last-child { margin-bottom: 0; }

strong { color: var(--fbw-green-800); font-weight: 650; }

.fbw-lead {
    font-size: clamp(1.08rem, 1.75vw, 1.32rem);
    line-height: 1.62;
    color: var(--fbw-ink-soft);
}

.fbw-eyebrow {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--fbw-gold-600);
    margin-bottom: .9rem;
}
.fbw-eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px; height: 1px;
    background: var(--fbw-gold-500);
    vertical-align: middle;
    margin-right: .6rem;
}

.fbw-text-gold  { color: var(--fbw-gold-600); }
.fbw-text-green { color: var(--fbw-green-800); }
.fbw-center     { text-align: center; }
.fbw-measure    { max-width: 68ch; }
.fbw-measure-center { max-width: 68ch; margin-left: auto; margin-right: auto; }

/* =========================================================================
   LAYOUT
   ========================================================================= */

.fbw-container { width: 100%; max-width: var(--fbw-maxw); margin: 0 auto; padding: 0 var(--fbw-gut); }
.fbw-container-narrow { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 var(--fbw-gut); }

.fbw-section     { padding: clamp(4rem, 8vw, 7rem) 0; }
.fbw-section-sm  { padding: clamp(2.75rem, 5vw, 4.25rem) 0; }

.fbw-section-alt  { background: var(--fbw-bg-deep); }
.fbw-section-white{ background: var(--fbw-surface); }

.fbw-section-dark {
    background:
        radial-gradient(1100px 480px at 82% -12%, rgba(199,140,50,.20), transparent 62%),
        linear-gradient(165deg, var(--fbw-green-800) 0%, var(--fbw-green-900) 100%);
    color: var(--fbw-on-dark);
}
.fbw-section-dark h1, .fbw-section-dark h2,
.fbw-section-dark h3, .fbw-section-dark h4 { color: #FFFFFF; }
.fbw-section-dark p  { color: var(--fbw-on-dark-soft); }
.fbw-section-dark strong { color: #FFFFFF; }
.fbw-section-dark .fbw-eyebrow { color: var(--fbw-gold-400); }
.fbw-section-dark .fbw-eyebrow::before { background: var(--fbw-gold-400); }

.fbw-section-head { max-width: 760px; margin: 0 auto clamp(2.5rem, 4vw, 3.75rem); text-align: center; }
.fbw-section-head p { font-size: 1.08rem; }
.fbw-section-head--left { margin-left: 0; text-align: left; }

.fbw-grid { display: grid; gap: 1.55rem; }
.fbw-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.fbw-grid-3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.fbw-grid-4 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }

.fbw-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
@media (max-width: 880px) { .fbw-split { grid-template-columns: 1fr; } }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */

.fbw-topbar {
    background: var(--fbw-green-900);
    color: var(--fbw-on-dark-soft);
    font-size: .765rem;
    letter-spacing: .015em;
    padding: .5rem 0;
}
.fbw-topbar-inner {
    max-width: var(--fbw-maxw); margin: 0 auto; padding: 0 var(--fbw-gut);
    display: flex; align-items: center; justify-content: center;
    gap: .55rem; text-align: center;
}
.fbw-topbar strong { color: var(--fbw-gold-400); font-weight: 600; }

.fbw-header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(247,241,231,.88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.fbw-header.is-scrolled {
    background: rgba(247,241,231,.96);
    border-bottom-color: var(--fbw-border);
    box-shadow: 0 6px 24px rgba(7,56,39,.07);
}

.fbw-header-inner {
    max-width: var(--fbw-maxw); margin: 0 auto; padding: .7rem var(--fbw-gut);
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.fbw-logo { display: flex; align-items: center; flex: 0 0 auto; }
.fbw-logo img { height: 52px; width: auto; }

.fbw-nav { display: flex; align-items: center; gap: .35rem; }

.fbw-nav-link {
    position: relative;
    padding: .6rem .78rem;
    font-size: .905rem;
    font-weight: 550;
    color: var(--fbw-green-800);
    border-radius: var(--fbw-r-sm);
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
}
.fbw-nav-link:hover { color: var(--fbw-gold-600); background: rgba(199,140,50,.09); }
.fbw-nav-link.is-active { color: var(--fbw-gold-700); }
.fbw-nav-link.is-active::after {
    content: ""; position: absolute; left: .78rem; right: .78rem; bottom: .28rem;
    height: 2px; background: var(--fbw-gold-500); border-radius: 2px;
}

.fbw-drop { position: relative; }
.fbw-drop > .fbw-nav-link::after {
    content: "\25BE"; font-size: .68em; margin-left: .38rem; opacity: .65;
}
.fbw-drop-menu {
    position: absolute; top: calc(100% + .4rem); left: 0;
    min-width: 262px; padding: .5rem;
    background: var(--fbw-surface);
    border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r);
    box-shadow: var(--fbw-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.fbw-drop:hover .fbw-drop-menu,
.fbw-drop:focus-within .fbw-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.fbw-drop-item {
    display: block; padding: .6rem .8rem;
    font-size: .885rem; font-weight: 500; color: var(--fbw-ink);
    border-radius: var(--fbw-r-sm);
    transition: background .18s ease, color .18s ease;
}
.fbw-drop-item:hover { background: var(--fbw-bg-deep); color: var(--fbw-green-800); }
.fbw-drop-item span { display: block; font-size: .765rem; color: var(--fbw-ink-mute); font-weight: 400; margin-top: .1rem; }

.fbw-burger {
    display: none;
    width: 44px; height: 40px;
    background: transparent; border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r-sm); cursor: pointer;
    padding: 0; align-items: center; justify-content: center;
}
.fbw-burger span {
    display: block; width: 20px; height: 2px; background: var(--fbw-green-800);
    border-radius: 2px; position: relative; transition: background .2s ease;
}
.fbw-burger span::before, .fbw-burger span::after {
    content: ""; position: absolute; left: 0; width: 20px; height: 2px;
    background: var(--fbw-green-800); border-radius: 2px; transition: transform .25s ease;
}
.fbw-burger span::before { top: -6px; }
.fbw-burger span::after  { top: 6px; }
.fbw-burger.is-open span { background: transparent; }
.fbw-burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.fbw-burger.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
    .fbw-burger { display: inline-flex; }
    .fbw-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: .15rem;
        padding: 1rem var(--fbw-gut) 1.6rem;
        background: var(--fbw-surface);
        border-bottom: 1px solid var(--fbw-border);
        box-shadow: var(--fbw-shadow-lg);
        max-height: calc(100vh - 100px); overflow-y: auto;
        display: none;
    }
    .fbw-nav.is-open { display: flex; }
    .fbw-nav-link { padding: .75rem .5rem; font-size: 1rem; }
    .fbw-drop-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; border-left: 2px solid var(--fbw-border);
        border-radius: 0; margin: 0 0 .5rem .6rem; padding: 0 0 0 .5rem; min-width: 0;
    }
    .fbw-drop > .fbw-nav-link::after { content: ""; }
    .fbw-nav .fbw-btn { margin-top: .6rem; justify-content: center; }
}

/* =========================================================================
   BUTTONS
   ========================================================================= */

.fbw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1.7rem;
    font-family: var(--fbw-sans);
    font-size: .935rem; font-weight: 600; letter-spacing: .005em;
    border: 1px solid transparent; border-radius: var(--fbw-r-pill);
    cursor: pointer; white-space: nowrap;
    transition: transform .18s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.fbw-btn:hover { transform: translateY(-2px); }
.fbw-btn:active { transform: translateY(0); }

.fbw-btn-primary {
    background: var(--fbw-green-800); color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(7,56,39,.22);
}
.fbw-btn-primary:hover { background: var(--fbw-green-700); color: #FFFFFF; box-shadow: 0 8px 24px rgba(7,56,39,.28); }

.fbw-btn-gold {
    background: var(--fbw-gold-500); color: #2A1B04;
    box-shadow: 0 4px 14px rgba(199,140,50,.30);
}
.fbw-btn-gold:hover { background: var(--fbw-gold-400); color: #2A1B04; box-shadow: 0 8px 26px rgba(199,140,50,.38); }

.fbw-btn-outline {
    background: transparent; color: var(--fbw-green-800); border-color: var(--fbw-green-800);
}
.fbw-btn-outline:hover { background: var(--fbw-green-800); color: #FFFFFF; }

.fbw-btn-ghost {
    background: rgba(255,255,255,.10); color: #FFFFFF; border-color: rgba(255,255,255,.34);
}
.fbw-btn-ghost:hover { background: #FFFFFF; color: var(--fbw-green-800); border-color: #FFFFFF; }

.fbw-btn-lg { padding: 1.02rem 2.15rem; font-size: 1rem; }
.fbw-btn-sm { padding: .6rem 1.15rem; font-size: .845rem; }

.fbw-btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.fbw-btn-row--center { justify-content: center; }

/* =========================================================================
   HERO
   ========================================================================= */

.fbw-hero {
    position: relative;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 6rem);
    background:
        radial-gradient(760px 420px at 88% 8%, rgba(199,140,50,.16), transparent 62%),
        radial-gradient(620px 420px at 4% 96%, rgba(7,56,39,.07), transparent 60%),
        var(--fbw-bg);
    overflow: hidden;
}
.fbw-hero::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--fbw-border-soft);
}

.fbw-hero-grid {
    display: grid; grid-template-columns: 1.08fr .92fr;
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 940px) { .fbw-hero-grid { grid-template-columns: 1fr; } }

.fbw-hero h1 { margin-bottom: 1.1rem; }
.fbw-hero h1 em { font-style: normal; color: var(--fbw-gold-600); }

.fbw-hero-sub {
    font-size: clamp(1.1rem, 1.85vw, 1.36rem);
    line-height: 1.55; color: var(--fbw-green-700);
    font-weight: 500; margin-bottom: 1.15rem;
}
.fbw-hero p { max-width: 60ch; }
.fbw-hero .fbw-btn-row { margin-top: 1.9rem; }

.fbw-hero-note {
    margin-top: 1.6rem; font-size: .82rem; line-height: 1.6;
    color: var(--fbw-ink-mute); max-width: 52ch;
}

/* Hero side panel */
.fbw-hero-panel {
    position: relative;
    background: var(--fbw-surface);
    border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r-lg);
    padding: clamp(1.5rem, 3vw, 2.1rem);
    box-shadow: var(--fbw-shadow-lg);
}
.fbw-hero-panel::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--fbw-green-800), var(--fbw-gold-500));
    border-radius: var(--fbw-r-lg) var(--fbw-r-lg) 0 0;
}
.fbw-hero-panel h4 { margin-bottom: 1.15rem; }

.fbw-pill-list { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.fbw-pill-list li {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .72rem .9rem; margin: 0;
    background: var(--fbw-bg); border: 1px solid var(--fbw-border-soft);
    border-radius: var(--fbw-r-sm);
    font-size: .89rem; font-weight: 500; color: var(--fbw-ink);
}
.fbw-pill-list li::before {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: .58rem;
    border-radius: 50%; background: var(--fbw-gold-500);
}

/* =========================================================================
   PAGE HERO (inner pages)
   ========================================================================= */

.fbw-page-hero {
    position: relative;
    padding: clamp(3rem, 6vw, 4.75rem) 0 clamp(2.5rem, 5vw, 3.75rem);
    background:
        radial-gradient(760px 380px at 85% 0%, rgba(199,140,50,.18), transparent 62%),
        linear-gradient(160deg, var(--fbw-green-800) 0%, var(--fbw-green-900) 100%);
    color: var(--fbw-on-dark);
}
.fbw-page-hero h1 { color: #FFFFFF; margin-bottom: .8rem; }
.fbw-page-hero p  { color: var(--fbw-on-dark-soft); max-width: 66ch; font-size: 1.08rem; }
.fbw-page-hero .fbw-eyebrow { color: var(--fbw-gold-400); }
.fbw-page-hero .fbw-eyebrow::before { background: var(--fbw-gold-400); }
.fbw-page-hero-sub {
    font-family: var(--fbw-serif); font-size: clamp(1.2rem, 2.2vw, 1.65rem);
    color: var(--fbw-gold-400); margin-bottom: 1rem;
}

/* =========================================================================
   CARDS
   ========================================================================= */

.fbw-card {
    display: flex;
    flex-direction: column;
    background: var(--fbw-surface);
    border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r);
    padding: clamp(1.4rem, 2.6vw, 1.95rem);
    box-shadow: var(--fbw-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fbw-card:hover {
    transform: translateY(-4px);
    border-color: var(--fbw-gold-200);
    box-shadow: var(--fbw-shadow-md);
}
.fbw-card h3, .fbw-card h4 { margin-bottom: .6rem; }
.fbw-card p { font-size: .945rem; }
.fbw-card > :last-child { margin-bottom: 0; }
/* Push a card's trailing button to the bottom so buttons line up across a row. */
.fbw-card > .fbw-btn:last-child { margin-top: auto; align-self: flex-start; }
.fbw-card > .fbw-btn:not(:last-child) { align-self: flex-start; }

.fbw-card-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: 1.05rem;
    font-family: var(--fbw-serif); font-size: 1.25rem; font-weight: 600;
    color: var(--fbw-gold-600);
    background: rgba(199,140,50,.12);
    border: 1px solid rgba(199,140,50,.30);
    border-radius: 50%;
}

.fbw-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; margin-bottom: 1.1rem;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--fbw-green-800), var(--fbw-green-600));
    color: var(--fbw-gold-400);
}
.fbw-card-icon svg { width: 24px; height: 24px; }

.fbw-card-dark {
    background: linear-gradient(160deg, var(--fbw-green-800), var(--fbw-green-900));
    border-color: transparent; color: var(--fbw-on-dark);
}
.fbw-card-dark h3, .fbw-card-dark h4 { color: #FFFFFF; }
.fbw-card-dark p { color: var(--fbw-on-dark-soft); }

.fbw-card-gold {
    background: linear-gradient(150deg, #FDF6E9, var(--fbw-surface));
    border-color: var(--fbw-gold-200);
}

/* Feature list card */
.fbw-check-list { list-style: none; margin: 0; padding: 0; }
.fbw-check-list li {
    position: relative; padding-left: 1.85rem; margin-bottom: .68rem;
    color: var(--fbw-ink-soft); font-size: .95rem;
}
.fbw-check-list li::before {
    content: ""; position: absolute; left: 0; top: .5rem;
    width: 16px; height: 9px;
    border-left: 2px solid var(--fbw-gold-500);
    border-bottom: 2px solid var(--fbw-gold-500);
    transform: rotate(-45deg);
}
.fbw-section-dark .fbw-check-list li { color: var(--fbw-on-dark-soft); }
.fbw-section-dark .fbw-check-list li::before { border-color: var(--fbw-gold-400); }

.fbw-x-list { list-style: none; margin: 0; padding: 0; }
.fbw-x-list li {
    position: relative; padding-left: 1.75rem; margin-bottom: .62rem;
    color: var(--fbw-ink-soft); font-size: .95rem;
}
.fbw-x-list li::before {
    content: "\2715"; position: absolute; left: 0; top: -.05rem;
    color: #A8402F; font-weight: 700; font-size: .92rem;
}

/* =========================================================================
   STEPS
   ========================================================================= */

.fbw-steps { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.fbw-step {
    position: relative;
    background: var(--fbw-surface);
    border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r);
    padding: 1.7rem 1.5rem 1.5rem;
    box-shadow: var(--fbw-shadow-sm);
}
.fbw-step-badge {
    display: inline-block; margin-bottom: .85rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--fbw-gold-700);
    background: rgba(199,140,50,.13);
    border-radius: var(--fbw-r-pill);
    padding: .3rem .78rem;
}
.fbw-step h4 { margin-bottom: .5rem; font-size: 1.08rem; }
.fbw-step p  { font-size: .925rem; margin: 0; }

/* =========================================================================
   FLOW DIAGRAM (How money flows)
   ========================================================================= */

.fbw-flow { max-width: 780px; margin: 0 auto; }

.fbw-flow-node {
    position: relative;
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.35rem;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(235,211,166,.28);
    border-radius: var(--fbw-r);
}
.fbw-flow-node + .fbw-flow-node { margin-top: 2.35rem; }
.fbw-flow-node + .fbw-flow-node::before {
    content: ""; position: absolute; left: 50%; top: -2.35rem;
    width: 2px; height: 2.35rem;
    background: linear-gradient(180deg, rgba(199,140,50,.15), var(--fbw-gold-500));
    transform: translateX(-50%);
}
.fbw-flow-node + .fbw-flow-node::after {
    content: ""; position: absolute; left: 50%; top: -.72rem;
    width: 0; height: 0; transform: translateX(-50%);
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 8px solid var(--fbw-gold-500);
}
.fbw-flow-index {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    font-size: .82rem; font-weight: 700;
    color: var(--fbw-green-900); background: var(--fbw-gold-400);
}
.fbw-flow-body strong {
    display: block; color: #FFFFFF; font-size: .99rem; font-weight: 650; letter-spacing: .01em;
}
.fbw-flow-body span { display: block; font-size: .845rem; color: var(--fbw-on-dark-soft); margin-top: .12rem; }

.fbw-flow-node--accent {
    background: rgba(199,140,50,.13);
    border-color: rgba(199,140,50,.5);
}

/* =========================================================================
   TECH STACK
   ========================================================================= */

.fbw-stack { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fbw-stack-item {
    text-align: center; padding: 1.65rem 1.15rem;
    background: var(--fbw-surface);
    border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r);
    transition: transform .25s ease, border-color .25s ease;
}
.fbw-stack-item:hover { transform: translateY(-4px); border-color: var(--fbw-gold-200); }
.fbw-stack-item h5 { color: var(--fbw-green-800); margin-bottom: .35rem; }
.fbw-stack-item p  { font-size: .865rem; margin: 0; }
.fbw-stack-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--fbw-gold-500); margin: 0 auto .9rem;
    box-shadow: 0 0 0 5px rgba(199,140,50,.14);
}

/* =========================================================================
   STAT STRIP
   ========================================================================= */

.fbw-stats { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fbw-stat {
    padding: 1.5rem 1.3rem; text-align: center;
    border: 1px solid rgba(235,211,166,.26);
    border-radius: var(--fbw-r);
    background: rgba(255,255,255,.05);
}
.fbw-stat strong {
    display: block; font-family: var(--fbw-serif);
    font-size: clamp(1.85rem, 3.4vw, 2.5rem); font-weight: 600;
    color: var(--fbw-gold-400); line-height: 1.1;
}
.fbw-stat span { display: block; margin-top: .38rem; font-size: .85rem; color: var(--fbw-on-dark-soft); }

/* =========================================================================
   ACCORDION / FAQ
   ========================================================================= */

.fbw-accordion { display: flex; flex-direction: column; gap: .8rem; }

.fbw-acc-item {
    background: var(--fbw-surface);
    border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r);
    overflow: hidden;
    transition: border-color .22s ease, box-shadow .22s ease;
}
.fbw-acc-item.is-open { border-color: var(--fbw-gold-200); box-shadow: var(--fbw-shadow-sm); }

.fbw-acc-q {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; margin: 0; padding: 1.15rem 1.4rem;
    background: transparent; border: 0; cursor: pointer; text-align: left;
    font-family: var(--fbw-sans); font-size: 1.01rem; font-weight: 600;
    color: var(--fbw-green-800); line-height: 1.45;
}
.fbw-acc-q::after {
    content: "+"; flex: 0 0 auto;
    font-size: 1.35rem; font-weight: 400; color: var(--fbw-gold-600);
    transition: transform .25s ease;
}
.fbw-acc-item.is-open .fbw-acc-q::after { transform: rotate(45deg); }

.fbw-acc-a { display: none; padding: 0 1.4rem 1.35rem; }
.fbw-acc-item.is-open .fbw-acc-a { display: block; }
.fbw-acc-a p { font-size: .955rem; }
.fbw-acc-a > :last-child { margin-bottom: 0; }

/* =========================================================================
   NOTICES
   ========================================================================= */

.fbw-notice {
    display: block;
    padding: 1.25rem 1.45rem;
    background: var(--fbw-surface-alt);
    border: 1px solid var(--fbw-border);
    border-left: 4px solid var(--fbw-gold-500);
    border-radius: var(--fbw-r-sm);
    font-size: .93rem; line-height: 1.65; color: var(--fbw-ink-soft);
}
.fbw-notice strong { color: var(--fbw-green-800); }
.fbw-notice > :last-child { margin-bottom: 0; }

.fbw-notice-risk {
    background: #FCF3EF;
    border-color: #EBD5CB;
    border-left-color: #A8402F;
}
.fbw-notice-risk strong { color: #8C3324; }

.fbw-microrisk {
    font-size: .795rem; line-height: 1.6; color: var(--fbw-ink-mute);
    padding-top: 1.1rem; margin-top: 1.6rem;
    border-top: 1px solid var(--fbw-border-soft);
}

/* =========================================================================
   TABLES
   ========================================================================= */

.fbw-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r);
    background: var(--fbw-surface);
    -webkit-overflow-scrolling: touch;
}
.fbw-table { width: 100%; border-collapse: collapse; min-width: 540px; font-size: .93rem; }
.fbw-table th {
    text-align: left; padding: .95rem 1.15rem;
    background: var(--fbw-green-800); color: #FFFFFF;
    font-weight: 600; font-size: .81rem; letter-spacing: .09em; text-transform: uppercase;
}
.fbw-table td { padding: .9rem 1.15rem; border-top: 1px solid var(--fbw-border-soft); color: var(--fbw-ink-soft); }
.fbw-table tbody tr:nth-child(even) { background: var(--fbw-surface-alt); }
.fbw-table td strong { color: var(--fbw-green-800); }

/* =========================================================================
   CTA BAND
   ========================================================================= */

.fbw-cta {
    position: relative;
    padding: clamp(3.25rem, 6vw, 5rem) 0;
    background:
        radial-gradient(680px 340px at 50% 0%, rgba(199,140,50,.22), transparent 65%),
        linear-gradient(160deg, var(--fbw-green-800), var(--fbw-green-900));
    text-align: center; color: var(--fbw-on-dark);
}
.fbw-cta h2 { color: #FFFFFF; margin-bottom: .85rem; }
.fbw-cta p  { color: var(--fbw-on-dark-soft); max-width: 62ch; margin: 0 auto 1.9rem; font-size: 1.06rem; }

/* =========================================================================
   FORMS
   ========================================================================= */

.fbw-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .fbw-form-grid { grid-template-columns: 1fr; } }
.fbw-form-full { grid-column: 1 / -1; }

.fbw-field { display: flex; flex-direction: column; gap: .4rem; }
.fbw-label { font-size: .8rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fbw-green-800); }

.fbw-input, .fbw-textarea, .fbw-select,
input.fbw-input, textarea.fbw-textarea, select.fbw-select {
    width: 100%;
    padding: .82rem 1rem;
    font-family: var(--fbw-sans); font-size: .95rem; color: var(--fbw-ink);
    background: var(--fbw-surface);
    border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.fbw-input:focus, .fbw-textarea:focus, .fbw-select:focus {
    outline: none; border-color: var(--fbw-gold-500); box-shadow: var(--fbw-ring);
}
.fbw-textarea { min-height: 155px; resize: vertical; }

.fbw-formmsg {
    display: block; margin-top: 1rem; padding: .85rem 1.1rem;
    border-radius: var(--fbw-r-sm); font-size: .92rem;
    background: #EAF4EE; border: 1px solid #BFDDCC; color: #1B5637;
}
.fbw-formmsg:empty { display: none; }
.fbw-formmsg--error { background: #FCF0ED; border-color: #EBCBC2; color: #8C3324; }

/* legacy hooks kept so existing code-behind CssClass values still render */
.mw-formmsg { display: block; margin-top: 1rem; padding: .85rem 1.1rem; border-radius: 8px; font-size: .92rem; background: #EAF4EE; border: 1px solid #BFDDCC; color: #1B5637; }
.mw-formmsg:empty { display: none; }
.mw-formmsg--error { background: #FCF0ED; border-color: #EBCBC2; color: #8C3324; }

/* =========================================================================
   CONTACT
   ========================================================================= */

.fbw-contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .fbw-contact-grid { grid-template-columns: 1fr; } }

.fbw-contact-block { padding-bottom: 1.15rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--fbw-border-soft); }
.fbw-contact-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.fbw-contact-block h5 { color: var(--fbw-green-800); margin-bottom: .25rem; }
.fbw-contact-block p  { font-size: .93rem; margin: 0; }
.fbw-contact-block a  { color: var(--fbw-gold-700); font-weight: 550; }

/* =========================================================================
   PROSE (legal / long form)
   ========================================================================= */

.fbw-prose { max-width: 78ch; }
.fbw-prose h2 { margin-top: 2.75rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.fbw-prose h2:first-child { margin-top: 0; }
.fbw-prose h3 { margin-top: 2rem; font-size: 1.28rem; font-family: var(--fbw-sans); font-weight: 700; }
.fbw-prose li { color: var(--fbw-ink-soft); }

/* =========================================================================
   FOOTER
   ========================================================================= */

.fbw-footer {
    background: linear-gradient(175deg, var(--fbw-green-800), var(--fbw-green-900));
    color: var(--fbw-on-dark-soft);
    padding: clamp(3rem, 6vw, 4.5rem) 0 0;
    font-size: .92rem;
}
.fbw-footer-main {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-bottom: 2.75rem;
}
@media (max-width: 900px) { .fbw-footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fbw-footer-main { grid-template-columns: 1fr; } }

.fbw-footer-logo { margin-bottom: 1.1rem; }
.fbw-footer-logo img {
    height: 74px; width: auto;
    background: var(--fbw-cream);
    padding: .55rem .7rem; border-radius: var(--fbw-r-sm);
}
.fbw-footer-brand .fbw-footer-tagline {
    font-family: var(--fbw-serif); font-size: 1.24rem;
    color: var(--fbw-gold-400); margin-bottom: .5rem;
}
.fbw-footer-brand p { color: var(--fbw-on-dark-soft); font-size: .9rem; max-width: 40ch; }

.fbw-footer-col h4 {
    color: #FFFFFF; font-size: .8rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.05rem;
}
.fbw-footer-links { list-style: none; margin: 0; padding: 0; }
.fbw-footer-links li { margin-bottom: .58rem; }
.fbw-footer-links a { color: var(--fbw-on-dark-soft); font-size: .9rem; }
.fbw-footer-links a:hover { color: var(--fbw-gold-400); }

.fbw-footer-notice {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255,255,255,.10);
    font-size: .815rem; line-height: 1.7; color: #93A69C;
}
.fbw-footer-notice strong { color: var(--fbw-gold-400); }

.fbw-footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .85rem; padding: 1.15rem 0 1.6rem;
    border-top: 1px solid rgba(255,255,255,.10);
    font-size: .83rem; color: #93A69C;
}
.fbw-footer-bottom a { color: #93A69C; }
.fbw-footer-bottom a:hover { color: var(--fbw-gold-400); }

/* =========================================================================
   UTILITIES / MOTION
   ========================================================================= */

.fbw-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.fbw-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .fbw-reveal { opacity: 1; transform: none; }
}

.fbw-mt-0 { margin-top: 0; }
.fbw-mt-2 { margin-top: 2rem; }
.fbw-mt-3 { margin-top: 3rem; }
.fbw-mb-2 { margin-bottom: 2rem; }
.fbw-hr { height: 1px; background: var(--fbw-border); border: 0; margin: 2.5rem 0; }

.fbw-skip {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    padding: .75rem 1.25rem; background: var(--fbw-green-800); color: #fff;
    border-radius: 0 0 var(--fbw-r-sm) 0;
}
.fbw-skip:focus { left: 0; color: #fff; }

/* =========================================================================
   AUTH (login / forgot / join)
   ========================================================================= */

.fbw-auth-wrap { background: var(--fbw-bg-deep); }
.fbw-auth { max-width: 520px; margin: 0 auto; }
.fbw-auth .fbw-card:hover { transform: none; }
.fbw-auth .fbw-field + .fbw-field { margin-top: 1rem; }

.fbw-auth-links {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin: 1.1rem 0 1.35rem;
    font-size: .875rem; color: var(--fbw-ink-soft);
}
.fbw-auth-links label { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.fbw-auth-links a { color: var(--fbw-gold-700); font-weight: 550; }

.fbw-auth-submit { width: 100%; }

.fbw-auth-foot {
    margin-top: 1.6rem; padding-top: 1.35rem;
    border-top: 1px solid var(--fbw-border-soft); text-align: center;
}
.fbw-auth-foot p { font-size: .9rem; margin-bottom: .8rem; }

/* =========================================================================
   LEGACY COMPATIBILITY LAYER
   Registration / password pages still carry the previous mw-* class names and
   contain hundreds of server controls. Rather than rewrite that markup, these
   rules re-skin those classes in the FBW palette so every page shares one theme.
   ========================================================================= */

.mw-auth { padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: var(--fbw-bg-deep); }
.mw-auth .container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 var(--fbw-gut); }

.mw-auth__card {
    max-width: 520px; margin: 0 auto;
    background: var(--fbw-surface);
    border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r);
    box-shadow: var(--fbw-shadow-md);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}
.mw-auth__card--wide { max-width: 880px; }

.mw-auth__head { text-align: center; margin-bottom: 1.6rem; }
.mw-auth__head h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom: .5rem; }
.mw-auth__head p { font-size: .95rem; }

.mw-auth__divider {
    height: 1px; background: var(--fbw-border-soft);
    border: 0; margin: 1.75rem 0;
}

.mw-auth__foot {
    margin-top: 1.6rem; padding-top: 1.35rem;
    border-top: 1px solid var(--fbw-border-soft); text-align: center;
}
.mw-auth__foot p { font-size: .9rem; margin-bottom: .8rem; }

.mw-auth__note {
    display: block; max-width: 640px; margin: 1.75rem auto 0;
    padding: 1.15rem 1.35rem;
    background: var(--fbw-surface-alt);
    border: 1px solid var(--fbw-border);
    border-left: 4px solid var(--fbw-gold-500);
    border-radius: var(--fbw-r-sm);
    font-size: .875rem; line-height: 1.65; color: var(--fbw-ink-soft);
}
.mw-auth__note p { font-size: .875rem; margin: 0; }
.mw-auth__note i { color: var(--fbw-gold-600); margin-right: .4rem; }

.mw-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.mw-field label {
    font-size: .8rem; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--fbw-green-800);
}
.mw-field input[type="text"], .mw-field input[type="password"], .mw-field input[type="email"],
.mw-field input[type="tel"], .mw-field input[type="number"], .mw-field select, .mw-field textarea,
.mw-auth .form-control {
    width: 100%; padding: .82rem 1rem;
    font-family: var(--fbw-sans); font-size: .95rem; color: var(--fbw-ink);
    background: var(--fbw-surface);
    border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mw-field input:focus, .mw-field select:focus, .mw-field textarea:focus, .mw-auth .form-control:focus {
    outline: none; border-color: var(--fbw-gold-500); box-shadow: var(--fbw-ring);
}

.mw-hint { font-size: .8rem; color: var(--fbw-ink-mute); }

.mw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1.7rem;
    font-family: var(--fbw-sans); font-size: .935rem; font-weight: 600;
    background: var(--fbw-green-800); color: #FFFFFF;
    border: 1px solid transparent; border-radius: var(--fbw-r-pill);
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(7,56,39,.22);
    transition: transform .18s ease, background .22s ease, box-shadow .22s ease, color .22s ease;
}
.mw-btn:hover { transform: translateY(-2px); background: var(--fbw-green-700); color: #FFFFFF; }
.mw-btn--lg { padding: 1.02rem 2.15rem; font-size: 1rem; width: 100%; }
.mw-btn--ghost {
    background: transparent; color: var(--fbw-green-800);
    border-color: var(--fbw-green-800); box-shadow: none;
}
.mw-btn--ghost:hover { background: var(--fbw-green-800); color: #FFFFFF; }
.mw-btns { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

.mw-notice {
    padding: 1.15rem 1.35rem; margin: 1.25rem 0;
    background: var(--fbw-surface-alt);
    border: 1px solid var(--fbw-border);
    border-left: 4px solid var(--fbw-gold-500);
    border-radius: var(--fbw-r-sm);
    font-size: .9rem; line-height: 1.65; color: var(--fbw-ink-soft);
}
.mw-notice strong { color: var(--fbw-green-800); }

.mw-panel {
    background: var(--fbw-surface);
    border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-bottom: 1.25rem;
}
.mw-panel__title {
    font-family: var(--fbw-sans); font-size: 1.05rem; font-weight: 700;
    color: var(--fbw-green-800); margin-bottom: .85rem;
}

.mw-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin: 0 auto 1rem;
    border-radius: 50%; color: var(--fbw-gold-400);
    background: linear-gradient(140deg, var(--fbw-green-800), var(--fbw-green-600));
}

.mw-checklist { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.mw-checklist li {
    position: relative; padding-left: 1.85rem; margin-bottom: .68rem;
    color: var(--fbw-ink-soft); font-size: .95rem;
}
.mw-checklist li::before {
    content: ""; position: absolute; left: 0; top: .5rem;
    width: 16px; height: 9px;
    border-left: 2px solid var(--fbw-gold-500);
    border-bottom: 2px solid var(--fbw-gold-500);
    transform: rotate(-45deg);
}

.mw-table-wrap {
    overflow-x: auto; border: 1px solid var(--fbw-border);
    border-radius: var(--fbw-r); background: var(--fbw-surface);
}
.mw-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.mw-table th {
    text-align: left; padding: .95rem 1.15rem;
    background: var(--fbw-green-800); color: #FFFFFF;
    font-weight: 600; font-size: .81rem; letter-spacing: .09em; text-transform: uppercase;
}
.mw-table td { padding: .9rem 1.15rem; border-top: 1px solid var(--fbw-border-soft); color: var(--fbw-ink-soft); }
.mw-table tbody tr:nth-child(even) { background: var(--fbw-surface-alt); }

.mw-mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-size: .9em; }
.mw-text-gold { color: var(--fbw-gold-600); }
.mw-mt-1 { margin-top: 1rem; }
.mw-mt-2 { margin-top: 2rem; }
.mw-mt-3 { margin-top: 3rem; }

/* Minimal grid shim — these pages used Bootstrap's row/col-md-6 only. */
.mw-auth .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
.mw-auth .row > .col-md-6 { min-width: 0; }
@media (max-width: 700px) { .mw-auth .row { grid-template-columns: 1fr; } }

/* Superadmin sign-in — the remaining mw-* classes on that standalone page. */
.mw-auth--bare { min-height: 100vh; display: flex; align-items: center; }
.mw-auth__brand {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; max-width: 520px; margin: 0 auto 1.35rem;
}
.mw-logo { display: inline-flex; align-items: center; }
.mw-logo__img { height: 56px; width: auto; }
.mw-auth__badge {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .38rem .85rem;
    background: var(--fbw-green-800); color: var(--fbw-gold-200);
    border-radius: var(--fbw-r-pill);
    font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.mw-auth__msg {
    display: flex; align-items: flex-start; gap: .6rem;
    margin-bottom: 1.1rem; padding: .8rem 1rem;
    background: #FCF0ED; border: 1px solid #EBCBC2; border-radius: var(--fbw-r-sm);
    color: #8C3324; font-size: .9rem;
}
.mw-input-icon { position: relative; }
.mw-input-icon > i {
    position: absolute; top: 50%; right: .9rem; transform: translateY(-50%);
    color: var(--fbw-ink-mute); font-size: .9rem; pointer-events: none;
}
.mw-input-icon input { padding-right: 2.4rem !important; }
.mw-auth__back {
    display: block; max-width: 520px; margin: 1.35rem auto 0;
    text-align: center; font-size: .875rem; color: var(--fbw-ink-mute);
}
.mw-auth__back:hover { color: var(--fbw-gold-700); }
