/* ==========================================================================
   Gym & Yoga Management ERP — brand-new "Active Wellness" design.
   Vibrant wellness-green + lime energy + calm teal. Signature: a member
   activity-ring dashboard. Scoped under .gy-scope (+ page-only .gy-header-bg).
   ========================================================================== */
.gy-scope {
    --gy-ink: #12211a;
    --gy: #12b76a;           /* vibrant wellness green */
    --gy-2: #2dd48a;
    --gy-3: #0a8f52;         /* deep green */
    --gy-lime: #9ede3a;      /* lime energy */
    --gy-teal: #0ea5a4;      /* calm / yoga */
    --gy-coral: #ff6b5d;     /* energy accent */
    --gy-soft: #e6f8ef;
    --gy-soft-2: #f3fbf7;
    --gy-line: #e1efe8;
    --gy-muted: #5c7268;
    --gy-grad: linear-gradient(120deg, #2dd48a 0%, #12b76a 55%, #0a8f52 100%);
    --gy-grad-lime: linear-gradient(120deg, #c6f16b 0%, #9ede3a 100%);
    --gy-grad-teal: linear-gradient(120deg, #2bd0cf 0%, #0ea5a4 100%);
    --gy-grad-coral: linear-gradient(120deg, #ff8a80 0%, #ff6b5d 100%);
    color: #34473e;
}
.gy-scope section { overflow: hidden; }

.gy-header-bg {
    background:
        radial-gradient(1100px 320px at 85% 130%, #d6f5e5 0%, rgba(214,245,229,0) 70%),
        #f2fbf6;
}

/* ---- shared ---- */
.gy-kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gy-3); background: var(--gy-soft); padding: .45rem .95rem; border-radius: 2rem; border: 1px solid #cdeeda; }
.gy-kicker.on-dark { color: #b8f0d3; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.gy-h { font-weight: 800; letter-spacing: -.02em; color: var(--gy-ink); line-height: 1.12; }
.gy-grad-txt { background: var(--gy-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.gy-lead { color: var(--gy-muted); font-size: 1.075rem; line-height: 1.7; }
.gy-head { max-width: 760px; margin: 0 auto 3.2rem; text-align: center; }
.gy-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.gy-head p { margin-top: 1rem; }

.gy-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; padding: .9rem 1.55rem; border-radius: .85rem; border: 0; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; }
.gy-btn i { transition: transform .25s ease; }
.gy-btn:hover i { transform: translate(2px,-2px); }
.gy-btn-primary { background: var(--gy-grad); color: #fff; box-shadow: 0 .8rem 1.8rem rgba(18,183,106,.32); }
.gy-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 1.2rem 2.4rem rgba(18,183,106,.44); }
.gy-btn-ghost { background: #fff; color: var(--gy-3); border: 1.5px solid var(--gy-line); }
.gy-btn-ghost:hover { color: var(--gy-3); transform: translateY(-3px); border-color: var(--gy); box-shadow: 0 1rem 2rem rgba(18,183,106,.14); }
.gy-btn-light { background: #fff; color: var(--gy-3); box-shadow: 0 .8rem 1.6rem rgba(10,30,22,.22); }
.gy-btn-light:hover { color: var(--gy-3); transform: translateY(-3px); }

/* ==========================================================================
   HERO — member activity-ring dashboard
   ========================================================================== */
.gy-hero {
    position: relative;
    background:
        radial-gradient(880px 460px at 84% -12%, #d8f6e6 0%, rgba(216,246,230,0) 60%),
        radial-gradient(760px 440px at 4% 108%, #eafbe0 0%, rgba(234,251,224,0) 55%),
        #f2fbf6;
}
.gy-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(125deg, rgba(18,183,106,.05) 0 2px, transparent 2px 26px);
    -webkit-mask-image: linear-gradient(180deg,#000,transparent 80%); mask-image: linear-gradient(180deg,#000,transparent 80%);
}
.gy-hero .container { position: relative; z-index: 2; }
.gy-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
.gy-hero-trust { display: flex; flex-wrap: wrap; gap: 1.3rem 1.9rem; }
.gy-hero-trust .t { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--gy-ink); font-size: .95rem; }
.gy-hero-trust .t i { color: var(--gy); font-size: 1.15rem; }

.gy-cardwrap { position: relative; }
.gy-card { position: relative; z-index: 2; background: #fff; border-radius: 1.5rem; border: 1px solid var(--gy-line); box-shadow: 0 2.4rem 5rem rgba(18,33,26,.16); padding: 1.5rem; }
.gy-card__hd { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.3rem; }
.gy-avatar { width: 3rem; height: 3rem; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; background: var(--gy-grad); box-shadow: 0 .5rem 1rem rgba(18,183,106,.34); }
.gy-card__hd h6 { margin: 0; font-weight: 800; color: var(--gy-ink); font-size: 1rem; }
.gy-card__hd span { font-size: .78rem; color: var(--gy-muted); }
.gy-streak { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 800; color: #c2410c; background: #fff0e6; padding: .32rem .65rem; border-radius: 2rem; }
.gy-streak i { color: #f97316; }
.gy-ringrow { display: flex; align-items: center; gap: 1.3rem; margin-bottom: 1.2rem; }
.gy-ring { --p: 83; width: 8.4rem; height: 8.4rem; border-radius: 50%; flex: none; position: relative; background: conic-gradient(var(--gy) calc(var(--p)*1%), #e6f1eb 0); }
.gy-ring::after { content: ""; position: absolute; inset: .85rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--gy-line); }
.gy-ring__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.gy-ring__c b { font-size: 1.7rem; font-weight: 800; color: var(--gy-ink); line-height: 1; }
.gy-ring__c small { font-size: .64rem; color: var(--gy-muted); margin-top: .2rem; text-align: center; }
.gy-mini { flex: 1; display: flex; flex-direction: column; gap: .55rem; }
.gy-mini .m { display: flex; align-items: center; gap: .55rem; font-size: .82rem; }
.gy-mini .m i { width: 1.9rem; height: 1.9rem; border-radius: .5rem; background: var(--gy-soft); color: var(--gy-3); display: flex; align-items: center; justify-content: center; flex: none; }
.gy-mini .m .k { color: var(--gy-muted); }
.gy-mini .m .v { margin-left: auto; font-weight: 800; color: var(--gy-ink); }
.gy-classes { border-top: 1px dashed var(--gy-line); padding-top: 1rem; }
.gy-classes .t { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gy-muted); margin-bottom: .7rem; }
.gy-cls { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; }
.gy-cls .ci { width: 2.2rem; height: 2.2rem; border-radius: .6rem; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.gy-cls.yoga .ci { background: var(--gy-grad-teal); } .gy-cls.gym .ci { background: var(--gy-grad); }
.gy-cls b { display: block; font-size: .86rem; font-weight: 800; color: var(--gy-ink); }
.gy-cls span { font-size: .72rem; color: var(--gy-muted); }
.gy-cls .st { margin-left: auto; font-size: .68rem; font-weight: 800; padding: .24rem .55rem; border-radius: 2rem; }
.gy-cls .st.done { color: var(--gy-3); background: var(--gy-soft); }
.gy-cls .st.up { color: #0a7d7c; background: #e0f6f5; }

.gy-chip { position: absolute; z-index: 3; background: #fff; border-radius: .9rem; box-shadow: 0 1rem 2.4rem rgba(18,33,26,.16); padding: .65rem .9rem; display: flex; align-items: center; gap: .55rem; border: 1px solid var(--gy-line); animation: gyfloat 5s ease-in-out infinite; }
.gy-chip .ic { width: 2rem; height: 2rem; border-radius: .55rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; flex: none; }
.gy-chip .ic--book { background: var(--gy-grad-teal); } .gy-chip .ic--goal { background: var(--gy-grad-lime); color: #34540a; }
.gy-chip b { display: block; font-size: .82rem; color: var(--gy-ink); line-height: 1.05; }
.gy-chip span { font-size: .68rem; color: var(--gy-muted); }
.gy-chip--tl { top: -1.9rem; left: -1.5rem; } .gy-chip--br { bottom: -1.7rem; right: -1.2rem; animation-delay: 1.4s; }
@keyframes gyfloat { 50% { transform: translateY(-10px); } }

/* ==========================================================================
   STAT STRIP
   ========================================================================== */
.gy-strip { background: var(--gy-ink); }
.gy-strip .s { text-align: center; padding: .4rem; color: #fff; }
.gy-strip .s i { font-size: 1.2rem; color: var(--gy-lime); }
.gy-strip .s b { display: block; font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; line-height: 1; margin-top: .3rem; }
.gy-strip .s span { display: block; margin-top: .35rem; font-size: .82rem; color: #9fc4b3; }
.gy-strip .col + .col .s { border-left: 1px solid rgba(255,255,255,.1); }
@media (max-width: 767px){ .gy-strip .col + .col .s { border-left: 0; } }

/* ==========================================================================
   FEATURES
   ========================================================================== */
.gy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.gy-feat { position: relative; background: #fff; border: 1px solid var(--gy-line); border-radius: 1.2rem; padding: 1.7rem 1.5rem; height: 100%; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.gy-feat::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--gy-grad); transform: scaleY(0); transform-origin: top; transition: transform .3s ease; }
.gy-feat:hover { transform: translateY(-.5rem); box-shadow: 0 1.6rem 3.2rem rgba(18,33,26,.1); border-color: transparent; }
.gy-feat:hover::before { transform: scaleY(1); }
.gy-feat .ic { width: 3.2rem; height: 3.2rem; border-radius: .95rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; margin-bottom: 1rem; }
.gy-feat h3 { font-size: 1.08rem; font-weight: 800; color: var(--gy-ink); margin-bottom: .5rem; }
.gy-feat p { font-size: .88rem; color: var(--gy-muted); margin: 0; line-height: 1.55; }
.gy-c1 { background: var(--gy-grad); } .gy-c2 { background: var(--gy-grad-teal); } .gy-c3 { background: var(--gy-grad-lime); color: #34540a !important; }
.gy-c4 { background: var(--gy-grad-coral); } .gy-c5 { background: linear-gradient(120deg,#5b74f0,#3f57d6); } .gy-c6 { background: linear-gradient(120deg,#f5a601,#d98e00); }
.gy-c7 { background: linear-gradient(120deg,#a855f7,#7c3aed); } .gy-c8 { background: var(--gy-grad); } .gy-c9 { background: var(--gy-grad-teal); }

/* ==========================================================================
   BUILT FOR GYM & YOGA (two panels)
   ========================================================================== */
.gy-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.gy-panel { position: relative; border-radius: 1.5rem; padding: 2.2rem; overflow: hidden; color: #fff; }
.gy-panel--gym { background: linear-gradient(135deg, #14261c, #0a8f52); }
.gy-panel--yoga { background: linear-gradient(135deg, #0b2b2b, #0ea5a4); }
.gy-panel::after { content: ""; position: absolute; right: -3rem; top: -3rem; width: 12rem; height: 12rem; border-radius: 50%; background: rgba(255,255,255,.08); }
.gy-panel .pic { position: relative; z-index: 2; width: 3.6rem; height: 3.6rem; border-radius: 1rem; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 1.2rem; }
.gy-panel h3 { position: relative; z-index: 2; color: #fff; font-weight: 800; font-size: 1.5rem; margin-bottom: .5rem; }
.gy-panel p { position: relative; z-index: 2; color: rgba(255,255,255,.86); font-size: .94rem; line-height: 1.6; margin-bottom: 1.2rem; }
.gy-ptags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .5rem; }
.gy-ptags span { font-size: .78rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); padding: .4rem .8rem; border-radius: 2rem; }

/* ==========================================================================
   BENEFITS
   ========================================================================== */
.gy-benefits { background: linear-gradient(180deg,#fff,var(--gy-soft-2)); }
.gy-btile { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid var(--gy-line); border-radius: 1rem; padding: 1.2rem; height: 100%; transition: transform .3s ease, box-shadow .3s ease; }
.gy-btile:hover { transform: translateY(-.35rem); box-shadow: 0 1.2rem 2.6rem rgba(18,33,26,.1); }
.gy-btile .ic { width: 2.8rem; height: 2.8rem; border-radius: .8rem; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; background: var(--gy-grad); }
.gy-btile:nth-child(3n+2) .ic { background: var(--gy-grad-teal); } .gy-btile:nth-child(3n) .ic { background: var(--gy-grad-coral); }
.gy-btile h3 { font-size: 1rem; font-weight: 800; color: var(--gy-ink); margin: .15rem 0 .25rem; }
.gy-btile p { font-size: .84rem; color: var(--gy-muted); margin: 0; line-height: 1.5; }

/* ==========================================================================
   WHY US
   ========================================================================== */
.gy-vcard { background: #fff; border: 1px solid var(--gy-line); border-radius: 1.4rem; padding: .6rem 1.9rem; box-shadow: 0 1.4rem 3.4rem rgba(18,33,26,.07); }
.gy-vrow { display: flex; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--gy-line); }
.gy-vrow:last-child { border-bottom: 0; }
.gy-vrow .ic { flex: none; width: 3rem; height: 3rem; border-radius: .9rem; background: var(--gy-soft); color: var(--gy-3); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.gy-vrow h3 { font-size: 1.08rem; font-weight: 800; color: var(--gy-ink); margin-bottom: .25rem; }
.gy-vrow p { font-size: .9rem; color: var(--gy-muted); margin: 0; line-height: 1.55; }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.gy-steps { background: var(--gy-soft-2); }
.gy-stepline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gy-stepline::before { content: ""; position: absolute; left: 9%; right: 9%; top: 1.7rem; border-top: 2px dashed var(--gy-line); z-index: 0; }
.gy-step { position: relative; z-index: 1; text-align: center; padding: 0 .5rem; }
.gy-step .n { width: 3.5rem; height: 3.5rem; border-radius: 50%; margin: 0 auto 1.1rem; background: var(--gy-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; box-shadow: 0 .7rem 1.5rem rgba(18,183,106,.3); position: relative; }
.gy-step:nth-child(2) .n { background: var(--gy-grad-teal); } .gy-step:nth-child(3) .n { background: var(--gy-grad-lime); color: #34540a; } .gy-step:nth-child(4) .n { background: var(--gy-grad-coral); }
.gy-step .s { position: absolute; top: -.3rem; right: -.3rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; color: var(--gy-ink); font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 .2rem .5rem rgba(0,0,0,.15); }
.gy-step h4 { font-size: 1.05rem; font-weight: 800; color: var(--gy-ink); margin-bottom: .35rem; }
.gy-step p { font-size: .84rem; color: var(--gy-muted); margin: 0; line-height: 1.5; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.gy-plan { background: #fff; border: 1px solid var(--gy-line); border-radius: 1.4rem; padding: 2rem; height: 100%; display: flex; flex-direction: column; }
.gy-plan__tag { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--gy-3); margin-bottom: .8rem; }
.gy-plan__price { font-size: 3rem; font-weight: 800; color: var(--gy-ink); line-height: 1; }
.gy-plan__price small { font-size: .95rem; font-weight: 600; color: var(--gy-muted); }
.gy-plan p.sub { color: var(--gy-muted); font-size: .9rem; margin: .6rem 0 1.3rem; }
.gy-ticks { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.gy-ticks li { position: relative; padding-left: 1.6rem; font-size: .86rem; color: #3f5349; line-height: 1.45; }
.gy-ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-size: .68rem; font-weight: 800; color: var(--gy-3); width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--gy-soft); display: flex; align-items: center; justify-content: center; }
.gy-plan--feature { background: var(--gy-ink); color: #cfe6da; border-color: transparent; position: relative; overflow: hidden; }
.gy-plan--feature::before { content: ""; position: absolute; top: -40%; right: -20%; width: 60%; height: 120%; background: radial-gradient(circle, rgba(18,183,106,.4), transparent 62%); }
.gy-plan--feature h3, .gy-plan--feature .gy-h { color: #fff; position: relative; z-index: 2; }
.gy-plan--feature .gy-plan__tag { color: var(--gy-lime); }
.gy-plan--feature .sub { color: #9fc4b3; }
.gy-custom { display: flex; gap: .8rem; padding: .8rem 0; position: relative; z-index: 2; }
.gy-custom .ic { flex: none; width: 2.4rem; height: 2.4rem; border-radius: .65rem; background: rgba(255,255,255,.1); color: var(--gy-lime); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.gy-custom h4 { color: #fff; font-size: .96rem; font-weight: 700; margin-bottom: .1rem; }
.gy-custom p { font-size: .82rem; margin: 0; color: #9fc4b3; line-height: 1.45; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.gy-quote { background: #fff; border: 1px solid var(--gy-line); border-radius: 1.3rem; padding: 2rem; box-shadow: 0 1.2rem 3rem rgba(18,33,26,.07); height: 100%; display: flex; flex-direction: column; }
.gy-quote .stars { color: #f5a601; font-size: .95rem; margin-bottom: 1rem; letter-spacing: .1em; }
.gy-quote p.tx { font-size: 1rem; color: #38493f; line-height: 1.65; flex: 1; }
.gy-quote .who { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; }
.gy-quote .who .av { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--gy-grad); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.gy-quote .who h6 { margin: 0; font-weight: 800; color: var(--gy-ink); font-size: .95rem; }
.gy-quote .who span { font-size: .8rem; color: var(--gy-muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.gy-faq .accordion-item { position: relative; background: #fff; border: 1px solid var(--gy-line) !important; border-radius: 1rem !important; margin-bottom: .8rem; overflow: hidden; }
.gy-faq .card-header { background: transparent; }
.gy-faq .accordion-item .card-header button { font-weight: 700; color: var(--gy-ink); font-size: 1rem; padding: 1.15rem 3rem 1.15rem 1.3rem; background: #fff; display: flex; align-items: center; width: 100%; text-align: left; }
.gy-faq .accordion-item .card-header button::before { display: none !important; }
.gy-faq .accordion-item .card-header button::after { content: ""; position: absolute; right: 1.5rem; top: 50%; width: .55rem; height: .55rem; margin-top: -.4rem; border-right: 2px solid var(--gy-3); border-bottom: 2px solid var(--gy-3); transform: rotate(225deg); transition: transform .25s ease; background: none; }
.gy-faq .accordion-item .card-header button.collapsed::after { transform: rotate(45deg); margin-top: -.15rem; }
.gy-faq .accordion-item .card-header button:not(.collapsed) { color: var(--gy-3); background: var(--gy-soft-2); }
.gy-faq .card-body { padding: 0 1.3rem 1.3rem; color: var(--gy-muted); }
.gy-faq .card-body p { margin: 0; line-height: 1.6; }

/* ==========================================================================
   CTA + LEAD FORM
   ========================================================================== */
.gy-cta { position: relative; background: var(--gy-ink); color: #fff; }
.gy-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 18% 0%, rgba(18,183,106,.4), transparent 60%), radial-gradient(700px 400px at 90% 100%, rgba(14,165,164,.32), transparent 60%); }
.gy-cta .container { position: relative; z-index: 2; }
.gy-cta h2 { color: #fff; font-size: clamp(1.9rem,3.2vw,2.6rem); }
.gy-cta .lead { color: #bfe0d1; }
.gy-cta .trust { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-direction: column; gap: .8rem; }
.gy-cta .trust li { display: flex; align-items: center; gap: .7rem; color: #e4f3ec; font-weight: 600; }
.gy-cta .trust li i { color: var(--gy-lime); font-size: 1.2rem; }
.gy-callbox { margin-top: 1.8rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; padding: 1.1rem 1.3rem; }
.gy-callbox b { color: #fff; } .gy-callbox a { color: #a9ecc8; font-weight: 700; text-decoration: none; }
.gy-formcard { background: #fff; border-radius: 1.4rem; padding: 2rem; box-shadow: 0 1.4rem 3.4rem rgba(0,0,0,.28); }
.gy-formcard h3 { color: var(--gy-ink); }
.gy-formcard .form-control { border-radius: .7rem; }
.gy-ta { height: 120px; }
.gy-privacy { font-size: .78rem; color: var(--gy-muted); text-align: center; margin-top: .3rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
    .gy-grid { grid-template-columns: 1fr 1fr; }
    .gy-two { grid-template-columns: 1fr; }
    .gy-stepline { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
    .gy-stepline::before { display: none; }
}
@media (max-width: 767px) {
    .gy-grid { grid-template-columns: 1fr; }
    .gy-stepline { grid-template-columns: 1fr; }
    .gy-cardwrap { margin-top: 1rem; }
    .gy-chip { display: none; }
}