/* ==========================================================================
   Zukti Tech — site stylesheet
   One file. The base section holds the shared components (cards, forms,
   catalog, course page); the design section that follows sets the
   site's look and comes last so it wins.
   ========================================================================== */

/* ==== Base: variables ==== */
/* ==========================================================================
   Design tokens
   Three-colour palette: the original Zukti logo blue (primary), orange (accent)
   and white (base). Dark surfaces use the logo's navy wordmark colour.
   Everything else is a tint of these or a neutral grey.
   ========================================================================== */

:root {
    /* Brand blue – the stops of the Zukti logo gradient */
    --color-primary: #0224f7;
    --color-primary-dark: #011bc4;
    --color-primary-light: #0999fc;
    --color-primary-soft: #eef1ff;
    --color-primary-softer: #f6f8ff;

    /* Orange accent */
    --color-secondary: #f7701e;
    --color-secondary-dark: #d95a0c;
    --color-secondary-soft: #fff1e7;

    --color-white: #ffffff;

    /* Logo gradient (blue to light blue). The text-safe version stays dark enough for white text. */
    --gradient-brand: linear-gradient(90deg, #0224f7 0%, #0999fc 100%);
    --gradient-brand-text-safe: linear-gradient(90deg, #011bc4 0%, #0224f7 100%);
    --gradient-accent: linear-gradient(90deg, #f7701e 0%, #ff9a3d 100%);

    /* Dark navy surface with a blue glow and a hint of orange */
    --surface-dark:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--color-primary) 38%, transparent), transparent 45%),
        radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--color-secondary) 18%, transparent), transparent 42%),
        radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--color-primary-light) 14%, transparent), transparent 50%),
        var(--color-ink);
    --color-on-dark: color-mix(in srgb, var(--color-white) 78%, transparent);
    --color-line-on-dark: color-mix(in srgb, var(--color-white) 14%, transparent);

    /* Neutrals (ink matches the logo wordmark) */
    --color-ink: #000034;
    --color-text: #3d4166;
    --color-muted: #6b6f8c;
    --color-grey-400: #a3a6bb;
    --color-grey-300: #d9dbe6;
    --color-border: #e6e8f0;
    --color-grey-100: #f5f6fa;
    --color-overlay: rgba(0, 0, 52, 0.55);

    /* Feedback */
    --color-success: #1d8a5b;
    --color-error: #c8372d;

    /* Typography */
    --font-heading: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* One type scale for the whole site – no other sizes are used in the stylesheets */
    --fs-display: 60px;   /* hero headline */
    --fs-h1: 44px;        /* page banner titles */
    --fs-h2: 54px;        /* section titles */
    --fs-number: 46px;    /* big figures (achievements, rating score) */
    --fs-h3: 28px;        /* prices, small figures, promo titles */
    --fs-h4: 22px;        /* card and sub-section headings */
    --fs-h5: 18px;        /* small card titles */
    --fs-lead: 18px;      /* intro paragraphs */
    --fs-body: 16px;      /* body text, buttons, navigation */
    --fs-sm: 14px;        /* secondary text */
    --fs-xs: 13px;        /* meta text, labels */
    --fs-2xs: 12px;       /* badges */

    --lh-display: 1.08;
    --lh-heading: 1.06;
    --lh-title: 1.36;
    --lh-body: 1.6;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --ls-heading: -0.02em;
    --ls-caps: 0.08em;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 30px;
    --space-8: 40px;
    --space-9: 50px;
    --space-10: 60px;
    --space-11: 80px;
    --space-section: 110px;

    /* Layout */
    --container: 1200px;
    --container-narrow: 860px;
    --gutter: 15px;
    --grid-gap: 30px;
    --header-height: 86px;
    --topbar-height: 40px;

    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-2xl: 30px;
    --radius-shape: 32px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 2px 10px rgba(0, 0, 52, 0.05);
    --shadow-md: 0 10px 30px rgba(0, 0, 52, 0.08);
    --shadow-lg: 0 20px 50px rgba(0, 0, 52, 0.12);
    --shadow-primary: 0 10px 24px rgba(2, 36, 247, 0.28);

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration: 0.3s;
    --duration-slow: 0.7s;

    /* Layers */
    --z-header: 100;
    --z-overlay: 200;
    --z-drawer: 210;
    --z-toast: 300;
}


/* ==== Base: global ==== */
/* ==========================================================================
   Reset, base typography, layout primitives, buttons and form controls
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--space-5));
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.is-locked {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-heading);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h4); }
h4 { font-size: var(--fs-h5); }

p {
    margin: 0 0 var(--space-5);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

a:hover {
    color: var(--color-primary);
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

figure,
blockquote {
    margin: 0;
}

del {
    text-decoration-thickness: 1px;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

::selection {
    color: var(--color-white);
    background: var(--color-primary);
}

/* Accessibility helpers ---------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    color: var(--color-white);
    background: var(--color-ink);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}

.skip-link:focus {
    color: var(--color-white);
    transform: none;
}

/* Icons -------------------------------------------------------------------- */

.icon {
    flex: none;
    width: 1.2em;
    height: 1.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--solid {
    fill: currentColor;
    stroke: none;
}

/* Layout ------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--wide {
    max-width: none;
    padding-inline: var(--space-7);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--space-section);
}

.section--flush-top {
    padding-top: 0;
}

.section--soft {
    background: var(--color-primary-soft);
}

.section--grey {
    background: var(--color-grey-100);
}

.section-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.section-row .section-head {
    margin-bottom: 0;
}

.section-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4) var(--space-7);
    margin-top: var(--space-9);
}

/* Section heading ---------------------------------------------------------- */

.section-head {
    margin-bottom: var(--space-9);
}

.section-head--center {
    text-align: center;
}

.section-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--color-ink);
}

.section-sub {
    margin: var(--space-3) 0 0;
    color: var(--color-text);
}

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

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: 5px var(--space-5) 5px 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.pill__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--color-secondary);
    background: var(--color-secondary-soft);
    border-radius: 50%;
}

.pill__icon .icon {
    width: 14px;
    height: 14px;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    font-weight: var(--fw-medium);
    color: var(--color-ink);
}

.link-arrow .icon {
    transition: transform var(--duration) var(--ease);
}

.link-arrow:hover .icon {
    transform: translate(2px, -2px);
}

/* Buttons ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 54px;
    padding: 0 35px;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease),
        border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.btn .icon {
    width: 18px;
    height: 18px;
    transition: transform var(--duration) var(--ease);
}

.btn:hover .icon {
    transform: translate(2px, -2px);
}

.btn--primary {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-primary);
}

.btn--secondary {
    color: var(--color-white);
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn--secondary:hover {
    color: var(--color-white);
    background: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
}

.btn--outline {
    color: var(--color-ink);
    background: var(--color-white);
    border-color: var(--color-grey-300);
}

.btn--outline:hover {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--sm {
    min-height: 42px;
    padding: 0 var(--space-5);
    font-size: var(--fs-body);
    border-radius: var(--radius-sm);
}

.btn--block {
    width: 100%;
}

/* Pill shape with the arrow in its own circle */

.btn {
    border-radius: var(--radius-pill);
}

.btn:has(> .icon:last-child) {
    padding-right: 10px;
    padding-left: var(--space-7);
}

.btn > .icon:last-child {
    width: 34px;
    height: 34px;
    padding: 9px;
    color: var(--color-ink);
    background: var(--color-white);
    border-radius: 50%;
}

.btn--outline > .icon:last-child {
    color: var(--color-white);
    background: var(--color-ink);
}

.btn--outline:hover > .icon:last-child {
    color: var(--color-ink);
    background: var(--color-white);
}

.btn--sm {
    min-height: 44px;
    border-radius: var(--radius-pill);
}

.btn--sm:has(> .icon:last-child) {
    padding-right: 7px;
    padding-left: var(--space-5);
}

.btn--sm > .icon:last-child {
    width: 30px;
    height: 30px;
    padding: 7px;
}

.btn--ghost {
    color: var(--color-white);
    background: transparent;
    border-color: var(--color-line-on-dark);
}

.btn--ghost:hover {
    color: var(--color-ink);
    background: var(--color-white);
    border-color: var(--color-white);
}

/* Forms -------------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.field__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    color: var(--color-ink);
}

.input,
.textarea,
.select {
    width: 100%;
    min-height: 54px;
    padding: 0 var(--space-5);
    line-height: 1.5;
    color: var(--color-ink);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
    appearance: none;
}

.textarea {
    min-height: 160px;
    padding-block: var(--space-4);
    resize: vertical;
}

.select {
    padding-right: var(--space-8);
    background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
    background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--color-grey-400);
}

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.field.is-invalid .input,
.field.is-invalid .textarea {
    border-color: var(--color-error);
}

.field__error {
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--color-error);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-5);
}

.check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    line-height: 1.5;
    cursor: pointer;
}

.check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    background: var(--color-white);
    border: 1px solid var(--color-grey-300);
    border-radius: var(--radius-xs);
    cursor: pointer;
    appearance: none;
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.check input[type="radio"] {
    border-radius: 50%;
}

.check input:checked {
    background: var(--color-primary) url("../images/icon-check.svg") center / 12px no-repeat;
    border-color: var(--color-primary);
}

.check__count {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--color-muted);
}

/* Decorative shapes (colour comes from the tokens via CSS masks) ----------- */

.deco {
    position: absolute;
    display: block;
    background: var(--color-secondary);
    -webkit-mask: var(--deco-mask) center / contain no-repeat;
    mask: var(--deco-mask) center / contain no-repeat;
    pointer-events: none;
}

.deco--dots { --deco-mask: url("../images/icon-dots.svg"); }
.deco--hatch { --deco-mask: url("../images/icon-hatch.svg"); }
.deco--squiggle { --deco-mask: url("../images/icon-squiggle.svg"); }
.deco--ring { --deco-mask: url("../images/icon-ring.svg"); }

/* Motion ------------------------------------------------------------------- */

.reveal-init {
    opacity: 0;
    transform: translateY(30px);
}

.reveal-init.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes spin-slow {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal-init {
        opacity: 1;
        transform: none;
    }
}


/* ==== Base: components ==== */
/* ==========================================================================
   Reusable components: cards, tabs, accordion, carousel, banner, ratings
   ========================================================================== */

/* Ratings ------------------------------------------------------------------ */

.stars {
    display: inline-flex;
    gap: 2px;
    color: var(--color-secondary);
}

.stars .icon {
    width: 14px;
    height: 14px;
}

.stars .is-off {
    color: var(--color-grey-300);
}

.stars .is-half {
    opacity: 0.55;
}

/* Course card -------------------------------------------------------------- */

.course-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.course-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.course-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.course-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.course-card.is-entering {
    animation: fade-up 0.5s var(--ease) both;
}

.course-card__media {
    position: relative;
    display: block;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    background: var(--color-grey-100);
}

.course-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

.course-card:hover .course-card__media img {
    transform: scale(1.05);
}

.course-card__badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    padding: 3px var(--space-3);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--color-white);
    border-radius: var(--radius-pill);
}

.course-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-5);
}

.course-card__cat {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--color-muted);
}

.course-card__title {
    margin-bottom: var(--space-4);
    font-size: var(--fs-h5);
    line-height: var(--lh-title);
}

.course-card__excerpt {
    display: none;
    color: var(--color-muted);
}

.course-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.course-card__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: var(--color-ink);
}

.course-card__rating .icon {
    width: 14px;
    height: 14px;
    color: var(--color-secondary);
}

.course-card__rating small {
    font-size: inherit;
    font-weight: var(--fw-regular);
    color: var(--color-muted);
}

.course-card__price {
    margin: 0;
    line-height: 1.4;
}

.course-card__price strong {
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    color: var(--color-ink);
}

.course-card__price.is-free strong {
    color: var(--color-success);
}

/* List layout (courses page view toggle) */

.course-grid.is-list {
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.course-grid.is-list .course-card {
    flex-direction: row;
    align-items: stretch;
}

.course-grid.is-list .course-card:hover {
    transform: none;
}

.course-grid.is-list .course-card__media {
    flex: none;
    width: 260px;
    aspect-ratio: auto;
}

.course-grid.is-list .course-card__body {
    justify-content: center;
}

.course-grid.is-list .course-card__excerpt {
    display: block;
    margin-bottom: var(--space-3);
}

.course-grid.is-list .course-card__foot {
    margin-top: 0;
}

/* Instructor card ---------------------------------------------------------- */

.instructor-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8) var(--grid-gap);
}

.instructor-card__media {
    position: relative;
    margin-bottom: var(--space-4);
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-grey-100);
    border-radius: var(--radius-md);
}

.instructor-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--duration-slow) var(--ease);
}

.instructor-card:hover .instructor-card__media img {
    transform: scale(1.05);
}

.instructor-card__social {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    display: flex;
    gap: var(--space-2);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.instructor-card:hover .instructor-card__social,
.instructor-card:focus-within .instructor-card__social {
    opacity: 1;
    transform: none;
}

.instructor-card__social a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--color-ink);
    background: var(--color-white);
    border-radius: 50%;
}

.instructor-card__social a:hover {
    color: var(--color-white);
    background: var(--color-primary);
}

.instructor-card__social .icon {
    width: 13px;
    height: 13px;
}

.instructor-card__meta {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
    font-size: var(--fs-xs);
    line-height: 1.8;
    color: var(--color-muted);
}

.instructor-card__meta li + li {
    margin-left: var(--space-3);
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-grey-300);
}

.instructor-card__meta .icon {
    width: 15px;
    height: 15px;
}

.instructor-card__name {
    font-size: var(--fs-body);
    line-height: 1.6;
}

.instructor-card__role {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--color-muted);
}

.instructor-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-1) 0 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: var(--color-ink);
}

.instructor-card__rating .icon {
    width: 13px;
    height: 13px;
    color: var(--color-secondary);
}

/* Blog card ---------------------------------------------------------------- */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-9) var(--grid-gap);
}

.blog-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.blog-card__media {
    display: block;
    margin-bottom: var(--space-4);
    aspect-ratio: 495 / 390;
    overflow: hidden;
    background: var(--color-grey-100);
    border-radius: var(--radius-md);
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

.blog-card:hover .blog-card__media img {
    transform: scale(1.06);
}

.blog-card__cat {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-xs);
    line-height: 1.8;
    color: var(--color-muted);
}

.blog-card__title {
    margin-bottom: var(--space-3);
    font-size: var(--fs-h5);
    line-height: var(--lh-title);
}

.blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--color-muted);
}

.blog-card__meta li + li {
    margin-left: var(--space-3);
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-grey-300);
}

.blog-card__meta .icon {
    width: 15px;
    height: 15px;
}

/* Testimonial card (grid variant) ------------------------------------------ */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    padding: var(--space-7);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.testimonial-card__mark {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 40px;
    height: 40px;
    color: var(--color-primary-soft);
}

.testimonial-card blockquote {
    flex: 1;
    color: var(--color-ink);
}

.testimonial-card figcaption {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-muted);
}

.testimonial-card figcaption img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-card figcaption strong {
    display: block;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-ink);
}

/* Feature (icon + title + text) -------------------------------------------- */

.feature {
    text-align: center;
}

.feature__icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin-bottom: var(--space-6);
    color: var(--color-ink);
}

.feature__icon::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46px;
    height: 46px;
    background: var(--color-secondary-soft);
    border-radius: 50%;
    transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.feature:hover .feature__icon::before {
    background: var(--color-primary-soft);
    transform: scale(1.25);
}

.feature__icon .icon {
    position: relative;
    width: 44px;
    height: 44px;
    stroke-width: 1.1;
}

.feature__title {
    margin-bottom: var(--space-2);
    font-size: var(--fs-h4);
}

.feature__text {
    max-width: 330px;
    margin-inline: auto;
}

/* Tabs --------------------------------------------------------------------- */

.tabs__nav {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-9);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs__nav::-webkit-scrollbar {
    display: none;
}

.tabs__btn {
    position: relative;
    flex: none;
    padding: 11px var(--space-5);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    color: var(--color-ink);
    white-space: nowrap;
    transition: color var(--duration) var(--ease);
}

.tabs__btn::after {
    content: "";
    position: absolute;
    right: var(--space-5);
    bottom: -1px;
    left: var(--space-5);
    height: 2px;
    background: var(--color-secondary);
    transform: scaleX(0);
    transition: transform var(--duration) var(--ease);
}

.tabs__btn:hover,
.tabs__btn.is-active {
    color: var(--color-secondary);
}

.tabs__btn.is-active::after {
    transform: scaleX(1);
}

.tabs--left .tabs__nav {
    justify-content: flex-start;
}

.tabs--left .tabs__btn:first-child {
    padding-left: 0;
}

.tabs--left .tabs__btn:first-child::after {
    left: 0;
}

.tab-panel.is-entering {
    animation: fade-up 0.4s var(--ease) both;
}

/* Accordion ---------------------------------------------------------------- */

.faq-box {
    max-width: 800px;
    margin-inline: auto;
    padding: var(--space-5) var(--space-10) var(--space-6);
    background: var(--color-grey-100);
    border-radius: var(--radius-xl);
}

.accordion__item + .accordion__item {
    border-top: 1px solid var(--color-border);
}

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    width: 100%;
    padding: 26px 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: 1.5;
    color: var(--color-ink);
    text-align: left;
}

.accordion__trigger span {
    position: relative;
    padding-left: var(--space-4);
}

.accordion__trigger span::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 3px;
    background: var(--color-ink);
    border-radius: var(--radius-pill);
    transition: background-color var(--duration) var(--ease);
}

.accordion__item.is-open .accordion__trigger span::before {
    background: var(--color-secondary);
}

.accordion__trigger .icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
    transition: transform var(--duration) var(--ease);
}

.accordion__item.is-open .accordion__trigger .icon {
    transform: rotate(180deg);
}

.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration) var(--ease);
}

.accordion__item.is-open .accordion__panel {
    grid-template-rows: 1fr;
}

.accordion__content {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility var(--duration);
}

.accordion__item.is-open .accordion__content {
    visibility: visible;
}

.accordion__content > * {
    padding-bottom: 26px;
}

/* Carousel ----------------------------------------------------------------- */

.carousel {
    position: relative;
}

.carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--grid-gap) * 3) / 4);
    gap: var(--grid-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.carousel__track::-webkit-scrollbar {
    display: none;
}

.carousel__track > * {
    scroll-snap-align: start;
}

.carousel__track--5 {
    grid-auto-columns: calc((100% - var(--grid-gap) * 4) / 5);
}

.carousel__nav {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.carousel__btn {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--color-ink);
    background: var(--color-white);
    border: 1px solid var(--color-grey-300);
    border-radius: 50%;
    transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), opacity var(--duration);
}

.carousel__btn:hover:not(:disabled) {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.carousel__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.carousel__btn .icon {
    width: 18px;
    height: 18px;
}

/* Small pieces ------------------------------------------------------------- */

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--space-4);
    font-size: var(--fs-xs);
    line-height: 1.8;
    color: var(--color-ink);
    background: var(--color-grey-100);
    border-radius: var(--radius-pill);
    transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

a.tag:hover {
    color: var(--color-white);
    background: var(--color-primary);
}

.check-list {
    display: grid;
    gap: var(--space-2);
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-ink);
}

.check-list .icon {
    width: 18px;
    height: 18px;
    margin-top: 5px;
    color: var(--color-secondary);
}

.empty-state {
    padding: var(--space-11) var(--space-5);
    text-align: center;
    background: var(--color-grey-100);
    border-radius: var(--radius-lg);
}

.empty-state .icon {
    width: 44px;
    height: 44px;
    margin: 0 auto var(--space-4);
    color: var(--color-grey-400);
}

.empty-state h3 {
    margin-bottom: var(--space-2);
}

.empty-state .btn {
    margin-top: var(--space-5);
}

/* Call-to-action band ------------------------------------------------------ */

/* Buttons that sit on the brand gradient stay white so they never blend in */
.widget--promo .btn {
    color: var(--color-ink);
    background: var(--color-white);
    border-color: var(--color-white);
}

.widget--promo .btn:hover {
    color: var(--color-white);
    background: var(--color-ink);
    border-color: var(--color-ink);
}

/* Tinted testimonial cards --------------------------------------------------- */

.testimonial-card {
    padding: var(--space-8) var(--space-7) var(--space-7);
    background: var(--color-secondary-soft);
    border: 0;
    border-bottom: 3px solid var(--color-ink);
    border-radius: var(--radius-xl);
}

.testimonial-grid > :nth-child(3n + 2) .testimonial-card {
    background: var(--color-primary-soft);
}

.testimonial-grid > :nth-child(3n) .testimonial-card {
    background: color-mix(in srgb, var(--color-primary-light) 22%, var(--color-white));
}

.testimonial-card__mark {
    position: static;
    width: 30px;
    height: 30px;
    color: color-mix(in srgb, var(--color-ink) 22%, transparent);
}

.testimonial-card blockquote {
    font-size: var(--fs-body);
    line-height: 1.75;
}

.testimonial-card figcaption {
    padding-top: var(--space-4);
    color: var(--color-text);
    border-top: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
}

.testimonial-card figcaption img {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
}

/* Shared look across all pages ------------------------------------------------ */

/* Pill tabs */
.tabs__nav {
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 0;
}

.tabs__btn {
    padding: 7px var(--space-5);
    font-size: var(--fs-body);
    line-height: 1.7;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.tabs__btn::after {
    content: none;
}

.tabs__btn:hover {
    color: var(--color-ink);
    border-color: var(--color-ink);
}

.tabs__btn.is-active {
    color: var(--color-white);
    background: var(--color-ink);
    border-color: var(--color-ink);
}

.tabs--left .tabs__btn:first-child {
    padding-left: var(--space-5);
}

/* Accordion: tinted open row with a round chevron (curriculum keeps its boxed style) */
.accordion:not(.accordion--boxed) .accordion__item,
.accordion:not(.accordion--boxed) .accordion__item + .accordion__item {
    padding-inline: var(--space-4);
    border-top: 0;
    border-bottom: 1px solid var(--color-grey-300);
    border-radius: var(--radius-md);
    transition: background-color var(--duration) var(--ease);
}

.accordion:not(.accordion--boxed) .accordion__item.is-open {
    background: var(--color-white);
}

.accordion:not(.accordion--boxed) .accordion__trigger {
    padding-block: 18px;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}

.accordion:not(.accordion--boxed) .accordion__trigger span {
    padding-left: 0;
}

.accordion:not(.accordion--boxed) .accordion__trigger span::before {
    content: none;
}

.accordion:not(.accordion--boxed) .accordion__trigger .icon {
    width: 30px;
    height: 30px;
    padding: 8px;
    background: var(--color-primary-soft);
    border-radius: 50%;
}

.accordion:not(.accordion--boxed) .accordion__content > * {
    padding-bottom: 18px;
}

.faq-box {
    padding: var(--space-5);
}

/* Cards share one signature: soft radius and an ink base line */
.category-card,
.contact-card,
.feature--card,
.partner-group,
.widget:not(.widget--promo),
.profile-card,
.filter-panel {
    border-radius: var(--radius-xl);
}

.category-card,
.contact-card,
.feature--card,
.partner-group {
    border: 1px solid var(--color-border);
    border-bottom: 3px solid var(--color-ink);
}

.category-card:hover,
.contact-card:hover,
.partner-group:hover {
    border-color: var(--color-border);
    border-bottom-color: var(--color-ink);
}

.empty-state,
.author-box--soft,
.rating-summary,
.contact-aside__note,
.pullquote {
    border-radius: var(--radius-xl);
}

/* ==== Base: pages ==== */
/* ==========================================================================
   Inner pages: about, catalogue, course detail, categories, instructors,
   blog, contact, FAQ, authentication and 404
   ========================================================================== */

/* Long-form text ----------------------------------------------------------- */

.prose h2 {
    margin: var(--space-8) 0 var(--space-4);
    font-size: var(--fs-h4);
}

.prose > h2:first-child {
    margin-top: 0;
}

.prose__lead {
    font-size: var(--fs-lead);
    line-height: 1.8;
    color: var(--color-ink);
}

.bullet-list {
    display: grid;
    gap: var(--space-1);
    padding-left: var(--space-5);
    list-style: disc;
}

.bullet-list li::marker {
    color: var(--color-secondary);
}

.check-list--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-7);
}

.pullquote {
    position: relative;
    margin: var(--space-7) 0;
    padding: var(--space-7) var(--space-7) var(--space-7) 84px;
    background: var(--color-primary-soft);
    border-radius: var(--radius-lg);
}

.pullquote .icon {
    position: absolute;
    top: var(--space-7);
    left: var(--space-7);
    width: 36px;
    height: 36px;
    color: var(--color-secondary);
}

.pullquote p {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: 1.6;
    color: var(--color-ink);
}

/* About -------------------------------------------------------------------- */

.story__content .check-list {
    margin-bottom: var(--space-6);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.feature--card {
    padding: var(--space-8) var(--space-6);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.feature--card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-6px);
}

/* Course catalogue --------------------------------------------------------- */

.catalog__inner {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    align-items: start;
    gap: var(--grid-gap);
}

.catalog__filter-toggle {
    display: none;
    min-height: 48px;
}

.filter-panel {
    padding: var(--space-7);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.filter-search {
    position: relative;
    color: var(--color-ink);
}

.filter-search .icon {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
}

.filter-search input {
    width: 100%;
    height: 50px;
    padding: 0 var(--space-4) 0 44px;
    font-size: var(--fs-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    appearance: none;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.filter-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.filter-group {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-7) 0 0;
    padding: var(--space-7) 0 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

.filter-group__title {
    float: left;
    width: 100%;
    margin-bottom: var(--space-2);
    padding: 0;
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    line-height: var(--lh-title);
    color: var(--color-ink);
}

.filter-group .check {
    display: flex;
    font-size: var(--fs-sm);
    color: var(--color-ink);
}

.filter-clear {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-7);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-xs);
    line-height: 1.8;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-xs);
    transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.filter-clear:hover {
    color: var(--color-white);
    background: var(--color-secondary);
}

.filter-clear .icon {
    width: 13px;
    height: 13px;
}

.catalog__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.catalog__count {
    margin: 0;
    color: var(--color-ink);
}

.catalog__tools {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.catalog__sort {
    width: auto;
    min-height: 44px;
    padding-left: var(--space-4);
    font-size: var(--fs-sm);
}

.view-toggle {
    display: flex;
    gap: var(--space-1);
}

.view-toggle__btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.view-toggle__btn:hover,
.view-toggle__btn.is-active {
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-color: var(--color-primary-soft);
}

.view-toggle__btn .icon {
    width: 18px;
    height: 18px;
}

.course-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Course detail ------------------------------------------------------------ */

.course-hero {
    position: relative;
    padding-block: var(--space-10);
    background: var(--color-primary-soft);
    overflow: hidden;
}

.course-hero__inner {
    position: relative;
}

.course-hero__inner > * {
    max-width: calc(100% - 460px);
}

.breadcrumb--left {
    margin: 0 0 var(--space-4);
}

.breadcrumb--left ol {
    justify-content: flex-start;
}

.course-hero__badge {
    display: inline-block;
    margin-bottom: var(--space-3);
    padding: 3px var(--space-3);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: var(--color-white);
    background: var(--color-secondary);
    border-radius: var(--radius-xs);
}

.course-hero__title {
    margin-bottom: var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

.course-hero__lead {
    font-size: var(--fs-body);
    color: var(--color-text);
}

.course-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-7);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--color-ink);
}

.course-hero__meta li,
.course-hero__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.course-hero__author {
    font-weight: var(--fw-medium);
}

.course-hero__author img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.course-hero__meta .icon {
    width: 16px;
    height: 16px;
}

.course-detail__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: start;
    gap: var(--space-10);
}

.course-detail .tabs__nav {
    margin-bottom: var(--space-8);
}

.course-detail__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    margin-top: -220px;
}

.enroll-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.enroll-card__media {
    position: relative;
    aspect-ratio: 10 / 6.4;
}

.enroll-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.enroll-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: var(--color-primary);
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
}

.enroll-card__play .icon {
    width: 22px;
    height: 22px;
    margin-left: 3px;
    fill: currentColor;
    stroke: none;
}

.enroll-card__body {
    padding: var(--space-7);
}

.enroll-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    line-height: 1.2;
}

.enroll-card__price strong {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--color-ink);
}

.enroll-card__price.is-free strong {
    color: var(--color-success);
}

.enroll-card__price del {
    color: var(--color-grey-400);
}

.enroll-card__off {
    margin-left: auto;
    padding: 2px var(--space-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.8;
    color: var(--color-secondary-dark);
    background: var(--color-secondary-soft);
    border-radius: var(--radius-xs);
}

.enroll-card__wish {
    margin-top: var(--space-3);
}

.enroll-card__wish[aria-pressed="true"] {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    background: var(--color-white);
}

.enroll-card__wish[aria-pressed="true"] .icon {
    fill: currentColor;
}

.enroll-card__note {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-xs);
    text-align: center;
    color: var(--color-muted);
}

.enroll-card__title {
    margin: var(--space-6) 0 var(--space-3);
    padding-top: var(--space-6);
    font-size: var(--fs-h5);
    border-top: 1px solid var(--color-border);
}

.enroll-card__list {
    display: grid;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    color: var(--color-ink);
}

.enroll-card__list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.enroll-card__list .icon {
    width: 17px;
    height: 17px;
    color: var(--color-primary);
}

.enroll-card__share {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-weight: var(--fw-medium);
    color: var(--color-ink);
}

.enroll-card .enroll-card__share {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

/* Curriculum */

.curriculum__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    margin-bottom: var(--space-5);
}

.curriculum__head h2 {
    font-size: var(--fs-h4);
}

.curriculum__head p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

.accordion--boxed {
    display: grid;
    gap: var(--space-3);
}

.accordion--boxed .accordion__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.accordion--boxed .accordion__trigger {
    padding: var(--space-4) var(--space-5);
    font-weight: var(--fw-medium);
    background: var(--color-grey-100);
}

.accordion--boxed .accordion__trigger span {
    flex: 1;
    padding-left: 0;
}

.accordion--boxed .accordion__trigger span::before {
    content: none;
}

.accordion--boxed .accordion__trigger small {
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: var(--color-muted);
}

.accordion--boxed .accordion__content > * {
    padding-bottom: 0;
}

.lesson-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--color-ink);
    border-top: 1px solid var(--color-border);
}

.lesson-list .icon {
    width: 17px;
    height: 17px;
    color: var(--color-muted);
}

.lesson-list li:has(em) .icon {
    color: var(--color-primary);
}

.lesson-list span {
    flex: 1;
}

.lesson-list em {
    padding: 0 var(--space-2);
    font-size: var(--fs-2xs);
    font-style: normal;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: var(--radius-xs);
}

.lesson-list time {
    font-size: var(--fs-xs);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* Author box (course instructor tab, blog author) */

.author-box {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-7);
}

.author-box--soft {
    margin-top: var(--space-8);
    padding: var(--space-7);
    background: var(--color-grey-100);
    border-radius: var(--radius-lg);
    grid-template-columns: 120px minmax(0, 1fr);
}

.author-box__photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--radius-md);
}

.author-box__label {
    margin: 0;
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-muted);
}

.author-box__name {
    font-size: var(--fs-h4);
}

.author-box__role {
    margin-bottom: var(--space-3);
    color: var(--color-secondary);
}

.author-box__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin-bottom: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-ink);
}

.author-box__stats li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.author-box__stats .icon {
    width: 16px;
    height: 16px;
    color: var(--color-secondary);
}

/* Reviews */

.rating-summary {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    padding: var(--space-7);
    background: var(--color-grey-100);
    border-radius: var(--radius-lg);
}

.rating-summary__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

.rating-summary__score strong {
    font-family: var(--font-heading);
    font-size: var(--fs-number);
    line-height: 1;
    color: var(--color-ink);
    font-variant-numeric: lining-nums;
}

.rating-summary__bars {
    display: grid;
    gap: var(--space-2);
}

.rating-summary__bars li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 40px;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--color-ink);
}

.rating-summary__bars span:first-child {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.rating-summary__bars .icon {
    width: 12px;
    height: 12px;
    color: var(--color-secondary);
}

.rating-summary__bars progress {
    width: 100%;
    height: 8px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-grey-300);
    overflow: hidden;
    appearance: none;
}

.rating-summary__bars progress::-webkit-progress-bar {
    background: var(--color-grey-300);
}

.rating-summary__bars progress::-webkit-progress-value {
    background: var(--color-secondary);
    border-radius: var(--radius-pill);
}

.rating-summary__bars progress::-moz-progress-bar {
    background: var(--color-secondary);
    border-radius: var(--radius-pill);
}

.review {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--space-5);
    padding-block: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.review img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
}

.review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    margin-bottom: var(--space-2);
    line-height: 1.6;
}

.review__head strong {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-ink);
}

.review__head time {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--color-muted);
}

/* Categories --------------------------------------------------------------- */

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.category-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-7);
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.category-card:hover {
    color: var(--color-text);
    border-color: transparent;
    box-shadow: var(--shadow-md);
    transform: translateY(-6px);
}

.category-card__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: var(--space-5);
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: var(--radius-lg);
    transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.category-card:hover .category-card__icon {
    color: var(--color-white);
    background: var(--color-primary);
}

.category-card__icon .icon {
    width: 28px;
    height: 28px;
}

.category-card__title {
    margin-bottom: var(--space-2);
    font-size: var(--fs-h4);
}

.category-card__text {
    flex: 1;
    line-height: 1.75;
    color: var(--color-muted);
}

.category-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-ink);
    border-top: 1px solid var(--color-border);
}

.category-card__foot .icon {
    color: var(--color-secondary);
    transition: transform var(--duration) var(--ease);
}

.category-card:hover .category-card__foot .icon {
    transform: translate(2px, -2px);
}

/* Instructor profile ------------------------------------------------------- */

.profile__inner {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-10);
}

.profile-card {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    padding: var(--space-6);
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.profile-card__photo {
    width: 100%;
    margin-bottom: var(--space-5);
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--radius-md);
}

.profile-card__name {
    font-size: var(--fs-h4);
}

.profile-card__role {
    margin-bottom: var(--space-2);
    color: var(--color-secondary);
}

.profile-card__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

.profile-card__rating strong {
    color: var(--color-ink);
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.profile-stats li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
    font-size: var(--fs-sm);
    line-height: 1.5;
    background: var(--color-grey-100);
    border-radius: var(--radius-lg);
}

.profile-stats__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-2);
    color: var(--color-primary);
    background: var(--color-white);
    border-radius: var(--radius-md);
}

.profile-stats strong {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    line-height: 1.2;
    color: var(--color-ink);
    font-variant-numeric: lining-nums;
}

.profile__main .course-grid {
    margin-top: var(--space-2);
}

/* Blog --------------------------------------------------------------------- */

.featured-post {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-10);
    margin-bottom: var(--space-section);
}

.featured-post__media {
    display: block;
    aspect-ratio: 16 / 10.5;
    overflow: hidden;
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-shape) var(--radius-xl);
}

.featured-post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

.featured-post:hover .featured-post__media img {
    transform: scale(1.04);
}

.featured-post__title {
    margin-bottom: var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

.featured-post .blog-card__meta {
    margin-bottom: var(--space-7);
}

.article-page__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
    gap: var(--space-10);
}

.article__meta {
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
}

.article__image {
    width: 100%;
    margin-bottom: var(--space-7);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.article__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-block: var(--space-5);
    border-block: 1px solid var(--color-border);
}

.post-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-7);
}

.post-nav__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
    line-height: 1.5;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.post-nav__link:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.post-nav__link span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--color-muted);
}

.post-nav__link strong {
    font-weight: var(--fw-medium);
    color: var(--color-ink);
}

.post-nav__link--next {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
}

.comment-form {
    margin-top: var(--space-9);
}

.comment-form h2 {
    margin-bottom: var(--space-2);
    font-size: var(--fs-h4);
}

.comment-form > p {
    margin-bottom: var(--space-6);
    color: var(--color-muted);
}

/* Sidebar widgets */

.sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    display: grid;
    gap: var(--grid-gap);
}

.widget {
    position: relative;
    padding: var(--space-7);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.widget__title {
    margin-bottom: var(--space-5);
    font-size: var(--fs-h5);
}

.mini-posts {
    display: grid;
    gap: var(--space-5);
}

.mini-post {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
}

.mini-post img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.mini-post strong {
    display: block;
    font-weight: var(--fw-medium);
    line-height: 1.5;
    color: var(--color-ink);
    transition: color var(--duration) var(--ease);
}

.mini-post:hover strong {
    color: var(--color-primary);
}

.mini-post time {
    font-size: var(--fs-xs);
    color: var(--color-muted);
}

.widget__list li {
    display: flex;
    justify-content: space-between;
    padding-block: var(--space-2);
    color: var(--color-ink);
}

.widget__list li + li {
    border-top: 1px solid var(--color-border);
}

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

.widget--promo {
    color: var(--color-white);
    background: var(--gradient-brand-text-safe);
    border-color: var(--color-primary);
}

.widget--promo > * {
    position: relative;
}

.widget--promo .widget__title {
    margin-bottom: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--color-white);
}

.widget--promo .deco {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 130px;
    height: 130px;
    background: var(--color-white);
    opacity: 0.14;
}

/* Contact ------------------------------------------------------------------ */

.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin-bottom: var(--space-section);
}

.contact-card {
    padding: var(--space-8) var(--space-7);
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.contact-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-md);
    transform: translateY(-6px);
}

.contact-card__icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-5);
    color: var(--color-secondary);
    background: var(--color-secondary-soft);
    border-radius: 50%;
}

.contact-card__icon .icon {
    width: 26px;
    height: 26px;
}

.contact-card__title {
    margin-bottom: var(--space-1);
    font-size: var(--fs-h4);
}

.contact-card p {
    margin-bottom: var(--space-2);
    color: var(--color-muted);
}

.contact-card__value {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-ink);
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-11);
}

.contact-form .section-title {
    margin-bottom: var(--space-3);
}

.contact-form form {
    margin-top: var(--space-7);
}

.contact-aside__map {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-shape) var(--radius-xl) var(--radius-xl) var(--radius-xl);
}

.contact-aside__map img {
    width: 100%;
    aspect-ratio: 621 / 420;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

.contact-aside__map:hover img {
    transform: scale(1.04);
}

.contact-aside__map span {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--radius-sm);
}

.contact-aside__frame {
    aspect-ratio: 10 / 9;
    overflow: hidden;
    border-radius: var(--radius-shape) var(--radius-xl) var(--radius-xl) var(--radius-xl);
}

.contact-aside__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-aside__note {
    margin-top: var(--space-6);
    padding: var(--space-7);
    background: var(--color-primary-soft);
    border-radius: var(--radius-lg);
}

.contact-aside__note h3 {
    margin-bottom: var(--space-1);
}

.contact-aside__note p {
    margin-bottom: var(--space-3);
}

/* FAQ page ----------------------------------------------------------------- */

.faq-tabs .tabs__nav {
    max-width: 800px;
    margin-inline: auto;
    margin-bottom: var(--space-8);
}

/* Authentication ----------------------------------------------------------- */

.auth-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    max-width: 1080px;
    margin-inline: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.auth-card__visual {
    position: relative;
    min-height: 100%;
    background: var(--color-ink);
}

.auth-card__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
}

.auth-card__caption {
    position: absolute;
    right: var(--space-7);
    bottom: var(--space-7);
    left: var(--space-7);
    padding: var(--space-6);
    color: var(--color-ink);
    background: var(--color-white);
    border-radius: var(--radius-lg);
}

.auth-card__caption > .icon {
    width: 28px;
    height: 28px;
    margin-bottom: var(--space-2);
    color: var(--color-secondary);
}

.auth-card__caption p {
    margin-bottom: var(--space-2);
    font-weight: var(--fw-medium);
    line-height: 1.7;
}

.auth-card__caption span {
    font-size: var(--fs-xs);
    color: var(--color-muted);
}

.auth-card__form {
    padding: var(--space-10);
}

.auth-card__form .section-title {
    margin-bottom: var(--space-2);
}

.auth-card__form form {
    margin-top: var(--space-7);
}

.auth-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.auth-card__link {
    font-weight: var(--fw-medium);
    color: var(--color-primary);
}

.auth-card__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-card__switch {
    margin-top: var(--space-6);
    text-align: center;
}

.password-field {
    position: relative;
}

.password-field .input {
    padding-right: 54px;
}

.password-field button {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: var(--color-muted);
}

.password-field button[aria-pressed="true"] {
    color: var(--color-primary);
}

.role-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-7);
    margin: 0 0 var(--space-5);
    padding: 0;
    border: 0;
}

.role-picker legend {
    float: left;
    width: 100%;
    margin-bottom: var(--space-2);
    padding: 0;
}

/* 404 ---------------------------------------------------------------------- */

.not-found {
    text-align: center;
}

.not-found .container {
    position: relative;
}

.not-found__dots {
    top: -20px;
    left: 50%;
    width: 220px;
    height: 220px;
    margin-left: -110px;
    opacity: 0.25;
}

.not-found__code {
    position: relative;
    margin: 0;
    font-family: var(--font-heading);
    font-size: calc(var(--fs-display) * 2);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: var(--color-primary);
    font-variant-numeric: lining-nums;
}

.not-found .section-title {
    margin-bottom: var(--space-3);
}

.not-found__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-7);
}

/* Course header: same light wash as the other page banners ---------------------------- */

.course-hero {
    background: linear-gradient(120deg, var(--color-primary-softer) 0%, var(--color-primary-soft) 100%);
    border-bottom: 1px solid var(--color-border);
}

.course-hero__badge {
    border-radius: var(--radius-pill);
}

.enroll-card,
.featured-post__media,
.article__image,
.contact-aside__map,
.contact-aside__frame,
.auth-card {
    border-radius: var(--radius-xl);
}



/* Class options on the course page (online / physical) ---------------------------- */

.class-options {
    margin-bottom: var(--space-9);
}

.class-options__title {
    margin-bottom: var(--space-5);
    font-size: var(--fs-h4);
}

.class-options__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: start;
    gap: var(--space-5);
}

.class-option {
    padding: var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.class-option--physical {
    background: var(--color-primary-softer);
    border-color: var(--color-primary-soft);
}

.class-option__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--space-4);
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: var(--radius-md);
}

.class-option--physical .class-option__icon {
    color: var(--color-white);
    background: var(--color-primary);
}

.class-option h3 {
    margin-bottom: var(--space-1);
    font-size: var(--fs-h5);
}

.class-option > p {
    margin-bottom: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

.class-option__facts {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
    color: var(--color-ink);
}

.class-option__facts li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.class-option__facts .icon {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
}

.class-option__empty a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Batch (date and time) cards ------------------------------------------------------ */

.batch-list {
    display: grid;
    gap: var(--space-3);
}

.batch {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.batch strong {
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-ink);
}

.batch > span:not(.batch__status) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.batch .icon {
    width: 15px;
    height: 15px;
    color: var(--color-primary);
}

.batch .link-arrow {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-primary);
}

.batch__status {
    justify-self: start;
    padding: 1px var(--space-3);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    line-height: 1.8;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: var(--radius-pill);
}

.batch__status--running {
    color: var(--color-white);
    background: var(--color-success);
}

/* Registration page ------------------------------------------------------------------ */

.register__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-10);
}

.register__form .section-title {
    margin-bottom: var(--space-3);
}

.register__form form {
    margin-top: var(--space-7);
}

.mode-picker {
    margin: 0 0 var(--space-5);
    padding: 0;
    border: 0;
}

.mode-picker legend {
    margin-bottom: var(--space-2);
    padding: 0;
}

.mode-picker__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.mode-option {
    position: relative;
    cursor: pointer;
}

.mode-option input {
    position: absolute;
    opacity: 0;
}

.mode-option__body {
    display: grid;
    gap: 2px;
    height: 100%;
    padding: var(--space-4) var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.mode-option__body .icon {
    width: 22px;
    height: 22px;
    margin-bottom: var(--space-2);
    color: var(--color-primary);
}

.mode-option__body strong {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--color-ink);
}

.mode-option__body small {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--color-muted);
}

.mode-option input:checked + .mode-option__body {
    background: var(--color-primary-softer);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.mode-option input:focus-visible + .mode-option__body {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.field__hint {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--color-muted);
}

.register__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    display: grid;
    gap: var(--space-5);
}

.register-note {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.register-note--soft {
    background: var(--color-primary-soft);
    border-color: transparent;
}

.register-note h3 {
    margin-bottom: var(--space-3);
    font-size: var(--fs-h5);
}

.register-note p {
    margin-bottom: var(--space-3);
    font-size: var(--fs-sm);
}

.register-note__list {
    display: grid;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-ink);
}

.register-note__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.register-note__list .icon {
    width: 17px;
    height: 17px;
    margin-top: 4px;
    color: var(--color-secondary);
}

.article__title {
    margin-bottom: var(--space-4);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

/* Outlined panels get a white fill so they stay crisp on the tinted start */
.filter-panel,
.contact-card,
.register-note:not(.register-note--soft),
.profile-card,
.widget:not(.widget--promo),
.class-option:not(.class-option--physical) {
    background-color: var(--color-white);
}


/* ==== Base: responsive ==== */
/* ==========================================================================
   Responsive rules (desktop first)
   1399 small desktop · 1199 tablet landscape · 991 tablet · 767 mobile · 575 small mobile
   ========================================================================== */

/* Small desktop ------------------------------------------------------------ */

@media (max-width: 1399px) {
    :root {
        --fs-display: 54px;
        --fs-h2: 48px;
        --space-section: 100px;
    }

    .catalog__inner {
        grid-template-columns: 290px minmax(0, 1fr);
    }

    .catalog .course-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-detail__inner {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: var(--space-8);
    }

    .profile__inner,
    .article-page__inner {
        gap: var(--space-8);
    }

    .article-page__inner {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

}

/* Tablet landscape: switch to the mobile header --------------------------- */

@media (max-width: 1199px) {
    :root {
        --fs-display: 48px;
        --fs-h1: 40px;
        --fs-h2: 42px;
        --space-section: 90px;
        --header-height: 72px;
    }

    .container--wide {
        padding-inline: var(--gutter);
    }

    .course-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .course-grid--2,
    .catalog .course-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .carousel__track--5 {
        grid-auto-columns: calc((100% - var(--grid-gap) * 3) / 4);
    }

    .blog-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hub {
        gap: var(--space-9) var(--space-9);
    }

    /* Course detail: enrolment card moves above the tabs */
    .course-detail__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .course-detail__aside {
        position: static;
        order: -1;
        margin-top: 0;
    }

    .enroll-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .enroll-card__media {
        height: 100%;
        aspect-ratio: auto;
        min-height: 280px;
    }

    .course-hero__inner > * {
        max-width: none;
    }

    .article-page__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .widget--promo {
        grid-column: 1 / -1;
    }
}

/* Tablet ------------------------------------------------------------------- */

@media (max-width: 991px) {
    :root {
        --fs-display: 44px;
        --fs-h1: 36px;
        --fs-h2: 36px;
        --space-section: 80px;
        --grid-gap: 24px;
    }

    /* Hero */

    /* Services hub stacks: logo first, then the four cards */
    .hub {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "core"
            "top"
            "left"
            "right"
            "bottom";
        gap: var(--space-5);
        max-width: 560px;
    }

    .hub::before,
    .hub__card::after {
        content: none;
    }

    .hub__card--top,
    .hub__card--bottom {
        text-align: left;
    }

    .hub__tags {
        justify-content: flex-start;
    }

    .faq-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-9);
    }

    .faq-split__visual {
        width: 100%;
        max-width: 520px;
        margin-inline: auto;
    }

    .faq-split__badge {
        left: var(--space-4);
    }

    /* Story */
    .story__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-9);
    }

    .story__visual {
        margin-inline: auto;
    }

    .story__content {
        max-width: none;
    }

    .course-grid,
    .blog-grid,
    .testimonial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .instructor-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .carousel__track,
    .carousel__track--5 {
        grid-auto-columns: calc((100% - var(--grid-gap) * 2) / 3);
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Catalogue: filters collapse behind a button */
    .catalog__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog__filter-toggle {
        display: inline-flex;
    }

    .filter-panel {
        display: none;
        margin-top: var(--space-4);
    }

    .filter-panel.is-open {
        display: block;
    }

    .register__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }

    .register__aside {
        position: static;
    }

    .profile__inner,
    .featured-post,
    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }

    .profile-card {
        position: static;
        width: 100%;
        max-width: 420px;
        margin-inline: auto;
    }

    .featured-post {
        margin-bottom: var(--space-section);
    }

    .auth-card {
        grid-template-columns: minmax(0, 1fr);
        max-width: 620px;
    }

    .auth-card__visual {
        min-height: 300px;
    }

    .auth-card__form {
        padding: var(--space-8);
    }
}

/* Mobile ------------------------------------------------------------------- */

@media (max-width: 767px) {
    :root {
        --fs-display: 36px;
        --fs-h1: 30px;
        --fs-h2: 30px;
        --fs-h3: 24px;
        --fs-number: 36px;
        --lh-display: 1.3;
        --space-section: 64px;
    }


    .btn {
        min-height: 50px;
        padding: 0 var(--space-7);
    }

    .btn--sm {
        min-height: 40px;
        padding: 0 var(--space-4);
    }

    .section-head {
        margin-bottom: var(--space-8);
    }

    .section-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        margin-bottom: var(--space-7);
    }

    .partners__list {
        justify-content: center;
        gap: var(--space-4) var(--space-7);
    }

    .partners__item {
        font-size: var(--fs-h5);
    }

    .benefits__grid,
    .partner-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .partner-group {
        padding: var(--space-5);
    }

    .tabs__nav {
        justify-content: flex-start;
        margin-bottom: var(--space-7);
    }

    .tabs__btn {
        padding-inline: var(--space-4);
    }

    .stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat {
        padding: var(--space-5) var(--space-6);
    }

    .instructor-grid,
    .carousel__track,
    .carousel__track--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-columns: calc((100% - var(--grid-gap)) / 2);
    }

    .carousel__track,
    .carousel__track--5 {
        grid-template-columns: none;
    }

    /* Narrow cards: stack the two meta items instead of letting them wrap mid-row */
    .instructor-card__meta {
        flex-direction: column;
    }

    .instructor-card__meta li + li {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .faq-box {
        padding: var(--space-2) var(--space-5) var(--space-3);
        border-radius: var(--radius-lg);
    }

    .accordion__trigger {
        padding-block: var(--space-5);
        font-size: var(--fs-body);
    }

    .accordion__content > * {
        padding-bottom: var(--space-5);
    }

    .course-hero {
        padding-block: var(--space-9);
    }

    .course-hero__meta {
        gap: var(--space-2) var(--space-5);
    }

    .course-grid.is-list .course-card {
        flex-direction: column;
    }

    .course-grid.is-list .course-card__media {
        width: auto;
        aspect-ratio: 10 / 7;
    }

    .enroll-card {
        display: block;
    }

    .enroll-card__media {
        height: auto;
        min-height: 0;
        aspect-ratio: 10 / 6.4;
    }

    .contact-cards {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: var(--space-section);
    }

    .sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .values-grid,
    .testimonial-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pullquote {
        padding: var(--space-6);
    }

    .pullquote .icon {
        position: static;
        margin-bottom: var(--space-2);
    }

    .pullquote p {
        font-size: var(--fs-h5);
    }

    .toast {
        top: auto;
        right: var(--gutter);
        bottom: var(--gutter);
        left: var(--gutter);
        max-width: none;
    }
}

/* Small mobile ------------------------------------------------------------- */

@media (max-width: 575px) {
    :root {
        --fs-display: 32px;
        --fs-h1: 28px;
        --fs-h2: 27px;
        --fs-lead: 16px;
        --space-section: 56px;
    }

    .course-grid,
    .course-grid--2,
    .catalog .course-grid--3,
    .blog-grid,
    .blog-grid--4,
    .category-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-grid,
    .blog-grid--4 {
        gap: var(--space-8);
    }

    .class-options__grid,
    .mode-picker__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-row,
    .check-list--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog__toolbar {
        flex-wrap: wrap;
    }

    .catalog__tools {
        width: 100%;
    }

    .catalog__sort {
        flex: 1;
        min-width: 0;
    }

    .filter-panel {
        padding: var(--space-5);
    }

    .rating-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
        padding: var(--space-5);
    }

    .author-box,
    .author-box--soft {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .author-box--soft {
        padding: var(--space-5);
    }

    .author-box__photo {
        width: 110px;
    }

    .review {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: var(--space-4);
    }

    .review img {
        width: 44px;
        height: 44px;
    }

    .review__head time {
        width: 100%;
        margin-left: 0;
    }

    .post-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .post-nav__link--next {
        grid-column: auto;
    }

    .enroll-card__body,
    .widget,
    .contact-aside__note {
        padding: var(--space-5);
    }

    .auth-card__visual {
        min-height: 200px;
    }

    .auth-card__caption {
        display: none;
    }

    .auth-card__form {
        padding: var(--space-7) var(--space-5);
    }

    .not-found__actions .btn {
        width: 100%;
    }
}


/* ==========================================================================
   Zukti Tech design
   A light, airy site: soft blue-white grounds, rounded panels, medium-weight
   DM Sans headlines with the second phrase in Zukti blue, photo cards with
   text laid over them, and a blue gradient contact panel in the footer.
   Colours: Zukti blue, orange accent, navy ink, white.
   ========================================================================== */

:root {
    --zt-blue: #0224f7;
    --zt-blue-dark: #011bc4;
    --zt-blue-light: #0999fc;
    --zt-orange: #f7701e;
    --zt-ink: #000034;
    --zt-text: #474b6e;
    --zt-ground: #f7f8ff;
    --zt-panel: #eef1fd;
    --zt-line: rgba(0, 0, 52, 0.09);
    --zt-radius: 22px;
    --zt-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --header-height: 96px;
    --container: 1320px;
    --font-heading: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

body {
    overflow-x: hidden;
    font-family: var(--font-body);
    color: var(--zt-ink);
    background: var(--zt-ground);
}

::selection {
    color: #fff;
    background: var(--zt-blue);
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
}

.shell,
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 20px;
}

@media (min-width: 640px) {
    .shell,
    .container { padding-inline: 32px; }
}

@media (min-width: 1024px) {
    .shell,
    .container { padding-inline: 40px; }
}

.section {
    padding-block: clamp(64px, 8vw, 110px);
}

.section--tight {
    padding-block: clamp(32px, 4vw, 56px);
}

.section--panel,
.section--soft,
.section--grey {
    background: var(--zt-panel);
}

.section--flush-top {
    padding-top: 0;
}

.section-cta {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */

.sec-eyebrow,
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--zt-blue);
    background: none;
    border: 0;
}

.sec-eyebrow::before,
.pill::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--zt-orange);
    border-radius: 2px;
}

.pill__icon {
    display: none;
}

.sec-title,
.section-title {
    margin: 0;
    font-size: clamp(2rem, 3.8vw, 3.1rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: var(--zt-ink);
}

.sec-title .accent,
.section-title .text-accent {
    color: var(--zt-blue);
}

.sec-lead,
.section-sub {
    max-width: 56ch;
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--zt-text);
}

.sec-head {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.sec-head .sec-lead {
    margin-inline: auto;
}

.sec-head--left {
    max-width: none;
    margin-inline: 0;
    text-align: left;
}

.sec-head--left .sec-lead {
    margin-inline: 0;
}

/* Heading on the left, an action or badge on the right */
.split-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    margin-bottom: 44px;
}

.split-head > div:first-child {
    max-width: 680px;
}

.section-row .sec-head {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 0;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
        transform 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:has(> .icon:last-child) {
    padding: 13px 24px;
}

.btn .icon,
.btn > .icon:last-child {
    width: 16px;
    height: 16px;
    padding: 0;
    color: currentColor;
    background: none;
    border-radius: 0;
    transition: transform 0.3s var(--zt-ease);
}

.btn:hover > .icon:last-child:not(:first-child) {
    transform: translate(2px, -2px);
}

.btn--sm,
.btn--sm:has(> .icon:last-child) {
    padding: 10px 18px;
    font-size: 14px;
}

.btn--block {
    width: 100%;
}

.btn-primary,
.btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--zt-blue) 0%, #2a4bff 100%);
    box-shadow: 0 14px 28px -16px rgba(2, 36, 247, 0.9);
}

.btn-primary:hover,
.btn--primary:hover {
    color: #fff;
    background: var(--zt-blue-dark);
}

.btn--secondary {
    color: #fff;
    background: var(--zt-orange);
}

.btn--secondary:hover {
    color: #fff;
    background: #d95a0c;
}

.btn-outline,
.btn--outline {
    color: var(--zt-ink);
    background: #fff;
    border-color: var(--zt-line);
}

.btn-outline:hover,
.btn--outline:hover {
    color: var(--zt-blue);
    background: #fff;
    border-color: var(--zt-blue);
}

.btn-soft {
    color: var(--zt-blue);
    background: #e3e8ff;
}

.btn-soft:hover {
    color: #fff;
    background: var(--zt-blue);
}

.btn-light {
    color: var(--zt-blue);
    background: #fff;
}

.btn-light:hover {
    color: var(--zt-ink);
    background: #fff;
}

.text-link,
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--zt-blue);
}

.text-link .icon,
.link-arrow .icon {
    width: 15px;
    height: 15px;
    transition: transform 0.3s var(--zt-ease);
}

.text-link:hover .icon,
.link-arrow:hover .icon {
    transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   Header: a floating white bar
   -------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 200;
    padding: 10px 16px;
    color: #fff;
    background: var(--zt-ink);
    border-radius: 10px;
}

.skip-link:focus {
    top: 12px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding-top: 22px;
    transition: padding 0.5s var(--zt-ease);
}

/* A tall white bar with soft corners; logo left, links centred, button right */
.header-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 104px;
    padding: 0 22px 0 34px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 18px 40px -30px rgba(0, 0, 52, 0.35);
    transition: min-height 0.5s var(--zt-ease), border-radius 0.5s var(--zt-ease),
        padding 0.5s var(--zt-ease), box-shadow 0.35s ease;
}

/* Once scrolled, the bar runs edge to edge, a little shorter, with square corners */
/* The header spans almost the whole window, with a slim margin either side */
.site-header > .shell {
    max-width: none;
    padding-inline: clamp(12px, 2vw, 32px);
    transition: padding 0.5s var(--zt-ease);
}

.site-header.is-stuck {
    padding-top: 0;
}

.site-header.is-stuck > .shell {
    padding-inline: 0;
}

/* Content stays put as the side margins close up */
.site-header.is-stuck .header-bar {
    min-height: 88px;
    padding-inline: calc(clamp(12px, 2vw, 32px) + 34px) calc(clamp(12px, 2vw, 32px) + 22px);
    border-radius: 0;
    box-shadow: 0 20px 40px -28px rgba(0, 0, 52, 0.4);
}

.header-logo img {
    width: auto;
    height: 52px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.6vw, 44px);
    margin-inline: auto;
}

/* Plain text links; the current page gets a short blue underline */
.nav-link {
    position: relative;
    padding: 8px 0;
    font-size: 17px;
    font-weight: 400;
    color: var(--zt-ink);
    transition: color 0.25s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--zt-blue);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.35s var(--zt-ease);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
    color: var(--zt-blue);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

.header-cta,
.header-cta:has(> .icon:last-child) {
    padding: 15px 24px;
    font-size: 16px;
    background: linear-gradient(120deg, var(--zt-blue) 0%, #3a5bff 60%, var(--zt-blue-light) 100%);
    border-radius: 10px;
    box-shadow: 0 16px 30px -16px rgba(2, 36, 247, 0.9);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0 12px;
}

.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--zt-ink);
    border-radius: 2px;
}

.nav-toggle span:last-child {
    width: 60%;
}

.mobile-menu {
    position: fixed;
    inset: 12px 12px auto;
    z-index: 160;
    display: grid;
    gap: 20px;
    max-height: calc(100vh - 24px);
    padding: 18px 20px 22px;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 52, 0.45);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.4s var(--zt-ease), visibility 0.3s;
}

.mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-menu__logo img {
    height: 38px;
}

.mobile-menu__close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: var(--zt-panel);
    border-radius: 12px;
}

.mobile-menu__close .icon {
    width: 20px;
    height: 20px;
}

.mobile-menu__nav {
    display: grid;
}

.mobile-menu__nav a {
    padding: 13px 4px;
    font-size: 18px;
    font-weight: 500;
    color: var(--zt-ink);
    border-bottom: 1px solid var(--zt-line);
}

.mobile-menu__nav a[aria-current="page"] {
    color: var(--zt-blue);
}

.page-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 52, 0.4);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.page-overlay.is-visible {
    visibility: visible;
    opacity: 1;
}

body.is-locked {
    overflow: hidden;
}

/* The header floats over each page's first band */
main {
    margin-top: -126px;
}

/* --------------------------------------------------------------------------
   Photo cards: tall image, text over a dark fade
   -------------------------------------------------------------------------- */

.photo-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.photo-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    color: #fff;
    background: var(--zt-ink);
    border-radius: var(--zt-radius);
    isolation: isolate;
}

.photo-card img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--zt-ease);
}

.photo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(0, 0, 40, 0.88) 0%, rgba(0, 0, 40, 0.1) 55%, rgba(2, 36, 247, 0.12) 100%);
}

.photo-card:hover img {
    transform: scale(1.06);
}

.photo-card__body {
    position: absolute;
    right: 22px;
    bottom: 22px;
    left: 22px;
    display: grid;
    gap: 6px;
}

.photo-card__cat {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9fd3ff;
}

.photo-card__body strong {
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.photo-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-height: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    opacity: 0;
    transition: max-height 0.4s var(--zt-ease), opacity 0.3s ease, margin 0.4s var(--zt-ease);
}

.photo-card__more .icon {
    width: 14px;
    height: 14px;
}

.photo-card:hover .photo-card__more,
.photo-card:focus-visible .photo-card__more {
    max-height: 30px;
    margin-top: 6px;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Inner pages
   -------------------------------------------------------------------------- */

/* Each page's first band starts under the floating header */
main > .section:first-child,
main > section:first-child:not(.hero):not(.page-intro):not(.course-hero):not(.explore-hero):not(.form-stage) {
    padding-top: 180px;
    background: linear-gradient(180deg, #eef2ff 0%, var(--zt-ground) 340px);
}

.page-intro {
    padding: 180px 0 60px;
    background: linear-gradient(180deg, #eef2ff 0%, var(--zt-ground) 100%);
}

.page-intro__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}

.page-intro__split p {
    max-width: 560px;
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--zt-text);
}

.page-intro__title,
.page-intro .sec-title {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.06;
}

.page-intro__title span,
.page-intro .sec-title .accent {
    color: var(--zt-blue);
}

.page-intro__photo {
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
}

.page-intro__photo img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
}

.page-intro--center .page-intro__inner {
    display: grid;
    justify-items: center;
    text-align: center;
}

.page-intro--center .sec-lead {
    margin-inline: auto;
}

.page-intro__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

/* Closing call to action */
/* Cards elsewhere pick up the same radius and hairline */
.course-card,
.category-card,
.contact-card,
.feature--card,
.profile-card,
.widget:not(.widget--promo),
.filter-panel,
.enroll-card,
.class-option,
.contact-form,
.blog-card,
.featured-post,
.instructor-card {
    border-color: var(--zt-line);
    border-radius: var(--zt-radius);
}

.course-card {
    padding: 10px;
    background: #fff;
    border: 1px solid var(--zt-line);
    box-shadow: none;
    transition: transform 0.4s var(--zt-ease), box-shadow 0.4s ease;
}

.course-card:hover {
    box-shadow: 0 28px 48px -30px rgba(0, 0, 52, 0.42);
    transform: translateY(-5px);
}

.course-card__media {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.course-card__media > a {
    display: block;
    height: 100%;
}

.course-card__price {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--zt-ink);
    background: #fff;
    border-radius: 999px;
}

.course-card__wish {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--zt-ink);
    background: #fff;
    border-radius: 999px;
}

.course-card__wish .icon {
    width: 16px;
    height: 16px;
}

.course-card__wish[aria-pressed="true"] .icon {
    fill: currentColor;
}

.course-card__body {
    padding: 16px 10px 10px;
}

.course-card__cat {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zt-blue);
}

.course-card__title {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}

.course-card__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--zt-text);
}

.course-card__stars {
    display: inline-flex;
    gap: 1px;
    color: var(--zt-orange);
}

.course-card__stars .icon {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.course-card__perks {
    display: grid;
    gap: 6px;
    margin-top: auto;
    margin-bottom: 16px;
    padding-top: 14px;
    font-size: 14px;
    color: var(--zt-text);
    border-top: 1px solid var(--zt-line);
}

.course-card__perks li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-card__perks .icon {
    width: 15px;
    height: 15px;
    color: var(--zt-blue);
}

.course-grid.is-list .course-card__enroll {
    align-self: flex-start;
    width: auto;
}

.course-hero {
    padding-top: 180px;
    background: linear-gradient(180deg, #eef2ff 0%, var(--zt-ground) 100%);
    border-bottom: 0;
}

.tabs__btn.is-active {
    color: #fff;
    background: var(--zt-blue);
    border-color: var(--zt-blue);
}

.input,
.select {
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Footer: gradient contact panel, columns, faded tagline
   -------------------------------------------------------------------------- */

.site-footer {
    padding-top: 40px;
    color: var(--zt-ink);
    background: var(--zt-ground);
}

.footer-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 40px;
    padding: clamp(32px, 5vw, 60px);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(9, 153, 252, 0.55), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(247, 112, 30, 0.28), transparent 40%),
        linear-gradient(135deg, var(--zt-blue-dark) 0%, var(--zt-blue) 60%, #2a4bff 100%);
    border-radius: 28px;
}

.footer-panel__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.75;
}

.footer-panel h2 {
    margin: 14px 0 26px;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #fff;
}

.footer-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.footer-panel__grid li {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
}

.footer-panel__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
    color: var(--zt-blue);
    background: #fff;
    border-radius: 12px;
}

.footer-panel__icon .icon {
    width: 18px;
    height: 18px;
}

.footer-panel h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.footer-panel__grid a {
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    overflow-wrap: anywhere;
}

.footer-panel__grid a:hover {
    text-decoration: underline;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
    gap: 32px;
    padding-block: 56px 24px;
}

.footer-head {
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zt-text);
}

.footer-col ul {
    display: grid;
    gap: 10px;
}

.footer-col a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--zt-ink);
}

.footer-col a::before {
    content: "";
    width: 5px;
    height: 5px;
    background: var(--zt-orange);
    border-radius: 50%;
}

.footer-col a:hover {
    color: var(--zt-blue);
}

.footer-brand {
    display: grid;
    justify-items: end;
    align-content: start;
    gap: 16px;
    text-align: right;
}

.footer-brand img {
    height: 48px;
}

.footer-brand p {
    max-width: 240px;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
}

.footer-social {
    display: flex;
    gap: 8px;
}

.footer-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #fff;
    background: var(--zt-ink);
    border-radius: 10px;
    transition: background-color 0.25s ease;
}

.footer-social a:hover {
    background: var(--zt-blue);
}

.footer-social .icon {
    width: 15px;
    height: 15px;
}

/* Large faded tagline */
.foot-mark {
    margin: 0;
    overflow: hidden;
    font-size: clamp(3rem, 10vw, 9rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    color: transparent;
    background: linear-gradient(180deg, rgba(0, 0, 52, 0.12), rgba(0, 0, 52, 0.02));
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 20px 28px;
    font-size: 14px;
    color: var(--zt-text);
    border-top: 1px solid var(--zt-line);
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-bottom a:hover {
    color: var(--zt-blue);
}

.footer-bottom .icon {
    width: 14px;
    height: 14px;
}


/* --------------------------------------------------------------------------
   01 Hero: word reveal, typed line, orbiting skills, tilting portrait
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    padding: 176px 0 70px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 30%, rgba(9, 153, 252, 0.2), transparent 40%),
        radial-gradient(circle at 5% 100%, rgba(247, 112, 30, 0.1), transparent 35%),
        linear-gradient(180deg, #edf1ff 0%, var(--zt-ground) 100%);
}

/* Fine grid lines behind the hero, fading out at the edges */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(2, 36, 247, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 36, 247, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at 60% 40%, #000 0%, transparent 70%);
    mask-image: radial-gradient(circle at 60% 40%, #000 0%, transparent 70%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 40px;
    min-height: 560px;
}

.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 7px 14px 7px 10px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 8px 20px -14px rgba(0, 0, 52, 0.4);
    animation: fade-up 0.6s var(--zt-ease) both;
}

.hero__tag .icon {
    width: 15px;
    height: 15px;
    color: var(--zt-orange);
}

.hero__title {
    margin: 0;
    font-size: clamp(2.6rem, 5.8vw, 4.8rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

/* Each word sits in a clipping box and rises into view */
.split-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.split-word > span {
    display: inline-block;
    animation: word-rise 0.9s var(--zt-ease) both;
}

.split-word.is-accent {
    color: var(--zt-blue);
}

@keyframes word-rise {
    from { transform: translateY(105%); }
}

.hero__typed {
    margin: 22px 0 0;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    font-weight: 500;
    color: var(--zt-text);
    animation: fade-up 0.7s var(--zt-ease) 0.6s both;
}

.hero__typed-word {
    padding: 0 6px;
    color: var(--zt-ink);
    background: linear-gradient(transparent 62%, rgba(247, 112, 30, 0.3) 62%);
}

.hero__caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: var(--zt-orange);
    animation: caret 1s steps(1) infinite;
}

@keyframes caret {
    50% { opacity: 0; }
}

.hero__text {
    max-width: 480px;
    margin: 14px 0 0;
    color: var(--zt-text);
    animation: fade-up 0.7s var(--zt-ease) 0.7s both;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
    animation: fade-up 0.7s var(--zt-ease) 0.8s both;
}

/* Stage: rings and skill chips orbit behind the portrait, which tilts with the pointer */
.hero__stage {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    position: relative;
    display: flex;
    align-self: stretch;
    align-items: flex-end;
    justify-content: center;
    min-height: 520px;
    perspective: 900px;
}

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 470px;
    height: 470px;
    transform: translate(-50%, -48%) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 0.4s var(--zt-ease);
}

.orbit__ring {
    position: absolute;
    border-radius: 50%;
}

.orbit__ring--outer {
    inset: 0;
    border: 1.5px dashed rgba(2, 36, 247, 0.3);
    animation: spin 40s linear infinite;
}

.orbit__ring--inner {
    inset: 70px;
    background: radial-gradient(circle at 35% 30%, var(--zt-blue-light), var(--zt-blue) 70%);
    box-shadow: 0 30px 60px -20px rgba(2, 36, 247, 0.6);
}

/* Chips ride around the outer ring */
.orbit__chip {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--zt-ink);
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 12px 26px -14px rgba(0, 0, 52, 0.5);
    animation: orbit 24s linear infinite;
}

.orbit__chip--1 { animation-delay: 0s; }
.orbit__chip--2 { animation-delay: -4.8s; }
.orbit__chip--3 { animation-delay: -9.6s; }
.orbit__chip--4 { animation-delay: -14.4s; }
.orbit__chip--5 { animation-delay: -19.2s; }

.orbit__chip:nth-child(even) {
    color: #fff;
    background: var(--zt-orange);
}

@keyframes orbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(235px) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(235px) rotate(-360deg); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.hero__person {
    position: relative;
    width: auto;
    height: 520px;
    max-width: none;
    transform: rotateX(calc(var(--tilt-x) * 0.4)) rotateY(calc(var(--tilt-y) * 0.4));
    transition: transform 0.4s var(--zt-ease);
    animation: fade-in 1s ease both;
}

@keyframes fade-in {
    from { opacity: 0; }
}

.hero__live {
    position: absolute;
    right: 0;
    bottom: 60px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--zt-ink);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 52, 0.45);
    backdrop-filter: blur(8px);
}

.hero__live small {
    display: block;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--zt-orange);
}

.hero__live:hover {
    color: var(--zt-blue);
}

.hero__pulse {
    position: relative;
    width: 10px;
    height: 10px;
    background: var(--zt-orange);
    border-radius: 50%;
}

.hero__pulse::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid var(--zt-orange);
    border-radius: 50%;
    animation: pulse-ring 1.8s ease-out infinite;
}

@keyframes pulse-ring {
    0% { opacity: 0.8; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(1.6); }
}

/* --------------------------------------------------------------------------
   02 Wavy edge at the foot of the hero
   Four copies of one wave, each a little lower, more opaque and slower,
   so the light hero melts into the navy band below.
   -------------------------------------------------------------------------- */

/* Room under the content so the waves sit just below it, with a small gap */
.hero {
    padding-bottom: clamp(100px, 11vw, 150px);
}

.hero__waves {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: clamp(70px, 8vw, 110px);
}

.hero__wave-layers use {
    animation: wave-drift 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.hero__wave-layers use:nth-child(1) {
    fill: rgba(9, 153, 252, 0.25);
    animation-duration: 9s;
    animation-delay: -2s;
}

.hero__wave-layers use:nth-child(2) {
    fill: rgba(2, 36, 247, 0.35);
    animation-duration: 12s;
    animation-delay: -3s;
}

.hero__wave-layers use:nth-child(3) {
    fill: rgba(0, 16, 92, 0.6);
    animation-duration: 15s;
    animation-delay: -4s;
}

.hero__wave-layers use:nth-child(4) {
    fill: var(--zt-ink);
    animation-duration: 20s;
    animation-delay: -5s;
}

@keyframes wave-drift {
    0% { transform: translate3d(-90px, 0, 0); }
    100% { transform: translate3d(85px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__wave-layers use {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   03 Scoreboard: dark band with rolling digits
   -------------------------------------------------------------------------- */

.scoreboard {
    position: relative;
    padding: 60px 0 120px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 0%, rgba(9, 153, 252, 0.25), transparent 40%),
        var(--zt-ink);
}

.scoreboard__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 40px;
    margin-bottom: 48px;
}

.scoreboard__title {
    margin: 0;
    font-size: clamp(2rem, 3.8vw, 3.1rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    color: #fff;
}

.scoreboard__title span {
    color: var(--zt-blue-light);
}

.scoreboard__head p {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
}

.scoreboard__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.score {
    display: grid;
    gap: 10px;
    padding: 28px 20px 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.score:first-child {
    border-left: 0;
    padding-left: 0;
}

.score__value {
    display: flex;
    align-items: flex-start;
    font-size: clamp(2.8rem, 5vw, 4.4rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
}

.score__suffix {
    color: var(--zt-orange);
}

.score__label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.odometer {
    display: inline-flex;
}

/* Each digit column is as wide as the digit it lands on (set by home.js) */
.odometer__digit {
    transition: width 1.6s var(--zt-ease);
}

.odometer__digit {
    display: inline-block;
    height: 1em;
    overflow: hidden;
}

.odometer__strip {
    display: flex;
    flex-direction: column;
    transition: transform 1.6s var(--zt-ease);
}

.odometer__strip span {
    align-self: flex-start;
    height: 1em;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   04 Homepage courses: level tabs, white cards with a ribbon on the photo
   -------------------------------------------------------------------------- */

.level-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 44px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 14px;
    box-shadow: 0 16px 34px -26px rgba(0, 0, 52, 0.5);
}

.level-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--zt-ink);
    border-radius: 10px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.level-tab .icon {
    width: 18px;
    height: 18px;
    color: var(--zt-orange);
}

.level-tab:hover {
    color: var(--zt-blue);
}

.level-tab.is-active {
    color: #fff;
    background: var(--zt-blue);
}

.level-tab.is-active .icon {
    color: #fff;
}

.course-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.course-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 6px;
    transition: transform 0.35s var(--zt-ease), box-shadow 0.35s ease;
    animation: fade-up 0.5s var(--zt-ease) both;
}

.course-tile[hidden] {
    display: none;
}

.course-tile:hover {
    box-shadow: 0 28px 48px -32px rgba(0, 0, 52, 0.5);
    transform: translateY(-5px);
}

.course-tile__media {
    display: block;
    aspect-ratio: 16 / 9.2;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
}

.course-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--zt-ease);
}

.course-tile:hover .course-tile__media img {
    transform: scale(1.05);
}

/* Ribbon hanging off the left edge, with a small fold under it */
.course-tile__ribbon {
    --ribbon: var(--zt-blue);
    --ribbon-fold: var(--zt-blue-dark);
    position: absolute;
    top: -17px;
    left: -7px;
    z-index: 1;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ribbon);
    border-radius: 3px 3px 3px 0;
}

.course-tile__ribbon::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    border-top: 7px solid var(--ribbon-fold);
    border-left: 7px solid transparent;
}

.course-tile__ribbon--intermediate {
    --ribbon: var(--zt-orange);
    --ribbon-fold: #b84d0b;
}

.course-tile__ribbon--expert {
    --ribbon: var(--zt-ink);
    --ribbon-fold: #000018;
}

.course-tile__body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 26px 28px 24px;
}

.course-tile__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 23px;
    font-weight: 700;
    color: var(--zt-blue);
}

.course-tile__price del {
    font-size: 15px;
    font-weight: 400;
    color: var(--zt-text);
}

.course-tile__title {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.course-tile__title a:hover {
    color: var(--zt-blue);
}

.course-tile__line {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--zt-text);
}

.course-tile__line span {
    margin-inline: 4px;
    opacity: 0.5;
}

.course-tile__text {
    display: -webkit-box;
    margin: 0 0 18px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.6;
    color: var(--zt-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.course-tile__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 14px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 14px;
    color: var(--zt-ink);
    border-top: 1px solid var(--zt-line);
}

.course-tile__facts li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.course-tile__facts .icon {
    width: 17px;
    height: 17px;
    color: var(--zt-orange);
}

/* --------------------------------------------------------------------------
   05 Step viewer
   -------------------------------------------------------------------------- */

.steps-band {
    position: relative;
    padding-block: clamp(100px, 11vw, 150px);
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 255, 255, 0.55), transparent 32%),
        radial-gradient(circle at 4% 92%, rgba(247, 112, 30, 0.28), transparent 36%),
        linear-gradient(120deg, #ffe9d8 0%, #ffd9bd 100%);
}

/* Warm band: the eyebrow, step text and progress line follow the orange */
.steps-band .sec-eyebrow {
    color: #b84d0b;
}

.steps-band .sec-eyebrow::before {
    background: var(--zt-blue);
}

.steps-band .step__num,
.steps-band .step__title {
    color: #6b3a1c;
}

.steps-band .step:hover {
    background: rgba(255, 255, 255, 0.45);
}

.steps-band .step.is-active .step__title {
    color: var(--zt-ink);
}

.steps-band .step.is-active .step__num {
    color: var(--zt-orange);
}

.steps-band .step__bar {
    background: rgba(247, 112, 30, 0.2);
}

.steps-band .step__bar span {
    background: var(--zt-orange);
}

.steps-band .step-view {
    box-shadow: 0 40px 60px -40px rgba(120, 50, 0, 0.6);
}

.steps-band .step-view__icon {
    background: var(--zt-orange);
}

.steps {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 56px;
}

.steps__list ol {
    display: grid;
    gap: 6px;
    margin-top: 32px;
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    width: 100%;
    padding: 18px 18px 22px;
    text-align: left;
    border-radius: 16px;
    transition: background-color 0.3s ease;
}

.step:hover {
    background: rgba(255, 255, 255, 0.6);
}

.step.is-active {
    background: #fff;
    box-shadow: 0 16px 34px -26px rgba(0, 0, 52, 0.5);
}

.step__num {
    font-size: 14px;
    font-weight: 600;
    color: var(--zt-text);
}

.step.is-active .step__num {
    color: var(--zt-orange);
}

.step__title {
    font-size: 19px;
    font-weight: 500;
    color: var(--zt-text);
}

.step.is-active .step__title {
    color: var(--zt-ink);
}

/* Progress line under the active step */
.step__bar {
    position: absolute;
    right: 18px;
    bottom: 10px;
    left: 66px;
    height: 2px;
    overflow: hidden;
    background: rgba(2, 36, 247, 0.1);
    border-radius: 2px;
    opacity: 0;
}

.step.is-active .step__bar {
    opacity: 1;
}

.step__bar span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--zt-blue);
    transform: scaleX(0);
    transform-origin: left;
}

.step.is-active .step__bar span {
    animation: step-fill var(--step-duration, 6000ms) linear forwards;
}

@keyframes step-fill {
    to { transform: scaleX(1); }
}

.steps__view {
    position: relative;
    aspect-ratio: 5 / 4;
}

.step-view {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
    opacity: 0;
    clip-path: inset(0 0 0 100% round 28px);
    transition: opacity 0.4s ease, clip-path 0.9s var(--zt-ease);
}

.step-view.is-active {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 28px);
}

.step-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.step-view figcaption {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 4px 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 18px;
    backdrop-filter: blur(8px);
}

.step-view__icon {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 48px;
    height: 48px;
    color: #fff;
    background: var(--zt-blue);
    border-radius: 14px;
}

.step-view__icon .icon {
    width: 22px;
    height: 22px;
}

.step-view figcaption strong {
    font-size: 18px;
    font-weight: 600;
}

.step-view figcaption span:last-child {
    font-size: 15px;
    color: var(--zt-text);
}

/* --------------------------------------------------------------------------
   06 Batch calendar
   -------------------------------------------------------------------------- */

.calendar {
    position: relative;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 24px;
}

.calendar__months,
.calendar__row {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
}

.calendar__months {
    grid-template-columns: 280px repeat(5, minmax(0, 1fr));
    gap: 0;
    padding-bottom: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zt-text);
    border-bottom: 1px solid var(--zt-line);
}

.calendar__months span + span {
    padding-left: 10px;
    border-left: 1px solid var(--zt-line);
}

.calendar__row {
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--zt-line);
}

.calendar__row:last-child {
    border-bottom: 0;
}

.calendar__course {
    display: grid;
    gap: 2px;
}

.calendar__course strong {
    font-size: 16px;
    font-weight: 600;
}

.calendar__course small {
    font-size: 13px;
    color: var(--zt-text);
}

/* Month guides behind every lane */
.calendar__lane {
    position: relative;
    height: 40px;
    background-image: linear-gradient(90deg, var(--zt-line) 1px, transparent 1px);
    background-size: 20% 100%;
}

.calendar__bar {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    display: flex;
    align-items: center;
    min-width: 70px;
    padding: 0 12px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--zt-blue);
    background: #e3e8ff;
    border-radius: 10px;
    transform-origin: left;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.calendar__bar--running {
    color: #fff;
    background: linear-gradient(90deg, var(--zt-orange), #ff9a4d);
}

.calendar__bar:hover {
    color: #fff;
    background: var(--zt-blue);
}

/* Bars grow in once they have been placed */
.calendar.is-ready .calendar__bar {
    animation: bar-grow 0.9s var(--zt-ease) both;
}

.calendar__row:nth-child(2) .calendar__bar { animation-delay: 0.08s; }
.calendar__row:nth-child(3) .calendar__bar { animation-delay: 0.16s; }
.calendar__row:nth-child(4) .calendar__bar { animation-delay: 0.24s; }
.calendar__row:nth-child(5) .calendar__bar { animation-delay: 0.32s; }
.calendar__row:nth-child(6) .calendar__bar { animation-delay: 0.4s; }

@keyframes bar-grow {
    from { transform: scaleX(0); }
}

/* The line runs behind the bars; its label sits on the card's bottom edge, clear of the months */
.calendar__rows {
    position: relative;
    z-index: 1;
}

.calendar__today {
    position: absolute;
    top: 64px;
    bottom: 0;
    z-index: 0;
    width: 2px;
    background: var(--zt-orange);
    pointer-events: none;
}

.calendar__today span {
    position: absolute;
    bottom: -12px;
    left: 50%;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--zt-orange);
    border-radius: 999px;
    transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   07 Partner spotlight wall
   -------------------------------------------------------------------------- */

.spotlight {
    padding: clamp(72px, 9vw, 110px) 0;
    color: #fff;
    background: linear-gradient(160deg, var(--zt-blue-dark) 0%, #00105c 60%, var(--zt-ink) 100%);
}

.spotlight__head {
    max-width: 640px;
    margin-bottom: 40px;
}

.spotlight .sec-eyebrow {
    color: #9fd3ff;
}

.spotlight .sec-title {
    color: #fff;
}

.spotlight .sec-title .accent {
    color: var(--zt-orange);
}

.spotlight__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 24px;
}

.spot-tile {
    --spot-x: -200px;
    --spot-y: -200px;
    position: relative;
    display: grid;
    gap: 14px;
    padding: 22px;
    background:
        radial-gradient(260px circle at var(--spot-x) var(--spot-y), rgba(9, 153, 252, 0.28), transparent 70%),
        #00105c;
}

a.spot-tile:hover {
    color: #fff;
}

.spot-tile__group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.spot-tile__mark {
    display: grid;
    place-items: center;
    height: 92px;
    padding: 10px;
    background: #fff;
    border-radius: 14px;
    transition: transform 0.4s var(--zt-ease);
}

.spot-tile:hover .spot-tile__mark {
    transform: translateY(-4px);
}

.spot-tile__group .icon {
    width: 16px;
    height: 16px;
    color: #fff;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.3s ease, transform 0.3s var(--zt-ease);
}

.spot-tile:hover .spot-tile__group .icon,
.spot-tile:focus-visible .spot-tile__group .icon {
    opacity: 1;
    transform: none;
}

.spot-tile__mark img {
    max-width: 80%;
    max-height: 62px;
    object-fit: contain;
}

.spot-tile__mark span {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: var(--zt-ink);
}

/* --------------------------------------------------------------------------
   08 Quote deck
   -------------------------------------------------------------------------- */

.deck-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 56px;
}

.deck-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

.deck-btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--zt-ink);
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 14px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.deck-btn:hover {
    color: #fff;
    background: var(--zt-blue);
}

.deck-btn .icon {
    width: 18px;
    height: 18px;
}

.deck-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--zt-text);
}

.deck {
    position: relative;
    height: 400px;
    cursor: pointer;
}

/* Cards stack: each one further back sits lower, smaller and fainter */
.deck-card {
    --pos: 0;
    position: absolute;
    inset: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-height: 340px;
    margin: 0;
    padding: 36px;
    border-radius: 26px;
    box-shadow: 0 30px 60px -36px rgba(0, 0, 52, 0.6);
    opacity: calc(1 - var(--pos) * 0.25);
    transform: translateY(calc(var(--pos) * 26px)) scale(calc(1 - var(--pos) * 0.05));
    transform-origin: top center;
    transition: transform 0.6s var(--zt-ease), opacity 0.6s ease;
}

.deck-card--blue {
    color: #fff;
    background: linear-gradient(140deg, var(--zt-blue) 0%, #2a4bff 100%);
}

.deck-card--orange {
    background: linear-gradient(140deg, #ffe4cf 0%, #fff4ea 100%);
}

.deck-card--navy {
    color: #fff;
    background: linear-gradient(140deg, var(--zt-ink) 0%, #0c1580 100%);
}

/* The top card flies off to the side before going to the back */
.deck-card.is-leaving {
    opacity: 0;
    transform: translateX(60%) rotate(8deg);
}

.deck-card__mark .icon {
    width: 34px;
    height: 34px;
    opacity: 0.6;
}

.deck-card blockquote {
    flex: 1;
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.6;
}

.deck-card figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    opacity: 0.85;
}

.deck-card figcaption img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

.deck-card figcaption strong {
    display: block;
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   09 Course finder
   -------------------------------------------------------------------------- */

.finder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    padding: clamp(28px, 4vw, 52px);
    background: linear-gradient(135deg, #fff 0%, #f1f4ff 100%);
    border: 1px solid var(--zt-line);
    border-radius: 32px;
}

.finder__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--zt-ink);
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 999px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.chip .icon {
    width: 16px;
    height: 16px;
    color: var(--zt-blue);
}

.chip:hover {
    border-color: var(--zt-blue);
    transform: translateY(-2px);
}

.chip.is-active {
    color: #fff;
    background: var(--zt-blue);
    border-color: var(--zt-blue);
}

.chip.is-active .icon {
    color: #fff;
}

.match {
    overflow: hidden;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 60px -40px rgba(0, 0, 52, 0.6);
    animation: match-in 0.6s var(--zt-ease) both;
}

@keyframes match-in {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
}

.match > img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
}

.match__body {
    padding: 24px 26px 28px;
}

.match__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zt-orange);
}

.match h3 {
    margin: 6px 0 8px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.match p {
    margin: 0;
    color: var(--zt-text);
}

.match__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 16px 0 22px;
    font-size: 14px;
    color: var(--zt-text);
}

.match__facts li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.match__facts .icon {
    width: 15px;
    height: 15px;
    color: var(--zt-blue);
}

/* --------------------------------------------------------------------------
   10 FAQ with search
   -------------------------------------------------------------------------- */

/* Bright blue band with white text; the question cards stay white */
.faq-band {
    position: relative;
    padding-block: clamp(100px, 11vw, 150px);
    color: #fff;
    background:
        radial-gradient(circle at 88% 10%, rgba(9, 153, 252, 0.75), transparent 42%),
        radial-gradient(circle at 6% 95%, rgba(247, 112, 30, 0.3), transparent 34%),
        linear-gradient(130deg, var(--zt-blue-dark) 0%, var(--zt-blue) 60%, #2a4bff 100%);
}

.faq-band .sec-eyebrow {
    color: #cfe6ff;
}

.faq-band .sec-title {
    color: #fff;
}

.faq-band .sec-title .accent {
    color: #ffc79f;
}

.faq-band .faq-item {
    color: var(--zt-ink);
    border-color: transparent;
}

.faq-band .faq-search__field {
    color: var(--zt-ink);
    border-color: transparent;
}

.faq-band .faq-search__field:focus-within {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

.faq-band .faq-search__empty {
    color: #fff;
}

.faq-band .faq-search__empty a {
    color: #fff;
    text-decoration: underline;
}

.faq-search {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 56px;
}

.faq-search__head {
    position: sticky;
    top: 120px;
}

.faq-search__field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 14px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-search__field:focus-within {
    border-color: var(--zt-blue);
    box-shadow: 0 0 0 4px rgba(2, 36, 247, 0.12);
}

.faq-search__field .icon {
    width: 18px;
    height: 18px;
    color: var(--zt-text);
}

.faq-search__field input {
    flex: 1;
    min-width: 0;
    height: 52px;
    font-size: 15px;
    background: transparent;
    border: 0;
    outline: none;
}

.faq-search__empty {
    margin-top: 14px;
    color: var(--zt-text);
}

.faq-search__empty a {
    font-weight: 600;
    color: var(--zt-blue);
}

.faq-list {
    display: grid;
    gap: 10px;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 16px;
}

.faq-item[open] {
    border-color: rgba(2, 36, 247, 0.35);
}

.faq-item summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 20px;
    padding: 18px 20px;
    font-size: 17px;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item__topic {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zt-orange);
}

.faq-item__mark {
    position: relative;
    width: 30px;
    height: 30px;
    color: var(--zt-blue);
    background: var(--zt-panel);
    border-radius: 50%;
}

.faq-item__mark::before,
.faq-item__mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.3s var(--zt-ease);
}

.faq-item__mark::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-item__mark {
    color: #fff;
    background: var(--zt-blue);
}

.faq-item[open] .faq-item__mark::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item p {
    margin: 0;
    padding: 0 20px 20px;
    color: var(--zt-text);
}

/* --------------------------------------------------------------------------
   11 Blog rail
   -------------------------------------------------------------------------- */

.rail-nav {
    display: flex;
    gap: 8px;
}

.rail-nav button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 14px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.rail-nav button:hover {
    color: #fff;
    background: var(--zt-blue);
}

.rail-nav .icon {
    width: 18px;
    height: 18px;
}

.rail {
    overflow-x: auto;
    cursor: grab;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    /* Snap points line up with the page column, not the window edge */
    scroll-padding-inline: max(20px, calc((100vw - var(--container)) / 2 + 40px));
}

.rail::-webkit-scrollbar {
    display: none;
}

.rail.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.rail__track {
    display: flex;
    gap: 18px;
    width: max-content;
    padding-inline: max(20px, calc((100vw - var(--container)) / 2 + 40px));
}

.rail__track li {
    scroll-snap-align: start;
}

.rail-card {
    display: grid;
    gap: 10px;
    width: 340px;
    color: var(--zt-ink);
    user-select: none;
}

.rail-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px;
    transition: border-radius 0.4s var(--zt-ease);
}

.rail-card:hover img {
    border-radius: 40px 20px;
}

.rail-card__meta {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--zt-blue);
}

.rail-card strong {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.rail-card:hover strong {
    color: var(--zt-blue);
}

.rail__progress {
    height: 3px;
    margin-top: 32px;
    overflow: hidden;
    background: var(--zt-line);
    border-radius: 3px;
}

.rail__progress span {
    display: block;
    height: 100%;
    background: var(--zt-blue);
    border-radius: 3px;
    transition: transform 0.15s linear;
}

/* --------------------------------------------------------------------------
   About page figures
   -------------------------------------------------------------------------- */

.stat-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.hero-strip__stat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    min-height: 140px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 18px;
}

.hero-strip__stat strong {
    font-size: 44px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1;
}

.hero-strip__stat > span:last-child {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--zt-blue);
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .orbit__ring--outer,
    .orbit__chip,
    .hero__pulse::after,
    .hero__caret {
        animation: none;
    }

    .orbit__chip {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .nav-link {
        padding: 9px 10px;
    }

    .scoreboard__grid,
    .stat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .score:nth-child(4) {
        border-left: 0;
        padding-left: 0;
    }

    .score {
        padding-bottom: 28px;
    }

    .photo-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar__months,
    .calendar__row {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .calendar__months {
        grid-template-columns: 220px repeat(5, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 1023px) {
    .header-nav,
    .header-cta {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .header-bar {
        min-height: 72px;
        padding: 0 14px 0 22px;
        border-radius: 18px;
    }

    .site-header {
        padding-top: 14px;
    }

    .hero {
        padding-top: 120px;
    }

    .hero__inner,
    .steps,
    .deck-layout,
    .finder,
    .faq-search,
    .page-intro__split,
    .footer-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__stage {
        min-height: 460px;
    }

    .orbit {
        width: 400px;
        height: 400px;
    }

    @keyframes orbit {
        from { transform: translate(-50%, -50%) rotate(0deg) translateX(200px) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(360deg) translateX(200px) rotate(-360deg); }
    }

    .hero__person {
        height: 440px;
    }

    .course-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .faq-search__head {
        position: static;
    }

    .deck {
        height: 440px;
    }

    .calendar {
        overflow-x: auto;
    }

    .calendar__months,
    .calendar__rows {
        min-width: 760px;
    }
}

@media (max-width: 767px) {
    .header-logo img {
        height: 36px;
    }

    .hero__stage {
        min-height: 380px;
    }

    .orbit {
        width: 320px;
        height: 320px;
    }

    .orbit__ring--inner {
        inset: 50px;
    }

    @keyframes orbit {
        from { transform: translate(-50%, -50%) rotate(0deg) translateX(160px) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(360deg) translateX(160px) rotate(-360deg); }
    }

    .hero__person {
        height: 360px;
    }

    .hero__live {
        bottom: 20px;
        font-size: 14px;
    }

    .scoreboard__grid,
    .stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .score:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    .score:nth-child(4) {
        border-left: 1px solid rgba(255, 255, 255, 0.14);
        padding-left: 20px;
    }

    .spotlight__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .deck-card {
        padding: 26px;
    }

    .deck {
        height: 500px;
    }

    .rail-card {
        width: 280px;
    }

    .course-tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .level-tab {
        padding: 9px 12px;
        font-size: 14px;
    }

    .photo-cards,
    .footer-panel__grid,
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

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

/* --------------------------------------------------------------------------
   Courses page: subject bubbles, explorer list with live preview, compare
   -------------------------------------------------------------------------- */

.explore-hero {
    position: relative;
    padding: 180px 0 70px;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 40%, rgba(9, 153, 252, 0.18), transparent 45%),
        linear-gradient(180deg, #edf1ff 0%, var(--zt-ground) 100%);
}

.explore-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 40px;
}

.explore-hero__title {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.explore-hero__title span {
    color: var(--zt-blue);
}

.explore-hero__copy > p {
    max-width: 460px;
    margin: 18px 0 0;
    color: var(--zt-text);
}

.explore-search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 440px;
    margin-top: 28px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 16px;
    box-shadow: 0 18px 40px -30px rgba(0, 0, 52, 0.5);
}

.explore-search:focus-within {
    border-color: var(--zt-blue);
    box-shadow: 0 0 0 5px rgba(2, 36, 247, 0.12);
}

.explore-search .icon {
    width: 19px;
    height: 19px;
    color: var(--zt-blue);
}

.explore-search input {
    flex: 1;
    min-width: 0;
    height: 54px;
    font-size: 16px;
    background: transparent;
    border: 0;
    outline: none;
}

/* Subject bubbles float gently; size is set by home.js from the course count */
.bubbles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.bubble {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 2px;
    width: 120px;
    height: 120px;
    padding: 10px;
    text-align: center;
    color: var(--zt-ink);
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 50%;
    box-shadow: 0 18px 36px -26px rgba(0, 0, 52, 0.55);
    animation: bubble-float 6s ease-in-out infinite;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--zt-ease), box-shadow 0.3s ease;
}

.bubble:nth-child(2n) { animation-delay: -1.5s; animation-duration: 7s; }
.bubble:nth-child(3n) { animation-delay: -3s; animation-duration: 8s; }
.bubble:nth-child(4n) { animation-delay: -4.5s; }

.bubble .icon {
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
    color: var(--zt-blue);
}

.bubble:nth-child(even) .icon {
    color: var(--zt-orange);
}

.bubble__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.bubble__count {
    font-size: 11px;
    color: var(--zt-text);
}

.bubble:hover {
    box-shadow: 0 0 0 4px rgba(2, 36, 247, 0.12), 0 24px 40px -26px rgba(0, 0, 52, 0.6);
}

.bubble.is-active {
    color: #fff;
    background: radial-gradient(circle at 30% 30%, var(--zt-blue-light), var(--zt-blue) 70%);
    border-color: transparent;
}

.bubble.is-active .icon,
.bubble.is-active .bubble__count {
    color: #fff;
}

@keyframes bubble-float {
    50% { translate: 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
    .bubble { animation: none; }
}

/* Toolbar above the list */
.explorer {
    padding-top: 48px;
}

.explorer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 22px;
}

.explorer__count {
    margin: 0 auto 0 0;
    font-size: 17px;
    color: var(--zt-text);
}

.explorer__count strong {
    font-size: 26px;
    font-weight: 600;
    color: var(--zt-ink);
}

.segmented {
    display: flex;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 12px;
}

.segmented button {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--zt-text);
    border-radius: 9px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.segmented button.is-active {
    color: #fff;
    background: var(--zt-blue);
}

.catalog-sort {
    height: 44px;
    padding: 0 36px 0 14px;
    font-size: 14px;
    color: var(--zt-ink);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000034' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 14px no-repeat;
    border: 1px solid var(--zt-line);
    border-radius: 12px;
    appearance: none;
}

.catalog-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--zt-text);
}

.catalog-clear:hover {
    color: var(--zt-orange);
}

.catalog-clear .icon {
    width: 14px;
    height: 14px;
}

/* List and preview side by side; the preview stays in view */
.explorer__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: start;
    gap: 28px;
}

.explorer__list {
    display: grid;
    gap: 10px;
}

.explorer__list[hidden] {
    display: none;
}

.course-line {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 18px;
    transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s var(--zt-ease);
}

.course-line[hidden] {
    display: none;
}

.course-line.is-current {
    border-color: var(--zt-blue);
    box-shadow: 0 18px 36px -28px rgba(2, 36, 247, 0.7);
    transform: translateX(6px);
}

.course-line.is-compared {
    background: #f3f5ff;
}

.course-line__link {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 10px 12px 10px 10px;
    color: var(--zt-ink);
}

.course-line__link:hover {
    color: var(--zt-ink);
}

.course-line__link img {
    flex: none;
    width: 86px;
    height: 68px;
    object-fit: cover;
    border-radius: 12px;
}

.course-line__main {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.course-line__cat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--zt-blue);
}

.course-line__main strong {
    overflow: hidden;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.course-line__meta {
    font-size: 13px;
    color: var(--zt-text);
}

.course-line__price {
    flex: none;
    font-size: 17px;
    font-weight: 600;
}

/* Round plus that turns into a tick when chosen for comparison */
.compare-tick {
    position: relative;
    flex: none;
    margin-right: 14px;
    cursor: pointer;
}

.compare-tick input {
    position: absolute;
    opacity: 0;
}

.compare-tick > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--zt-text);
    border: 1px solid var(--zt-line);
    border-radius: 50%;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s var(--zt-ease);
}

.compare-tick .icon {
    width: 16px;
    height: 16px;
}

.compare-tick:hover > span {
    color: var(--zt-blue);
    border-color: var(--zt-blue);
}

.compare-tick input:checked + span {
    color: #fff;
    background: var(--zt-orange);
    border-color: var(--zt-orange);
    transform: rotate(45deg);
}

.compare-tick input:disabled + span {
    opacity: 0.35;
    cursor: not-allowed;
}

.compare-tick input:focus-visible + span {
    outline: 2px solid var(--zt-blue);
    outline-offset: 2px;
}

/* Preview panel */
.explorer__preview {
    position: sticky;
    top: 110px;
}

.is-empty .explorer__preview {
    display: none;
}

.preview {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--zt-line);
    border-radius: 26px;
    box-shadow: 0 30px 60px -44px rgba(0, 0, 52, 0.6);
    animation: preview-in 0.45s var(--zt-ease) both;
}

@keyframes preview-in {
    from { opacity: 0; transform: translateY(12px); }
}

.preview__media {
    position: relative;
}

.preview__media img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
}

.preview__cat {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    border-radius: 999px;
}

.preview__cat .icon {
    width: 15px;
    height: 15px;
    color: var(--zt-blue);
}

.preview__body {
    padding: 22px 26px 26px;
}

.preview__body h2 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.preview__body > p {
    margin: 0;
    color: var(--zt-text);
}

.preview__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 20px 0;
}

.preview__stats li {
    display: grid;
    padding: 12px;
    font-size: 12px;
    color: var(--zt-text);
    background: var(--zt-ground);
    border-radius: 14px;
}

.preview__stats strong {
    font-size: 19px;
    font-weight: 600;
    color: var(--zt-ink);
}

.preview__body h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zt-text);
}

.preview__outcomes {
    display: grid;
    gap: 8px;
    font-size: 15px;
}

.preview__outcomes li {
    display: flex;
    gap: 10px;
}

.preview__outcomes .icon {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 4px;
    margin-top: 2px;
    color: #fff;
    background: var(--zt-blue);
    border-radius: 50%;
    stroke-width: 2.4;
}

.preview__batch {
    display: flex;
    gap: 12px;
    margin: 18px 0 0;
    padding: 14px;
    font-size: 14px;
    color: var(--zt-text);
    background: #fff4ea;
    border-radius: 14px;
}

.preview__batch .icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--zt-orange);
}

.preview__batch strong {
    display: block;
    color: var(--zt-ink);
}

.preview__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--zt-line);
}

.preview__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 auto 0 0;
}

.preview__price strong {
    font-size: 28px;
    font-weight: 600;
}

.preview__price del {
    color: var(--zt-text);
}

.preview__price span {
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--zt-orange);
    background: #fff1e6;
    border-radius: 999px;
}

.explorer__empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 64px 24px;
    text-align: center;
    background: #fff;
    border: 1px dashed rgba(2, 36, 247, 0.3);
    border-radius: 24px;
}

.explorer__empty[hidden] {
    display: none;
}

.is-empty .explorer__layout {
    grid-template-columns: minmax(0, 1fr);
}

.catalog-empty__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: var(--zt-blue);
    background: var(--zt-panel);
    border-radius: 50%;
}

.catalog-empty__icon .icon {
    width: 26px;
    height: 26px;
}

.explorer__empty h2 {
    margin: 6px 0 0;
    font-size: 24px;
    font-weight: 500;
}

.explorer__empty p {
    margin: 0 0 10px;
    color: var(--zt-text);
}

/* Compare tray: rises from the bottom once a course is ticked */
.compare-tray {
    position: fixed;
    right: 0;
    bottom: 20px;
    left: 0;
    z-index: 90;
    display: flex;
    justify-content: center;
    padding-inline: 16px;
    animation: tray-up 0.5s var(--zt-ease) both;
}

.compare-tray[hidden] {
    display: none;
}

.compare-tray__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    max-width: 920px;
    padding: 12px 12px 12px 22px;
    color: #fff;
    background: var(--zt-ink);
    border-radius: 18px;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 52, 0.7);
}

.compare-tray__inner p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.compare-tray__inner p strong {
    color: #fff;
}

.compare-tray__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-right: auto;
}

.compare-tray__chips li {
    max-width: 200px;
    overflow: hidden;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.compare-tray .btn-outline {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
}

.compare-tray .btn-outline:hover {
    color: var(--zt-ink);
    background: #fff;
}

.compare-tray .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

@keyframes tray-up {
    from { opacity: 0; transform: translateY(30px); }
}

/* Compare table in a dialog */
.compare-modal {
    position: fixed;
    inset: 0;
    z-index: 310;
    display: grid;
    place-items: center;
    padding: 20px;
}

.compare-modal[hidden] {
    display: none;
}

.compare-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 52, 0.55);
    backdrop-filter: blur(6px);
}

.compare-modal__panel {
    position: relative;
    width: min(1000px, 100%);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    background: #fff;
    border-radius: 26px;
    animation: compare-in 0.5s var(--zt-ease) both;
}

.compare-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    border-bottom: 1px solid var(--zt-line);
}

.compare-modal__head h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
}

.compare-modal__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--zt-ink);
    background: var(--zt-ground);
    border-radius: 50%;
    transition: transform 0.3s var(--zt-ease);
}

.compare-modal__close:hover {
    transform: rotate(90deg);
}

.compare-modal__close .icon {
    width: 18px;
    height: 18px;
}

.compare-modal__scroll {
    max-height: calc(100vh - 130px);
    overflow: auto;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.compare-table th,
.compare-table td {
    padding: 14px 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--zt-line);
}

.compare-table tbody th {
    width: 190px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--zt-text);
    background: var(--zt-ground);
}

.compare-table tbody tr:nth-child(even) td {
    background: #fafbff;
}

.compare-table thead th:first-child {
    background: var(--zt-ground);
}

.compare-table__course {
    display: grid;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--zt-ink);
}

.compare-table__course img {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 14px;
}

@keyframes compare-in {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
}

/* Help band */
@media (max-width: 1023px) {
    .explore-hero__inner,
    .explorer__layout,
    /* No room for a side panel: each course row links straight to its page */
    .explorer__preview {
        display: none;
    }

    .course-line.is-current {
        transform: none;
    }
}

@media (max-width: 767px) {
    .explore-hero {
        padding-top: 140px;
    }

    .bubble {
        animation: none;
    }

    .explorer__count {
        width: 100%;
    }

    .segmented {
        width: 100%;
        overflow-x: auto;
    }

    .course-line__link img {
        width: 64px;
        height: 54px;
    }

    .course-line__price {
        display: none;
    }

}


/* --------------------------------------------------------------------------
   Wave edges: every coloured band meets the page on the same still curve.
   Each edge is a strip in the page colour, cut to a wave; no markup needed.
   The hero keeps its drifting waves.
   -------------------------------------------------------------------------- */

.section--panel,
.section--soft,
.section--grey,
.spotlight,
.faq-band,
.scoreboard {
    position: relative;
}

.section--panel::before,
.section--soft::before,
.section--grey::before,
.spotlight::before,
.faq-band::before,
.section--panel::after,
.section--soft::after,
.section--grey::after,
.spotlight::after,
.faq-band::after,
.scoreboard::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    height: clamp(28px, 4vw, 56px);
    background: var(--zt-ground);
    pointer-events: none;
}

.section--panel::before,
.section--soft::before,
.section--grey::before,
.spotlight::before,
.faq-band::before {
    top: -1px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C240,58 480,44 720,26 C960,8 1200,62 1440,34 L1440,0 L0,0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C240,58 480,44 720,26 C960,8 1200,62 1440,34 L1440,0 L0,0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.section--panel::after,
.section--soft::after,
.section--grey::after,
.spotlight::after,
.faq-band::after,
.scoreboard::after {
    bottom: -1px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C240,62 480,8 720,26 C960,44 1200,58 1440,22 L1440,60 L0,60 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C240,62 480,8 720,26 C960,44 1200,58 1440,22 L1440,60 L0,60 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Mirrored on alternate bands, so the page does not repeat one shape */
.spotlight::before,
.spotlight::after,
.scoreboard::after {
    transform: scaleX(-1);
}


/* --------------------------------------------------------------------------
   Forms: floating labels shared by both
   -------------------------------------------------------------------------- */

.float {
    position: relative;
}

.float .input,
.float .textarea {
    width: 100%;
    padding: 24px 16px 8px;
    font-size: 16px;
    background: #f5f7ff;
    border: 1.5px solid transparent;
    border-radius: 14px;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.float .input {
    height: 62px;
}

.float .textarea {
    min-height: 150px;
    padding-top: 30px;
    resize: vertical;
}

.float .input::placeholder,
.float .textarea::placeholder {
    color: transparent;
    transition: color 0.2s ease;
}

.float .input:focus::placeholder,
.float .textarea:focus::placeholder {
    color: var(--zt-grey, #9a9db5);
}

.float .field__label {
    position: absolute;
    top: 20px;
    left: 17px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--zt-text);
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.2s var(--zt-ease), color 0.2s ease;
}

.float .input:focus,
.float .textarea:focus {
    background: #fff;
    border-color: var(--zt-blue);
    box-shadow: 0 0 0 4px rgba(2, 36, 247, 0.1);
    outline: none;
}

.float .input:focus + .field__label,
.float .input:not(:placeholder-shown) + .field__label,
.float .textarea:focus + .field__label,
.float .textarea:not(:placeholder-shown) + .field__label {
    color: var(--zt-blue);
    transform: translateY(-11px) scale(0.75);
}

.float__count {
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-size: 12px;
    color: var(--zt-text);
}

/* Send button: the arrow sits in its own circle and slides across on hover */
.send-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 8px 8px 8px 26px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(120deg, var(--zt-blue) 0%, #3a5bff 60%, var(--zt-blue-light) 100%);
    border-radius: 999px;
    box-shadow: 0 18px 32px -18px rgba(2, 36, 247, 0.9);
    transition: transform 0.25s ease;
}

.send-btn[hidden] {
    display: none;
}

.send-btn:hover {
    transform: translateY(-2px);
}

.send-btn__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--zt-blue);
    background: #fff;
    border-radius: 50%;
    transition: transform 0.35s var(--zt-ease);
}

.send-btn__icon .icon {
    width: 17px;
    height: 17px;
}

.send-btn:hover .send-btn__icon {
    transform: translateX(4px) rotate(-8deg);
}

/* --------------------------------------------------------------------------
   Contact page: blue panel with the form overlapping it
   -------------------------------------------------------------------------- */

.studio {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
}

.studio__panel {
    padding: clamp(32px, 4vw, 56px);
    padding-right: clamp(60px, 9vw, 130px);
    color: #fff;
    background:
        radial-gradient(circle at 90% 8%, rgba(9, 153, 252, 0.7), transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(247, 112, 30, 0.32), transparent 42%),
        linear-gradient(145deg, var(--zt-blue-dark) 0%, var(--zt-blue) 70%);
    border-radius: 32px;
}

.studio__panel .sec-eyebrow {
    color: #cfe6ff;
}

.studio__title {
    margin: 0;
    font-size: clamp(2.4rem, 4.6vw, 3.6rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: #fff;
}

.studio__title span {
    color: #ffc79f;
}

.studio__intro {
    margin: 16px 0 28px;
    color: rgba(255, 255, 255, 0.85);
}

.studio__ways {
    display: grid;
    gap: 10px;
}

.studio__ways a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    transition: background-color 0.25s ease, transform 0.3s var(--zt-ease);
}

.studio__ways a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    transform: translateX(4px);
}

.studio__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--zt-blue);
    background: #fff;
    border-radius: 13px;
}

.studio__icon .icon {
    width: 19px;
    height: 19px;
}

.studio__ways small {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cfe6ff;
}

.studio__ways strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.studio__ways em {
    display: block;
    font-size: 13px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.72);
}

.studio__map {
    position: relative;
    display: block;
    height: 130px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 16px;
}

.studio__map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.studio__map span {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zt-ink);
    background: #fff;
    border-radius: 999px;
}

.studio__map .icon {
    width: 14px;
    height: 14px;
    color: var(--zt-orange);
}

.studio__form {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 16px;
    margin-left: clamp(-90px, -6vw, -40px);
    padding: clamp(24px, 3.4vw, 44px);
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 40px 70px -44px rgba(0, 0, 52, 0.6);
}

.studio__form .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

.studio__form .send-btn {
    justify-self: start;
}

.topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.topic-chips legend {
    margin-bottom: 10px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--zt-ink);
}

.topic-chip {
    position: relative;
    cursor: pointer;
}

.topic-chip input {
    position: absolute;
    opacity: 0;
}

.topic-chip span {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--zt-ink);
    background: #f5f7ff;
    border: 1.5px solid transparent;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.topic-chip:hover span {
    border-color: var(--zt-blue);
}

.topic-chip input:checked + span {
    color: #fff;
    background: var(--zt-orange);
}

.topic-chip input:focus-visible + span {
    outline: 2px solid var(--zt-blue);
    outline-offset: 2px;
}

.studio__note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 6px;
    padding-top: 16px;
    font-size: 14px;
    color: var(--zt-text);
    border-top: 1px dashed var(--zt-line);
}

.studio__note strong {
    color: var(--zt-ink);
}

.studio__note a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--zt-blue);
}

.studio__note .icon {
    width: 14px;
    height: 14px;
}

/* --------------------------------------------------------------------------
   Register page: step wizard beside a live booking pass
   -------------------------------------------------------------------------- */

.booking__head {
    max-width: 680px;
    margin-bottom: 32px;
}

.booking__head p:last-child {
    margin: 12px 0 0;
    color: var(--zt-text);
}

.booking__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.wizard {
    display: grid;
    gap: 24px;
    padding: clamp(22px, 3vw, 36px);
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 34px 60px -46px rgba(0, 0, 52, 0.6);
}

.wizard__steps {
    display: none;
}

.wizard.is-wizard .wizard__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.wizard__steps li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: var(--zt-text);
}

/* Line joining each step to the next */
.wizard__steps li + li::before {
    content: "";
    position: absolute;
    top: 18px;
    right: calc(50% + 24px);
    left: calc(-50% + 24px);
    height: 2px;
    background: var(--zt-panel);
    transition: background-color 0.3s ease;
}

.wizard__steps li span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-weight: 600;
    color: var(--zt-text);
    background: var(--zt-panel);
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--zt-ease);
}

.wizard__steps li.is-current {
    color: var(--zt-ink);
}

.wizard__steps li.is-current span {
    color: #fff;
    background: var(--zt-blue);
    transform: scale(1.1);
}

.wizard__steps li.is-done span {
    color: #fff;
    background: var(--zt-orange);
}

.wizard__steps li.is-done + li::before,
.wizard__steps li.is-current::before {
    background: var(--zt-orange);
}

.wizard__panel {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    border: 0;
}

.wizard.is-wizard .wizard__panel {
    display: none;
}

.wizard.is-wizard .wizard__panel.is-current {
    display: grid;
}

.wizard__legend {
    padding: 0;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--zt-ink);
}

.wizard__panel .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

.wizard.is-wizard .wizard__select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* Course picker: rows with a photo; the chosen one is ticked */
.course-picker {
    display: none;
    gap: 8px;
    max-height: 400px;
    padding-right: 6px;
    overflow-y: auto;
}

.wizard.is-wizard .course-picker {
    display: grid;
}

.course-pick {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 8px;
    text-align: left;
    background: #f5f7ff;
    border: 1.5px solid transparent;
    border-radius: 16px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.course-pick:hover {
    border-color: rgba(2, 36, 247, 0.35);
}

.course-pick.is-picked {
    background: #fff;
    border-color: var(--zt-blue);
}

.course-pick img {
    flex: none;
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 10px;
}

.course-pick > span:nth-child(2) {
    display: grid;
    flex: 1;
    min-width: 0;
}

.course-pick strong {
    font-size: 16px;
    font-weight: 600;
    color: var(--zt-ink);
}

.course-pick small {
    font-size: 13px;
    color: var(--zt-text);
}

.course-pick__tick {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: 6px;
    color: #fff;
    background: var(--zt-blue);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.3s var(--zt-ease);
}

.course-pick__tick .icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
}

.course-pick.is-picked .course-pick__tick {
    opacity: 1;
    transform: none;
}

.wizard .mode-option__body {
    height: 100%;
    background: #f5f7ff;
    border-color: transparent;
    border-radius: 18px;
}

.wizard .mode-option input:checked + .mode-option__body {
    background: #fff;
    border-color: var(--zt-blue);
}

.wizard__review {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 20px;
    margin: 0;
    padding: 16px 18px;
    font-size: 15px;
    background: #f5f7ff;
    border-radius: 16px;
}

.wizard__review dt {
    color: var(--zt-text);
}

.wizard__review dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.wizard:not(.is-wizard) .wizard__review,
.wizard:not(.is-wizard) [data-wizard-back],
.wizard:not(.is-wizard) [data-wizard-next] {
    display: none;
}

.wizard__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px dashed var(--zt-line);
}

.wizard__nav > .send-btn {
    margin-left: auto;
}

.wizard__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--zt-text);
}

.wizard__back[hidden] {
    display: none;
}

.wizard__back:hover {
    color: var(--zt-blue);
}

.wizard__back .icon {
    width: 16px;
    height: 16px;
}

/* Booking pass: the aside's summary, with notches cut where photo meets text */
.booking__aside {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 16px;
}

.pass {
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 56px -42px rgba(0, 0, 52, 0.6);
}

.pass__media {
    position: relative;
}

.pass__media img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
}

.pass__price {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    font-weight: 700;
    color: var(--zt-blue);
    background: #fff;
    border-radius: 999px;
}

.pass__price[hidden] {
    display: none;
}

.pass__body {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 18px 20px 20px;
    border-top: 2px dashed var(--zt-line);
}

.pass__body::before,
.pass__body::after {
    content: "";
    position: absolute;
    top: -12px;
    width: 22px;
    height: 22px;
    background: var(--zt-ground);
    border-radius: 50%;
}

.pass__body::before {
    left: -11px;
}

.pass__body::after {
    right: -11px;
}

.pass__body small {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zt-orange);
}

.pass__body strong {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.pass__body ul {
    display: grid;
    gap: 6px;
    margin-top: 6px;
    font-size: 14px;
    color: var(--zt-text);
}

.pass__body li {
    display: flex;
    gap: 8px;
}

.pass__body li[hidden] {
    display: none;
}

.pass__body .icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--zt-blue);
}

@media (max-width: 1023px) {
    .studio,
    .booking__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .studio__panel {
        padding-right: clamp(32px, 4vw, 56px);
        padding-bottom: 80px;
    }

    .studio__form {
        margin: -56px 16px 0;
    }

    .booking__aside {
        position: static;
    }
}

@media (max-width: 767px) {
    .studio__form {
        margin-inline: 8px;
    }

    .studio__form .form-row,
    .wizard__panel .form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .wizard__steps li {
        font-size: 11px;
    }
}


/* --------------------------------------------------------------------------
   Toast: the message after the newsletter or a blog comment
   -------------------------------------------------------------------------- */

.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(440px, calc(100vw - 32px));
    padding: 14px 16px;
    color: #fff;
    background: var(--zt-ink);
    border-radius: 16px;
    box-shadow: 0 24px 44px -20px rgba(0, 0, 52, 0.7);
    animation: toast-in 0.5s var(--zt-ease);
}

.toast[hidden] {
    display: none;
}

.toast p {
    margin: 0;
    font-size: 15px;
}

.toast--error {
    background: #b3261e;
}

.toast > .icon {
    flex: none;
    color: var(--zt-orange);
}

.toast--error > .icon {
    color: #fff;
}

.toast button {
    display: grid;
    flex: none;
    place-items: center;
    color: inherit;
}

.toast button .icon {
    width: 16px;
    height: 16px;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
}

/* --------------------------------------------------------------------------
   Form pages: a coloured band with drifting waves and a wavy lower edge
   -------------------------------------------------------------------------- */

.form-stage {
    position: relative;
    padding-block: clamp(150px, 15vw, 190px) clamp(170px, 16vw, 230px);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 12%, rgba(9, 153, 252, 0.75), transparent 44%),
        radial-gradient(circle at 6% 74%, rgba(247, 112, 30, 0.28), transparent 40%),
        linear-gradient(150deg, var(--zt-blue-dark) 0%, var(--zt-blue) 72%);
}

.form-stage--navy {
    background:
        radial-gradient(circle at 12% 18%, rgba(2, 36, 247, 0.8), transparent 46%),
        radial-gradient(circle at 92% 82%, rgba(247, 112, 30, 0.4), transparent 42%),
        var(--zt-ink);
}

.form-stage__inner {
    position: relative;
    z-index: 1;
}

.wizard,
.booking__aside,
.studio__form {
    color: var(--zt-ink);
}

.studio__panel,
.studio__panel a {
    color: #fff;
}

.form-stage__waves {
    position: absolute;
    inset: auto 0 -1px;
    height: clamp(130px, 15vw, 220px);
    overflow: hidden;
}

.form-stage__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    max-width: none;
    height: 100%;
    animation: stage-drift 22s linear infinite;
}

.form-stage__wave--1 {
    height: 100%;
    fill: rgba(255, 255, 255, 0.12);
    animation-duration: 26s;
}

.form-stage__wave--2 {
    height: 78%;
    fill: rgba(255, 255, 255, 0.2);
    animation-duration: 18s;
    animation-direction: reverse;
}

.form-stage__wave--3 {
    height: 52%;
    fill: var(--zt-ground);
    animation-duration: 14s;
}

@keyframes stage-drift {
    to {
        transform: translateX(-50%);
    }
}

.booking__head,
.booking__head .section-title,
.booking__head .pill {
    color: #fff;
}

.booking__head p:last-child {
    color: rgba(255, 255, 255, 0.85);
}

.booking__head .text-accent {
    color: #ffc79f;
}

.booking__head {
    animation: stage-rise 0.7s var(--zt-ease) both;
}

.wizard,
.studio__form {
    animation: stage-rise 0.8s 0.12s var(--zt-ease) both;
}

.booking__aside {
    animation: stage-rise 0.8s 0.24s var(--zt-ease) both;
}

@keyframes stage-rise {
    from {
        transform: translateY(44px);
    }
}

/* Contact: the panel melts into the band, its links arrive one at a time */
.studio__panel {
    padding: 0 clamp(60px, 9vw, 130px) 0 0;
    background: none;
    border-radius: 0;
}

.studio__panel > *,
.studio__ways li {
    animation: panel-in 0.7s var(--zt-ease) both;
}

.studio__panel > :nth-child(2) { animation-delay: 0.08s; }
.studio__panel > :nth-child(3) { animation-delay: 0.16s; }
.studio__ways li:nth-child(1) { animation-delay: 0.28s; }
.studio__ways li:nth-child(2) { animation-delay: 0.38s; }
.studio__ways li:nth-child(3) { animation-delay: 0.48s; }
.studio__panel > .studio__map { animation-delay: 0.58s; }

@keyframes panel-in {
    from {
        transform: translateX(-44px);
    }
}

.studio__form > * {
    animation: panel-rise 0.6s var(--zt-ease) both;
}

.studio__form > :nth-child(4) { animation-delay: 0.3s; }
.studio__form > :nth-child(5) { animation-delay: 0.38s; }
.studio__form > :nth-child(6) { animation-delay: 0.46s; }
.studio__form > :nth-child(7) { animation-delay: 0.54s; }
.studio__form > :nth-child(8) { animation-delay: 0.62s; }
.studio__form > :nth-child(9) { animation-delay: 0.7s; }

@keyframes panel-rise {
    from {
        transform: translateY(24px);
    }
}

/* Fields: a small wave draws itself under whichever field is in use */
.float::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 4px;
    left: 14px;
    height: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 3c6-4 6-4 12 0s6 4 12 0' fill='none' stroke='%23f7701e' stroke-width='2'/%3E%3C/svg%3E") left center repeat-x;
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
    transition: clip-path 0.55s var(--zt-ease);
}

.float:focus-within::after {
    clip-path: inset(0 0 0 0);
}

.float.is-invalid,
.field.is-invalid {
    animation: field-shake 0.4s ease;
}

@keyframes field-shake {
    25% { transform: translateX(-6px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

/* Chips pop when chosen */
.topic-chip span {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--zt-ease);
}

.topic-chip:hover span {
    transform: translateY(-2px);
}

.topic-chip input:checked + span {
    animation: chip-pop 0.4s var(--zt-ease);
}

@keyframes chip-pop {
    40% { transform: scale(1.08); }
}

/* Wizard: wavy progress line that fills as the steps go by */
.wizard {
    position: relative;
    overflow: hidden;
}

.wizard__track {
    display: none;
}

.wizard.is-wizard .wizard__track {
    position: absolute;
    top: calc(clamp(22px, 3vw, 36px) + 11px);
    right: 12.5%;
    left: 12.5%;
    display: block;
    height: 16px;
}

.wizard__track svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: var(--zt-panel);
    stroke-width: 3;
}

.wizard__track path {
    vector-effect: non-scaling-stroke;
}

.wizard__track .wizard__track-fill {
    stroke: var(--zt-orange);
    clip-path: inset(-8px calc(100% - var(--progress, 0%)) -8px 0);
    transition: clip-path 0.7s var(--zt-ease);
}

.wizard__steps li + li::before {
    display: none;
}

.wizard__steps li span {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 5px #fff;
}

.wizard__steps li.is-current span {
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(2, 36, 247, 0.25);
    animation: dot-pulse 2.2s ease-in-out infinite;
}

@keyframes dot-pulse {
    50% {
        box-shadow: 0 0 0 5px #fff, 0 0 0 12px rgba(2, 36, 247, 0.08);
    }
}

/* Steps slide with the direction of travel and their contents arrive in turn */
.wizard__stage {
    position: relative;
    transition: height 0.4s var(--zt-ease);
}

.wizard.is-wizard .wizard__stage {
    overflow: hidden;
    padding: 8px;
    margin: -8px;
}

.wizard.is-wizard .wizard__panel.is-current > * {
    animation: step-in 0.5s var(--zt-ease) both;
}

.wizard[data-dir="back"] .wizard__panel.is-current > * {
    animation-name: step-in-back;
}

.wizard.is-wizard .wizard__panel.is-current > :nth-child(2) { animation-delay: 0.07s; }
.wizard.is-wizard .wizard__panel.is-current > :nth-child(3) { animation-delay: 0.14s; }
.wizard.is-wizard .wizard__panel.is-current > :nth-child(4) { animation-delay: 0.21s; }

.wizard.is-wizard .wizard__panel.is-leaving {
    animation: step-out 0.24s ease forwards;
}

.wizard[data-dir="back"] .wizard__panel.is-leaving {
    animation-name: step-out-back;
}

@keyframes step-in {
    from {
        transform: translateX(64px);
    }
}

@keyframes step-in-back {
    from {
        transform: translateX(-64px);
    }
}

@keyframes step-out {
    to {
        opacity: 0;
        transform: translateX(-44px);
    }
}

@keyframes step-out-back {
    to {
        opacity: 0;
        transform: translateX(44px);
    }
}

/* Courses in the picker come in as a cascade, and the pick fills with a sweep */
.course-picker li {
    animation: step-in 0.5s var(--zt-ease) both;
}

.course-picker li:nth-child(2) { animation-delay: 0.05s; }
.course-picker li:nth-child(3) { animation-delay: 0.1s; }
.course-picker li:nth-child(4) { animation-delay: 0.15s; }
.course-picker li:nth-child(5) { animation-delay: 0.2s; }
.course-picker li:nth-child(n + 6) { animation-delay: 0.25s; }

.course-pick {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: border-color 0.2s ease, transform 0.3s var(--zt-ease);
}

.course-pick:hover {
    transform: translateX(4px);
}

.course-pick img {
    transition: transform 0.4s var(--zt-ease);
}

.course-pick:hover img {
    transform: scale(1.08) rotate(-2deg);
}

.course-pick::before,
.wizard .mode-option__body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, #e4e9ff, #d7ecff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--zt-ease);
}

.course-pick.is-picked::before,
.wizard .mode-option input:checked + .mode-option__body::before {
    transform: none;
}

.wizard .mode-option__body {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: border-color 0.25s ease, transform 0.3s var(--zt-ease);
}

.wizard .mode-option:hover .mode-option__body {
    transform: translateY(-3px);
}

.wizard .mode-option input:checked + .mode-option__body .icon {
    animation: chip-pop 0.5s var(--zt-ease);
    color: var(--zt-orange);
}

/* Pass: flips a little on each change, and gets stamped at the last step */
.pass {
    position: relative;
}

.pass.is-pop {
    animation: pass-pop 0.55s var(--zt-ease);
}

@keyframes pass-pop {
    35% {
        transform: rotate(-1.4deg) scale(1.02);
    }
}

.pass__stamp {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 4px 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--zt-orange);
    border-radius: 8px;
    opacity: 0;
    transform: rotate(-9deg) scale(1.9);
    transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.pass.is-ready .pass__stamp {
    opacity: 1;
    transform: rotate(-9deg);
}

/* Send button lifts off */
.send-btn.is-sending {
    pointer-events: none;
    opacity: 0.85;
}

.send-btn.is-sending .send-btn__icon .icon {
    animation: send-fly 0.8s ease-in infinite;
}

@keyframes send-fly {
    50% {
        opacity: 0;
        transform: translate(14px, -14px);
    }
    51% {
        opacity: 0;
        transform: translate(-14px, 14px);
    }
}

/* Done screen, in place of the form */
.done-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 560px;
    margin-inline: auto;
    padding: clamp(32px, 5vw, 56px);
    text-align: center;
    color: var(--zt-ink);
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 40px 70px -44px rgba(0, 0, 52, 0.6);
    animation: stage-rise 0.7s var(--zt-ease) both;
}

.done-card h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 500;
    letter-spacing: -0.03em;
}

.done-card p {
    margin: 0 0 8px;
    color: var(--zt-text);
}

.done-card__tick {
    width: 96px;
    height: 96px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
}

.done-card__tick circle,
.done-card__tick path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tick-draw 0.7s 0.2s var(--zt-ease) forwards;
}

.done-card__tick circle {
    stroke: var(--zt-blue);
}

.done-card__tick path {
    stroke: var(--zt-orange);
    animation-delay: 0.75s;
    animation-duration: 0.45s;
}

@keyframes tick-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 1023px) {
    .studio__panel {
        padding: 0 0 32px;
    }

    .studio__form {
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-stage *,
    .form-stage {
        animation: none !important;
    }

    .done-card__tick circle,
    .done-card__tick path {
        stroke-dashoffset: 0;
    }
}

/* Keep clear of the floating header, and of the admin bar when logged in */
.admin-bar {
    --admin-bar: 32px;
}

@media (max-width: 1023px) {
    .hero {
        padding-top: calc(160px + var(--admin-bar, 0px));
    }
}

@media (max-width: 782px) {
    .admin-bar {
        --admin-bar: 46px;
    }
}

.form-stage {
    padding-top: calc(clamp(150px, 15vw, 190px) + var(--admin-bar, 0px));
}