/* ============================================================
kaamfu.css
Single stylesheet for all Kaamfu Elementor HTML widgets:
- Evidence Carousel
- Pricing Section
- Get Started Section
Load once in the page :
============================================================ */
/* ── Reset ──────────────────────────────────────────────────── */
.kaamfu-car-wrap *, .kaamfu-car-wrap *::before, .kaamfu-car-wrap *::after,
.kf-pricing *, .kf-pricing *::before, .kf-pricing *::after,
.kf-start *, .kf-start *::before, .kf-start *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ── Design tokens ──────────────────────────────────────────── */
:root {
--kf-border: #0000001A;
--kf-check-bg: #e6f4ea;
--kf-check-stroke: #22c55e;
--kf-tag-bg: #f3f3f3;
--kf-tag-text: #444444;
}
.elementor .kaamfu-h2-p {
font-size: .95rem !important;
}
.elementor .kaamfu-h3-p {
font-size: .875rem !important;
line-height: 1.6 !important;
}
.popup-header {
padding: 15px 20px !important;
}
.close-btn {
height: 20px;
line-height: 21px;
}
.popup-header img {
height: 20px !important;
width: auto !important;
}
.popup-button {
font-size: 15px;
font-weight: 300;
line-height: 24px;
border-radius: 100px 100px 100px 100px;
padding: 8px 20px;
display: none !important;
}
#popup .popup-content,
#popup .form-step {
padding:0;
}
#popup .wsm-content-wrap,
#popup .wsm-form-fields {
padding: 10px 20px;
}
#popup .form-step.step-2 {
padding: 10px 20px;
}
#multi-step-form .button-container {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
position: sticky;
bottom: 0;
left: 0;
width: 100%;
height: 53px;
background-color: #f5f5f5;
border-top: 1px solid #0000001A;
padding: 9px 20px;
box-sizing: border-box;
z-index: 10;
margin-top: 0;
}
#multi-step-form .button {
font-size: 15px;
font-weight: 300;
line-height: 18px;
border-radius: 100px 100px 100px 100px;
padding: 8px 20px;
cursor: pointer;
}
#multi-step-form {
padding: 0;
}
.wsm-date-display-text {
position: absolute;
left: 0;
top: 0;
font-size: 13px;
pointer-events: none;
color: inherit;
padding: 8px 0;
width: 100%;
}
#multi-step-form .button-container {
margin-top: 0;
}
/* ── Section label ──────────────────────────────────────────── */
.section-label {
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
color: #000;
text-align: center;
margin-bottom: 7px;
}
/* ── Check icon ─────────────────────────────────────────────── */
.kf-check-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
}
/* ── Checklist ──────────────────────────────────────────────── */
.kf-checklist {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
padding-left: 0 !important;
}
.kf-checklist li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.875rem;
color: #000;
line-height: 1.55;
font-weight: 400;
}
/* ── Shared footer ──────────────────────────────────────────── */
.kf-pricing__footer {
text-align: center;
}
.kf-pricing__footer-text {
color: #000;
font-weight: 600 !important;
}
/* =============================================================
CAROUSEL
============================================================= */
.kaamfu-car-wrap {
overflow: hidden;
background: transparent;
}
.kaamfu-car-label {
text-align: center;
padding-bottom: 20px;
}
.kaamfu-car-outer {
overflow: hidden;
position: relative;
margin-bottom: 20px;
padding-top:10px;
}
/* Fade edges — update hex if section background isn't white */
.kaamfu-car-outer::before,
.kaamfu-car-outer::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100px;
z-index: 2;
pointer-events: none;
}
.kaamfu-car-outer::before {
left: 0;
background: linear-gradient(to right, #ffffff, transparent);
}
.kaamfu-car-outer::after {
right: 0;
background: linear-gradient(to left, #ffffff, transparent);
}
.kaamfu-car-track {
display: flex;
gap: 16px;
width: max-content;
animation: kaamfu-scroll 44s linear infinite;
}
.kaamfu-car-track:hover {
animation-play-state: paused;
}
@keyframes kaamfu-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.kaamfu-car-card {
width: 268px;
flex-shrink: 0;
border: 1px solid #e8e8e5;
border-radius: 12px;
background: #ffffff;
padding: 26px 22px 20px;
display: flex;
flex-direction: column;
gap: 14px;
box-sizing: border-box;
cursor: default;
transition: border-color 0.2s;
}
.kaamfu-car-card:hover {
border-color: #ccc;
}
.kaamfu-car-stat {
font-size: 38px;
font-weight: 500;
color: #111;
line-height: 1;
letter-spacing: -0.02em;
margin: 0;
}
.kaamfu-car-stat.is-quote {
font-size: 15px;
font-weight: 400;
font-style: italic;
line-height: 1.5;
color: #111;
letter-spacing: 0;
}
.kaamfu-car-body {
font-size: 16px;
color: #595959;
flex: 1;
margin: 0;
}
.kaamfu-car-footer {
border-top: 1px solid #f0efe9;
padding-top: 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.kaamfu-car-firm {
font-size: 14px;
font-weight: 600;
color: #000;
letter-spacing: 0.04em;
margin: 0;
}
.kaamfu-car-source {
font-size: 12px;
color: #595959;
margin: 0;
}
/* =============================================================
PRICING
============================================================= */
.kf-pricing {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.kf-pricing__header {
text-align: center;
margin-bottom: 30px;
}
.kf-pricing__subtitle {
font-size: 18px;
color: #595959;
font-weight: 300;
padding-top: 20px;
}
.kf-pricing__box {
width: 100%;
max-width: 1200px;
background: #fff;
border: 1px solid var(--kf-border);
border-radius: 10px;
display: flex !important;
flex-wrap: nowrap !important;
overflow: hidden;
margin-bottom: 20px;
}
.kf-tier {
flex: 1 1 0%;
min-width: 0;
padding: 30px;
}
.kf-tier:not(:last-child) {
border-right: 1px solid var(--kf-border);
}
.kf-tier__label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--kf-tag-bg);
background: #000;
padding: 6px 14px;
border-radius: 6px;
width: fit-content;
margin-bottom: 20px;
display: inline-block;
}
.kf-tier__price-row {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.kf-tier__price {
font-size: clamp(2rem, 3.5vw, 2.75rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: #000;
}
.kf-tier__price-unit {
font-size: 0.85rem;
color: #000;
font-weight: 500;
}
.kf-tier__desc {
font-size: 16px;
color: #595959;
margin: 18px 0 28px;
min-height: 85px;
}
.kf-tier__divider {
width: 100%;
height: 1px;
background: var(--kf-border);
margin-bottom: 24px;
}
@media (max-width: 767px) {
.kf-pricing__box {
flex-wrap: wrap !important;
}
.kf-tier {
flex: 1 1 100% !important;
padding: 28px 22px;
}
.kf-tier:not(:last-child) {
border-right: none;
border-bottom: 1px solid var(--kf-border);
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.kf-tier { padding: 32px 22px; }
.kf-tier__price { font-size: 1.85rem; }
.kf-tier__price-unit { font-size: 0.78rem; }
.kf-tier__desc { font-size: 0.82rem; }
.kf-tier__label { font-size: 0.62rem; }
.kf-checklist li { font-size: 0.8rem; }
}
/* =============================================================
GET STARTED
============================================================= */
.kf-start {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.kf-start h2 {
text-align: center;
}
.kf-start .subhead {
font-size: 18px;
color: #696969;
text-align: center;
margin-bottom: 30px;
max-width: 480px;
padding-top: 20px;
}
.kf-start__paths {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%;
max-width: 880px;
}
.kf-path {
border-radius: 10px;
padding: 40px 36px;
display: flex;
flex-direction: column;
}
.kf-path--light {
background: #fff;
border: 1px solid var(--kf-border);
}
.kf-path--dark {
background: #111;
border: 1px solid #111;
}
.kf-path__badge {
display: inline-block;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 10px;
margin-bottom: 20px;
width: fit-content;
}
.kf-path--light .kf-path__badge { background: #f0f0ee; color: #666; }
.kf-path--dark .kf-path__badge { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.kf-path__title {
font-size: 22px;
font-weight: 500;
margin-bottom: 16px;
line-height: 1.2;
}
.kf-path--light .kf-path__title { color: #111; }
.kf-path--dark .kf-path__title { color: #fff; }
.kf-path__desc {
font-size: 16px;
margin-bottom: 32px;
flex: 1;
}
.kf-path--light .kf-path__desc { color: #666; }
.kf-path--dark .kf-path__desc { color: rgba(255,255,255,0.6); }
.kf-path__features {
list-style: none;
display: flex;
flex-direction: column;
gap: 11px;
margin-bottom: 36px;
padding-left: 0 !important;
}
.kf-path__features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.875rem;
line-height: 1.55;
}
.kf-path--light .kf-path__features li { color: #444; }
.kf-path--dark .kf-path__features li { color: rgba(255,255,255,0.75); }
.kf-path__features .kf-check-icon {
width: 16px;
height: 16px;
}
.kf-path__divider {
width: 100%;
height: 1px;
margin-bottom: 28px;
}
.kf-path--light .kf-path__divider { background: var(--kf-border); }
.kf-path--dark .kf-path__divider { background: rgba(255,255,255,0.1); }
.kf-path__price-line {
margin-bottom: 24px;
}
.kf-path__price {
font-size: 28px;
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 4px;
}
.kf-path--light .kf-path__price { color: #111; }
.kf-path--dark .kf-path__price { color: #fff; }
.kf-path__cta {
display: block;
width: 100%;
padding: 14px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
text-align: center;
text-decoration: none;
border: none;
transition: opacity 0.15s ease;
}
.kf-path__cta:hover { opacity: 0.85; }
.kf-path--light .kf-path__cta { background: #111; color: #fff; }
.kf-path--dark .kf-path__cta { background: #fff; color: #111; }
.kf-path--light .kf-path__cta:hover { color: #fff !important; }
.kf-path__cta-sub {
font-size: 11px;
text-align: center;
margin-top: 12px;
}
.kf-path--light .kf-path__cta-sub { color: #bbb; }
.kf-path--dark .kf-path__cta-sub { color: rgba(255,255,255,0.3); }
@media (max-width: 767px) {
.kf-start__paths { grid-template-columns: 1fr; }
.kf-path { padding: 28px 24px; }
}
/* =============================================================
STAGES (Race to Autonomy)
============================================================= */
.kf-stages {
display: flex;
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.kf-stage {
flex: 1 1 0%;
padding: 36px 28px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* ── Graduated backgrounds ── */
.kf-stage--1 { background: #f0f0eb; }
.kf-stage--2 { background: #c6c7b9; }
.kf-stage--3 { background: #878b7b; }
.kf-stage--4 { background: #484c42; }
.kf-stage--5 { background: #2b2e28; }
/* ── Step number ── */
.kf-stage__num {
font-size: 14px;
font-weight: 400;
letter-spacing: 0.02em;
}
.kf-stage--1 .kf-stage__num,
.kf-stage--2 .kf-stage__num { color: #888; }
.kf-stage--3 .kf-stage__num,
.kf-stage--4 .kf-stage__num,
.kf-stage--5 .kf-stage__num { color: rgba(255,255,255,0.45); }
/* ── Title ── */
.kf-stage__title {
font-size: 22px;
font-weight: 700;
line-height: 1.15;
margin: 0;
}
.kf-stage--1 .kf-stage__title,
.kf-stage--2 .kf-stage__title { color: #1a1a1a; }
.kf-stage--3 .kf-stage__title,
.kf-stage--4 .kf-stage__title,
.kf-stage--5 .kf-stage__title { color: #ffffff; }
/* ── Body ── */
.kf-stage__body {
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.kf-stage--1 .kf-stage__body,
.kf-stage--2 .kf-stage__body { color: #444; }
.kf-stage--3 .kf-stage__body,
.kf-stage--4 .kf-stage__body,
.kf-stage--5 .kf-stage__body { color: rgba(255,255,255,0.65); }
/* ── Responsive ── */
@media (max-width: 767px) {
.kf-stages {
flex-direction: column;
border-radius: 10px;
}
}
/* =============================================================
STAT CARD (dark hero stat block)
============================================================= */
.kf-stat-card {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 400px;
border: 1px solid var(--kf-border);
border-radius: 10px;
padding:20px;
}
.kf-stat-card__label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
color: #595959;
margin: 0;
}
.kf-stat-card__number {
font-size: 40px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: #000;
margin: 0;
}
.kf-stat-card__body {
font-size: 14px;
font-weight: 400;
line-height: 1.55;
color: #333;
margin: 0;
}
.kf-stat-card__source {
font-size: 11px;
color: #595959;
margin: 0;
padding-top: 4px;
}
/* =============================================================
SECTION DIVIDER (line — label — line)
Works on two structures:
1. Plain element: Label
2. Elementor heading: add kf-divider to the widget class list
Lines are 30px by default; grow to fill available space on
wider containers via min-width clamp.
============================================================= */
/* ── Shared layout ── */
.kf-divider .elementor-widget-container {
display: flex !important;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}
/* ── Label typography (Elementor heading span) ── */
.kf-divider .elementor-heading-title {
white-space: nowrap;
}
/* ── Lines via pseudo-elements ── */
.kf-divider .elementor-widget-container::before,
.kf-divider .elementor-widget-container::after {
content: '';
width: clamp(30px, 5%, 60px);
flex-shrink: 0;
height: 1px;
background: #000;
}
/* ── section-label gets the same treatment ── */
.section-label {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
white-space: nowrap;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}
.section-label::before,
.section-label::after {
content: '';
width: clamp(30px, 5%, 60px);
flex-shrink: 0;
height: 1px;
background: #000;
}
/* ── Alignment modifiers ── */
/* Lines always show on both sides — only the label position shifts */
.kf-divider--left .elementor-widget-container,
.section-label--left {
justify-content: flex-start;
}
.kf-divider--right .elementor-widget-container,
.section-label--right {
justify-content: flex-end;
}
/* =============================================================
INFO BAR (icon + text + inline link)
============================================================= */
.kf-infobar {
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
}
.kf-infobar {
padding-left: 33px;
}
@media (max-width: 768px) {
.kf-infobar {
padding-left: 29px;
}
}
.kf-infobar__icon {
flex-shrink: 0;
width: 30px;
height: 30px;
margin-top: 2px;
color: #000;
}
.kf-infobar__icon {
width: 30px;
height: 30px;
}
@media (max-width: 768px) {
.kf-infobar__icon {
width: 23.25px;
height: 23.25px;
}
}
.kf-infobar__link {
color: #000 !important;
text-decoration: underline !important;
}
/* =============================================================
STACK CARD (dark consolidation block)
============================================================= */
.kf-stack {
background: #1a1a1a;
border-radius: 10px;
padding: 40px;
color: #fff;
width: 100%;
}
.kf-stack__header {
margin-bottom: 12px;
}
/* ── Two-column layout ── */
.kf-stack__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.kf-stack__left {
display: flex;
flex-direction: column;
}
.kf-stack__title {
margin: 0 0 10px;
color: rgba(255,255,255) !important;
}
.kf-stack .kf-stage__title {
color: rgba(255,255,255) !important;
margin: 0 0 10px;
}
.kf-stack__desc {
color: rgba(255,255,255,0.6);
max-width: 620px;
}
/* ── Feature grid (right col — cards stacked) ── */
.kf-stack__grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.kf-stack__item {
background: rgba(255,255,255,0.06);
border: 0.5px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
}
.kf-stack__item-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
}
.kf-stack__item-content {
display: flex;
flex-direction: column;
gap: 6px;
}
.kf-stack__item .kf-stage__title {
margin: 0 !important;
}
.kf-stack__item-body {
color: rgba(255,255,255,0.55);
margin: 0;
}
@media (max-width: 767px) {
.kf-stack__item { flex-direction: column; }
}
.kf-stack__item-header {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 12px;
}
.kf-stack__item-header .kf-stage__title {
margin: 0 !important;
}
.kf-stack__item-icon {
flex-shrink: 0;
margin-bottom: 0; /* remove the old bottom margin */
}
.kf-stack__list {
list-style: none;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 10px;
}
.kf-stack__list li {
display: flex;
align-items: flex-start;
gap: 10px;
color: rgba(255,255,255,0.6);
line-height: 1.6;
margin:0 !important;
}
.kf-stack__list li::before {
display: none;
}
.kf-stack__list-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 3px;
}
.kf-stack__list li strong {
color: rgba(255,255,255,0.9);
font-weight: 600;
}
/* ── Footer link ── */
.kf-stack__link {
font-weight: 600 !important;
color: #fff !important;
text-decoration: underline !important;
display: inline-block;
margin-top: auto;
}
/* ── Divider label inside dark card ── */
.kf-stack .kf-divider,
.kf-stack .kf-divider .elementor-widget-container {
justify-content: flex-start;
margin-bottom: 12px;
}
.kf-stack .kf-divider .elementor-heading-title,
.kf-stack .section-label {
color: rgba(255,255,255,0.5) !important;
}
.kf-stack .kf-divider::before,
.kf-stack .kf-divider::after,
.kf-stack .kf-divider .elementor-widget-container::before,
.kf-stack .kf-divider .elementor-widget-container::after,
.kf-stack .section-label::before,
.kf-stack .section-label::after {
background: rgba(255,255,255,0.3);
}
/* =============================================================
PHASE CARDS (horizontal slider + mobile accordion)
============================================================= */
/* ── Cards grid ── */
.kf-phase-cards {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-radius: 12px 12px 0 0;
overflow: hidden;
}
.kf-phase-cards.is-closed { border-radius: 12px; }
.kf-opportunity__headline,
.kf-opportunity__subhead {
text-align: center;
}
/* ── Single card ── */
.kf-phase-card {
padding: 28px 24px 44px;
position: relative;
cursor: pointer;
display: flex;
flex-direction: column;
min-height: 200px;
transition: filter 0.2s;
user-select: none;
}
.kf-phase-card:hover { filter: brightness(0.93); }
/* card colors */
.kf-phase-card:nth-child(1) { background: #e8e5e0; color: #1a1a1a; }
.kf-phase-card:nth-child(2) { background: #a8a99a; color: #1a1a1a; }
.kf-phase-card:nth-child(3) { background: #8a9080; color: #fff; }
.kf-phase-card:nth-child(4) { background: #6a7060; color: #fff; }
.kf-phase-card:nth-child(5) { background: #2a2e28; color: #fff; }
/* active card turns white */
.kf-phase-card.is-active {
background: #fff !important;
color: #1a1a1a !important;
filter: none !important;
}
.kf-phase-card__num { font-size: 12px; font-weight: 600; opacity: 0.5; margin-bottom: 12px; }
.kf-phase-card__name { font-size: 20px; font-weight: 700; line-height: 1.2; margin-bottom: 10px; }
.kf-phase-card__desc { font-size: 13px; line-height: 1.5; opacity: 0.65; flex: 1; }
/* ── Chevron ── */
.kf-phase-card__chevron {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
opacity: 0.35;
transition: transform 0.3s, opacity 0.2s;
}
.kf-phase-card:hover .kf-phase-card__chevron { opacity: 0.65; }
.kf-phase-card.is-active .kf-phase-card__chevron {
opacity: 0.6;
transform: translateX(-50%) rotate(180deg);
}
/* ── Progress bar ── */
.kf-phase-card__bar {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 0;
background: rgba(255,255,255,0.55);
transition: none;
}
.kf-phase-card:nth-child(1) .kf-phase-card__bar,
.kf-phase-card:nth-child(2) .kf-phase-card__bar { background: rgba(0,0,0,0.2); }
.kf-phase-card.is-active .kf-phase-card__bar { background: rgba(0,0,0,0.35); }
.kf-phase-card.is-ticking .kf-phase-card__bar { transition: width 5s linear; width: 100%; }
/* ── Detail panel ── */
.kf-phase-panel {
background: #fff;
border-radius: 0 0 12px 12px;
overflow: hidden;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s ease;
}
.kf-phase-panel.is-open { grid-template-rows: 1fr; }
.kf-phase-panel__inner { overflow: hidden; }
.kf-phase-pane {
display: none;
padding: 36px 40px;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.kf-phase-pane.is-active { display: grid; }
.kf-phase-pane__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #999;
margin-bottom: 10px;
}
.kf-phase-pane__title {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.3;
margin-bottom: 12px;
}
.kf-phase-pane__body {
font-size: 15px;
line-height: 1.7;
color: #555;
}
.kf-phase-pane__body em { font-style: normal; color: #1a1a1a; font-weight: 500; }
.kf-phase-items { display: flex; flex-direction: column; gap: 10px; }
.kf-phase-item {
background: #f7f7f6;
border-radius: 8px;
padding: 13px 16px;
display: flex;
align-items: flex-start;
gap: 10px;
}
.kf-phase-item svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: #999; }
.kf-phase-item p { font-size: 14px; line-height: 1.55; color: #444; }
/* ── Footer ── */
.kf-phase-footer { text-align: center; }
.kf-phase-footer p { font-weight: 600; color: #000; }
.kf-phase-footer a { color: #000; text-decoration: underline; }
.kf-phase-footer a:hover { color: #000; }
/* ── Mobile: vertical accordion ── */
@media (max-width: 767px) {
.kf-phase-cards,
.kf-phase-cards.is-closed {
grid-template-columns: 1fr;
border-radius: 12px;
gap: 2px;
}
.kf-phase-card {
flex-direction: row;
align-items: center;
padding: 16px 18px;
min-height: auto;
gap: 12px;
border-radius: 0;
}
.kf-phase-card:first-child { border-radius: 10px 10px 0 0; }
.kf-phase-card:last-child { border-radius: 0 0 10px 10px; }
.kf-phase-card__num { margin-bottom: 0; min-width: 24px; }
.kf-phase-card__name { font-size: 16px; margin-bottom: 0; flex: 1; }
.kf-phase-card__desc { display: none; }
.kf-phase-card__chevron {
position: static;
transform: none;
flex-shrink: 0;
margin-left: auto;
opacity: 0.4;
}
.kf-phase-card.is-active .kf-phase-card__chevron {
transform: rotate(180deg);
opacity: 0.7;
}
.kf-phase-panel { border-radius: 0 0 12px 12px; }
.kf-phase-pane { grid-template-columns: 1fr; gap: 20px; padding: 24px 18px; }
.kf-phase-pane__title { font-size: 18px; }
.kf-phase-pane__body { font-size: 14px; }
.kf-phase-item { padding: 12px 14px; }
.kf-phase-item p { font-size: 13px; }
.kf-phase-footer { margin-top: 28px; }
}
/* ── Progress bar ── */
.kf-phase-card__bar {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 0;
background: rgba(255,255,255,0.55);
}
.kf-phase-card:nth-child(1) .kf-phase-card__bar,
.kf-phase-card:nth-child(2) .kf-phase-card__bar { background: rgba(0,0,0,0.2); }
.kf-phase-card.is-active .kf-phase-card__bar { background: rgba(0,0,0,0.35); }
/* ── Responsive ── */
@media (max-width: 767px) {
.kf-stack { padding: 28px 24px; }
.kf-stack__inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 768px) {
h1,
.elementor-widget-heading h1.elementor-heading-title,
.h1,selector h1,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-kit-6 h1,
.h1-headin-font-size h2 {
font-weight: 600 !important;
font-size: 2.2em !important;
line-height: 40px !important;
letter-spacing: -2.16px !important;
}
.elementor .kaamfu-h1-p {
font-size: 1rem !important;
}
.h2, h2, .elementor-widget-heading h2.elementor-heading-title {
font-size: 27px !important;
}
.h2 br, h2 br, .elementor-widget-heading h2.elementor-heading-title br {
display:none;
}
.elementor .kaamfu-h2-p {
font-size: .95rem !important;
line-height: 1.7 !important;
}
.h3, h3, .elementor-widget-heading h3.elementor-heading-title {
font-size: 1rem !important;
}
.elementor .kaamfu-h3-p {
font-size: .875rem !important;
line-height: 1.6 !important;
}
.kf-stat-card {
max-width:100%;
}
.kf-divider--left .elementor-widget-container,
.section-label--left {
justify-content: center;
}
.kf-divider--right .elementor-widget-container,
.section-label--right {
justify-content: center;
}
}