/* THE AI SHOPPING ERA (pairs with js/shop.js). A light band between two
   dark sections: three steps on a rail, one line each. Fail-open. */
.as {
    position: relative;
    padding: clamp(5.5rem, 11vh, 8rem) 0;
    background:
        radial-gradient(ellipse 50% 60% at 50% 0%, rgba(213, 180, 115, 0.14), transparent 70%),
        #FAF9F6;
    color: #132019;
}
.as-shell { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.as-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.as-title { margin: 1.4rem 0 0; font: 700 clamp(2rem, 4.4vw, 3.6rem)/1.1 'Playfair Display', Georgia, serif; letter-spacing: -0.02em; }
.as-title em { font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif; font-weight: 400; color: #7C6432; }
.as-steps {
    position: relative;
    list-style: none;
    margin: clamp(3rem, 6vw, 4.5rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
}
.as-steps::before {
    content: "";
    position: absolute;
    top: 32px; left: 16.6%; right: 16.6%;
    height: 1px;
    background: linear-gradient(90deg, rgba(124, 100, 50, 0.15), rgba(124, 100, 50, 0.55), rgba(124, 100, 50, 0.15));
    transform-origin: 0 50%;
    transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}
.as-step { position: relative; display: flex; flex-direction: column; align-items: center; }
.as-ico {
    position: relative;
    z-index: 1;
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid rgba(124, 100, 50, 0.35);
    color: #7C6432;
    font-size: 20px;
    box-shadow: 0 0 0 8px #FAF9F6, 0 18px 36px -20px rgba(20, 28, 22, 0.45);
}
.as-step:last-child .as-ico { background: #D5B473; color: #132019; border-color: #D5B473; }
.as-step h3 { margin: 1.3rem 0 0.45rem; font: 700 clamp(1.3rem, 2vw, 1.6rem)/1.2 'Playfair Display', Georgia, serif; }
.as-step p { margin: 0; max-width: 17rem; color: rgba(19, 32, 25, 0.7); font: 400 1rem/1.5 'Plus Jakarta Sans', system-ui, sans-serif; }
.as-close { margin: clamp(2.75rem, 5vw, 3.75rem) 0 0; text-align: center; color: rgba(19, 32, 25, 0.75); font: 400 clamp(1.1rem, 1.6vw, 1.3rem)/1.4 'Plus Jakarta Sans', system-ui, sans-serif; }
.as-close b { color: #132019; font-weight: 700; }
[data-as-live] .as-step:last-child .as-ico::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px solid rgba(213, 180, 115, 0.8);
    animation: as-ping 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes as-ping { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.as-step { transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 180ms), transform 800ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 180ms); }
[data-as="armed"] .as-step { opacity: 0; transform: translate3d(0, 20px, 0); }
[data-as="armed"]::before { transform: scaleX(0); }
@media (max-width: 767px) {
    .as-shell { padding: 0 1.25rem; }
    .as-steps { grid-template-columns: 1fr; gap: 2.25rem; text-align: left; }
    .as-steps::before { top: 32px; bottom: 32px; left: 31.5px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, rgba(124, 100, 50, 0.5), rgba(124, 100, 50, 0.15)); transform-origin: 50% 0; }
    [data-as="armed"]::before { transform: scaleY(0); }
    .as-step { display: grid; grid-template-columns: 64px 1fr; column-gap: 1.1rem; align-items: center; }
    .as-ico { grid-row: span 2; }
    .as-step h3 { margin: 0 0 0.25rem; align-self: end; }
    .as-step p { align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .as *, .as *::before, .as *::after { animation: none !important; transition: none !important; } }