:root {
    --teachers-accent: #4f46e5;
    --teachers-accent-hover: #4338ca;
    --teachers-accent-active: #3730a3;
    --teachers-accent-soft: #eef2ff;
    --teachers-accent-muted: #e0e7ff;
    --teachers-bg: #f8fafc;
    --teachers-surface: #ffffff;
    --teachers-text: #18181b;
    --teachers-muted: #62626d;
    --teachers-border: #dfe3ea;
    --teachers-success: #287a5b;
    --teachers-radius: 20px;
}

body {
    background: var(--teachers-bg);
}

html:has(.teachers-landing) {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

main.teachers-landing-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.teachers-landing {
    overflow: hidden;
    color: var(--teachers-text);
}

.teachers-scroll-progress {
    position: fixed;
    top: 71px;
    left: 0;
    z-index: 12;
    width: 100%;
    height: 2px;
    background: var(--teachers-accent);
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
}

@supports (animation-timeline: scroll()) {
    .teachers-scroll-progress {
        animation: teachers-scroll-progress linear both;
        animation-timeline: scroll(root);
    }
}

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

.teachers-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 27px;
    color: var(--teachers-muted);
    font-size: 12px;
}

.teachers-breadcrumbs a {
    color: var(--teachers-accent);
    font-weight: 700;
}

.teachers-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr);
    align-items: center;
    overflow: hidden;
    width: min(1320px, calc(100% - 36px));
    min-height: min(720px, calc(100dvh - 98px));
    margin-top: 26px;
    gap: clamp(34px, 5vw, 78px);
    padding: clamp(48px, 7vw, 88px) clamp(30px, 4.8vw, 72px) 58px;
    border: 1px solid rgb(79 70 229 / 12%);
    border-radius: 32px;
    background:
        radial-gradient(circle at 82% 18%, rgb(254 254 255 / 92%) 0 7%, transparent 7.4%),
        linear-gradient(128deg, #f8f9ff 0 38%, #eef1ff 74%, #e6eaff 100%);
    box-shadow: 0 34px 90px rgb(55 48 163 / 10%);
}

.teachers-hero::before {
    position: absolute;
    inset: -20% -5% auto auto;
    z-index: -1;
    width: 56%;
    aspect-ratio: 1;
    border: 1px solid rgb(79 70 229 / 11%);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgb(79 70 229 / 3%),
        0 0 0 140px rgb(79 70 229 / 2%);
    content: "";
}

.teachers-hero__copy {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: start;
    gap: 24px;
}

.teachers-kicker {
    margin: 0;
    color: var(--teachers-accent);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.teachers-hero h1,
.teachers-section h2,
.teachers-final h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    letter-spacing: -.055em;
}

.teachers-hero h1 {
    max-width: 650px;
    font-size: clamp(50px, 5.6vw, 78px);
    line-height: .98;
}

.teachers-hero__line {
    display: block;
    overflow: hidden;
    padding: 0 .08em .08em 0;
}

.teachers-hero__line > span {
    display: block;
}

.teachers-hero__line--accent {
    color: var(--teachers-accent);
}

.teachers-hero__lead {
    max-width: 510px;
    margin: 0;
    color: var(--teachers-muted);
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.6;
}

.teachers-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.teachers-button,
.teachers-text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.teachers-button {
    position: relative;
    overflow: hidden;
    padding: 13px 21px;
    border-radius: 13px;
    background: var(--teachers-accent);
    color: #ffffff;
    box-shadow: 0 14px 32px rgb(79 70 229 / 17%);
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.teachers-button::after {
    position: absolute;
    inset: -40% auto -40% -45%;
    width: 32%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 42%), transparent);
    content: "";
    pointer-events: none;
    transform: skewX(-18deg) translateX(-180%);
    transition: transform .58s cubic-bezier(.16, 1, .3, 1);
}

.teachers-button:hover::after {
    transform: skewX(-18deg) translateX(620%);
}

.teachers-button:hover {
    background: var(--teachers-accent-hover);
    color: #ffffff;
    box-shadow: 0 18px 38px rgb(79 70 229 / 22%);
    transform: translateY(-2px);
}

.teachers-button:active {
    background: var(--teachers-accent-active);
    transform: translateY(0) scale(.98);
}

.teachers-button:focus-visible,
.teachers-text-link:focus-visible,
.teachers-questions summary:focus-visible {
    outline: 3px solid rgb(79 70 229 / 30%);
    outline-offset: 4px;
}

.teachers-text-link {
    gap: 9px;
    color: var(--teachers-accent-active);
}

.teachers-text-link span {
    transition: transform .2s ease;
}

.teachers-text-link:hover span {
    transform: translateX(4px);
}

.teachers-hero__visual {
    position: relative;
    perspective: 1100px;
    align-self: stretch;
    min-height: 470px;
}

.teachers-hero__backdrop {
    position: absolute;
    inset: 8% 1% 4% 8%;
    border: 1px solid rgb(79 70 229 / 13%);
    border-radius: 44% 56% 46% 54%;
    background:
        radial-gradient(circle at 76% 24%, rgb(255 255 255 / 88%) 0 8%, transparent 9%),
        linear-gradient(145deg, #e9edff 0%, #f4f6ff 55%, #dfe5ff 100%);
    box-shadow: inset 0 0 70px rgb(79 70 229 / 8%);
}

.teachers-hero__orbit {
    position: absolute;
    top: 8%;
    right: 4%;
    width: 64%;
    aspect-ratio: 1;
    border: 1px solid rgb(79 70 229 / 18%);
    border-radius: 50%;
    opacity: .72;
}

.teachers-hero__orbit::before,
.teachers-hero__orbit::after {
    position: absolute;
    border: 1px solid rgb(79 70 229 / 13%);
    border-radius: 50%;
    content: "";
}

.teachers-hero__orbit::before {
    inset: 12%;
}

.teachers-hero__orbit::after {
    inset: 27%;
}

.teachers-hero__scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    transform: rotateX(var(--visual-rotate-x, 0deg)) rotateY(var(--visual-rotate-y, 0deg)) translate3d(var(--visual-x, 0), var(--visual-y, 0), 0);
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}

.teachers-hero__visual img {
    position: absolute;
    z-index: 1;
    right: -8%;
    bottom: 0;
    width: 116%;
    max-width: none;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 28px 38px rgb(49 46 129 / 13%));
}

.teachers-signal {
    position: absolute;
    z-index: 3;
    display: grid;
    min-width: 190px;
    gap: 3px;
    padding: 15px 17px;
    border: 1px solid rgb(255 255 255 / 76%);
    border-radius: 16px;
    background: rgb(254 254 255 / 88%);
    box-shadow: 0 22px 52px rgb(55 48 163 / 16%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
}

.teachers-signal--schedule {
    top: 13%;
    left: -7%;
    transform: rotate(-4deg);
}

.teachers-signal--progress {
    right: -2%;
    bottom: 10%;
    transform: rotate(3deg);
}

.teachers-signal span {
    color: var(--teachers-accent);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.teachers-signal strong {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
}

.teachers-signal small {
    color: var(--teachers-muted);
    font-size: 11px;
}

.teachers-promises {
    margin-top: 28px;
    border-block: 1px solid var(--teachers-border);
    background: var(--teachers-surface);
}

.teachers-promises__grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1.25fr;
}

.teachers-promises p {
    display: grid;
    align-content: center;
    min-height: 128px;
    gap: 7px;
    margin: 0;
    padding: 24px 30px;
}

.teachers-promises p:first-child {
    padding-left: 0;
}

.teachers-promises p + p {
    border-left: 1px solid var(--teachers-border);
}

.teachers-promises strong {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
}

.teachers-promises span {
    color: var(--teachers-muted);
    font-size: 13px;
    line-height: 1.5;
}

.teachers-section {
    padding-top: clamp(88px, 10vw, 138px);
}

.teachers-heading {
    display: grid;
    max-width: 790px;
    gap: 18px;
    margin-bottom: 48px;
}

.teachers-section h2,
.teachers-final h2 {
    font-size: clamp(36px, 5vw, 62px);
    line-height: 1.04;
}

.teachers-heading > p,
.teachers-start__intro > p,
.teachers-trust > div > p,
.teachers-final p {
    max-width: 650px;
    margin: 0;
    color: var(--teachers-muted);
    font-size: 16px;
    line-height: 1.65;
}

.teachers-problem__flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #c6ccd7;
}

.teachers-problem__flow article {
    min-height: 190px;
    padding: 27px 24px 28px 0;
    border-bottom: 1px solid var(--teachers-border);
}

.teachers-problem__flow article + article {
    padding-left: 24px;
    border-left: 1px solid var(--teachers-border);
}

.teachers-problem__flow strong {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
}

.teachers-problem__flow p {
    margin: 17px 0 0;
    color: var(--teachers-muted);
    font-size: 14px;
    line-height: 1.6;
}

.teachers-problem {
    width: min(1320px, calc(100% - 36px));
    margin-top: clamp(88px, 10vw, 138px);
    padding: clamp(48px, 6vw, 76px);
    border: 1px solid rgb(79 70 229 / 12%);
    border-radius: 32px;
    background:
        radial-gradient(circle at 94% 8%, rgb(255 255 255 / 92%) 0 6%, transparent 6.5%),
        #e9edff;
}

.teachers-problem.teachers-section {
    padding-top: clamp(48px, 6vw, 76px);
}

.teachers-workbench {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 520px;
    gap: 14px;
}

.teachers-workbench__tabs {
    display: grid;
    align-content: stretch;
    gap: 10px;
}

.teachers-workbench__tabs button {
    position: relative;
    padding: 22px;
    border: 1px solid rgb(55 48 163 / 14%);
    border-radius: 16px;
    background: rgb(254 254 255 / 66%);
    color: #4d4d58;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.teachers-workbench__tabs button::after {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    opacity: 0;
    transform: translate(-8px, -50%) rotate(45deg);
    transition: opacity .25s ease, transform .25s ease;
}

.teachers-workbench__tabs button:hover {
    border-color: rgb(79 70 229 / 30%);
    transform: translateX(4px);
}

.teachers-workbench__tabs button[aria-selected="true"] {
    border-color: var(--teachers-accent);
    background: var(--teachers-accent);
    color: #f8fafc;
    box-shadow: 0 18px 38px rgb(55 48 163 / 18%);
}

.teachers-workbench__tabs button[aria-selected="true"]::after {
    opacity: 1;
    transform: translate(0, -50%) rotate(45deg);
}

.teachers-workbench__tabs button:focus-visible {
    outline: 3px solid rgb(79 70 229 / 28%);
    outline-offset: 3px;
}

.teachers-workbench__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
    overflow: hidden;
    min-width: 0;
    border-radius: 24px;
    background: #23213e;
    box-shadow: 0 28px 68px rgb(55 48 163 / 20%);
    transition: opacity .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}

.teachers-workbench__stage.is-changing {
    opacity: .55;
    transform: scale(.988);
}

.teachers-workbench__copy {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    justify-items: start;
    padding: clamp(34px, 4vw, 58px);
    color: #f8fafc;
}

.teachers-workbench__copy > span {
    color: #aeb7ff;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.teachers-workbench__copy h3 {
    max-width: 420px;
    margin: 25px 0 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(30px, 3.7vw, 48px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.teachers-workbench__copy p {
    max-width: 430px;
    margin: 23px 0 0;
    color: #c7cad8;
    font-size: 15px;
    line-height: 1.65;
}

.teachers-workbench__copy > strong {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid rgb(224 231 255 / 22%);
    color: #e0e7ff;
    font-size: 13px;
    line-height: 1.5;
}

.teachers-workbench__visual {
    position: relative;
    min-width: 0;
    background: #f1f2ff;
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

.teachers-workbench__visual img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 108%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 52% center;
    transform: translateX(-1%) scale(1.035);
    transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
}

.teachers-workbench__stage.is-changing .teachers-workbench__visual img {
    filter: saturate(.72);
    transform: translateX(1%) scale(1.075);
}

.teachers-workbench__halo {
    position: absolute;
    top: -22%;
    right: -10%;
    z-index: 2;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(255 255 255 / 38%);
    filter: blur(4px);
    pointer-events: none;
}

.teachers-capabilities {
    display: grid;
    grid-template-columns: 1.18fr .82fr 1fr;
    grid-template-areas:
        "students students schedule"
        "homework analytics finance";
    gap: 18px;
}

.teachers-capability {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-content: end;
    min-height: 260px;
    padding: clamp(25px, 3vw, 38px);
    border: 1px solid var(--teachers-border);
    border-radius: var(--teachers-radius);
    background: var(--teachers-surface);
    box-shadow: 0 18px 45px rgb(49 46 129 / 6%);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.teachers-capability::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(360px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgb(255 255 255 / 80%), transparent 58%);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

.teachers-capability:hover::before {
    opacity: .72;
}

.teachers-capability > * {
    position: relative;
    z-index: 1;
}

.teachers-capability:hover {
    border-color: rgb(79 70 229 / 30%);
    box-shadow: 0 23px 52px rgb(49 46 129 / 10%);
    transform: translateY(-4px);
}

.teachers-capability--students {
    grid-area: students;
    min-height: 340px;
    background:
        radial-gradient(circle at 85% 16%, rgb(255 255 255 / 95%) 0 8%, transparent 9%),
        linear-gradient(145deg, #e6eaff, #f7f8ff 74%);
}

.teachers-capability--schedule {
    grid-area: schedule;
}

.teachers-capability--homework {
    grid-area: homework;
}

.teachers-capability--analytics {
    grid-area: analytics;
    background: #eff8f4;
}

.teachers-capability--finance {
    grid-area: finance;
    background: #f2f3f7;
}

.teachers-capability > span {
    align-self: start;
    margin-bottom: auto;
    color: var(--teachers-accent);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.teachers-capability h3 {
    max-width: 480px;
    margin: 40px 0 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(21px, 2.5vw, 30px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.teachers-capability p {
    max-width: 500px;
    margin: 14px 0 0;
    color: var(--teachers-muted);
    font-size: 14px;
    line-height: 1.6;
}

.teachers-start {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(520px, 1.2fr);
    gap: clamp(50px, 9vw, 120px);
}

.teachers-start__intro {
    display: grid;
    align-content: start;
    gap: 22px;
}

.teachers-start__steps {
    display: grid;
    margin: 0;
    padding: 0;
    border-top: 1px solid #c6ccd7;
    list-style: none;
    counter-reset: teacher-start;
}

.teachers-start__steps li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr);
    align-items: center;
    min-height: 104px;
    gap: 28px;
    padding: 20px 0 20px 54px;
    border-bottom: 1px solid var(--teachers-border);
    counter-increment: teacher-start;
}

.teachers-start__steps li::before {
    position: absolute;
    left: 0;
    color: var(--teachers-accent);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    content: counter(teacher-start, decimal-leading-zero);
}

.teachers-start__steps strong {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 17px;
}

.teachers-start__steps span {
    color: var(--teachers-muted);
    font-size: 13px;
    line-height: 1.5;
}

.teachers-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "copy facts"
        "visual visual";
    align-items: start;
    gap: clamp(46px, 9vw, 120px);
    margin-top: clamp(88px, 10vw, 138px);
    padding: clamp(38px, 6vw, 70px);
    border-radius: var(--teachers-radius);
    background: #e9edff;
}

.teachers-trust__copy {
    grid-area: copy;
    display: grid;
    gap: 22px;
}

.teachers-trust dl {
    grid-area: facts;
    display: grid;
    margin: 0;
    border-top: 1px solid rgb(55 48 163 / 22%);
}

.teachers-trust__visual {
    position: relative;
    grid-area: visual;
    overflow: hidden;
    height: 390px;
    margin: 18px -1px -70px;
}

.teachers-trust__visual::before {
    position: absolute;
    inset: 12% 8% 4%;
    border-radius: 50% 50% 18% 18%;
    background: rgb(254 254 255 / 55%);
    content: "";
}

.teachers-trust__visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 24px 36px rgb(55 48 163 / 12%));
    mix-blend-mode: multiply;
}

.teachers-trust dl div {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    padding: 19px 0;
    border-bottom: 1px solid rgb(55 48 163 / 18%);
}

.teachers-trust dt {
    color: var(--teachers-accent-active);
    font-weight: 800;
}

.teachers-trust dd {
    margin: 0;
    color: #4d4d58;
    line-height: 1.55;
}

.teachers-questions {
    padding-bottom: clamp(90px, 11vw, 145px);
}

.teachers-questions__list {
    display: grid;
    max-width: 880px;
    border-top: 1px solid #c6ccd7;
}

.teachers-questions details {
    border-bottom: 1px solid var(--teachers-border);
}

.teachers-questions summary {
    position: relative;
    padding: 24px 54px 24px 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.teachers-questions summary::-webkit-details-marker {
    display: none;
}

.teachers-questions summary::after {
    position: absolute;
    top: 50%;
    right: 4px;
    color: var(--teachers-accent);
    font-size: 24px;
    font-weight: 400;
    content: "+";
    transform: translateY(-50%);
}

.teachers-questions details[open] summary::after {
    content: "−";
}

.teachers-questions details p {
    max-width: 700px;
    margin: -4px 0 24px;
    color: var(--teachers-muted);
    line-height: 1.65;
}

.teachers-final {
    border-top: 1px solid var(--teachers-border);
    background: var(--teachers-accent);
}

.teachers-final__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 300px;
    gap: 50px;
    padding-block: 62px;
}

.teachers-final__inner > div {
    display: grid;
    max-width: 720px;
    gap: 18px;
}

.teachers-final h2 {
    color: #f8fafc;
}

.teachers-final p {
    color: #dfe3ff;
}

.teachers-final .teachers-button {
    border: 1px solid rgb(255 255 255 / 60%);
    background: #f8fafc;
    color: var(--teachers-accent-active);
    box-shadow: 0 18px 44px rgb(35 33 62 / 24%);
}

.teachers-final .teachers-button:hover {
    background: #eef2ff;
    color: var(--teachers-accent-active);
}

.teachers-landing--ready [data-hero-copy] {
    animation: teachers-copy-enter .72s cubic-bezier(.16, 1, .3, 1) both;
}

.teachers-landing--ready [data-hero-visual] {
    animation: teachers-visual-enter .85s .08s cubic-bezier(.16, 1, .3, 1) both;
}

.teachers-landing--ready .teachers-hero__line > span {
    animation: teachers-line-enter .9s .08s cubic-bezier(.16, 1, .3, 1) both;
}

.teachers-landing--ready .teachers-hero__line--accent > span {
    animation-delay: .18s;
}

.teachers-landing--ready .teachers-signal--schedule {
    animation: teachers-signal-schedule 5.2s .72s ease-in-out infinite alternate both;
}

.teachers-landing--ready .teachers-signal--progress {
    animation: teachers-signal-progress 5.8s .9s ease-in-out infinite alternate both;
}

.teachers-landing--ready .teachers-hero__orbit {
    animation: teachers-orbit-drift 16s linear infinite;
}

.teachers-landing--ready [data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

.teachers-landing--ready [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.teachers-landing--ready [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(24px) scale(.985);
}

.teachers-landing--ready [data-reveal].is-visible [data-reveal-group] > * {
    animation: teachers-item-enter .68s cubic-bezier(.16, 1, .3, 1) both;
}

.teachers-landing--ready [data-reveal].is-visible [data-reveal-group] > *:nth-child(2) {
    animation-delay: .07s;
}

.teachers-landing--ready [data-reveal].is-visible [data-reveal-group] > *:nth-child(3) {
    animation-delay: .14s;
}

.teachers-landing--ready [data-reveal].is-visible [data-reveal-group] > *:nth-child(4) {
    animation-delay: .21s;
}

.teachers-landing--ready [data-reveal].is-visible [data-reveal-group] > *:nth-child(5) {
    animation-delay: .28s;
}

@keyframes teachers-scroll-progress {
    to {
        transform: scaleX(1);
    }
}

@keyframes teachers-line-enter {
    from {
        opacity: 0;
        transform: translateY(105%) rotate(2deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotate(0);
    }
}

@keyframes teachers-item-enter {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes teachers-signal-schedule {
    from {
        transform: translate3d(0, 6px, 0) rotate(-4deg);
    }

    to {
        transform: translate3d(8px, -8px, 0) rotate(-2deg);
    }
}

@keyframes teachers-signal-progress {
    from {
        transform: translate3d(0, 7px, 0) rotate(3deg);
    }

    to {
        transform: translate3d(-9px, -7px, 0) rotate(1deg);
    }
}

@keyframes teachers-orbit-drift {
    to {
        transform: rotate(360deg);
    }
}

@keyframes teachers-copy-enter {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes teachers-visual-enter {
    from {
        opacity: 0;
        transform: translateX(38px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .teachers-hero__visual img {
        animation: teachers-image-breathe 7s ease-in-out infinite alternate;
        will-change: transform;
    }
}

@keyframes teachers-image-breathe {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-9px);
    }
}

@media (max-width: 980px) {
    .teachers-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 58px;
    }

    .teachers-hero__copy {
        max-width: 760px;
    }

    .teachers-hero__visual {
        min-height: min(500px, 62vw);
    }

    .teachers-hero__visual img {
        right: -3%;
        width: 106%;
    }

    .teachers-signal--schedule {
        left: 2%;
    }

    .teachers-signal--progress {
        right: 2%;
    }

    .teachers-promises__grid {
        grid-template-columns: 1fr;
    }

    .teachers-promises p,
    .teachers-promises p:first-child {
        min-height: auto;
        padding: 22px 0;
    }

    .teachers-promises p + p {
        border-top: 1px solid var(--teachers-border);
        border-left: 0;
    }

    .teachers-problem__flow {
        grid-template-columns: 1fr 1fr;
    }

    .teachers-problem__flow article:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .teachers-capabilities {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "students students"
            "schedule homework"
            "analytics finance";
    }

    .teachers-start,
    .teachers-trust {
        grid-template-columns: 1fr;
    }

    .teachers-trust {
        grid-template-areas:
            "copy"
            "facts"
            "visual";
    }

    .teachers-workbench {
        grid-template-columns: 1fr;
    }

    .teachers-workbench__tabs {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
        overflow-x: auto;
        padding: 3px 3px 12px;
        scroll-snap-type: x mandatory;
    }

    .teachers-workbench__tabs button {
        min-height: 74px;
        scroll-snap-align: start;
    }
}

@media (max-width: 680px) {
    .public-product-header nav,
    .public-product-header__more,
    .public-product-header__login {
        display: none;
    }

    .public-product-header__brand {
        margin-right: auto;
    }

    .teachers-shell {
        width: min(100% - 30px, 1160px);
    }

    .teachers-breadcrumbs {
        padding-top: 20px;
    }

    .teachers-hero {
        width: calc(100% - 20px);
        gap: 22px;
        margin-top: 10px;
        padding: 44px 30px 32px;
        border-radius: 24px;
    }

    .teachers-hero h1 {
        font-size: clamp(43px, 13vw, 58px);
    }

    .teachers-hero__visual {
        min-height: 290px;
    }

    .teachers-hero__backdrop {
        inset: 4% 0 2%;
    }

    .teachers-hero__visual img {
        right: -11%;
        width: 121%;
    }

    .teachers-signal {
        min-width: 150px;
        padding: 11px 13px;
    }

    .teachers-signal strong {
        font-size: 12px;
    }

    .teachers-signal small {
        display: none;
    }

    .teachers-signal--schedule {
        top: 7%;
        left: 0;
    }

    .teachers-signal--progress {
        right: 0;
        bottom: 3%;
    }

    .teachers-actions,
    .teachers-final__inner {
        align-items: stretch;
        flex-direction: column;
    }

    .teachers-actions {
        width: 100%;
    }

    .teachers-button {
        width: 100%;
    }

    .teachers-text-link {
        justify-content: flex-start;
    }

    .teachers-section {
        padding-top: 82px;
    }

    .teachers-problem {
        width: calc(100% - 20px);
        margin-top: 82px;
        padding: 40px 20px 20px;
        border-radius: 24px;
    }

    .teachers-heading {
        margin-bottom: 34px;
    }

    .teachers-problem__flow,
    .teachers-capabilities {
        grid-template-columns: 1fr;
    }

    .teachers-problem__flow article,
    .teachers-problem__flow article + article,
    .teachers-problem__flow article:nth-child(3) {
        min-height: auto;
        padding: 24px 0;
        border-left: 0;
    }

    .teachers-capabilities {
        grid-template-areas:
            "students"
            "schedule"
            "homework"
            "analytics"
            "finance";
    }

    .teachers-capability,
    .teachers-capability--students {
        min-height: 250px;
    }

    .teachers-workbench__stage {
        grid-template-columns: 1fr;
        min-height: 660px;
    }

    .teachers-workbench__copy {
        min-height: 330px;
        padding: 32px 26px;
    }

    .teachers-workbench__visual {
        min-height: 330px;
        clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%);
    }

    .teachers-workbench__visual img {
        width: 112%;
        object-position: center;
        transform: translateX(-6%) scale(1.035);
    }

    .teachers-start {
        gap: 34px;
    }

    .teachers-start__steps li {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-left: 44px;
    }

    .teachers-trust {
        gap: 34px;
        margin-top: 82px;
        padding: 32px 24px;
    }

    .teachers-trust__visual {
        height: 280px;
        margin-bottom: -32px;
    }

    .teachers-trust dl div {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .teachers-questions {
        padding-bottom: 88px;
    }

    .teachers-final__inner {
        justify-content: center;
        min-height: 330px;
        padding-block: 58px;
    }
}

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

    .teachers-landing--ready [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .teachers-landing--ready [data-reveal-group] > *,
    .teachers-landing--ready .teachers-hero__line > span {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .teachers-signal {
        background: #f8fafc;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}