/* Shared editorial layout for the Fluint topic pages. */
.topic-page { --topic-ink:#292929; --topic-green:#587878; --topic-tint:#e5edeb; color:var(--topic-ink); }
.topic-page .wrap { width:min(1180px, calc(100% - 64px)); margin-inline:auto; }
.topic-hero { background:#292929; color:#fff; padding:100px 0 86px; }
.topic-eyebrow { color:#a8c0bf; font-size:14px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; margin:0 0 25px; }
.topic-hero h1 { font-family:Onest,sans-serif; font-size:clamp(36px,4.8vw,68px); line-height:1.12; letter-spacing:-.04em; font-weight:500; max-width:1000px; margin:0 0 30px; }
.topic-lead { color:#bccdcb; max-width:850px; font-size:clamp(19px,2vw,25px); line-height:1.55; margin:0; }
.topic-links { display:flex; gap:20px 32px; flex-wrap:wrap; margin-top:32px; align-items:center; }
.topic-page .topic-links a, .topic-page a.link { display:inline-flex; align-items:center; gap:10px; font-size:18px; color:var(--topic-green); text-decoration:none; font-weight:500; }
.topic-page .topic-links a::after { content:'›'; margin-left:3px; }
.topic-page .topic-hero a, .topic-page .topic-dark a { color:#a8c0bf; }
.topic-page a:hover { text-decoration:underline; text-underline-offset:5px; }
.topic-page a:focus-visible, .topic-page summary:focus-visible { outline:2px solid #7fa2a1; outline-offset:6px; }
.topic-section { padding:80px 0; }
.topic-section:nth-of-type(even) { background:#f1f1f0; }
.topic-section h2 { font-family:Onest,sans-serif; font-size:clamp(28px,3.2vw,44px); font-weight:550; line-height:1.2; letter-spacing:-.025em; margin:0 0 25px; max-width:960px; }
.topic-section h3 { font-family:Onest,sans-serif; font-size:23px; line-height:1.3; font-weight:550; margin:0 0 18px; }
.topic-section p, .topic-section li { font-size:18px; line-height:1.65; }
.topic-section p { margin:0 0 20px; max-width:880px; }
.topic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:36px 0 0; }
.topic-card { padding:30px; background:#fff; border:1px solid #d8dddb; border-top:3px solid #7f9f9e; border-radius:0 0 28px 0; min-width:0; }
.topic-card p { font-size:17px; }
.topic-card p:last-child { margin-bottom:0; }
.topic-split { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
.topic-split img { width:100%; height:auto; display:block; border-radius:0 0 28px 0; }
.topic-note { padding:24px 28px; background:var(--topic-tint); border-left:3px solid #7f9f9e; margin:30px 0; font-size:17px; line-height:1.65; }
.topic-steps { list-style:none; padding:0; margin:36px 0; counter-reset:step; }
.topic-steps > li { counter-increment:step; position:relative; border-top:1px solid #cbd5d3; padding:25px 0 25px 68px; }
.topic-steps > li::before { content:counter(step,decimal-leading-zero); position:absolute; top:25px; left:0; color:var(--topic-green); font-family:Onest,sans-serif; font-size:24px; }
.topic-steps p { margin-bottom:0; }
.topic-faq { margin-top:30px; }
.topic-faq details { border-top:1px solid #cbd5d3; padding:22px 0; }
.topic-faq summary { cursor:pointer; list-style:none; font-size:20px; font-weight:500; padding-right:35px; position:relative; }
.topic-faq summary::-webkit-details-marker { display:none; }
.topic-faq summary::after { content:'›'; position:absolute; right:4px; color:var(--topic-green); transform:rotate(0deg); }
.topic-faq details[open] summary::after { transform:rotate(90deg); }
.topic-faq details p { margin:20px 0 0; }
.topic-section.topic-dark { background:#292929; color:#fff; }
.topic-dark p { color:#bccdcb; }
.topic-section.topic-tint { background:var(--topic-tint); }
.topic-page .topic-kicker { color:var(--topic-green); text-transform:uppercase; letter-spacing:.08em; font-size:13px; }
@media(max-width:820px) {
 .topic-page .wrap { width:calc(100% - 40px); }
 .topic-hero { padding:60px 0; }
 .topic-section { padding:52px 0; }
 .topic-grid, .topic-split { grid-template-columns:1fr; gap:20px; }
 .topic-card { padding:24px; }
 .topic-links { gap:18px 26px; }
 .topic-steps > li { padding-left:48px; }
}
.topic-section .topic-eyebrow { color:#587878; }
.topic-section.topic-dark .topic-eyebrow { color:#a8c0bf; }
.topic-soft { background:#f1f1f0; }

.topic-page .topic-hero h1, .topic-page .topic-dark h2, .topic-page .topic-dark h3 { color:#fff; }