/* Register each color token as an animatable custom property */
@property --bg {
    syntax: '<color>';
    inherits: true;
    initial-value: #F4F7FB;
}

@property --ink {
    syntax: '<color>';
    inherits: true;
    initial-value: #0B1B2D;
}

@property --muted {
    syntax: '<color>';
    inherits: true;
    initial-value: #5B6B7E;
}

@property --line {
    syntax: '<color>';
    inherits: true;
    initial-value: #DCE4EE;
}

@property --brand {
    syntax: '<color>';
    inherits: true;
    initial-value: #0B5DAA;
}

@property --brandSoft {
    syntax: '<color>';
    inherits: true;
    initial-value: #E4F1FA;
}

@property --accent {
    syntax: '<color>';
    inherits: true;
    initial-value: #10A87C;
}

@property --highlight {
    syntax: '<color>';
    inherits: true;
    initial-value: #F5B919;
}

@property --paper {
    syntax: '<color>';
    inherits: true;
    initial-value: #FFFFFF;
}

:root {
    --bg: #F4F7FB;
    --ink: #0B1B2D;
    --muted: #5B6B7E;
    --line: #DCE4EE;
    --brand: #0B5DAA;
    --brandSoft: #E4F1FA;
    --accent: #10A87C;
    --highlight: #F5B919;
    --paper: #FFFFFF;
    /* Animate every color token whenever it changes */
    transition: --bg 0.42s ease, --paper 0.42s ease, --ink 0.38s ease, --muted 0.38s ease, --line 0.42s ease, --brand 0.38s ease, --brandSoft 0.42s ease, --accent 0.38s ease, --highlight 0.38s ease;
}

/* Suppress theme transition on first paint so page doesn't animate in */
html.no-transition {
    transition: none !important;
}

html,
body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Bahnschrift", "Barlow Semi Condensed", "Segoe UI", system-ui, sans-serif;
    font-weight: 400;
}

.font-display {
    font-family: "Bahnschrift", "Barlow Semi Condensed", "Segoe UI", sans-serif;
    font-stretch: condensed;
    letter-spacing: -0.005em;
    font-weight: 600;
}

.bn {
    font-family: "Hind Siliguri", sans-serif;
}

.ink {
    color: var(--ink);
}

.muted {
    color: var(--muted);
}

.bg-paper {
    background: var(--paper);
}

.border-line {
    border-color: var(--line);
}

.text-brand {
    color: var(--brand);
}

.bg-brand {
    background: var(--brand);
}

.ring-brand {
    --tw-ring-color: var(--brand);
}

.bg-brandSoft {
    background: var(--brandSoft);
}

.text-accent {
    color: var(--accent);
}

.bg-accent {
    background: var(--accent);
}

.text-highlight {
    color: var(--highlight);
}

.bg-highlight {
    background: var(--highlight);
}

/* Subtle paper grain */
.grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .35;
    mix-blend-mode: multiply;
    background-image: radial-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px), radial-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 1px;
}

/* Editorial dot pattern */
.dot-grid {
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 16px 16px;
}

/* Striped placeholder (per default-aesthetic) */
.ph-stripe {
    background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 10px);
}

.ph-stripe-strong {
    background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 8px);
}

/* Marquee */
@keyframes marquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.marquee-track {
    animation: marquee 40s linear infinite;
}

/* Motivational chip float */
@keyframes float-chip {

    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

.motive-chip {
    animation: float-chip 3.8s ease-in-out infinite;
}

.motive-chip-d1 {
    animation-delay: 0s;
}

.motive-chip-d2 {
    animation-delay: 1s;
}

.motive-chip-d3 {
    animation-delay: 1.9s;
}

.motive-chip-d4 {
    animation-delay: 2.8s;
}

/* Reveal */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s ease, transform .7s ease;
}

    .reveal.in {
        opacity: 1;
        transform: none;
    }

/* Underline link */
.ulink {
    position: relative;
}

    .ulink::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        height: 1px;
        background: currentColor;
        transform: scaleX(.3);
        transform-origin: left;
        transition: transform .35s ease;
    }

    .ulink:hover::after {
        transform: scaleX(1);
    }

/* Nav active */
.nav-link {
    position: relative;
}

    .nav-link::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -6px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--brand);
        transform: translateX(-50%) scale(0);
        transition: transform .25s ease;
    }

    .nav-link:hover::before,
    .nav-link.active::before {
        transform: translateX(-50%) scale(1);
    }

/* Course card */
.course-card {
    transition: transform .35s ease, box-shadow .35s ease;
}

    .course-card:hover {
        transform: translateY(-4px);
    }

/* Buttons */
.btn-psz,
.btn-psz-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    border: none;
}

.btn-psz {
    background: var(--brand);
    color: var(--paper);
    box-shadow: 0 1px 4px color-mix(in oklab, var(--brand) 20%, transparent);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .btn-psz:hover {
        background: color-mix(in oklab, var(--brand) 82%, black);
        box-shadow: 0 4px 14px color-mix(in oklab, var(--brand) 28%, transparent);
        transform: translateY(-1px);
        color: var(--paper);
    }

    .btn-psz:active {
        transform: translateY(0);
        box-shadow: none;
    }

.btn-psz-ghost {
    border: 1.5px solid var(--brand);
    color: var(--brand);
    background: transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .btn-psz-ghost:hover {
        background: var(--brand);
        color: var(--paper);
        box-shadow: 0 4px 14px color-mix(in oklab, var(--brand) 24%, transparent);
    }

    .btn-psz-ghost:active {
        background: color-mix(in oklab, var(--brand) 82%, black);
        color: var(--paper);
    }

/* Hero number ticker */
.ticker-num {
    font-feature-settings: "tnum";
}

/* Marquee chevron */
.chev {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
}

/* Star rating */
.star {
    width: 14px;
    height: 14px;
}

/* Hero word-swap */
.hero-swap {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    min-height: 1em;
}

    .hero-swap .hs-word {
        display: inline-block;
        opacity: 0;
        transform: translateY(0.55em);
        filter: blur(6px);
        transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .65s cubic-bezier(.2, .7, .2, 1), filter .55s ease;
        position: absolute;
        left: 0;
        top: 0;
        white-space: nowrap;
        padding-bottom: 0.18em;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'><path d='M2 6 Q 30 0 60 5 T 118 4' fill='none' stroke='%230B5DAA' stroke-width='2' stroke-linecap='round' opacity='0.75'/></svg>");
        background-repeat: no-repeat;
        background-position: 0 100%;
        background-size: 100% 0.34em;
    }

        .hero-swap .hs-word.is-active {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
            position: relative;
        }

        .hero-swap .hs-word.is-leave {
            opacity: 0;
            transform: translateY(-0.45em);
            filter: blur(4px);
        }

/* PSZ mark in hero — accent (teal) with subtle pill background */
.psz-mark {
    color: var(--accent);
    background: color-mix(in oklab, #4f9ad3 14%, transparent);
    padding: 0.04em 0.32em;
    border-radius: 0.32em;
    box-shadow: inset 0 -0.08em 0 color-mix(in oklab, #8ebae4 35%, transparent);
}

/* Editorial divider */
.rule {
    height: 1px;
    background: var(--line);
}

/* Pill */
.pill {
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 999px;
}

/* Tweaks panel (own implementation) */
#tweaks {
    display: none;
}

    #tweaks.open {
        display: block;
    }

/* Theme toggle — border/bg/color shared across all pages */
#themeToggle {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    transition: background .2s ease;
}

/* Avoid layout flash for font loading */
.font-display,
.bn {
    font-display: swap;
}

/* Aspect helpers */
.aspect-portrait {
    aspect-ratio: 4/5;
}

/* Tag */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

    .tag::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        display: inline-block;
    }

/* Section header layout */
.section-eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Logo mark — uses real PNG */
.logo-mark {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
}

    .logo-mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* WhatsApp floating */
.wa-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;
}

/* ==== Global responsive safety ==== */
html,
body {
    overflow-x: hidden;
}

*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* Min 44px touch target for interactive elements on touch devices */
@media (hover: none) and (pointer: coarse) {

    a[href],
    button {
        min-height: 36px;
    }
}

/* ==== Mobile menu (slide-down panel) ==== */
.mob-menu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
    background: var(--paper);
}

    .mob-menu.open {
        max-height: 680px;
        opacity: 1;
    }

.mob-menu-inner > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    transition: color .2s ease, padding-left .25s ease, background .2s ease;
}

    .mob-menu-inner > a:hover,
    .mob-menu-inner > a:focus-visible {
        color: var(--brand);
        padding-left: 10px;
    }

    .mob-menu-inner > a:last-child {
        border-bottom: none;
    }

    .mob-menu-inner > a::after {
        content: "";
        width: 6px;
        height: 6px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(-45deg);
        opacity: 0.4;
        transition: opacity .2s ease, transform .2s ease;
    }

    .mob-menu-inner > a:hover::after {
        opacity: 1;
        transform: rotate(-45deg) translate(2px, -2px);
    }

/* ==== Hamburger animation ==== */
#mobBtn .hamburger {
    position: relative;
    width: 18px;
    height: 14px;
    display: inline-block;
}

    #mobBtn .hamburger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, top .35s ease;
    }

        #mobBtn .hamburger span:nth-child(1) {
            top: 0;
        }

        #mobBtn .hamburger span:nth-child(2) {
            top: 6px;
        }

        #mobBtn .hamburger span:nth-child(3) {
            top: 12px;
        }

#mobBtn.is-open .hamburger span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

#mobBtn.is-open .hamburger span:nth-child(2) {
    opacity: 0;
}

#mobBtn.is-open .hamburger span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

/* ==== Hero responsive headline ==== */
.hero-headline-word {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: -0.6px;
}

.hero-line-2 {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 26px;
    line-height: 1.04;
    letter-spacing: 0.3px;
}

@media (min-width: 640px) {
    .hero-headline-word {
        letter-spacing: -1.2px;
    }

    .hero-line-2 {
        font-size: 34px;
        letter-spacing: 0.6px;
    }
}

@media (min-width: 768px) {
    .hero-headline-word {
        letter-spacing: -1.8px;
    }

    .hero-line-2 {
        font-size: 44px;
        line-height: 1;
        letter-spacing: 1px;
    }
}

/* Info strip (3-item row below hero) */
.info-strip-item {
    transition: background .2s ease;
    color: var(--ink);
    text-decoration: none;
}

    .info-strip-item:hover {
        background: color-mix(in oklab, var(--bg) 50%, transparent);
    }

@media (min-width: 640px) {
    .info-strip-item {
        border-bottom: none !important;
        border-right: 1px solid var(--line);
    }

        .info-strip-item:last-child {
            border-right: none;
        }
}

/* Stats ledger: tighter on mobile */
@media (max-width: 480px) {
    .stats-ledger > div {
        padding: 12px 10px !important;
    }

    .stats-ledger .font-display {
        font-size: 22px !important;
    }

    .stats-ledger .uppercase {
        font-size: 9px !important;
    }
}

/* Section padding: tighter on mobile */
@media (max-width: 640px) {
    section.section-pad {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* Brand text: shrink on small screens */
@media (max-width: 380px) {
    .brand-text {
        font-size: 16px;
    }

    .brand-sub {
        display: none;
    }

    .logo-mark {
        width: 36px;
        height: 36px;
    }
}

/* WhatsApp float: smaller on mobile */
@media (max-width: 480px) {
    .wa-float {
        width: 48px !important;
        height: 48px !important;
        right: 14px;
        bottom: 14px;
    }
}

/* ---- Theme toggle button ---- */
#themeToggle {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

    #themeToggle .icon-sun,
    #themeToggle .icon-moon {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
        pointer-events: none;
    }

    #themeToggle .icon-sun {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(90deg) scale(0.5);
    }

    #themeToggle .icon-moon {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

[data-palette="night"] #themeToggle .icon-sun {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

[data-palette="night"] #themeToggle .icon-moon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.5);
}

/* ---- Slick slider overrides ---- */
.course-slider .slick-list {
    overflow: hidden;
}

.course-slider .slick-track {
    display: flex !important;
}

/* Left-align when fewer slides than slidesToShow */
.course-category.few-cards .slick-track {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

@media (min-width: 1024px) {
    .course-category.few-cards .slider-arrow {
        display: none;
    }
}

.course-slider .slick-slide {
    height: inherit;
}

    .course-slider .slick-slide > div {
        height: 100%;
    }

.slide-item {
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

    .slide-item .course-card {
        height: 100%;
    }

.slider-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    flex-shrink: 0;
}

    .slider-arrow:hover {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--paper);
    }

    .slider-arrow.slick-disabled {
        opacity: 0.3;
        pointer-events: none;
    }

.course-category + .course-category {
    border-top: 1px solid var(--line);
    padding-top: 3.5rem;
}

/* ============================================================
   BOOTSTRAP INTEGRATION + UTILITY HELPERS
   ============================================================ */

/* Bind Bootstrap CSS variables to PSZ theme tokens */
:root {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-body-font-family: "Bahnschrift", "Barlow Semi Condensed", "Segoe UI", system-ui, sans-serif;
    --bs-border-color: var(--line);
    --bs-border-color-translucent: var(--line);
    --bs-primary: var(--brand);
    --bs-primary-rgb: 11, 93, 170;
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand);
}

/* Profile dropdown — PSZ theme */
.dropdown-menu {
    --bs-dropdown-bg: var(--paper);
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-color: var(--ink);
    --bs-dropdown-link-color: var(--ink);
    --bs-dropdown-link-hover-color: var(--brand);
    --bs-dropdown-link-hover-bg: var(--brandSoft);
    --bs-dropdown-divider-bg: var(--line);
    --bs-dropdown-link-active-color: var(--paper);
    --bs-dropdown-link-active-bg: var(--brand);
    background: var(--paper);
    border: 1px solid var(--line) !important;
    box-shadow: 0 8px 24px color-mix(in oklab, var(--ink) 12%, transparent);
}

.dropdown-item {
    transition: background .15s ease, color .15s ease;
}

    .dropdown-item:hover i,
    .dropdown-item:focus i {
        color: var(--brand) !important;
    }

/* Body baseline retained, but Bootstrap default font-size override */
html,
body {
    font-size: 16px;
}

/* Reset Bootstrap reboot's default block-margin on headings/paragraphs/lists
   (Tailwind preflight zeroes these — we follow that convention so explicit
   spacing utilities behave as designed). */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
figure,
blockquote {
    margin-top: 0;
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Custom 1280px container with responsive page padding */
.psz-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 768px) {
    .psz-container {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* Section padding scale (used on main sections) */
.section-pad {
    padding-top: 56px;
    padding-bottom: 56px;
}

@media (min-width: 640px) {
    .section-pad {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (min-width: 768px) {
    .section-pad {
        padding-top: 112px;
        padding-bottom: 112px;
    }
}

/* Hero specific top/bottom paddings */
.hero-pad {
    padding-top: 24px;
    padding-bottom: 64px;
}

@media (min-width: 768px) {
    .hero-pad {
        padding-top: 56px;
        padding-bottom: 96px;
    }
}

/* Font size helpers (px exact) */
.fs-9 {
    font-size: 9px;
}

.fs-10 {
    font-size: 10px;
}

.fs-11 {
    font-size: 11px;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 17px;
}

.fs-18 {
    font-size: 18px;
}

.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.fs-24 {
    font-size: 24px;
}

.fs-26 {
    font-size: 26px;
}

.fs-28 {
    font-size: 28px;
}

.fs-30 {
    font-size: 30px;
}

.fs-32 {
    font-size: 32px;
}

.fs-34 {
    font-size: 34px;
}

.fs-36 {
    font-size: 36px;
}

.fs-40 {
    font-size: 40px;
}

.fs-44 {
    font-size: 44px;
}

.fs-52 {
    font-size: 52px;
}

.fs-56 {
    font-size: 56px;
}

.fs-60 {
    font-size: 60px;
}

.fs-72 {
    font-size: 72px;
}

@media (min-width: 640px) {
    .fs-sm-20 {
        font-size: 20px;
    }

    .fs-sm-40 {
        font-size: 40px;
    }
}

@media (min-width: 768px) {
    .fs-md-13 {
        font-size: 13px;
    }

    .fs-md-14 {
        font-size: 14px;
    }

    .fs-md-15 {
        font-size: 15px;
    }

    .fs-md-17 {
        font-size: 17px;
    }

    .fs-md-19 {
        font-size: 19px;
    }

    .fs-md-26 {
        font-size: 26px;
    }

    .fs-md-30 {
        font-size: 30px;
    }

    .fs-md-34 {
        font-size: 34px;
    }

    .fs-md-44 {
        font-size: 44px;
    }

    .fs-md-52 {
        font-size: 52px;
    }

    .fs-md-56 {
        font-size: 56px;
    }

    .fs-md-60 {
        font-size: 60px;
    }
}

/* Letter spacing helpers */
.tracking-tight {
    letter-spacing: -0.01em;
}

.tracking-tighter {
    letter-spacing: -0.02em;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-widest {
    letter-spacing: 0.18em;
}

.tracking-012 {
    letter-spacing: 0.12em;
}

/* Line height helpers */
.lh-none {
    line-height: 1;
}

.lh-105 {
    line-height: 1.05;
}

.lh-11 {
    line-height: 1.1;
}

.lh-tight {
    line-height: 1.15;
}

.lh-snug {
    line-height: 1.35;
}

.lh-relaxed {
    line-height: 1.7;
}

.lh-19 {
    line-height: 1.9;
}

.lh-185 {
    line-height: 1.85;
}

/* Z-index helpers */
.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

/* Rounded radius helpers (Bootstrap rounded-* tops out at 3 / pill) */
.rounded-2xl {
    border-radius: 16px;
}

.rounded-3xl {
    border-radius: 24px;
}

.rounded-28 {
    border-radius: 28px;
}

.rounded-20 {
    border-radius: 20px;
}

.rounded-xl {
    border-radius: 12px;
}

.rounded-lg {
    border-radius: 8px;
}

/* Aspect ratios */
.aspect-4-3-6 {
    aspect-ratio: 4 / 3.6;
}

.aspect-5-3 {
    aspect-ratio: 5 / 3;
}

.aspect-5-4 {
    aspect-ratio: 5 / 4;
}

.aspect-3-4 {
    aspect-ratio: 3 / 4;
}

/* Min-height helpers */
.min-h-300 {
    min-height: 300px;
}

/* Fixed size circle/square helpers */
.size-9 {
    width: 36px;
    height: 36px;
}

.size-10 {
    width: 40px;
    height: 40px;
}

.size-14 {
    width: 56px;
    height: 56px;
}

/* Position inset:0 */
.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Width / max-width helpers */
.max-w-190 {
    max-width: 190px;
}

.max-w-320 {
    max-width: 320px;
}

.max-w-340 {
    max-width: 340px;
}

.max-w-360 {
    max-width: 360px;
}

.max-w-480 {
    max-width: 480px;
}

.max-w-520 {
    max-width: 520px;
}

.max-w-540 {
    max-width: 540px;
}

/* Object-fit (BS 5.3 has but include for safety) */
.object-contain {
    object-fit: contain;
}

.object-cover {
    object-fit: cover;
}

/* Text helpers */
.text-uppercase-tight {
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.line-through {
    text-decoration: line-through;
}

.font-mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* Accent color for form inputs */
.accent-brand {
    accent-color: var(--brand);
}

/* Border helpers for line color (BS .border uses --bs-border-color which is bound above) */
.border-l-3-brand {
    border-left: 3px solid color-mix(in oklab, var(--brand) 45%, transparent);
}

/* Hover transition + bg-brand variant for footer social */
.icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background .2s, color .2s, border-color .2s;
}

    .icon-circle:hover {
        background: var(--brand);
        color: var(--paper);
        border-color: transparent;
    }

/* Footer link hover */
.flink {
    color: var(--ink);
    text-decoration: none;
    transition: color .18s ease;
}

    .flink:hover {
        color: var(--brand);
    }

/* Footer bottom strip */
.footer-rule {
    height: 1px;
    background: var(--line);
    margin: 48px 0 24px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

.footer-copy {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.footer-credit {
    font-size: 13px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.footer-credit-link {
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid color-mix(in oklab, var(--brand) 35%, transparent);
    transition: color .18s ease, border-color .18s ease;
}

.footer-credit-link:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

@media (max-width: 640px) {
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        font-size: 12px;
    }
}

/* Newsletter form border-pill */
.newsletter-form {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    background: var(--paper);
    max-width: 360px;
}

    .newsletter-form input {
        flex: 1;
        background: transparent;
        border: 0;
        outline: none;
        padding: 8px 16px;
        font-size: 14px;
        color: var(--ink);
    }

        .newsletter-form input::placeholder {
            color: var(--muted);
        }

/* Announcement bar */
.announce-bar {
    font-size: 12px;
    letter-spacing: 0.025em;
    background: var(--ink);
    color: var(--paper);
}

    .announce-bar .inner {
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        overflow: hidden;
    }

.amber-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* Header sticky background */
.psz-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

    .psz-header .inner {
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

/* Stats ledger grid */
.stats-ledger {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    background: var(--paper);
}

    .stats-ledger > div {
        padding: 16px;
    }

@media (min-width: 768px) {
    .stats-ledger > div {
        padding: 20px;
    }
}

.stats-ledger > div + div {
    border-left: 1px solid var(--line);
}

/* Hero card */
.hero-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

/* Cards (course / general) */
.course-card {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: var(--paper);
    overflow: hidden;
    height: 100%;
}

/* Info strip */
.info-strip {
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

    .info-strip .row-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

@media (min-width: 640px) {
    .info-strip .row-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.info-strip-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
    .info-strip-item {
        padding: 24px;
        border-bottom: none;
        border-right: 1px solid var(--line);
    }

        .info-strip-item:last-child {
            border-right: none;
        }
}

@media (min-width: 768px) {
    .info-strip-item {
        padding: 28px;
    }
}

.info-strip-item .icon-box {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brandSoft);
    color: var(--brand);
}

/* Stat strip (success section) */
.stat-strip {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: color-mix(in oklab, var(--bg) 60%, transparent);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .stat-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-strip > div {
    padding: 24px;
}

@media (min-width: 768px) {
    .stat-strip > div {
        padding: 32px;
    }
}

.stat-strip > div {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

    .stat-strip > div:nth-child(2n) {
        border-right: none;
    }

    .stat-strip > div:nth-last-child(1),
    .stat-strip > div:nth-last-child(2) {
        border-bottom: none;
    }

@media (min-width: 768px) {
    .stat-strip > div {
        border-bottom: none;
        border-right: 1px solid var(--line);
    }

        .stat-strip > div:nth-child(2n) {
            border-right: 1px solid var(--line);
        }

        .stat-strip > div:last-child {
            border-right: none;
        }
}

/* About chips position grid */
.about-illu {
    position: relative;
    border-radius: 28px;
    border: 1px solid var(--line);
    background: var(--paper);
    overflow: hidden;
    aspect-ratio: 5 / 4;
}

.motive-chip-box {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* WhatsApp icon */
.wa-float {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: white;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

/* Bullet utility for tag/chev dot */
.dot-amber {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    display: inline-block;
}

/* PSZ tweaks panel */
#tweaks {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 50;
    width: 280px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}

/* Pill swatches */
.pal-swatch {
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .pal-swatch span {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
    }

/* Density button */
.den-btn {
    cursor: pointer;
    padding: 8px 12px;
    font-size: 12px;
}

/* Hover bg-brandSoft */
.hover-brandsoft:hover {
    background: var(--brandSoft);
}

/* Course slider arrow color */
.slider-arrow svg {
    pointer-events: none;
}

/* Hide scrollbars where overflow used */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    scrollbar-width: none;
}

/* Star colors fallback */
.star {
    display: inline-block;
}

/* Photo stub in success cards (already inline but ensure layout) */

/* Form button reset for Bootstrap inputs */
button:focus {
    outline: none;
}

/* Hero text headline word color */
.text-brand-strong {
    color: var(--brand);
}

/* Theme toggle hover */
#themeToggle:hover {
    background: var(--brandSoft);
}

/* Mobile menu link styles already present */

/* Override Bootstrap btn default focus ring to brand */
.btn-psz:focus,
.btn-psz-ghost:focus {
    box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--brand) 25%, transparent);
}

/* User profile menu */
.psz-user-menu {
    position: relative;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--line);
    flex-shrink: 0;
}

.user-chip {
    background: transparent;
    border: none;
    border-radius: 20px;
    padding: 3px 10px 3px 3px;
    cursor: pointer;
    transition: background .18s ease;
}

    .user-chip:hover {
        background: var(--brandSoft);
    }

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 164px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 24px color-mix(in oklab, var(--ink) 10%, transparent);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 40;
}

.psz-user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

    .user-dropdown-item:hover {
        background: var(--brandSoft);
        color: var(--brand);
    }

.user-dropdown-item--danger {
    color: #c0392b;
}

    .user-dropdown-item--danger:hover {
        background: #fef2f2;
        color: #c0392b;
    }

/* Mobile menu — user section */
.mob-user-section {
    border-top: 1px solid var(--line);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.mob-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px 12px;
}

.user-avatar-init {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brandSoft);
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid var(--line);
}

.mob-user-action {
    display: flex;
    align-items: center;
    padding: 9px 4px 9px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}

    .mob-user-action:hover {
        background: var(--brandSoft);
        color: var(--brand);
    }

.mob-logout {
    color: #c0392b;
}

    .mob-logout:hover {
        background: #fef2f2;
        color: #c0392b;
    }

/* Bootstrap row gutter override matches our gap-6 (24px) and gap-10 (40px) */
.row.g-page {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
}

@media (min-width: 768px) {
    .row.g-page {
        --bs-gutter-x: 40px;
        --bs-gutter-y: 40px;
    }
}

.row.g-section {
    --bs-gutter-x: 32px;
    --bs-gutter-y: 32px;
}

@media (min-width: 768px) {
    .row.g-section {
        --bs-gutter-x: 48px;
        --bs-gutter-y: 48px;
    }
}

/* ============================================================
   TAILWIND-ALIGNED SPACING SCALE
   Overrides Bootstrap defaults (which use 0/4/8/16/24/48px)
   so HTML class names map to the original Tailwind px values
   (1=4, 2=8, 3=12, 4=16, 5=20, 6=24, 7=28, 8=32, 9=36, 10=40,
    11=44, 12=48, 14=56, 16=64, 20=80, 24=96, 28=112).
   ============================================================ */

/* margin all */
.m-0 {
    margin: 0 !important
}

.m-1 {
    margin: 4px !important
}

.m-2 {
    margin: 8px !important
}

.m-3 {
    margin: 12px !important
}

.m-4 {
    margin: 16px !important
}

.m-5 {
    margin: 20px !important
}

.m-6 {
    margin: 24px !important
}

.m-7 {
    margin: 28px !important
}

.m-8 {
    margin: 32px !important
}

.m-9 {
    margin: 36px !important
}

.m-10 {
    margin: 40px !important
}

.m-11 {
    margin: 44px !important
}

.m-12 {
    margin: 48px !important
}

.m-14 {
    margin: 56px !important
}

.m-16 {
    margin: 64px !important
}

.m-20 {
    margin: 80px !important
}

.m-24 {
    margin: 96px !important
}

.m-28 {
    margin: 112px !important
}

/* margin-top */
.mt-0 {
    margin-top: 0 !important
}

.mt-0-5 {
    margin-top: 2px !important
}

.mt-1 {
    margin-top: 4px !important
}

.mt-2 {
    margin-top: 8px !important
}

.mt-3 {
    margin-top: 12px !important
}

.mt-4 {
    margin-top: 16px !important
}

.mt-5 {
    margin-top: 20px !important
}

.mt-6 {
    margin-top: 24px !important
}

.mt-7 {
    margin-top: 28px !important
}

.mt-8 {
    margin-top: 32px !important
}

.mt-9 {
    margin-top: 36px !important
}

.mt-10 {
    margin-top: 40px !important
}

.mt-11 {
    margin-top: 44px !important
}

.mt-12 {
    margin-top: 48px !important
}

.mt-14 {
    margin-top: 56px !important
}

.mt-16 {
    margin-top: 64px !important
}

.mt-20 {
    margin-top: 80px !important
}

.mt-24 {
    margin-top: 96px !important
}

.mt-28 {
    margin-top: 112px !important
}

/* margin-bottom */
.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: 4px !important
}

.mb-2 {
    margin-bottom: 8px !important
}

.mb-3 {
    margin-bottom: 12px !important
}

.mb-4 {
    margin-bottom: 16px !important
}

.mb-5 {
    margin-bottom: 20px !important
}

.mb-6 {
    margin-bottom: 24px !important
}

.mb-7 {
    margin-bottom: 28px !important
}

.mb-8 {
    margin-bottom: 32px !important
}

.mb-9 {
    margin-bottom: 36px !important
}

.mb-10 {
    margin-bottom: 40px !important
}

.mb-11 {
    margin-bottom: 44px !important
}

.mb-12 {
    margin-bottom: 48px !important
}

.mb-14 {
    margin-bottom: 56px !important
}

.mb-16 {
    margin-bottom: 64px !important
}

.mb-20 {
    margin-bottom: 80px !important
}

/* margin-left (LTR) — Bootstrap uses ms (start) */
.ms-0 {
    margin-left: 0 !important
}

.ms-1 {
    margin-left: 4px !important
}

.ms-2 {
    margin-left: 8px !important
}

.ms-3 {
    margin-left: 12px !important
}

.ms-4 {
    margin-left: 16px !important
}

.ms-5 {
    margin-left: 20px !important
}

.ms-6 {
    margin-left: 24px !important
}

.ms-7 {
    margin-left: 28px !important
}

.ms-8 {
    margin-left: 32px !important
}

/* margin-right */
.me-0 {
    margin-right: 0 !important
}

.me-1 {
    margin-right: 4px !important
}

.me-2 {
    margin-right: 8px !important
}

.me-3 {
    margin-right: 12px !important
}

.me-4 {
    margin-right: 16px !important
}

.me-5 {
    margin-right: 20px !important
}

.me-6 {
    margin-right: 24px !important
}

/* margin-x / margin-y */
.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.mx-1 {
    margin-left: 4px !important;
    margin-right: 4px !important
}

.mx-2 {
    margin-left: 8px !important;
    margin-right: 8px !important
}

.mx-3 {
    margin-left: 12px !important;
    margin-right: 12px !important
}

.mx-4 {
    margin-left: 16px !important;
    margin-right: 16px !important
}

.mx-5 {
    margin-left: 20px !important;
    margin-right: 20px !important
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my-1 {
    margin-top: 4px !important;
    margin-bottom: 4px !important
}

.my-2 {
    margin-top: 8px !important;
    margin-bottom: 8px !important
}

.my-3 {
    margin-top: 12px !important;
    margin-bottom: 12px !important
}

.my-4 {
    margin-top: 16px !important;
    margin-bottom: 16px !important
}

.my-5 {
    margin-top: 20px !important;
    margin-bottom: 20px !important
}

.my-6 {
    margin-top: 24px !important;
    margin-bottom: 24px !important
}

.my-8 {
    margin-top: 32px !important;
    margin-bottom: 32px !important
}

.my-10 {
    margin-top: 40px !important;
    margin-bottom: 40px !important
}

.my-12 {
    margin-top: 48px !important;
    margin-bottom: 48px !important
}

/* padding all */
.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: 4px !important
}

.p-2 {
    padding: 8px !important
}

.p-3 {
    padding: 12px !important
}

.p-4 {
    padding: 16px !important
}

.p-5 {
    padding: 20px !important
}

.p-6 {
    padding: 24px !important
}

.p-7 {
    padding: 28px !important
}

.p-8 {
    padding: 32px !important
}

.p-9 {
    padding: 36px !important
}

.p-10 {
    padding: 40px !important
}

.p-12 {
    padding: 48px !important
}

/* padding-top */
.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: 4px !important
}

.pt-2 {
    padding-top: 8px !important
}

.pt-3 {
    padding-top: 12px !important
}

.pt-4 {
    padding-top: 16px !important
}

.pt-5 {
    padding-top: 20px !important
}

.pt-6 {
    padding-top: 24px !important
}

.pt-7 {
    padding-top: 28px !important
}

.pt-8 {
    padding-top: 32px !important
}

.pt-10 {
    padding-top: 40px !important
}

.pt-12 {
    padding-top: 48px !important
}

.pt-14 {
    padding-top: 56px !important
}

.pt-16 {
    padding-top: 64px !important
}

.pt-20 {
    padding-top: 80px !important
}

.pt-24 {
    padding-top: 96px !important
}

.pt-28 {
    padding-top: 112px !important
}

/* padding-bottom */
.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: 4px !important
}

.pb-2 {
    padding-bottom: 8px !important
}

.pb-3 {
    padding-bottom: 12px !important
}

.pb-4 {
    padding-bottom: 16px !important
}

.pb-5 {
    padding-bottom: 20px !important
}

.pb-6 {
    padding-bottom: 24px !important
}

.pb-7 {
    padding-bottom: 28px !important
}

.pb-8 {
    padding-bottom: 32px !important
}

.pb-10 {
    padding-bottom: 40px !important
}

.pb-12 {
    padding-bottom: 48px !important
}

.pb-14 {
    padding-bottom: 56px !important
}

.pb-16 {
    padding-bottom: 64px !important
}

.pb-20 {
    padding-bottom: 80px !important
}

.pb-24 {
    padding-bottom: 96px !important
}

.pb-28 {
    padding-bottom: 112px !important
}

/* padding-left (ps) / padding-right (pe) */
.ps-0 {
    padding-left: 0 !important
}

.ps-1 {
    padding-left: 4px !important
}

.ps-2 {
    padding-left: 8px !important
}

.ps-3 {
    padding-left: 12px !important
}

.ps-4 {
    padding-left: 16px !important
}

.ps-5 {
    padding-left: 20px !important
}

.ps-6 {
    padding-left: 24px !important
}

.ps-7 {
    padding-left: 28px !important
}

.ps-8 {
    padding-left: 32px !important
}

.pe-0 {
    padding-right: 0 !important
}

.pe-1 {
    padding-right: 4px !important
}

.pe-2 {
    padding-right: 8px !important
}

.pe-3 {
    padding-right: 12px !important
}

.pe-4 {
    padding-right: 16px !important
}

.pe-5 {
    padding-right: 20px !important
}

.pe-6 {
    padding-right: 24px !important
}

.pe-7 {
    padding-right: 28px !important
}

.pe-8 {
    padding-right: 32px !important
}

/* padding-x / padding-y */
.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.px-1 {
    padding-left: 4px !important;
    padding-right: 4px !important
}

.px-2 {
    padding-left: 8px !important;
    padding-right: 8px !important
}

.px-3 {
    padding-left: 12px !important;
    padding-right: 12px !important
}

.px-4 {
    padding-left: 16px !important;
    padding-right: 16px !important
}

.px-5 {
    padding-left: 20px !important;
    padding-right: 20px !important
}

.px-6 {
    padding-left: 24px !important;
    padding-right: 24px !important
}

.px-8 {
    padding-left: 32px !important;
    padding-right: 32px !important
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.py-1 {
    padding-top: 4px !important;
    padding-bottom: 4px !important
}

.py-2 {
    padding-top: 8px !important;
    padding-bottom: 8px !important
}

.py-3 {
    padding-top: 12px !important;
    padding-bottom: 12px !important
}

.py-4 {
    padding-top: 16px !important;
    padding-bottom: 16px !important
}

.py-5 {
    padding-top: 20px !important;
    padding-bottom: 20px !important
}

.py-6 {
    padding-top: 24px !important;
    padding-bottom: 24px !important
}

.py-8 {
    padding-top: 32px !important;
    padding-bottom: 32px !important
}

.py-10 {
    padding-top: 40px !important;
    padding-bottom: 40px !important
}

.py-14 {
    padding-top: 56px !important;
    padding-bottom: 56px !important
}

.py-20 {
    padding-top: 80px !important;
    padding-bottom: 80px !important
}

.py-28 {
    padding-top: 112px !important;
    padding-bottom: 112px !important
}

/* gap (flex/grid) */
.gap-0 {
    gap: 0 !important
}

.gap-1 {
    gap: 4px !important
}

.gap-2 {
    gap: 8px !important
}

.gap-2-5 {
    gap: 10px !important
}

.gap-3 {
    gap: 12px !important
}

.gap-4 {
    gap: 16px !important
}

.gap-5 {
    gap: 20px !important
}

.gap-6 {
    gap: 24px !important
}

.gap-7 {
    gap: 28px !important
}

.gap-8 {
    gap: 32px !important
}

.gap-10 {
    gap: 40px !important
}

.gap-12 {
    gap: 48px !important
}

/* Responsive md: variants (768px === Tailwind md === Bootstrap md, no breakpoint conflict) */
@media (min-width: 768px) {
    .mt-md-0 {
        margin-top: 0 !important
    }

    .mt-md-1 {
        margin-top: 4px !important
    }

    .mt-md-2 {
        margin-top: 8px !important
    }

    .mt-md-3 {
        margin-top: 12px !important
    }

    .mt-md-4 {
        margin-top: 16px !important
    }

    .mt-md-5 {
        margin-top: 20px !important
    }

    .mt-md-6 {
        margin-top: 24px !important
    }

    .mt-md-7 {
        margin-top: 28px !important
    }

    .mt-md-8 {
        margin-top: 32px !important
    }

    .mt-md-10 {
        margin-top: 40px !important
    }

    .mt-md-12 {
        margin-top: 48px !important
    }

    .mt-md-14 {
        margin-top: 56px !important
    }

    .mb-md-0 {
        margin-bottom: 0 !important
    }

    .mb-md-3 {
        margin-bottom: 12px !important
    }

    .mb-md-4 {
        margin-bottom: 16px !important
    }

    .mb-md-7 {
        margin-bottom: 28px !important
    }

    .mb-md-10 {
        margin-bottom: 40px !important
    }

    .p-md-0 {
        padding: 0 !important
    }

    .p-md-3 {
        padding: 12px !important
    }

    .p-md-4 {
        padding: 16px !important
    }

    .p-md-5 {
        padding: 20px !important
    }

    .p-md-6 {
        padding: 24px !important
    }

    .p-md-7 {
        padding: 28px !important
    }

    .p-md-8 {
        padding: 32px !important
    }

    .p-md-10 {
        padding: 40px !important
    }

    .pt-md-14 {
        padding-top: 56px !important
    }

    .pt-md-24 {
        padding-top: 96px !important
    }

    .pt-md-28 {
        padding-top: 112px !important
    }

    .pb-md-24 {
        padding-bottom: 96px !important
    }

    .pb-md-28 {
        padding-bottom: 112px !important
    }

    .py-md-20 {
        padding-top: 80px !important;
        padding-bottom: 80px !important
    }

    .py-md-28 {
        padding-top: 112px !important;
        padding-bottom: 112px !important
    }

    .gap-md-3 {
        gap: 12px !important
    }

    .gap-md-4 {
        gap: 16px !important
    }

    .gap-md-6 {
        gap: 24px !important
    }

    .gap-md-8 {
        gap: 32px !important
    }

    .gap-md-10 {
        gap: 40px !important
    }

    .gap-md-12 {
        gap: 48px !important
    }
}

/* ============================================================
   sm breakpoint realigned to Tailwind 640px (BS native is 576px).
   Use these custom utilities instead of Bootstrap's d-sm-*.
   ============================================================ */
@media (min-width: 640px) {
    .d-sm640-none {
        display: none !important
    }

    .d-sm640-inline {
        display: inline !important
    }

    .d-sm640-block {
        display: block !important
    }

    .d-sm640-flex {
        display: flex !important
    }

    .d-sm640-inline-flex {
        display: inline-flex !important
    }

    .d-sm640-grid {
        display: grid !important
    }

    .p-sm640-6 {
        padding: 24px !important
    }

    .grid-cols-sm640-3 {
        grid-template-columns: repeat(3, 1fr) !important
    }
}

/* ============================================================
   SHARED SUB-PAGE COMPONENTS
   (used across About-Us, Announcements, Success-Students, etc.)
   ============================================================ */

/* Title curve underline */
.title-curve {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

    .title-curve::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 12px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'><path d='M6 8 Q 36 0 60 6 T 114 4' fill='none' stroke='%230B5DAA' stroke-width='2' stroke-linecap='round' opacity='0.85'/><path d='M6 16 Q 36 8 60 14 T 114 12' fill='none' stroke='%230B5DAA' stroke-width='2' stroke-linecap='round' opacity='0.45'/></svg>");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

/* Sub-page hero */
.success-hero {
    position: relative;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    background: radial-gradient(600px 240px at 15% 10%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in oklab, var(--brand) 8%, var(--paper)) 0%, var(--bg) 80%);
}

    .success-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .08;
        pointer-events: none;
        background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 10px);
    }

/* Hero card panel body */
.success-panel-body {
    position: relative;
    padding: 28px;
    z-index: 2;
}

@media (max-width:640px) {
    .success-panel-body {
        padding: 22px;
    }
}

/* Chip badges (Announcements / Success) */
.success-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

    .success-chip.brand {
        background: color-mix(in oklab, var(--brand) 18%, transparent);
        color: var(--brand);
        border-color: color-mix(in oklab, var(--brand) 28%, transparent);
    }

/* Stat card anatomy */
.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--brand) 14%, transparent);
    color: var(--brand);
    border: 1px solid color-mix(in oklab, var(--brand) 24%, transparent);
    box-shadow: 0 8px 18px color-mix(in oklab, var(--brand) 14%, transparent);
}

.stat-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--muted);
}

/* Empty state (search/filter no results) */
.empty-state {
    display: flex;
    justify-content: center;
    padding: 56px 0 16px;
}

.empty-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--paper);
    padding: 32px;
    text-align: center;
    max-width: 420px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--brandSoft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.empty-state-text {
    color: var(--muted);
    font-size: 14px;
}