:root {
    --ink: #102b4c;
    --ink-soft: #46627f;
    --blue: #2f80ed;
    --blue-dark: #1764c0;
    --sky: #dceeff;
    --sky-strong: #c4e2ff;
    --paper: #fff;
    --off-white: #f7fbff;
    --line: #cfe0ee;
    --mint: #d8f2ec;
    --lavender: #e8e4ff;
    --sand: #fae9c7;
    --navy: #0d315d;
    --radius-lg: 34px;
    --radius-md: 24px;
    --radius-sm: 16px;
    --shadow-soft: 0 24px 60px #245b8b21;
    --font-sans: "Aptos", "Segoe UI", Arial, sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    text-rendering: optimizelegibility;
    margin: 0;
    font-size: 16px;
    line-height: 1.6
}

a {
    color: inherit;
    text-decoration: none
}

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

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

.site-illustration {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

::selection {
    background: var(--sky-strong);
    color: var(--navy)
}

:focus-visible {
    outline-offset: 3px;
    outline: 3px solid #ffcf56
}

.motion-ready [data-reveal] {
    opacity: 0;
    transition: opacity .7s, translate .76s cubic-bezier(.2, .7, .2, 1), scale .76s cubic-bezier(.2, .7, .2, 1);
    translate: 0 28px;
    scale: .985
}

.motion-ready [data-reveal].is-visible {
    opacity: 1;
    translate: 0;
    scale: 1
}

.program-grid [data-reveal]:nth-child(2), .benefit-grid [data-reveal]:nth-child(2), .price-cards [data-reveal]:nth-child(2) {
    transition-delay: 90ms
}

.program-grid [data-reveal]:nth-child(3), .benefit-grid [data-reveal]:nth-child(3) {
    transition-delay: .18s
}

.program-grid [data-reveal]:nth-child(4), .benefit-grid [data-reveal]:nth-child(4) {
    transition-delay: .27s
}

.skip-link {
    z-index: 100;
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    padding: .7rem 1rem;
    position: fixed;
    top: 1rem;
    left: 1rem;
    transform: translateY(-160%)
}

.skip-link:focus {
    transform: translateY(0)
}

.shell {
    width: min(1180px, 100% - 48px);
    margin-inline: auto
}

.narrow-shell {
    width: min(920px, 100% - 48px)
}

.utility-bar {
    background: var(--navy);
    color: #dfeeff;
    letter-spacing: .02em;
    font-size: .78rem
}

.utility-inner {
    justify-content: space-between;
    align-items: center;
    min-height: 36px;
    display: flex
}

.utility-points {
    color: #a9d1ff
}

.site-header {
    z-index: 40;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: #ffffffed;
    border-bottom: 1px solid #102b4c17;
    position: sticky;
    top: 0
}

.site-header:after {
    content: "";
    background: linear-gradient(90deg, var(--blue), #62c7b8, #aa91f2, #ffcf6b);
    height: 3px;
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: 0;
    transition: transform 80ms linear;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0
}

[data-tilt] {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --glow-x: 50%;
    --glow-y: 50%;
    transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    transition: transform .18s, box-shadow .24s
}

.header-inner {
    grid-template-columns:auto 1fr auto;
    align-items: center;
    gap: 1.7rem;
    min-height: 82px;
    display: grid
}

.brand {
    align-items: center;
    gap: .72rem;
    width: max-content;
    display: inline-flex
}

.brand-mark {
    background: var(--blue);
    color: #fff;
    letter-spacing: -.04em;
    border-radius: 15px;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: .82rem;
    font-weight: 850;
    display: grid;
    transform: rotate(-4deg);
    box-shadow: 0 8px 18px #2f80ed3d
}

.brand-copy {
    line-height: 1.05;
    display: grid
}

.brand-copy small {
    color: var(--ink-soft);
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-top: .28rem;
    font-size: .67rem;
    font-weight: 700
}

.desktop-nav {
    justify-content: center;
    align-items: center;
    gap: .18rem;
    display: flex
}

.nav-group {
    position: relative
}

.nav-group summary {
    cursor: pointer;
    color: #274661;
    border-radius: 12px;
    padding: .62rem .7rem;
    font-size: .88rem;
    font-weight: 650;
    list-style: none;
    transition: background .16s, color .16s
}

.nav-group summary::-webkit-details-marker {
    display: none
}

.nav-group summary:after {
    content: "⌄";
    color: #64809a;
    margin-left: .32rem;
    display: inline-block;
    transform: translateY(-1px)
}

.nav-group[open] summary, .nav-group summary:hover {
    background: var(--off-white);
    color: var(--blue-dark)
}

.nav-popover {
    z-index: 50;
    border: 1px solid var(--line);
    width: 280px;
    box-shadow: var(--shadow-soft);
    background: #fff;
    border-radius: 20px;
    padding: .55rem;
    display: grid;
    position: absolute;
    top: calc(100% + .55rem);
    left: 50%;
    transform: translate(-50%)
}

.nav-popover:before {
    content: "";
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    background: #fff;
    width: 18px;
    height: 18px;
    position: absolute;
    top: -10px;
    left: calc(50% - 10px);
    transform: rotate(45deg)
}

.nav-popover a {
    z-index: 1;
    color: #294865;
    border-radius: 13px;
    justify-content: space-between;
    gap: .8rem;
    padding: .72rem .8rem;
    font-size: .88rem;
    font-weight: 620;
    display: flex;
    position: relative
}

.nav-popover a:hover {
    background: var(--sky);
    color: var(--blue-dark)
}

.nav-popover a span {
    color: var(--blue)
}

.nav-contact {
    color: #274661;
    border-radius: 12px;
    padding: .62rem .7rem;
    font-size: .88rem;
    font-weight: 650
}

.button {
    border: 1px solid var(--blue);
    background: var(--blue);
    color: #fff;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    min-height: 50px;
    padding: .92rem 1.35rem;
    font-weight: 760;
    line-height: 1;
    transition: transform .16s, background .16s, box-shadow .16s;
    display: inline-flex;
    box-shadow: 0 12px 24px #2f80ed33
}

.button-small {
    min-height: 42px;
    padding: .72rem 1rem;
    font-size: .82rem
}

.button-large {
    min-height: 58px;
    padding-inline: 1.7rem
}

.button-outline {
    color: var(--ink);
    box-shadow: none;
    background: #fff;
    border-color: #aac6dd
}

.button-outline:hover {
    background: var(--sky);
    color: var(--navy)
}

.button-light {
    color: var(--navy);
    box-shadow: none;
    background: #fff;
    border-color: #fff
}

.button-light:hover {
    background: var(--sky)
}

.mobile-menu {
    display: none;
    position: relative
}

.hero {
    background: var(--sky);
    position: relative;
    overflow: hidden
}

.hero:before {
    content: "";
    border: 1px solid #2f80ed2e;
    border-radius: 50%;
    width: 430px;
    height: 430px;
    position: absolute;
    inset: auto auto -210px -170px
}

.hero-grid {
    grid-template-columns:1.03fr .97fr;
    align-items: center;
    gap: 3rem;
    min-height: 650px;
    padding-block: 5.2rem 5.5rem;
    display: grid
}

.hero-copy {
    z-index: 2;
    position: relative
}

.eyebrow, .section-kicker {
    color: var(--blue-dark);
    letter-spacing: .12em;
    text-transform: uppercase;
    align-items: center;
    gap: .52rem;
    font-size: .75rem;
    font-weight: 800;
    display: inline-flex
}

.eyebrow span {
    background: var(--blue);
    width: 27px;
    height: 2px
}

.hero h1 {
    max-width: 700px;
    color: var(--navy);
    letter-spacing: -.065em;
    margin: 1rem 0 1.35rem;
    font-size: clamp(3.25rem, 5.2vw, 5.6rem);
    font-weight: 780;
    line-height: .96
}

.hero h1 em {
    color: var(--blue-dark);
    font-style: normal;
    display: inline-block;
    position: relative
}

.hero h1 em:after {
    content: "";
    background: #ffcd6b;
    border-radius: 99px;
    height: .12em;
    position: absolute;
    bottom: -.08em;
    left: .03em;
    right: -.03em;
    transform: rotate(-1.5deg)
}

.hero-lead {
    color: #365873;
    max-width: 600px;
    margin: 0;
    font-size: 1.13rem;
    line-height: 1.7
}

.hero-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
    margin-top: 2rem;
    display: flex
}

.hero-program-link {
    color: var(--blue-dark);
    border: 1px solid #1764c038;
    border-radius: 999px;
    padding: .55rem .85rem;
    font-size: .72rem;
    font-weight: 800
}

.hero-program-link:hover {
    border-color: var(--blue);
    background: #ffffff8c
}

.text-link {
    color: var(--navy);
    border-bottom: 1px solid #8bb4d9;
    align-items: center;
    gap: .48rem;
    font-weight: 740;
    line-height: 1.9;
    display: inline-flex
}

.text-link:hover {
    border-color: var(--blue);
    color: var(--blue-dark)
}

.hero-trust {
    align-items: center;
    gap: 1rem;
    margin-top: 2.25rem;
    display: flex
}

.hero-trust p {
    color: #55718b;
    margin: 0;
    font-size: .82rem;
    line-height: 1.4
}

.hero-trust strong {
    color: var(--ink);
    font-size: .88rem
}

.avatar-stack {
    display: flex
}

.avatar-stack span {
    border: 3px solid var(--sky);
    background: var(--navy);
    color: #fff;
    border-radius: 50%;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: -7px;
    font-size: .7rem;
    font-weight: 800;
    display: grid
}

.avatar-stack span:first-child {
    background: var(--blue);
    margin-left: 0
}

.avatar-stack span:nth-child(2) {
    background: #49a69a
}

.hero-visual {
    min-height: 530px;
    position: relative
}

.hero-visual:before {
    content: "";
    background: #ffffff61;
    border: 1px solid #2f80ed33;
    border-radius: 44% 56% 48% 52%/47% 44% 56% 53%;
    position: absolute;
    inset: 2% -3% 1% 4%;
    transform: rotate(3deg)
}

.hero-image-shell {
    z-index: 1;
    background: #cfe7ff;
    border: 6px solid #ffffffb8;
    border-radius: 42% 58% 44% 56%/52% 43% 57% 48%;
    animation: 7s ease-in-out infinite hero-drift;
    position: absolute;
    inset: 4% 0 2% 1%;
    overflow: hidden;
    box-shadow: 0 32px 70px #265b8f33
}

.hero-image-shell img {
    object-fit: cover;
    object-position: 57% center
}

.hero-chip {
    z-index: 4;
    color: var(--navy);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffffeb;
    border: 1px solid #102b4c1a;
    border-radius: 999px;
    align-items: center;
    gap: .48rem;
    padding: .7rem .95rem;
    font-size: .74rem;
    font-weight: 790;
    display: inline-flex;
    position: absolute;
    box-shadow: 0 14px 30px #0d315d24
}

.hero-chip span {
    color: var(--blue)
}

.hero-glyph {
    z-index: 3;
    width: 52px;
    height: 52px;
    color: var(--blue-dark);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffffdb;
    border: 1px solid #102b4c1a;
    border-radius: 18px;
    place-items: center;
    display: grid;
    position: absolute;
    box-shadow: 0 16px 30px #0d315d24
}

.hero-glyph svg {
    width: 25px;
    height: 25px
}

.hero-glyph-one {
    animation: 7s ease-in-out infinite icon-drift;
    top: 3%;
    right: 21%
}

.hero-glyph-two {
    color: #258d7d;
    animation: 6.2s ease-in-out .7s infinite reverse icon-drift;
    bottom: 20%;
    left: -2%
}

.hero-glyph-three {
    color: #725fc7;
    animation: 7.8s ease-in-out 1.2s infinite icon-drift;
    bottom: 10%;
    right: 7%
}

@keyframes icon-drift {
    0%, to {
        translate: 0;
        rotate: -2deg
    }
    50% {
        translate: 0 -11px;
        rotate: 3deg
    }
}

.hero-chip-one {
    animation: 5.2s ease-in-out infinite chip-float;
    top: 8%;
    left: -3%
}

.hero-chip-two {
    animation: 6.1s ease-in-out .7s infinite reverse chip-float;
    top: 29%;
    right: -2%
}

.hero-orbit {
    border: 1px dashed #1764c045;
    border-radius: 50%;
    position: absolute
}

.orbit-one {
    inset: 18% 3% 2% 23%
}

.orbit-two {
    inset: 2% 17% 23% 3%
}

.word-card {
    z-index: 2;
    width: 285px;
    box-shadow: var(--shadow-soft);
    border: 1px solid #102b4c1f;
    border-radius: 24px;
    grid-template-columns:auto 1fr;
    align-items: end;
    padding: 1rem 1.25rem 1.15rem;
    display: grid;
    position: absolute
}

.word-card > span {
    color: #66819c;
    align-self: start;
    font-size: .68rem;
    font-weight: 800
}

.word-card strong {
    color: var(--navy);
    letter-spacing: -.065em;
    grid-column: 1/-1;
    font-size: 2.95rem;
    font-weight: 850;
    line-height: 1
}

.word-card small {
    color: #53708c;
    grid-column: 2;
    justify-self: end;
    margin-top: -.6rem;
    font-size: .72rem;
    font-weight: 700
}

.word-card-one {
    background: #fff;
    top: 5%;
    left: 6%;
    transform: rotate(-7deg)
}

.word-card-two {
    background: var(--mint);
    top: 36%;
    right: 0;
    transform: rotate(4deg)
}

.word-card-three {
    background: var(--lavender);
    bottom: 5%;
    left: 12%;
    transform: rotate(-2deg)
}

.hero-badge {
    z-index: 3;
    background: var(--navy);
    color: #fff;
    text-align: center;
    border-radius: 50%;
    place-content: center;
    width: 142px;
    height: 142px;
    display: grid;
    position: absolute;
    bottom: 0;
    right: -1%;
    box-shadow: 0 18px 38px #0d315d3d
}

.hero-badge > span {
    color: #ffcf6b;
    font-size: 1.25rem
}

.hero-badge strong {
    margin-top: .25rem;
    font-size: .9rem
}

.hero-badge small {
    color: #aed6ff;
    font-size: .62rem
}

@keyframes hero-drift {
    0%, to {
        transform: translate(0, 0) rotate(-.35deg)
    }
    50% {
        transform: translateY(-9px) rotate(.35deg)
    }
}

@keyframes chip-float {
    0%, to {
        transform: translate(0, 0)
    }
    50% {
        transform: translateY(-8px)
    }
}

.language-marquee {
    background: var(--navy);
    color: #fff;
    border-block: 1px solid #102b4c1a;
    overflow: hidden
}

.marquee-track {
    width: max-content;
    display: flex;
    will-change: transform
}

.language-marquee.is-ready .marquee-track {
    animation: var(--marquee-duration, 28s) linear infinite marquee-flow
}

.marquee-sequence {
    flex: 0 0 auto;
    display: flex
}

.marquee-track span {
    letter-spacing: .18em;
    white-space: nowrap;
    align-items: center;
    gap: calc(1.25rem + 10px);
    min-height: 54px;
    padding-right: calc(1.25rem + 10px);
    font-size: .76rem;
    font-weight: 820;
    display: inline-flex
}

.marquee-track b {
    color: #8dc8ff;
    font-size: .68rem
}

@keyframes marquee-flow {
    to {
        transform: translate3d(var(--marquee-offset, -50%), 0, 0)
    }
}

.stats-strip {
    border-bottom: 1px solid var(--line);
    background: #fff
}

.stats-grid {
    grid-template-columns:repeat(4, 1fr);
    display: grid
}

.stats-grid > div {
    border-left: 1px solid var(--line);
    flex-direction: column;
    justify-content: center;
    min-height: 124px;
    padding: 1.2rem 2rem;
    display: flex
}

.stats-grid > div:last-child {
    border-right: 1px solid var(--line)
}

.stats-grid strong {
    color: var(--navy);
    letter-spacing: -.04em;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1
}

.stats-grid span {
    color: var(--ink-soft);
    margin-top: .35rem;
    font-size: .8rem
}

.section-heading h2, .method-intro h2, .pricing-copy h2, .teachers-panel h2, .final-cta h2 {
    color: var(--navy);
    letter-spacing: -.055em;
    margin: .65rem 0 0;
    font-size: clamp(2.3rem, 4vw, 4rem);
    font-weight: 760;
    line-height: 1.05
}

.split-heading {
    grid-template-columns:1.2fr .8fr;
    align-items: end;
    gap: 3rem;
    margin-bottom: 3rem;
    display: grid
}

.split-heading > p {
    max-width: 520px;
    color: var(--ink-soft);
    margin: 0 0 .4rem;
    font-size: 1.03rem
}

.program-grid {
    grid-template-columns:repeat(2, 1fr);
    gap: 1.15rem;
    display: grid
}

.program-card {
    border-radius: var(--radius-lg);
    border: 1px solid #102b4c1a;
    grid-template-columns:minmax(0, 1fr) minmax(190px, .72fr);
    min-height: 340px;
    padding: 1.6rem 1.7rem;
    transition: transform .18s, box-shadow .18s;
    display: grid;
    position: relative;
    overflow: hidden
}

.program-card-copy {
    z-index: 2;
    flex-direction: column;
    min-width: 0;
    display: flex;
    position: relative
}

.program-card:after {
    content: "";
    border: 1px solid #102b4c24;
    border-radius: 50%;
    width: 260px;
    height: 260px;
    position: absolute;
    bottom: -100px;
    right: -60px
}

.tone-mint {
    background: var(--mint)
}

.tone-sky {
    background: var(--sky)
}

.tone-lavender {
    background: var(--lavender)
}

.tone-sand {
    background: var(--sand)
}

.program-topline {
    color: #315774;
    letter-spacing: .08em;
    text-transform: uppercase;
    justify-content: space-between;
    align-items: center;
    font-size: .72rem;
    font-weight: 780;
    display: flex
}

.program-topline b {
    border: 1px solid #102b4c2b;
    border-radius: 50%;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: .68rem;
    display: grid
}

.program-card h3 {
    max-width: 360px;
    color: var(--navy);
    letter-spacing: -.045em;
    margin: 2.2rem 0 .75rem;
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    line-height: 1.05
}

.program-card p {
    color: #3f607b;
    max-width: 330px;
    margin: 0
}

.program-link {
    color: var(--navy);
    align-self: flex-start;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    padding-top: 1.3rem;
    font-size: .86rem;
    font-weight: 750;
    display: inline-flex
}

.program-art {
    z-index: 1;
    filter: drop-shadow(0 18px 22px #0d315d21);
    align-self: end;
    width: 125%;
    height: 280px;
    margin: 0 -18% -1.7rem -7%;
    transition: transform .22s;
    position: relative
}

.program-art img {
    object-fit: contain;
    object-position: center bottom
}

.program-card:hover .program-art {
    transform: translateY(-4px) scale(1.025)
}

.stories-section {
    background: radial-gradient(circle at 4% 16%, #c4e2ffbd, #0000 23%), radial-gradient(circle at 96% 74%, #e8e4ffb3, #0000 24%), #fff;
    position: relative;
    overflow: hidden
}

.stories-section:before, .stories-section:after {
    content: "";
    z-index: 0;
    pointer-events: none;
    border: 1px solid #2f80ed29;
    border-radius: 50%;
    position: absolute
}

.stories-section:before {
    width: 290px;
    height: 290px;
    top: 130px;
    left: -145px
}

.stories-section:after {
    width: 230px;
    height: 230px;
    bottom: 8%;
    right: -105px
}

.stories-section .shell {
    z-index: 1;
    position: relative
}

.stories-heading {
    margin-bottom: 3.5rem
}

.pin-wall {
    columns: 3 290px;
    column-gap: 1.15rem
}

.story-pin {
    break-inside: avoid;
    vertical-align: top;
    border: 1px solid #102b4c1c;
    border-radius: 30px;
    width: 100%;
    margin: 0 0 1.15rem;
    display: inline-block;
    overflow: hidden;
    box-shadow: 0 20px 42px #1d4f7e1a
}

.story-pin-image {
    background: var(--sky);
    isolation: isolate;
    transition: transform .26s, box-shadow .26s;
    position: relative
}

.story-pin-image.pin-tall {
    aspect-ratio: 4/5
}

.story-pin-image.pin-extra-tall {
    aspect-ratio: 3/4
}

.story-pin-image.pin-wide {
    aspect-ratio: 5/4
}

.story-pin-image:after {
    content: "";
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(#0000 42%, #07203e24 58%, #07203ee0 100%);
    position: absolute;
    inset: 0
}

.story-pin-image > img {
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1)
}

.story-shine {
    z-index: 2;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #ffffff42;
    border: 1px solid #ffffffa6;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    position: absolute;
    top: 1rem;
    right: 1rem
}

.story-shine:before, .story-shine:after {
    content: "";
    background: #fff;
    border-radius: 99px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.story-shine:before {
    width: 13px;
    height: 2px
}

.story-shine:after {
    width: 2px;
    height: 13px
}

.story-caption {
    z-index: 3;
    color: #fff;
    grid-template-columns:1fr auto;
    align-items: end;
    gap: .35rem 1rem;
    display: grid;
    position: absolute;
    bottom: 1.3rem;
    left: 1.3rem;
    right: 1.3rem
}

.story-caption small {
    color: #c9e3ff;
    letter-spacing: .1em;
    text-transform: uppercase;
    grid-column: 1/-1;
    font-size: .65rem;
    font-style: normal;
    font-weight: 820
}

.story-caption strong {
    letter-spacing: -.035em;
    max-width: 280px;
    font-size: clamp(1.3rem, 2.1vw, 1.8rem);
    line-height: 1.08
}

.story-caption i {
    width: 40px;
    height: 40px;
    color: var(--navy);
    background: #fff;
    border-radius: 50%;
    place-items: center;
    font-size: 1rem;
    font-style: normal;
    display: grid
}

.story-pin-image:hover {
    transform: translateY(-7px) rotate(-.25deg);
    box-shadow: 0 28px 58px #1d4f7e2e
}

.story-pin-image:hover > img {
    transform: scale(1.045)
}

.pin-quote, .pin-progress {
    padding: 1.65rem;
    position: relative
}

.pin-quote {
    background: var(--lavender);
    min-height: 385px
}

.pin-quote:after {
    content: "";
    border: 1px solid #0d315d26;
    border-radius: 50%;
    width: 210px;
    height: 210px;
    position: absolute;
    bottom: -92px;
    right: -72px
}

.pin-note-top {
    z-index: 1;
    color: #365b79;
    letter-spacing: .11em;
    text-transform: uppercase;
    justify-content: space-between;
    align-items: center;
    font-size: .66rem;
    font-weight: 820;
    display: flex;
    position: relative
}

.pin-note-top b {
    border: 1px solid;
    border-radius: 50%;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: .62rem;
    display: grid
}

.pin-quote blockquote {
    z-index: 1;
    color: var(--navy);
    letter-spacing: -.06em;
    margin: 4rem 0 1.15rem;
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 780;
    line-height: .98;
    position: relative
}

.pin-quote blockquote em {
    color: var(--blue-dark);
    font-style: normal
}

.pin-quote p {
    z-index: 1;
    color: #4b6681;
    max-width: 300px;
    margin: 0;
    font-size: .88rem;
    position: relative
}

.quote-spark {
    z-index: 1;
    color: var(--blue);
    font-size: 2.3rem;
    position: absolute;
    bottom: 1.25rem;
    right: 1.55rem
}

.pin-progress {
    background: radial-gradient(circle at 82% 12%, #58a7ff66, transparent 34%), var(--navy);
    color: #fff;
    min-height: 430px
}

.pin-progress .pin-note-top {
    color: #aad5ff
}

.pin-progress h3 {
    color: #fff;
    letter-spacing: -.05em;
    max-width: 310px;
    margin: 3.4rem 0 3.8rem;
    font-size: clamp(1.8rem, 2.8vw, 2.5rem);
    line-height: 1.02
}

.progress-graphic {
    grid-template-columns:repeat(3, 1fr);
    gap: .4rem;
    display: grid;
    position: relative
}

.progress-graphic:before {
    content: "";
    transform-origin: 0;
    background: linear-gradient(90deg, #62c7b8, #8dc8ff, #d8c8ff);
    height: 2px;
    position: absolute;
    top: 17px;
    left: 12%;
    right: 12%;
    transform: scaleX(0)
}

.pin-progress.is-visible .progress-graphic:before {
    animation: 1.1s .4s forwards progress-draw
}

.progress-graphic span {
    z-index: 1;
    justify-items: center;
    gap: .65rem;
    display: grid;
    position: relative
}

.progress-graphic i {
    background: var(--navy);
    color: #fff;
    border: 2px solid #ffffffbf;
    border-radius: 50%;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: .7rem;
    font-style: normal;
    font-weight: 850;
    display: grid
}

.progress-graphic span:first-child i {
    border-color: #62c7b8
}

.progress-graphic span:nth-child(2) i {
    border-color: #8dc8ff
}

.progress-graphic span:nth-child(3) i {
    border-color: #d8c8ff
}

.progress-graphic b {
    color: #d5e8fa;
    letter-spacing: .04em;
    font-size: .68rem
}

@keyframes progress-draw {
    to {
        transform: scaleX(1)
    }
}

.method-section {
    background: #fff
}

.method-grid {
    grid-template-columns:.86fr 1.14fr;
    gap: 7rem;
    display: grid
}

.method-intro {
    align-self: start;
    position: sticky;
    top: 145px
}

.method-intro p, .pricing-copy > p, .teachers-panel p {
    color: var(--ink-soft);
    font-size: 1.03rem
}

.method-intro .text-link, .pricing-copy .text-link {
    margin-top: 1rem
}

.trial-notice {
    background: #ffffffad;
    border: 1px solid #1764c02e;
    border-radius: 20px;
    grid-template-columns:auto 1fr;
    gap: .85rem;
    margin-top: 1.6rem;
    padding: 1rem;
    display: grid
}

.trial-notice > span {
    background: var(--blue);
    color: #fff;
    border-radius: 13px;
    place-items: center;
    width: 38px;
    height: 38px;
    display: grid
}

.trial-notice strong {
    color: var(--blue-dark);
    letter-spacing: .08em;
    font-size: .72rem
}

.trial-notice p {
    color: #3d5f7b;
    margin: .2rem 0 0;
    font-size: .82rem;
    line-height: 1.55
}

.method-list {
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    position: relative
}

.method-list:before {
    content: "";
    background: linear-gradient(var(--blue), #61b9aa, #a794ef);
    width: 2px;
    position: absolute;
    top: 42px;
    bottom: 42px;
    left: 43px
}

.method-list li {
    z-index: 1;
    border: 1px solid var(--line);
    background: #f7fbfff0;
    border-radius: 24px;
    grid-template-columns:74px 1fr;
    gap: 1.5rem;
    padding: 1.45rem;
    transition: border-color .18s, transform .18s, box-shadow .18s;
    display: grid;
    position: relative
}

.method-list li:last-child {
    border-bottom: 1px solid var(--line)
}

.method-list li:hover {
    border-color: #9fc7ea;
    transform: translate(6px);
    box-shadow: 0 16px 32px #265b8f17
}

.method-list > li > span {
    background: var(--sky);
    width: 58px;
    height: 58px;
    color: var(--blue-dark);
    border-radius: 20px;
    place-items: center;
    font-size: .75rem;
    font-weight: 850;
    display: grid
}

.method-list h3 {
    color: var(--navy);
    letter-spacing: -.025em;
    margin: 0;
    font-size: 1.45rem
}

.method-list p {
    color: var(--ink-soft);
    margin: .45rem 0 0
}

.learning-lab-section {
    background: radial-gradient(circle at 5% 10%, #c4e2ffd1, transparent 24%), radial-gradient(circle at 95% 74%, #d8f2ecb8, transparent 26%), var(--off-white);
    position: relative;
    overflow: hidden
}

.learning-lab-section:before {
    content: "A · B · C";
    color: #2f80ed0d;
    letter-spacing: -.09em;
    white-space: nowrap;
    font-size: clamp(8rem, 18vw, 18rem);
    font-weight: 900;
    line-height: 1;
    position: absolute;
    top: .15em;
    right: -.06em
}

.learning-lab-section .shell {
    z-index: 1;
    position: relative
}

.lab-heading {
    margin-bottom: 3.5rem
}

.learning-lab-grid {
    grid-template-columns:1.12fr .88fr;
    align-items: stretch;
    gap: 1.4rem;
    display: grid
}

.lab-visual {
    background: var(--sky);
    isolation: isolate;
    border: 7px solid #fff;
    border-radius: 40px;
    min-height: 580px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 28px 65px #1e53822b
}

.lab-visual:before {
    content: "";
    z-index: 2;
    background: radial-gradient(circle at var(--glow-x) var(--glow-y), #ffffff52, transparent 25%);
    pointer-events: none;
    position: absolute;
    inset: 0
}

.lab-visual > img {
    object-fit: cover;
    transition: scale .7s cubic-bezier(.2, .7, .2, 1)
}

.lab-visual:hover > img {
    scale: 1.035
}

.lab-image-overlay {
    z-index: 1;
    background: linear-gradient(#0000, #08284dc7);
    position: absolute;
    inset: 45% 0 0
}

.lab-mini-image {
    z-index: 4;
    aspect-ratio: 1;
    background: #fff;
    border: 5px solid #fffffff0;
    border-radius: 28px;
    width: 180px;
    animation: 6s ease-in-out infinite mini-card-float;
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    overflow: hidden;
    rotate: 3deg;
    box-shadow: 0 18px 34px #0d315d36
}

.lab-mini-image img {
    object-fit: cover
}

@keyframes mini-card-float {
    0%, to {
        translate: 0;
        rotate: 3deg
    }
    50% {
        translate: 0 -8px;
        rotate: 0deg
    }
}

.lab-sticker {
    z-index: 4;
    color: var(--navy);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffffe6;
    border: 1px solid #102b4c1a;
    border-radius: 999px;
    align-items: center;
    gap: .48rem;
    padding: .62rem .82rem;
    display: inline-flex;
    position: absolute;
    box-shadow: 0 14px 28px #0d315d26
}

.lab-sticker svg {
    width: 20px;
    height: 20px;
    color: var(--blue)
}

.lab-sticker b {
    letter-spacing: .04em;
    font-size: .68rem
}

.lab-sticker-one {
    animation: 6.4s ease-in-out infinite icon-drift;
    top: 37%;
    left: 1rem
}

.lab-sticker-two {
    animation: 7s ease-in-out .8s infinite reverse icon-drift;
    bottom: 29%;
    right: 1.2rem
}

.lab-visual-caption {
    z-index: 4;
    color: #fff;
    display: grid;
    position: absolute;
    bottom: 1.5rem;
    left: 1.7rem;
    right: 1.7rem
}

.lab-visual-caption small {
    color: #b9dcff;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 820
}

.lab-visual-caption strong {
    letter-spacing: -.05em;
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    line-height: 1
}

.skill-compass {
    background: radial-gradient(circle, #fff 0 12%, #0000 38%), linear-gradient(145deg, #e2f1ff, #f1eeff 58%, #dff5ef);
    border: 1px solid #102b4c1f;
    border-radius: 40px;
    min-height: 580px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 56px #1e53821a
}

.skill-compass:after {
    content: "";
    background: radial-gradient(circle at var(--glow-x) var(--glow-y), #ffffffb8, transparent 24%);
    pointer-events: none;
    position: absolute;
    inset: 0
}

.skill-orbit {
    z-index: 1;
    border: 1px dashed #1764c042;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%
}

.orbit-outer {
    aspect-ratio: 1;
    width: 80%;
    animation: 30s linear infinite orbit-spin
}

.orbit-inner {
    aspect-ratio: 1;
    border-color: #785bcf3d;
    width: 55%;
    animation: 21s linear infinite reverse orbit-spin
}

@keyframes orbit-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

.skill-center {
    z-index: 3;
    background: var(--navy);
    color: #fff;
    border: 8px solid #ffffffbf;
    border-radius: 50%;
    place-content: center;
    justify-items: center;
    width: 150px;
    height: 150px;
    animation: 4s ease-in-out infinite center-pulse;
    display: grid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 20px 40px #0d315d38
}

.skill-center svg {
    color: #ffcf6b;
    width: 25px
}

.skill-center strong {
    letter-spacing: -.03em;
    margin-top: .25rem;
    font-size: 1.15rem
}

.skill-center span {
    color: #9ecdf9;
    font-size: .68rem
}

@keyframes center-pulse {
    0%, to {
        box-shadow: 0 20px 40px #0d315d38, 0 0 #2f80ed29
    }
    50% {
        box-shadow: 0 20px 40px #0d315d38, 0 0 0 18px #2f80ed00
    }
}

.skill-node {
    z-index: 4;
    min-width: 96px;
    color: var(--navy);
    justify-items: center;
    gap: .38rem;
    display: grid;
    position: absolute
}

.skill-node i {
    width: 58px;
    height: 58px;
    color: var(--blue-dark);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #ffffffe0;
    border: 1px solid #102b4c1a;
    border-radius: 20px;
    place-items: center;
    display: grid;
    box-shadow: 0 13px 26px #1d4f7e21
}

.skill-node svg {
    width: 27px;
    height: 27px
}

.skill-node b {
    background: #ffffffc7;
    border-radius: 999px;
    padding: .2rem .5rem;
    font-size: .67rem
}

.skill-speaking {
    top: 7%;
    left: 50%;
    transform: translate(-50%)
}

.skill-listening {
    top: 29%;
    right: 2.5%
}

.skill-vocabulary {
    bottom: 10%;
    right: 11%
}

.skill-grammar {
    bottom: 10%;
    left: 10%
}

.skill-confidence {
    top: 29%;
    left: 2.5%
}

.skill-node:nth-of-type(2n) i {
    animation: 4.8s ease-in-out infinite node-bob
}

.skill-node:nth-of-type(odd) i {
    animation: 5.6s ease-in-out .6s infinite reverse node-bob
}

@keyframes node-bob {
    0%, to {
        translate: 0
    }
    50% {
        translate: 0 -6px
    }
}

.compass-note {
    z-index: 4;
    color: #4d6b85;
    text-align: right;
    font-size: .62rem;
    line-height: 1.2;
    position: absolute;
    bottom: 1rem;
    right: 1.2rem
}

.compass-note b {
    color: var(--blue-dark);
    font-size: 1.1rem
}

.lesson-flow {
    grid-template-columns:repeat(4, 1fr);
    gap: .9rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    position: relative
}

.lesson-flow:before {
    content: "";
    z-index: 0;
    background: linear-gradient(90deg, var(--blue), #55b7a7, #a28aea, #f5bd48, var(--blue));
    background-size: 200% 100%;
    height: 2px;
    animation: 5s linear infinite path-flow;
    position: absolute;
    top: 52px;
    left: 8%;
    right: 8%
}

@keyframes path-flow {
    to {
        background-position: -200% 0
    }
}

.lesson-flow li {
    z-index: 1;
    border: 1px solid var(--line);
    background: #fffffff0;
    border-radius: 28px;
    min-height: 255px;
    padding: 1.2rem;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    position: relative;
    box-shadow: 0 14px 34px #1d4f7e12
}

.lesson-flow li:hover {
    border-color: #95c2e8;
    transform: translateY(-7px);
    box-shadow: 0 22px 42px #1d4f7e21
}

.lesson-icon {
    background: var(--sky);
    width: 62px;
    height: 62px;
    color: var(--blue-dark);
    border-radius: 22px;
    place-items: center;
    display: grid
}

.lesson-icon svg {
    width: 29px;
    height: 29px
}

.lesson-flow li:nth-child(2) .lesson-icon {
    background: var(--mint);
    color: #267e72
}

.lesson-flow li:nth-child(3) .lesson-icon {
    background: var(--lavender);
    color: #715ac1
}

.lesson-flow li:nth-child(4) .lesson-icon {
    background: var(--sand);
    color: #9a6c0d
}

.lesson-flow small {
    color: #83a0b9;
    font-size: .68rem;
    font-weight: 850;
    position: absolute;
    top: 1.35rem;
    right: 1.25rem
}

.lesson-flow h3 {
    color: var(--navy);
    letter-spacing: -.025em;
    margin: 2.5rem 0 .55rem;
    font-size: 1.15rem
}

.lesson-flow p {
    color: var(--ink-soft);
    margin: 0;
    font-size: .82rem;
    line-height: 1.55
}

.interest-belt {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    margin-top: 1.4rem;
    overflow: hidden;
    box-shadow: 0 12px 28px #1d4f7e0f
}

.interest-track {
    width: max-content;
    animation: 34s linear infinite interest-flow;
    display: flex
}

.interest-group {
    align-items: center;
    gap: .7rem;
    padding: .7rem .7rem .7rem 0;
    display: flex
}

.interest-group span {
    background: var(--off-white);
    color: #365873;
    white-space: nowrap;
    border-radius: 999px;
    align-items: center;
    gap: .48rem;
    padding: .45rem .75rem .45rem .48rem;
    font-size: .72rem;
    font-weight: 740;
    display: inline-flex
}

.interest-group i {
    background: var(--sky);
    width: 30px;
    height: 30px;
    color: var(--blue-dark);
    border-radius: 50%;
    place-items: center;
    display: grid
}

.interest-group svg {
    width: 16px;
    height: 16px
}

.interest-belt:hover .interest-track {
    animation-play-state: paused
}

@keyframes interest-flow {
    to {
        transform: translate(-50%)
    }
}

.why-section {
    background: var(--navy);
    color: #fff
}

.centered-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3rem
}

.centered-heading .section-kicker {
    color: #8ec5ff
}

.centered-heading h2 {
    color: #fff
}

.benefit-grid {
    grid-template-columns:repeat(4, 1fr);
    gap: 1rem;
    display: grid
}

.benefit-grid article {
    border-radius: var(--radius-md);
    background: #ffffff1a;
    border: 1px solid #8ec5ff7a;
    min-height: 275px;
    padding: 1.45rem;
    transform: translateY(-6px)
}

.benefit-grid article > span {
    background: var(--sky);
    width: 48px;
    height: 48px;
    color: var(--navy);
    border-radius: 16px;
    place-items: center;
    font-size: 1rem;
    font-weight: 850;
    display: grid
}

.benefit-grid h3 {
    margin: 3.4rem 0 .6rem;
    font-size: 1.24rem
}

.benefit-grid p {
    color: #bdd2e8;
    margin: 0;
    font-size: .91rem
}

.pricing-section {
    background: var(--sky)
}

.pricing-grid {
    grid-template-columns:.65fr 1.35fr;
    align-items: center;
    gap: 4.5rem;
    display: grid
}

.price-cards {
    grid-template-columns:repeat(2, 1fr);
    gap: 1rem;
    display: grid
}

.price-card {
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid #102b4c21;
    flex-direction: column;
    min-height: 430px;
    padding: 1.65rem;
    transition: transform .22s, box-shadow .22s;
    display: flex;
    box-shadow: 0 18px 45px #1f5c8f17
}

.price-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px #1f5c8f26
}

.price-card-featured {
    border-color: var(--blue)
}

.price-label {
    background: var(--sky);
    width: max-content;
    color: var(--blue-dark);
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .4rem .7rem;
    font-size: .67rem;
    font-weight: 800
}

.price-card h3 {
    margin: 1.4rem 0 0;
    font-size: 1.42rem
}

.price {
    color: var(--navy);
    margin: .75rem 0 0
}

.price strong {
    letter-spacing: -.055em;
    font-size: 2.55rem
}

.price small {
    color: var(--ink-soft)
}

.price-card ul {
    color: var(--ink-soft);
    gap: .55rem;
    margin: 1.3rem 0 1.5rem;
    padding: 0;
    list-style: none;
    display: grid
}

.price-card li:before {
    content: "✓";
    color: #2a9c87;
    margin-right: .6rem;
    font-weight: 900
}

.price-card .button {
    width: 100%;
    margin-top: auto
}

.teachers-teaser {
    background: #fff
}

.teachers-panel {
    background: var(--navy);
    color: #fff;
    border-radius: 42px;
    grid-template-columns:1fr .8fr;
    align-items: center;
    gap: 3.5rem;
    padding: 4.3rem;
    display: grid
}

.teachers-panel h2 {
    color: #fff
}

.teachers-panel p {
    color: #c2d9ee
}

.teachers-panel .button {
    margin-top: 1rem
}

.teachers-panel .section-kicker {
    color: #c2d9ee
}

.teacher-side {
    gap: 1rem;
    display: grid
}

.teachers-visual {
    background: var(--sky);
    border: 5px solid #ffffff2e;
    border-radius: 30px;
    min-height: 265px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 22px 44px #02152e47
}

.teachers-visual:after {
    content: "";
    background: radial-gradient(circle at var(--glow-x) var(--glow-y), #ffffff4d, transparent 26%);
    pointer-events: none;
    position: absolute;
    inset: 0
}

.teachers-visual img {
    object-fit: cover;
    transition: scale .6s
}

.teachers-visual:hover img {
    scale: 1.04
}

.teachers-visual > span {
    z-index: 2;
    width: 48px;
    height: 48px;
    color: var(--blue-dark);
    background: #ffffffe6;
    border-radius: 17px;
    place-items: center;
    display: grid;
    position: absolute;
    top: 1rem;
    right: 1rem;
    box-shadow: 0 13px 26px #0d315d2e
}

.teachers-visual svg {
    width: 25px;
    height: 25px
}

.teacher-qualities {
    align-content: center;
    display: grid
}

.teacher-qualities div {
    border-top: 1px solid #ffffff2e;
    grid-template-columns:48px 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 0;
    display: grid
}

.teacher-qualities div:last-child {
    border-bottom: 1px solid #ffffff2e
}

.teacher-qualities span {
    color: #8ec5ff;
    font-size: .76rem;
    font-weight: 850
}

.full-copy-section {
    background: var(--off-white)
}

.full-copy {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden
}

.full-copy summary {
    cursor: pointer;
    color: var(--navy);
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.7rem 2rem;
    font-size: 1.25rem;
    font-weight: 760;
    list-style: none;
    display: flex
}

.full-copy summary::-webkit-details-marker {
    display: none
}

.full-copy summary small {
    color: var(--blue-dark);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .2rem;
    font-size: .68rem;
    display: block
}

.full-copy summary b {
    background: var(--sky);
    width: 42px;
    height: 42px;
    color: var(--blue-dark);
    border-radius: 50%;
    flex: 0 0 42px;
    place-items: center;
    font-size: 1.45rem;
    transition: transform .18s;
    display: grid
}

.full-copy[open] summary b {
    transform: rotate(45deg)
}

.full-copy .article-content {
    border-top: 1px solid var(--line);
    padding: 1rem 2rem 3rem
}

.final-cta {
    background: #fff;
    padding: 6.2rem 0
}

.final-cta-inner {
    background: var(--sky);
    border-radius: 38px;
    grid-template-columns:1fr 170px auto;
    align-items: center;
    gap: 3rem;
    padding: 3.6rem 4rem;
    display: grid
}

.final-cta h2 {
    color: #fff;
    max-width: 760px;
    font-size: clamp(2rem, 3.5vw, 3.3rem)
}

.final-cta .section-kicker {
    color: #c2d9ee
}

.final-cta-visual {
    aspect-ratio: 1;
    background: #fff;
    border: 6px solid #ffffffd1;
    border-radius: 48% 52% 45% 55%/54% 44% 56% 46%;
    width: 170px;
    position: relative;
    overflow: hidden;
    rotate: -3deg;
    box-shadow: 0 20px 42px #1d4f7e2e
}

.final-cta-visual img {
    object-fit: cover;
    transition: scale .6s
}

.final-cta-visual:hover img {
    scale: 1.08
}

.site-footer {
    color: #fff;
    background: #08284d;
    padding: 4.5rem 0 1.4rem
}

.footer-grid {
    grid-template-columns:1.35fr .7fr .7fr 1fr;
    gap: 3.2rem;
    display: grid
}

.footer-brand {
    align-items: flex-start;
    gap: 1rem;
    display: flex
}

.brand-mark-light {
    color: var(--navy);
    box-shadow: none;
    background: #fff;
    flex: 0 0 48px
}

.footer-brand strong {
    font-size: 1.3rem
}

.footer-brand p, .footer-action p {
    color: #a9c3dc;
    max-width: 260px;
    margin: .45rem 0 0;
    font-size: .88rem
}

.footer-grid h2 {
    color: #84bfff;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 .9rem;
    font-size: .72rem
}

.footer-grid > div:not(.footer-brand) > a:not(.button) {
    color: #d6e6f5;
    width: max-content;
    margin: .52rem 0;
    font-size: .86rem;
    display: block
}

.footer-grid a:hover {
    color: #fff
}

.footer-action .button {
    margin-top: 1.2rem
}

.footer-bottom {
    color: #7897b4;
    border-top: 1px solid #ffffff1f;
    justify-content: space-between;
    margin-top: 3.5rem;
    padding-top: 1.25rem;
    font-size: .72rem;
    display: flex
}

.page-hero {
    background: var(--sky);
    padding: 4.7rem 0 5.2rem;
    position: relative;
    overflow: hidden
}

.page-hero:after {
    content: "EN";
    color: #2f80ed17;
    letter-spacing: -.09em;
    font-size: clamp(10rem, 19vw, 18rem);
    font-weight: 900;
    line-height: 1;
    position: absolute;
    bottom: -.32em;
    right: max(2vw, 50vw - 590px)
}

.breadcrumbs {
    z-index: 1;
    color: #54718d;
    align-items: center;
    gap: .55rem;
    margin-bottom: 2.2rem;
    font-size: .78rem;
    display: flex;
    position: relative
}

.breadcrumbs a:hover {
    color: var(--blue-dark)
}

.page-hero-content {
    z-index: 1;
    max-width: 720px;
    position: relative
}

.page-hero-grid {
    z-index: 1;
    grid-template-columns:minmax(0, 1.18fr) minmax(280px, .72fr);
    align-items: center;
    gap: 3.5rem;
    display: grid;
    position: relative
}

.page-hero-art-stack {
    min-height: 430px;
    position: relative
}

.page-hero-art {
    background: radial-gradient(circle at 30% 20%, #ffffffeb, #0000 35%), linear-gradient(145deg, #ffffff80, #c4e2ffcc);
    border: 5px solid #ffffffb3;
    border-radius: 42% 58% 50% 50%/52% 45% 55% 48%;
    position: absolute;
    inset: 0 4% 6% 1%;
    overflow: hidden;
    box-shadow: 0 28px 56px #1764c029
}

.page-hero-art img[src*=hero-premium] {
    object-fit: cover;
    object-position: center
}

.page-hero-art img {
    object-fit: contain;
    object-position: center bottom
}

.page-hero-mini {
    z-index: 2;
    background: #fff;
    border: 5px solid #ffffffeb;
    border-radius: 26px;
    width: 180px;
    height: 220px;
    transition: transform .26s;
    position: absolute;
    bottom: -2%;
    right: -2%;
    overflow: hidden;
    transform: rotate(3.5deg);
    box-shadow: 0 24px 48px #0d315d38
}

.page-hero-mini img {
    object-fit: cover
}

.page-hero-mini > span {
    z-index: 2;
    width: 34px;
    height: 34px;
    color: var(--blue);
    background: #ffffffe6;
    border-radius: 50%;
    place-items: center;
    display: grid;
    position: absolute;
    top: .7rem;
    right: .7rem;
    box-shadow: 0 8px 18px #0d315d21
}

.page-hero-art-stack:hover .page-hero-mini {
    transform: rotate(1deg) translateY(-6px)
}

.page-hero-glyph {
    z-index: 3;
    width: 48px;
    height: 48px;
    color: var(--blue-dark);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    background: #ffffffe6;
    border: 1px solid #102b4c1a;
    border-radius: 17px;
    place-items: center;
    display: grid;
    position: absolute;
    box-shadow: 0 14px 28px #0d315d29
}

.page-hero-glyph svg {
    width: 24px;
    height: 24px
}

.page-hero-glyph-one {
    animation: 6.4s ease-in-out infinite icon-drift;
    top: 14%;
    left: -4%
}

.page-hero-glyph-two {
    color: #6f5bc0;
    animation: 7.1s ease-in-out .7s infinite reverse icon-drift;
    top: 3%;
    right: 10%
}

.audience-pill {
    color: var(--blue-dark);
    letter-spacing: .07em;
    text-transform: uppercase;
    background: #ffffff8c;
    border: 1px solid #1764c033;
    border-radius: 999px;
    padding: .42rem .72rem;
    font-size: .7rem;
    font-weight: 800;
    display: inline-flex
}

.page-hero h1 {
    max-width: 900px;
    color: var(--navy);
    letter-spacing: -.065em;
    margin: 1rem 0;
    font-size: clamp(3rem, 6vw, 5.8rem);
    font-weight: 780;
    line-height: .98
}

.page-hero p {
    color: #3f607b;
    max-width: 720px;
    margin: 0;
    font-size: 1.05rem
}

.page-hero .button {
    margin-top: 1.8rem
}

.content-section {
    background: #fff;
    padding: 5.2rem 0 7.2rem
}

.content-layout {
    grid-template-columns:250px minmax(0, 1fr);
    gap: 4.8rem;
    display: grid
}

.content-sidebar {
    align-self: start;
    position: sticky;
    top: 126px
}

.content-sidebar > span {
    color: var(--blue-dark);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 850
}

.content-sidebar nav {
    border-top: 1px solid var(--line);
    margin-top: 1rem;
    display: grid
}

.content-sidebar nav a {
    border-bottom: 1px solid var(--line);
    color: #55728c;
    padding: .72rem 0;
    font-size: .77rem;
    line-height: 1.35
}

.content-sidebar nav a:hover {
    color: var(--blue-dark)
}

.sidebar-card {
    background: var(--sky);
    border-radius: 20px;
    margin-top: 1.5rem;
    padding: 1.15rem
}

.sidebar-card strong {
    font-size: .92rem;
    display: block
}

.sidebar-card p {
    color: #496984;
    margin: .35rem 0 .85rem;
    font-size: .76rem
}

.sidebar-card .button {
    width: 100%;
    min-height: 40px;
    font-size: .72rem
}

.article-wrap {
    min-width: 0
}

.page-feature-icons {
    grid-template-columns:repeat(4, 1fr);
    gap: .65rem;
    max-width: 810px;
    margin-bottom: 3.2rem;
    display: grid
}

.page-feature-icons > span {
    border: 1px solid var(--line);
    background: var(--off-white);
    border-radius: 20px;
    justify-items: start;
    gap: .55rem;
    min-height: 126px;
    padding: .85rem;
    transition: transform .18s, border-color .18s, box-shadow .18s;
    display: grid
}

.page-feature-icons > span:hover {
    border-color: #97c4e9;
    transform: translateY(-5px);
    box-shadow: 0 14px 30px #1d4f7e1a
}

.page-feature-icons i {
    background: var(--sky);
    width: 42px;
    height: 42px;
    color: var(--blue-dark);
    border-radius: 14px;
    place-items: center;
    display: grid
}

.page-feature-icons span:nth-child(2) i {
    background: var(--mint);
    color: #277f73
}

.page-feature-icons span:nth-child(3) i {
    background: var(--lavender);
    color: #6f5bc0
}

.page-feature-icons span:nth-child(4) i {
    background: var(--sand);
    color: #986b10
}

.page-feature-icons svg {
    width: 22px;
    height: 22px
}

.page-feature-icons b {
    color: var(--navy);
    font-size: .76rem;
    line-height: 1.25
}

.article-story {
    max-width: 840px
}

.article-fragment:not(:first-child) > :first-child {
    margin-top: 4.2rem
}

.article-visual {
    isolation: isolate;
    border: 1px solid #102b4c1f;
    border-radius: 34px;
    max-width: 840px;
    margin: 4.4rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 26px 56px #1d4f7e21
}

.article-visual:after {
    content: "";
    z-index: 3;
    background: radial-gradient(circle at var(--glow-x) var(--glow-y), #ffffff52, transparent 22%);
    pointer-events: none;
    position: absolute;
    inset: 0
}

.article-visual-left {
    margin-left: -1.6rem
}

.article-visual-right {
    margin-left: 1rem
}

.article-visual-image {
    aspect-ratio: 5/3.35;
    background: var(--sky);
    position: relative;
    overflow: hidden
}

.article-visual-image:after {
    content: "";
    z-index: 1;
    background: linear-gradient(#0000, #08284d47);
    position: absolute;
    inset: 55% 0 0
}

.article-visual-image > img {
    object-fit: cover;
    transition: scale .7s cubic-bezier(.2, .7, .2, 1)
}

.article-visual:hover .article-visual-image > img {
    scale: 1.045
}

.article-visual-icon, .visual-float {
    z-index: 3;
    color: var(--blue-dark);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    background: #ffffffe6;
    border: 1px solid #102b4c17;
    place-items: center;
    display: grid;
    position: absolute;
    box-shadow: 0 14px 28px #0d315d29
}

.article-visual-icon {
    border-radius: 19px;
    width: 54px;
    height: 54px;
    top: 1.1rem;
    left: 1.1rem
}

.article-visual-icon svg {
    width: 28px;
    height: 28px
}

.visual-float {
    border-radius: 50%;
    width: 42px;
    height: 42px
}

.visual-float svg {
    width: 21px;
    height: 21px
}

.visual-float-one {
    color: #725fc7;
    animation: 6s ease-in-out infinite icon-drift;
    top: 1.4rem;
    right: 1.3rem
}

.visual-float-two {
    color: #258d7d;
    animation: 7s ease-in-out .7s infinite reverse icon-drift;
    bottom: 1rem;
    right: 1rem
}

.article-visual figcaption {
    z-index: 2;
    grid-template-columns:auto 1fr auto;
    align-items: center;
    gap: 1rem;
    min-height: 150px;
    padding: 1.3rem 1.45rem;
    display: grid;
    position: relative
}

.article-visual-sky figcaption {
    background: var(--sky)
}

.article-visual-mint figcaption {
    background: var(--mint)
}

.article-visual-lavender figcaption {
    background: var(--lavender)
}

.article-visual-sand figcaption {
    background: var(--sand)
}

.article-visual-navy figcaption {
    background: var(--navy);
    color: #fff
}

.visual-caption-icon {
    width: 56px;
    height: 56px;
    color: var(--blue-dark);
    background: #ffffffa6;
    border-radius: 19px;
    place-items: center;
    display: grid
}

.visual-caption-icon svg {
    width: 28px;
    height: 28px
}

.article-visual figcaption small {
    color: var(--blue-dark);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .63rem;
    font-weight: 850
}

.article-visual figcaption h3 {
    color: var(--navy);
    letter-spacing: -.035em;
    margin: .22rem 0 .2rem;
    font-size: 1.35rem;
    line-height: 1.1
}

.article-visual figcaption p {
    color: #3f607b;
    margin: 0;
    font-size: .82rem;
    line-height: 1.5
}

.article-visual figcaption > b {
    color: #55728c;
    border: 1px solid #102b4c2e;
    border-radius: 50%;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: .68rem;
    display: grid
}

.article-visual-navy figcaption small, .article-visual-navy figcaption p, .article-visual-navy figcaption > b {
    color: #bcd8f0
}

.article-visual-navy figcaption h3 {
    color: #fff
}

.article-visual-navy .visual-caption-icon {
    color: #9ecfff;
    background: #ffffff1f
}

.article-content {
    color: #294865;
    max-width: 810px
}

.article-content > :first-child {
    margin-top: 0
}

.article-content h2 {
    color: var(--navy);
    letter-spacing: -.045em;
    margin: 4.2rem 0 1.2rem;
    scroll-margin-top: 130px;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 760;
    line-height: 1.08
}

.article-content h3 {
    color: var(--navy);
    letter-spacing: -.025em;
    margin: 2.4rem 0 .7rem;
    font-size: 1.35rem;
    font-weight: 760;
    line-height: 1.25
}

.article-content p {
    margin: .85rem 0;
    line-height: 1.78
}

.article-content h2 + p, .article-content h3 + p {
    font-size: 1.01rem
}

.article-content ul, .article-content ol {
    gap: .55rem;
    margin: 1rem 0 1.5rem;
    padding-left: 1.35rem;
    display: grid
}

.article-content li {
    padding-left: .25rem
}

.article-content li::marker {
    color: var(--blue)
}

.article-content table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    width: 100%;
    margin: 1.6rem 0 2.2rem;
    font-size: .82rem;
    overflow: hidden
}

.article-content th, .article-content td {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    padding: .75rem
}

.article-content th:last-child, .article-content td:last-child {
    border-right: 0
}

.article-content tr:last-child td {
    border-bottom: 0
}

.article-content th {
    background: var(--sky);
    color: var(--navy);
    font-weight: 760
}

.article-content blockquote {
    border-left: 4px solid var(--blue);
    background: var(--sky);
    border-radius: 0 18px 18px 0;
    margin: 1.6rem 0;
    padding: 1.1rem 1.3rem
}

.article-content .content-callout {
    border: 1px solid #1764c02b;
    border-left: 5px solid var(--blue);
    background: linear-gradient(110deg, var(--sky), #f5faff);
    border-radius: 0 20px 20px 0;
    gap: .35rem;
    margin: 1.8rem 0 2.2rem;
    padding: 1.15rem 1.25rem;
    display: grid
}

.article-content .content-callout strong {
    color: var(--blue-dark);
    letter-spacing: .09em;
    font-size: .72rem
}

.article-content .content-callout p {
    color: #365873;
    margin: 0
}

.article-content a {
    color: var(--blue-dark);
    text-underline-offset: 3px;
    text-decoration: underline
}

.article-content h2, .article-content h3 {
    min-height: 44px;
    padding-left: 3.4rem;
    position: relative
}

.article-content h2:before, .article-content h3:before {
    background: var(--sky);
    width: 42px;
    height: 42px;
    color: var(--blue-dark);
    content: "✦";
    border-radius: 14px;
    place-items: center;
    font-size: .78rem;
    font-weight: 900;
    display: grid;
    position: absolute;
    top: -.12rem;
    left: 0;
    box-shadow: 0 9px 22px #1d4f7e1a
}

.article-content h2:before {
    background: var(--navy);
    color: #fff;
    content: "↗"
}

.article-content h3:nth-of-type(3n+2):before {
    background: var(--mint);
    color: #277f73;
    content: "✓"
}

.article-content h3:nth-of-type(3n+3):before {
    background: var(--lavender);
    color: #6f5bc0;
    content: "●"
}

.article-content > p {
    background: linear-gradient(135deg, #fff 18%, #f6faff 100%);
    border: 1px solid #d8e7f2;
    border-radius: 17px;
    padding: .95rem 1.05rem .95rem 3.45rem;
    position: relative;
    box-shadow: 0 9px 24px #1d4f7e0b
}

.article-content > p:before {
    background: var(--sky);
    width: 26px;
    height: 26px;
    color: var(--blue-dark);
    content: "✦";
    border-radius: 9px;
    place-items: center;
    font-size: .62rem;
    font-weight: 900;
    display: grid;
    position: absolute;
    top: 1.05rem;
    left: 1rem
}

.article-content > p:nth-of-type(3n+2) {
    background: linear-gradient(135deg, #fff 18%, #f3fcf9 100%);
    border-color: #cfe9e3
}

.article-content > p:nth-of-type(3n+2):before {
    background: var(--mint);
    color: #277f73;
    content: "✓"
}

.article-content > p:nth-of-type(3n+3) {
    background: linear-gradient(135deg, #fff 18%, #f8f6ff 100%);
    border-color: #dfdaf8
}

.article-content > p:nth-of-type(3n+3):before {
    background: var(--lavender);
    color: #6f5bc0;
    content: "●"
}

.article-content ul, .article-content ol {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: .65rem;
    padding-left: 0;
    list-style: none
}

.article-content ul > li, .article-content ol > li {
    background: #fbfdff;
    border: 1px solid #d8e7f2;
    border-radius: 15px;
    min-height: 58px;
    padding: .75rem .85rem .75rem 2.7rem;
    position: relative
}

.article-content ul > li:before, .article-content ol > li:before {
    background: var(--mint);
    color: #277f73;
    content: "✓";
    border-radius: 8px;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: .65rem;
    font-weight: 900;
    display: grid;
    position: absolute;
    top: .78rem;
    left: .78rem
}

.article-content ol {
    counter-reset: article-step
}

.article-content ol > li {
    counter-increment: article-step
}

.article-content ol > li:before {
    background: var(--sky);
    color: var(--blue-dark);
    content: counter(article-step)
}

.article-content li > p {
    margin: 0;
    line-height: 1.58
}

.article-content th:first-child:before {
    content: "▦";
    background: #ffffffb3;
    border-radius: 8px;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: .5rem;
    font-size: .68rem;
    display: inline-grid
}

.hero-lead, .split-heading > p, .method-intro > p, .pricing-copy > p, .teachers-panel > div:first-child > p, .page-hero-content > p, .page-bottom-cta p, .contact-demo > p {
    padding-left: 2rem;
    position: relative
}

.hero-lead:before, .split-heading > p:before, .method-intro > p:before, .pricing-copy > p:before, .teachers-panel > div:first-child > p:before, .page-hero-content > p:before, .page-bottom-cta p:before, .contact-demo > p:before {
    background: var(--sky-strong);
    width: 22px;
    height: 22px;
    color: var(--blue-dark);
    content: "✦";
    border-radius: 8px;
    place-items: center;
    font-size: .55rem;
    font-weight: 900;
    display: grid;
    position: absolute;
    top: .38em;
    left: 0
}

.teachers-panel > div:first-child > p:before, .contact-demo > p:before {
    color: #a9d3ff;
    background: #ffffff24
}

.article-note {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--off-white);
    grid-template-columns:auto 1fr;
    gap: 1rem;
    margin-top: 4rem;
    padding: 1.3rem;
    display: grid
}

.article-note > span {
    background: var(--sky);
    width: 44px;
    height: 44px;
    color: var(--blue-dark);
    border-radius: 15px;
    place-items: center;
    font-weight: 850;
    display: grid
}

.article-note strong {
    display: block
}

.article-note p {
    color: var(--ink-soft);
    margin: .25rem 0 0;
    font-size: .85rem
}

.page-bottom-cta {
    background: var(--off-white);
    padding: 0 0 7rem
}

.page-bottom-cta-inner {
    background: var(--sky);
    border-radius: 30px;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 3rem;
    display: flex
}

.page-bottom-cta h2 {
    color: #ffffff;
    letter-spacing: -.035em;
    margin: 0;
    font-size: 2rem
}

.page-bottom-cta p {
    color: var(--ink-soft);
    margin: .35rem 0 0
}

.page-bottom-actions {
    flex-wrap: wrap;
    flex: none;
    justify-content: flex-end;
    gap: .7rem;
    display: flex
}

.contact-demo {
    border-radius: var(--radius-lg);
    background: var(--navy);
    color: #fff;
    margin: 4rem 0 0;
    padding: 2rem
}

.contact-demo h2 {
    color: #fff;
    margin: 0 0 .4rem;
    font-size: 2rem
}

.contact-demo > p {
    color: #bfd6eb;
    margin: 0 0 1.5rem
}

.contact-form-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 1rem;
    display: grid
}

.contact-form-grid label {
    color: #b8d2ea;
    gap: .38rem;
    font-size: .75rem;
    font-weight: 720;
    display: grid
}

.contact-form-grid .contact-field {
    min-width: 0
}

.contact-form-grid .contact-field--wide {
    grid-column: 1/-1
}

.contact-form-grid input, .contact-form-grid textarea, .contact-form-grid select {
    color: #fff;
    background: #ffffff14;
    border: 1px solid #fff3;
    border-radius: 13px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: .85rem .9rem
}

.contact-form-grid option {
    color: var(--ink)
}

.contact-form-grid textarea {
    resize: vertical;
    min-height: 105px
}

.contact-form-grid input:focus, .contact-form-grid textarea:focus, .contact-form-grid select:focus {
    border-color: #82d8ec;
    box-shadow: 0 0 0 3px #40b3d833;
    outline: none
}

.contact-form-grid input.is-invalid, .contact-form-grid textarea.is-invalid, .contact-form-grid select.is-invalid {
    background: #ff667814;
    border-color: #ff91a0;
    box-shadow: 0 0 0 3px #ff667824
}

.contact-field-error {
    color: #ffb7c0;
    min-height: 1.1rem;
    font-size: .73rem;
    font-weight: 650;
    line-height: 1.35
}

.contact-form-status {
    grid-column: 1/-1;
    color: #ffd5da;
    background: #ff667817;
    border: 1px solid #ff91a066;
    border-radius: 13px;
    padding: .8rem 1rem;
    font-size: .86rem;
    font-weight: 650
}

.contact-form-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important
}

.form-action-row {
    grid-column: 1/-1;
    align-items: center;
    gap: 1rem;
    margin-top: .4rem;
    display: flex
}

.form-action-row button[disabled] {
    cursor: wait;
    opacity: .72
}

.form-action-row small {
    color: #8fb0ce;
    max-width: 360px;
    line-height: 1.35
}

body.modal-open {
    overflow: hidden
}

.contact-success-modal {
    z-index: 2000;
    position: fixed;
    inset: 0;
    place-items: center;
    padding: 1.2rem;
    display: grid
}

.contact-success-modal[hidden] {
    display: none
}

.contact-success-modal__backdrop {
    background: #071b2dcc;
    backdrop-filter: blur(8px);
    opacity: 0;
    position: absolute;
    inset: 0;
    transition: opacity .18s ease
}

.contact-success-modal__dialog {
    color: var(--ink);
    background: linear-gradient(145deg, #fff 0%, #f5fbff 70%, #eef9e6 100%);
    border: 1px solid #fff;
    border-radius: 28px;
    box-shadow: 0 30px 90px #071b2d66;
    width: min(100%, 500px);
    padding: 2.4rem 2rem 2rem;
    text-align: center;
    opacity: 0;
    position: relative;
    transform: translateY(18px) scale(.96);
    transition: opacity .18s ease, transform .18s ease
}

.contact-success-modal.is-open .contact-success-modal__backdrop,
.contact-success-modal.is-open .contact-success-modal__dialog {
    opacity: 1
}

.contact-success-modal.is-open .contact-success-modal__dialog {
    transform: translateY(0) scale(1)
}

.contact-success-modal__icon {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--green));
    border: 7px solid #e9f8f2;
    border-radius: 50%;
    width: 82px;
    height: 82px;
    margin: 0 auto 1.1rem;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 68px;
    display: block;
    box-shadow: 0 12px 30px #40b3d83d
}

.contact-success-modal h2 {
    color: var(--navy);
    margin: 0 0 .7rem;
    font-size: clamp(1.55rem, 4vw, 2rem)
}

.contact-success-modal p {
    color: var(--muted);
    margin: 0 auto 1.5rem;
    max-width: 390px;
    line-height: 1.65
}

.contact-success-modal__close {
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
    line-height: 1;
    position: absolute;
    top: .8rem;
    right: .8rem;
    cursor: pointer
}

.contact-success-modal__close:hover, .contact-success-modal__close:focus-visible {
    color: var(--navy);
    background: #0e31500d;
    outline: none
}

.content-placeholder {
    grid-template-columns:repeat(3, 1fr);
    gap: 1rem;
    margin: 3rem 0 0;
    display: grid
}

.content-placeholder article {
    background: var(--off-white);
    border: 1px dashed #9dbbd4;
    border-radius: 22px;
    min-height: 210px;
    padding: 1.3rem
}

.content-placeholder span {
    color: var(--blue-dark);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 850
}

.content-placeholder h3 {
    color: var(--navy);
    margin: 3rem 0 .5rem
}

.content-placeholder p {
    color: var(--ink-soft);
    margin: 0;
    font-size: .85rem
}

@media (width <= 1080px) {
    .desktop-nav, .header-cta {
        display: none
    }

    .header-inner {
        grid-template-columns:1fr auto
    }

    .mobile-menu {
        display: block
    }

    .mobile-menu > summary {
        cursor: pointer;
        background: var(--sky);
        border-radius: 14px;
        place-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        list-style: none;
        display: grid
    }

    .mobile-menu > summary::-webkit-details-marker {
        display: none
    }

    .mobile-menu > summary span {
        background: var(--navy);
        border-radius: 2px;
        width: 20px;
        height: 2px
    }

    .mobile-panel {
        border: 1px solid var(--line);
        width: min(390px, 100vw - 32px);
        box-shadow: var(--shadow-soft);
        background: #fff;
        border-radius: 24px;
        padding: 1rem;
        position: absolute;
        top: 58px;
        right: 0
    }

    .mobile-nav {
        gap: .2rem;
        margin-bottom: .8rem;
        display: grid
    }

    .mobile-nav .nav-group summary, .mobile-nav .nav-contact {
        padding: .8rem;
        font-size: .95rem;
        display: block
    }

    .mobile-nav .nav-popover {
        background: var(--off-white);
        width: auto;
        box-shadow: none;
        border: 0;
        border-radius: 13px;
        position: static;
        transform: none
    }

    .mobile-nav .nav-popover:before {
        display: none
    }

    .mobile-panel > .button {
        width: 100%
    }

    .hero-grid {
        grid-template-columns:1fr .82fr;
        gap: 1.5rem
    }

    .hero-visual {
        transform-origin: 50%;
        transform: scale(.86)
    }

    .pin-wall {
        columns: 3 250px
    }

    .learning-lab-grid {
        grid-template-columns:1fr .86fr
    }

    .lab-visual, .skill-compass {
        min-height: 530px
    }

    .final-cta-inner {
        grid-template-columns:1fr 145px auto
    }

    .final-cta-visual {
        width: 145px
    }

    .benefit-grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .pricing-grid {
        grid-template-columns:1fr
    }

    .pricing-copy {
        max-width: 660px
    }

    .footer-grid {
        grid-template-columns:1.25fr repeat(2, .7fr)
    }

    .footer-action {
        border-top: 1px solid #ffffff21;
        grid-column: 1/-1;
        padding-top: 1.5rem
    }
}

@media (width <= 820px) {
    .shell, .narrow-shell {
        width: min(100% - 32px, 680px)
    }

    .utility-points {
        display: none
    }

    .hero-grid {
        grid-template-columns:1fr;
        padding-block: 4rem 3rem
    }

    .hero h1 {
        font-size: clamp(3.1rem, 12vw, 5rem)
    }

    .hero-visual {
        width: min(100%, 520px);
        min-height: 430px;
        margin-inline: auto;
        transform: none
    }

    .program-grid {
        grid-template-columns:1fr
    }

    .page-hero-grid {
        grid-template-columns:1fr;
        gap: 2.5rem
    }

    .page-hero-art-stack {
        width: min(100%, 540px);
        min-height: 470px;
        margin-inline: auto
    }

    .pin-wall {
        columns: 2 260px
    }

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

    .stats-grid > div:nth-child(3) {
        border-top: 1px solid var(--line)
    }

    .stats-grid > div:nth-child(4) {
        border-top: 1px solid var(--line);
        border-right: 1px solid var(--line)
    }

    .section {
        padding-block: 5.5rem
    }

    .split-heading, .method-grid, .teachers-panel, .final-cta-inner, .learning-lab-grid {
        grid-template-columns:1fr
    }

    .lab-visual, .skill-compass {
        min-height: 580px
    }

    .lesson-flow {
        grid-template-columns:repeat(2, 1fr)
    }

    .lesson-flow:before {
        display: none
    }

    .method-grid {
        gap: 3rem
    }

    .method-intro {
        position: static
    }

    .teachers-panel {
        gap: 2.5rem;
        padding: 3rem
    }

    .final-cta-inner {
        justify-items: start;
        padding: 3rem
    }

    .final-cta-visual {
        width: 190px
    }

    .content-layout {
        grid-template-columns:1fr;
        gap: 2rem
    }

    .content-sidebar {
        position: static
    }

    .content-sidebar nav {
        border: 0;
        gap: .5rem;
        padding-bottom: .4rem;
        display: flex;
        overflow-x: auto
    }

    .content-sidebar nav a {
        border: 1px solid var(--line);
        border-radius: 999px;
        flex: none;
        padding: .6rem .85rem
    }

    .sidebar-card {
        display: none
    }

    .page-bottom-cta-inner {
        flex-direction: column;
        align-items: flex-start
    }

    .page-bottom-actions {
        justify-content: flex-start
    }

    .content-placeholder {
        grid-template-columns:1fr
    }

    .page-feature-icons {
        grid-template-columns:repeat(2, 1fr)
    }

    .article-visual-left, .article-visual-right {
        margin-left: 0
    }
}

@media (width <= 620px) {
    .utility-inner {
        text-align: center;
        justify-content: center
    }

    .header-inner {
        min-height: 72px
    }

    .brand-mark {
        width: 40px;
        height: 40px
    }

    .brand-copy strong {
        font-size: 1rem
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch
    }

    .hero-actions .button {
        width: 100%
    }

    .hero-actions .text-link {
        width: max-content
    }

    .hero-visual {
        min-height: 390px
    }

    .hero-image-shell {
        inset: 5% 0 3%
    }

    .hero-chip-one {
        left: 0
    }

    .hero-chip-two, .hero-glyph-three {
        display: none
    }

    .word-card {
        border-radius: 20px;
        width: 225px
    }

    .word-card strong {
        font-size: 2.25rem
    }

    .word-card-one {
        left: 0
    }

    .word-card-two {
        right: 0
    }

    .word-card-three {
        left: 5%
    }

    .hero-badge {
        width: 112px;
        height: 112px;
        right: 0
    }

    .stats-grid > div {
        min-height: 104px;
        padding: 1rem
    }

    .stats-grid strong {
        font-size: 1.42rem
    }

    .program-grid, .price-cards, .benefit-grid, .contact-form-grid {
        grid-template-columns:minmax(0, 1fr)
    }

    .pin-wall {
        columns: 1
    }

    .lab-visual {
        border-width: 5px;
        border-radius: 30px;
        min-height: 440px
    }

    .lab-mini-image {
        border-width: 4px;
        border-radius: 21px;
        width: 128px
    }

    .lab-sticker-one {
        top: 31%
    }

    .lab-sticker-two {
        display: none
    }

    .skill-compass {
        border-radius: 30px;
        min-height: 540px
    }

    .skill-center {
        width: 124px;
        height: 124px
    }

    .skill-node {
        min-width: 78px
    }

    .skill-node i {
        border-radius: 16px;
        width: 48px;
        height: 48px
    }

    .skill-node svg {
        width: 23px;
        height: 23px
    }

    .skill-speaking {
        top: 5%
    }

    .skill-listening {
        top: 25%;
        right: 1%
    }

    .skill-vocabulary {
        bottom: 13%;
        right: 4%
    }

    .skill-grammar {
        bottom: 13%;
        left: 4%
    }

    .skill-confidence {
        top: 25%;
        left: 1%
    }

    .lesson-flow {
        grid-template-columns:1fr
    }

    .lesson-flow li {
        min-height: 220px
    }

    .story-pin {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto
    }

    .program-card {
        grid-template-columns:1fr;
        min-height: 570px
    }

    .program-card h3, .program-card p {
        max-width: none
    }

    .program-art {
        width: 112%;
        height: 315px;
        margin: 0 -6% -1.7rem
    }

    .benefit-grid article {
        min-height: 235px
    }

    .method-list li {
        grid-template-columns:58px 1fr;
        gap: 1rem;
        padding: 1.2rem
    }

    .method-list > li > span {
        width: 48px;
        height: 48px
    }

    .method-list:before {
        left: 45px
    }

    .teachers-panel, .final-cta-inner {
        border-radius: 28px;
        padding: 2rem
    }

    .teachers-visual {
        border-radius: 24px;
        min-height: 230px
    }

    .final-cta-visual {
        width: 160px
    }

    .full-copy summary {
        padding: 1.3rem;
        font-size: 1rem
    }

    .full-copy .article-content {
        padding: .5rem 1.3rem 2rem
    }

    .page-hero {
        padding: 3.5rem 0 4rem
    }

    .page-hero h1 {
        font-size: clamp(2.8rem, 13vw, 4.5rem)
    }

    .page-hero-art-stack {
        min-height: 390px
    }

    .page-hero-art {
        inset: 0 2% 7% 0
    }

    .page-hero-mini {
        border-width: 4px;
        width: 148px;
        height: 178px;
        right: 0
    }

    .page-hero-glyph {
        width: 42px;
        height: 42px
    }

    .page-hero-glyph-one {
        left: 0
    }

    .page-hero-glyph-two {
        display: none
    }

    .content-section {
        padding-block: 3.8rem 5rem
    }

    .article-content table {
        white-space: nowrap;
        display: block;
        overflow-x: auto
    }

    .article-content h2, .article-content h3 {
        padding-left: 3rem
    }

    .article-content h2:before, .article-content h3:before {
        border-radius: 13px;
        width: 38px;
        height: 38px
    }

    .article-content > p {
        padding: .9rem .85rem .9rem 3.1rem
    }

    .article-content > p:before {
        left: .78rem
    }

    .article-content ul, .article-content ol {
        grid-template-columns:1fr
    }

    .page-feature-icons {
        gap: .5rem
    }

    .page-feature-icons > span {
        min-height: 112px
    }

    .article-visual {
        border-radius: 26px;
        margin-block: 3.4rem
    }

    .article-visual-image {
        aspect-ratio: 4/3
    }

    .article-visual figcaption {
        grid-template-columns:auto 1fr;
        min-height: 140px;
        padding: 1.1rem
    }

    .article-visual figcaption > b {
        display: none
    }

    .visual-caption-icon {
        border-radius: 16px;
        width: 48px;
        height: 48px
    }

    .article-visual figcaption h3 {
        font-size: 1.2rem
    }

    .page-bottom-cta-inner {
        padding: 2rem
    }

    .form-action-row {
        flex-direction: column;
        align-items: stretch
    }

    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap: 2.5rem 1.4rem
    }

    .footer-brand, .footer-action {
        grid-column: 1/-1
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: .3rem
    }
}

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

    .motion-ready [data-reveal] {
        opacity: 1 !important;
        translate: 0 !important;
        scale: 1 !important
    }

    [data-tilt], .marquee-track, .interest-track {
        transform: none !important
    }
}

:root {
    --ink: #0a2743;
    --ink-soft: #526b82;
    --blue: #286fda;
    --blue-dark: #164f9f;
    --sky: #dceeff;
    --sky-strong: #bedfff;
    --paper: #fcfdff;
    --off-white: #f4f8fc;
    --line: #d5e2ed;
    --mint: #def3ee;
    --lavender: #eae8fb;
    --sand: #f7ead5;
    --navy: #092e56;
    --radius-lg: 38px;
    --radius-md: 26px;
    --radius-sm: 17px;
    --shadow-soft: 0 28px 80px #0c30531f, 0 3px 12px #0c30530d;
    --shadow-premium: 0 35px 90px #0c30532b, 0 8px 24px #0c305314;
    --font-sans: "Aptos", "Segoe UI Variable", "Segoe UI", Arial, sans-serif
}

body {
    background: radial-gradient(circle at 12% 8%, #dceeff80, transparent 23rem), var(--paper);
    color: var(--ink);
    letter-spacing: -.008em
}

.shell {
    width: min(1240px, 100% - 56px)
}

.utility-bar {
    color: #e6f3ff;
    background: linear-gradient(90deg, #08294d, #0c3765 52%, #08294d)
}

.utility-inner {
    min-height: 38px
}

.site-header {
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    background: #fcfdffe0;
    border-bottom-color: #092e5614;
    box-shadow: 0 10px 36px #092e560b
}

.site-header:after {
    background: linear-gradient(90deg, #286fda, #7fbbf5, #a899de, #69b9a8);
    height: 2px
}

.header-inner {
    gap: 2rem;
    min-height: 88px
}

.brand-mark {
    letter-spacing: .04em;
    background: linear-gradient(145deg, #ffffff38, #0000 48%), linear-gradient(145deg, #397fe3, #123f7c);
    border: 1px solid #ffffffb3;
    border-radius: 17px;
    width: 48px;
    height: 48px;
    font-size: .78rem;
    transform: none;
    box-shadow: 0 12px 26px #1752973d, inset 0 1px #ffffff4d
}

.brand-copy strong {
    letter-spacing: -.035em;
    font-size: 1.12rem;
    font-weight: 760
}

.brand-copy small {
    color: #607991;
    letter-spacing: .16em;
    font-size: .63rem
}

.header-actions {
    align-items: center;
    gap: .65rem;
    display: flex
}

.language-switcher {
    z-index: 55;
    position: relative
}

.language-switcher > summary {
    cursor: pointer;
    color: var(--navy);
    background: #fff;
    border: 1px solid #092e561f;
    border-radius: 999px;
    align-items: center;
    gap: .42rem;
    min-height: 42px;
    padding: .55rem .72rem;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    list-style: none;
    display: flex;
    box-shadow: 0 10px 25px #092e5612;
    transition: border-color .16s, background .16s, transform .16s
}

.language-switcher > summary::-webkit-details-marker {
    display: none
}

.language-switcher > summary:after {
    content: "⌄";
    color: #5f7992;
    font-size: .72rem;
    transform: translateY(-1px)
}

.language-switcher[open] > summary, .language-switcher > summary:hover {
    background: var(--sky);
    border-color: #347fe65c
}

.language-switcher__flag {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 1rem;
    line-height: 1
}

.language-switcher__menu {
    background: #fffffff7;
    border: 1px solid #092e561a;
    border-radius: 18px;
    width: 205px;
    padding: .5rem;
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    box-shadow: var(--shadow-premium);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.language-switcher__menu a {
    color: #294865;
    border-radius: 12px;
    grid-template-columns:24px 1fr auto;
    align-items: center;
    gap: .55rem;
    padding: .68rem .7rem;
    font-size: .82rem;
    font-weight: 680;
    display: grid
}

.language-switcher__menu a:hover, .language-switcher__menu a.active {
    color: var(--blue-dark);
    background: var(--sky)
}

.language-switcher__menu small {
    color: #6b8298;
    font-size: .63rem;
    font-weight: 800
}

.nav-group summary, .nav-contact {
    color: #234762;
    border-radius: 999px;
    padding: .67rem .82rem;
    font-size: .84rem;
    font-weight: 680
}

.nav-popover {
    box-shadow: var(--shadow-premium);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: #fffffff7;
    border-color: #092e561a;
    border-radius: 24px;
    padding: .7rem
}

.button {
    background: linear-gradient(#ffffff29, #0000 45%), linear-gradient(135deg, #347fe6, #1455ad);
    border: 1px solid #ffffff47;
    min-height: 52px;
    padding-inline: 1.5rem;
    font-weight: 720;
    box-shadow: 0 16px 34px #195eb340, inset 0 1px #ffffff4d
}

.button:hover {
    background: linear-gradient(#ffffff2e, #0000 45%), linear-gradient(135deg, #2d76d9, #0d438e);
    transform: translateY(-3px);
    box-shadow: 0 20px 42px #195eb352, inset 0 1px #ffffff57
}

.button-outline, .button-light {
    color: var(--navy);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: #ffffffdb;
    border-color: #092e5624;
    box-shadow: 0 10px 28px #092e5614
}

.hero {
    isolation: isolate;
    background: radial-gradient(circle at 81% 17%, #fffffff0, transparent 18rem), radial-gradient(circle at 8% 86%, #b0d5f8a8, transparent 24rem), linear-gradient(125deg, #eaf5ff 0%, var(--sky) 46%, #cfe7ff 100%)
}

.hero:before {
    pointer-events: none;
    background-image: linear-gradient(#185ba00b 1px, #0000 1px), linear-gradient(90deg, #185ba00b 1px, #0000 1px);
    background-size: 54px 54px;
    border: 0;
    border-radius: 0;
    width: auto;
    height: auto;
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, #00000080, #0000 64%);
    mask-image: linear-gradient(90deg, #00000080, #0000 64%)
}

.hero:after {
    content: "";
    z-index: -1;
    border: 1px solid #1d63b129;
    border-radius: 50%;
    width: 38rem;
    height: 38rem;
    position: absolute;
    bottom: -12rem;
    right: -9rem;
    box-shadow: 0 0 0 70px #ffffff17, 0 0 0 140px #ffffff0f
}

.hero-grid {
    grid-template-columns:.96fr 1.04fr;
    gap: 4.5rem;
    min-height: 720px;
    padding-block: 5.8rem 6.3rem
}

.eyebrow, .section-kicker {
    color: #1855a0;
    letter-spacing: .16em;
    gap: .65rem;
    font-size: .7rem;
    font-weight: 780
}

.eyebrow {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffff8c;
    border: 1px solid #15549a24;
    border-radius: 999px;
    padding: .55rem .8rem
}

.hero h1 {
    color: #082d53;
    letter-spacing: -.072em;
    margin-block: 1.35rem 1.55rem;
    font-size: clamp(3.5rem, 5.4vw, 5.9rem);
    font-weight: 670;
    line-height: .94
}

.hero h1 em {
    color: #1b5daf;
    letter-spacing: -.055em;
    font-family: Iowan Old Style, Baskerville, Georgia, serif;
    font-weight: 600
}

.hero h1 em:after {
    opacity: .72;
    background: linear-gradient(90deg, #84bdf2, #527ec4);
    height: .08em;
    bottom: -.04em
}

.hero-lead {
    color: #385b75;
    max-width: 610px;
    font-size: 1.17rem;
    line-height: 1.75
}

.hero-image-shell {
    background: #cfe7ff;
    border: 1px solid #ffffffe6;
    border-radius: 52px 52px 52px 18px;
    inset: 2% 0 1%;
    box-shadow: 0 42px 100px #12427138, inset 0 0 0 8px #ffffff4d
}

.hero-visual:before {
    background: #ffffff47;
    border-color: #12539b2e;
    border-radius: 58px 58px 58px 22px;
    inset: -2% -3% 4% 7%;
    transform: rotate(2.3deg)
}

.hero-chip, .hero-glyph {
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    background: #ffffffd1;
    border-color: #092e561a;
    box-shadow: 0 18px 42px #092e5624, inset 0 1px #fffc
}

.hero-badge {
    background: radial-gradient(circle at 35% 25%, #5a9ee28c, #0000 38%), linear-gradient(145deg, #124c88, #062747);
    border: 1px solid #ffffff2e;
    width: 154px;
    height: 154px;
    bottom: -2%;
    right: -2%;
    box-shadow: 0 26px 58px #082d524d, inset 0 1px #ffffff2e
}

.visual-label {
    z-index: var(--visual-label-z, 4);
    position: absolute;
    top: var(--visual-label-top, auto);
    right: var(--visual-label-right, auto);
    bottom: var(--visual-label-bottom, auto);
    left: var(--visual-label-left, auto)
}

.visual-label--chip {
    color: var(--navy);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    background: #ffffffd1;
    border: 1px solid #092e561a;
    border-radius: 999px;
    align-items: center;
    gap: .48rem;
    padding: .7rem .95rem;
    font-size: .74rem;
    font-weight: 790;
    display: inline-flex;
    box-shadow: 0 18px 42px #092e5624, inset 0 1px #fffc
}

.visual-label--chip .visual-label__icon {
    color: var(--blue)
}

.visual-label--chip .visual-label__title {
    font: inherit
}

.visual-label--chip .visual-label__subtitle {
    color: #53708c;
    font-size: .66rem
}

.visual-label--badge {
    color: #fff;
    text-align: center;
    background: radial-gradient(circle at 35% 25%, #5a9ee28c, #0000 38%), linear-gradient(145deg, #124c88, #062747);
    border: 1px solid #ffffff2e;
    border-radius: 50%;
    place-content: center;
    width: 154px;
    height: 154px;
    display: grid;
    box-shadow: 0 26px 58px #082d524d, inset 0 1px #ffffff2e
}

.visual-label--badge .visual-label__icon {
    color: #ffcf6b;
    font-size: 1.25rem
}

.visual-label--badge .visual-label__title {
    margin-top: .25rem;
    font-size: .9rem
}

.visual-label--badge .visual-label__subtitle {
    color: #aed6ff;
    font-size: .62rem
}

.visual-label--icon {
    color: var(--blue-dark);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffffdb;
    border: 1px solid #102b4c1a;
    border-radius: 18px;
    place-items: center;
    width: 52px;
    height: 52px;
    display: grid;
    box-shadow: 0 16px 30px #0d315d24
}

.visual-label--icon svg {
    width: 25px;
    height: 25px
}

.visual-label--icon-book {
    color: #258d7d;
    --visual-label-animation-duration: 6.2s;
    --visual-label-animation-delay: .7s
}

.visual-label--icon-chat {
    --visual-label-animation-duration: 7s
}

.visual-label--icon-headphones {
    color: #725fc7;
    --visual-label-animation-duration: 7.8s;
    --visual-label-animation-delay: 1.2s
}

.visual-label--animation-float {
    animation: 5.2s ease-in-out infinite chip-float
}

.visual-label--animation-float-reverse {
    animation: 6.1s ease-in-out .7s infinite reverse chip-float
}

.visual-label--animation-drift {
    animation: var(--visual-label-animation-duration, 7s) ease-in-out var(--visual-label-animation-delay, 0s) infinite icon-drift
}

.visual-label--animation-drift-reverse {
    animation: var(--visual-label-animation-duration, 6.2s) ease-in-out var(--visual-label-animation-delay, .7s) infinite reverse icon-drift
}

@media (max-width: 640px) {
    .visual-label {
        top: var(--visual-label-mobile-top, var(--visual-label-top, auto));
        right: var(--visual-label-mobile-right, var(--visual-label-right, auto));
        bottom: var(--visual-label-mobile-bottom, var(--visual-label-bottom, auto));
        left: var(--visual-label-mobile-left, var(--visual-label-left, auto))
    }

    .visual-label--badge {
        width: 112px;
        height: 112px
    }

    .visual-label--hide-mobile {
        display: none
    }
}

.language-marquee {
    background: linear-gradient(90deg, #082a4d, #0b3969 48%, #082a4d);
    border: 0
}

.marquee-track span {
    color: #fffffff0;
    letter-spacing: .22em;
    min-height: 58px;
    font-size: .7rem;
    font-weight: 760
}

.stats-strip {
    background: #fffffff5;
    border-bottom-color: #092e5614
}

.stats-grid > div {
    border-color: #092e5617;
    min-height: 132px;
    padding-inline: 2.25rem
}

.stats-grid strong {
    letter-spacing: -.05em;
    font-size: 1.9rem;
    font-weight: 700
}

.section {
    padding-block: 8.4rem
}

.section-heading h2, .method-intro h2, .pricing-copy h2, .teachers-panel h2, .final-cta h2 {
    letter-spacing: -.06em;
    font-size: clamp(2.5rem, 4vw, 4.35rem);
    font-weight: 660
}

.programs-section {
    background: radial-gradient(circle at 90% 8%, #dceeffd9, #0000 23rem), linear-gradient(#f7faff, #f2f7fb)
}

.program-grid {
    gap: 1.35rem
}

.program-card {
    isolation: isolate;
    border-color: #092e5617;
    border-radius: 40px;
    min-height: 370px;
    padding: 1.85rem;
    box-shadow: 0 16px 46px #092e5612, inset 0 1px #ffffffd1
}

.program-card:before {
    content: "";
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(140deg, #ffffffb3, #0000 55%);
    border-radius: 39px;
    position: absolute;
    inset: 1px
}

.program-card:after {
    border-color: #092e561a;
    width: 290px;
    height: 290px;
    bottom: -80px;
    right: -40px;
    box-shadow: 0 0 0 42px #ffffff1c
}

.program-card:hover {
    box-shadow: var(--shadow-premium);
    transform: translateY(-8px)
}

.program-topline b {
    background: #ffffff6b;
    border-color: #092e5621
}

.program-card h3 {
    letter-spacing: -.055em;
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    font-weight: 670
}

.program-art {
    filter: drop-shadow(0 24px 28px #092e5626);
    height: 304px
}

.stories-section {
    background: radial-gradient(circle at 5% 11%, #cde7ffcc, #0000 24rem), radial-gradient(circle at 94% 76%, #e7e3fcb8, #0000 26rem), #fcfdff
}

.story-pin {
    border-color: #092e561a;
    border-radius: 32px;
    box-shadow: 0 24px 64px #092e561c
}

.story-pin-image:after {
    background: linear-gradient(#0000 34%, #04182d0f 52%, #04182de8 100%)
}

.story-caption strong {
    font-weight: 650
}

.method-section, .content-section {
    background-color: #fff;
    background-image: linear-gradient(90deg, #dceeff2e 1px, #0000 1px), linear-gradient(#dceeff29 1px, #0000 1px), none;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, repeat;
    background-size: 64px 64px;
    background-attachment: scroll, scroll, scroll;
    background-origin: padding-box, padding-box, padding-box;
    background-clip: border-box, border-box, border-box
}

.method-list li, .lesson-flow li {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffffe6;
    border-color: #092e5617;
    box-shadow: 0 18px 52px #092e5612
}

.benefit-grid article {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 52px #092e5612
}

.learning-lab-section {
    background: radial-gradient(circle at 80% 18%, #fff9, #0000 19rem), linear-gradient(150deg, #d8ecff 0%, #eef7ff 52%, #e9e8f8 100%)
}

.lab-visual, .teachers-visual, .article-visual-image {
    box-shadow: var(--shadow-premium);
    border-color: #ffffffdb
}

.teachers-panel, .final-cta-inner, .page-bottom-cta-inner {
    background: radial-gradient(circle at 78% 15%, #5296db59, #0000 19rem), linear-gradient(135deg, #0d3b6a, #062746 72%);
    border: 1px solid #ffffff24;
    box-shadow: 0 35px 90px #0522403b, inset 0 1px #ffffff1f
}

.page-hero {
    isolation: isolate;
    background: radial-gradient(circle at 78% 22%, #ffffffd1, #0000 19rem), linear-gradient(125deg, #eaf5ff, #dceeff 58%, #d1e8ff)
}

.page-hero:before {
    content: "";
    z-index: -1;
    background-image: linear-gradient(#185ba009 1px, #0000 1px), linear-gradient(90deg, #185ba009 1px, #0000 1px);
    background-size: 58px 58px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, #0000006b, #0000 72%);
    mask-image: linear-gradient(90deg, #0000006b, #0000 72%)
}

.page-hero-art {
    box-shadow: var(--shadow-premium), inset 0 0 0 7px #ffffff42;
    border: 1px solid #ffffffe6;
    border-radius: 46px 46px 46px 16px
}

.page-hero-mini {
    border-color: #ffffffe6;
    box-shadow: 0 24px 58px #092e5638
}

.page-hero h1 {
    letter-spacing: -.066em;
    font-weight: 660
}

.content-sidebar {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #f8fbfee0;
    border: 1px solid #092e5614;
    border-radius: 24px;
    padding: 1rem;
    box-shadow: 0 18px 46px #092e560f
}

.article-content h2, .article-content h3 {
    color: #092e56;
    letter-spacing: -.045em;
    font-weight: 660
}

.article-content h2:before, .article-content h3:before {
    background: linear-gradient(145deg, #ffffffeb, #dceeffd9);
    border: 1px solid #2569cd24;
    box-shadow: 0 10px 26px #124f911c
}

.article-content > p {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #ffffffd6;
    border-color: #092e5612;
    box-shadow: 0 12px 38px #092e560b
}

.article-content > p:nth-of-type(3n+2) {
    background: #edf7ffdb
}

.article-content > p:nth-of-type(3n+3) {
    background: #f4f2fddb
}

.article-content ul, .article-content ol {
    background: #f8fbfeeb;
    border-color: #092e5614;
    box-shadow: 0 16px 44px #092e560e
}

.full-copy .article-content h2 {
    min-height: 0;
    padding-left: 0
}

.full-copy .article-content h2:before {
    content: none
}

.full-copy .article-content h3 {
    min-height: 0;
    padding-left: 1rem
}

.full-copy .article-content h3:before,
.full-copy .article-content h3:nth-of-type(3n+2):before,
.full-copy .article-content h3:nth-of-type(3n+3):before {
    content: "";
    background: linear-gradient(180deg, #2f76bd, #86bce8);
    border: 0;
    border-radius: 999px;
    width: 3px;
    height: 1.25em;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: none
}

.full-copy .article-content > p {
    padding-left: 2rem
}

.full-copy .article-content > p:before,
.full-copy .article-content > p:nth-of-type(3n+2):before,
.full-copy .article-content > p:nth-of-type(3n+3):before {
    content: "";
    background: linear-gradient(180deg, #3d84c8, #91c5ec);
    border-radius: 999px;
    width: 3px;
    height: 22px;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%)
}

.article-visual {
    box-shadow: var(--shadow-premium);
    background: #fff;
    border: 1px solid #092e5614;
    border-radius: 34px
}

.article-visual figcaption {
    border-top: 1px solid #092e5612
}

.article-note, .trial-notice, .content-callout {
    box-shadow: 0 18px 48px #092e5612;
    background: linear-gradient(135deg, #eff8fff5, #fffffff5) !important;
    border-color: #195ca81f !important
}

.site-footer {
    background: radial-gradient(circle at 76% 0, #2d6fc13d, #0000 28rem), linear-gradient(145deg, #082e54, #041f3a);
    border-top: 1px solid #ffffff14
}

@media (width <= 1080px) {
    .shell {
        width: min(100% - 40px, 960px)
    }

    .hero-grid {
        gap: 2.5rem
    }
}

@media (width <= 760px) {
    .shell, .narrow-shell {
        width: min(100% - 30px, 680px)
    }

    .hero-grid {
        grid-template-columns:1fr;
        min-height: auto;
        padding-block: 4rem 4.5rem
    }

    .hero h1 {
        font-size: clamp(3rem, 14vw, 4.5rem)
    }

    .hero-image-shell {
        border-radius: 36px 36px 36px 14px
    }

    .section {
        padding-block: 5.7rem
    }

    .program-card {
        border-radius: 30px
    }

    .program-card:before {
        border-radius: 29px
    }
}

.hero-image-shell:after, .story-pin-image:before, .lab-visual:after, .teachers-visual:before, .final-cta-visual:after, .page-hero-art:after, .page-hero-mini:after, .article-visual-image:before {
    content: "";
    z-index: 2;
    mix-blend-mode: soft-light;
    opacity: .15;
    pointer-events: none;
    background-image: radial-gradient(circle at 20% 20%, #0d315d6b .45px, #0000 .6px), radial-gradient(circle at 75% 60%, #ffffffb8 .5px, #0000 .7px);
    background-position: 0 0, 2px 2px;
    background-size: 5px 5px, 6px 6px;
    position: absolute;
    inset: 0
}

.page-hero-mini:after {
    z-index: 1
}

.program-art {
    background: radial-gradient(circle at 52% 58%, #ffffff80, #0000 58%);
    border-radius: 48% 52% 46% 54%/56% 48% 52% 44%
}

.program-art img {
    filter: saturate(.96) contrast(1.015)
}

@media (width <= 1080px) {
    .header-actions {
        gap: .5rem
    }
}

@media (width <= 620px) {
    .language-switcher > summary {
        min-height: 40px;
        padding-inline: .62rem
    }

    .language-switcher__menu {
        right: -54px
    }
}