/**
 * Topic page (a Learn cluster overview) — [finance_hamster_topic].
 * The owner-approved look. Reuses the shared foundation/theme tokens that exist
 * (--accent/--accent-text/--pill-bd/--pos/--shadow/--shadow-lg/--bg/--radius/
 * --fh-dur/--fh-ease). The warm SEMANTIC tokens (--ink/--muted/--soft/--card/--bd/
 * --neg) are not exposed by foundation, so they are defined here SCOPED to .fh-topic
 * (mapped to the approved mock palette) and flipped for dark — nothing leaks out.
 * The .fh-topic-h1 + .fh-topic-short classes are the Speakable selectors FH_SEO_Head
 * points assistants at — keep them.
 */

/* Scoped semantic tokens (light) + dark flips. data-theme overrides win over the media query. */
.fh-topic{ --ink:#211d16; --muted:#655c4e; --soft:#faecd5; --card:#ffffff; --bd:#e8dfcf; --neg:#a83f58; }
@media (prefers-color-scheme:dark){
  .fh-topic{ --ink:#f6f1e7; --muted:#b0a794; --soft:#2d2213; --card:#211d15; --bd:#332c20; --neg:#de8799; }
}
:root[data-theme="light"] .fh-topic{ --ink:#211d16; --muted:#655c4e; --soft:#faecd5; --card:#ffffff; --bd:#e8dfcf; --neg:#a83f58; }
:root[data-theme="dark"] .fh-topic{ --ink:#f6f1e7; --muted:#b0a794; --soft:#2d2213; --card:#211d15; --bd:#332c20; --neg:#de8799; }

.fh-topic{font-size:17px; line-height:1.7; color:var(--ink); max-width:960px; margin:0 auto; padding:0 0 var(--s-9,96px)}
.fh-topic a{color:inherit; text-decoration:none}
.fh-topic-prose{max-width:700px}

/* breadcrumb */
.fh-topic-crumb{display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:var(--t-sm,.88rem); color:var(--muted); margin:0 0 var(--s-5,24px)}
.fh-topic-crumb a:hover{color:var(--accent-text); text-decoration:underline}
.fh-topic-crumb .sep{opacity:.5}
.fh-topic-crumb .here{color:var(--ink); font-weight:650}

/* hero */
.fh-topic-eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:var(--t-sm,.88rem); font-weight:700; color:var(--accent-text)}
.fh-topic-eyebrow .d{font-size:1.15rem}
.fh-topic-h1{font-size:clamp(2rem,5.4vw,3.1rem); line-height:1.05; letter-spacing:-.022em; font-weight:800; color:var(--ink); margin:.34em 0 .24em; text-wrap:balance}
.fh-topic-intro{font-size:clamp(1.06rem,2.2vw,1.24rem); line-height:1.55; color:var(--muted); max-width:640px; margin:0}

/* "In short" explanation box (Speakable) */
.fh-topic-short{display:flex; gap:20px; align-items:flex-start; background:var(--soft); border:1px solid var(--pill-bd); border-radius:var(--radius-lg,24px); padding:26px 30px; margin:var(--s-6,32px) 0 0; max-width:760px}
.fh-topic-short .ico{flex:0 0 auto; width:50px; height:50px; border-radius:14px; background:var(--card); display:grid; place-items:center; font-size:1.6rem; box-shadow:var(--shadow)}
.fh-topic-short .lab{font-size:var(--t-sm,.88rem); font-weight:750; color:var(--accent-text); margin:2px 0 6px}
.fh-topic-short p{margin:0; font-size:1.16rem; line-height:1.6; color:var(--ink)}

/* section rhythm + headings (sentence case, no tiny uppercase) */
.fh-topic-sec{margin-top:clamp(48px,6.5vw,76px)}
.fh-topic-sec-h{font-size:clamp(1.35rem,3vw,1.72rem); font-weight:800; letter-spacing:-.01em; color:var(--ink); margin:0 0 6px; text-wrap:balance}
.fh-topic-sec-sub{font-size:1rem; color:var(--muted); margin:0 0 22px; max-width:600px}

/* DOMINANT "Start here" card — the site's honey brand gradient (single-look, white text) */
.fh-topic-start{display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
  background:linear-gradient(135deg,#c6791f,#985813); color:#fff;
  border-radius:var(--radius-lg,24px); padding:26px 30px; box-shadow:var(--shadow-lg); text-decoration:none; transition:transform var(--fh-dur,200ms) var(--fh-ease,ease)}
.fh-topic-start:hover{transform:translateY(-3px)}
.fh-topic-start .badge{flex:0 0 auto; align-self:flex-start; font-size:.82rem; font-weight:700; letter-spacing:.02em; background:rgba(255,255,255,.22); padding:5px 12px; border-radius:999px}
.fh-topic-start .mid h3{margin:0 0 6px; font-size:clamp(1.3rem,2.6vw,1.6rem); line-height:1.15; font-weight:800; letter-spacing:-.01em; color:#fff}
.fh-topic-start .mid p{margin:0; font-size:1.05rem; line-height:1.5; color:rgba(255,255,255,.94)}
.fh-topic-start .go{flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:#fff; color:#985813; display:grid; place-items:center; font-size:1.5rem; font-weight:700}
@media (max-width:600px){ .fh-topic-start{grid-template-columns:1fr; gap:16px} .fh-topic-start .go{display:none} }

/* quiet guide cards — big title, one line, clear CTA */
.fh-topic-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px}
@media (max-width:620px){.fh-topic-grid{grid-template-columns:1fr}}
.fh-topic-card{background:var(--card); border:1px solid var(--bd); border-radius:var(--radius,16px); padding:22px 24px 20px; display:flex; flex-direction:column; gap:8px; transition:border-color var(--fh-dur,200ms) var(--fh-ease,ease), transform var(--fh-dur,200ms) var(--fh-ease,ease)}
.fh-topic-card:hover{transform:translateY(-2px); border-color:var(--pill-bd)}
.fh-topic-card h3{margin:0; font-size:1.18rem; line-height:1.25; font-weight:730; color:var(--ink)}
.fh-topic-card p{margin:0; color:var(--ink); font-size:.97rem; line-height:1.5; flex:1}
.fh-topic-card .rd{display:flex; align-items:center; gap:10px; margin-top:6px; font-size:.9rem}
.fh-topic-card .rd .read{color:var(--accent-text); font-weight:700}
.fh-topic-card .rd .rt{color:var(--muted)}

/* FAQ — one panel, divided rows */
.fh-topic-faq{background:var(--card); border:1px solid var(--bd); border-radius:var(--radius-lg,24px); overflow:hidden; margin-top:6px; max-width:760px}
.fh-topic-qa{padding:22px 26px; border-top:1px solid var(--bd)}
.fh-topic-qa:first-child{border-top:0}
.fh-topic-qa h3{margin:0 0 6px; font-size:1.06rem; font-weight:730; color:var(--ink)}
.fh-topic-qa p{margin:0; color:var(--ink); font-size:1rem; line-height:1.55}

/* key-terms chips */
.fh-topic-chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:4px}
.fh-topic-term{font-size:.95rem; font-weight:600; color:var(--pos); background:var(--soft); padding:6px 15px; border-radius:999px; border:1px solid var(--bd)}
.fh-topic-term:hover{border-color:var(--pos)}

/* where to go next — sibling clusters (quiet) */
.fh-topic-rel{display:grid; grid-template-columns:1fr 1fr 1fr; gap:13px; margin-top:4px}
@media (max-width:680px){.fh-topic-rel{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.fh-topic-rel{grid-template-columns:1fr}}
.fh-topic-relcard{display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid var(--bd); border-radius:14px; padding:15px 17px; transition:border-color var(--fh-dur,200ms) var(--fh-ease,ease), background var(--fh-dur,200ms) var(--fh-ease,ease)}
.fh-topic-relcard:hover{border-color:var(--pill-bd); background:var(--soft)}
.fh-topic-relcard .d{width:38px; height:38px; border-radius:11px; background:var(--bg); display:grid; place-items:center; font-size:1.15rem; flex:0 0 auto}
.fh-topic-relcard b{font-size:1rem; font-weight:720; color:var(--ink); display:block; line-height:1.2}
.fh-topic-relcard span{font-size:.85rem; color:var(--muted)}

/* in the news — the timely pillar surfacing */
.fh-topic-newsband{background:var(--soft); border:1px solid var(--bd); border-radius:var(--radius-lg,24px); padding:26px 28px}
.fh-topic-newsband .top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.fh-topic-newsband .top h2{margin:0; font-size:1.2rem; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:11px}
.fh-topic-pulse{width:10px; height:10px; border-radius:50%; background:var(--neg); box-shadow:0 0 0 0 var(--neg); animation:fh-topic-pulse 2.4s infinite; flex:0 0 auto}
@keyframes fh-topic-pulse{0%{box-shadow:0 0 0 0 rgba(185,28,28,.4)}70%{box-shadow:0 0 0 9px rgba(185,28,28,0)}100%{box-shadow:0 0 0 0 rgba(185,28,28,0)}}
@media (prefers-reduced-motion:reduce){.fh-topic-pulse{animation:none}}
.fh-topic-allnews{font-size:.92rem; font-weight:700; color:var(--neg); white-space:nowrap}
.fh-topic-news2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:620px){.fh-topic-news2{grid-template-columns:1fr}}
.fh-topic-ncard{background:var(--card); border:1px solid var(--bd); border-radius:14px; padding:17px 19px; transition:transform var(--fh-dur,200ms) var(--fh-ease,ease)}
.fh-topic-ncard:hover{transform:translateY(-2px)}
.fh-topic-ncard .date{font-size:.82rem; color:var(--neg); font-weight:700; margin-bottom:6px}
.fh-topic-ncard h3{margin:0; font-size:1.02rem; line-height:1.32; font-weight:720; color:var(--ink)}
.fh-topic-news-empty{color:var(--muted); font-size:1rem; margin:0}
.fh-topic-news-empty a{color:var(--accent-text); font-weight:700}

/* soft CTA */
.fh-topic-cta{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--ink); color:var(--bg); border-radius:var(--radius-lg,24px); padding:26px 30px}
.fh-topic-cta h3{margin:0 0 4px; font-size:1.28rem; font-weight:800; color:inherit}
.fh-topic-cta p{margin:0; font-size:.97rem; opacity:.82}
.fh-topic-cta .btn{background:var(--accent); color:#3b2a12; font-weight:750; font-size:1rem; padding:13px 24px; border-radius:12px; white-space:nowrap}
.fh-topic-cta .btn:hover{filter:brightness(1.05)}

.fh-topic-disc{margin-top:40px; padding-top:18px; border-top:1px solid var(--bd); font-size:.85rem; color:var(--muted); max-width:660px}
.fh-topic :focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}