/* [aob_process] — Figma "process" (6007:10884): 4 steps on a timeline (line + dots above the cards), icons overlap the card top. */
:not(#_) .aob-process { position: relative; overflow: hidden; background: var(--aob-black-3); color: var(--aob-light-1); font-family: var(--aob-font-body); }

/* Faded candle (Figma: header logo crop at 21% opacity). */
:not(#_) .aob-process__flame { position: absolute; left: 93px; top: 86px; width: 117px; height: 131px; overflow: hidden; opacity: 0.21; pointer-events: none; display: none; }
:not(#_) .aob-process__flame img { position: absolute; left: -52.56%; top: 4.13%; width: 205.13%; height: 137.83%; max-width: none; }
@media (min-width: 1300px) { :not(#_) .aob-process__flame { display: block; } }

:not(#_) .aob-process__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: var(--aob-section-gap); text-align: center; }
:not(#_) .aob-process__badge { padding: 6px 8px; border: 1px solid var(--aob-gold-soft); border-radius: 44px; background: var(--aob-gold-faint); box-shadow: var(--aob-shadow-button-secondary); font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aob-white); }
:not(#_) .aob-process__title { max-width: 584px; margin: 0; font-family: var(--aob-font-display); font-size: clamp(32px, 4.4vw, 48px); font-weight: 400; line-height: 1.2; text-wrap: balance; color: var(--aob-white); }
:not(#_) .aob-process__accent { color: var(--aob-brand); }

/* Steps: mobile = single column with a vertical timeline on the left. */
:not(#_) .aob-process__steps { position: relative; display: grid; grid-template-columns: 1fr; gap: 48px; margin: 0; padding: 0 0 0 36px; list-style: none; }
:not(#_) .aob-process__steps::before { content: ""; position: absolute; left: 5px; top: 40px; bottom: 40px; width: 1px; background: var(--aob-black-1); }
:not(#_) .aob-process__step { position: relative; display: flex; flex-direction: column; margin: 0; }
:not(#_) .aob-process__dot { position: absolute; left: -36px; top: 35px; width: 10px; height: 10px; }

:not(#_) .aob-process__icon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; align-self: flex-start; box-sizing: border-box; width: 80px; height: 80px; margin: 0 0 -53px 24px; padding: 8px; border: 1px solid var(--aob-gold-soft); border-radius: 800px; background: var(--aob-black-3); filter: drop-shadow(0 2px 5px rgba(242, 106, 10, 0.29)); }
:not(#_) .aob-process__icon img { display: block; width: 38.4px; height: 38.4px; }

:not(#_) .aob-process__card { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 16px; box-sizing: border-box; padding: 16px var(--aob-pad-x) var(--aob-pad-y); border: 1px solid rgba(245, 242, 237, 0.08); border-radius: var(--aob-radius); background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05)); }
:not(#_) .aob-process__number { display: block; font-family: var(--aob-font-display); font-size: 40px; line-height: 48px; letter-spacing: -0.01em; text-align: right; color: rgba(255, 255, 255, 0.33); }
:not(#_) .aob-process__step-title { margin: 0 0 -8px; font-size: 20px; font-weight: 700; line-height: 26px; color: var(--aob-light-1); }
:not(#_) .aob-process__step-text { margin: 0; font-size: 16px; line-height: 22.4px; color: var(--aob-light-2); }

/* Tablet: 2×2, no timeline. */
@media (min-width: 640px) {
	:not(#_) .aob-process__steps { grid-template-columns: repeat(2, 1fr); gap: 64px 32px; padding-left: 0; }
	:not(#_) .aob-process__steps::before, :not(#_) .aob-process__dot { display: none; }
}
/* Desktop: 4 columns with the horizontal timeline; dots sit above the icon centers. */
@media (min-width: 1024px) {
	:not(#_) .aob-process__steps { grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 42px; }
	:not(#_) .aob-process__steps::before { display: block; left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 1px; }
	:not(#_) .aob-process__dot { display: block; left: 59px; top: -42px; }
}