/* Ad landing page: shared Disciply tokens, page-scoped presentation. */
.dh-teachers { overflow: hidden; }
/* Purpose's legacy sidebar mask has no sidebar to control on this public page. */
body:has(.dh-teachers) .mask-body { display: none !important; }
.dh-teachers [id] { scroll-margin-top: 90px; }
.dh-teachers h1, .dh-teachers h2, .dh-teachers h3, .dh-teachers p { margin: 0; }
.dh-teachers a { text-decoration: none; }
.dh-teachers .dh-teacher-icon { width: 24px; height: 24px; flex: 0 0 auto; }
.dh-teacher-shell { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
.dh-teacher-hero { position: relative; padding-top: 140px; background: radial-gradient(ellipse at 85% 25%, #7c5cfc12, transparent 50%) !important; }
.dh-teacher-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
.dh-teacher-hero__copy h1 { color: var(--dh-text); font-size: clamp(48px, 5vw, 70px); font-weight: 700; line-height: 1.08; letter-spacing: -.055em; }
.dh-teachers em { color: var(--dh-purple-soft); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.04em; }
.dh-teacher-lead { max-width: 440px; margin-top: 25px !important; color: #bdb8c6; font-size: 17px; line-height: 1.85; }
.dh-teacher-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 32px; }
.dh-teacher-button { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: 52px; padding: 15px 22px; border: 1px solid transparent; border-radius: 12px; color: var(--dh-text); font-size: 13px; font-weight: 700; line-height: 1.4; transition: background .18s, transform .18s; }
.dh-teacher-button--primary { background: var(--dh-purple); box-shadow: 0 8px 25px #7c5cfc20; }
.dh-teacher-button--primary:hover { color: var(--dh-text); background: var(--dh-violet); transform: translateY(-2px); }
.dh-teacher-button--secondary { background: var(--dh-elevated); border-color: var(--dh-card-border); }
.dh-teacher-button--secondary:hover { color: var(--dh-text); background: var(--dh-card); }
.dh-teacher-text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--dh-text); font-size: 12px; font-weight: 600; }
.dh-teacher-text-link:hover { color: var(--dh-purple-soft); }
.dh-teachers a:focus-visible, .dh-teachers summary:focus-visible { outline: 2px solid var(--dh-purple-soft); outline-offset: 6px; border-radius: 4px; }
.dh-teacher-hero__note { margin-top: 23px !important; max-width: 400px; color: var(--dh-muted); font-size: 11px; line-height: 1.8; }
.dh-teacher-preview { position: relative; margin: 0; padding: 12px 0 95px; }
.dh-teacher-preview__glow { position: absolute; inset: 7% -14% 8%; border-radius: 50%; background: radial-gradient(ellipse, #7c5cfc24, transparent 65%); pointer-events: none; }
.dh-teacher-community { position: relative; width: calc(100% - 25px); background: var(--dh-elevated); border: 1px solid #ffffff0a; border-radius: 22px; padding: 21px; box-shadow: 0 30px 70px #00000033; transform: rotate(-2deg); }
.dh-teacher-community__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.dh-teacher-mini-brand { display: block; width: 88px; height: auto; }
.dh-teacher-profile { display: flex; gap: 12px; align-items: center; margin-bottom: 19px; }
.dh-teacher-avatar { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: #50473c; color: #e3cda5; }
.dh-teacher-profile > div { display: grid; gap: 3px; }
.dh-teacher-profile strong { font-size: 12px; color: var(--dh-text); }
.dh-teacher-profile > div > span { color: var(--dh-muted); font-size: 10px; }
.dh-teacher-profile__badge { display: grid; place-items: center; margin-left: auto; width: 27px; height: 27px; border-radius: 8px; color: var(--dh-purple-soft); background: #7c5cfc18; }
.dh-teachers .dh-teacher-profile__badge .dh-teacher-icon { width: 17px; height: 17px; }
.dh-teacher-preview-post { padding: 23px; border-radius: 14px; background: linear-gradient(140deg, #3c344d, #292531 72%); }
.dh-teacher-preview-post h2 { font-size: 31px; letter-spacing: -.04em; line-height: 1.2; color: var(--dh-text); }
.dh-teacher-preview-post > p { max-width: 260px; margin-top: 14px; color: #c5becf; font-size: 11px; line-height: 1.85; }
.dh-teacher-verse { margin-top: 19px; padding: 15px 16px; border-radius: 10px; background: #17151d44; }
.dh-teacher-verse > span { color: #d7ae5b; font-size: 9px; }
.dh-teacher-verse p { margin-top: 7px; color: #d9d2e1; font-size: 11px; line-height: 1.7; }
.dh-teacher-post-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 21px; color: #b9b0c7; font-size: 8px; }
.dh-teacher-post-footer > span { display: flex; align-items: center; gap: 6px; }
.dh-teachers .dh-teacher-post-footer .dh-teacher-icon { width: 14px; height: 14px; }
.dh-teacher-group-preview { display: flex; gap: 11px; align-items: center; margin-top: 21px; }
.dh-teacher-group-mark { display: grid; place-items: center; width: 37px; height: 37px; background: #72a98f18; color: #9bcbb4; border-radius: 11px; }
.dh-teachers .dh-teacher-group-mark .dh-teacher-icon { width: 19px; height: 19px; }
.dh-teacher-group-preview > div { flex: 1; display: grid; gap: 4px; }
.dh-teacher-group-preview strong { color: var(--dh-text); font-size: 10px; }
.dh-teacher-group-preview > div > span { color: var(--dh-muted); font-size: 8px; }
.dh-teacher-pill { color: #bfb6d3; background: #7c5cfc16; border-radius: 6px; padding: 6px 7px; font-size: 7px; white-space: nowrap; }
.dh-teacher-invite-preview { position: absolute; right: -12px; bottom: 42px; width: 294px; display: flex; align-items: center; gap: 17px; padding: 20px; background: #eee9df; color: #312a3c; border-radius: 15px; box-shadow: 0 16px 40px #00000033; transform: rotate(3deg); }
.dh-teacher-invite-preview__qr { display: grid; place-items: center; width: 65px; height: 65px; flex: 0 0 auto; background: #ffffff99; border-radius: 10px; }
.dh-teachers .dh-teacher-invite-preview__qr .dh-teacher-icon { width: 44px; height: 44px; stroke-width: 1.8; }
.dh-teacher-invite-preview > div { display: grid; gap: 6px; }
.dh-teacher-invite-preview strong { font-size: 14px; line-height: 1.4; }
.dh-teacher-invite-preview > div > span:last-child { color: #685e71; font-size: 9px; }
.dh-teacher-preview figcaption { position: absolute; left: 0; bottom: 7px; width: 100%; color: var(--dh-muted); font-size: 9px; text-align: center; }
.dh-teacher-promise { display: flex; justify-content: center; flex-wrap: wrap; gap: 74px; padding: 50px 0 37px; }
.dh-teacher-promise > span { display: flex; gap: 11px; align-items: center; color: #c8c1d1; font-size: 12px; }
.dh-teacher-promise .dh-teacher-icon { width: 19px; height: 19px; color: var(--dh-purple-soft); }
.dh-teacher-section { padding: 90px 0; }
.dh-teacher-section-heading { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 70px; }
.dh-teacher-section h2 { color: var(--dh-text); font-size: clamp(29px, 3vw, 40px); font-weight: 600; letter-spacing: -.045em; line-height: 1.25; }
.dh-teacher-section-heading > p, .dh-teacher-tools__intro > p, .dh-teacher-start__grid > div > p { max-width: 410px; color: #bdb8c6; font-size: 14px; line-height: 1.9; }
.dh-teacher-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px; list-style: none; margin: 48px 0 0; padding: 0; }
.dh-teacher-step-number { color: var(--dh-purple-soft); font-family: Georgia, serif; font-size: 28px; font-style: italic; }
.dh-teacher-steps h3 { margin: 16px 0 12px; color: var(--dh-text); font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.dh-teacher-steps p, .dh-teacher-tool-list p { color: var(--dh-muted); font-size: 13px; line-height: 1.9; }
.dh-teacher-tools-section { padding-top: 30px; }
.dh-teacher-tools { display: grid; grid-template-columns: 1fr 1.1fr; gap: 85px; padding: 55px; border-radius: 25px; background: linear-gradient(120deg, #292531, #211e29); }
.dh-teacher-tools__intro { align-self: center; }
.dh-teacher-tools__intro > p { margin-top: 20px; }
.dh-teacher-tools__intro > a { margin-top: 26px; }
.dh-teacher-tool-list { display: grid; gap: 30px; }
.dh-teacher-tool-list article { display: flex; align-items: start; gap: 16px; }
.dh-teacher-tool-icon { display: grid; place-items: center; width: 41px; height: 41px; flex: 0 0 auto; border-radius: 12px; background: #7c5cfc1a; color: var(--dh-purple-soft); }
.dh-teacher-tool-icon--sage { background: #72a98f18; color: #9bcbb4; }
.dh-teacher-tool-icon--gold { background: #d7ae5b14; color: #d7ae5b; }
.dh-teacher-tool-list h3 { margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--dh-text); }
.dh-teacher-invitation { padding-top: 20px; text-align: center; }
.dh-teacher-invitation h2 { font-size: clamp(32px, 3.5vw, 47px); line-height: 1.4; }
.dh-teacher-invitation p { margin-top: 21px; color: var(--dh-muted); font-size: 13px; line-height: 1.9; }
.dh-teacher-start { background: radial-gradient(ellipse at 20% 50%, #7c5cfc13, transparent 65%) !important; }
.dh-teacher-start__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 100px; align-items: center; }
.dh-teacher-start__grid > div > p { margin-top: 24px; max-width: 480px; }
.dh-teacher-start__grid > div > p strong { color: var(--dh-text); font-weight: 600; }
.dh-teacher-store-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
.dh-teacher-store-links .dh-teacher-button { padding: 13px 18px; justify-content: start; gap: 12px; }
.dh-teacher-store-links .dh-teacher-button > span { display: grid; font-size: 13px; }
.dh-teacher-store-links small { font-size: 8px; font-weight: 400; opacity: .8; }
.dh-teacher-store-links .dh-teacher-icon:last-child { width: 17px; height: 17px; margin-left: 8px; }
.dh-teacher-start__grid > div > .dh-teacher-start__account { font-size: 11px; }
.dh-teacher-start__account a { color: var(--dh-purple-soft); text-decoration: underline; text-underline-offset: 3px; }
.dh-teacher-start-guide { padding: 35px 40px; border-radius: 20px; background: #292531; }
.dh-teacher-start-guide__icon { color: var(--dh-purple-soft); }
.dh-teacher-start-guide h3 { margin: 20px 0 25px; color: var(--dh-text); font-size: 25px; letter-spacing: -.035em; font-weight: 600; line-height: 1.3; }
.dh-teacher-start-guide ol { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.dh-teacher-start-guide li { display: flex; gap: 12px; align-items: center; font-size: 11px; color: #d4cddd; }
.dh-teacher-start-guide li > span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #7c5cfc20; color: var(--dh-purple-soft); font-size: 9px; }
.dh-teacher-start-guide > p { font-size: 10px !important; color: var(--dh-muted) !important; }
.dh-teacher-faq { padding-top: 40px; padding-bottom: 100px; }
.dh-teacher-faq__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 85px; }
.dh-teacher-faq .dh-teacher-text-link { margin-top: 23px; color: var(--dh-muted); }
.dh-teacher-faq details { padding: 21px 0; border-bottom: 1px solid #ffffff0a; }
.dh-teacher-faq details:first-child { padding-top: 0; }
.dh-teacher-faq summary { display: flex; justify-content: space-between; gap: 15px; cursor: pointer; list-style: none; color: var(--dh-text); font-size: 13px; font-weight: 600; }
.dh-teacher-faq summary::-webkit-details-marker { display: none; }
.dh-teacher-faq summary > span { color: var(--dh-purple-soft); font-size: 19px; font-weight: 400; line-height: 1; }
.dh-teacher-faq details[open] summary > span { transform: rotate(45deg); }
.dh-teacher-faq details > p { padding-top: 15px; max-width: 560px; color: var(--dh-muted); font-size: 12px; line-height: 1.9; }
@media (max-width: 1100px) {
    .dh-teacher-shell { width: calc(100% - 64px); }
    .dh-teacher-hero__grid { gap: 35px; }
    .dh-teacher-tools { gap: 45px; padding: 40px; }
    .dh-teacher-promise { gap: 40px; }
    .dh-teacher-start__grid { gap: 50px; }
}
@media (max-width: 760px) {
    .dh-teacher-shell { width: calc(100% - 40px); }
    .dh-teacher-hero { padding-top: 126px; }
    .dh-teacher-hero__grid { grid-template-columns: 1fr; gap: 37px; }
    .dh-teacher-hero__copy { max-width: 500px; }
    .dh-teacher-hero__copy h1 { font-size: clamp(44px, 10vw, 62px); }
    .dh-teacher-lead { font-size: 15px; margin-top: 22px !important; }
    .dh-teacher-actions { gap: 20px; margin-top: 25px; }
    .dh-teacher-preview { width: min(420px, calc(100% - 8px)); justify-self: center; }
    .dh-teacher-invite-preview { right: 0; }
    .dh-teacher-promise { justify-content: start; gap: 16px 24px; padding: 20px 0; }
    .dh-teacher-promise > span { font-size: 10px; }
    .dh-teacher-section { padding: 55px 0; }
    .dh-teacher-section-heading, .dh-teacher-tools, .dh-teacher-start__grid, .dh-teacher-faq__grid { grid-template-columns: 1fr; gap: 26px; }
    .dh-teacher-section-heading > p { max-width: 420px; }
    .dh-teacher-steps { grid-template-columns: 1fr; gap: 29px; margin-top: 35px; }
    .dh-teacher-steps li { position: relative; padding-left: 51px; }
    .dh-teacher-step-number { position: absolute; left: 0; top: -4px; font-size: 25px; }
    .dh-teacher-steps h3 { margin-top: 0; margin-bottom: 8px; font-size: 17px; }
    .dh-teacher-tools-section { padding-top: 0; }
    .dh-teacher-tools { padding: 29px 25px; border-radius: 20px; gap: 34px; }
    .dh-teacher-tool-list h3 { line-height: 1.6; }
    .dh-teacher-tool-list article { gap: 12px; }
    .dh-teacher-invitation { padding-top: 0; }
    .dh-teacher-invitation h2 { font-size: clamp(29px, 6vw, 39px); }
    .dh-teacher-invitation p br { display: none; }
    .dh-teacher-start-guide { margin-top: 6px; padding: 29px; }
    .dh-teacher-faq { padding-top: 25px; padding-bottom: 60px; }
    .dh-teacher-faq__items { margin-top: 13px; }
}
@media (max-width: 380px) {
    .dh-teacher-shell { width: calc(100% - 32px); }
    .dh-teacher-community { padding: 16px; width: calc(100% - 12px); }
    .dh-teacher-preview-post { padding: 19px; }
    .dh-teacher-invite-preview { width: 268px; padding: 17px; }
    .dh-teacher-group-preview { gap: 7px; }
    .dh-teacher-pill { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .dh-teacher-button { transition: none; }
    .dh-teacher-button--primary:hover { transform: none; }
}
