/* =====================================================================
   SmartSchool Uniform BD — frontend effects (Phase 17, 2026-10-14)
   layouts/frontend.blade.php-এ frontend-payment-pages.css-এর পরে লোড হয়।

   মালিকের চাওয়া:
     • হোমের hero-র পেছনে bci-bd.org-এর মতো effect — hero-র লেখা/ছবি/আগের effect যেমন আছে তেমনই
     • বাকি পাতাতেও কিছুটা effect, আর সব ভেতরের পাতার hero-র ডিজাইন একই
     • footer-এ নিজের ধরনের effect (bci-bd.org অনুসরণ করে নয়)
   ভাগ: ১ ভেসে ওঠা আকার (.sf-rise) · ২ ভেতরের পাতার এক hero (.sf-page-hero) · ৩ hero-র ভেতরের জিনিস সবুজের উপর ·
        ৪ hero-র পরের অংশ (ধাপের সারি, কার্ড) · ৫ footer · ৬ ছোট পর্দা · ৭ কম নড়াচড়া / ছাপা
        · ৮ (Phase 18) header-এ "About us" লিংকের জায়গা (৭-এর আগে বসানো)
        · ৯ (Phase 19) ফোনে ছোট বোতাম — অর্ধেক চওড়া, কম উঁচু, ছোট লেখা (৭-এর আগে বসানো)
        · ১০ (Phase 20) ফোনে বোতাম মাঝ বরাবর — ১টা মাঝে, ২টা একটার নিচে আরেকটা, ৩টা হলে ২টা পাশাপাশি + ৩ নং নিচে মাঝে (৭-এর আগে বসানো)
   ===================================================================== */

/* ---------- ১. ভেসে ওঠা আকার — নিচ থেকে স্বচ্ছ চারকোনা উঠে ঘুরতে ঘুরতে গোল হয়ে মিলিয়ে যায় ---------- */
.sf-rise {
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    pointer-events: none;
    --sf-rise-y: -1180px;
}
.sf-rise li {
    position: absolute;
    bottom: -160px;
    left: var(--x, 50%);
    display: block;
    width: var(--s, 24px);
    height: var(--s, 24px);
    border-radius: 3px;
    background: var(--c, rgba(255, 255, 255, .16));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    opacity: 0;
    animation: sfRise var(--d, 26s) linear var(--w, 0s) infinite;
    will-change: transform, opacity;
}
/* ১৯টা আকার — জায়গা, মাপ, সময় ও রং আলাদা; ঋণাত্মক delay = পাতা খুলতেই পর্দায় কয়েকটা থাকে */
.sf-rise li:nth-child(1)  { --x: 4%;  --s: 26px;  --d: 22s; --w: -2s; }
.sf-rise li:nth-child(2)  { --x: 11%; --s: 64px;  --d: 30s; --w: -14s; }
.sf-rise li:nth-child(3)  { --x: 18%; --s: 18px;  --d: 18s; --w: -6s;  --c: rgba(255, 224, 138, .26); }
.sf-rise li:nth-child(4)  { --x: 25%; --s: 92px;  --d: 38s; --w: -21s; --c: rgba(255, 255, 255, .11); }
.sf-rise li:nth-child(5)  { --x: 32%; --s: 22px;  --d: 20s; --w: -9s;  --c: rgba(165, 236, 245, .24); }
.sf-rise li:nth-child(6)  { --x: 38%; --s: 48px;  --d: 27s; --w: -3s; }
.sf-rise li:nth-child(7)  { --x: 45%; --s: 14px;  --d: 16s; --w: -11s; --c: rgba(255, 194, 181, .28); }
.sf-rise li:nth-child(8)  { --x: 51%; --s: 74px;  --d: 34s; --w: -25s; --c: rgba(255, 255, 255, .12); }
.sf-rise li:nth-child(9)  { --x: 57%; --s: 30px;  --d: 23s; --w: -7s; }
.sf-rise li:nth-child(10) { --x: 63%; --s: 112px; --d: 44s; --w: -31s; --c: rgba(255, 255, 255, .09); }
.sf-rise li:nth-child(11) { --x: 69%; --s: 20px;  --d: 19s; --w: -4s;  --c: rgba(255, 224, 138, .26); }
.sf-rise li:nth-child(12) { --x: 74%; --s: 56px;  --d: 29s; --w: -17s; --c: rgba(165, 236, 245, .2); }
.sf-rise li:nth-child(13) { --x: 79%; --s: 16px;  --d: 17s; --w: -12s; }
.sf-rise li:nth-child(14) { --x: 84%; --s: 82px;  --d: 36s; --w: -23s; --c: rgba(255, 255, 255, .11); }
.sf-rise li:nth-child(15) { --x: 89%; --s: 28px;  --d: 21s; --w: -8s;  --c: rgba(255, 194, 181, .24); }
.sf-rise li:nth-child(16) { --x: 94%; --s: 44px;  --d: 26s; --w: -15s; }
.sf-rise li:nth-child(17) { --x: 7%;  --s: 36px;  --d: 25s; --w: -19s; --c: rgba(165, 236, 245, .2); }
.sf-rise li:nth-child(18) { --x: 48%; --s: 24px;  --d: 24s; --w: -1s;  --c: rgba(255, 224, 138, .24); }
.sf-rise li:nth-child(19) { --x: 66%; --s: 40px;  --d: 31s; --w: -27s; }
@keyframes sfRise {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; border-radius: 3px; }
    6% { opacity: 1; }
    82% { opacity: .55; }
    100% { transform: translate3d(0, var(--sf-rise-y, -1180px), 0) rotate(720deg); opacity: 0; border-radius: 50%; }
}
/* ভেতরের পাতার hero খাটো — পথও খাটো, আকার একটু ছোট আর ধীর নয় */
.sf-page-hero .sf-rise { --sf-rise-y: -720px; }
.sf-page-hero .sf-rise li { width: calc(var(--s, 24px) * .8); height: calc(var(--s, 24px) * .8); }

/* ---------- ২. ভেতরের পাতার এক hero — সবুজ পটভূমি (.sf-hero থেকে), মাঝখানে লেখা, নিচে ঢেউ ---------- */
.sf-page-hero { --sf-ph-gap: clamp(18px, 2.4vw, 24px); }
.sf-page-hero__inner {
    position: relative;
    display: grid;
    justify-items: center;
    max-width: 880px;
    padding: clamp(26px, 4vw, 48px) 0 clamp(34px, 4.6vw, 58px);
    text-align: center;
}
.sf-page-hero__title {
    margin: 14px 0 10px;
    font-size: clamp(28px, 3.8vw, 46px);
    line-height: 1.12;
    overflow-wrap: anywhere;
}
.sf-page-hero__title:first-child { margin-top: 0; }
.sf-page-hero__lead { max-width: 660px; margin: 0 auto; font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.65; text-wrap: pretty; }
.sf-page-hero__extra {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: var(--sf-ph-gap);
}
.sf-page-hero__extra > * { margin-top: 0; margin-bottom: 0; }
.sf-page-hero__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-bottom: 16px; }
.sf-page-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    padding: 6px 14px 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .2s ease, transform .2s ease;
}
.sf-page-hero__back:hover { background: rgba(255, 255, 255, .22); transform: translateX(-2px); }
.sf-page-hero__crumbs { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 2px; color: #d5ebd7; font-size: 13.5px; font-weight: 700; }
.sf-page-hero__crumb { display: inline-flex; align-items: center; }
.sf-page-hero__crumb + .sf-page-hero__crumb::before { content: "›"; margin: 0 8px 0 6px; color: rgba(255, 255, 255, .5); font-weight: 900; }
.sf-page-hero__crumb.is-current { color: #fff; }
.sf-page-hero__back:focus-visible,
.sf-page-hero a:focus-visible,
.sf-page-hero button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 3px; }

/* ---------- ৩. hero-র ভেতরের জিনিস (আগে সাদা পটভূমির জন্য বানানো) — সবুজের উপর ---------- */
/* বোতাম */
body.sf-body .sf-page-hero .su-btn { min-height: 44px; }
body.sf-body .sf-page-hero .su-btn.primary { background: #fff; color: #1f6a2a; border-color: #fff; box-shadow: 0 12px 26px rgba(10, 40, 14, .28); }
body.sf-body .sf-page-hero .su-btn.primary:hover { background: #f1fbf2; }
body.sf-body .sf-page-hero .su-btn.outline,
body.sf-body .sf-page-hero .su-btn.glass { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .34); }
body.sf-body .sf-page-hero .su-btn.outline:hover,
body.sf-body .sf-page-hero .su-btn.glass:hover { background: rgba(255, 255, 255, .2); }
body.sf-body .sf-page-hero .student-portal-actions,
body.sf-body .sf-page-hero .sf-b2b-hero__actions { justify-content: center; }
/* মাপের গাইড: ছেলে/মেয়ে আর ছোট তথ্য */
body.sf-body .sf-page-hero .sf-guide__gender { margin: 0; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); }
body.sf-body .sf-page-hero .sf-guide__gender-link { color: #fff; }
body.sf-body .sf-page-hero .sf-guide__gender-link:hover { background: rgba(255, 255, 255, .16); }
body.sf-body .sf-page-hero .sf-guide__gender-link.is-current { background: #fff; color: #1f6a2a; }
body.sf-body .sf-page-hero .sf-guide__facts { flex-basis: 100%; margin: 0; color: #e4f5e6; }
body.sf-body .sf-page-hero .sf-guide__facts .su-icon { color: #ffe08a; }
/* ফিট গ্যারান্টির ব্যাজ */
body.sf-body .sf-page-hero .sf-fg__badge { margin: 0; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
body.sf-body .sf-page-hero .sf-fg__badge svg { color: #ffe08a; }
/* নীতিমালার পাতা: শেষ হালনাগাদ, staff-এর খসড়া-ব্যানার */
body.sf-body .sf-page-hero .sf-policy__meta { flex-basis: 100%; margin: 0; color: #d5ebd7; }
body.sf-body .sf-page-hero .sf-policy__meta a { color: #fff; }
body.sf-body .sf-page-hero .sf-policy__draft { flex-basis: 100%; justify-content: center; margin: 0; }
/* কার্ট: কয়টা জিনিস */
body.sf-body .sf-page-hero .cart-badge { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); color: #fff; font-weight: 800; }
/* checkout-এর তিন ধাপ */
body.sf-body .sf-page-hero .sf-checkout-steps { width: min(640px, 100%); margin: 0; }
body.sf-body .sf-page-hero .sf-checkout-steps span { justify-content: center; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #d5ebd7; }
body.sf-body .sf-page-hero .sf-checkout-steps span b { background: rgba(255, 255, 255, .18); color: #fff; }
body.sf-body .sf-page-hero .sf-checkout-steps span.is-current { background: #fff; border-color: #fff; color: #1f6a2a; }
body.sf-body .sf-page-hero .sf-checkout-steps span.is-current b { background: #2e8036; color: #fff; }
/* FIX (2026-10-15, P21 F-12): শেষ হওয়া ধাপ (কার্ট ✓) — উজ্জ্বল লেখা, সোনালি চিহ্ন */
body.sf-body .sf-page-hero .sf-checkout-steps span.is-done { color: #fff; }
body.sf-body .sf-page-hero .sf-checkout-steps span.is-done b { background: #f5b829; color: #1f3d22; }
/* "আমার মাপ"-এর একক (cm / in) */
body.sf-body .sf-page-hero .sf-unit-toggle { margin: 0; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .26); color: #e4f5e6; }
body.sf-body .sf-page-hero .sf-unit-btn { color: #fff; }
body.sf-body .sf-page-hero .sf-unit-btn:hover { background: rgba(255, 255, 255, .16); }
body.sf-body .sf-page-hero .sf-unit-btn.is-active { background: #fff; color: #1f6a2a; }
/* স্কুলের তালিকা: খোঁজার ঘর ও শহরের chip আগের মতো (CSS-এ আগেই সবুজের উপর) — শুধু ফাঁক */
body.sf-body .sf-page-hero .sf-dir__chips { flex-basis: 100%; margin-top: 4px; }
/* order-এর সফল চিহ্ন (confirmation) */
body.sf-body .sf-page-hero .sf-page-hero__mark {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff, #e9fbe9);
    color: #2e8036;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .14), 0 18px 34px rgba(10, 40, 14, .3);
    animation: sfMarkPop .6s var(--sf-ease, cubic-bezier(.22, 1, .36, 1)) .2s both;
}
@keyframes sfMarkPop { from { transform: scale(.6); opacity: 0; } }

/* ---------- ৪. hero-র পরে: wizard-এর ধাপের সারি ঢেউয়ের উপর, কার্ড একটু উপরে ---------- */
.sf-page-hero + .sf-steps { position: relative; z-index: 3; margin-top: -46px; }
.sf-page-hero ~ .su-shell,
.sf-page-hero + .sf-steps + .su-shell { position: relative; z-index: 2; }
.sf-page-hero + .su-shell { margin-top: -18px; }
/* "স্কুলের জন্য" পাতা: hero-র পাশের কার্ড এখন সংখ্যার সারির (ঢেউয়ের উপর ভাসা) নিচে, মাঝখানে */
.sf-b2b-glance { position: relative; margin-top: clamp(26px, 3.2vw, 44px); }
.sf-b2b-glance .sf-b2b-hero__card {
    width: min(760px, 100%);
    margin-inline: auto;
    padding: 22px 24px;
    border-radius: 22px;
    background: linear-gradient(135deg, #215c27, #2e8036 60%, #1d8f74);
    box-shadow: 0 26px 50px rgba(16, 48, 15, .22);
}
.sf-b2b-glance .sf-b2b-hero__card ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }

/* ---------- ৫. footer — উপরের কিনারায় চলন্ত মাপের ফিতা, মাউসের সাথে আলো, পেছনে ঘোরা বোতাম, ঢুকলে কলামগুলো একে একে ওঠে,
               লিংকে সেলাইয়ের দাগ, ভাগ-রেখায় চলন্ত সেলাই ---------- */
body.sf-body .sf-footer::after { display: none; } /* আগের রঙিন সরু দাগের বদলে ফিতা */
.sf-footer__tape {
    position: relative;
    z-index: 1;
    height: 16px;
    background:
        repeating-linear-gradient(90deg, rgba(45, 42, 20, .88) 0 1.5px, transparent 1.5px 40px) 0 0 / 40px 9px repeat-x,
        repeating-linear-gradient(90deg, rgba(45, 42, 20, .55) 0 1px, transparent 1px 8px) 0 0 / 8px 5px repeat-x,
        repeating-linear-gradient(90deg, rgba(45, 42, 20, .88) 0 1.5px, transparent 1.5px 40px) 0 100% / 40px 9px repeat-x,
        repeating-linear-gradient(90deg, rgba(45, 42, 20, .55) 0 1px, transparent 1px 8px) 0 100% / 8px 5px repeat-x,
        linear-gradient(180deg, #f8cf55, #f1bd34);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .12), 0 8px 18px rgba(0, 0, 0, .14);
    animation: sfTapeSlide 48s linear infinite;
}
.sf-footer__tape::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(214, 58, 51, .7) 0 6px, transparent 6px 12px);
    transform: translateY(-50%);
    opacity: .55;
}
@keyframes sfTapeSlide { to { background-position: 400px 0, 400px 0, 400px 100%, 400px 100%, 0 0; } }
.sf-footer__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(360px 260px at var(--fx, 50%) var(--fy, 40%), rgba(255, 224, 138, .16), rgba(124, 197, 118, .08) 45%, transparent 70%);
    transition: opacity .4s ease;
}
.sf-footer.is-lit .sf-footer__glow { opacity: 1; }
/* পেছনে তিনটা বড়, প্রায়-স্বচ্ছ জামার বোতাম (৪ ফুটো) — নিজের জায়গায় থেকে অনবরত ঘোরে।
   FIX (2026-10-18, P22 F-01): আগে এক পাক ৪২–৬৪ সেকেন্ডে (প্রায় চোখেই পড়ত না) আর বোতাম ৪ দিকে সমান — ঘোরা বোঝা যেত না।
   এখন: জায়গা ও মাপ হুবহু আগের (right/left/top/bottom অপরিবর্তিত), এক পাক ৯–১৫ সেকেন্ডে, পাশাপাশি দুটো উল্টো দিকে;
   ফুটোর ভেতর দিয়ে আড়াআড়ি সুতো (::before) আর কিনারায় সেলাইয়ের ফোঁড় (::after) — ঘোরার সময় ফোঁড়গুলো সরে যায়, তাই ঘোরা পরিষ্কার দেখা যায়।
   শুধু transform: rotate (GPU-তে, পাতার layout নড়ে না); "কম নড়াচড়া" চাওয়া থাকলে আগের মতোই থামানো (§৭)। */
.sf-footer__buttons { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sf-footer__buttons i {
    position: absolute;
    display: block;
    width: var(--s, 100px);
    height: var(--s, 100px);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .09);
    background:
        radial-gradient(circle at 39% 39%, rgba(255, 255, 255, .15) 0 6.5%, transparent 7.5%),
        radial-gradient(circle at 61% 39%, rgba(255, 255, 255, .15) 0 6.5%, transparent 7.5%),
        radial-gradient(circle at 39% 61%, rgba(255, 255, 255, .15) 0 6.5%, transparent 7.5%),
        radial-gradient(circle at 61% 61%, rgba(255, 255, 255, .15) 0 6.5%, transparent 7.5%),
        radial-gradient(circle, rgba(255, 255, 255, .035) 0 60%, rgba(255, 255, 255, .08) 61% 63%, rgba(255, 255, 255, .03) 64%);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    will-change: transform;
    backface-visibility: hidden;
    animation: sfFootSpin var(--d, 12s) linear infinite;
}
/* ফুটোর ভেতর দিয়ে X করে সেলাই করা সুতো */
.sf-footer__buttons i::before {
    content: "";
    position: absolute;
    inset: 37%;
    background:
        linear-gradient(45deg, transparent calc(50% - 1px), rgba(255, 255, 255, .16) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(-45deg, transparent calc(50% - 1px), rgba(255, 255, 255, .16) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
/* কিনারার ভেতরে সেলাইয়ের ফোঁড় (ড্যাশ-করা গোল দাগ) */
.sf-footer__buttons i::after {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 255, 255, .2) 0 7deg, transparent 7deg 18deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 4px), #000 calc(100% - 3px));
}
.sf-footer__buttons i:nth-child(1) { --s: 150px; --d: 15s; right: 4%; top: 16%; }
.sf-footer__buttons i:nth-child(2) { --s: 74px; --d: 9s; left: 41%; bottom: 9%; animation-direction: reverse; }
.sf-footer__buttons i:nth-child(3) { --s: 104px; --d: 12s; left: -30px; top: 58%; }
@keyframes sfFootSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.sf-footer .sf-container { position: relative; z-index: 1; }
/* ঢুকলে কলামগুলো একে একে — footer পাতা খোলার সময় পর্দার নিচে থাকলেই (frontend-effects.js দেয় .is-pending, দেখা গেলে সরায়);
   JS না চললে বা footer আগেই দেখা গেলে কিছুই লুকায় না */
.sf-footer__grid > * { transition: opacity .6s ease, transform .6s var(--sf-ease, cubic-bezier(.22, 1, .36, 1)); }
.sf-footer__grid > :nth-child(2) { transition-delay: .08s; }
.sf-footer__grid > :nth-child(3) { transition-delay: .16s; }
.sf-footer__grid > :nth-child(4) { transition-delay: .24s; }
.sf-footer.is-pending .sf-footer__grid > * { opacity: 0; transform: translateY(18px); }
/* লিংক: নিচে সেলাইয়ের দাগ আঁকা হয়, আইকন হলুদ */
body.sf-body .sf-footer ul a { position: relative; }
body.sf-body .sf-footer ul a::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 0;
    bottom: -3px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #ffe08a 0 5px, transparent 5px 9px);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s var(--sf-ease, cubic-bezier(.22, 1, .36, 1));
}
body.sf-body .sf-footer ul a:hover::after,
body.sf-body .sf-footer ul a:focus-visible::after { transform: scaleX(1); }
body.sf-body .sf-footer ul a .su-icon { transition: color .2s ease, transform .3s var(--sf-ease, cubic-bezier(.22, 1, .36, 1)); }
body.sf-body .sf-footer ul a:hover .su-icon { color: #ffe08a; transform: rotate(-8deg) scale(1.12); }
body.sf-body .sf-footer__contact li a::after { display: none; }
/* লোগো, পেমেন্ট-চিহ্ন, সোশ্যাল — ছুঁলে একটু ওঠে */
body.sf-body .sf-footer__brand img { transition: transform .35s var(--sf-ease, cubic-bezier(.22, 1, .36, 1)), box-shadow .35s ease; }
body.sf-body .sf-footer__brand img:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 14px 26px rgba(0, 0, 0, .22); }
body.sf-body .sf-footer .sf-pay span,
body.sf-body .sf-footer .sf-social a { transition: transform .25s var(--sf-ease, cubic-bezier(.22, 1, .36, 1)), box-shadow .25s ease; }
body.sf-body .sf-footer .sf-pay span:hover,
body.sf-body .sf-footer .sf-social a:hover { transform: translateY(-3px); box-shadow: 0 10px 18px rgba(0, 0, 0, .2); }
/* কলামের নিচের প্রথম ভাগ-রেখা: সেলাইয়ের ফোঁড় — ধীরে সামনে চলে (সেলাই হচ্ছে যেন) */
body.sf-body .sf-footer__grid + .sf-footer__policies,
body.sf-body .sf-footer__grid + .sf-footer__bottom { border-top-color: transparent; }
body.sf-body .sf-footer__grid + .sf-footer__policies::before,
body.sf-body .sf-footer__grid + .sf-footer__bottom::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 224, 138, .5) 0 9px, transparent 9px 16px);
    animation: sfStitch 2.8s linear infinite;
}
@keyframes sfStitch { to { background-position: 32px 0; } }
/* শিরোনামের হলুদ বিন্দু — সুতোর গুটির মতো ধীরে জ্বলে-নেভে */
body.sf-body .sf-footer h4::before { animation: sfFootDot 2.8s ease-in-out infinite; }
body.sf-body .sf-footer__grid > :nth-child(3) h4::before { animation-delay: -.9s; }
body.sf-body .sf-footer__grid > :nth-child(4) h4::before { animation-delay: -1.8s; }
@keyframes sfFootDot { 50% { box-shadow: 0 0 0 6px rgba(245, 184, 41, .06); transform: scale(1.15); } }

/* ---------- ৬. ছোট পর্দা ---------- */
@media (max-width: 991.98px) {
    .sf-rise { --sf-rise-y: -1400px; }
    .sf-page-hero .sf-rise { --sf-rise-y: -760px; }
    .sf-rise li:nth-child(n+14) { display: none; } /* ফোন/ট্যাবে কম আকার */
}
@media (max-width: 575.98px) {
    .sf-page-hero__inner { padding: 20px 0 34px; }
    .sf-page-hero__title { font-size: clamp(24px, 7vw, 30px); margin: 10px 0 8px; }
    .sf-page-hero__lead { font-size: 14.5px; line-height: 1.6; }
    .sf-page-hero__extra { gap: 10px; margin-top: 16px; }
    .sf-page-hero__nav { margin-bottom: 12px; }
    body.sf-body .sf-page-hero .student-portal-actions,
    body.sf-body .sf-page-hero .sf-b2b-hero__actions { width: 100%; }
    .sf-page-hero + .sf-steps { margin-top: -40px; }
    .sf-page-hero + .su-shell { margin-top: -14px; }
    .sf-b2b-glance .sf-b2b-hero__card { padding: 18px; }
    .sf-b2b-glance .sf-b2b-hero__card ul { grid-template-columns: 1fr; }
    .sf-rise li:nth-child(n+10) { display: none; }
}

/* ---------- ৮. header-এ "About us" (Phase 18, 2026-10-14) — guest-দের desktop nav-এ এখন ৬টা লিংক ----------
   layout-এর <header>-এ .sf-header--about (লিংকটা থাকলে)। Playwright-এ মাপা (font লোডের পরে, en/bn, guest/লগইন করা):
   header-এর container 1180px-এ ৬টা লিংক আইকনসহ ধরে না (English-এ ~৫০px কম পড়ে, ভাষা-বোতাম পাশে বেরিয়ে যেত) —
   ক) ১৩৬০px+ : শুধু header-এর ভেতরটা 1280px (পাতার লেখা আগের মতো 1180px)
   খ) ১২১২–১৩৫৯px : guest-দের লিংকের আইকন লুকায় (লেখা অক্ষত)
   গ) ১১৫০–১২১১px : লগইন করা অবস্থায় লিংকের আইকন লুকায় (এখানে অ্যাকাউন্ট-বোতামে নাম দেখা দেয় — English-এ ৭px কম পড়ত)
   ঘ) ৯৯২–১০২৪px : guest-দের "For schools"-ও লুকায় — ১০২৫–১২১১px-এ আগে থেকেই লুকানো (frontend-pro.css §১৭-C); footer-এ আছে
   ঙ) লম্বা প্রথম নাম header ঠেলে না দেয় — অ্যাকাউন্ট-বোতামে সর্বোচ্চ ~১২ অক্ষর, বাকিটা "…" (পুরো নাম বোতামের title-এ) */
@media (min-width: 1360px) {
    .sf-header--about:not(.sf-header--auth) .sf-header__inner { width: min(1280px, calc(100% - 32px)); }
}
@media (min-width: 1212px) and (max-width: 1359.98px) {
    .sf-header--about:not(.sf-header--auth) .sf-nav__link .su-icon { display: none; }
}
@media (min-width: 1150px) and (max-width: 1211.98px) {
    .sf-header--about.sf-header--auth .sf-nav__link .su-icon { display: none; }
}
@media (min-width: 992px) and (max-width: 1024.98px) {
    .sf-header--about .sf-nav__link--schools { display: none; }
}
.sf-header--about .sf-acct--auth .sf-acct__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }

/* ---------- ৯. ফোনে ছোট বোতাম (Phase 19, 2026-10-14) ----------
   মালিকের চাওয়া: ফোনে hero-র মতো বড় বোতামগুলো এখনকার অর্ধেক মাপে, উচ্চতা আর লেখাও ছোট — যত জায়গায় এমন বোতাম আছে সব জায়গায়।
   আগে ফোনে (≤৭৬৭px) এগুলো পুরো চওড়া (প্রতিটা আলাদা সারিতে), ৪৮px উঁচু, ১৬px লেখা।
   এখন (≤৭৬৭px):
     ক) পাতার ভেতরের সব link-বোতাম আর type="button" বোতাম — ৩৮px উঁচু, ১৩px লেখা, ১৫px আইকন
     খ) বোতামের সারিগুলোতে প্রতিটা বোতাম সারির অর্ধেক চওড়া — দুটো পাশাপাশি, বিজোড় শেষেরটাও অর্ধেক; লম্বা লেখা বোতামের ভেতরেই
        দুই লাইনে ভাঙে (পাশে বেরোয় না)। সারি: পাতার hero (About, স্কুলের জন্য, ড্যাশবোর্ড, প্রোফাইল, আমার মাপ, আবার অর্ডার),
        CTA বাক্স, স্কুলের তালিকা খালি হলে, স্কুলের ফর্ম জমার পরে, অর্ডার নিশ্চিতের পাতা, কার্ট, AR প্রিভিউ, আমার মাপের কার্ড;
        একা বোতাম: হোমের "আপনি কি স্কুল?" পটি, ইউনিফর্মের তথ্যের পাতা, মাপের পাতার "আবার হিসাব" / "AR প্রিভিউ"
     গ) ড্যাশবোর্ড/প্রোফাইলের অংশের মাথার ছোট বোতাম — পুরো চওড়া নয়, নিজের লেখার মাপে
   যা বদলায়নি (ইচ্ছা করে): form জমার বোতাম (কার্টে যোগ, অর্ডার নিশ্চিত, পেমেন্ট, ট্র্যাক, লগইন, নিবন্ধন, স্কুলের ফর্ম …),
     নিচের sticky বোতাম-বার, header/menu/footer আর ফোন-ক্যামেরার পাতা — কাজের শেষ ধাপ, বড় থাকলে আঙুলে চাপা সহজ।
   ৭৬৮px-এর বড় পর্দায় কিছুই বদলায় না — শুধু ৭৬৮–৯২০px-এ ড্যাশবোর্ডের hero-বোতাম আর পুরো চওড়া নয় (লেখার মাপে)। */
@media (min-width: 768px) and (max-width: 920px) {
    body.sf-body .student-portal-actions > .su-btn { width: auto; }
}
@media (max-width: 767.98px) {
    /* ক) ছোট উচ্চতা ও লেখা (sticky বার body-তে আলাদা — এর বাইরে; specificity কম রাখা, যাতে নিচের সারির নিয়ম জেতে) */
    body.sf-body .sf-page-hero a.su-btn,
    body.sf-body .sf-main a.su-btn,
    body.sf-body .sf-main button.su-btn[type="button"] {
        min-height: 38px;
        padding: 7px 12px;
        gap: 6px;
        font-size: 13px;
        line-height: 1.25;
    }
    body.sf-body .sf-page-hero a.su-btn svg,
    body.sf-body .sf-main a.su-btn svg,
    body.sf-body .sf-main button.su-btn[type="button"] svg { flex: none; width: 15px; height: 15px; }

    /* খ) বোতামের সারি — পাশাপাশি, ভাঁজ হয়ে পরের লাইনে */
    body.sf-body .sf-b2b-hero__actions,
    body.sf-body .student-portal-actions,
    body.sf-body .sf-cta__actions,
    body.sf-body .sf-dir__empty-actions,
    body.sf-body .sf-b2b-thanks__actions,
    body.sf-body .confirm-actions,
    body.sf-body .cart-actions,
    body.sf-body .sf-mp-card__actions,
    body.sf-body .sf-main .form-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; width: 100%; }
    body.sf-body .sf-page-hero .sf-b2b-hero__actions,
    body.sf-body .sf-page-hero .student-portal-actions { justify-content: center; }
    body.sf-body .sf-cta__actions,
    body.sf-body .cart-actions,
    body.sf-body .confirm-actions,
    body.sf-body .sf-main .form-actions { justify-content: flex-start; }
    body.sf-body .cart-actions > small { flex: 1 1 100%; }
    body.sf-body .preview-content-card .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body.sf-body .sf-b2b-hero__actions > a.su-btn,
    body.sf-body .sf-b2b-hero__actions > button.su-btn[type="button"],
    body.sf-body .student-portal-actions > a.su-btn,
    body.sf-body .student-portal-actions > button.su-btn[type="button"],
    body.sf-body .sf-cta__actions > a.su-btn,
    body.sf-body .sf-cta__actions > button.su-btn[type="button"],
    body.sf-body .sf-dir__empty-actions > a.su-btn,
    body.sf-body .sf-dir__empty-actions > button.su-btn[type="button"],
    body.sf-body .sf-b2b-thanks__actions > a.su-btn,
    body.sf-body .sf-b2b-thanks__actions > button.su-btn[type="button"],
    body.sf-body .confirm-actions > a.su-btn,
    body.sf-body .confirm-actions > button.su-btn[type="button"],
    body.sf-body .cart-actions > a.su-btn,
    body.sf-body .cart-actions > button.su-btn[type="button"],
    body.sf-body .sf-mp-card__actions > a.su-btn,
    body.sf-body .sf-mp-card__actions > button.su-btn[type="button"],
    body.sf-body .sf-main .form-actions > a.su-btn,
    body.sf-body .sf-main .form-actions > button.su-btn[type="button"],
    body.sf-body .sf-main a.sf-school-strip__btn,
    body.sf-body .preview-content-card .form-grid > a.su-btn,
    body.sf-body .sf-main .ai-input-card > .su-btn.full[type="button"],
    body.sf-body .sf-main .ai-input-card > a.su-btn.full {
        flex: 0 1 calc(50% - 4px);
        width: calc(50% - 4px);
        max-width: calc(50% - 4px);
        min-width: 0;
        min-height: 38px;
        margin: 0;
        padding: 7px 8px;
        gap: 5px;
        font-size: 13px;
        line-height: 1.25;
        white-space: normal;
        text-align: center;
        justify-content: center;
        overflow-wrap: anywhere;
    }
    /* গ্রিডের ভেতরে (তথ্যের পাতা) কলামটাই অর্ধেক; পটির বোতাম বাঁয়ে; মাপের পাতার দুটো বোতাম সাধারণ লাইনে পাশাপাশি */
    body.sf-body .preview-content-card .form-grid > a.su-btn { width: 100%; max-width: none; }
    body.sf-body .sf-main a.sf-school-strip__btn { justify-self: start; }
    body.sf-body .sf-main .ai-input-card > .su-btn.full[type="button"],
    body.sf-body .sf-main .ai-input-card > a.su-btn.full { display: inline-flex; vertical-align: top; margin-top: 10px; }
    /* সারির ছোট (mini) বোতামও একই আইকন-মাপে */
    body.sf-body .sf-b2b-hero__actions > .su-btn svg,
    body.sf-body .student-portal-actions > .su-btn svg,
    body.sf-body .sf-cta__actions > .su-btn svg,
    body.sf-body .sf-dir__empty-actions > .su-btn svg,
    body.sf-body .sf-b2b-thanks__actions > .su-btn svg,
    body.sf-body .confirm-actions > .su-btn svg,
    body.sf-body .cart-actions > .su-btn svg,
    body.sf-body .sf-mp-card__actions > .su-btn svg,
    body.sf-body .sf-main .form-actions > .su-btn svg { flex: none; width: 15px; height: 15px; }

    /* গ) ড্যাশবোর্ড/প্রোফাইলের অংশের মাথার ছোট বোতাম — পুরো চওড়া নয়, নিজের লেখার মাপে */
    body.sf-body .sf-main .admin-card-head { align-items: flex-start; }
    body.sf-body .sf-main .admin-card-head > .su-btn { align-self: flex-start; width: auto; min-height: 36px; padding: 6px 12px; font-size: 13px; }
}
/* সাধারণ ফোনে (≤৫৭৫px) অর্ধেক-চওড়া বোতামে জায়গা কম — আইকন লুকায়, লেখা ১২.৫px: "কল করুন 01712345678"-এর মতো লেখাও এক লাইনে ধরে
   (নাহলে দুই লাইনে ভেঙে বোতাম আবার ৪৮px উঁচু হতো) */
@media (max-width: 575.98px) {
    body.sf-body .sf-b2b-hero__actions > a.su-btn,
    body.sf-body .sf-b2b-hero__actions > button.su-btn[type="button"],
    body.sf-body .student-portal-actions > a.su-btn,
    body.sf-body .student-portal-actions > button.su-btn[type="button"],
    body.sf-body .sf-cta__actions > a.su-btn,
    body.sf-body .sf-cta__actions > button.su-btn[type="button"],
    body.sf-body .sf-dir__empty-actions > a.su-btn,
    body.sf-body .sf-dir__empty-actions > button.su-btn[type="button"],
    body.sf-body .sf-b2b-thanks__actions > a.su-btn,
    body.sf-body .sf-b2b-thanks__actions > button.su-btn[type="button"],
    body.sf-body .confirm-actions > a.su-btn,
    body.sf-body .confirm-actions > button.su-btn[type="button"],
    body.sf-body .cart-actions > a.su-btn,
    body.sf-body .cart-actions > button.su-btn[type="button"],
    body.sf-body .sf-mp-card__actions > a.su-btn,
    body.sf-body .sf-mp-card__actions > button.su-btn[type="button"],
    body.sf-body .sf-main .form-actions > a.su-btn,
    body.sf-body .sf-main .form-actions > button.su-btn[type="button"],
    body.sf-body .sf-main a.sf-school-strip__btn,
    body.sf-body .preview-content-card .form-grid > a.su-btn,
    body.sf-body .sf-main .ai-input-card > .su-btn.full[type="button"],
    body.sf-body .sf-main .ai-input-card > a.su-btn.full {
        padding: 7px 6px;
        font-size: 12.5px;
    }
    body.sf-body .sf-b2b-hero__actions > a.su-btn svg,
    body.sf-body .sf-b2b-hero__actions > button.su-btn[type="button"] svg,
    body.sf-body .student-portal-actions > a.su-btn svg,
    body.sf-body .student-portal-actions > button.su-btn[type="button"] svg,
    body.sf-body .sf-cta__actions > a.su-btn svg,
    body.sf-body .sf-cta__actions > button.su-btn[type="button"] svg,
    body.sf-body .sf-dir__empty-actions > a.su-btn svg,
    body.sf-body .sf-dir__empty-actions > button.su-btn[type="button"] svg,
    body.sf-body .sf-b2b-thanks__actions > a.su-btn svg,
    body.sf-body .sf-b2b-thanks__actions > button.su-btn[type="button"] svg,
    body.sf-body .confirm-actions > a.su-btn svg,
    body.sf-body .confirm-actions > button.su-btn[type="button"] svg,
    body.sf-body .cart-actions > a.su-btn svg,
    body.sf-body .cart-actions > button.su-btn[type="button"] svg,
    body.sf-body .sf-mp-card__actions > a.su-btn svg,
    body.sf-body .sf-mp-card__actions > button.su-btn[type="button"] svg,
    body.sf-body .sf-main .form-actions > a.su-btn svg,
    body.sf-body .sf-main .form-actions > button.su-btn[type="button"] svg,
    body.sf-body .sf-main a.sf-school-strip__btn svg,
    body.sf-body .preview-content-card .form-grid > a.su-btn svg,
    body.sf-body .sf-main .ai-input-card > .su-btn.full[type="button"] svg,
    body.sf-body .sf-main .ai-input-card > a.su-btn.full svg { display: none; }
}

/* ---------- ১০. ফোনে বোতাম মাঝ বরাবর (Phase 20, 2026-10-14) ----------
   মালিকের চাওয়া: ফোনে (≤৭৬৭px) বোতামগুলো মাঝখানে — একটা থাকলে মাঝ বরাবর; দুইটা থাকলে মাঝ বরাবর একটার নিচে অন্যটা;
   তিনটা থাকলে দুইটা এক লাইনে মাঝ বরাবর আর ৩ নং-টা নিচে মাঝ বরাবর — ফ্রন্টএন্ডের সব পাতায়। (মাপ §৯-এর মতোই: ৩৮px, ১৩/১২.৫px লেখা।)
     ক) বোতামের সারি (hero, CTA বাক্স, অর্ডার নিশ্চিত, কার্ট, আমার মাপের কার্ড, ইউনিফর্মের তথ্য, AR প্রিভিউ, স্কুলের তালিকা খালি,
        স্কুলের ফর্মের ধন্যবাদ, মোবাইল menu-র অ্যাকাউন্ট-বোতাম) — সারি মাঝ বরাবর। (অভিভাবকের ড্যাশবোর্ডের কার্ড — একই নিয়ম portal-dashboard.css-এ, P22)
        ৩টা বা বেশি: §৯-এর অর্ধেক চওড়ায় দুটো করে পাশাপাশি, বিজোড় শেষেরটা নিচে মাঝে (৪টা হলে ২+২)।
        ১টা বা ২টা: প্রতিটা নিজের লাইনে মাঝ বরাবর, সমান চওড়া — সারির অর্ধেক, তবে অন্তত ২০০px (সরু কার্ডেও লেখা এক লাইনে ধরে)।
        কয়টা বোতাম তা পুরনো CSS3-এর গোনা দিয়ে (only-of-type / nth-last-of-type) — পুরনো ফোনের browser-এও একই রকম দেখায়।
        এই সারিগুলোর বোতাম সবই link (<a>); পাশের অন্য জিনিস (অবস্থা-চিহ্ন, cm/in, ছোট লেখা) গোনায় আসে না। menu-র সারিতে link + লগআউট form।
     খ) একা বোতাম (সারি নয় — কার্ড/ফর্ম/তালিকার ভেতরে) — নিজের মাপেই, শুধু মাঝ বরাবর।
   পুরো-চওড়া form জমার বোতাম (কার্টে যোগ, অর্ডার নিশ্চিত, ট্র্যাক, লগইন …) আগে থেকেই মাঝ বরাবর — মাপ বদলায়নি (§৯-এর মতো)।
   নিচের sticky বোতাম-বার, ক্যারোসেলের তীর, "?" সাহায্য, পাসওয়ার্ড-চোখ, কপি, cm/in বদলের মতো ছোট নিয়ন্ত্রণ-বোতাম আর
   ফোন-ক্যামেরার পাতা (সেখানে বোতাম আগে থেকেই পুরো চওড়া, একটার নিচে আরেকটা) বদলায়নি। */
@media (max-width: 767.98px) {
    /* ক) বোতামের সারি — মাঝ বরাবর, ভাঁজ হয়ে পরের লাইনে (৩টা হলে ২ + ১, শেষেরটা মাঝে) */
    body.sf-body .sf-b2b-hero__actions,
    body.sf-body .student-portal-actions,
    body.sf-body .sf-cta__actions,
    body.sf-body .sf-dir__empty-actions,
    body.sf-body .sf-b2b-thanks__actions,
    body.sf-body .confirm-actions,
    body.sf-body .cart-actions,
    body.sf-body .sf-mp-card__actions,
    body.sf-body .sf-main .form-actions,
    body.sf-body .preview-content-card .form-grid,
    body.sf-body .sf-drawer__account-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 8px; width: 100%; }
    body.sf-body .cart-actions > small { text-align: center; }
    /* menu-র অ্যাকাউন্ট-বোতাম (লগআউট form-এর ভেতরে) — §৯-এর মতো অর্ধেক।
       CHANGE (2026-10-18, P22): ড্যাশবোর্ডের অর্ডার-কার্ডের সারি (.student-order-status) আর নেই — নতুন কার্ডের একই নিয়ম portal-dashboard.css-এ (.gd-order__actions) */
    body.sf-body .sf-drawer__account-actions > a.su-btn,
    body.sf-body .sf-drawer__account-actions > form { flex: 0 1 calc(50% - 4px); width: calc(50% - 4px); max-width: calc(50% - 4px); min-width: 0; margin: 0; }
    body.sf-body .sf-drawer__account-actions > form > .su-btn { width: 100%; }
    body.sf-body .preview-content-card .form-grid > a.su-btn { flex: 0 1 calc(50% - 4px); width: calc(50% - 4px); max-width: calc(50% - 4px); }

    /* সারিতে ১টা বা ২টা বোতাম — প্রতিটা নিজের লাইনে মাঝ বরাবর, সমান চওড়া।
       বাঁ-ডানের margin মিলে পুরো লাইন নেয়, তাই দুটো কখনো পাশাপাশি বসে না; সারির অন্য জিনিস (অবস্থা-চিহ্ন, cm/in, ছোট লেখা) নিজের জায়গাতেই থাকে।
       গোনা: :only-of-type = একটাই link; :first-of-type:nth-last-of-type(2) ও :nth-of-type(2):last-of-type = ঠিক দুটো link */
    body.sf-body .sf-b2b-hero__actions > a.su-btn:only-of-type,
    body.sf-body .sf-b2b-hero__actions > a.su-btn:first-of-type:nth-last-of-type(2),
    body.sf-body .sf-b2b-hero__actions > a.su-btn:nth-of-type(2):last-of-type,
    body.sf-body .student-portal-actions > a.su-btn:only-of-type,
    body.sf-body .student-portal-actions > a.su-btn:first-of-type:nth-last-of-type(2),
    body.sf-body .student-portal-actions > a.su-btn:nth-of-type(2):last-of-type,
    body.sf-body .sf-cta__actions > a.su-btn:only-of-type,
    body.sf-body .sf-cta__actions > a.su-btn:first-of-type:nth-last-of-type(2),
    body.sf-body .sf-cta__actions > a.su-btn:nth-of-type(2):last-of-type,
    body.sf-body .sf-dir__empty-actions > a.su-btn:only-of-type,
    body.sf-body .sf-dir__empty-actions > a.su-btn:first-of-type:nth-last-of-type(2),
    body.sf-body .sf-dir__empty-actions > a.su-btn:nth-of-type(2):last-of-type,
    body.sf-body .sf-b2b-thanks__actions > a.su-btn:only-of-type,
    body.sf-body .sf-b2b-thanks__actions > a.su-btn:first-of-type:nth-last-of-type(2),
    body.sf-body .sf-b2b-thanks__actions > a.su-btn:nth-of-type(2):last-of-type,
    body.sf-body .confirm-actions > a.su-btn:only-of-type,
    body.sf-body .confirm-actions > a.su-btn:first-of-type:nth-last-of-type(2),
    body.sf-body .confirm-actions > a.su-btn:nth-of-type(2):last-of-type,
    body.sf-body .cart-actions > a.su-btn:only-of-type,
    body.sf-body .cart-actions > a.su-btn:first-of-type:nth-last-of-type(2),
    body.sf-body .cart-actions > a.su-btn:nth-of-type(2):last-of-type,
    body.sf-body .sf-mp-card__actions > a.su-btn:only-of-type,
    body.sf-body .sf-mp-card__actions > a.su-btn:first-of-type:nth-last-of-type(2),
    body.sf-body .sf-mp-card__actions > a.su-btn:nth-of-type(2):last-of-type,
    body.sf-body .sf-main .form-actions > a.su-btn:only-of-type,
    body.sf-body .sf-main .form-actions > a.su-btn:first-of-type:nth-last-of-type(2),
    body.sf-body .sf-main .form-actions > a.su-btn:nth-of-type(2):last-of-type,
    body.sf-body .preview-content-card .form-grid > a.su-btn:only-of-type,
    body.sf-body .preview-content-card .form-grid > a.su-btn:first-of-type:nth-last-of-type(2),
    body.sf-body .preview-content-card .form-grid > a.su-btn:nth-of-type(2):last-of-type,
    body.sf-body .sf-drawer__account-actions > a.su-btn:only-child,
    body.sf-body .sf-drawer__account-actions > a.su-btn:first-child:nth-last-child(2),
    body.sf-body .sf-drawer__account-actions > a.su-btn:nth-child(2):last-child,
    body.sf-body .sf-drawer__account-actions > form:nth-child(2):last-child {
        --sf-btn-w: max(calc(50% - 4px), min(100%, 200px));
        flex: 0 0 auto;
        width: var(--sf-btn-w);
        max-width: 100%;
        margin-left: calc((100% - var(--sf-btn-w)) / 2);
        margin-right: calc((100% - var(--sf-btn-w)) / 2);
    }
    /* মাপের পাতার "AI মাপ আবার হিসাব করুন" / "AR প্রিভিউ দেখুন" (কার্ডের ভেতরে পরপর দুটো) — একটার নিচে আরেকটা, মাঝ বরাবর, সমান চওড়া */
    body.sf-body .sf-main .ai-input-card > .su-btn.full[type="button"]:not([hidden]),
    body.sf-body .sf-main .ai-input-card > a.su-btn.full {
        --sf-btn-w: max(calc(50% - 4px), min(100%, 200px));
        display: flex;
        width: var(--sf-btn-w);
        max-width: 100%;
        margin: 10px auto 0;
    }
    body.sf-body .sf-main .ai-input-card > .su-btn.full[type="button"] + a.su-btn.full { margin-top: 8px; }

    /* খ) একা বোতাম — নিজের মাপে, মাঝ বরাবর */
    body.sf-body .sf-main a.sf-school-strip__btn { justify-self: center; width: auto; max-width: 100%; padding-left: 14px; padding-right: 14px; }
    body.sf-body .sf-main .result-row-uniform > a.su-btn { grid-column: 1 / -1; justify-self: center; }
    body.sf-body .sf-main .admin-card-head > .su-btn { align-self: center; }
    body.sf-body .sf-main .cart-row > form { justify-self: center; }
    body.sf-body .sf-main .sf-fg__section > .su-btn,
    body.sf-body .sf-main .sf-fit__closed > .su-btn { justify-self: center; }
    body.sf-body .sf-main .sf-scan__mobile > .sf-scan__open { justify-self: center; width: auto; max-width: 100%; }
    body.sf-body .sf-main .track-card > .su-btn:not([hidden]),
    body.sf-body .sf-main .sf-exchange__order > .su-btn:not([hidden]),
    body.sf-body .sf-main .profile-form > .su-btn:not([hidden]),
    body.sf-body .sf-main .sf-fit__thanks .su-btn:not([hidden]),
    body.sf-body .sf-main .sf-mp-compare__back > .su-btn:not([hidden]),
    body.sf-body .sf-main .sf-reorder-note > .su-btn:not([hidden]),
    body.sf-body .sf-main .sf-scan__qr > .su-btn:not([hidden]),
    body.sf-body .sf-main .sf-scan__result > .su-btn:not([hidden]),
    body.sf-body .sf-main .payment-panel > a.su-btn:not([hidden]),
    body.sf-body .sf-main .payment-panel > form > .su-btn:not([hidden]),
    body.sf-body .sf-main .sf-exchange__request form > .su-btn:not([hidden]),
    body.sf-body .sf-main .sf-mp-sides form > .su-btn:not([hidden]) { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
    /* ফিট-মতামতের জমা বোতাম (পাশের গ্যারান্টির লেখা নিচের লাইনে), মাপের গাইডের "ছবিতে দেখুন" / "ভিডিও দেখুন", আমার মাপের টেবিলের
       "ফিরিয়ে আনুন", দুই ভার্সন মেলানোর বোতাম (ঘরগুলো পুরো চওড়া, বোতাম নিজের লাইনে) */
    body.sf-body .sf-main .sf-fit__submit { justify-content: center; }
    body.sf-body .sf-main .sf-fit__submit > .sf-fit__guarantee { flex: 1 1 100%; }
    body.sf-body .sf-main .sf-gpoint__actions { flex-direction: column; align-items: center; }
    body.sf-body .sf-main .sf-mp-actions-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
    body.sf-body .sf-main .sf-mp-compare__fields > .sf-mp-compare__field { flex: 1 1 100%; }
    body.sf-body .sf-main .sf-mp-compare__fields > .su-btn { margin-left: auto; margin-right: auto; }
}

/* ---------- ৭. কম নড়াচড়া / ছাপা ---------- */
@media (prefers-reduced-motion: reduce) {
    .sf-rise { display: none; }
    .sf-footer__tape, .sf-footer__buttons i, body.sf-body .sf-footer h4::before, body.sf-body .sf-page-hero .sf-page-hero__mark,
    body.sf-body .sf-footer__grid + .sf-footer__policies::before, body.sf-body .sf-footer__grid + .sf-footer__bottom::before { animation: none !important; }
    .sf-footer.is-pending .sf-footer__grid > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .sf-footer__glow { display: none; }
}
@media print {
    .sf-rise, .sf-footer__tape, .sf-footer__glow, .sf-footer__buttons { display: none !important; }
    .sf-page-hero { color: #000; background: none !important; }
    .sf-page-hero .sf-hero__wave { display: none; }
}