.pension-flow-container {
--main-color:        #800020;
--main-color-alpha:  rgba(128,0,32,.06);
--main-color-border: rgba(128,0,32,.10);
--hover-shadow:      rgba(128,0,32,.10);
--dark-text:         #1a1014;
--soft-border:       rgba(168,120,46,.18);
--bg-white:          #faf8f6;
--gold:              #a8782e;
--gold-l:            #c9a96e;
--shadow-sm:         0 2px 8px rgba(0,0,0,.04), 0 0 0 1px rgba(168,120,46,.06);
--shadow-md:         0 8px 28px rgba(128,0,32,.07), 0 2px 6px rgba(0,0,0,.04), 0 0 0 1px rgba(168,120,46,.10);
--border-radius-sm:  7px;
--radius:            12px;
--tr:                0.20s cubic-bezier(.4,0,.2,1);
--spacing-xs:        0.625rem;
--spacing-sm:        0.9375rem;
--spacing-md:        1.25rem;
--spacing-lg:        1.875rem;
--spacing-xl:        2.5rem;
font-family: "Roboto Condensed", "Roboto", sans-serif;
color: var(--dark-text);
margin: var(--spacing-xl) auto;
padding: 0 var(--spacing-sm);
max-width: 820px;
box-sizing: border-box;
}
.pension-flow-container .timeline {
list-style: none;
padding: 0;
margin: 0;
position: relative;
} .pension-flow-container .timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 1.25rem;
width: 1px;
background: linear-gradient(
180deg,
transparent 0%,
rgba(168,120,46,.10) 4%,
rgba(168,120,46,.22) 12%,
rgba(168,120,46,.22) 88%,
rgba(168,120,46,.10) 96%,
transparent 100%
);
} .pension-flow-container .timeline::after {
content: "";
position: absolute;
top: 8%;
bottom: 8%;
left: calc(1.25rem - 1px);
width: 3px;
background: linear-gradient(
180deg,
transparent 0%,
rgba(168,120,46,.06) 15%,
rgba(168,120,46,.06) 85%,
transparent 100%
);
filter: blur(2px);
pointer-events: none;
}
.pension-flow-container .timeline-item {
margin-bottom: 2rem;
position: relative;
padding-left: 4rem;
} .pension-flow-container .timeline-item::before {
content: attr(data-step);
position: absolute;
left: 0;
top: 0;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
border-radius: 50%;
text-align: center;
background:
radial-gradient(ellipse at 40% 30%,
rgba(128,0,32,1) 0%,
rgba(70,0,16,1) 100%
);
color: #ede4d8;
font-family: "Roboto Slab", Georgia, serif;
font-weight: 300;
font-size: 1.05rem;
z-index: 10;
box-shadow:
0 0 0 3px var(--bg-white),
0 0 0 4px rgba(168,120,46,.22),
0 3px 10px rgba(128,0,32,.15),
0 1px 3px rgba(0,0,0,.08);
} .pension-flow-container .timeline-content {
position: relative;
background: #ffffff;
padding: 1.35rem 1.5rem 1.25rem;
border-radius: var(--radius);
border: 1px solid rgba(168,120,46,.12);
box-shadow: var(--shadow-sm);
transition: transform var(--tr), box-shadow var(--tr);
overflow: hidden;
} .pension-flow-container .timeline-content::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--main-color) 0%, var(--gold-l) 40%, transparent 80%);
opacity: .55;
} .pension-flow-container .timeline-content::after {
content: "";
position: absolute;
top: 10px; left: 0; bottom: 10px;
width: 3px;
background: linear-gradient(180deg, var(--main-color) 0%, var(--gold) 100%);
border-radius: 0 2px 2px 0;
opacity: .30;
transition: opacity var(--tr);
}
.pension-flow-container .timeline-content:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.pension-flow-container .timeline-content:hover::after {
opacity: .55;
}
.pension-flow-container .timeline-content h4,
.pension-flow-container .timeline-content h3.tmar-timeline-subheading {
font-family: "Roboto Slab", Georgia, serif;
font-weight: 300;
color: var(--main-color);
margin-top: 0;
margin-bottom: .5rem;
font-size: 1.12rem;
letter-spacing: .015em;
line-height: 1.35;
} .pension-flow-container .timeline-content h4::after,
.pension-flow-container .timeline-content h3.tmar-timeline-subheading::after {
content: "";
display: block;
width: 40px;
height: 1px;
margin-top: .5rem;
background: linear-gradient(90deg, rgba(168,120,46,.35), transparent);
}
.pension-flow-container .timeline-content p {
margin: 0;
line-height: 1.7;
font-size: 0.92rem;
color: #4a3f44;
}
.pension-flow-container .accent-word {
font-weight: 600;
color: var(--main-color);
} .pension-flow-container .flow-footer-note {
position: relative;
margin-top: 2.25rem;
padding: 1.25rem 1.5rem;
background: #0a0305;
border: 1px solid rgba(168,120,46,.10);
border-radius: var(--radius);
font-size: 0.9rem;
font-style: italic;
color: rgba(237,228,216,.70);
line-height: 1.65;
overflow: hidden;
isolation: isolate;
box-shadow:
0 4px 16px rgba(0,0,0,.15),
0 0 0 1px rgba(168,120,46,.04);
} .pension-flow-container .flow-footer-note::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
background-size: 128px 128px;
pointer-events: none;
z-index: 0;
} .pension-flow-container .flow-footer-note::after {
content: "";
position: absolute;
top: -30px;
left: -30px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(128,0,32,.16) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.pension-flow-container .flow-footer-note strong {
font-weight: 700;
color: #c9a96e;
position: relative;
z-index: 1;
} @media (max-width: 600px) { .pension-flow-container .timeline::before {
left: 0.625rem;
background: linear-gradient(
180deg,
transparent 0%,
rgba(128,0,32,.10) 8%,
rgba(128,0,32,.14) 50%,
rgba(128,0,32,.10) 92%,
transparent 100%
);
}
.pension-flow-container .timeline::after {
left: calc(0.625rem - 1px);
background: linear-gradient(
180deg,
transparent 0%,
rgba(128,0,32,.05) 20%,
rgba(128,0,32,.05) 80%,
transparent 100%
);
}
.pension-flow-container .timeline-item {
padding-left: 2.5rem;
margin-bottom: 1.5rem;
} .pension-flow-container .timeline-item::before {
width: 1.875rem;
height: 1.875rem;
line-height: 1.875rem;
font-size: .95rem;
left: 0;
box-shadow:
0 0 0 3px rgba(255,255,255,.50),
0 0 0 4px rgba(128,0,32,.20),
0 3px 10px rgba(128,0,32,.12),
0 1px 3px rgba(0,0,0,.06);
} .pension-flow-container .timeline-content {
padding: 1.1rem 1.25rem 1rem;
border-radius: var(--border-radius-sm);
background: rgba(255,255,255,.18);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,.40);
box-shadow:
0 8px 32px rgba(0,0,0,.06),
inset 0 1px 0 rgba(255,255,255,.50);
}
.pension-flow-container .timeline-content:hover {
transform: none;
} .pension-flow-container .timeline-content::before {
opacity: .35;
}
.pension-flow-container .timeline-content::after {
opacity: .20;
} .pension-flow-container .timeline-content h4,
.pension-flow-container .timeline-content h3.tmar-timeline-subheading {
font-size: 1.05rem;
color: var(--main-color);
}
.pension-flow-container .timeline-content p {
color: #4a3f44;
} .pension-flow-container .flow-footer-note {
padding: 1rem 1.25rem;
border-radius: var(--border-radius-sm);
background: rgba(255,255,255,.12);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,.35);
box-shadow:
0 6px 24px rgba(0,0,0,.06),
inset 0 1px 0 rgba(255,255,255,.45);
color: #4a3f44;
} .pension-flow-container .flow-footer-note::before { display: none; }
.pension-flow-container .flow-footer-note::after  { display: none; }
.pension-flow-container .flow-footer-note strong {
color: var(--main-color);
}
}