/*!
 * Vet Setu Design System — app.css
 * Hand-written, no build step. Warm cream "modern pet-care" aesthetic.
 * Sections:
 *   1. Tokens          2. Reset & base        3. Typography
 *   4. Layout helpers  5. Buttons             6. Cards & icon badges
 *   7. Badges & chips  8. Forms               9. Alerts & toasts
 *  10. Tables         11. Tabs, dropdowns, modals
 *  12. Data display (stat cards, progress, avatars, steps, accordion, empty states, skeletons, tooltip, pagination, breadcrumbs)
 *  13. Package card & price       14. Decorative helpers
 *  15. Shells: public site, auth, student portal, exam
 *  16. Anti-piracy (protected pages, watermark, print)
 *  17. Utilities (+ responsive sm/md/lg)   18. Motion preferences
 * Docs: scratchpad/ui-kit.md
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
    /* Brand */
    --vs-cream: #F7F4EE;
    --vs-cream-2: #F2EDE4;
    --vs-cream-3: #E9E2D5;
    --vs-white: #FFFFFF;
    --vs-navy: #2D2B55;
    --vs-navy-2: #4A4877;
    --vs-navy-900: #1F1D40;
    --vs-muted: #66648A;
    --vs-subtle: #9896B0;
    --vs-line: #E8E2D7;
    --vs-line-soft: #F0EBE2;

    --vs-primary: #6C72F2;
    --vs-primary-hover: #585EE0;
    --vs-primary-50: #F1F2FE;
    --vs-primary-100: #E3E5FD;
    --vs-primary-200: #C9CCFB;
    --vs-primary-300: #A6AAF8;
    --vs-primary-700: #4248C4;

    --vs-sage: #B2E281;
    --vs-sage-50: #F4FAEC;
    --vs-sage-100: #E7F5D5;
    --vs-sage-200: #D2EDB0;
    --vs-sage-700: #3D6A1C;

    --vs-yellow: #FFD875;
    --vs-yellow-50: #FFF9E8;
    --vs-yellow-100: #FFF0C7;
    --vs-yellow-200: #FFE6A3;
    --vs-yellow-700: #855A00;

    --vs-blush: #FAD9D3;

    /* Semantic */
    --vs-success: #10B981;
    --vs-success-50: #E8F8F1;
    --vs-success-100: #CDF1E2;
    --vs-success-700: #047857;
    --vs-danger: #EF4444;
    --vs-danger-50: #FDEDED;
    --vs-danger-100: #FBD5D5;
    --vs-danger-700: #B42318;
    --vs-warning: #F59E0B;
    --vs-warning-50: #FEF6E4;
    --vs-warning-100: #FDE9BF;
    --vs-warning-700: #A15C07;
    --vs-info: #3E8EF7;
    --vs-info-50: #EBF3FE;
    --vs-info-100: #D3E5FD;
    --vs-info-700: #1C5FC2;

    /* Type */
    --vs-font-head: 'Fredoka', 'Baloo 2', ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, sans-serif;
    --vs-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --vs-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* Radii */
    --vs-radius-xs: 8px;
    --vs-radius-sm: 12px;
    --vs-radius-md: 16px;
    --vs-radius-lg: 24px;
    --vs-radius-xl: 32px;
    --vs-radius-2xl: 40px;
    --vs-radius-pill: 9999px;
    --vs-radius-input: 14px;

    /* Shadows (warm, layered) */
    --vs-shadow-xs: 0 1px 2px rgba(45, 43, 85, .06);
    --vs-shadow-sm: 0 1px 2px rgba(45, 43, 85, .04), 0 4px 14px -6px rgba(45, 43, 85, .10);
    --vs-shadow-md: 0 2px 4px rgba(45, 43, 85, .04), 0 14px 34px -14px rgba(45, 43, 85, .20);
    --vs-shadow-lg: 0 4px 10px rgba(45, 43, 85, .05), 0 28px 60px -22px rgba(45, 43, 85, .28);
    --vs-shadow-primary: 0 10px 22px -10px rgba(108, 114, 242, .65);
    --vs-ring: 0 0 0 4px rgba(108, 114, 242, .22);
    --vs-ring-danger: 0 0 0 4px rgba(239, 68, 68, .16);

    /* Spacing scale */
    --vs-space-1: .25rem;
    --vs-space-2: .5rem;
    --vs-space-3: .75rem;
    --vs-space-4: 1rem;
    --vs-space-5: 1.25rem;
    --vs-space-6: 1.5rem;
    --vs-space-8: 2rem;
    --vs-space-10: 2.5rem;
    --vs-space-12: 3rem;
    --vs-space-16: 4rem;
    --vs-space-20: 5rem;
    --vs-space-24: 6rem;

    /* Layout */
    --vs-container: 1200px;
    --vs-gutter: clamp(16px, 4vw, 28px);
    --vs-header-h: 76px;

    /* Z-index */
    --vs-z-base: 1;
    --vs-z-dropdown: 40;
    --vs-z-sticky: 50;
    --vs-z-drawer: 70;
    --vs-z-overlay: 80;
    --vs-z-modal: 90;
    --vs-z-toast: 100;
    --vs-z-watermark: 9000;
    --vs-z-shield: 9500;

    /* Motion */
    --vs-ease: cubic-bezier(.2, .8, .2, 1);
    --vs-ease-out: cubic-bezier(.16, 1, .3, 1);
    --vs-dur-fast: .15s;
    --vs-dur: .22s;
    --vs-dur-slow: .4s;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--vs-header-h) + 16px);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--vs-cream);
    color: var(--vs-navy);
    font-family: var(--vs-font-body);
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
svg { flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: var(--vs-primary); text-decoration: none; transition: color var(--vs-dur-fast) var(--vs-ease); }
a:hover { color: var(--vs-primary-hover); }
p a:not([class]), .prose a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--vs-line); margin: var(--vs-space-6) 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }
::selection { background: var(--vs-primary-200); color: var(--vs-navy); }

:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--vs-primary-300);
    outline-offset: 2px;
    border-radius: 6px;
}
.btn:focus-visible, .tab:focus-visible, .nav-link:focus-visible, .page-link:focus-visible {
    outline: 3px solid var(--vs-primary-300);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: calc(var(--vs-z-toast) + 1);
    background: var(--vs-navy);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--vs-radius-pill);
    font-weight: 600;
    transition: top var(--vs-dur) var(--vs-ease);
}
.skip-link:focus { top: 12px; color: #fff; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, .display, .font-head {
    font-family: var(--vs-font-head);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.005em;
    color: var(--vs-navy);
}
h1, .h1 { font-size: clamp(2.1rem, 1.55rem + 2.2vw, 3.25rem); }
h2, .h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem); }
h3, .h3 { font-size: clamp(1.3rem, 1.18rem + .5vw, 1.6rem); line-height: 1.25; }
h4, .h4 { font-size: 1.25rem; line-height: 1.3; }
h5, .h5 { font-size: 1.0625rem; line-height: 1.35; }
h6, .h6 { font-size: .9375rem; line-height: 1.4; }
.display {
    font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.015em;
}
.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.65; color: var(--vs-navy-2); }
.prose { color: var(--vs-navy-2); line-height: 1.75; }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3, .prose h4 { color: var(--vs-navy); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose strong { color: var(--vs-navy); }
small, .small { font-size: .875em; }
strong, b { font-weight: 700; }
code, kbd { font-family: var(--vs-font-mono); font-size: .875em; background: var(--vs-cream-2); padding: .12em .4em; border-radius: 6px; }
kbd { border: 1px solid var(--vs-line); border-bottom-width: 2px; }

/* ==========================================================================
   4. Layout helpers (container, section, stack, grid)
   ========================================================================== */
.container {
    width: 100%;
    max-width: calc(var(--vs-container) + var(--vs-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--vs-gutter);
}
.container-sm { max-width: calc(720px + var(--vs-gutter) * 2); }
.container-md { max-width: calc(960px + var(--vs-gutter) * 2); }
.container-lg { max-width: calc(1200px + var(--vs-gutter) * 2); }
.container-xl { max-width: calc(1360px + var(--vs-gutter) * 2); }
.container-fluid { max-width: none; }

.section { padding-block: clamp(56px, 7vw, 104px); position: relative; }
.section-sm { padding-block: clamp(36px, 4.5vw, 64px); }
.section-lg { padding-block: clamp(72px, 9vw, 136px); }
.section-head {
    max-width: 720px;
    margin: 0 auto clamp(32px, 4vw, 56px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.section-head-left { margin-inline: 0; text-align: left; align-items: flex-start; }
.section-title { font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.75rem); }
.section-lead { font-size: clamp(1rem, .96rem + .25vw, 1.125rem); color: var(--vs-muted); max-width: 620px; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-white);
    color: var(--vs-primary-700);
    font-family: var(--vs-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    box-shadow: var(--vs-shadow-xs);
    line-height: 1.4;
    width: fit-content;
}
.eyebrow .icon, .eyebrow svg { width: 16px; height: 16px; color: #F2B533; }
.eyebrow-primary { background: var(--vs-primary-100); color: var(--vs-primary-700); }
.eyebrow-sage { background: var(--vs-sage-100); color: var(--vs-sage-700); }
.eyebrow-yellow { background: var(--vs-yellow-100); color: var(--vs-yellow-700); }
.eyebrow-dark { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }

.stack { display: flex; flex-direction: column; gap: var(--vs-space-4); }
.stack-xs { display: flex; flex-direction: column; gap: var(--vs-space-1); }
.stack-sm { display: flex; flex-direction: column; gap: var(--vs-space-2); }
.stack-md { display: flex; flex-direction: column; gap: var(--vs-space-6); }
.stack-lg { display: flex; flex-direction: column; gap: var(--vs-space-8); }
.stack-xl { display: flex; flex-direction: column; gap: var(--vs-space-12); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vs-space-3); }
.split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vs-space-4); }
.center { display: grid; place-items: center; }

.grid { display: grid; gap: var(--vs-space-6); }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-full { grid-column: 1 / -1; }

/* Two-column page layouts */
.layout-sidebar { display: grid; gap: var(--vs-space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.layout-aside { display: grid; gap: var(--vs-space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
    .layout-sidebar { grid-template-columns: 280px minmax(0, 1fr); gap: var(--vs-space-8); }
    .layout-aside { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--vs-space-8); }
    .sticky-aside { position: sticky; top: calc(var(--vs-header-h) + 20px); }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
    --btn-h: 48px;
    --btn-px: 1.5rem;
    --btn-fs: .9375rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--btn-h);
    padding: .5rem var(--btn-px);
    border: 1.5px solid transparent;
    border-radius: var(--vs-radius-pill);
    font-family: var(--vs-font-body);
    font-size: var(--btn-fs);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .005em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--vs-dur) var(--vs-ease), color var(--vs-dur) var(--vs-ease),
        border-color var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease),
        transform var(--vs-dur-fast) var(--vs-ease);
}
.btn .icon, .btn > svg { width: 1.15em; height: 1.15em; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.btn-sm { --btn-h: 38px; --btn-px: 1rem; --btn-fs: .8125rem; gap: .375rem; }
.btn-lg { --btn-h: 56px; --btn-px: 2rem; --btn-fs: 1rem; }
.btn-xl { --btn-h: 62px; --btn-px: 2.25rem; --btn-fs: 1.0625rem; }
.btn-block { display: flex; width: 100%; }
.btn-icon { --btn-px: 0; width: var(--btn-h); padding: 0; flex-shrink: 0; }
.btn-icon .icon, .btn-icon > svg { width: 20px; height: 20px; }
.btn-sm.btn-icon .icon, .btn-sm.btn-icon > svg { width: 17px; height: 17px; }

.btn-primary { background: var(--vs-primary); color: #fff; box-shadow: var(--vs-shadow-primary); }
.btn-primary:hover { background: var(--vs-primary-hover); color: #fff; }
.btn-outline { background: transparent; color: var(--vs-navy); border-color: rgba(45, 43, 85, .85); }
.btn-outline:hover { background: var(--vs-navy); color: #fff; border-color: var(--vs-navy); }
.btn-outline-primary { background: transparent; color: var(--vs-primary-700); border-color: var(--vs-primary); }
.btn-outline-primary:hover { background: var(--vs-primary-50); color: var(--vs-primary-700); }
.btn-ghost { background: transparent; color: var(--vs-navy-2); }
.btn-ghost:hover { background: rgba(45, 43, 85, .06); color: var(--vs-navy); }
.btn-soft { background: var(--vs-primary-100); color: var(--vs-primary-700); }
.btn-soft:hover { background: var(--vs-primary-200); color: var(--vs-primary-700); }
.btn-sage { background: var(--vs-sage); color: #24420C; }
.btn-sage:hover { background: #A2D96C; color: #1C350A; }
.btn-yellow { background: var(--vs-yellow); color: #4A3200; }
.btn-yellow:hover { background: #FFCD52; color: #3B2800; }
.btn-danger { background: var(--vs-danger); color: #fff; box-shadow: 0 10px 22px -12px rgba(239, 68, 68, .7); }
.btn-danger:hover { background: #DC2626; color: #fff; }
.btn-danger-soft { background: var(--vs-danger-50); color: var(--vs-danger-700); }
.btn-danger-soft:hover { background: var(--vs-danger-100); color: var(--vs-danger-700); }
.btn-success { background: var(--vs-success); color: #fff; }
.btn-success:hover { background: #0EA371; color: #fff; }
.btn-white { background: #fff; color: var(--vs-navy); box-shadow: var(--vs-shadow-sm); border-color: var(--vs-line); }
.btn-white:hover { background: #fff; color: var(--vs-primary-700); border-color: var(--vs-primary-200); box-shadow: var(--vs-shadow-md); }
.btn-navy { background: var(--vs-navy); color: #fff; }
.btn-navy:hover { background: var(--vs-navy-900); color: #fff; }
.btn-link { --btn-px: 0; min-height: auto; padding: 0; background: none; color: var(--vs-primary-700); border: 0; border-radius: 4px; }
.btn-link:hover { color: var(--vs-primary-hover); transform: none; text-decoration: underline; text-underline-offset: 3px; }

/* Loading state: add .is-loading (app.js does it automatically for data-once forms) */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    border: 2.5px solid currentColor;
    border-color: rgba(255, 255, 255, .95) rgba(255, 255, 255, .95) rgba(255, 255, 255, .3) rgba(255, 255, 255, .3);
    animation: vs-spin .7s linear infinite;
}
.btn-outline.is-loading::after, .btn-ghost.is-loading::after, .btn-white.is-loading::after,
.btn-soft.is-loading::after, .btn-sage.is-loading::after, .btn-yellow.is-loading::after, .btn-outline-primary.is-loading::after, .btn-danger-soft.is-loading::after {
    border-color: var(--vs-primary) var(--vs-primary) var(--vs-primary-200) var(--vs-primary-200);
}
.btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--vs-space-3); align-items: center; }

.spinner {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    border: 2.5px solid var(--vs-primary-200);
    border-top-color: var(--vs-primary);
    animation: vs-spin .7s linear infinite;
    vertical-align: -.2em;
}
@keyframes vs-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   6. Cards & icon badges
   ========================================================================== */
.card {
    position: relative;
    background: var(--vs-white);
    border-radius: var(--vs-radius-xl);
    padding: clamp(20px, 2.4vw, 28px);
    box-shadow: var(--vs-shadow-sm);
    border: 1px solid rgba(232, 226, 215, .7);
    min-width: 0;
}
.card-cream { background: var(--vs-cream-2); box-shadow: none; border-color: transparent; }
.card-soft { background: #FBF9F5; box-shadow: none; border-color: var(--vs-line-soft); }
.card-bordered { box-shadow: none; border: 1.5px solid var(--vs-line); }
.card-flat { box-shadow: none; }
.card-primary { background: var(--vs-primary); color: #fff; border-color: transparent; box-shadow: var(--vs-shadow-primary); }
.card-primary h1, .card-primary h2, .card-primary h3, .card-primary h4 { color: #fff; }
.card-navy { background: var(--vs-navy); color: #E7E6F7; border-color: transparent; }
.card-navy h1, .card-navy h2, .card-navy h3, .card-navy h4 { color: #fff; }
.card-sage { background: var(--vs-sage-100); border-color: transparent; box-shadow: none; }
.card-yellow { background: var(--vs-yellow-50); border-color: var(--vs-yellow-100); box-shadow: none; }
.card-sm { padding: 18px; border-radius: var(--vs-radius-lg); }
.card-lg { padding: clamp(24px, 3.2vw, 40px); }
.card-flush { padding: 0; overflow: hidden; }
.card-hover { transition: transform var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease), border-color var(--vs-dur) var(--vs-ease); }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--vs-shadow-lg); border-color: var(--vs-primary-100); }
a.card { color: inherit; display: block; }

.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vs-space-3);
    margin-bottom: var(--vs-space-5);
}
.card-flush > .card-header, .card-flush > .card-toolbar { padding: 20px 24px; margin: 0; border-bottom: 1px solid var(--vs-line-soft); }
.card-flush > .card-body { padding: 24px; }
.card-flush > .card-footer { padding: 16px 24px; margin: 0; border-top: 1px solid var(--vs-line-soft); }
.card-title { font-family: var(--vs-font-head); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--vs-navy); }
.card-subtitle { font-size: .875rem; color: var(--vs-muted); margin-top: 2px; }
.card-text { color: var(--vs-navy-2); }
.card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vs-space-3);
    margin-top: var(--vs-space-6);
}
.card-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vs-space-3); }
.card-image {
    position: relative;
    margin: calc(clamp(20px, 2.4vw, 28px) * -1) calc(clamp(20px, 2.4vw, 28px) * -1) var(--vs-space-5);
    border-radius: var(--vs-radius-xl) var(--vs-radius-xl) 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--vs-cream-2);
}
.card-image img { width: 100%; height: 100%; object-fit: cover; }
.card-image-inset { margin: 0 0 var(--vs-space-5); border-radius: var(--vs-radius-lg); }

/* Feature / service card (e.g. "Why Vet Setu") */
.feature-card { display: flex; flex-direction: column; gap: var(--vs-space-3); }
.feature-card .icon-badge { margin-bottom: var(--vs-space-2); }
.feature-card h3, .feature-card .feature-title { font-size: 1.2rem; }
.feature-card p { color: var(--vs-muted); font-size: .9375rem; }

/* Circular icon badges */
.icon-badge {
    --ib-size: 52px;
    display: inline-grid;
    place-items: center;
    width: var(--ib-size);
    height: var(--ib-size);
    border-radius: 50%;
    background: var(--vs-primary);
    color: #fff;
    flex-shrink: 0;
    position: relative;
}
.icon-badge .icon, .icon-badge > svg { width: calc(var(--ib-size) * .46); height: calc(var(--ib-size) * .46); }
.icon-badge-xs { --ib-size: 28px; }
.icon-badge-sm { --ib-size: 38px; }
.icon-badge-lg { --ib-size: 64px; }
.icon-badge-xl { --ib-size: 84px; }
.icon-badge-primary { background: var(--vs-primary); color: #fff; }
.icon-badge-primary-soft { background: var(--vs-primary-100); color: var(--vs-primary-700); }
.icon-badge-sage { background: var(--vs-sage); color: #24420C; }
.icon-badge-sage-soft { background: var(--vs-sage-100); color: var(--vs-sage-700); }
.icon-badge-yellow { background: var(--vs-yellow); color: #5A3D00; }
.icon-badge-yellow-soft { background: var(--vs-yellow-100); color: var(--vs-yellow-700); }
.icon-badge-cream { background: var(--vs-cream-2); color: var(--vs-navy); }
.icon-badge-white { background: #fff; color: var(--vs-primary); box-shadow: var(--vs-shadow-sm); }
.icon-badge-navy { background: var(--vs-navy); color: #fff; }
.icon-badge-success { background: var(--vs-success-50); color: var(--vs-success-700); }
.icon-badge-danger { background: var(--vs-danger-50); color: var(--vs-danger-700); }
.icon-badge-warning { background: var(--vs-warning-50); color: var(--vs-warning-700); }
.icon-badge-info { background: var(--vs-info-50); color: var(--vs-info-700); }
.icon-badge-ring { box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), var(--vs-shadow-sm); }

/* ==========================================================================
   7. Badges, chips & status pills
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--vs-radius-pill);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .01em;
    white-space: nowrap;
    background: var(--vs-cream-2);
    color: var(--vs-navy-2);
    vertical-align: middle;
    width: fit-content;
}
.badge .icon, .badge > svg { width: 13px; height: 13px; }
.badge-lg { padding: 6px 14px; font-size: .8125rem; }
.badge-dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.badge-primary { background: var(--vs-primary-100); color: var(--vs-primary-700); }
.badge-primary-solid { background: var(--vs-primary); color: #fff; }
.badge-sage { background: var(--vs-sage); color: #24420C; }
.badge-sage-soft { background: var(--vs-sage-100); color: var(--vs-sage-700); }
.badge-yellow { background: var(--vs-yellow); color: #4A3200; }
.badge-yellow-soft { background: var(--vs-yellow-100); color: var(--vs-yellow-700); }
.badge-success { background: var(--vs-success-50); color: var(--vs-success-700); }
.badge-danger { background: var(--vs-danger-50); color: var(--vs-danger-700); }
.badge-warning { background: var(--vs-warning-50); color: var(--vs-warning-700); }
.badge-info { background: var(--vs-info-50); color: var(--vs-info-700); }
.badge-neutral { background: #EEEAF0; color: #5B5975; }
.badge-navy { background: var(--vs-navy); color: #fff; }
.badge-white { background: #fff; color: var(--vs-navy); box-shadow: var(--vs-shadow-xs); }
.badge-outline { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 16px;
    border-radius: var(--vs-radius-pill);
    background: #fff;
    border: 1.5px solid var(--vs-line);
    color: var(--vs-navy-2);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--vs-dur) var(--vs-ease);
}
.chip .icon, .chip > svg { width: 16px; height: 16px; }
.chip:hover { border-color: var(--vs-primary-200); color: var(--vs-navy); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--vs-navy); border-color: var(--vs-navy); color: #fff; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

.ai-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--vs-radius-pill);
    background: linear-gradient(135deg, var(--vs-primary), #9B7BF7);
    color: #fff;
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.6;
}

/* ==========================================================================
   8. Forms
   ========================================================================== */
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--vs-space-5); min-width: 0; }
.form-group:last-child { margin-bottom: 0; }
.form-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--vs-navy);
    line-height: 1.35;
}
.form-label .req, .req { color: var(--vs-danger); font-weight: 700; }
.form-label-optional { font-weight: 500; color: var(--vs-subtle); font-size: .8125rem; }
.form-hint { font-size: .8125rem; color: var(--vs-muted); line-height: 1.45; }
.form-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vs-danger-700);
    line-height: 1.4;
}
.form-error .icon { width: 15px; height: 15px; margin-top: 1px; }

.form-control, .form-select, .form-textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 11px 16px;
    background: #fff;
    color: var(--vs-navy);
    border: 1.5px solid #E2DBCE;
    border-radius: var(--vs-radius-input);
    font-size: .9375rem;
    line-height: 1.45;
    transition: border-color var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease), background-color var(--vs-dur) var(--vs-ease);
    -webkit-appearance: none;
    appearance: none;
}
.form-control::placeholder, .form-textarea::placeholder { color: #A9A7BE; opacity: 1; }
.form-control:hover, .form-select:hover, .form-textarea:hover { border-color: #D2CABA; }
.form-control:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--vs-primary);
    box-shadow: var(--vs-ring);
    outline: none;
}
.form-control:disabled, .form-select:disabled, .form-textarea:disabled, .form-control[readonly] {
    background: #F7F5F0;
    color: var(--vs-muted);
    cursor: not-allowed;
}
.form-control.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid, .input-group.is-invalid {
    border-color: var(--vs-danger);
    background-color: #FFFBFB;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus, .form-textarea.is-invalid:focus, .input-group.is-invalid:focus-within { box-shadow: var(--vs-ring-danger); }
textarea.form-control, .form-textarea { min-height: 120px; resize: vertical; padding-top: 12px; }
.form-control-sm, .form-select.form-control-sm { min-height: 40px; padding: 8px 12px; font-size: .875rem; border-radius: 12px; }
.form-control-lg { min-height: 56px; font-size: 1.0625rem; padding: 14px 18px; }
.form-select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4877' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    cursor: pointer;
}
.form-select[multiple] { background-image: none; padding-right: 16px; min-height: 120px; }
input[type="date"].form-control, input[type="datetime-local"].form-control, input[type="time"].form-control { min-height: 48px; }
input[type="number"].form-control { font-variant-numeric: tabular-nums; }
input[type="color"].form-control { padding: 6px; height: 48px; }

/* Input group: prefix/suffix text (+91), icons, buttons */
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border: 1.5px solid #E2DBCE;
    border-radius: var(--vs-radius-input);
    transition: border-color var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease);
    overflow: hidden;
}
.input-group:hover { border-color: #D2CABA; }
.input-group:focus-within { border-color: var(--vs-primary); box-shadow: var(--vs-ring); }
.input-group > .form-control, .input-group > .form-select {
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    background-color: transparent;
    flex: 1 1 auto;
    min-width: 0;
}
.input-group-text {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    background: var(--vs-cream-2);
    color: var(--vs-navy-2);
    font-weight: 700;
    font-size: .9375rem;
    white-space: nowrap;
    border-right: 1.5px solid #E2DBCE;
}
.input-group-text:last-child { border-right: 0; border-left: 1.5px solid #E2DBCE; }
.input-group-text .icon { width: 18px; height: 18px; }
.input-group > .btn { border-radius: 0; min-height: auto; box-shadow: none; transform: none; }
.input-group-lg > .form-control { min-height: 56px; font-size: 1.0625rem; }

.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--vs-subtle); pointer-events: none; }
.input-icon > .form-control { padding-left: 44px; }
.input-icon-end > .icon { left: auto; right: 15px; }
.input-icon-end > .form-control { padding-left: 16px; padding-right: 44px; }

/* Checkbox & radio */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--vs-navy);
}
.form-check + .form-check { margin-top: 10px; }
.form-check-inline { display: inline-flex; margin-right: 18px; }
.form-check-inline + .form-check-inline { margin-top: 0; }
.form-check-input {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    border: 1.5px solid #CBC3B3;
    border-radius: 6px;
    background: #fff center / 14px no-repeat;
    cursor: pointer;
    transition: all var(--vs-dur-fast) var(--vs-ease);
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:hover { border-color: var(--vs-primary); }
.form-check-input:focus-visible { box-shadow: var(--vs-ring); outline: none; border-color: var(--vs-primary); }
.form-check-input:checked {
    background-color: var(--vs-primary);
    border-color: var(--vs-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.form-check-input[type="radio"]:checked {
    background-image: radial-gradient(circle, #fff 0 4px, transparent 4.5px);
    background-size: 100% 100%;
}
.form-check-input:disabled { opacity: .5; cursor: not-allowed; }
.form-check-input.is-invalid { border-color: var(--vs-danger); }
.form-check-label { cursor: pointer; }
.form-check-label small, .form-check .form-hint { display: block; }

/* Option tiles (selectable cards, e.g. pick a package / MCQ options) */
.option-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--vs-radius-md);
    border: 1.5px solid var(--vs-line);
    background: #fff;
    cursor: pointer;
    transition: all var(--vs-dur) var(--vs-ease);
}
.option-tile:hover { border-color: var(--vs-primary-200); }
.option-tile:has(input:checked), .option-tile.is-selected { border-color: var(--vs-primary); background: var(--vs-primary-50); box-shadow: var(--vs-ring); }

/* Switch toggle */
.form-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: .9375rem; font-weight: 500; color: var(--vs-navy); }
.form-switch input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    margin: 0;
    border-radius: var(--vs-radius-pill);
    background: #D9D2C4;
    cursor: pointer;
    transition: background-color var(--vs-dur) var(--vs-ease);
}
.form-switch input::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(45, 43, 85, .25);
    transition: transform var(--vs-dur) var(--vs-ease-out);
}
.form-switch input:checked { background: var(--vs-primary); }
.form-switch input:checked::before { transform: translateX(20px); }
.form-switch input:focus-visible { box-shadow: var(--vs-ring); outline: none; }
.form-switch input:disabled { opacity: .5; cursor: not-allowed; }
.form-switch-success input:checked { background: var(--vs-success); }
.form-switch-text { display: flex; flex-direction: column; line-height: 1.35; }
.form-switch-text small { color: var(--vs-muted); font-size: .8125rem; font-weight: 400; }

/* File input / dropzone */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 20px;
    border: 2px dashed var(--vs-primary-200);
    border-radius: var(--vs-radius-lg);
    background: var(--vs-primary-50);
    text-align: center;
    cursor: pointer;
    transition: all var(--vs-dur) var(--vs-ease);
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--vs-primary); background: var(--vs-primary-100); }
.dropzone.is-invalid { border-color: var(--vs-danger); background: var(--vs-danger-50); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--vs-primary); box-shadow: var(--vs-shadow-sm); }
.dropzone-icon .icon { width: 24px; height: 24px; }
.dropzone-title { font-weight: 700; color: var(--vs-navy); font-size: .9375rem; }
.dropzone-title span { color: var(--vs-primary-700); text-decoration: underline; text-underline-offset: 3px; }
.dropzone-hint { font-size: .8125rem; color: var(--vs-muted); }
.dropzone-file { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 12px; background: #fff; border-radius: var(--vs-radius-pill); font-size: .8125rem; font-weight: 600; color: var(--vs-navy); box-shadow: var(--vs-shadow-xs); max-width: 100%; }
.dropzone-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-preview { max-height: 160px; border-radius: var(--vs-radius-md); box-shadow: var(--vs-shadow-sm); }
.file-native { font-size: .875rem; }
.file-native::file-selector-button {
    margin-right: 12px;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-primary-100);
    color: var(--vs-primary-700);
    font-weight: 700;
    cursor: pointer;
}

/* OTP digit boxes */
.otp-inputs { display: flex; justify-content: center; gap: clamp(6px, 2vw, 12px); }
.otp-box {
    width: min(54px, calc((100vw - 120px) / 6));
    height: 62px;
    padding: 0;
    text-align: center;
    font-family: var(--vs-font-head);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--vs-navy);
    background: #fff;
    border: 1.5px solid #E2DBCE;
    border-radius: var(--vs-radius-md);
    caret-color: var(--vs-primary);
    transition: all var(--vs-dur) var(--vs-ease);
    -moz-appearance: textfield;
}
.otp-box::-webkit-outer-spin-button, .otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp-box:focus { border-color: var(--vs-primary); box-shadow: var(--vs-ring); outline: none; transform: translateY(-1px); }
.otp-box.is-filled { border-color: var(--vs-primary-300); background: var(--vs-primary-50); }
.otp-inputs.is-invalid .otp-box { border-color: var(--vs-danger); background: #FFFBFB; }

/* Form layout helpers */
.form-row { display: grid; gap: 0 var(--vs-space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
    .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.form-section { padding-bottom: var(--vs-space-6); margin-bottom: var(--vs-space-6); border-bottom: 1px solid var(--vs-line-soft); }
.form-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.form-section-title { font-family: var(--vs-font-head); font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; }
.form-section-desc { font-size: .875rem; color: var(--vs-muted); margin-bottom: var(--vs-space-5); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vs-space-3); margin-top: var(--vs-space-6); }
.form-actions-end { justify-content: flex-end; }
.form-actions-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: var(--vs-space-6) calc(clamp(20px, 2.4vw, 28px) * -1) calc(clamp(20px, 2.4vw, 28px) * -1);
    padding: 16px clamp(20px, 2.4vw, 28px);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--vs-line-soft);
    border-radius: 0 0 var(--vs-radius-xl) var(--vs-radius-xl);
}
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vs-space-3); }
.filter-bar .form-group { margin: 0; flex: 1 1 180px; }
.filter-bar .form-group-grow { flex: 2 1 260px; }

/* ==========================================================================
   9. Alerts & toasts
   ========================================================================== */
.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--vs-radius-md);
    border: 1px solid transparent;
    font-size: .9375rem;
    line-height: 1.5;
    background: var(--vs-info-50);
    color: var(--vs-navy);
}
.alert + .alert { margin-top: 10px; }
.alert-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; margin-top: -2px; }
.alert-icon .icon { width: 17px; height: 17px; }
.alert-body { flex: 1; min-width: 0; padding-top: 1px; }
.alert-title { font-weight: 700; color: var(--vs-navy); margin-bottom: 2px; }
.alert-body ul { margin: 6px 0 0; padding-left: 1.1em; }
.alert-body li + li { margin-top: 2px; }
.alert-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: -4px -6px -4px 0;
    border-radius: 50%;
    color: inherit;
    opacity: .6;
    flex-shrink: 0;
    transition: all var(--vs-dur-fast);
}
.alert-close:hover { opacity: 1; background: rgba(45, 43, 85, .08); }
.alert-close .icon { width: 16px; height: 16px; }
.alert-success { background: var(--vs-success-50); border-color: var(--vs-success-100); }
.alert-success .alert-icon { background: var(--vs-success); color: #fff; }
.alert-error, .alert-danger { background: var(--vs-danger-50); border-color: var(--vs-danger-100); }
.alert-error .alert-icon, .alert-danger .alert-icon { background: var(--vs-danger); color: #fff; }
.alert-warning { background: var(--vs-warning-50); border-color: var(--vs-warning-100); }
.alert-warning .alert-icon { background: var(--vs-warning); color: #fff; }
.alert-info { background: var(--vs-info-50); border-color: var(--vs-info-100); }
.alert-info .alert-icon { background: var(--vs-info); color: #fff; }
.alert-primary { background: var(--vs-primary-50); border-color: var(--vs-primary-100); }
.alert-primary .alert-icon { background: var(--vs-primary); color: #fff; }
.flash-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--vs-space-6); position: relative; z-index: 5; }
.flash-stack:empty { display: none; }
.alert.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; }

/* Banner (full-width strip, e.g. OTP test mode warning) */
.banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px var(--vs-gutter);
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}
.banner .icon { width: 18px; height: 18px; flex-shrink: 0; }
.banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.banner-warning { background: var(--vs-yellow); color: #4A3200; }
.banner-danger { background: var(--vs-danger); color: #fff; }
.banner-primary { background: var(--vs-primary); color: #fff; }

/* Toasts (driven by Alpine store "toasts", see app.js) */
.toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: var(--vs-z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    border-radius: 18px;
    background: var(--vs-navy);
    color: #fff;
    box-shadow: var(--vs-shadow-lg);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.45;
    pointer-events: auto;
}
.toast-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .14); flex-shrink: 0; }
.toast-icon .icon { width: 15px; height: 15px; }
.toast-success .toast-icon { background: var(--vs-success); }
.toast-error .toast-icon { background: var(--vs-danger); }
.toast-warning .toast-icon { background: var(--vs-warning); }
.toast-info .toast-icon { background: var(--vs-primary); }
.toast-message { flex: 1; min-width: 0; padding-top: 2px; }
.toast-close { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: rgba(255, 255, 255, .7); }
.toast-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.toast-close .icon { width: 15px; height: 15px; }
.toast-enter { animation: vs-toast-in .35s var(--vs-ease-out); }
@keyframes vs-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 639.98px) {
    .toast-stack { right: 16px; left: 16px; width: auto; bottom: 16px; }
    .has-bottom-nav .toast-stack { bottom: 88px; }
}

/* ==========================================================================
   10. Tables
   ========================================================================== */
.table-wrap {
    background: #fff;
    border-radius: var(--vs-radius-lg);
    border: 1px solid rgba(232, 226, 215, .8);
    box-shadow: var(--vs-shadow-sm);
    overflow: hidden;
}
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > .table { min-width: 640px; }
.table-responsive > .table.table-fit { min-width: 0; }
.table .cell-wrap { white-space: normal; min-width: 220px; }
@media (max-width: 767.98px) {
    .table-responsive > .table:not(.table-fit) td { white-space: nowrap; }
    .table-responsive > .table:not(.table-fit) td.cell-wrap { white-space: normal; }
}
.table-wrap > .table-responsive > .table, .card-flush > .table-responsive > .table { margin: 0; }
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .875rem;
    color: var(--vs-navy);
}
.table th, .table td { padding: 14px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--vs-line-soft); }
.table thead th {
    background: #FBF9F5;
    color: var(--vs-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--vs-line);
}
.table thead th:first-child, .table td:first-child { padding-left: 24px; }
.table thead th:last-child, .table td:last-child { padding-right: 24px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--vs-dur-fast); }
.table-hover tbody tr:hover { background: #FCFAF6; }
.table-striped tbody tr:nth-child(even) { background: #FCFBF8; }
.table-compact th, .table-compact td { padding: 9px 12px; }
.table-compact thead th:first-child, .table-compact td:first-child { padding-left: 16px; }
.table-compact thead th:last-child, .table-compact td:last-child { padding-right: 16px; }
.table-bordered td, .table-bordered th { border: 1px solid var(--vs-line-soft); }
.table .num, .table .text-right, .table th.text-right { text-align: right; font-variant-numeric: tabular-nums; }
.table .text-center { text-align: center; }
.table .cell-muted { color: var(--vs-muted); }
.table .cell-strong { font-weight: 700; }
.table .cell-nowrap { white-space: nowrap; }
.table .cell-actions { text-align: right; white-space: nowrap; width: 1%; }
.table .cell-actions .btn + .btn, .table .cell-actions form { margin-left: 4px; }
.table .cell-actions form { display: inline-block; }
.table .cell-title { font-weight: 600; color: var(--vs-navy); }
.table .cell-sub { display: block; font-size: .78rem; color: var(--vs-muted); margin-top: 2px; font-weight: 400; }
.table .cell-check { width: 1%; padding-right: 4px; }
.table-empty td { padding: 48px 24px !important; text-align: center; color: var(--vs-muted); }
.table th a.sort { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.table th a.sort.is-active { color: var(--vs-navy); }
.table th a.sort .icon { width: 13px; height: 13px; }
.table-toolbar { display: flex; flex-wrap: wrap; gap: var(--vs-space-3); align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--vs-line-soft); }
.table-footer { display: flex; flex-wrap: wrap; gap: var(--vs-space-3); align-items: center; justify-content: space-between; padding: 14px 24px; border-top: 1px solid var(--vs-line-soft); }

/* Key/value description list */
.dl { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 0; font-size: .9rem; }
.dl dt, .dl dd { padding: 10px 0; border-bottom: 1px dashed var(--vs-line); margin: 0; }
.dl dt { color: var(--vs-muted); font-weight: 500; padding-right: 12px; }
.dl dd { color: var(--vs-navy); font-weight: 600; overflow-wrap: anywhere; }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: 0; }

/* ==========================================================================
   11. Tabs, dropdowns & modals
   ========================================================================== */
.tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 5px;
    background: #fff;
    border-radius: var(--vs-radius-pill);
    box-shadow: var(--vs-shadow-xs);
    border: 1px solid var(--vs-line-soft);
    overflow-x: auto;
    scrollbar-width: none;
    width: fit-content;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: var(--vs-radius-pill);
    color: var(--vs-navy-2);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--vs-dur) var(--vs-ease);
}
.tab .icon { width: 17px; height: 17px; }
.tab:hover { color: var(--vs-navy); background: var(--vs-cream); }
.tab.is-active, .tab[aria-selected="true"] { background: var(--vs-primary); color: #fff; box-shadow: var(--vs-shadow-primary); }
.tab .badge { padding: 1px 8px; }
.tab.is-active .badge, .tab[aria-selected="true"] .badge { background: rgba(255, 255, 255, .22); color: #fff; }
.tabs-block { display: flex; width: 100%; }
.tabs-vertical { width: auto; }
.tabs-block .tab { flex: 1; justify-content: center; }
.tabs-cream { background: var(--vs-cream-2); box-shadow: none; border-color: transparent; }
.tabs-vertical { flex-direction: column; align-items: stretch; border-radius: var(--vs-radius-lg); padding: 8px; }
.tabs-vertical .tab { border-radius: var(--vs-radius-sm); justify-content: flex-start; }
.tabs-line { display: flex; gap: 4px; box-shadow: inset 0 -1.5px 0 var(--vs-line); overflow-x: auto; scrollbar-width: none; }
.tabs-line .tab { border-radius: 0; background: none; box-shadow: none; padding: 12px 14px; border-bottom: 2.5px solid transparent; }
.tabs-line .tab.is-active, .tabs-line .tab[aria-selected="true"] { color: var(--vs-primary-700); border-bottom-color: var(--vs-primary); background: none; box-shadow: none; }
.tab-panel:focus-visible { outline: none; }

.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: var(--vs-z-dropdown);
    min-width: 230px;
    padding: 8px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--vs-line-soft);
    box-shadow: var(--vs-shadow-lg);
    transform-origin: top right;
}
.dropdown-menu-left { right: auto; left: 0; transform-origin: top left; }
.dropdown-menu-up { top: auto; bottom: calc(100% + 10px); }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--vs-navy);
    font-size: .875rem;
    font-weight: 600;
    text-align: left;
    background: none;
    transition: background-color var(--vs-dur-fast);
}
.dropdown-item .icon { width: 18px; height: 18px; color: var(--vs-muted); }
.dropdown-item:hover, .dropdown-item:focus-visible { background: var(--vs-cream); color: var(--vs-navy); outline: none; }
.dropdown-item:hover .icon { color: var(--vs-primary); }
.dropdown-item-danger, .dropdown-item-danger .icon { color: var(--vs-danger-700); }
.dropdown-item-danger:hover { background: var(--vs-danger-50); color: var(--vs-danger-700); }
.dropdown-item-danger:hover .icon { color: var(--vs-danger-700); }
.dropdown-divider { height: 1px; margin: 6px 4px; background: var(--vs-line-soft); }
.dropdown-header { padding: 10px 12px 8px; }
.dropdown-header strong { display: block; font-size: .9375rem; color: var(--vs-navy); line-height: 1.3; }
.dropdown-header span { display: block; font-size: .8125rem; color: var(--vs-muted); }

.modal-root { position: fixed; inset: 0; z-index: var(--vs-z-modal); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(31, 29, 64, .48); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--vs-radius-xl);
    box-shadow: 0 40px 80px -24px rgba(31, 29, 64, .45);
    overflow: hidden;
}
.modal-sm { max-width: 420px; }
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 1000px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 26px 6px; }
.modal-title { font-family: var(--vs-font-head); font-size: 1.35rem; font-weight: 600; line-height: 1.25; color: var(--vs-navy); }
.modal-close { display: grid; place-items: center; width: 38px; height: 38px; margin: -6px -8px 0 0; border-radius: 50%; color: var(--vs-muted); background: var(--vs-cream); flex-shrink: 0; }
.modal-close:hover { color: var(--vs-navy); background: var(--vs-cream-2); }
.modal-close .icon { width: 18px; height: 18px; }
.modal-body { padding: 14px 26px 22px; overflow-y: auto; color: var(--vs-navy-2); }
.modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 16px 26px 24px; }
.modal-footer-split { justify-content: space-between; }
.modal-center { text-align: center; }
.modal-center .modal-header { justify-content: center; flex-direction: column; align-items: center; padding-top: 30px; }
.modal-center .modal-footer { justify-content: center; }
@media (max-width: 639.98px) {
    .modal-root { align-items: flex-end; padding: 0; }
    .modal { max-width: none; border-radius: 28px 28px 0 0; max-height: 92dvh; }
    .modal-footer .btn { flex: 1; }
}

/* ==========================================================================
   12. Data display
   ========================================================================== */
/* Stat / KPI card */
.stat-card { display: flex; flex-direction: column; gap: 10px; }
.stat-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stat-card-label { font-size: .8125rem; font-weight: 600; color: var(--vs-muted); line-height: 1.35; }
.stat-card-value { font-family: var(--vs-font-head); font-size: clamp(1.65rem, 1.4rem + .8vw, 2.1rem); font-weight: 600; line-height: 1.1; color: var(--vs-navy); font-variant-numeric: tabular-nums; }
.stat-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8125rem; color: var(--vs-muted); }
.trend { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--vs-radius-pill); font-size: .75rem; font-weight: 700; }
.trend .icon { width: 13px; height: 13px; }
.trend-up { background: var(--vs-success-50); color: var(--vs-success-700); }
.trend-down { background: var(--vs-danger-50); color: var(--vs-danger-700); }
.trend-flat { background: var(--vs-cream-2); color: var(--vs-navy-2); }

/* Progress bar */
.progress { position: relative; width: 100%; height: 10px; background: #ECE6DA; border-radius: var(--vs-radius-pill); overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--vs-primary); border-radius: inherit; transition: width .6s var(--vs-ease-out); }
.progress-xs { height: 5px; }
.progress-sm { height: 7px; }
.progress-lg { height: 14px; }
.progress-sage .progress-bar, .progress-bar.bg-sage { background: var(--vs-sage); }
.progress-success .progress-bar, .progress-bar.bg-success { background: var(--vs-success); }
.progress-danger .progress-bar, .progress-bar.bg-danger { background: var(--vs-danger); }
.progress-yellow .progress-bar, .progress-bar.bg-yellow { background: var(--vs-yellow); }
.progress-striped .progress-bar {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .22) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .22) 75%, transparent 75%);
    background-size: 16px 16px;
    animation: vs-stripes 1s linear infinite;
}
@keyframes vs-stripes { to { background-position: 16px 0; } }
.progress-label { display: flex; justify-content: space-between; font-size: .8125rem; font-weight: 600; color: var(--vs-navy-2); margin-bottom: 6px; }

/* Circular progress ring (x-progress-ring renders the SVG) */
.progress-ring { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring-track { stroke: #ECE6DA; }
.progress-ring-value { stroke: var(--vs-primary); stroke-linecap: round; transition: stroke-dashoffset .8s var(--vs-ease-out); }
.progress-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.progress-ring-label strong { font-family: var(--vs-font-head); font-weight: 600; color: var(--vs-navy); }
.progress-ring-label span { font-size: .7rem; color: var(--vs-muted); font-weight: 600; margin-top: 2px; }

/* Avatar */
.avatar {
    --av-size: 40px;
    display: inline-grid;
    place-items: center;
    width: var(--av-size);
    height: var(--av-size);
    border-radius: 50%;
    background: var(--vs-primary-100);
    color: var(--vs-primary-700);
    font-family: var(--vs-font-head);
    font-weight: 600;
    font-size: calc(var(--av-size) * .38);
    line-height: 1;
    flex-shrink: 0;
    overflow: hidden;
    text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { --av-size: 26px; }
.avatar-sm { --av-size: 32px; }
.avatar-lg { --av-size: 56px; }
.avatar-xl { --av-size: 84px; }
.avatar-sage { background: var(--vs-sage-100); color: var(--vs-sage-700); }
.avatar-yellow { background: var(--vs-yellow-100); color: var(--vs-yellow-700); }
.avatar-navy { background: var(--vs-navy); color: #fff; }
.avatar-ring { box-shadow: 0 0 0 3px #fff; }

/* Breadcrumbs */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--vs-muted); }
.breadcrumbs a { color: var(--vs-muted); }
.breadcrumbs a:hover { color: var(--vs-primary-700); }
.breadcrumbs > * + *::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239896B0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumbs [aria-current="page"] { color: var(--vs-navy); }

/* Pagination */
.pagination-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pagination-info { font-size: .8125rem; color: var(--vs-muted); }
.pagination-info strong { color: var(--vs-navy); font-weight: 700; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.page-link {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--vs-radius-pill);
    background: #fff;
    border: 1.5px solid var(--vs-line);
    color: var(--vs-navy-2);
    font-size: .875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: all var(--vs-dur-fast) var(--vs-ease);
}
.page-link .icon { width: 17px; height: 17px; }
a.page-link:hover { border-color: var(--vs-primary-200); color: var(--vs-primary-700); }
.page-link.is-active { background: var(--vs-primary); border-color: var(--vs-primary); color: #fff; box-shadow: var(--vs-shadow-primary); }
.page-link.is-disabled { opacity: .45; cursor: not-allowed; }
.page-link.is-gap { border-color: transparent; background: transparent; min-width: 24px; padding: 0 2px; }
.page-link-wide { gap: 6px; display: inline-flex; align-items: center; }

/* Steps (horizontal) */
.steps { display: flex; gap: 8px; counter-reset: vs-step; }
.step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 0; }
.step::before {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(-50% + 26px);
    right: calc(50% + 26px);
    height: 2.5px;
    border-radius: 2px;
    background: var(--vs-line);
}
.step:first-child::before { display: none; }
.step.is-done::before, .step.is-active::before { background: var(--vs-primary); }
.step-dot {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--vs-line);
    color: var(--vs-muted);
    font-family: var(--vs-font-head);
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.step-dot .icon { width: 18px; height: 18px; }
.step.is-active .step-dot { border-color: var(--vs-primary); color: var(--vs-primary-700); box-shadow: var(--vs-ring); }
.step.is-done .step-dot { background: var(--vs-primary); border-color: var(--vs-primary); color: #fff; }
.step-label { font-size: .8125rem; font-weight: 700; color: var(--vs-navy); line-height: 1.3; }
.step-desc { font-size: .75rem; color: var(--vs-muted); }

/* Timeline (vertical) */
.timeline { position: relative; display: flex; flex-direction: column; gap: 22px; padding-left: 34px; }
.timeline::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--vs-line); border-radius: 2px; }
.timeline-item { position: relative; }
.timeline-dot { position: absolute; left: -34px; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--vs-primary); display: grid; place-items: center; color: var(--vs-primary); }
.timeline-dot .icon { width: 12px; height: 12px; }
.timeline-item.is-done .timeline-dot { background: var(--vs-primary); color: #fff; }
.timeline-dot-sage { border-color: var(--vs-sage); background: var(--vs-sage); color: #24420C; }
.timeline-dot-yellow { border-color: var(--vs-yellow); background: var(--vs-yellow); color: #4A3200; }
.timeline-title { font-weight: 700; color: var(--vs-navy); line-height: 1.35; }
.timeline-meta { font-size: .78rem; color: var(--vs-muted); margin-top: 1px; }
.timeline-body { font-size: .9rem; color: var(--vs-navy-2); margin-top: 4px; }

/* Accordion / FAQ (native <details> — works without JS) */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.accordion-item { background: #fff; border-radius: 22px; border: 1px solid var(--vs-line-soft); box-shadow: var(--vs-shadow-xs); overflow: hidden; transition: box-shadow var(--vs-dur) var(--vs-ease); }
.accordion-item[open] { box-shadow: var(--vs-shadow-md); }
.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 22px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--vs-navy);
    text-align: left;
    cursor: pointer;
    list-style: none;
}
.accordion-trigger::-webkit-details-marker { display: none; }
.accordion-trigger::marker { content: ''; }
.accordion-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--vs-cream); color: var(--vs-navy); flex-shrink: 0; transition: all var(--vs-dur) var(--vs-ease); }
.accordion-icon .icon { width: 17px; height: 17px; }
.accordion-item[open] .accordion-icon, .accordion-item.is-open .accordion-icon { transform: rotate(45deg); background: var(--vs-primary); color: #fff; }
.accordion-panel { padding: 0 22px 20px; color: var(--vs-navy-2); font-size: .9375rem; line-height: 1.7; }

/* Empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: clamp(32px, 6vw, 56px) 20px; }
.empty-state-art { position: relative; margin-bottom: 8px; }
.empty-state-art .icon-badge { box-shadow: 0 0 0 10px rgba(255, 255, 255, .7), 0 0 0 11px var(--vs-line); }
.empty-state-art .sparkle-svg { position: absolute; }
.empty-state-title { font-family: var(--vs-font-head); font-size: 1.3rem; font-weight: 600; color: var(--vs-navy); }
.empty-state-text { color: var(--vs-muted); max-width: 440px; font-size: .9375rem; }
.empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.empty-state-compact { padding: 24px 16px; }

/* Skeleton loader */
.skeleton {
    display: block;
    background: linear-gradient(90deg, #EDE7DC 0%, #F6F2EA 40%, #EDE7DC 80%);
    background-size: 300% 100%;
    border-radius: 10px;
    animation: vs-shimmer 1.4s ease-in-out infinite;
}
.skeleton-text { height: 12px; margin: 8px 0; }
.skeleton-title { height: 20px; width: 55%; margin-bottom: 14px; }
.skeleton-circle { border-radius: 50%; width: 48px; height: 48px; }
.skeleton-block { height: 140px; border-radius: var(--vs-radius-lg); }
@keyframes vs-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Tooltip: <span data-tooltip="Text">…</span> (add data-tooltip-pos="bottom" to flip) */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: var(--vs-z-dropdown);
    width: max-content;
    max-width: 240px;
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--vs-navy);
    color: #fff;
    font-family: var(--vs-font-body);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    text-align: center;
    box-shadow: var(--vs-shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity var(--vs-dur-fast) var(--vs-ease), transform var(--vs-dur-fast) var(--vs-ease);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
[data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
[data-tooltip-pos="right"]::after { left: calc(100% + 10px); bottom: auto; top: 50%; transform: translate(-4px, -50%); }
[data-tooltip-pos="right"]:hover::after, [data-tooltip-pos="right"]:focus-visible::after { transform: translate(0, -50%); }

/* Key info list with icons (e.g. package meta, contact info) */
.meta-list { display: flex; flex-direction: column; gap: 10px; }
.meta-item { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--vs-navy-2); }
.meta-item .icon { width: 18px; height: 18px; color: var(--vs-primary); margin-top: 2px; flex-shrink: 0; }
.meta-inline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; color: var(--vs-muted); }
.meta-inline > span { display: inline-flex; align-items: center; gap: 6px; }
.meta-inline .icon { width: 16px; height: 16px; color: var(--vs-subtle); }

.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; color: var(--vs-navy-2); line-height: 1.5; }
.check-list .check-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--vs-sage); color: #24420C; flex-shrink: 0; margin-top: 1px; }
.check-list .check-icon .icon { width: 13px; height: 13px; stroke-width: 3; }

/* Score / big number pill */
.kpi-inline { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--vs-font-head); font-weight: 600; }

/* ==========================================================================
   13. Package card & price
   ========================================================================== */
.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; line-height: 1.1; }
.price-amount { font-family: var(--vs-font-head); font-size: 1.85rem; font-weight: 700; color: var(--vs-navy); letter-spacing: -.01em; }
.price-mrp { font-size: .95rem; font-weight: 600; color: var(--vs-subtle); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.price-off { align-self: center; padding: 3px 9px; border-radius: var(--vs-radius-pill); background: var(--vs-sage); color: #24420C; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.price-sm .price-amount { font-size: 1.35rem; }
.price-sm .price-mrp { font-size: .82rem; }
.price-lg .price-amount { font-size: 2.6rem; }
.price-lg .price-mrp { font-size: 1.1rem; }
.price-free .price-amount { color: var(--vs-success-700); }

.package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px 16px 24px;
    background: #fff;
    border-radius: var(--vs-radius-xl);
    border: 1px solid rgba(232, 226, 215, .8);
    box-shadow: var(--vs-shadow-sm);
    transition: transform var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease);
}
.package-card:hover { transform: translateY(-4px); box-shadow: var(--vs-shadow-lg); }
.package-card-cream { background: var(--vs-cream-2); border-color: transparent; box-shadow: none; }
.package-card-cream:hover { box-shadow: var(--vs-shadow-md); }
.package-card.is-featured { box-shadow: 0 0 0 2px var(--vs-primary), var(--vs-shadow-md); }
.package-card-media { position: relative; margin-bottom: 26px; }
.package-card .photo-frame { --frame-offset: 9px; }
.package-card .photo-frame-backdrop { right: -8px; bottom: -9px; }
.package-card-badge-icon { position: absolute; top: 14px; left: 14px; z-index: 3; }
.package-card-ribbon { position: absolute; top: 18px; right: 16px; z-index: 3; }
.package-card-body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 0 8px; }
.package-card-category { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vs-primary-700); }
.package-card-title { font-family: var(--vs-font-head); font-size: 1.45rem; font-weight: 600; line-height: 1.2; color: var(--vs-navy); }
.package-card-title a { color: inherit; }
.package-card-title a:hover { color: var(--vs-primary-700); }
.package-card-tagline { color: var(--vs-muted); font-size: .9375rem; line-height: 1.55; margin-top: -6px; }
.package-card-pricing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--vs-cream); border-radius: var(--vs-radius-md); }
.package-card-cream .package-card-pricing { background: #fff; }
.package-card-count { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 700; color: var(--vs-navy-2); }
.package-card-count .icon { width: 17px; height: 17px; color: var(--vs-primary); }
.package-card-features { display: grid; gap: 9px; }
.package-card-features li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; color: var(--vs-navy-2); line-height: 1.45; }
.package-card-features .check-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--vs-sage); color: #24420C; flex-shrink: 0; margin-top: 1px; }
.package-card-features .check-icon .icon { width: 12px; height: 12px; stroke-width: 3; }
.package-card-validity { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--vs-muted); font-weight: 600; }
.package-card-validity .icon { width: 16px; height: 16px; color: var(--vs-subtle); }
.package-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.package-card-actions .btn { flex: 1 1 140px; }
@media (min-width: 640px) {
    .package-card-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Photo with an organic coloured backdrop + squiggle doodle + sparkle (x-photo-frame) */
.photo-frame { position: relative; isolation: isolate; --frame-offset: 16px; --frame-tint: var(--vs-primary-200); --frame-stroke: var(--vs-primary); }
.photo-frame picture { display: contents; }
.photo-frame-backdrop {
    position: absolute;
    z-index: 0;
    top: calc(var(--frame-offset) * 1.5);
    left: calc(var(--frame-offset) * 1.5);
    right: calc(var(--frame-offset) * -1);
    bottom: calc(var(--frame-offset) * -1);
    background: var(--frame-tint);
    border-radius: 34px 64px 40px 72px / 56px 38px 70px 44px;
    transform: rotate(1.6deg);
    pointer-events: none;
}
.photo-frame-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--vs-radius-lg);
    background: var(--vs-cream-2);
}
.photo-frame-doodle { position: absolute; z-index: 2; width: 72px; height: 30px; left: -30px; bottom: 14%; color: var(--frame-stroke); pointer-events: none; }
.photo-frame-deco { position: absolute; z-index: 2; pointer-events: none; }
.photo-frame-tone-primary { --frame-tint: var(--vs-primary-200); --frame-stroke: var(--vs-primary); }
.photo-frame-tone-sage { --frame-tint: var(--vs-sage-200); --frame-stroke: #7DBE45; }
.photo-frame-tone-yellow { --frame-tint: var(--vs-yellow-200); --frame-stroke: #F2B533; }
.photo-frame-tone-blush { --frame-tint: var(--vs-blush); --frame-stroke: #E98C7B; }
.photo-frame-blob .photo-frame-img { aspect-ratio: 4 / 5; border-radius: 46% 54% 44% 56% / 40% 42% 58% 60%; }
.photo-frame-blob .photo-frame-backdrop { border-radius: 52% 48% 40% 60% / 44% 50% 50% 56%; transform: rotate(-4deg); }
.photo-frame-portrait .photo-frame-img { aspect-ratio: 4 / 5; border-radius: var(--vs-radius-2xl); }
.photo-frame-square .photo-frame-img { aspect-ratio: 1; }
.photo-frame-sm { --frame-offset: 10px; }
@media (max-width: 639.98px) {
    .photo-frame { --frame-offset: 10px; }
    .photo-frame-doodle { left: -14px; width: 56px; }
}
.photo-frame-lg { --frame-offset: 24px; }

/* ==========================================================================
   14. Decorative helpers
   ========================================================================== */
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.has-deco { position: relative; isolation: isolate; }
.has-deco > :where(:not(.deco, .blob, .dots-patch, .sparkle-svg)) { position: relative; z-index: 1; }

.blob {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 320px;
    height: 320px;
    border-radius: 58% 42% 55% 45% / 47% 56% 44% 53%;
    background: var(--vs-primary-100);
    opacity: .9;
    display: block;
}
.blob-primary { background: var(--vs-primary-100); }
.blob-sage { background: var(--vs-sage-100); }
.blob-yellow { background: var(--vs-yellow-100); }
.blob-blush { background: var(--vs-blush); opacity: .7; }
.blob-white { background: #fff; }
.blob-sm { width: 180px; height: 180px; }
.blob-lg { width: 480px; height: 480px; }
.blob-animate { animation: vs-morph 14s ease-in-out infinite; }
@keyframes vs-morph {
    0%, 100% { border-radius: 58% 42% 55% 45% / 47% 56% 44% 53%; }
    33% { border-radius: 44% 56% 40% 60% / 58% 42% 58% 42%; }
    66% { border-radius: 52% 48% 62% 38% / 42% 60% 40% 58%; }
}

.sparkle {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23FFD875' d='M16 1.5c1 6.6 2.9 10.6 6.3 12.4 1.9 1 4.5 1.6 8.2 2.1-6.6 1-10.6 2.9-12.4 6.3-1 1.9-1.6 4.5-2.1 8.2-1-6.6-2.9-10.6-6.3-12.4-1.9-1-4.5-1.6-8.2-2.1 6.6-1 10.6-2.9 12.4-6.3 1-1.9 1.6-4.5 2.1-8.2z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}
.sparkle-sm { width: 16px; height: 16px; }
.sparkle-lg { width: 44px; height: 44px; }
.sparkle-xl { width: 64px; height: 64px; }
.sparkle-twinkle, .sparkle-svg.is-twinkle { animation: vs-twinkle 3.2s ease-in-out infinite; }
@keyframes vs-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.78) rotate(18deg); opacity: .75; } }
.sparkle-svg { color: var(--vs-yellow); }

.float-slow { animation: vs-float 6s ease-in-out infinite; }
@keyframes vs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Wavy underline for a highlighted word: <span class="squiggle">career</span> */
.squiggle {
    position: relative;
    white-space: nowrap;
    padding-bottom: .12em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c9-6 18-6 27 0s18 6 27 0 18-6 27 0 18 6 27 0 8-5 8-5' fill='none' stroke='%236C72F2' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .32em no-repeat;
}
.squiggle-sage {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c9-6 18-6 27 0s18 6 27 0 18-6 27 0 18 6 27 0 8-5 8-5' fill='none' stroke='%23B2E281' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.squiggle-yellow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c9-6 18-6 27 0s18 6 27 0 18-6 27 0 18 6 27 0 8-5 8-5' fill='none' stroke='%23FFD875' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.highlight { background: linear-gradient(transparent 58%, var(--vs-yellow) 58%, var(--vs-yellow) 92%, transparent 92%); padding: 0 .08em; }
.highlight-sage { background: linear-gradient(transparent 58%, var(--vs-sage) 58%, var(--vs-sage) 92%, transparent 92%); }
.text-primary-brand { color: var(--vs-primary); }

/* Dotted pattern */
.dots-bg {
    background-image: radial-gradient(rgba(45, 43, 85, .13) 1.3px, transparent 1.4px);
    background-size: 18px 18px;
}
.dots-patch {
    position: absolute;
    width: 120px;
    height: 96px;
    pointer-events: none;
    background-image: radial-gradient(rgba(108, 114, 242, .35) 1.6px, transparent 1.8px);
    background-size: 14px 14px;
    z-index: 0;
}

/* Wavy section edges: <section class="wave-bg"> (cream-2), .wave-bg-white, .wave-bg-primary, .wave-bg-navy */
.wave-bg { position: relative; background: var(--vs-cream-2); margin-block: 48px; }
.wave-bg::before, .wave-bg::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 48px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath fill='%23F2EDE4' d='M0 48V26c120-18 240-26 360-14s240 30 360 26 240-28 360-30 240 12 360 22v18z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.wave-bg::before { top: -47px; }
.wave-bg::after { bottom: -47px; transform: rotate(180deg); }
.wave-bg-white { background: #fff; }
.wave-bg-white::before, .wave-bg-white::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0 48V26c120-18 240-26 360-14s240 30 360 26 240-28 360-30 240 12 360 22v18z'/%3E%3C/svg%3E");
}
.wave-bg-primary { background: var(--vs-primary); color: #fff; }
.wave-bg-primary::before, .wave-bg-primary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath fill='%236C72F2' d='M0 48V26c120-18 240-26 360-14s240 30 360 26 240-28 360-30 240 12 360 22v18z'/%3E%3C/svg%3E");
}
.wave-bg-navy { background: var(--vs-navy); color: #E7E6F7; }
.wave-bg-navy::before, .wave-bg-navy::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath fill='%232D2B55' d='M0 48V26c120-18 240-26 360-14s240 30 360 26 240-28 360-30 240 12 360 22v18z'/%3E%3C/svg%3E");
}
.wave-bg-primary h1, .wave-bg-primary h2, .wave-bg-primary h3, .wave-bg-navy h1, .wave-bg-navy h2, .wave-bg-navy h3 { color: #fff; }
.wave-top-only::after, .wave-bottom-only::before { display: none; }

/* Rounded colour band (alternative to waves) */
.band { border-radius: var(--vs-radius-2xl); padding: clamp(28px, 5vw, 64px); position: relative; overflow: hidden; isolation: isolate; }
.band-primary { background: var(--vs-primary); color: #fff; }
.band-primary h2, .band-primary h3 { color: #fff; }
.band-navy { background: var(--vs-navy); color: #E7E6F7; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-cream { background: var(--vs-cream-2); }
.band-sage { background: var(--vs-sage-100); }

/* ==========================================================================
   15. Shells
   ========================================================================== */
/* ---- Brand logo (x-logo) ---- */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--vs-navy); text-decoration: none; flex-shrink: 0; }
.logo:hover { color: var(--vs-navy); }
.logo-mark { width: var(--logo-size, 44px); height: var(--logo-size, 44px); flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(108, 114, 242, .28)); }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-word { font-family: var(--vs-font-head); font-weight: 700; font-size: calc(var(--logo-size, 44px) * .56); letter-spacing: -.01em; color: var(--vs-navy); white-space: nowrap; }
.logo-word span { color: var(--vs-primary); }
.logo-sub { font-size: calc(var(--logo-size, 44px) * .235); font-weight: 600; color: var(--vs-muted); letter-spacing: .01em; margin-top: 3px; white-space: nowrap; }
.logo-light .logo-word { color: #fff; }
.logo-light .logo-word span { color: var(--vs-yellow); }
.logo-light .logo-sub { color: rgba(255, 255, 255, .7); }
.logo-on-primary .logo-mark-bg, .auth-aside .logo-mark-bg { fill: var(--vs-navy); }
.logo-on-primary .logo-mark, .auth-aside .logo-mark { filter: drop-shadow(0 6px 12px rgba(31, 29, 64, .3)); }
.logo-sm { --logo-size: 36px; }
.logo-lg { --logo-size: 54px; }
.logo-chip { margin-left: 2px; padding: 3px 9px; border-radius: var(--vs-radius-pill); background: var(--vs-navy); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* ---- Public site ---- */
.topbar { background: var(--vs-navy); color: #DCDBF0; font-size: .8125rem; font-weight: 500; position: relative; z-index: calc(var(--vs-z-sticky) + 1); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; padding-block: 6px; }
.topbar-contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.topbar a, .topbar-item { display: inline-flex; align-items: center; gap: 7px; color: #DCDBF0; }
.topbar a:hover { color: #fff; }
.topbar .icon { width: 15px; height: 15px; color: var(--vs-yellow); }
.topbar-announcement { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; text-align: right; }
.topbar-announcement .sparkle { width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 767.98px) {
    .topbar-inner { justify-content: center; text-align: center; }
    .topbar-contacts .topbar-hide-sm { display: none; }
    .topbar-has-announcement .topbar-contacts { display: none; }
    .topbar-announcement { text-align: center; justify-content: center; }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--vs-z-sticky);
    background: rgba(247, 244, 238, .86);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    transition: box-shadow var(--vs-dur) var(--vs-ease), background-color var(--vs-dur) var(--vs-ease);
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .9); box-shadow: 0 8px 30px -18px rgba(45, 43, 85, .35); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--vs-header-h); }
.site-nav { display: none; align-items: center; gap: 2px; padding: 5px; background: rgba(255, 255, 255, .7); border-radius: var(--vs-radius-pill); border: 1px solid rgba(232, 226, 215, .9); }
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--vs-radius-pill);
    color: var(--vs-navy-2);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--vs-dur) var(--vs-ease);
}
.nav-link .icon { width: 17px; height: 17px; }
.nav-link:hover { color: var(--vs-navy); background: #fff; }
.nav-link.is-active { color: #fff; background: var(--vs-navy); }
.site-header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: inline-grid; }
.header-cta-label-short { display: none; }
@media (min-width: 1100px) {
    .site-nav { display: flex; }
    .nav-toggle { display: none; }
}
@media (max-width: 479.98px) {
    .site-header-actions .btn-header-cta { --btn-px: 1rem; --btn-h: 42px; }
    .header-cta-label-long { display: none; }
    .header-cta-label-short { display: inline; }
}

.mobile-nav-backdrop { position: fixed; inset: 0; z-index: var(--vs-z-drawer); background: rgba(31, 29, 64, .42); backdrop-filter: blur(3px); }
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--vs-z-drawer) + 1);
    width: min(360px, 88vw);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
    background: var(--vs-cream);
    border-radius: 32px 0 0 32px;
    box-shadow: -20px 0 60px -20px rgba(31, 29, 64, .35);
    overflow-y: auto;
}
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    color: var(--vs-navy);
    font-weight: 600;
    font-size: 1rem;
}
.mobile-nav-link .icon-badge { --ib-size: 38px; }
.mobile-nav-link:hover { background: #fff; color: var(--vs-navy); }
.mobile-nav-link.is-active { background: #fff; box-shadow: var(--vs-shadow-sm); }
.mobile-nav-foot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.mobile-nav-contact { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: #fff; border-radius: 20px; font-size: .875rem; }
.mobile-nav-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--vs-navy-2); font-weight: 600; }
.mobile-nav-contact .icon { width: 16px; height: 16px; color: var(--vs-primary); }

.site-main { position: relative; }

.site-footer {
    position: relative;
    margin-top: clamp(48px, 7vw, 96px);
    background: var(--vs-navy);
    color: #C9C8E2;
    border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
    overflow: hidden;
    isolation: isolate;
}
.site-footer::before {
    content: '';
    position: absolute;
    right: -120px;
    top: -140px;
    width: 420px;
    height: 420px;
    border-radius: 58% 42% 55% 45% / 47% 56% 44% 53%;
    background: rgba(108, 114, 242, .22);
    z-index: -1;
}
.site-footer::after {
    content: '';
    position: absolute;
    left: -90px;
    bottom: -160px;
    width: 340px;
    height: 340px;
    border-radius: 44% 56% 40% 60% / 58% 42% 58% 42%;
    background: rgba(178, 226, 129, .10);
    z-index: -1;
}
.footer-grid { display: grid; gap: 36px; padding-block: clamp(48px, 6vw, 80px) 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1.1fr 1.3fr; gap: 48px; } }
.footer-brand p { margin-top: 18px; font-size: .9rem; line-height: 1.7; max-width: 340px; color: #B9B8D6; }
.footer-credit { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 8px 14px 8px 8px; background: rgba(255, 255, 255, .07); border-radius: var(--vs-radius-pill); font-size: .8125rem; color: #fff; font-weight: 600; }
.footer-credit img { width: 32px; height: 32px; border-radius: 50%; }
.footer-title { font-family: var(--vs-font-head); font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a, .footer-contact a, .footer-contact span { color: #C9C8E2; font-size: .9rem; display: inline-flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.footer-links a:hover, .footer-contact a:hover { color: var(--vs-yellow); }
.footer-contact { display: flex; flex-direction: column; gap: 12px; }
.footer-contact .icon { width: 17px; height: 17px; color: var(--vs-sage); margin-top: 2px; flex-shrink: 0; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 22px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8125rem; color: #A6A5C6; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal a { color: #A6A5C6; }
.footer-legal a:hover { color: #fff; }

/* ---- Auth (split) ---- */
.auth-body { background: var(--vs-cream); }
.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.auth-aside { display: none; }
.auth-main { display: flex; flex-direction: column; min-height: 100dvh; padding: 20px var(--vs-gutter) 24px; position: relative; isolation: isolate; overflow: hidden; }
.auth-main-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-main-center { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 28px; }
.auth-card { width: 100%; max-width: 460px; background: #fff; border-radius: var(--vs-radius-xl); padding: clamp(24px, 4vw, 40px); box-shadow: var(--vs-shadow-md); border: 1px solid rgba(232, 226, 215, .7); position: relative; }
.auth-card-wide { max-width: 620px; }
.auth-title { font-family: var(--vs-font-head); font-size: clamp(1.6rem, 1.4rem + .8vw, 2rem); font-weight: 600; line-height: 1.2; }
.auth-subtitle { color: var(--vs-muted); margin-top: 6px; font-size: .9375rem; }
.auth-foot { text-align: center; font-size: .8125rem; color: var(--vs-muted); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.auth-foot a { color: var(--vs-muted); }
.auth-foot a:hover { color: var(--vs-primary-700); }
.auth-main .blob { opacity: .6; }
@media (min-width: 1024px) {
    .auth-shell { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .auth-aside {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 16px 0 16px 16px;
        padding: 32px 40px;
        border-radius: 40px;
        background: var(--vs-primary);
        color: #fff;
        position: relative;
        min-height: calc(100dvh - 32px);
        gap: 22px;
        overflow: hidden;
        isolation: isolate;
    }
    .auth-main-top .logo-mobile-only { display: none; }
}
.auth-aside h2 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 1.2vw, 2.5rem); line-height: 1.1; }
.auth-aside-copy { max-width: 440px; position: relative; z-index: 2; }
.auth-aside-copy p { color: rgba(255, 255, 255, .85); margin-top: 14px; font-size: 1.02rem; }
.auth-aside-points { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.auth-aside-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .95rem; }
.auth-aside-points .icon-badge { --ib-size: 34px; background: rgba(255, 255, 255, .16); color: var(--vs-yellow); }
.auth-aside-art { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 8px; }
.auth-aside-art img, .auth-aside-art svg { max-height: 100%; width: auto; max-width: 100%; }
.auth-aside-foot { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; font-size: .85rem; color: rgba(255, 255, 255, .85); }
.auth-aside-foot img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.auth-aside .deco-swirl { position: absolute; z-index: 0; pointer-events: none; }

/* ---- Student portal ---- */
.portal-body { background: var(--vs-cream); }
.portal-topbar { position: sticky; top: 0; z-index: var(--vs-z-sticky); background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--vs-line-soft); }
.portal-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; }
.portal-nav { display: none; align-items: center; gap: 2px; }
.portal-nav .nav-link { font-size: .875rem; padding: 9px 14px; }
.portal-nav .nav-link.is-active { background: var(--vs-primary-100); color: var(--vs-primary-700); }
.portal-user { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: var(--vs-radius-pill); border: 1px solid var(--vs-line); background: #fff; transition: all var(--vs-dur) var(--vs-ease); }
.portal-user:hover { border-color: var(--vs-primary-200); box-shadow: var(--vs-shadow-sm); }
.portal-user-name { font-weight: 700; font-size: .875rem; color: var(--vs-navy); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-user .icon { width: 16px; height: 16px; color: var(--vs-muted); }
.portal-main { padding-block: clamp(24px, 4vw, 40px) 48px; min-height: calc(100dvh - 70px - 80px); }
.portal-footer { padding-block: 24px; font-size: .8125rem; color: var(--vs-muted); border-top: 1px solid var(--vs-line-soft); }
.portal-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.portal-footer a { color: var(--vs-muted); }
.portal-footer a:hover { color: var(--vs-primary-700); }
.bottom-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: var(--vs-z-sticky);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px;
    background: rgba(45, 43, 85, .96);
    backdrop-filter: blur(10px);
    border-radius: 26px;
    box-shadow: 0 18px 40px -16px rgba(31, 29, 64, .6);
}
.bottom-nav-link { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: 20px; color: #B9B8D6; font-size: .66rem; font-weight: 700; letter-spacing: .01em; text-align: center; line-height: 1.1; }
.bottom-nav-link .icon { width: 21px; height: 21px; }
.bottom-nav-link:hover { color: #fff; }
.bottom-nav-link.is-active { background: var(--vs-primary); color: #fff; }
.has-bottom-nav .portal-footer { padding-bottom: 104px; }
.has-bottom-nav .portal-main { min-height: calc(100dvh - 70px - 190px); }
@media (min-width: 1024px) {
    .portal-nav { display: flex; }
    .bottom-nav { display: none; }
    .has-bottom-nav .portal-footer { padding-bottom: 24px; }
    .has-bottom-nav .portal-main { min-height: calc(100dvh - 70px - 80px); }
}

.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(20px, 3vw, 32px); }
.page-header-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.page-title { font-family: var(--vs-font-head); font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.25rem); font-weight: 600; line-height: 1.15; color: var(--vs-navy); }
.page-subtitle { color: var(--vs-muted); margin-top: 4px; font-size: .9375rem; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.page-header .breadcrumbs { margin-bottom: 8px; }

/* ---- Exam (CBT) shell — engine-specific styles live in exam.css ---- */
.exam-body { background: var(--vs-cream); min-height: 100dvh; }
.exam-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }


/* ---- Alpine transition helpers (x-transition:enter="vs-pop" enter-start="vs-pop-from" enter-end="vs-pop-to") ---- */
.vs-fade { transition: opacity .2s ease; }
.vs-fade-from { opacity: 0; }
.vs-fade-to { opacity: 1; }
.vs-pop { transition: opacity .2s ease, transform .28s var(--vs-ease-out); }
.vs-pop-from { opacity: 0; transform: translateY(8px) scale(.97); }
.vs-pop-to { opacity: 1; transform: none; }
.vs-slide { transition: transform .38s var(--vs-ease-out), opacity .2s ease; }
.vs-slide-from { transform: translateX(100%); opacity: .6; }
.vs-slide-to { transform: none; opacity: 1; }
.vs-collapse-enter { transition: opacity .2s ease, transform .2s ease; }

/* ---- Wave divider (x-wave) ---- */
.wave-divider { display: block; width: 100%; margin-bottom: -1px; pointer-events: none; }
.wave-divider-flip { transform: scaleY(-1); margin-bottom: 0; margin-top: -1px; }

/* ---- Auth brand panel art ---- */
.auth-art { position: relative; height: clamp(200px, 30vh, 380px); aspect-ratio: 4 / 5; max-width: 100%; }
.auth-art .photo-frame { height: 100%; }
.auth-art .photo-frame-img { height: 100%; aspect-ratio: auto; }
.auth-float-chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border-radius: var(--vs-radius-pill);
    background: #fff;
    color: var(--vs-navy);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 18px 40px -16px rgba(31, 29, 64, .45);
}
.auth-float-chip .icon-badge { --ib-size: 32px; }

/* ==========================================================================
   16. Anti-piracy (student portal + exam)
   ========================================================================== */
.protected, .protected * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.protected img, .protected svg { -webkit-user-drag: none; user-drag: none; }
.protected input, .protected textarea, .protected select, .protected [contenteditable="true"], .protected [contenteditable=""],
.protected .allow-select, .protected .allow-select * {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}
.vs-watermark {
    position: fixed;
    inset: -50%;
    z-index: var(--vs-z-watermark);
    pointer-events: none;
    background-repeat: repeat;
    opacity: .065;
    transform: rotate(-24deg);
    mix-blend-mode: multiply;
}
.vs-shield {
    position: fixed;
    inset: 0;
    z-index: var(--vs-z-shield);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(247, 244, 238, .72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.vs-shield[hidden] { display: none !important; }
.vs-shield-card { max-width: 420px; text-align: center; background: #fff; border-radius: var(--vs-radius-xl); padding: 32px 28px; box-shadow: var(--vs-shadow-lg); }
.vs-shield-card h2 { font-size: 1.35rem; margin: 14px 0 6px; }
.vs-shield-card p { color: var(--vs-muted); font-size: .9375rem; }
.vs-shield-card .icon-badge { margin-inline: auto; }
.vs-print-block { display: none; }
@media print {
    .protected > *:not(.vs-print-block) { display: none !important; }
    .protected .vs-print-block {
        display: flex !important;
        min-height: 90vh;
        align-items: center;
        justify-content: center;
        font: 600 22pt/1.3 var(--vs-font-head);
        color: #2D2B55;
        text-align: center;
    }
}

/* Print (non-protected pages only, e.g. the printable invoice with @section('allow_copy')) */
.print-only { display: none; }
@media print {
    body:not(.protected) { background: #fff; color: #000; }
    body:not(.protected) .site-header, body:not(.protected) .topbar, body:not(.protected) .site-footer,
    body:not(.protected) .portal-topbar, body:not(.protected) .bottom-nav, body:not(.protected) .portal-footer,
    body:not(.protected) .toast-stack, body:not(.protected) .flash-stack, body:not(.protected) .skip-link,
    body:not(.protected) .admin-sidebar, body:not(.protected) .admin-topbar, body:not(.protected) .no-print { display: none !important; }
    body:not(.protected) .print-only { display: block; }
    body:not(.protected) .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
    body:not(.protected) .portal-main { padding: 0; min-height: 0; }
    body:not(.protected) a { color: inherit; text-decoration: none; }
}

/* ==========================================================================
   17. Utilities
   ========================================================================== */
/* Display */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid-display { display: grid; }
.hidden { display: none; }
.contents { display: contents; }

/* Flex */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; min-width: 0; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.shrink-0 { flex-shrink: 0; }
.grow { flex-grow: 1; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.order-first { order: -1; }
.order-last { order: 999; }
.place-center { place-items: center; place-content: center; }

/* Gap */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--vs-space-1); }
.gap-2 { gap: var(--vs-space-2); }
.gap-3 { gap: var(--vs-space-3); }
.gap-4 { gap: var(--vs-space-4); }
.gap-5 { gap: var(--vs-space-5); }
.gap-6 { gap: var(--vs-space-6); }
.gap-8 { gap: var(--vs-space-8); }
.gap-10 { gap: var(--vs-space-10); }
.gap-12 { gap: var(--vs-space-12); }

/* Spacing (0,1,2,3,4,5,6,8,10,12,16) */
.m-0 { margin: 0; }
.mx-auto { margin-inline: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--vs-space-1); } .mt-2 { margin-top: var(--vs-space-2); } .mt-3 { margin-top: var(--vs-space-3); } .mt-4 { margin-top: var(--vs-space-4); } .mt-5 { margin-top: var(--vs-space-5); } .mt-6 { margin-top: var(--vs-space-6); } .mt-8 { margin-top: var(--vs-space-8); } .mt-10 { margin-top: var(--vs-space-10); } .mt-12 { margin-top: var(--vs-space-12); } .mt-16 { margin-top: var(--vs-space-16); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--vs-space-1); } .mb-2 { margin-bottom: var(--vs-space-2); } .mb-3 { margin-bottom: var(--vs-space-3); } .mb-4 { margin-bottom: var(--vs-space-4); } .mb-5 { margin-bottom: var(--vs-space-5); } .mb-6 { margin-bottom: var(--vs-space-6); } .mb-8 { margin-bottom: var(--vs-space-8); } .mb-10 { margin-bottom: var(--vs-space-10); } .mb-12 { margin-bottom: var(--vs-space-12); } .mb-16 { margin-bottom: var(--vs-space-16); }
.my-0 { margin-block: 0; } .my-2 { margin-block: var(--vs-space-2); } .my-4 { margin-block: var(--vs-space-4); } .my-6 { margin-block: var(--vs-space-6); } .my-8 { margin-block: var(--vs-space-8); } .my-12 { margin-block: var(--vs-space-12); }
.ml-1 { margin-left: var(--vs-space-1); } .ml-2 { margin-left: var(--vs-space-2); } .ml-3 { margin-left: var(--vs-space-3); } .mr-1 { margin-right: var(--vs-space-1); } .mr-2 { margin-right: var(--vs-space-2); } .mr-3 { margin-right: var(--vs-space-3); }
.p-0 { padding: 0; } .p-2 { padding: var(--vs-space-2); } .p-3 { padding: var(--vs-space-3); } .p-4 { padding: var(--vs-space-4); } .p-5 { padding: var(--vs-space-5); } .p-6 { padding: var(--vs-space-6); } .p-8 { padding: var(--vs-space-8); } .p-10 { padding: var(--vs-space-10); }
.px-0 { padding-inline: 0; } .px-2 { padding-inline: var(--vs-space-2); } .px-3 { padding-inline: var(--vs-space-3); } .px-4 { padding-inline: var(--vs-space-4); } .px-6 { padding-inline: var(--vs-space-6); } .px-8 { padding-inline: var(--vs-space-8); }
.py-0 { padding-block: 0; } .py-1 { padding-block: var(--vs-space-1); } .py-2 { padding-block: var(--vs-space-2); } .py-3 { padding-block: var(--vs-space-3); } .py-4 { padding-block: var(--vs-space-4); } .py-6 { padding-block: var(--vs-space-6); } .py-8 { padding-block: var(--vs-space-8); } .py-10 { padding-block: var(--vs-space-10); } .py-12 { padding-block: var(--vs-space-12); } .py-16 { padding-block: var(--vs-space-16); }
.pt-0 { padding-top: 0; } .pt-4 { padding-top: var(--vs-space-4); } .pt-6 { padding-top: var(--vs-space-6); } .pt-8 { padding-top: var(--vs-space-8); }
.pb-0 { padding-bottom: 0; } .pb-4 { padding-bottom: var(--vs-space-4); } .pb-6 { padding-bottom: var(--vs-space-6); } .pb-8 { padding-bottom: var(--vs-space-8); }

/* Sizing */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }
.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 960px; }
.max-w-prose { max-width: 68ch; }
.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.object-cover { object-fit: cover; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }

/* Position & overflow */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; top: calc(var(--vs-header-h) + 16px); }
.inset-0 { inset: 0; }
.isolate { isolation: isolate; }
.z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-10 { z-index: 10; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Typography utilities */
.font-head { font-family: var(--vs-font-head); }
.font-body { font-family: var(--vs-font-body); }
.font-mono { font-family: var(--vs-font-mono); }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.text-xs { font-size: .75rem; line-height: 1.45; }
.text-sm { font-size: .875rem; line-height: 1.5; }
.text-base { font-size: 1rem; }
.text-md { font-size: 1.0625rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; line-height: 1.4; }
.text-2xl { font-size: 1.5rem; line-height: 1.3; }
.text-3xl { font-size: 1.875rem; line-height: 1.2; }
.text-4xl { font-size: clamp(2rem, 1.6rem + 1.5vw, 2.5rem); line-height: 1.15; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.tracking-wide { letter-spacing: .06em; }
.leading-tight { line-height: 1.2; }
.leading-snug { line-height: 1.4; }
.leading-relaxed { line-height: 1.75; }
.nowrap { white-space: nowrap; }
.break-words { overflow-wrap: anywhere; }
.pre-line { white-space: pre-line; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.underline { text-decoration: underline; text-underline-offset: 3px; }
.no-underline { text-decoration: none; }

/* Colours */
.text-navy { color: var(--vs-navy); }
.text-body { color: var(--vs-navy-2); }
.text-muted { color: var(--vs-muted); }
.text-subtle { color: var(--vs-subtle); }
.text-white { color: #fff; }
.text-primary { color: var(--vs-primary-700); }
.text-sage { color: var(--vs-sage-700); }
.text-yellow { color: var(--vs-yellow-700); }
.text-success { color: var(--vs-success-700); }
.text-danger { color: var(--vs-danger-700); }
.text-warning { color: var(--vs-warning-700); }
.text-info { color: var(--vs-info-700); }
.text-correct { color: var(--vs-success); }
.text-wrong { color: var(--vs-danger); }
.bg-white { background-color: #fff; }
.bg-cream { background-color: var(--vs-cream); }
.bg-cream-2 { background-color: var(--vs-cream-2); }
.bg-primary { background-color: var(--vs-primary); color: #fff; }
.bg-primary-soft { background-color: var(--vs-primary-50); }
.bg-sage { background-color: var(--vs-sage); }
.bg-sage-soft { background-color: var(--vs-sage-50); }
.bg-yellow { background-color: var(--vs-yellow); }
.bg-yellow-soft { background-color: var(--vs-yellow-50); }
.bg-navy { background-color: var(--vs-navy); color: #fff; }
.bg-success-soft { background-color: var(--vs-success-50); }
.bg-danger-soft { background-color: var(--vs-danger-50); }
.bg-warning-soft { background-color: var(--vs-warning-50); }
.bg-info-soft { background-color: var(--vs-info-50); }

/* Borders, radius, shadow */
.border { border: 1px solid var(--vs-line); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--vs-line); }
.border-b { border-bottom: 1px solid var(--vs-line); }
.border-dashed { border-style: dashed; }
.rounded-sm { border-radius: var(--vs-radius-sm); }
.rounded { border-radius: var(--vs-radius-md); }
.rounded-lg { border-radius: var(--vs-radius-lg); }
.rounded-xl { border-radius: var(--vs-radius-xl); }
.rounded-2xl { border-radius: var(--vs-radius-2xl); }
.rounded-full { border-radius: var(--vs-radius-pill); }
.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: var(--vs-shadow-xs); }
.shadow-sm { box-shadow: var(--vs-shadow-sm); }
.shadow { box-shadow: var(--vs-shadow-md); }
.shadow-lg { box-shadow: var(--vs-shadow-lg); }

/* Misc */
.divider { height: 1px; background: var(--vs-line); border: 0; margin: var(--vs-space-6) 0; }
.divider-dashed { height: 0; background: none; border-top: 1.5px dashed var(--vs-line); }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }
.allow-select { user-select: text; -webkit-user-select: text; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-spin { animation: vs-spin .9s linear infinite; }

/* ---- Responsive variants ---- */
@media (min-width: 640px) {
    .sm\:block { display: block; } .sm\:flex { display: flex; } .sm\:inline-flex { display: inline-flex; } .sm\:grid { display: grid; } .sm\:hidden { display: none; }
    .sm\:flex-row { flex-direction: row; } .sm\:items-center { align-items: center; } .sm\:justify-between { justify-content: space-between; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:text-left { text-align: left; } .sm\:w-auto { width: auto; }
}
@media (min-width: 768px) {
    .md\:block { display: block; } .md\:flex { display: flex; } .md\:inline-flex { display: inline-flex; } .md\:grid { display: grid; } .md\:hidden { display: none; }
    .md\:flex-row { flex-direction: row; } .md\:flex-col { flex-direction: column; } .md\:items-center { align-items: center; } .md\:items-start { align-items: flex-start; } .md\:justify-between { justify-content: space-between; } .md\:justify-end { justify-content: flex-end; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:text-left { text-align: left; } .md\:text-right { text-align: right; } .md\:w-auto { width: auto; }
    .md\:order-first { order: -1; } .md\:order-last { order: 999; }
    .md\:gap-8 { gap: var(--vs-space-8); } .md\:gap-12 { gap: var(--vs-space-12); }
}
@media (min-width: 1024px) {
    .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:inline-flex { display: inline-flex; } .lg\:grid { display: grid; } .lg\:hidden { display: none; }
    .lg\:flex-row { flex-direction: row; } .lg\:items-center { align-items: center; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:col-span-2 { grid-column: span 2 / span 2; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:text-left { text-align: left; } .lg\:order-first { order: -1; } .lg\:order-last { order: 999; }
    .lg\:gap-8 { gap: var(--vs-space-8); } .lg\:gap-12 { gap: var(--vs-space-12); } .lg\:gap-16 { gap: var(--vs-space-16); }
}
@media (max-width: 639.98px) {
    .max-sm\:hidden { display: none !important; }
    .max-sm\:w-full { width: 100%; }
    .max-sm\:btn-block { display: flex; width: 100%; }
}

/* ==========================================================================
   18. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .card-hover:hover, .package-card:hover { transform: none; }
}

/* ==========================================================================
   Mobile app experience — no sideways panning + app-style chrome on phones
   ========================================================================== */
/* Mobile Safari/Chrome let the page pan sideways when decorative blobs hang outside sections unless BOTH the root and
   the decorated sections clip horizontally. `clip` (unlike `hidden`) does not create a scroll container, so sticky
   headers keep working; older browsers fall back to `hidden`. */
html { overflow-x: hidden; max-width: 100%; }
body { max-width: 100%; overscroll-behavior-x: none; -webkit-tap-highlight-color: transparent; }
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}
.section, .section-sm, .section-lg, .has-deco, .wave-bg, .band, .ps-hero, .site-footer, .auth-shell {
    overflow-x: hidden;
}
@supports (overflow: clip) {
    .section, .section-sm, .section-lg, .has-deco, .wave-bg, .band, .ps-hero, .site-footer, .auth-shell { overflow-x: clip; }
}
img, svg, video, iframe, canvas { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
h1, h2, h3, .display { overflow-wrap: break-word; }

/* Public site bottom tab bar (shares .bottom-nav styling with the student portal) */
.has-public-bottom-nav .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
    .public-bottom-nav { display: none; }
    .has-public-bottom-nav .site-footer { padding-bottom: 0; }
}

@media (max-width: 767.98px) {
    /* Denser, app-like rhythm on phones */
    .section { padding-block: 44px; }
    .section-sm { padding-block: 28px; }
    .section-lg { padding-block: 56px; }
    .section-head { margin-bottom: 24px; }
    .container { padding-inline: 16px; }
    .card { border-radius: 22px; }
    .btn-lg { padding-block: 13px; }
    /* Decorations never push layout on small screens */
    .blob, .e-blob { max-width: 70vw; max-height: 70vw; }
    .dots-patch { display: none; }
    /* Comfortable tap targets */
    .btn, .nav-link, .bottom-nav-link { touch-action: manipulation; }
}

/* Small phones (≤420px): keep the header row inside the viewport */
@media (max-width: 419.98px) {
    .site-header-inner { gap: 8px; }
    .site-header-actions { gap: 6px; }
    .btn-header-cta { padding-inline: 14px; }
    .btn-header-cta .icon { display: none; }
}