.about-method {
padding-block: var(--pad-section);
border-top: 1px solid var(--blk-border, var(--c-border));
}
.about-method__inner {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--pad-x);
display: flex;
flex-direction: column;
gap: 3.5rem;
}
.about-method__head {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 600px;
}
.about-method__title {
font-family: var(--f-heading);
font-size: var(--text-6xl);
line-height: 1.05;
color: var(--blk-text, var(--c-dark));
}
.about-method__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
background-color: var(--blk-border, var(--c-border));
border: 1px solid var(--blk-border, var(--c-border));
border-radius: var(--r-sm);
overflow: hidden;
}
.about-method__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.about-method__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.method-pillar {
background-color: var(--blk-surface, var(--c-white));
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.method-pillar__num {
font-family: var(--f-heading);
font-size: var(--text-7xl);
line-height: 1;
color: var(--blk-text, var(--light-text));
}
.method-pillar__title {
font-family: var(--f-heading);
font-size: var(--text-3xl);
color: var(--blk-text, var(--c-dark));
line-height: 1.15;
}
.method-pillar__desc {
font-family: var(--f-body);
font-size: var(--text-base);
line-height: 1.7;
color: var(--blk-text, var(--c-eyebrow-on-light));
flex: 1;
}
.method-pillar__tags {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--blk-border, var(--c-border));
}
.method-pillar__tag {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
border-radius: var(--r-full);
background-color: var(--blk-border, var(--c-gray));
font-family: var(--f-ui);
font-size: var(--text-xs);
font-weight: 600;
color: var(--blk-text, var(--c-eyebrow-on-light));
} .about-method.is-style-dark .method-pillar__num  { color: var(--dark-accent, #2EA3F1); }
.about-method.is-style-dark .method-pillar__desc { color: #94A3B8; }
@media (max-width: 1024px) {
.about-method__grid,
.about-method__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.about-method__grid,
.about-method__grid--cols-2,
.about-method__grid--cols-4 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.about-method__title { font-size: var(--text-5xl); }
}