/* =========================================================================
   Magic Hill — theme v2 (2026 redesign)

   Design tokens are transcribed verbatim from the Claude Design artboards,
   which specify every colour in oklch(). Component classes below are the
   building blocks the .astro components compose; nothing here is page
   specific, so new pages can be built from these alone.

   Mobile first: the base rules are the narrow layout, and the only two
   breakpoints are 720px (two columns) and 1024px (desktop nav, three
   columns), matching the artboards.
   ========================================================================= */

:root {
    /* --- brand ------------------------------------------------------- */
    --v2-purple: oklch(46% 0.19 300);
    --v2-green: oklch(58% 0.13 165);
    --v2-green-ink: oklch(40% 0.11 165);
    --v2-on-purple: oklch(99% 0.005 300);
    --v2-on-green: oklch(99% 0.005 165);

    /* --- neutrals ---------------------------------------------------- */
    --v2-ink: oklch(22% 0.02 280);
    --v2-ink-2: oklch(30% 0.02 280);
    --v2-ink-3: oklch(38% 0.02 280);
    --v2-ink-4: oklch(45% 0.02 280);
    --v2-ink-5: oklch(50% 0.02 280);

    /* --- surfaces ---------------------------------------------------- */
    --v2-canvas: oklch(98% 0.006 85);
    --v2-surface: oklch(99% 0.004 85);
    --v2-white: #ffffff;
    --v2-border: oklch(91% 0.02 165);
    --v2-border-head: oklch(90% 0.02 165);
    --v2-border-purple: oklch(91% 0.02 300);
    --v2-border-soft: oklch(94% 0.01 165);
    --v2-media-bg: oklch(94% 0.02 165);

    /* --- tints ------------------------------------------------------- */
    --v2-tint-green: oklch(96% 0.015 165);
    --v2-pill-green: oklch(95% 0.03 165);
    --v2-tint-purple: oklch(96% 0.015 300);

    /* --- footer ------------------------------------------------------ */
    --v2-foot-text: oklch(90% 0.01 280);
    --v2-foot-head: oklch(96% 0.01 280);
    --v2-foot-link: oklch(85% 0.03 165);
    --v2-foot-muted: oklch(70% 0.01 280);

    /* --- shape ------------------------------------------------------- */
    --v2-r-img: 12px;
    --v2-r-card: 18px;
    --v2-r-figure: 20px;
    --v2-r-panel: 22px;
    --v2-r-pill: 999px;

    /* --- rhythm ------------------------------------------------------ */
    --v2-pad-x: clamp(16px, 4vw, 32px);
    --v2-sec-y: clamp(40px, 6vw, 72px);
    --v2-sec-y-lg: clamp(48px, 7vw, 96px);
    --v2-gap: 24px;

    /* --- measure ----------------------------------------------------- */
    --v2-w-page: 1200px;
    --v2-w-content: 1000px;
    --v2-w-prose: 900px;

    /* Every testimonial card is exactly this tall, so the whole row lines up
       and each signature sits on the same baseline. Quotes too long to fit are
       faded out and expand on hover, focus or tap. */
    --v2-quote-height: 420px;
    --v2-quote-fade: 72px;

    /* --- type -------------------------------------------------------- */
    --v2-font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --v2-font-display: 'Baloo 2', 'Trebuchet MS', var(--v2-font-body);

    /* Minimum comfortable tap target. */
    --v2-tap: 44px;
}

/* =========================================================================
   Base
   ========================================================================= */

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

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.v2-page {
    font-family: var(--v2-font-body);
    background: var(--v2-canvas);
    color: var(--v2-ink);
    /* `clip` rather than `hidden`: hidden would make this a scroll container
       and break `position: sticky` on the header inside it. */
    overflow-x: clip;
}

/* Wrapped in :where() so it carries zero specificity: this is the default for
   a bare link, and every component below (buttons, nav, cards, footer) sets its
   own colour without needing to out-specify it. Written as a plain
   `.v2-page a` it would beat single-class rules like `.v2-btn--primary` and
   paint button labels purple on purple. */
:where(.v2-page a) {
    color: var(--v2-purple);
    text-decoration: none;
}

:where(.v2-page a:hover) {
    color: var(--v2-green-ink);
}

.v2-page :focus-visible {
    outline: 2px solid var(--v2-purple);
    outline-offset: 3px;
    border-radius: 4px;
}

.v2-page img {
    max-width: 100%;
}

.v2-page h1,
.v2-page h2,
.v2-page h3,
.v2-page h4 {
    font-family: var(--v2-font-display);
    text-wrap: pretty;
}

/* Skip link — the desktop nav is long, and the mobile menu is a toggle. */
.v2-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--v2-purple);
    color: var(--v2-on-purple);
    padding: 12px 20px;
    border-radius: 0 0 var(--v2-r-card) 0;
    font-weight: 800;
}

.v2-skip:focus {
    left: 0;
}

/* =========================================================================
   Layout primitives
   ========================================================================= */

/* Wrap content in this — never put it on a heading or paragraph. Typography
   classes below reset `margin` and, at equal specificity, the later rule wins:
   `class="v2-h2 v2-container"` silently loses `margin: 0 auto` and the element
   sits flush left instead of centred. */
.v2-container {
    max-width: var(--v2-w-page);
    margin: 0 auto;
    padding-left: var(--v2-pad-x);
    padding-right: var(--v2-pad-x);
}

.v2-container--content {
    max-width: var(--v2-w-content);
}

.v2-container--prose {
    max-width: var(--v2-w-prose);
}

.v2-section {
    padding-top: var(--v2-sec-y);
    padding-bottom: var(--v2-sec-y);
}

.v2-section--lg {
    padding-top: var(--v2-sec-y-lg);
    padding-bottom: var(--v2-sec-y-lg);
}

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

.v2-section--flush-bottom {
    padding-bottom: 0;
}

.v2-section--tint-green {
    background: var(--v2-tint-green);
}

.v2-section--tint-purple {
    background: var(--v2-tint-purple);
}

.v2-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 32px);
}

.v2-grid {
    display: grid;
    gap: var(--v2-gap);
}

.v2-grid--cards {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.v2-grid--wide-cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.v2-grid--stats {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 20px;
}

.v2-grid--pillars {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Course and price grids step 1 -> 2 -> 3 rather than auto-fitting, so the
   last row never leaves a single stretched card. */
.v2-grid--tiles {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--v2-w-content);
    margin: 0 auto;
}

@media (min-width: 720px) {
    .v2-grid--tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .v2-grid--tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================================
   Type
   ========================================================================= */

.v2-h1 {
    font-weight: 800;
    font-size: clamp(34px, 5.5vw, 56px);
    line-height: 1.08;
    margin: 0;
}

.v2-h2 {
    font-weight: 800;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    margin: 0;
}

.v2-h3 {
    font-weight: 700;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.25;
    margin: 0;
}

.v2-subtitle {
    font-family: var(--v2-font-display);
    font-weight: 600;
    font-size: clamp(20px, 2.6vw, 26px);
    line-height: 1.3;
    margin: 0;
    color: var(--v2-purple);
}

.v2-lead {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.6;
    margin: 0;
    color: var(--v2-ink-3);
}

.v2-center {
    text-align: center;
}

.v2-note {
    margin: 0;
    font-size: 14px;
    color: var(--v2-ink-5);
}

/* --- prose --------------------------------------------------------- */

.v2-prose {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 32px);
}

.v2-prose p,
.v2-prose ul,
.v2-prose ol {
    margin: 0;
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.7;
    color: var(--v2-ink-2);
}

.v2-prose > p:first-of-type {
    font-size: clamp(17px, 2vw, 19px);
}

.v2-prose ul {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-prose ul li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.v2-prose ul li::before {
    content: "\2022";
    color: var(--v2-green);
    font-weight: 800;
    flex-shrink: 0;
}

.v2-prose h3 {
    font-weight: 700;
    font-size: clamp(21px, 2.6vw, 26px);
    line-height: 1.3;
    margin: 0;
}

.v2-prose h4 {
    font-weight: 700;
    font-size: 19px;
    margin: 0;
}

.v2-prose strong {
    color: var(--v2-ink);
}

/* =========================================================================
   Header
   ========================================================================= */

.v2-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--v2-white);
    border-bottom: 1px solid var(--v2-border-head);
}

.v2-header__bar {
    max-width: var(--v2-w-page);
    margin: 0 auto;
    padding: clamp(10px, 2vw, 16px) var(--v2-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.v2-header__logo {
    display: flex;
    align-items: center;
}

.v2-header__logo img {
    height: clamp(46px, 6vw, 64px);
    width: auto;
    display: block;
}

.v2-nav {
    display: none;
    align-items: center;
    gap: clamp(14px, 1.6vw, 24px);
}

.v2-nav a {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    color: var(--v2-ink);
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}

.v2-nav a:hover {
    color: var(--v2-green-ink);
}

.v2-nav a.is-active {
    color: var(--v2-purple);
    border-bottom-color: var(--v2-purple);
}

.v2-nav a.is-highlight,
.v2-nav a.is-highlight:hover {
    background: var(--v2-green);
    color: var(--v2-on-green);
    padding: 7px 14px;
    border-radius: var(--v2-r-pill);
    border-bottom-color: transparent;
}

/* --- hamburger ------------------------------------------------------ */

.v2-burger {
    display: flex;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    width: var(--v2-tap);
    height: var(--v2-tap);
    align-items: center;
    justify-content: center;
}

.v2-burger span {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--v2-ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.v2-header[data-menu-open] .v2-burger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.v2-header[data-menu-open] .v2-burger span:nth-child(2) {
    opacity: 0;
}

.v2-header[data-menu-open] .v2-burger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- mobile drawer -------------------------------------------------- */

.v2-mobile-nav {
    display: none;
    flex-direction: column;
    padding: 8px 20px 24px;
    gap: 4px;
    border-top: 1px solid var(--v2-border-head);
    background: var(--v2-white);
}

.v2-header[data-menu-open] .v2-mobile-nav {
    display: flex;
}

.v2-mobile-nav a {
    font-weight: 700;
    font-size: 17px;
    color: var(--v2-ink);
    padding: 12px 4px;
    min-height: var(--v2-tap);
    border-bottom: 1px solid var(--v2-border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.v2-mobile-nav a.is-active {
    color: var(--v2-purple);
}

.v2-mobile-nav a.is-highlight {
    color: var(--v2-green-ink);
}

.v2-mobile-nav__cta,
.v2-mobile-nav a.v2-mobile-nav__cta {
    background: var(--v2-purple);
    color: var(--v2-on-purple);
    padding: 12px 20px;
    border-radius: var(--v2-r-pill);
    font-weight: 800;
    font-size: 16px;
    justify-content: center;
    border-bottom: none;
    margin-top: 10px;
}

.v2-badge {
    background: var(--v2-green);
    color: var(--v2-on-green);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: var(--v2-r-pill);
    letter-spacing: 0.03em;
}

@media (min-width: 1024px) {
    .v2-nav {
        display: flex;
    }

    .v2-burger {
        display: none;
    }

    .v2-mobile-nav,
    .v2-header[data-menu-open] .v2-mobile-nav {
        display: none;
    }
}

/* =========================================================================
   Buttons and pills
   ========================================================================= */

.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--v2-tap);
    padding: 15px 28px;
    border-radius: var(--v2-r-pill);
    font-family: inherit;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    border: none;
    cursor: pointer;
}

.v2-btn--primary,
.v2-btn--primary:hover {
    background: var(--v2-purple);
    color: var(--v2-on-purple);
}

.v2-btn--primary:hover {
    background: oklch(52% 0.19 300);
}

.v2-btn--ghost,
.v2-btn--ghost:hover {
    background: oklch(99% 0.005 280 / 0.16);
    color: var(--v2-white);
    border: 1.5px solid oklch(99% 0.005 280 / 0.5);
}

.v2-btn--ghost:hover {
    background: oklch(99% 0.005 280 / 0.28);
}

.v2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.v2-eyebrow {
    display: inline-block;
    background: var(--v2-pill-green);
    color: var(--v2-green-ink);
    font-weight: 800;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: var(--v2-r-pill);
}

.v2-eyebrow--solid {
    background: var(--v2-green);
    color: var(--v2-on-green);
}

/* Inline tag inside prose — replaces v1's `w3-tag`. */
.v2-tag {
    display: inline-block;
    background: var(--v2-pill-green);
    color: var(--v2-green-ink);
    font-weight: 800;
    padding: 2px 10px;
    border-radius: var(--v2-r-pill);
    font-size: 0.92em;
}

.v2-tag--purple {
    background: var(--v2-tint-purple);
    color: var(--v2-purple);
}

/* =========================================================================
   Hero
   ========================================================================= */

.v2-hero {
    position: relative;
    width: 100%;
    min-height: clamp(420px, 56vh, 560px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: oklch(30% 0.03 280);
}

.v2-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}

.v2-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        oklch(20% 0.03 280 / 0.88) 0%,
        oklch(20% 0.03 280 / 0.62) 45%,
        oklch(20% 0.03 280 / 0.25) 100%
    );
}

.v2-hero__inner {
    position: relative;
    max-width: var(--v2-w-page);
    width: 100%;
    margin: 0 auto;
    padding: clamp(36px, 6vw, 72px) var(--v2-pad-x);
}

.v2-hero__title {
    font-weight: 800;
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1.05;
    margin: 20px 0 18px;
    color: var(--v2-white);
    max-width: 760px;
}

.v2-hero__lead {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.6;
    color: oklch(95% 0.01 280);
    margin: 0 0 30px;
    max-width: 560px;
    text-wrap: pretty;
}

/* --- page hero (sub-pages) ------------------------------------------ */

.v2-page-hero {
    padding-top: clamp(36px, 6vw, 72px);
    padding-bottom: clamp(20px, 3vw, 32px);
}

.v2-page-hero__eyebrow {
    margin-bottom: 20px;
}

.v2-page-hero__title {
    margin-bottom: 10px;
}

.v2-page-hero__lead {
    margin-top: 12px;
}

/* =========================================================================
   Cards
   ========================================================================= */

.v2-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r-card);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.v2-card--white {
    background: var(--v2-white);
}

a.v2-card:hover {
    color: inherit;
    border-color: var(--v2-green);
    box-shadow: 0 6px 20px oklch(22% 0.02 280 / 0.08);
    transform: translateY(-2px);
}

.v2-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.v2-card__icon--green {
    background: var(--v2-green);
}

.v2-card__icon--purple {
    background: var(--v2-purple);
}

.v2-card__icon img {
    height: 26px;
    width: auto;
    display: block;
}

.v2-card__title {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 21px;
    margin: 0;
    color: var(--v2-ink);
}

.v2-card__text {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--v2-ink-3);
    text-wrap: pretty;
}

.v2-card__more {
    font-weight: 800;
    font-size: 14.5px;
    color: var(--v2-purple);
    margin-top: auto;
}

/* --- stat ------------------------------------------------------------ */

.v2-stat {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r-card);
    padding: 28px 24px;
    text-align: center;
}

.v2-stat__value {
    font-family: var(--v2-font-display);
    font-weight: 800;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1;
    color: var(--v2-purple);
    /* Equal-width digits so the number does not jitter while counting up. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.v2-stat__label {
    font-size: 15px;
    color: var(--v2-ink-3);
    margin-top: 8px;
    font-weight: 600;
}

/* --- pillar ---------------------------------------------------------- */

.v2-pillar {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r-card);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.v2-pillar__title {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 22px;
    margin: 0;
}

.v2-pillar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-pillar__list li {
    display: flex;
    gap: 10px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--v2-ink-2);
    align-items: flex-start;
}

.v2-pillar__list li::before {
    content: "\2022";
    color: var(--v2-green);
    font-weight: 800;
    flex-shrink: 0;
}

/* --- course tile ----------------------------------------------------- */

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

a.v2-course:hover {
    color: inherit;
    border-color: var(--v2-green);
    box-shadow: 0 6px 20px oklch(22% 0.02 280 / 0.08);
    transform: translateY(-2px);
}

.v2-course__media {
    padding: 30px 30px 0;
}

.v2-course__media img {
    width: 80%;
    max-width: 320px;
    margin: 0 auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: var(--v2-r-img);
    background: var(--v2-media-bg);
}

.v2-course__body {
    padding: 24px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.v2-course__title {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 22px;
    margin: 0;
}

.v2-course__meta {
    margin: 0;
    font-size: 15px;
    color: var(--v2-ink-4);
}

.v2-course__more {
    margin-top: auto;
    padding-top: 14px;
    font-weight: 800;
    font-size: 15px;
    color: var(--v2-purple);
}

/* --- see-also -------------------------------------------------------- */

.v2-seealso {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r-card);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.v2-seealso:hover {
    color: inherit;
    border-color: var(--v2-green);
    box-shadow: 0 6px 20px oklch(22% 0.02 280 / 0.08);
    transform: translateY(-2px);
}

.v2-seealso--purple {
    border-color: var(--v2-border-purple);
}

.v2-seealso__eyebrow {
    font-size: 13px;
    font-weight: 800;
    color: var(--v2-green-ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.v2-seealso--purple .v2-seealso__eyebrow {
    color: var(--v2-purple);
}

.v2-seealso__title {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.3;
    color: var(--v2-ink);
}

/* =========================================================================
   Panels
   ========================================================================= */

.v2-panel {
    border-radius: var(--v2-r-panel);
    padding: clamp(26px, 4vw, 36px);
}

.v2-panel--purple {
    background: var(--v2-tint-purple);
    border: 1px solid var(--v2-border-purple);
}

.v2-panel--green {
    background: var(--v2-tint-green);
    border: 1px solid var(--v2-border);
}

.v2-panel > p {
    margin: 0;
    font-size: clamp(16px, 1.9vw, 18px);
    line-height: 1.7;
    color: var(--v2-ink-2);
    text-wrap: pretty;
}

/* --- call to action -------------------------------------------------- */

.v2-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-gap);
    align-items: center;
    justify-content: space-between;
}

.v2-cta__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-cta__title {
    font-family: var(--v2-font-display);
    font-weight: 800;
    font-size: clamp(22px, 3vw, 30px);
    margin: 0;
}

.v2-cta__text {
    margin: 0;
    font-size: 16px;
    color: var(--v2-ink-3);
}

.v2-cta__links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 700;
}

/* --- spec panel (course pages) --------------------------------------- */

.v2-spec {
    background: var(--v2-tint-purple);
    border: 1px solid var(--v2-border-purple);
    border-radius: var(--v2-r-card);
    padding: clamp(22px, 3vw, 28px);
    margin: 0;
    display: grid;
    gap: 14px;
}

.v2-spec__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}

.v2-spec__label {
    font-weight: 800;
    font-size: 14px;
    color: var(--v2-purple);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex: 0 0 auto;
}

.v2-spec__value {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--v2-ink-2);
}

/* =========================================================================
   Testimonial rail
   ========================================================================= */

.v2-rail-wrap {
    padding-top: var(--v2-sec-y-lg);
    padding-bottom: var(--v2-sec-y-lg);
}

.v2-rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px var(--v2-pad-x) 24px;
    /* Without this the snap area is the border box, so snapping the first card
       to `start` scrolls the left gutter out of view and the card sits flush
       against the window edge. */
    scroll-padding-inline: var(--v2-pad-x);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Each card keeps its own height, so expanding one on hover does not drag
       every sibling taller with it. Heights stay in a narrow band because
       long cards are capped at --v2-quote-max. */
    align-items: flex-start;
    /* Vertical drag scrolls the page, horizontal drag moves the rail. */
    touch-action: pan-x pan-y;
}

.v2-quote {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border-purple);
    border-radius: var(--v2-r-card);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 0 0 auto;
    width: min(340px, 82vw);
    /* Applies with or without JavaScript, so the signatures line up either way.
       The matching max-height is under .is-clamped, which the script adds only
       after measuring — without it long quotes grow rather than get cut. */
    min-height: var(--v2-quote-height);
    scroll-snap-align: start;
    margin: 0;
}

.v2-quote__text {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: oklch(28% 0.02 280);
    font-style: italic;
    /* Keeps the line breaks coming from the JSON, collapses other whitespace. */
    white-space: pre-line;
    /* Some testimonials contain long runs without spaces that not every engine
       knows how to break, and the text then overflows the card. */
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* `margin-top: auto` pins the signature — name and the details line under it —
   to the bottom of the card, whatever the quote above it is worth. Paired with
   --v2-quote-min that puts every signature in the row on one baseline.
   `flex: 0 0 auto` keeps it from being squeezed out by a long quote: the card
   clips the text, never this. */
.v2-quote__by {
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink-4);
    margin-top: auto;
    flex: 0 0 auto;
}

/* --- clipping long testimonials -------------------------------------- */
/* The script adds `is-clamped` once it has measured every card, and marks the
   ones that actually overflow with `data-clipped`. Without JavaScript nothing
   is capped and every testimonial is readable in full. */

.v2-rail.is-clamped .v2-quote {
    max-height: var(--v2-quote-height);
    transition: max-height 0.35s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.v2-rail.is-clamped .v2-quote__text {
    /* Flex items refuse to shrink below their content without this, and the
       byline would be pushed out of the card instead of the text clipping. */
    min-height: 0;
    overflow: hidden;
}

/* Fade the last lines out only where text is really cut off. */
.v2-rail.is-clamped .v2-quote[data-clipped] .v2-quote__text {
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 calc(100% - var(--v2-quote-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 calc(100% - var(--v2-quote-fade)),
        transparent 100%
    );
}

/* Hover, keyboard focus or a tap opens the card to its measured full height
   (--v2-quote-full, set per card by the script) and drops the fade. */
.v2-rail.is-clamped .v2-quote[data-clipped]:hover,
.v2-rail.is-clamped .v2-quote[data-clipped]:focus-visible,
.v2-rail.is-clamped .v2-quote[data-clipped]:focus-within,
.v2-rail.is-clamped .v2-quote[data-clipped].is-expanded {
    max-height: var(--v2-quote-full, none);
    border-color: var(--v2-purple);
}

.v2-rail.is-clamped .v2-quote[data-clipped]:hover .v2-quote__text,
.v2-rail.is-clamped .v2-quote[data-clipped]:focus-visible .v2-quote__text,
.v2-rail.is-clamped .v2-quote[data-clipped]:focus-within .v2-quote__text,
.v2-rail.is-clamped .v2-quote[data-clipped].is-expanded .v2-quote__text {
    -webkit-mask-image: none;
    mask-image: none;
}

.v2-rail.is-clamped .v2-quote[data-clipped] {
    cursor: pointer;
}

.v2-quote__name {
    display: block;
}

.v2-quote__meta {
    display: block;
    font-weight: 600;
    color: var(--v2-ink-5);
}

/* =========================================================================
   Pricing
   ========================================================================= */

.v2-toggle {
    display: flex;
    justify-content: center;
    margin: 0 0 36px;
}

/* The class rule above would otherwise defeat the `hidden` attribute, and the
   switch would show up with no script to make it work. */
.v2-toggle[hidden] {
    display: none;
}

.v2-toggle__group {
    display: inline-flex;
    background: var(--v2-white);
    border: 1px solid oklch(88% 0.02 165);
    border-radius: var(--v2-r-pill);
    padding: 4px;
    gap: 4px;
}

.v2-toggle__group button {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    padding: 10px 22px;
    min-height: var(--v2-tap);
    border-radius: var(--v2-r-pill);
    background: transparent;
    color: var(--v2-ink-3);
    transition: background 0.2s ease, color 0.2s ease;
}

.v2-toggle__group button[aria-pressed='true'] {
    background: var(--v2-purple);
    color: var(--v2-on-purple);
}

.v2-price {
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r-card);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-price__title {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 22px;
    margin: 0;
}

.v2-price__meta {
    margin: 0;
    font-size: 14.5px;
    color: var(--v2-ink-4);
}

.v2-price__figure {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.v2-price__amount {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

.v2-price__period {
    font-size: 15px;
    color: var(--v2-ink-4);
    font-weight: 600;
}

.v2-price__alt {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--v2-green-ink);
    font-weight: 700;
    min-height: 20px;
}

.v2-price__rule {
    height: 1px;
    background: var(--v2-border);
    margin: 10px 0 4px;
    border: 0;
}

.v2-price__schedule {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--v2-ink-2);
}

.v2-price__more {
    margin-top: auto;
    padding-top: 16px;
    font-weight: 800;
    font-size: 15px;
    color: var(--v2-purple);
}

/* Without JavaScript both price variants stay visible, one under the other,
   so the page is still complete. The script hides the inactive one. */
.v2-price__variant[hidden] {
    display: none;
}

/* =========================================================================
   Contact
   ========================================================================= */

.v2-info {
    border-radius: var(--v2-r-card);
    padding: 28px;
}

.v2-info--green {
    background: var(--v2-tint-green);
}

.v2-info--purple {
    background: var(--v2-tint-purple);
}

.v2-info__label {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 19px;
    margin-bottom: 10px;
}

.v2-info__value {
    font-size: 16px;
    line-height: 1.65;
    color: var(--v2-ink-2);
}

.v2-info__value a {
    font-size: 17px;
    font-weight: 700;
}

.v2-info__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 17px;
    font-weight: 700;
}

.v2-map {
    display: block;
}

.v2-map img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--v2-r-card);
    border: 1px solid var(--v2-border-head);
}

/* =========================================================================
   Figures, images and the lightbox
   ========================================================================= */

.v2-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-figure img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--v2-r-figure);
    display: block;
    border: 1px solid oklch(88% 0.03 165);
    background: var(--v2-tint-green);
    cursor: zoom-in;
}

.v2-figure figcaption {
    font-size: 14px;
    color: var(--v2-ink-5);
}

.v2-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: oklch(20% 0.03 280 / 0.92);
    padding: clamp(16px, 4vw, 48px);
    overflow: auto;
    cursor: zoom-out;
}

.v2-modal[data-open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-modal__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    max-width: 100%;
}

.v2-modal__content img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    border-radius: var(--v2-r-card);
    display: block;
}

.v2-modal__caption {
    margin: 0;
    color: var(--v2-foot-text);
    font-size: 15px;
    text-align: center;
}

.v2-modal__close {
    position: fixed;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--v2-white);
    font-size: 40px;
    line-height: 1;
    width: var(--v2-tap);
    height: var(--v2-tap);
    cursor: pointer;
}

/* =========================================================================
   Numbered steps
   ========================================================================= */

.v2-steps {
    list-style: none;
    counter-reset: v2-step;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.v2-steps li {
    counter-increment: v2-step;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.7;
    color: var(--v2-ink-2);
}

.v2-steps li::before {
    content: counter(v2-step);
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--v2-purple);
    color: var(--v2-on-purple);
    font-family: var(--v2-font-display);
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

/* =========================================================================
   Footer
   ========================================================================= */

.v2-footer {
    background: var(--v2-ink);
    color: var(--v2-foot-text);
}

.v2-footer__grid {
    max-width: var(--v2-w-page);
    margin: 0 auto;
    padding: clamp(36px, 5vw, 56px) var(--v2-pad-x);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
}

.v2-footer__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-footer__head {
    font-family: var(--v2-font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--v2-foot-head);
}

.v2-footer__body {
    font-size: 15px;
    line-height: 1.7;
}

.v2-footer__address {
    font-size: 15px;
    line-height: 1.7;
    color: oklch(80% 0.01 280);
}

.v2-footer__address strong {
    color: var(--v2-foot-head);
}

.v2-footer a {
    color: var(--v2-foot-link);
}

.v2-footer a:hover {
    color: var(--v2-white);
}

.v2-footer__social {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.v2-footer__social a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    min-height: var(--v2-tap);
}

.v2-footer__social img {
    height: 24px;
    width: 24px;
    display: block;
}

.v2-footer__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-footer__links a {
    font-size: 15px;
    min-height: 32px;
    display: flex;
    align-items: center;
}

.v2-footer__legal {
    max-width: var(--v2-w-page);
    margin: 0 auto;
    padding: 0 var(--v2-pad-x) 32px;
    font-size: 13.5px;
    color: var(--v2-foot-muted);
    line-height: 1.6;
}

/* =========================================================================
   Motion
   ========================================================================= */

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

    a.v2-card:hover,
    a.v2-course:hover,
    .v2-seealso:hover {
        transform: none;
    }
}