/* altFINS Listicle — Frontend Styles (altFINS Brand Colors)
   Green        #1FC1A2  primary accent, featured, ratings
   Dark green   #10362B  headings, dark surfaces
   Orange CTA   #FC7753  primary CTAs
   Orange low L #FEDBD2  light badges
   Orange low D #532B21  dark badges
*/

:root {
    --af-green: #1FC1A2;
    --af-green-hover: #18a88c;
    --af-dark-green: #10362B;
    --af-orange: #FC7753;
    --af-orange-hover: #E5663D;
    --af-orange-light: #FEDBD2;
    --af-orange-dark: #532B21;
    --af-grey-bg: #F6F8FA;
    --af-grey: #757575;
    --af-blue: #64AEDC;
    --af-purple: #C55DD8;
    --af-text: #10362B;
    --af-text-muted: #5F6A66;
    --af-border: #E5EAE8;
    --af-card-bg: #FFFFFF;
    --af-page-bg: #F6F8FA;
    --af-shadow: 0 1px 3px rgba(16,54,43,0.06);
    --af-shadow-hover: 0 4px 14px rgba(16,54,43,0.10);
}

@media (prefers-color-scheme: dark) {
    :root {
        --af-text: #FFFFFF;
        --af-text-muted: #BBBBBB;
        --af-border: #2B2E2F;
        --af-card-bg: #2B2E2F;
        --af-page-bg: #161718;
        --af-grey-bg: #2B2E2F;
        --af-shadow: 0 1px 3px rgba(0,0,0,0.4);
        --af-shadow-hover: 0 4px 14px rgba(0,0,0,0.5);
    }
}

body.altfins-dark, [data-theme="dark"] .altfins-main {
    --af-text: #FFFFFF;
    --af-text-muted: #BBBBBB;
    --af-border: #2B2E2F;
    --af-card-bg: #2B2E2F;
    --af-page-bg: #161718;
    --af-grey-bg: #2B2E2F;
}

.altfins-main { padding: 40px 0; background: var(--af-page-bg); color: var(--af-text); min-height: 60vh; }
.altfins-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Breadcrumb */
.altfins-breadcrumb { font-size: 13px; color: var(--af-text-muted); margin-bottom: 24px; }
.altfins-breadcrumb a { color: var(--af-green); text-decoration: none; }
.altfins-breadcrumb a:hover { text-decoration: underline; }
.altfins-breadcrumb .altfins-sep { margin: 0 6px; color: var(--af-border); }

/* Pillar hero */
.altfins-pillar-hero { background: linear-gradient(180deg, var(--af-dark-green) 0%, #185a48 100%); color: #fff; padding: 48px 24px; margin-bottom: 32px; text-align: center; border-radius: 12px; }
.altfins-pillar-icon-large { font-size: 48px; color: var(--af-green); margin-bottom: 14px; }
.altfins-pillar-hero h1 { font-size: 36px; margin: 0 0 12px; font-weight: 700; color: #fff; }
.altfins-pillar-subtitle { font-size: 17px; color: #c8d5d0; max-width: 720px; margin: 0 auto 18px; line-height: 1.6; }
.altfins-pillar-stats { font-size: 13px; color: #a8c4ba; }

/* Category header */
.altfins-category-header { padding: 24px 0 28px; border-bottom: 1px solid var(--af-border); margin-bottom: 28px; }
.altfins-meta-badges { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.altfins-badge-updated { background: var(--af-green); color: var(--af-dark-green); font-size: 10px; padding: 4px 11px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.altfins-badge-secondary { background: var(--af-orange-light); color: var(--af-orange); font-size: 10px; padding: 4px 11px; border-radius: 4px; font-weight: 600; }
@media (prefers-color-scheme: dark) { .altfins-badge-secondary { background: var(--af-orange-dark); color: var(--af-orange); } }
.altfins-category-header h1 { font-size: 30px; margin: 0 0 12px; font-weight: 700; line-height: 1.3; color: var(--af-text); }
.altfins-category-subtitle { font-size: 16px; color: var(--af-text-muted); line-height: 1.6; margin: 0; }

/* Quick answer */
.altfins-quick-answer { background: var(--af-card-bg); border-left: 4px solid var(--af-green); padding: 16px 20px; margin-bottom: 26px; border-radius: 4px; box-shadow: var(--af-shadow); }
.altfins-aeo-label { font-size: 11px; font-weight: 700; color: var(--af-green); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.altfins-quick-answer p:last-child { margin: 0; font-size: 15px; line-height: 1.6; color: var(--af-text); }
.altfins-quick-answer strong { color: var(--af-dark-green); }
@media (prefers-color-scheme: dark) { .altfins-quick-answer strong { color: var(--af-green); } }

.altfins-category-intro, .altfins-pillar-intro { font-size: 15px; line-height: 1.7; color: var(--af-text); margin-bottom: 24px; }

/* Pillars / categories grid */
.altfins-categories-grid, .altfins-pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 32px; }
.altfins-category-tile, .altfins-pillar-card { display: block; background: var(--af-card-bg); border: 1px solid var(--af-border); border-left: 4px solid var(--af-green); border-radius: 10px; padding: 20px; text-decoration: none; color: var(--af-text); position: relative; transition: all 0.2s; box-shadow: var(--af-shadow); }
.altfins-category-tile:hover, .altfins-pillar-card:hover { transform: translateY(-2px); box-shadow: var(--af-shadow-hover); color: var(--af-text); }

.altfins-tile-badges { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; }
.altfins-badge-hot { background: var(--af-orange); color: #fff; font-size: 9px; padding: 2px 7px; border-radius: 3px; font-weight: 700; letter-spacing: 0.5px; }
.altfins-badge-ai { background: var(--af-purple); color: #fff; font-size: 9px; padding: 2px 7px; border-radius: 3px; font-weight: 700; letter-spacing: 0.5px; }
.altfins-badge-tier { font-size: 9px; padding: 2px 7px; border-radius: 3px; font-weight: 700; background: var(--af-grey-bg); color: var(--af-text-muted); letter-spacing: 0.5px; }
.altfins-tier-S { background: var(--af-orange-light); color: var(--af-orange-dark); }
.altfins-tier-A { background: #FFE9CC; color: #8C5400; }
.altfins-tier-B { background: #D9EEFE; color: #0C447C; }
.altfins-tier-C { background: var(--af-grey-bg); color: var(--af-grey); }

.altfins-category-tile h3, .altfins-category-tile h4, .altfins-pillar-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; padding-right: 70px; color: var(--af-text); }
.altfins-category-tile p, .altfins-pillar-card p { font-size: 13px; color: var(--af-text-muted); margin: 0 0 10px; line-height: 1.5; }
.altfins-tile-meta, .altfins-cat-count { font-size: 12px; color: var(--af-green); font-weight: 600; }
.altfins-pillar-icon { font-size: 28px; color: var(--af-green); margin-bottom: 10px; }

/* Filter bar */
.altfins-filter-bar { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.altfins-filter-label { font-size: 12px; color: var(--af-text-muted); margin-right: 4px; }
.altfins-filter-pill { background: var(--af-card-bg); border: 1px solid var(--af-border); border-radius: 6px; cursor: pointer; color: var(--af-text-muted); padding: 6px 14px; font-size: 12px; font-weight: 500; transition: all 0.15s; }
.altfins-filter-pill:hover { background: var(--af-grey-bg); color: var(--af-text); }
.altfins-filter-pill.altfins-active { background: var(--af-dark-green); color: #fff; border-color: var(--af-dark-green); }
@media (prefers-color-scheme: dark) { .altfins-filter-pill.altfins-active { background: var(--af-green); color: var(--af-dark-green); border-color: var(--af-green); } }

/* Platform cards */
.altfins-platforms-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.altfins-platform-card { background: var(--af-card-bg); border: 1px solid var(--af-border); border-radius: 10px; overflow: hidden; transition: all 0.15s; box-shadow: var(--af-shadow); }
.altfins-platform-card:hover { box-shadow: var(--af-shadow-hover); }
.altfins-platform-card.altfins-featured { border: 2px solid var(--af-green); }
.altfins-featured-banner { background: var(--af-green); color: var(--af-dark-green); font-size: 10px; font-weight: 700; padding: 4px 16px; text-transform: uppercase; letter-spacing: 0.6px; }
.altfins-featured-banner::before { content: "★ "; }
.altfins-card-inner { display: flex; gap: 20px; padding: 18px 20px; align-items: flex-start; }
.altfins-rank { font-size: 30px; font-weight: 700; color: var(--af-border); font-family: Georgia, "Times New Roman", serif; line-height: 1; flex-shrink: 0; min-width: 48px; }
.altfins-featured .altfins-rank { color: var(--af-green); }
.altfins-card-content { flex: 1; min-width: 0; }
.altfins-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.altfins-card-header h3 { font-size: 17px; margin: 0; font-weight: 700; color: var(--af-text); }
.altfins-score { display: flex; align-items: center; gap: 5px; font-weight: 700; color: var(--af-text); flex-shrink: 0; font-size: 13px; }
.altfins-score .ti { color: var(--af-green); font-size: 16px; }
.altfins-score-out { color: var(--af-text-muted); font-weight: 400; font-size: 11px; }
.altfins-tagline { font-size: 14px; color: var(--af-text-muted); margin: 0 0 10px; line-height: 1.5; }
.altfins-verdict { background: var(--af-grey-bg); border-left: 3px solid var(--af-dark-green); padding: 9px 13px; border-radius: 5px; font-size: 13px; line-height: 1.6; margin-bottom: 12px; color: var(--af-text); }
.altfins-verdict strong { color: var(--af-dark-green); }
@media (prefers-color-scheme: dark) { .altfins-verdict { border-left-color: var(--af-green); } .altfins-verdict strong { color: var(--af-green); } }
.altfins-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; margin-bottom: 14px; font-size: 12px; }
.altfins-facts > div { display: flex; flex-direction: column; }
.altfins-fact-label { color: var(--af-text-muted); font-size: 10px; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.4px; }
.altfins-facts > div > span:last-child, .altfins-facts > div > div:last-child { color: var(--af-text); font-weight: 500; }

/* CTA */
.altfins-cta-row { display: flex; gap: 8px; flex-wrap: wrap; }
.altfins-cta-primary { background: var(--af-orange); color: #fff; border: none; padding: 9px 20px; font-size: 13px; border-radius: 6px; cursor: pointer; font-weight: 700; text-decoration: none; display: inline-block; transition: all 0.15s; box-shadow: 0 1px 3px rgba(252,119,83,0.25); }
.altfins-cta-primary:hover { background: var(--af-orange-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(252,119,83,0.35); }
.altfins-cta-secondary { background: transparent; border: 1px solid var(--af-border); color: var(--af-text); padding: 9px 16px; font-size: 13px; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; font-weight: 500; transition: all 0.15s; }
.altfins-cta-secondary:hover { background: var(--af-grey-bg); color: var(--af-text); border-color: var(--af-green); }
.altfins-cta-large { font-size: 15px; padding: 13px 28px; }

/* Methodology */
.altfins-methodology { background: var(--af-dark-green); color: #fff; padding: 22px 26px; border-radius: 10px; margin-bottom: 28px; }
.altfins-methodology h2 { font-size: 16px; margin: 0 0 8px; font-weight: 700; color: var(--af-green); display: flex; align-items: center; gap: 6px; }
.altfins-methodology p { font-size: 13px; color: #c8d5d0; margin: 0; line-height: 1.6; }

/* FAQ */
.altfins-faq { margin-bottom: 32px; }
.altfins-faq h2 { font-size: 22px; margin: 0 0 16px; font-weight: 700; color: var(--af-text); }
.altfins-faq-item { border-bottom: 1px solid var(--af-border); padding: 14px 0; cursor: pointer; }
.altfins-faq-item summary { font-size: 15px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--af-text); }
.altfins-faq-item summary::-webkit-details-marker { display: none; }
.altfins-faq-item summary::after { content: '+'; font-size: 20px; color: var(--af-green); font-weight: 400; }
.altfins-faq-item[open] summary::after { content: '−'; }
.altfins-faq-answer { font-size: 14px; color: var(--af-text-muted); line-height: 1.7; margin-top: 8px; }

/* Related */
.altfins-related { background: var(--af-card-bg); border: 1px solid var(--af-border); padding: 18px 22px; border-radius: 10px; margin-bottom: 24px; }
.altfins-related h3 { font-size: 13px; margin: 0 0 10px; font-weight: 700; color: var(--af-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.altfins-related-links { display: flex; flex-wrap: wrap; gap: 14px; }
.altfins-related-links a { color: var(--af-green); text-decoration: none; font-size: 14px; font-weight: 500; }
.altfins-related-links a:hover { text-decoration: underline; }

/* Disclosure */
.altfins-disclosure { font-size: 11px; color: var(--af-text-muted); padding: 14px 16px; background: var(--af-card-bg); border: 1px solid var(--af-border); border-radius: 6px; line-height: 1.6; }

/* Platform / review page */
.altfins-platform-header { padding: 28px 0; border-bottom: 1px solid var(--af-border); margin-bottom: 28px; }
.altfins-platform-title-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.altfins-platform-title-row h1 { font-size: 32px; margin: 0; font-weight: 700; color: var(--af-text); }
.altfins-score-large { display: flex; align-items: baseline; gap: 6px; background: var(--af-dark-green); color: #fff; padding: 12px 20px; border-radius: 10px; }
.altfins-score-large .ti { font-size: 20px; color: var(--af-green); }
.altfins-score-num { font-size: 28px; font-weight: 700; color: #fff; }
.altfins-score-out { font-size: 13px; color: #a8c4ba; }
.altfins-platform-tagline { font-size: 17px; color: var(--af-text-muted); line-height: 1.6; margin: 0 0 22px; }

.altfins-platform-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 32px; }
.altfins-fact-card { background: var(--af-card-bg); border: 1px solid var(--af-border); border-radius: 8px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--af-shadow); }
.altfins-fact-card .altfins-fact-icon { font-size: 22px; color: var(--af-green); flex-shrink: 0; }
.altfins-fact-card .altfins-fact-label { font-size: 10px; color: var(--af-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.altfins-fact-card .altfins-fact-value { font-size: 14px; color: var(--af-text); line-height: 1.4; font-weight: 500; }

.altfins-platform-review, .altfins-score-breakdown { margin-bottom: 32px; }
.altfins-platform-review h2, .altfins-score-breakdown h2 { font-size: 22px; margin: 0 0 16px; font-weight: 700; color: var(--af-text); }
.altfins-review-body { font-size: 15px; line-height: 1.8; color: var(--af-text); }

.altfins-score-bars { display: flex; flex-direction: column; gap: 10px; }
.altfins-score-row { display: grid; grid-template-columns: 180px 1fr 80px; gap: 16px; align-items: center; font-size: 13px; color: var(--af-text); }
.altfins-score-bar { background: var(--af-grey-bg); height: 8px; border-radius: 4px; overflow: hidden; }
.altfins-score-bar-fill { background: linear-gradient(90deg, var(--af-green), var(--af-dark-green)); height: 100%; transition: width 0.5s ease-out; }
.altfins-score-val { font-weight: 700; color: var(--af-text); text-align: right; }

.altfins-final-cta { text-align: center; padding: 36px 24px; background: var(--af-dark-green); color: #fff; border-radius: 12px; margin-bottom: 28px; }
.altfins-final-cta h2 { margin: 0 0 18px; font-size: 22px; color: #fff; }

/* Compare */
.altfins-compare-header { text-align: center; padding: 28px 0 32px; border-bottom: 1px solid var(--af-border); margin-bottom: 28px; }
.altfins-compare-header h1 { font-size: 32px; margin: 0 0 8px; font-weight: 700; color: var(--af-text); }
.altfins-compare-header p { color: var(--af-text-muted); margin: 0; }
.altfins-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.altfins-compare-col { background: var(--af-card-bg); border: 1px solid var(--af-border); border-radius: 10px; padding: 22px; text-align: center; box-shadow: var(--af-shadow); }
.altfins-compare-col h2 { margin: 0 0 8px; font-size: 22px; color: var(--af-text); }
.altfins-compare-col h3 { margin: 0 0 8px; font-size: 18px; color: var(--af-text); }
.altfins-compare-col p { color: var(--af-text-muted); }
.altfins-compare-table-wrap { margin-bottom: 32px; overflow-x: auto; border-radius: 10px; box-shadow: var(--af-shadow); }
.altfins-compare-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--af-card-bg); }
.altfins-compare-table th, .altfins-compare-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--af-border); vertical-align: top; color: var(--af-text); }
.altfins-compare-table thead th { background: var(--af-dark-green); color: #fff; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }
.altfins-compare-table tbody th { font-weight: 600; color: var(--af-text-muted); width: 25%; background: var(--af-grey-bg); }
.altfins-compare-verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }

/* Responsive */
@media (max-width: 768px) {
    .altfins-card-inner { flex-direction: column; gap: 12px; padding: 16px; }
    .altfins-rank { font-size: 22px; min-width: auto; }
    .altfins-platform-title-row { flex-direction: column; align-items: flex-start; }
    .altfins-pillar-hero h1, .altfins-category-header h1, .altfins-compare-header h1, .altfins-platform-title-row h1 { font-size: 24px; }
    .altfins-score-row { grid-template-columns: 1fr; gap: 4px; }
    .altfins-compare-grid, .altfins-compare-verdicts { grid-template-columns: 1fr; }
    .altfins-categories-grid, .altfins-pillars-grid { grid-template-columns: 1fr; }
    .altfins-pillar-hero { padding: 32px 18px; border-radius: 0; }
}