/* ============================================================
   FINANCIAL FREEDOM — concept 05
   Theme: gold (#C49B47) · emerald (#2E5E4E) · ledger ink (#1B2D44)
   · cream (#F2EAD3) · copper (#8B5A2B)
   ============================================================ */

.page-financial-freedom {
    --ff-cream:    #F2EAD3;
    --ff-cream-2:  #EADFC2;
    --ff-gold:     #C49B47;
    --ff-gold-d:   #A07F2F;
    --ff-emerald:  #2E5E4E;
    --ff-emerald-d:#1F4337;
    --ff-ledger:   #1B2D44;
    --ff-copper:   #8B5A2B;
    --ff-rose:     #9C2A2A;
    --ff-ink:      #1A1410;
    --ff-mute:     #6E5F46;

    /* override globals so primary buttons / accents adopt gold */
    --c-gold:    var(--ff-gold);
    --c-bg:      var(--ff-cream);
    --c-ink:     var(--ff-ink);
    --c-mute:    var(--ff-mute);
    --c-accent:  var(--ff-emerald);

    background: var(--ff-cream);
    color: var(--ff-ink);
}

[data-theme="dark"].page-financial-freedom,
[data-theme="dark"] .page-financial-freedom {
    --ff-cream:    #14110B;
    --ff-cream-2:  #1C1810;
    --ff-ink:      #EFE6CF;
    --ff-mute:     #B7A98A;
    /* lift the locked dark-tone "text" variables to lighter cousins so every
       text rule using them reads on dark backgrounds. Decorative uses
       (top borders, bar fills, badge backgrounds with white text) become
       slightly brighter — which actually helps in dark mode. */
    --ff-ledger:   #F1E5C4;   /* dark blue → cream */
    --ff-emerald:  #5DA88E;   /* dark green → softer emerald */
    --ff-emerald-d:#7FC3A7;
    --ff-copper:   #D4915F;   /* dark brown → lighter copper */
    --ff-gold-d:   #D4B05F;   /* dark gold → brighter gold */
    --ff-rose:     #D9534F;   /* dark crimson → brighter rose */
    --c-bg:        #14110B;
    --c-ink:       #EFE6CF;
    --c-mute:      #B7A98A;
    background: #14110B;
    color: #EFE6CF;
}

/* shared building blocks --------------------------------- */
.ff-section {
    padding: var(--s-10, 4rem) 0;
    position: relative;
}
.ff-section-head {
    max-width: 820px;
    margin: 0 auto var(--s-7, 2.5rem);
    text-align: center;
}
.ff-eyebrow {
    font-family: var(--f-mono, "JetBrains Mono", monospace);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ff-copper);
    margin-bottom: var(--s-3, 0.75rem);
}
.ff-h2 {
    font-family: var(--f-serif, "Cormorant Garamond", serif);
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.2;
    color: var(--ff-ledger);
    margin-bottom: var(--s-4, 1rem);
    font-weight: 600;
}
.ff-h2 em {
    font-style: italic;
    color: var(--ff-gold-d);
    font-weight: 500;
}
.ff-sub {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ff-mute);
    max-width: 70ch;
    margin: 0 auto;
}
.ff-sub em { color: var(--ff-emerald); font-style: italic; }
.ff-data {
    font-family: var(--f-mono, "JetBrains Mono", monospace);
    font-feature-settings: "tnum";
    letter-spacing: 0.01em;
}
.container.narrow { max-width: 800px; }

[data-theme="dark"] .ff-h2 { color: #F1E5C4; }
[data-theme="dark"] .ff-h2 em { color: var(--ff-gold); }

/* ============================================================
   1. HERO
   ============================================================ */
.ff-hero {
    position: relative;
    min-height: 78vh;
    padding: var(--s-12, 5rem) 0 var(--s-10, 4rem);
    background: linear-gradient(180deg, var(--ff-cream) 0%, var(--ff-cream-2) 100%);
    overflow: hidden;
}
.ff-hero-canvas {
    position: absolute; inset: 0;
    color: var(--ff-ledger);
    pointer-events: none;
}
.ff-ledger {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0.6;
}
.ff-coins {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 230px;
    height: 270px;
    opacity: 0.85;
    animation: ffCoinFloat 9s ease-in-out infinite;
}
.ff-coin-tree path,
.ff-coin-tree + g circle {
    transform-origin: 100px 100px;
    animation: ffTreeGrow 6s ease-out forwards;
}
@keyframes ffCoinFloat {
    0%, 100% { transform: translateY(-50%); }
    50%      { transform: translateY(calc(-50% - 8px)); }
}
@keyframes ffTreeGrow {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 0.9; transform: scale(1); }
}

.ff-hero-content {
    position: relative;
    z-index: 1;
    text-align: left;
    max-width: 720px;
}
.ff-hero-title {
    font-family: var(--f-serif, "Cormorant Garamond", serif);
    font-size: clamp(2.4rem, 5.6vw, 4.6rem);
    line-height: 1.05;
    color: var(--ff-ledger);
    margin: var(--s-4, 1rem) 0;
    font-weight: 600;
}
.ff-hero-title span,
.ff-hero-title em {
    display: block;
}
.ff-hero-title em {
    font-style: italic;
    color: var(--ff-gold-d);
    font-weight: 500;
    padding-left: 1.4em;
}
.ff-hero-line-3 { padding-left: 0.4em; }
.ff-hero-sub,
.ff-hero-promise {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--ff-mute);
    margin-bottom: var(--s-4, 1rem);
    max-width: 60ch;
}
.ff-hero-sub b { color: var(--ff-ledger); font-weight: 600; }
.ff-hero-sub em, .ff-hero-promise em { color: var(--ff-emerald); font-style: italic; }

.ff-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3, 0.75rem);
    margin-top: var(--s-6, 1.5rem);
}

[data-theme="dark"] .ff-hero { background: linear-gradient(180deg, #14110B 0%, #1C1810 100%); }
[data-theme="dark"] .ff-hero-title { color: #F1E5C4; }
[data-theme="dark"] .ff-hero-title em { color: var(--ff-gold); }

/* ============================================================
   2. THREE FORMS OF INCOME
   ============================================================ */
.ff-incomes { background: var(--ff-cream-2); }
[data-theme="dark"] .ff-incomes { background: #1C1810; }

.ff-income-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5, 1.25rem);
    max-width: 1280px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .ff-income-grid { grid-template-columns: 1fr; }
}
.ff-income-card {
    background: var(--ff-cream);
    border: 1px solid rgba(196, 155, 71, 0.3);
    padding: var(--s-6, 1.5rem);
    border-radius: 4px;
    position: relative;
    box-shadow: 0 2px 12px rgba(27, 45, 68, 0.06);
}
.ff-income-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--ff-gold);
}
.ff-income-active::before    { background: var(--ff-copper); }
.ff-income-passive::before   { background: var(--ff-emerald); }
.ff-income-portfolio::before { background: var(--ff-gold); }

.ff-income-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ff-copper);
    margin-bottom: var(--s-2, 0.5rem);
}
.ff-income-card h3 {
    font-family: var(--f-serif, serif);
    font-size: 1.6rem;
    color: var(--ff-ledger);
    margin-bottom: var(--s-3, 0.75rem);
}
.ff-income-eg {
    font-size: 0.92rem;
    color: var(--ff-emerald);
    font-style: italic;
    margin-bottom: var(--s-4, 1rem);
}
.ff-income-card p {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--ff-mute);
    margin-bottom: var(--s-3, 0.75rem);
}
.ff-income-card p em { color: var(--ff-ledger); font-style: italic; }
.ff-income-rule {
    margin-top: var(--s-4, 1rem) !important;
    padding-top: var(--s-3, 0.75rem);
    border-top: 1px dashed rgba(196, 155, 71, 0.4);
    color: var(--ff-ledger) !important;
}
.ff-income-rule b { color: var(--ff-gold-d); }

[data-theme="dark"] .ff-income-card { background: #1A1611; border-color: rgba(196, 155, 71, 0.25); }
[data-theme="dark"] .ff-income-card h3 { color: #F1E5C4; }
[data-theme="dark"] .ff-income-card p em { color: #F1E5C4; }
[data-theme="dark"] .ff-income-rule { color: #F1E5C4 !important; }

/* ============================================================
   CURRENCY PICKER (used by compound + bad-habit + time)
   ============================================================ */
.ff-currency-row {
    max-width: 1180px;
    margin: 0 auto var(--s-5, 1.25rem);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3, 0.75rem);
    padding: var(--s-3, 0.75rem) var(--s-4, 1rem);
    background: var(--ff-cream-2);
    border: 1px solid rgba(196, 155, 71, 0.4);
    border-left: 3px solid var(--ff-gold);
    border-radius: 4px;
}
[data-theme="dark"] .ff-currency-row { background: #1C1810; }
.ff-currency-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ff-copper);
}
.ff-currency-select {
    appearance: none;
    background: var(--ff-cream);
    border: 1px solid rgba(196, 155, 71, 0.5);
    border-radius: 3px;
    padding: 0.45rem 2.2rem 0.45rem 0.8rem;
    font-family: var(--f-mono, monospace);
    font-size: 0.92rem;
    color: var(--ff-ledger);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23C49B47'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
}
.ff-currency-select:focus { outline: none; border-color: var(--ff-gold); }
[data-theme="dark"] .ff-currency-select { background: #14110B; color: #F1E5C4; }
.ff-currency-note {
    font-size: 0.86rem;
    color: var(--ff-mute);
    font-style: italic;
}
.ff-cur {
    font-family: var(--f-mono, monospace);
    font-feature-settings: "tnum";
}

.ff-optional {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ff-mute);
    font-style: italic;
    letter-spacing: 0.02em;
    margin-top: 1px;
}

/* ============================================================
   3. COMPOUND CALCULATOR
   ============================================================ */
.ff-compound {
    background: var(--ff-cream);
    background-image: linear-gradient(transparent 0, transparent calc(var(--ff-rule, 32px) - 1px), rgba(27, 45, 68, 0.06) calc(var(--ff-rule, 32px) - 1px), rgba(27, 45, 68, 0.06) var(--ff-rule, 32px), transparent var(--ff-rule, 32px));
    background-size: 100% var(--ff-rule, 32px);
}
[data-theme="dark"] .ff-compound {
    background-image: linear-gradient(transparent 0, transparent calc(var(--ff-rule, 32px) - 1px), rgba(196, 155, 71, 0.08) calc(var(--ff-rule, 32px) - 1px), rgba(196, 155, 71, 0.08) var(--ff-rule, 32px), transparent var(--ff-rule, 32px));
}

.ff-compound-stage {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--s-6, 1.5rem);
    max-width: 1180px;
    margin: 0 auto;
    align-items: start;
}
@media (max-width: 880px) {
    .ff-compound-stage { grid-template-columns: 1fr; }
}
.ff-compound-form {
    background: var(--ff-cream-2);
    border: 1px solid rgba(196, 155, 71, 0.4);
    padding: var(--s-5, 1.25rem);
    border-radius: 4px;
}
[data-theme="dark"] .ff-compound-form { background: #1C1810; }

.ff-slider-row { margin-bottom: var(--s-4, 1rem); }
.ff-slider-row label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--s-2, 0.5rem);
}
.ff-slider-label {
    font-size: 0.92rem;
    color: var(--ff-ledger);
    font-weight: 500;
}
.ff-slider-value {
    font-size: 1.05rem;
    color: var(--ff-gold-d);
    font-weight: 600;
}
.ff-slider {
    width: 100%;
    appearance: none;
    height: 6px;
    background: rgba(196, 155, 71, 0.25);
    border-radius: 3px;
    outline: none;
}
.ff-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--ff-gold);
    border: 2px solid var(--ff-cream);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.ff-slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--ff-gold);
    border: 2px solid var(--ff-cream);
    cursor: pointer;
}
.ff-compound-hint {
    font-size: 0.86rem;
    color: var(--ff-mute);
    font-style: italic;
    margin: var(--s-3, 0.75rem) 0 var(--s-4, 1rem);
}
.ff-compound-hint em { color: var(--ff-rose); font-style: italic; }

.ff-compound-result {
    background: var(--ff-cream-2);
    border: 1px solid rgba(196, 155, 71, 0.4);
    padding: var(--s-5, 1.25rem);
    border-radius: 4px;
}
[data-theme="dark"] .ff-compound-result { background: #1C1810; }

.ff-compound-numbers {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: var(--s-4, 1rem);
    margin-bottom: var(--s-5, 1.25rem);
    padding-bottom: var(--s-4, 1rem);
    border-bottom: 1px dashed rgba(196, 155, 71, 0.4);
}
@media (max-width: 600px) {
    .ff-compound-numbers { grid-template-columns: 1fr; gap: var(--s-3, 0.75rem); }
}
.ff-num-block { text-align: center; }
.ff-num-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ff-mute);
    margin-bottom: var(--s-2, 0.5rem);
}
.ff-num-big {
    font-family: var(--f-mono, monospace);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ff-ledger);
}
.ff-num-final .ff-num-big {
    font-size: 2.4rem;
    color: var(--ff-gold-d);
}
.ff-num-growth { color: var(--ff-emerald); }

[data-theme="dark"] .ff-num-big { color: #F1E5C4; }
[data-theme="dark"] .ff-num-final .ff-num-big { color: var(--ff-gold); }

.ff-compound-chart-wrap { padding: var(--s-3, 0.75rem) 0 0; }
.ff-compound-chart {
    width: 100%;
    height: auto;
    color: var(--ff-ledger);
}
[data-theme="dark"] .ff-compound-chart { color: var(--ff-cream); }
.ff-chart-legend {
    text-align: center;
    font-size: 0.84rem;
    color: var(--ff-mute);
    margin-top: var(--s-2, 0.5rem);
    font-family: var(--f-mono, monospace);
}
.ff-legend-key {
    display: inline-block;
    width: 14px; height: 3px;
    margin: 0 0.4em 0.15em 0.8em;
    vertical-align: middle;
}
.ff-legend-value    { background: var(--ff-gold); }
.ff-legend-invested { background: var(--ff-emerald); border-top: 1px dashed var(--ff-emerald); height: 0; border-bottom: 1.5px dashed var(--ff-emerald); }

/* ============================================================
   4. MINDSET
   ============================================================ */
.ff-mindset { background: var(--ff-cream-2); }
[data-theme="dark"] .ff-mindset { background: #1C1810; }

.ff-mindset-form {
    max-width: 1100px;
    margin: 0 auto;
}
.ff-mindset-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3, 0.75rem);
    margin-bottom: var(--s-4, 1rem);
    padding-bottom: var(--s-4, 1rem);
    border-bottom: 1px dashed rgba(196, 155, 71, 0.3);
}
.ff-mindset-row:last-of-type { border-bottom: none; }
@media (max-width: 800px) {
    .ff-mindset-row { grid-template-columns: 1fr; }
}
.ff-mindset-option {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2, 0.5rem);
    padding: var(--s-3, 0.75rem);
    background: var(--ff-cream);
    border: 1px solid rgba(196, 155, 71, 0.25);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.ff-mindset-option:hover {
    border-color: var(--ff-gold);
    transform: translateY(-1px);
}
.ff-mindset-option input { position: absolute; opacity: 0; pointer-events: none; }
.ff-mindset-check {
    flex: 0 0 18px;
    width: 18px; height: 18px;
    border: 2px solid var(--ff-mute);
    border-radius: 3px;
    margin-top: 2px;
    position: relative;
    background: white;
}
.ff-mindset-option input:checked ~ .ff-mindset-check {
    background: var(--ff-gold);
    border-color: var(--ff-gold);
}
.ff-mindset-option input:checked ~ .ff-mindset-check::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}
.ff-mindset-option input:checked ~ .ff-mindset-text {
    color: var(--ff-ledger);
    font-weight: 500;
}
[data-theme="dark"] .ff-mindset-option input:checked ~ .ff-mindset-text,
[data-theme="dark"] .ff-mindset-option input:checked ~ .ff-mindset-text b {
    color: #F1E5C4;
}
.ff-mindset-option:has(input:checked) {
    border-color: var(--ff-gold);
    background: #FAF4E2;
}
[data-theme="dark"] .ff-mindset-option:has(input:checked) {
    background: #221C13;
}
.ff-mindset-option[data-type="rich"] input:checked ~ .ff-mindset-check { background: var(--ff-emerald); border-color: var(--ff-emerald); }
.ff-mindset-option[data-type="poor"] input:checked ~ .ff-mindset-check { background: var(--ff-rose); border-color: var(--ff-rose); }
.ff-mindset-text {
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--ff-mute);
}
.ff-mindset-text b { color: var(--ff-ledger); }

[data-theme="dark"] .ff-mindset-option { background: #1A1611; }
[data-theme="dark"] .ff-mindset-text b { color: #F1E5C4; }

.ff-mindset-result {
    max-width: 800px;
    margin: var(--s-6, 1.5rem) auto 0;
    padding: var(--s-5, 1.25rem);
    background: var(--ff-cream);
    border-left: 3px solid var(--ff-gold);
    border-radius: 4px;
}
[data-theme="dark"] .ff-mindset-result { background: #1A1611; }

.ff-mindset-result h3 {
    font-family: var(--f-serif, serif);
    font-size: 1.3rem;
    color: var(--ff-ledger);
    margin-bottom: var(--s-3, 0.75rem);
}
[data-theme="dark"] .ff-mindset-result h3 { color: #F1E5C4; }

.ff-mindset-bars {
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 0.5rem);
    margin-bottom: var(--s-3, 0.75rem);
}
.ff-mindset-bar {
    display: grid;
    grid-template-columns: 80px 1fr 36px;
    align-items: center;
    gap: var(--s-2, 0.5rem);
}
.ff-bar-label {
    font-family: var(--f-mono, monospace);
    font-size: 0.86rem;
    color: var(--ff-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.ff-bar-fill {
    height: 18px;
    background: var(--ff-mute);
    border-radius: 2px;
    transition: width 0.6s ease-out;
    display: block;
}
.ff-bar-rich .ff-bar-fill   { background: var(--ff-emerald); }
.ff-bar-middle .ff-bar-fill { background: var(--ff-gold); }
.ff-bar-poor .ff-bar-fill   { background: var(--ff-rose); }
.ff-bar-num {
    font-family: var(--f-mono, monospace);
    text-align: right;
    color: var(--ff-ledger);
    font-weight: 600;
}
[data-theme="dark"] .ff-bar-num { color: #F1E5C4; }
.ff-mindset-readout {
    font-size: 0.95rem;
    color: var(--ff-mute);
    font-style: italic;
    line-height: 1.6;
}
.ff-mindset-readout em { color: var(--ff-emerald); font-style: italic; }

/* ============================================================
   5. ASSET / LIABILITY SORTER
   ============================================================ */
.ff-classify-stage { max-width: 1180px; margin: 0 auto; }
.ff-classify-input {
    background: var(--ff-cream-2);
    border: 1px solid rgba(196, 155, 71, 0.4);
    padding: var(--s-4, 1rem);
    border-radius: 4px;
    margin-bottom: var(--s-5, 1.25rem);
}
[data-theme="dark"] .ff-classify-input { background: #1C1810; }
.ff-classify-input label {
    display: block;
    font-size: 0.92rem;
    color: var(--ff-ledger);
    font-weight: 500;
    margin-bottom: var(--s-2, 0.5rem);
}
[data-theme="dark"] .ff-classify-input label { color: #F1E5C4; }
.ff-input-row { display: flex; gap: var(--s-2, 0.5rem); }
.ff-input-row input {
    flex: 1;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(196, 155, 71, 0.4);
    border-radius: 4px;
    background: var(--ff-cream);
    color: var(--ff-ledger);
    font-family: inherit;
    font-size: 1rem;
}
.ff-input-row input:focus { outline: none; border-color: var(--ff-gold); }
[data-theme="dark"] .ff-input-row input { background: #14110B; color: #F1E5C4; }

.ff-classify-hint {
    font-size: 0.82rem;
    color: var(--ff-mute);
    margin-top: var(--s-2, 0.5rem);
}

.ff-classify-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4, 1rem);
    margin-bottom: var(--s-4, 1rem);
}
@media (max-width: 900px) {
    .ff-classify-cols { grid-template-columns: 1fr; }
}
.ff-classify-col {
    background: var(--ff-cream-2);
    border: 1px solid rgba(196, 155, 71, 0.3);
    padding: var(--s-4, 1rem);
    border-radius: 4px;
    min-height: 200px;
}
[data-theme="dark"] .ff-classify-col { background: #1A1611; }
.ff-classify-asset    { border-top: 3px solid var(--ff-emerald); }
.ff-classify-liability{ border-top: 3px solid var(--ff-rose); }
.ff-classify-pending  { border-top: 3px solid var(--ff-gold); }

.ff-classify-col h3 {
    font-family: var(--f-serif, serif);
    font-size: 1.2rem;
    color: var(--ff-ledger);
    margin-bottom: var(--s-2, 0.5rem);
}
[data-theme="dark"] .ff-classify-col h3 { color: #F1E5C4; }
.ff-classify-col h3 em { color: var(--ff-mute); font-style: italic; font-size: 0.85rem; font-weight: 400; }
.ff-classify-explain {
    font-size: 0.86rem;
    color: var(--ff-mute);
    margin-bottom: var(--s-3, 0.75rem);
    font-style: italic;
}
.ff-classify-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 0.5rem);
}
.ff-classify-item {
    background: var(--ff-cream);
    border: 1px solid rgba(196, 155, 71, 0.3);
    padding: var(--s-2, 0.5rem) var(--s-3, 0.75rem);
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-2, 0.5rem);
}
[data-theme="dark"] .ff-classify-item { background: #14110B; }
.ff-classify-item-name {
    flex: 1;
    color: var(--ff-ledger);
    font-size: 0.94rem;
}
[data-theme="dark"] .ff-classify-item-name { color: #F1E5C4; }
.ff-classify-actions-row { display: flex; gap: 4px; }
.ff-classify-btn {
    background: transparent;
    border: 1px solid rgba(196, 155, 71, 0.4);
    padding: 0.25rem 0.55rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: var(--f-mono, monospace);
    color: var(--ff-mute);
    transition: all 0.15s;
}
.ff-classify-btn:hover    { border-color: var(--ff-gold); color: var(--ff-gold-d); }
.ff-classify-btn.is-asset { background: var(--ff-emerald); color: white; border-color: var(--ff-emerald); }
.ff-classify-btn.is-liab  { background: var(--ff-rose); color: white; border-color: var(--ff-rose); }

.ff-classify-actions { text-align: center; }

/* ============================================================
   6. BAD HABIT — centerpiece
   ============================================================ */
.ff-bad-habit {
    background: linear-gradient(180deg, var(--ff-cream) 0%, var(--ff-cream-2) 100%);
    position: relative;
}
[data-theme="dark"] .ff-bad-habit { background: linear-gradient(180deg, #14110B 0%, #1C1810 100%); }
.ff-bad-habit::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ff-rose), var(--ff-gold), var(--ff-emerald));
}

.ff-habit-stage {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-5, 1.25rem);
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}
@media (max-width: 900px) {
    .ff-habit-stage { grid-template-columns: 1fr; }
}
.ff-habit-form {
    background: var(--ff-cream);
    border: 1px solid rgba(196, 155, 71, 0.4);
    padding: var(--s-5, 1.25rem);
    border-radius: 4px;
    box-shadow: 0 2px 16px rgba(27, 45, 68, 0.05);
}
[data-theme="dark"] .ff-habit-form { background: #1A1611; }

.ff-habit-quickpicks { margin-bottom: var(--s-4, 1rem); }
.ff-habit-pick-label {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ff-copper);
    margin-bottom: var(--s-2, 0.5rem);
}
.ff-habit-pick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ff-habit-pick {
    background: var(--ff-cream-2);
    border: 1px solid rgba(196, 155, 71, 0.3);
    padding: 0.4rem 0.7rem;
    border-radius: 20px;
    font-size: 0.84rem;
    color: var(--ff-ledger);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.ff-habit-pick:hover    { border-color: var(--ff-gold); transform: translateY(-1px); }
.ff-habit-pick.is-active {
    background: var(--ff-gold);
    color: white;
    border-color: var(--ff-gold);
}
[data-theme="dark"] .ff-habit-pick { background: #14110B; color: #F1E5C4; }

.ff-label-block {
    display: block;
    margin-bottom: var(--s-3, 0.75rem);
}
.ff-label-block > span {
    display: block;
    font-size: 0.88rem;
    color: var(--ff-ledger);
    font-weight: 500;
    margin-bottom: 4px;
}
[data-theme="dark"] .ff-label-block > span { color: #F1E5C4; }
.ff-label-block input,
.ff-label-block textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(196, 155, 71, 0.4);
    border-radius: 4px;
    background: var(--ff-cream-2);
    color: var(--ff-ledger);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}
.ff-label-block input:focus,
.ff-label-block textarea:focus { outline: none; border-color: var(--ff-gold); }
[data-theme="dark"] .ff-label-block input,
[data-theme="dark"] .ff-label-block textarea { background: #14110B; color: #F1E5C4; }

.ff-habit-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s-2, 0.5rem);
    margin-bottom: var(--s-3, 0.75rem);
}
.ff-habit-row label { display: block; }
.ff-habit-row label > span {
    display: block;
    font-size: 0.86rem;
    color: var(--ff-ledger);
    font-weight: 500;
    margin-bottom: 4px;
}
[data-theme="dark"] .ff-habit-row label > span { color: #F1E5C4; }
.ff-habit-row label input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(196, 155, 71, 0.4);
    border-radius: 4px;
    background: var(--ff-cream-2);
    color: var(--ff-ledger);
    font-family: var(--f-mono, monospace);
    font-size: 1rem;
    box-sizing: border-box;
}
[data-theme="dark"] .ff-habit-row label input { background: #14110B; color: #F1E5C4; }

.ff-habit-promise-block {
    margin-top: var(--s-4, 1rem);
    padding: var(--s-4, 1rem);
    background: var(--ff-cream-2);
    border-left: 3px solid var(--ff-emerald);
    border-radius: 4px;
}
[data-theme="dark"] .ff-habit-promise-block { background: #1C1810; }

.ff-habit-pblock-h {
    font-family: var(--f-serif, serif);
    font-size: 1.15rem;
    color: var(--ff-emerald);
    margin-bottom: var(--s-3, 0.75rem);
    font-style: italic;
}

.ff-checkbox-block {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2, 0.5rem);
    margin-top: var(--s-2, 0.5rem);
    padding: var(--s-2, 0.5rem) 0;
    cursor: pointer;
}
.ff-checkbox-block input { margin-top: 4px; transform: scale(1.2); accent-color: var(--ff-gold); }
.ff-checkbox-block span {
    color: var(--ff-ledger);
    font-size: 0.96rem;
    line-height: 1.5;
}
[data-theme="dark"] .ff-checkbox-block span { color: #F1E5C4; }
.ff-checkbox-block b { color: var(--ff-gold-d); }

.ff-habit-result {
    background: var(--ff-cream);
    border: 1px solid rgba(196, 155, 71, 0.4);
    padding: var(--s-5, 1.25rem);
    border-radius: 4px;
    text-align: center;
    position: sticky;
    top: 100px;
}
[data-theme="dark"] .ff-habit-result { background: #1A1611; }

.ff-habit-result-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.84rem;
    color: var(--ff-mute);
    font-style: italic;
    padding: var(--s-6, 1.5rem) 0;
}
.ff-habit-result-h {
    font-family: var(--f-mono, monospace);
    font-size: 0.86rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ff-copper);
    margin-bottom: var(--s-4, 1rem);
}
.ff-habit-result-line {
    font-size: 0.92rem;
    color: var(--ff-mute);
    margin-bottom: var(--s-2, 0.5rem);
}
.ff-habit-result-num {
    font-family: var(--f-mono, monospace);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: var(--s-4, 1rem);
}
.ff-num-spent { color: var(--ff-rose); }
.ff-num-invested-big {
    font-size: 2.6rem !important;
    color: var(--ff-emerald);
}
.ff-habit-result-purpose {
    margin-top: var(--s-4, 1rem);
    padding-top: var(--s-3, 0.75rem);
    border-top: 1px dashed rgba(196, 155, 71, 0.4);
    font-size: 1.05rem;
    color: var(--ff-ledger);
    font-style: italic;
    line-height: 1.5;
}
[data-theme="dark"] .ff-habit-result-purpose { color: #F1E5C4; }
.ff-habit-result-purpose em {
    color: var(--ff-gold-d);
    font-weight: 500;
    font-style: italic;
}

/* ============================================================
   7. TIME-MONEY TRADE
   ============================================================ */
.ff-time { background: var(--ff-cream-2); }
[data-theme="dark"] .ff-time { background: #1C1810; }

.ff-time-form {
    max-width: 720px;
    margin: 0 auto;
    background: var(--ff-cream);
    padding: var(--s-5, 1.25rem);
    border: 1px solid rgba(196, 155, 71, 0.4);
    border-radius: 4px;
}
[data-theme="dark"] .ff-time-form { background: #1A1611; }

.ff-time-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: var(--s-3, 0.75rem);
    margin-bottom: var(--s-3, 0.75rem);
}
@media (max-width: 600px) {
    .ff-time-row { grid-template-columns: 1fr; }
}
.ff-time-row label { display: block; }
.ff-time-row label > span {
    display: block;
    font-size: 0.88rem;
    color: var(--ff-ledger);
    font-weight: 500;
    margin-bottom: 4px;
}
[data-theme="dark"] .ff-time-row label > span { color: #F1E5C4; }
.ff-time-row label input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(196, 155, 71, 0.4);
    border-radius: 4px;
    background: var(--ff-cream-2);
    color: var(--ff-ledger);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}
[data-theme="dark"] .ff-time-row label input { background: #14110B; color: #F1E5C4; }

.ff-time-result {
    max-width: 720px;
    margin: var(--s-5, 1.25rem) auto 0;
    text-align: center;
    padding: var(--s-5, 1.25rem);
    background: var(--ff-cream);
    border-left: 3px solid var(--ff-gold);
    border-radius: 4px;
}
[data-theme="dark"] .ff-time-result { background: #1A1611; }

.ff-time-readout {
    font-family: var(--f-mono, monospace);
    font-size: 0.84rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ff-copper);
    margin-bottom: var(--s-2, 0.5rem);
}
.ff-time-num {
    font-family: var(--f-mono, monospace);
    font-size: 3.2rem;
    font-weight: 600;
    color: var(--ff-gold-d);
    margin-bottom: var(--s-2, 0.5rem);
}
.ff-time-readout-2 {
    color: var(--ff-mute);
    margin-bottom: var(--s-3, 0.75rem);
    font-size: 0.96rem;
}
.ff-time-prompt {
    font-family: var(--f-serif, serif);
    font-style: italic;
    color: var(--ff-emerald);
    font-size: 1.4rem;
}

/* ============================================================
   8. MONEY HACKS
   ============================================================ */
.ff-hacks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-4, 1rem);
    max-width: 1280px;
    margin: 0 auto;
}
.ff-hack-card {
    background: var(--ff-cream-2);
    border: 1px solid rgba(196, 155, 71, 0.3);
    padding: var(--s-4, 1rem);
    border-radius: 4px;
    transition: all 0.2s;
    position: relative;
    border-left: 3px solid var(--ff-gold);
}
[data-theme="dark"] .ff-hack-card { background: #1A1611; }

.ff-hack-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 45, 68, 0.08);
    border-left-color: var(--ff-emerald);
}
.ff-hack-num {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--ff-copper);
    margin-bottom: var(--s-2, 0.5rem);
}
.ff-hack-card h3 {
    font-family: var(--f-serif, serif);
    font-size: 1.25rem;
    color: var(--ff-ledger);
    margin-bottom: var(--s-2, 0.5rem);
}
[data-theme="dark"] .ff-hack-card h3 { color: #F1E5C4; }
.ff-hack-card p {
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--ff-mute);
}
.ff-hack-card p em { color: var(--ff-emerald); font-style: italic; }

/* ============================================================
   9. PROMISE
   ============================================================ */
.ff-promise { background: var(--ff-cream-2); }
[data-theme="dark"] .ff-promise { background: #1C1810; }

.ff-promise-form {
    max-width: 720px;
    margin: 0 auto;
    background: var(--ff-cream);
    padding: var(--s-5, 1.25rem);
    border: 1px solid rgba(196, 155, 71, 0.4);
    border-radius: 4px;
}
[data-theme="dark"] .ff-promise-form { background: #1A1611; }

.ff-promise-recent {
    max-width: 720px;
    margin: var(--s-6, 1.5rem) auto 0;
}
.ff-promise-recent h3 {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ff-copper);
    margin-bottom: var(--s-3, 0.75rem);
    text-align: center;
}
.ff-promise-recent ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3, 0.75rem); }
.ff-promise-recent li {
    background: var(--ff-cream);
    padding: var(--s-3, 0.75rem) var(--s-4, 1rem);
    border-left: 2px solid var(--ff-gold);
    border-radius: 0 4px 4px 0;
}
[data-theme="dark"] .ff-promise-recent li { background: #1A1611; }
.ff-promise-text {
    font-family: var(--f-serif, serif);
    font-size: 1.08rem;
    color: var(--ff-ledger);
    font-style: italic;
    line-height: 1.5;
    margin-bottom: var(--s-2, 0.5rem);
}
[data-theme="dark"] .ff-promise-text { color: #F1E5C4; }
.ff-promise-meta {
    font-size: 0.86rem;
    color: var(--ff-mute);
    margin-bottom: 4px;
}
.ff-promise-meta b { color: var(--ff-emerald); font-weight: 500; }
.ff-promise-date {
    font-family: var(--f-mono, monospace);
    font-size: 0.76rem;
    color: var(--ff-mute);
    letter-spacing: 0.08em;
}

/* ============================================================
   10. VOICES OF THE WEALTHY
   ============================================================ */
/* Voices block keeps its own dark palette regardless of site theme — the
   gradient background is always near-black, so text colors are hardcoded
   to a cream tone that won't flip in dark mode. */
.ff-voices {
    background: linear-gradient(180deg, #1B2D44 0%, #122036 100%);
    color: #F2EAD3;
}
.ff-voices .ff-h2 { color: #F2EAD3; }
.ff-voices .ff-h2 em { color: #C49B47; }
.ff-voices .ff-eyebrow { color: #C49B47; }
.ff-voices .ff-sub { color: rgba(242, 234, 211, 0.78); }
.ff-voices .ff-sub em { color: #C49B47; }

.ff-quote-card {
    background: rgba(242, 234, 211, 0.06);
    border: 1px solid rgba(196, 155, 71, 0.3);
    padding: var(--s-7, 2.5rem) var(--s-6, 1.5rem);
    border-radius: 4px;
    text-align: center;
    position: relative;
}
.ff-quote-mark {
    font-family: var(--f-serif, serif);
    font-size: 5rem;
    color: #C49B47;
    line-height: 1;
    margin-bottom: var(--s-2, 0.5rem);
    opacity: 0.7;
}
.ff-quote-text {
    font-family: var(--f-serif, serif);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    line-height: 1.5;
    color: #F2EAD3;
    margin-bottom: var(--s-4, 1rem);
    font-style: italic;
    font-weight: 400;
}
.ff-quote-cite {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--s-4, 1rem);
}
.ff-quote-author {
    font-family: var(--f-mono, monospace);
    font-size: 0.92rem;
    color: #C49B47;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ff-quote-source {
    font-size: 0.84rem;
    color: rgba(242, 234, 211, 0.55);
    font-style: italic;
}
.ff-quote-actions {
    display: flex;
    justify-content: center;
    gap: var(--s-3, 0.75rem);
    flex-wrap: wrap;
}
.ff-quote-fav {
    background: transparent;
    border: 1px solid rgba(196, 155, 71, 0.4);
    color: #F2EAD3;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    transition: all 0.15s;
}
.ff-quote-fav:hover     { border-color: #C49B47; color: #C49B47; }
.ff-quote-fav.is-favorited { background: #C49B47; color: #1B2D44; border-color: #C49B47; }

/* ============================================================
   11. FINAL
   ============================================================ */
.ff-final {
    background: var(--ff-cream);
    text-align: center;
    padding: var(--s-12, 5rem) 0;
}
[data-theme="dark"] .ff-final { background: #14110B; }

.ff-final-mark {
    font-family: var(--f-mono, monospace);
    font-size: 2rem;
    color: var(--ff-gold);
    letter-spacing: 0.4em;
    margin-bottom: var(--s-5, 1.25rem);
}
.ff-final-quote {
    font-family: var(--f-serif, serif);
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    line-height: 1.4;
    color: var(--ff-ledger);
    font-style: italic;
    max-width: 800px;
    margin: 0 auto var(--s-3, 0.75rem);
    font-weight: 500;
}
[data-theme="dark"] .ff-final-quote { color: #F1E5C4; }
.ff-final-quote em {
    color: var(--ff-gold-d);
    font-style: italic;
}
.ff-final-cite {
    font-family: var(--f-mono, monospace);
    font-size: 0.92rem;
    color: var(--ff-mute);
    letter-spacing: 0.1em;
    margin-bottom: var(--s-5, 1.25rem);
}

/* ============================================================
   FADE-UP HELPERS (shared utility, scoped)
   ============================================================ */
.page-financial-freedom .fade-up {
    opacity: 0;
    transform: translateY(16px);
    animation: ffFadeUp 0.7s ease-out forwards;
}
.page-financial-freedom .fade-up.delay-1 { animation-delay: 0.12s; }
.page-financial-freedom .fade-up.delay-2 { animation-delay: 0.24s; }
.page-financial-freedom .fade-up.delay-3 { animation-delay: 0.36s; }
.page-financial-freedom .fade-up.delay-4 { animation-delay: 0.48s; }
@keyframes ffFadeUp {
    to { opacity: 1; transform: translateY(0); }
}