/* Content and artwork styles adapted from the approved 04/05 learning prototypes. */ @font-face { font-family: LearningXiao; src: url('/assets/learning/NotoSansSC-VF.ttf') format('truetype'); font-display: swap; } .learning-page, #dialog.learning-dialog { font-family: LearningXiao, 'Microsoft YaHei', sans-serif; color: #39233f; } :where(.learning-page, .learning-dialog) button { background: transparent; border: 0; } :where(.learning-page, .learning-dialog) a { color: inherit; } .learning-page .learning-hero { position: relative; padding: 0; display: block; margin: 0; overflow: hidden; border: 1px solid #e9dce0; border-radius: 17px; background: #fff7ec; } .learning-page .learning-hero > img { position: absolute; right: 0; top: 0; height: 100%; object-fit: cover; } .learning-page .hero-fade { position: absolute; inset: 0; } .learning-page .hero-copy { position: relative; width: auto; z-index: 2; } .learning-page .eyebrow { font-size: 9px; letter-spacing: 1.8px; color: #ee823e; font-weight: 600; margin: 0; } .learning-page .hero-title { font-weight: 800; color: #39233f; } .learning-page {padding:24px 30px 0;max-width:1500px} .learning-page p {color:#927d97;line-height:1.9} :where(.learning-page, .learning-dialog) .learning-hero {height:292px} :where(.learning-page, .learning-dialog) .learning-hero .hero-copy {padding:31px 32px} :where(.learning-page, .learning-dialog) .learning-hero .hero-title, :where(.learning-page, .learning-dialog) .mentor-hero .hero-title {font-size:34px;line-height:1.5;letter-spacing:-.7px;margin:15px 0 12px} :where(.learning-page, .learning-dialog) .hero-copy em {font-style:normal;color:#e77b34} :where(.learning-page, .learning-dialog) .learning-hero .hero-copy p {font-size:12px;line-height:1.9;margin:0} :where(.learning-page, .learning-dialog) .learning-hero>img {width:73%;object-position:center 21%} :where(.learning-page, .learning-dialog) .learning-hero .hero-fade {background:linear-gradient(90deg,#fff7ec 0%,#fff7ec 26%,#fff7eced 38%,#fff7ec8f 50%,#fff7ec00 67%)} :where(.learning-page, .learning-dialog) .hero-links {display:flex;align-items:center;gap:24px;margin-top:19px;font-size:12px;color:#81658e} :where(.learning-page, .learning-dialog) .solid, :where(.learning-page, .learning-dialog) .outline {display:inline-flex;align-items:center;justify-content:center;gap:16px;border-radius:8px;padding:11px 18px;font-size:12px;font-weight:600;line-height:1.5;text-decoration:none} :where(.learning-page, .learning-dialog) .solid {background:#f08035;color:white;border:1px solid #f08035} :where(.learning-page, .learning-dialog) .solid:hover {background:#dc6e27;border-color:#dc6e27} :where(.learning-page, .learning-dialog) .outline {background:#fffdf9;border:1px solid #d5bedf;color:#725084} :where(.learning-page, .learning-dialog) .outline:hover {background:#f3eaf7} :where(.learning-page, .learning-dialog) .hero-links .solid {min-width:145px} :where(.learning-page, .learning-dialog) .hero-label {position:absolute;right:17px;bottom:16px;background:#fffaf3ed;border:1px solid #fff7eb88;border-radius:20px;padding:6px 12px;font-size:10px;color:#896893} :where(.learning-page, .learning-dialog) .learning-promise {display:flex;justify-content:center;gap:0;margin:0 0 36px;padding:21px 0;border-bottom:1px solid #eadfe5;font-size:12px;color:#9a819f} :where(.learning-page, .learning-dialog) .learning-promise span {padding:0 26px;border-right:1px solid #e6dbe5;line-height:1.2} :where(.learning-page, .learning-dialog) .learning-promise span:last-child {border:0} :where(.learning-page, .learning-dialog) .learning-promise span:first-child {color:#b16f3f} :where(.learning-page, .learning-dialog) .section-heading {display:flex;align-items:end;justify-content:space-between;gap:15px;margin:0 0 20px} :where(.learning-page, .learning-dialog) .section-heading small {font-size:9px;letter-spacing:2px;color:#b89bb7} :where(.learning-page, .learning-dialog) .section-heading h2 {font-size:25px;margin:8px 0 6px;letter-spacing:-.6px} :where(.learning-page, .learning-dialog) .section-heading p {font-size:12px;margin:0;line-height:1.8} :where(.learning-page, .learning-dialog) .soft-label {background:#f4e9f6;color:#9974a9;border-radius:20px;padding:6px 12px;font-size:10px;white-space:nowrap} :where(.learning-page, .learning-dialog) .course-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px} :where(.learning-page, .learning-dialog) .course-card {border:1px solid #e8dce7;border-radius:14px;background:#fffdf9;overflow:hidden;box-shadow:0 6px 20px #70557909} :where(.learning-page, .learning-dialog) .course-art {height:215px;position:relative;overflow:hidden;background:linear-gradient(125deg,#fcf0e2,#ecddf2)} :where(.learning-page, .learning-dialog) .art-index {position:absolute;top:17px;left:20px;font-size:9px;letter-spacing:1.6px;color:#ad8fb3;z-index:2} :where(.learning-page, .learning-dialog) .art-orbit {position:absolute;width:300px;height:140px;border:1px solid #dcbfdd88;border-radius:50%;transform:rotate(-20deg);left:15px;top:45px} :where(.learning-page, .learning-dialog) .art-spark {position:absolute;right:21px;top:55px;font-size:30px;color:#f0aa65} :where(.learning-page, .learning-dialog) .profile-sheet {position:absolute;left:80px;top:46px;width:180px;height:174px;background:#fffdfa;border:1px solid #eadbe8;border-radius:11px;box-shadow:3px 12px 28px #9770a72b;transform:rotate(-6deg);padding:20px} :where(.learning-page, .learning-dialog) .profile-avatar {position:absolute;right:12px;top:22px;width:49px;height:49px;overflow:hidden;border-radius:50%;background:#eee0f5} :where(.learning-page, .learning-dialog) .profile-avatar img {width:53px;position:absolute;top:-3px;left:0} :where(.learning-page, .learning-dialog) .profile-sheet>span {font-size:9px;color:#a489ad;display:block} :where(.learning-page, .learning-dialog) .profile-sheet>b {font-size:23px;line-height:1.6;display:block;margin-top:9px;letter-spacing:1px} :where(.learning-page, .learning-dialog) .profile-lines {margin-top:9px} :where(.learning-page, .learning-dialog) .profile-lines i {height:4px;border-radius:3px;background:#e6d7ee;display:block;width:75px;margin:5px 0} :where(.learning-page, .learning-dialog) .profile-lines i:last-child {width:100px} :where(.learning-page, .learning-dialog) .little-card {position:absolute;background:#fff9ed;border:1px solid #f1d5b3;box-shadow:0 5px 20px #72517914;border-radius:7px;padding:9px 14px;font-size:11px;color:#a37449} :where(.learning-page, .learning-dialog) .little-one {left:32px;top:78px;transform:rotate(-9deg)} :where(.learning-page, .learning-dialog) .little-one span {color:#eca357;margin-left:13px} :where(.learning-page, .learning-dialog) .little-two {right:19px;bottom:24px;transform:rotate(5deg)} :where(.learning-page, .learning-dialog) .art-story {background:linear-gradient(120deg,#f2e6f4,#fff1df)} :where(.learning-page, .learning-dialog) .story-paper {position:absolute;left:37px;top:47px;width:210px;height:179px;background:#fffdf9;box-shadow:4px 9px 24px #71537824;border:1px solid #e8d9e8;transform:rotate(-7deg);border-radius:6px;padding:20px} :where(.learning-page, .learning-dialog) .story-paper>small {font-size:8px;color:#ac94ad;letter-spacing:2px} :where(.learning-page, .learning-dialog) .story-paper>b {display:block;font-size:20px;margin:9px 0 10px;line-height:1.4} :where(.learning-page, .learning-dialog) .script-line {height:3px;width:120px;background:#e9ddea;margin-top:7px} :where(.learning-page, .learning-dialog) .script-line.short {width:95px} :where(.learning-page, .learning-dialog) .story-paper>span {font-size:8px;display:block;margin-top:12px;color:#b69db5} :where(.learning-page, .learning-dialog) .story-picture {position:absolute;right:21px;bottom:25px;width:100px;height:110px;border:5px solid #fffdf9;border-bottom-width:16px;box-shadow:0 8px 17px #65447824;transform:rotate(10deg)} :where(.learning-page, .learning-dialog) .story-picture img {width:100%;height:100%;object-fit:cover} :where(.learning-page, .learning-dialog) .art-story .art-spark {right:26px;top:39px} :where(.learning-page, .learning-dialog) .art-film {background:linear-gradient(125deg,#eee0f1,#f8e9dc)} :where(.learning-page, .learning-dialog) .film-monitor {position:absolute;top:44px;left:36px;right:36px;height:117px;background:#39233f;border:6px solid #fffdf9;box-shadow:0 7px 20px #67537326;border-radius:9px;overflow:hidden} :where(.learning-page, .learning-dialog) .film-monitor img {width:100%;height:100%;object-fit:cover;filter:brightness(.8)} :where(.learning-page, .learning-dialog) .play-symbol {position:absolute;left:calc(50% - 14px);top:30px;border:1px solid #ffffff99;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;background:#fff9;font-size:18px;color:white} :where(.learning-page, .learning-dialog) .monitor-caption {position:absolute;bottom:10px;left:14px;font-size:11px;color:white;letter-spacing:2px} :where(.learning-page, .learning-dialog) .timeline {position:absolute;left:53px;right:37px;bottom:12px;border:1px solid #eadde9;border-radius:7px;background:#fffaf2ed;height:62px;padding:11px 13px;box-shadow:0 5px 18px #73598518;transform:rotate(-3deg)} :where(.learning-page, .learning-dialog) .timeline>div {display:flex;gap:3px;margin-bottom:3px} :where(.learning-page, .learning-dialog) .timeline b {height:7px;background:#ccacd9;flex:1;border-radius:2px} :where(.learning-page, .learning-dialog) .timeline>div:nth-of-type(2) b {background:#efb684} :where(.learning-page, .learning-dialog) .timeline b:nth-child(2) {flex:2} :where(.learning-page, .learning-dialog) .timeline i {position:absolute;top:4px;bottom:15px;width:1px;background:#dc7f41;left:56%} :where(.learning-page, .learning-dialog) .timeline>span {font-size:7px;letter-spacing:1px;color:#ac95b2} :where(.learning-page, .learning-dialog) .art-film .art-spark {top:20px;right:16px;font-size:22px} :where(.learning-page, .learning-dialog) .course-card-body {padding:21px 20px 20px} :where(.learning-page, .learning-dialog) .course-meta {display:flex;justify-content:space-between;align-items:center;color:#b195ae;font-size:9px} :where(.learning-page, .learning-dialog) .course-meta>span:last-child {padding:2px 7px;border-radius:4px;color:#c18958;background:#fff0dc} :where(.learning-page, .learning-dialog) .course-card h3 {font-size:21px;margin:8px 0 7px;letter-spacing:-.6px} :where(.learning-page, .learning-dialog) .course-lead {font-size:11px;min-height:22px;margin:0} :where(.learning-page, .learning-dialog) .module-mini {display:grid;grid-template-columns:1fr 1fr;gap:12px 6px;border-top:1px solid #eee4e8;border-bottom:1px solid #eee4e8;margin:19px 0 14px;padding:17px 0;font-size:11px;color:#7d6588} :where(.learning-page, .learning-dialog) .module-mini b {font-size:9px;color:#ed9250;margin-right:8px;font-weight:500} :where(.learning-page, .learning-dialog) .course-assurance {font-size:10px;color:#af98b2} :where(.learning-page, .learning-dialog) .course-assurance i {font-style:normal;margin:0 7px} :where(.learning-page, .learning-dialog) .course-price {display:flex;align-items:end;justify-content:space-between;margin:13px 0 15px} :where(.learning-page, .learning-dialog) .course-price>div {display:flex;align-items:baseline;gap:8px} :where(.learning-page, .learning-dialog) .course-price small {font-size:10px;color:#a08b9d} :where(.learning-page, .learning-dialog) .course-price strong {color:#df782f;font-size:31px;font-weight:750;letter-spacing:-.8px} :where(.learning-page, .learning-dialog) .course-price sup {font-size:15px;top:0;margin-right:3px} :where(.learning-page, .learning-dialog) .course-price>span {font-size:10px;color:#baa7bc;margin-bottom:8px} :where(.learning-page, .learning-dialog) .course-card .solid {width:100%;justify-content:space-between;font-size:12px} :where(.learning-page, .learning-dialog) .choose-section {margin-top:42px} :where(.learning-page, .learning-dialog) .path-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px} :where(.learning-page, .learning-dialog) .path-card {border:1px solid #e5d9e9;background:#fffaf5;border-radius:12px;text-align:left;padding:20px;position:relative} :where(.learning-page, .learning-dialog) .path-number {font-size:25px;font-weight:700;color:#dbc6e5} :where(.learning-page, .learning-dialog) .path-card h3 {font-size:15px;font-weight:650;margin:10px 0 6px} :where(.learning-page, .learning-dialog) .path-card p {font-size:11px;margin:0;min-height:40px} :where(.learning-page, .learning-dialog) .path-card>span:last-child {display:flex;justify-content:space-between;color:#a37bb1;font-size:11px;border-top:1px solid #ebdfea;padding-top:13px;margin-top:12px} :where(.learning-page, .learning-dialog) .path-card b {font-weight:500} :where(.learning-page, .learning-dialog) .path-card:hover {background:#f4eaf7} :where(.learning-page, .learning-dialog) .support-banner, :where(.learning-page, .learning-dialog) .consult-banner {display:flex;align-items:center;gap:22px;padding:25px 26px;margin-top:36px;border:1px solid #e7d9ed;border-radius:14px;background:linear-gradient(105deg,#f2e8f7,#fbf3eb)} :where(.learning-page, .learning-dialog) .support-banner>img, :where(.learning-page, .learning-dialog) .consult-banner>img {width:90px;height:85px;object-fit:contain} :where(.learning-page, .learning-dialog) .support-banner>div, :where(.learning-page, .learning-dialog) .consult-banner>div {flex:1} :where(.learning-page, .learning-dialog) .support-banner small, :where(.learning-page, .learning-dialog) .consult-banner small {color:#aa88b5;font-size:10px} :where(.learning-page, .learning-dialog) .support-banner h2, :where(.learning-page, .learning-dialog) .consult-banner h2 {font-size:19px;margin:5px 0 7px} :where(.learning-page, .learning-dialog) .support-banner p, :where(.learning-page, .learning-dialog) .consult-banner p {font-size:11px;margin:0} :where(.learning-page, .learning-dialog) .support-banner>a, :where(.learning-page, .learning-dialog) .consult-banner>button {flex-shrink:0} :where(.learning-page, .learning-dialog) .faq-section {margin-top:40px} :where(.learning-page, .learning-dialog) .faq-list {border:1px solid #e8dce7;border-radius:12px;background:#fffdf9;overflow:hidden} :where(.learning-page, .learning-dialog) .faq-list details {padding:0 21px;border-bottom:1px solid #eee4ea} :where(.learning-page, .learning-dialog) .faq-list details:last-child {border:0} :where(.learning-page, .learning-dialog) .faq-list summary {display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;font-size:12px;padding:16px 0;color:#7f648b} :where(.learning-page, .learning-dialog) .faq-list summary::-webkit-details-marker {display:none} :where(.learning-page, .learning-dialog) .faq-list summary>span {font-size:16px;color:#b595c1} :where(.learning-page, .learning-dialog) .faq-list details[open] summary>span {transform:rotate(45deg)} :where(.learning-page, .learning-dialog) .faq-list p {font-size:12px;margin:0;padding:0 25px 18px 0;max-width:850px} :where(.learning-page, .learning-dialog) .learning-footer {display:flex;justify-content:space-between;align-items:center;margin-top:38px;padding:24px 0;border-top:1px solid #e8dfe6;font-size:11px;color:#a58cae} :where(.learning-page, .learning-dialog) .learning-footer>div {display:flex;align-items:center;gap:7px} :where(.learning-page, .learning-dialog) .learning-footer img {width:21px} :where(.learning-page, .learning-dialog) .learning-footer span {font-size:10px;margin-left:12px;color:#b59dbb} :where(.learning-page, .learning-dialog) .learning-footer>a {font-size:10px} :where(.learning-page, .learning-dialog) .mentor-hero {height:299px;position:relative;overflow:hidden;border:1px solid #e7d9e5;border-radius:16px;background:linear-gradient(112deg,#fff6e9 10%,#fff8ef 42%,#efe1f5 100%)} :where(.learning-page, .learning-dialog) .mentor-hero .hero-copy {padding:31px 32px;z-index:2;width:65%} :where(.learning-page, .learning-dialog) .mentor-hero .hero-title {font-size:34px;margin:15px 0 12px;line-height:1.45} :where(.learning-page, .learning-dialog) .mentor-hero .hero-copy p {margin:0;font-size:13px;color:#907395} :where(.learning-page, .learning-dialog) .mentor-pills {display:flex;align-items:center;gap:12px;font-size:10px;color:#a88bb2;margin:16px 0 19px} :where(.learning-page, .learning-dialog) .mentor-pills b {font-weight:400;color:#c7afcf} :where(.learning-page, .learning-dialog) .mentor-art {position:absolute;right:0;top:0;width:46%;height:100%;} :where(.learning-page, .learning-dialog) .mentor-mascot {position:absolute;height:274px;bottom:0;right:18%;z-index:2} :where(.learning-page, .learning-dialog) .orbit {position:absolute;border:1px solid #d2b8df6b;border-radius:50%;transform:rotate(-20deg);width:420px;height:190px;right:-10px;bottom:35px} :where(.learning-page, .learning-dialog) .orbit-two {width:280px;height:320px;transform:rotate(40deg);right:50px;bottom:-120px} :where(.learning-page, .learning-dialog) .floating-note {position:absolute;display:flex;align-items:center;gap:10px;background:#fffcf4dd;backdrop-filter:blur(8px);border:1px solid #fffdf9;border-radius:12px;box-shadow:0 5px 26px #6d4b8a0c;font-size:12px;color:#80578e;padding:11px 15px;z-index:3} :where(.learning-page, .learning-dialog) .floating-note small {display:block;font-size:9px;color:#b193bb;margin-top:5px} :where(.learning-page, .learning-dialog) .floating-note img {width:46px;height:43px} :where(.learning-page, .learning-dialog) .note-one {top:43px;right:7%;transform:rotate(4deg)} :where(.learning-page, .learning-dialog) .note-two {bottom:30px;left:1%;transform:rotate(-5deg);color:#bd8b58} :where(.learning-page, .learning-dialog) .star-one {position:absolute;top:21px;left:31%;font-size:30px;color:#eaa165;font-style:normal} :where(.learning-page, .learning-dialog) .star-two {position:absolute;bottom:54px;right:10%;font-size:19px;color:#b996cc;font-style:normal} :where(.learning-page, .learning-dialog) .plan-grid {display:grid;grid-template-columns:1fr 1fr;gap:23px} :where(.learning-page, .learning-dialog) .subtle-link {color:#9e77ad;font-size:11px} :where(.learning-page, .learning-dialog) .plan-card {border:1px solid #e6d6e9;background:#fffdf9;border-radius:15px;overflow:hidden;padding:28px 29px;position:relative;box-shadow:0 5px 25px #654b7008} :where(.learning-page, .learning-dialog) .plan-card.full {background:linear-gradient(140deg,#f5eaf8 0%,#fffdf9 61%);border-color:#d4b8e1} :where(.learning-page, .learning-dialog) .plan-top {position:relative} :where(.learning-page, .learning-dialog) .plan-caption {font-size:10px;letter-spacing:1px;color:#ae92b2} :where(.learning-page, .learning-dialog) .plan-top h3 {font-size:27px;margin:8px 0 9px;display:inline-block} :where(.learning-page, .learning-dialog) .plan-tag {display:inline-block;margin-left:13px;border:1px solid #e4d5e9;color:#a684b4;background:#fbf6fe;padding:4px 8px;border-radius:20px;font-size:9px;vertical-align:5px} :where(.learning-page, .learning-dialog) .plan-top>img {position:absolute;right:-4px;top:-9px;width:88px;height:81px;opacity:.92} :where(.learning-page, .learning-dialog) .plan-top p {font-size:11px;margin:0} :where(.learning-page, .learning-dialog) .plan-price {margin-top:19px;border-bottom:1px solid #eadddf;padding-bottom:21px} :where(.learning-page, .learning-dialog) .plan-price>span {font-size:11px;color:#a0869f;margin-right:10px} :where(.learning-page, .learning-dialog) .plan-price strong {font-size:45px;color:#e27c35;font-weight:750;letter-spacing:-1.8px} :where(.learning-page, .learning-dialog) .plan-price strong sup {font-size:20px;margin-right:5px} :where(.learning-page, .learning-dialog) .plan-price>div {font-size:10px;color:#b09cb7;margin-top:4px} :where(.learning-page, .learning-dialog) .plan-price i {font-style:normal;color:#d1bfce;margin:0 10px} :where(.learning-page, .learning-dialog) .key-benefits {display:grid;grid-template-columns:repeat(3,1fr);padding:20px 0;gap:12px} :where(.learning-page, .learning-dialog) .key-benefits>div {border-right:1px solid #e8ddea} :where(.learning-page, .learning-dialog) .key-benefits>div:last-child {border:0} :where(.learning-page, .learning-dialog) .key-benefits span {display:block;font-size:10px;color:#a489ad} :where(.learning-page, .learning-dialog) .key-benefits b {font-size:15px;display:block;font-weight:650;margin-top:8px;color:#725184} :where(.learning-page, .learning-dialog) .plan-common {font-size:11px;margin:0 0 19px;line-height:1.9!important} :where(.learning-page, .learning-dialog) .plan-card>button {width:100%;justify-content:space-between;height:42px} :where(.learning-page, .learning-dialog) .plan-card.full>button {background:#51335f;border-color:#51335f} :where(.learning-page, .learning-dialog) .plan-card.full>button:hover {background:#6c4780} .learning-page #comparison {margin-top:40px} .learning-page .plan-caption, .learning-page .plan-tag, .learning-page .plan-top p, .learning-page .plan-price > div, .learning-page .plan-price > span, .learning-page .key-benefits span, .learning-page .comparison-footnote, .learning-page .subtle-link { font-size:14px; } .learning-page .plan-common, .learning-page tbody th, .learning-page tbody td, .learning-page .coaching-live-benefits, .learning-page .learning-promise { font-size:16px; line-height:1.9; } .learning-page .coaching-live-benefits { margin:0 0 20px; padding-left:22px; color:var(--muted); } .learning-page .plan-card > button { font-size:16px; height:auto; min-height:46px; } :where(.learning-page, .learning-dialog) .comparison-wrap {border:1px solid #e4d5e8;border-radius:12px;overflow:hidden;background:#fffdf9} :where(.learning-page, .learning-dialog) table {border-collapse:collapse;width:100%;table-layout:fixed;text-align:left;font-size:12px} :where(.learning-page, .learning-dialog) thead {background:#f2e9f6} :where(.learning-page, .learning-dialog) th {font-weight:500} :where(.learning-page, .learning-dialog) thead th {padding:17px 22px;font-weight:650;color:#745280} :where(.learning-page, .learning-dialog) thead th:first-child {width:46%;font-weight:500;color:#9b7ea6} :where(.learning-page, .learning-dialog) thead th small {margin-left:10px;font-weight:400;font-size:10px;color:#aa89b6} :where(.learning-page, .learning-dialog) tbody th, :where(.learning-page, .learning-dialog) tbody td {padding:14px 22px;border-top:1px solid #eee3e9;color:#927999} :where(.learning-page, .learning-dialog) tbody th {font-size:11px} :where(.learning-page, .learning-dialog) tbody td {font-size:12px} :where(.learning-page, .learning-dialog) tr.diff {background:#fff4e8} :where(.learning-page, .learning-dialog) tr.diff td {color:#b1703f;font-weight:600} :where(.learning-page, .learning-dialog) tr.diff th>span {font-size:8px;margin-left:8px;border-radius:3px;padding:2px 5px;background:#ffe6c9;color:#c3966d} :where(.learning-page, .learning-dialog) .comparison-footnote {font-size:10px;margin:11px 0 0;color:#af99b8!important} .learning-page #benefits {margin-top:40px} :where(.learning-page, .learning-dialog) .benefit-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:15px} :where(.learning-page, .learning-dialog) .benefit {display:flex;gap:15px;border:1px solid #e8ddea;border-radius:12px;background:#fffaf5;padding:22px} :where(.learning-page, .learning-dialog) .benefit-number {font-size:21px;color:#cab0d5;font-weight:650;line-height:1.6} :where(.learning-page, .learning-dialog) .benefit>div {flex:1;min-width:0} :where(.learning-page, .learning-dialog) .benefit h3 {font-size:14px;margin:4px 0 8px;font-weight:650} :where(.learning-page, .learning-dialog) .benefit p {font-size:11px;margin:0;line-height:1.9} :where(.learning-page, .learning-dialog) .benefit-courses {display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} :where(.learning-page, .learning-dialog) .benefit-courses button {font-size:9px;border:1px solid #e9dcec;border-radius:5px;padding:4px 6px;color:#a17caf;background:#fffdf9} :where(.learning-page, .learning-dialog) .benefit.wide {grid-column:1/-1;background:linear-gradient(110deg,#f4eaf8,#fff9f0);position:relative;padding-right:270px} :where(.learning-page, .learning-dialog) .gift-amounts {position:absolute;right:24px;top:31px;display:flex;gap:20px;font-size:10px;color:#a487b1} :where(.learning-page, .learning-dialog) .gift-amounts span {display:flex;flex-direction:column;gap:2px;text-align:center;min-width:65px} :where(.learning-page, .learning-dialog) .gift-amounts b {font-size:28px;color:#9d74b3;font-weight:650} :where(.learning-page, .learning-dialog) .consult-banner {background:linear-gradient(110deg,#fff2df,#f3e8f8)} :where(.learning-page, .learning-dialog) .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #dialog.learning-dialog.course-dialog {max-width:800px;padding:32px;max-height:90vh;overflow:auto} #dialog.learning-dialog.consult-dialog {max-width:570px} :where(.learning-page, .learning-dialog) .detail-top {display:flex;justify-content:space-between;align-items:center} :where(.learning-page, .learning-dialog) .detail-top>img {width:90px;height:80px} :where(.learning-page, .learning-dialog) .detail-top small {font-size:10px;color:#b598ba} :where(.learning-page, .learning-dialog) .detail-top h2 {font-size:27px;margin:10px 0} :where(.learning-page, .learning-dialog) .detail-top p {font-size:12px;margin:0} :where(.learning-page, .learning-dialog) .detail-price {display:flex;align-items:center;gap:19px;padding:16px 0;margin:14px 0 20px;border-top:1px solid #eadfea;border-bottom:1px solid #eadfea;font-size:11px;color:#ad92b6} :where(.learning-page, .learning-dialog) .detail-price strong {font-size:27px;color:#df782f;margin-left:8px} :where(.learning-page, .learning-dialog) .detail-price del {font-size:10px;color:#b49fba} :where(.learning-page, .learning-dialog) .detail-price small {margin-left:auto;font-size:10px} :where(.learning-page, .learning-dialog) .outline-heading {font-size:15px;margin:0 0 15px} :where(.learning-page, .learning-dialog) .course-outline {list-style:none;padding:0;margin:0} :where(.learning-page, .learning-dialog) .course-outline li {display:flex;gap:15px;padding:15px 0;border-bottom:1px solid #ede1e9} :where(.learning-page, .learning-dialog) .course-outline li>span {color:#dd995e;font-size:14px;line-height:1.8} :where(.learning-page, .learning-dialog) .course-outline h4 {font-size:14px;margin:0 0 6px;font-weight:600} :where(.learning-page, .learning-dialog) .course-outline p {font-size:12px;margin:0;line-height:1.8} :where(.learning-page, .learning-dialog) .detail-end {display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:21px} :where(.learning-page, .learning-dialog) .detail-end p {font-size:11px} :where(.learning-page, .learning-dialog) .detail-end button {font-size:11px} :where(.learning-page, .learning-dialog) .consult-modal-heading {text-align:center} :where(.learning-page, .learning-dialog) .consult-modal-heading>img {width:100px;height:85px;display:block;margin:auto} :where(.learning-page, .learning-dialog) .consult-modal-heading>small {font-size:11px;color:#a587b0} :where(.learning-page, .learning-dialog) .consult-modal-heading h2 {font-size:24px;margin:10px 0} :where(.learning-page, .learning-dialog) .consult-modal-heading p {font-size:12px} :where(.learning-page, .learning-dialog) .consult-modal-heading strong {font-size:26px;color:#df792f} :where(.learning-page, .learning-dialog) .consult-brief {background:#f4eaf7;border-radius:10px;padding:17px 20px;margin-top:20px} :where(.learning-page, .learning-dialog) .consult-brief h3 {font-size:15px;margin:0 0 10px} :where(.learning-page, .learning-dialog) .consult-brief p {font-size:12px;margin:0;line-height:2} :where(.learning-page, .learning-dialog) .connection-note {font-size:11px;padding:15px 5px 0;color:#ad91b4} :where(.learning-page, .learning-dialog) .connection-note b {font-weight:500} :where(.learning-page, .learning-dialog) .connection-note p {font-size:11px;margin:7px 0 0;color:#b49dbc} @media(max-width:1200px){.learning-page {padding-inline:24px} :where(.learning-page, .learning-dialog) .learning-hero .hero-title, :where(.learning-page, .learning-dialog) .mentor-hero .hero-title {font-size:29px} :where(.learning-page, .learning-dialog) .course-card-body {padding:18px 15px} :where(.learning-page, .learning-dialog) .course-card h3 {font-size:18px} :where(.learning-page, .learning-dialog) .course-lead {font-size:10px} :where(.learning-page, .learning-dialog) .course-price strong {font-size:27px} :where(.learning-page, .learning-dialog) .course-price>div {gap:4px} :where(.learning-page, .learning-dialog) .course-price>span {font-size:9px} :where(.learning-page, .learning-dialog) .profile-sheet {left:60px} :where(.learning-page, .learning-dialog) .story-paper {left:25px} :where(.learning-page, .learning-dialog) .story-picture {right:12px} :where(.learning-page, .learning-dialog) .plan-card {padding:24px} :where(.learning-page, .learning-dialog) .plan-top>img {width:68px;right:-10px;top:-4px} :where(.learning-page, .learning-dialog) .plan-tag {font-size:8px;margin-left:8px} :where(.learning-page, .learning-dialog) .key-benefits b {font-size:13px} :where(.learning-page, .learning-dialog) .mentor-art {width:43%} :where(.learning-page, .learning-dialog) .mentor-mascot {right:9%} :where(.learning-page, .learning-dialog) .note-one {right:0;font-size:10px} :where(.learning-page, .learning-dialog) .note-two {left:-7%;font-size:10px} :where(.learning-page, .learning-dialog) .learning-promise span {padding-inline:19px} :where(.learning-page, .learning-dialog) .support-banner h2 {font-size:16px} :where(.learning-page, .learning-dialog) .benefit {padding:18px;gap:11px} } @media(max-width:1000px){.learning-page {padding-inline:20px} :where(.learning-page, .learning-dialog) .course-grid {gap:12px} :where(.learning-page, .learning-dialog) .course-card-body {padding:16px 12px} :where(.learning-page, .learning-dialog) .course-card h3 {font-size:17px} :where(.learning-page, .learning-dialog) .course-meta {font-size:8px} :where(.learning-page, .learning-dialog) .course-price {align-items:start;flex-direction:column;margin:8px 0} :where(.learning-page, .learning-dialog) .course-price>span {margin:0} :where(.learning-page, .learning-dialog) .course-art {height:190px} :where(.learning-page, .learning-dialog) .profile-sheet {left:44px;top:44px;width:158px} :where(.learning-page, .learning-dialog) .profile-sheet>b {font-size:20px} :where(.learning-page, .learning-dialog) .profile-avatar {width:38px;height:38px;right:10px} :where(.learning-page, .learning-dialog) .little-one {left:15px} :where(.learning-page, .learning-dialog) .little-two {right:6px;font-size:9px} :where(.learning-page, .learning-dialog) .story-paper {width:175px;left:18px} :where(.learning-page, .learning-dialog) .story-paper>b {font-size:18px} :where(.learning-page, .learning-dialog) .story-picture {width:80px;height:88px;bottom:15px} :where(.learning-page, .learning-dialog) .film-monitor {left:20px;right:20px;height:104px} :where(.learning-page, .learning-dialog) .timeline {left:28px;right:20px;bottom:8px} :where(.learning-page, .learning-dialog) .section-heading h2 {font-size:23px} :where(.learning-page, .learning-dialog) .plan-tag {display:table;margin-left:0;margin-bottom:8px} :where(.learning-page, .learning-dialog) .plan-price strong {font-size:38px} :where(.learning-page, .learning-dialog) .key-benefits {gap:8px} :where(.learning-page, .learning-dialog) .key-benefits b {font-size:11px} :where(.learning-page, .learning-dialog) .mentor-pills {gap:7px;font-size:9px} :where(.learning-page, .learning-dialog) .mentor-hero .hero-copy {padding:28px 24px} :where(.learning-page, .learning-dialog) .mentor-hero .hero-title {font-size:26px} :where(.learning-page, .learning-dialog) .mentor-hero .hero-copy p {font-size:11px} :where(.learning-page, .learning-dialog) .floating-note {padding:9px;font-size:9px} :where(.learning-page, .learning-dialog) .floating-note img {width:32px} :where(.learning-page, .learning-dialog) .note-two {left:-9%;bottom:22px} :where(.learning-page, .learning-dialog) .note-one {top:30px} :where(.learning-page, .learning-dialog) .mentor-art {width:42%} :where(.learning-page, .learning-dialog) .mentor-mascot {height:256px;right:2%} :where(.learning-page, .learning-dialog) .learning-promise span {padding-inline:15px;font-size:10px} :where(.learning-page, .learning-dialog) .support-banner, :where(.learning-page, .learning-dialog) .consult-banner {gap:16px;padding:20px} :where(.learning-page, .learning-dialog) .support-banner>img, :where(.learning-page, .learning-dialog) .consult-banner>img {width:63px} :where(.learning-page, .learning-dialog) .support-banner h2, :where(.learning-page, .learning-dialog) .consult-banner h2 {font-size:15px} :where(.learning-page, .learning-dialog) .support-banner .outline, :where(.learning-page, .learning-dialog) .consult-banner .solid {font-size:10px;padding:10px 12px} :where(.learning-page, .learning-dialog) .benefit h3 {font-size:12px} :where(.learning-page, .learning-dialog) .benefit.wide {padding-right:210px} :where(.learning-page, .learning-dialog) .gift-amounts {right:16px;gap:6px} :where(.learning-page, .learning-dialog) thead th, :where(.learning-page, .learning-dialog) tbody td, :where(.learning-page, .learning-dialog) tbody th {padding:13px 15px} :where(.learning-page, .learning-dialog) .path-card {padding:15px} :where(.learning-page, .learning-dialog) .path-card h3 {font-size:13px} :where(.learning-page, .learning-dialog) .path-card p {font-size:10px} } @media(max-width:800px){.learning-page {padding:16px 16px 0} :where(.learning-page, .learning-dialog) .learning-hero {height:270px} :where(.learning-page, .learning-dialog) .learning-hero .hero-copy {padding:28px 24px} :where(.learning-page, .learning-dialog) .learning-hero .hero-title {font-size:30px} :where(.learning-page, .learning-dialog) .learning-hero .hero-copy p {font-size:11px} :where(.learning-page, .learning-dialog) .learning-hero>img {width:78%;opacity:.8} :where(.learning-page, .learning-dialog) .learning-hero .hero-fade {background:linear-gradient(90deg,#fff7ec 5%,#fff7ecee 40%,#fff7ec33 87%)} :where(.learning-page, .learning-dialog) .learning-promise {margin-bottom:30px} :where(.learning-page, .learning-dialog) .learning-promise span {padding-inline:16px} :where(.learning-page, .learning-dialog) .course-card h3 {font-size:16px} :where(.learning-page, .learning-dialog) .path-card h3 {font-size:13px} :where(.learning-page, .learning-dialog) .plan-card {padding:22px} :where(.learning-page, .learning-dialog) .mentor-hero .hero-title {font-size:29px} :where(.learning-page, .learning-dialog) .mentor-art {width:45%} :where(.learning-page, .learning-dialog) .mentor-pills {gap:8px} :where(.learning-page, .learning-dialog) .mentor-hero .hero-copy {width:66%} :where(.learning-page, .learning-dialog) .note-two {left:4%;font-size:9px} :where(.learning-page, .learning-dialog) .note-one {right:3%;top:39px} :where(.learning-page, .learning-dialog) .floating-note small {font-size:8px} :where(.learning-page, .learning-dialog) .mentor-hero .hero-copy p {font-size:11px} :where(.learning-page, .learning-dialog) .key-benefits b {font-size:12px} :where(.learning-page, .learning-dialog) .plan-common {font-size:10px} :where(.learning-page, .learning-dialog) .benefit-grid {gap:12px} :where(.learning-page, .learning-dialog) .learning-footer {font-size:10px} :where(.learning-page, .learning-dialog) .learning-footer span {margin-left:5px;font-size:8px} } @media(max-width:620px){:where(.learning-page, .learning-dialog) .learning-hero {height:286px} :where(.learning-page, .learning-dialog) .learning-hero .hero-title {font-size:27px} :where(.learning-page, .learning-dialog) .learning-hero .hero-copy {padding:27px 19px} :where(.learning-page, .learning-dialog) .learning-hero .hero-copy p {font-size:10px;max-width:250px} :where(.learning-page, .learning-dialog) .learning-hero>img {width:100%;object-position:65% 21%;opacity:.54} :where(.learning-page, .learning-dialog) .learning-hero .hero-fade {background:linear-gradient(90deg,#fff7ec 0%,#fff7ecee 21%,#fff7ec44 100%)} :where(.learning-page, .learning-dialog) .eyebrow {font-size:8px} :where(.learning-page, .learning-dialog) .hero-links {gap:14px;font-size:10px} :where(.learning-page, .learning-dialog) .hero-links .solid {min-width:125px;font-size:11px;padding:10px 12px} :where(.learning-page, .learning-dialog) .hero-label {font-size:8px;bottom:10px;right:10px} :where(.learning-page, .learning-dialog) .learning-promise {display:grid;grid-template-columns:1fr 1fr;gap:15px 0;padding:20px 0;margin-bottom:28px} :where(.learning-page, .learning-dialog) .learning-promise span {font-size:10px;text-align:center;padding:0 8px} :where(.learning-page, .learning-dialog) .learning-promise span:nth-child(2) {border:0} :where(.learning-page, .learning-dialog) .section-heading {align-items:start;gap:10px;margin-bottom:17px} :where(.learning-page, .learning-dialog) .section-heading h2 {font-size:21px} :where(.learning-page, .learning-dialog) .section-heading p {font-size:11px} :where(.learning-page, .learning-dialog) .section-heading small {font-size:8px;letter-spacing:1.5px} :where(.learning-page, .learning-dialog) .soft-label {font-size:8px;margin-top:20px;padding:5px 8px} :where(.learning-page, .learning-dialog) .course-grid, :where(.learning-page, .learning-dialog) .path-grid, :where(.learning-page, .learning-dialog) .plan-grid {grid-template-columns:1fr;gap:18px} :where(.learning-page, .learning-dialog) .course-art {height:214px} :where(.learning-page, .learning-dialog) .profile-sheet {left:28%;width:180px} :where(.learning-page, .learning-dialog) .profile-sheet>b {font-size:23px} :where(.learning-page, .learning-dialog) .profile-avatar {width:45px;height:45px} :where(.learning-page, .learning-dialog) .little-one {left:15%;top:81px} :where(.learning-page, .learning-dialog) .little-two {right:8%;bottom:26px} :where(.learning-page, .learning-dialog) .story-paper {left:14%;width:205px} :where(.learning-page, .learning-dialog) .story-picture {right:10%;width:93px;height:106px;bottom:19px} :where(.learning-page, .learning-dialog) .film-monitor {left:12%;right:12%;height:115px} :where(.learning-page, .learning-dialog) .timeline {left:17%;right:13%;bottom:13px} :where(.learning-page, .learning-dialog) .course-card-body {padding:20px} :where(.learning-page, .learning-dialog) .course-meta {font-size:10px} :where(.learning-page, .learning-dialog) .course-card h3 {font-size:23px} :where(.learning-page, .learning-dialog) .course-lead {font-size:12px} :where(.learning-page, .learning-dialog) .module-mini {font-size:12px;margin:17px 0;padding:17px 0} :where(.learning-page, .learning-dialog) .course-price {flex-direction:row;align-items:end;margin:12px 0 15px} :where(.learning-page, .learning-dialog) .course-price strong {font-size:34px} :where(.learning-page, .learning-dialog) .course-price>span {font-size:10px;margin-bottom:8px} :where(.learning-page, .learning-dialog) .course-price small {font-size:11px} :where(.learning-page, .learning-dialog) .course-card .solid {height:44px;font-size:12px} :where(.learning-page, .learning-dialog) .choose-section {margin-top:33px} :where(.learning-page, .learning-dialog) .path-card {padding:19px} :where(.learning-page, .learning-dialog) .path-card h3 {font-size:16px;margin:6px 0} :where(.learning-page, .learning-dialog) .path-card p {font-size:11px;min-height:0} :where(.learning-page, .learning-dialog) .path-number {font-size:22px} :where(.learning-page, .learning-dialog) .support-banner, :where(.learning-page, .learning-dialog) .consult-banner {position:relative;flex-wrap:wrap;padding:22px;gap:10px;margin-top:28px} :where(.learning-page, .learning-dialog) .support-banner>img, :where(.learning-page, .learning-dialog) .consult-banner>img {width:60px;height:58px;position:absolute;right:12px;top:12px;opacity:.6} :where(.learning-page, .learning-dialog) .support-banner>div, :where(.learning-page, .learning-dialog) .consult-banner>div {flex-basis:100%;position:relative} :where(.learning-page, .learning-dialog) .support-banner h2, :where(.learning-page, .learning-dialog) .consult-banner h2 {font-size:17px;max-width:240px;line-height:1.6;margin-top:7px} :where(.learning-page, .learning-dialog) .support-banner p, :where(.learning-page, .learning-dialog) .consult-banner p {font-size:11px;margin-top:9px} :where(.learning-page, .learning-dialog) .support-banner>a, :where(.learning-page, .learning-dialog) .consult-banner>button {margin-top:8px;font-size:11px;padding:11px 16px} :where(.learning-page, .learning-dialog) .faq-section {margin-top:30px} :where(.learning-page, .learning-dialog) .faq-list details {padding:0 16px} :where(.learning-page, .learning-dialog) .faq-list summary {font-size:11px;padding:15px 0;gap:10px} :where(.learning-page, .learning-dialog) .faq-list p {font-size:11px;padding-right:0} :where(.learning-page, .learning-dialog) .learning-footer {margin-top:28px;gap:10px;align-items:start} :where(.learning-page, .learning-dialog) .learning-footer>div {flex-wrap:wrap;max-width:200px} :where(.learning-page, .learning-dialog) .learning-footer>div span {flex-basis:100%;margin-left:29px} :where(.learning-page, .learning-dialog) .learning-footer>a {font-size:9px;white-space:nowrap} :where(.learning-page, .learning-dialog) .mentor-hero {height:437px} :where(.learning-page, .learning-dialog) .mentor-hero .hero-copy {padding:25px 20px;width:100%} :where(.learning-page, .learning-dialog) .mentor-hero .hero-title {font-size:27px;line-height:1.55;margin:12px 0 10px} :where(.learning-page, .learning-dialog) .mentor-hero .hero-copy p {font-size:10px;max-width:100%} :where(.learning-page, .learning-dialog) .mentor-pills {font-size:9px;gap:8px;margin:14px 0 17px} :where(.learning-page, .learning-dialog) .mentor-hero .solid {font-size:11px;padding:10px 13px;position:relative;z-index:4} :where(.learning-page, .learning-dialog) .mentor-art {top:auto;bottom:0;height:223px;width:100%} :where(.learning-page, .learning-dialog) .mentor-mascot {height:214px;right:9%} :where(.learning-page, .learning-dialog) .note-one {left:5%;right:auto;top:100px;transform:rotate(-5deg)} :where(.learning-page, .learning-dialog) .note-two {display:none} :where(.learning-page, .learning-dialog) .floating-note {padding:10px 12px;font-size:10px} :where(.learning-page, .learning-dialog) .floating-note small {font-size:8px} :where(.learning-page, .learning-dialog) .floating-note img {width:37px;height:38px} :where(.learning-page, .learning-dialog) .star-one {top:42px;left:46%;font-size:25px} :where(.learning-page, .learning-dialog) .star-two {right:8%;bottom:155px} :where(.learning-page, .learning-dialog) .orbit-one {width:320px;right:-40px;height:140px;bottom:20px} :where(.learning-page, .learning-dialog) .orbit-two {width:220px;height:230px;bottom:-90px;right:35px} :where(.learning-page, .learning-dialog) .subtle-link {font-size:9px;white-space:nowrap;margin-top:22px} :where(.learning-page, .learning-dialog) .plan-card {padding:25px 23px} :where(.learning-page, .learning-dialog) .plan-caption {font-size:10px} :where(.learning-page, .learning-dialog) .plan-top h3 {font-size:29px} :where(.learning-page, .learning-dialog) .plan-tag {display:inline-block;margin-left:13px;vertical-align:5px;font-size:8px} :where(.learning-page, .learning-dialog) .plan-top>img {top:1px;right:-7px;width:65px;opacity:.7} :where(.learning-page, .learning-dialog) .plan-top p {font-size:11px} :where(.learning-page, .learning-dialog) .plan-price strong {font-size:43px} :where(.learning-page, .learning-dialog) .key-benefits b {font-size:13px} :where(.learning-page, .learning-dialog) .plan-common {font-size:10px} :where(.learning-page, .learning-dialog) .plan-card>button {height:44px;font-size:12px} :where(.learning-page, .learning-dialog) .comparison-wrap {border-radius:9px} :where(.learning-page, .learning-dialog) thead th:first-child {width:42%} :where(.learning-page, .learning-dialog) thead th {font-size:11px;padding:13px 10px} :where(.learning-page, .learning-dialog) thead th small {display:block;margin:4px 0 0;font-size:9px} :where(.learning-page, .learning-dialog) tbody th, :where(.learning-page, .learning-dialog) tbody td {font-size:10px;padding:13px 10px;line-height:1.8} :where(.learning-page, .learning-dialog) tr.diff th>span {display:none} :where(.learning-page, .learning-dialog) .comparison-footnote {font-size:9px} :where(.learning-page, .learning-dialog) .benefit-grid {grid-template-columns:1fr} :where(.learning-page, .learning-dialog) .benefit {padding:20px;gap:15px} :where(.learning-page, .learning-dialog) .benefit h3 {font-size:14px} :where(.learning-page, .learning-dialog) .benefit p {font-size:11px} :where(.learning-page, .learning-dialog) .benefit.wide {padding:20px} :where(.learning-page, .learning-dialog) .gift-amounts {position:static;justify-content:flex-start;gap:24px;margin-top:15px} :where(.learning-page, .learning-dialog) .gift-amounts span {min-width:55px} :where(.learning-page, .learning-dialog) .benefit-number {font-size:21px} :where(.learning-page, .learning-dialog) .benefit-courses button {font-size:9px} .learning-page #comparison, .learning-page #benefits {margin-top:33px} #dialog.learning-dialog.course-dialog {padding:22px;max-height:92vh;width:94%} :where(.learning-page, .learning-dialog) .detail-top {padding-top:8px} :where(.learning-page, .learning-dialog) .detail-top>img {display:none} :where(.learning-page, .learning-dialog) .detail-top h2 {font-size:23px} :where(.learning-page, .learning-dialog) .detail-top p {font-size:11px} :where(.learning-page, .learning-dialog) .detail-price {flex-wrap:wrap;gap:6px 15px;margin-bottom:17px} :where(.learning-page, .learning-dialog) .detail-price small {margin-left:0;flex-basis:100%;font-size:9px;margin-top:4px} :where(.learning-page, .learning-dialog) .outline-heading {font-size:13px;line-height:1.8} :where(.learning-page, .learning-dialog) .course-outline li {gap:10px;padding:13px 0} :where(.learning-page, .learning-dialog) .course-outline h4 {font-size:12px;line-height:1.7} :where(.learning-page, .learning-dialog) .course-outline p {font-size:11px} :where(.learning-page, .learning-dialog) .detail-end {flex-direction:column;align-items:stretch;gap:8px} :where(.learning-page, .learning-dialog) .detail-end p {font-size:11px;text-align:center;margin:0} :where(.learning-page, .learning-dialog) .consult-modal-heading h2 {font-size:20px} #dialog.learning-dialog.consult-dialog {padding:24px} } :where(.learning-page, .learning-dialog) .plan-caption {display:block} :where(.learning-page, .learning-dialog) .plan-top h3 {display:block} :where(.learning-page, .learning-dialog) .plan-tag {margin-left:0;margin-bottom:7px} :where(.learning-page, .learning-dialog) .plan-top>img {top:0} :where(.learning-page, .learning-dialog) .note-one {left:1%;right:auto;top:33px} :where(.learning-page, .learning-dialog) .benefit.wide {min-height:142px;align-items:center} :where(.learning-page, .learning-dialog) .gift-amounts {top:50%;transform:translateY(-50%)} @media(max-width:1000px){:where(.learning-page, .learning-dialog) .note-one {left:-7%;top:39px} :where(.learning-page, .learning-dialog) .plan-top>img {right:-4px} :where(.learning-page, .learning-dialog) .plan-tag {display:table;margin-left:0} } @media(max-width:620px){:where(.learning-page, .learning-dialog) .note-one {left:5%;top:100px} :where(.learning-page, .learning-dialog) .plan-tag {display:inline-block;margin-left:0} :where(.learning-page, .learning-dialog) .plan-top>img {top:0} :where(.learning-page, .learning-dialog) .gift-amounts {transform:none;top:auto} :where(.learning-page, .learning-dialog) .benefit.wide {min-height:0;align-items:start} } @media(prefers-reduced-motion:reduce){} /* Fit the existing shared shell and 1440px desktop canvas without changing global layout. */ .learning-page { padding: 0; max-width: none; } .learning-page .hero-links > button:not(.solid), .learning-page .subtle-link { padding: 0; } .learning-page .learning-hero .hero-copy { width: 65%; } .learning-page .learning-hero .hero-copy p { color: #927d97; letter-spacing: 0; } .learning-page .learning-catalog { margin-top: 40px; } .learning-page .learning-catalog > h2 { font-size: 21px; margin-bottom: 12px; } .learning-page .learning-catalog-error { padding: 16px 20px; border: 1px solid #e8dce7; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; } .learning-page .learning-catalog-error p { font-size: 12px; } #dialog.learning-dialog.course-dialog, #dialog.learning-dialog.consult-dialog { width: 800px; padding: 0; background: #fffaf3; max-width: calc(100vw - 80px); max-height: calc(100dvh - 64px); } #dialog.learning-dialog.consult-dialog { width: 570px; } #dialog.learning-dialog .dialog-header { padding: 18px 26px; } #dialog.learning-dialog .dialog-header h2 { font-size: 16px; } #dialog.learning-dialog .dialog-body { padding: 8px 32px 28px; overflow-y: auto; } #dialog.learning-dialog .detail-top h2 { font-weight: 700; } #dialog.learning-dialog p { color: #927d97; line-height: 1.9; } #dialog.learning-dialog .consult-availability { margin-top: 20px; padding-top: 18px; border-top: 1px solid #eadfea; } #dialog.learning-dialog .consult-availability h3 { font-size: 14px; margin-bottom: 6px; } #dialog.learning-dialog .consult-availability p { font-size: 12px; } /* Coaching uses the shared desktop canvas; keep its typography and card rows local. */ .learning-page[data-learning-view="coaching"] { max-width: 1320px; margin-inline: auto; } .learning-page[data-learning-view="coaching"] .mentor-hero { height: auto; min-height: 324px; } .learning-page[data-learning-view="coaching"] .mentor-hero .hero-copy { padding: 30px 32px; } .learning-page[data-learning-view="coaching"] .eyebrow { font-size: 11px; letter-spacing: 1.6px; } .learning-page[data-learning-view="coaching"] .mentor-hero .hero-title { font-size: 32px; line-height: 1.4; margin: 12px 0; } .learning-page[data-learning-view="coaching"] .mentor-hero .hero-copy p { font-size: 15px; line-height: 1.8; color: #816b89; } .learning-page[data-learning-view="coaching"] .mentor-pills { font-size: 14px; line-height: 1.5; margin: 14px 0 18px; gap: 10px; color: #8c7298; } .learning-page[data-learning-view="coaching"] .mentor-hero .solid { min-height: 44px; padding: 10px 18px; font-size: 15px; } .learning-page[data-learning-view="coaching"] .mentor-mascot { height: 296px; } .learning-page[data-learning-view="coaching"] .floating-note { font-size: 14px; } .learning-page[data-learning-view="coaching"] .floating-note small { font-size: 12px; } .learning-page[data-learning-view="coaching"] .note-one { top: 30px; } .learning-page[data-learning-view="coaching"] .note-two { bottom: 34px; } .learning-page[data-learning-view="coaching"] .coaching-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 16px 0 36px; padding: 6px; border: 1px solid #e8dce7; border-radius: 13px; background: #fffdf9; } .learning-page[data-learning-view="coaching"] .coaching-shortcuts > button { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 12px 20px; text-align: left; color: #725184; border-radius: 8px; position: relative; } .learning-page[data-learning-view="coaching"] .coaching-shortcuts > button + button::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 1px; background: #eadfe8; } .learning-page[data-learning-view="coaching"] .coaching-shortcuts strong { display: block; font-size: 16px; line-height: 1.5; font-weight: 650; } .learning-page[data-learning-view="coaching"] .coaching-shortcuts small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.6; color: #927b9b; } .learning-page[data-learning-view="coaching"] .coaching-shortcuts > button > span:last-child { flex-shrink: 0; color: #b281aa; font-size: 19px; } .learning-page[data-learning-view="coaching"] .coaching-shortcuts > button:hover { background: #f7eff9; } .learning-page[data-learning-view="coaching"] .section-heading { gap: 24px; margin-bottom: 22px; } .learning-page[data-learning-view="coaching"] .section-heading small { font-size: 11px; letter-spacing: 1.5px; } .learning-page[data-learning-view="coaching"] .section-heading h2 { font-size: 26px; line-height: 1.4; margin: 8px 0; } .learning-page[data-learning-view="coaching"] .section-heading p { font-size: 15px; line-height: 1.8; color: #816b89; } .learning-page[data-learning-view="coaching"] .subtle-link { font-size: 14px; min-height: 40px; text-underline-offset: 4px; } .learning-page[data-learning-view="coaching"] .subtle-link:hover { color: #6d487c; text-decoration: underline; } .learning-page[data-learning-view="coaching"] #plans, .learning-page[data-learning-view="coaching"] #comparison { scroll-margin-top: 28px; } .learning-page[data-learning-view="coaching"] #comparison { margin-top: 40px; } .learning-page[data-learning-view="coaching"] .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .learning-page[data-learning-view="coaching"] .plan-card { display: flex; flex-direction: column; min-width: 0; padding: 26px; border-radius: 16px; box-shadow: 0 6px 22px #654b7008; overflow-wrap: anywhere; } .learning-page[data-learning-view="coaching"] .plan-top { padding-right: 66px; } .learning-page[data-learning-view="coaching"] .plan-caption { font-size: 13px; line-height: 1.6; letter-spacing: .4px; } .learning-page[data-learning-view="coaching"] .plan-top h3 { display: block; font-size: 26px; line-height: 1.4; margin: 9px 0 10px; } .learning-page[data-learning-view="coaching"] .plan-top > img { width: 70px; height: 70px; top: 2px; right: -4px; } .learning-page[data-learning-view="coaching"] .plan-tag { display: inline-block; font-size: 14px; line-height: 1.4; margin: 0 0 10px; padding: 4px 10px; vertical-align: baseline; } .learning-page[data-learning-view="coaching"] .plan-top p { font-size: 15px; line-height: 1.8; color: #816b89; } .learning-page[data-learning-view="coaching"] .plan-price { margin-top: 18px; padding-bottom: 19px; } .learning-page[data-learning-view="coaching"] .plan-price > span, .learning-page[data-learning-view="coaching"] .plan-price > div { font-size: 14px; line-height: 1.7; } .learning-page[data-learning-view="coaching"] .plan-price strong { font-size: 42px; line-height: 1.25; letter-spacing: -1.2px; } .learning-page[data-learning-view="coaching"] .key-benefits { grid-template-columns: 1fr 1fr 1.12fr; gap: 14px; padding: 20px 0; } .learning-page[data-learning-view="coaching"] .key-benefits > div { min-width: 0; padding-right: 8px; } .learning-page[data-learning-view="coaching"] .key-benefits span { font-size: 14px; line-height: 1.6; color: #927b9b; } .learning-page[data-learning-view="coaching"] .key-benefits b { font-size: 15px; line-height: 1.6; margin-top: 6px; overflow-wrap: anywhere; } .learning-page[data-learning-view="coaching"] .plan-description { flex: 1; min-width: 0; padding-bottom: 24px; } .learning-page[data-learning-view="coaching"] .plan-common { margin: 0 0 15px; font-size: 15px; line-height: 1.8 !important; color: #816b89; } .learning-page[data-learning-view="coaching"] .coaching-live-benefits { margin: 0; padding-left: 19px; font-size: 15px; line-height: 1.8; color: #816b89; } .learning-page[data-learning-view="coaching"] .coaching-live-benefits li + li { margin-top: 5px; } .learning-page[data-learning-view="coaching"] .coaching-live-benefits li::marker { color: #b295be; } .learning-page[data-learning-view="coaching"] .plan-card > button { flex-shrink: 0; align-self: stretch; margin-top: auto; min-height: 48px; height: auto; padding: 11px 17px; font-size: 16px; line-height: 1.5; } .learning-page[data-learning-view="coaching"] .service-card-actions { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 12px; align-items: center; margin-top: auto; min-width: 0; } .learning-page[data-learning-view="coaching"] .service-card-actions > [data-learning-buy] { width: 100%; justify-content: space-between; min-height: 48px; height: auto; padding: 11px 17px; font-size: 16px; line-height: 1.5; } .learning-page[data-learning-view="coaching"] .plan-card.full .service-card-actions > [data-learning-buy] { background: #51335f; border-color: #51335f; } .learning-page[data-learning-view="coaching"] .plan-card.full .service-card-actions > [data-learning-buy]:hover { background: #6c4780; } /* Purchase and compact share use one action row. Description rows share sizes: a longer common introduction must not push just one card's benefits down. */ @supports (grid-template-rows: subgrid) { .learning-page[data-learning-view="coaching"] .plan-grid { grid-template-rows: repeat(7, auto); row-gap: 0; } .learning-page[data-learning-view="coaching"] .plan-card { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; } .learning-page[data-learning-view="coaching"] .plan-description { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; } .learning-page[data-learning-view="coaching"] .plan-common { grid-row: 1; } .learning-page[data-learning-view="coaching"] .coaching-live-benefits { grid-row: 2; } .learning-page[data-learning-view="coaching"] .plan-description > .field-help { grid-row: 3; } .learning-page[data-learning-view="coaching"] .plan-card > button, .learning-page[data-learning-view="coaching"] .service-card-actions { margin-top: 0; } } .learning-page[data-learning-view="coaching"] .comparison-wrap { border-radius: 14px; } .learning-page[data-learning-view="coaching"] thead th { padding: 19px 22px; font-size: 16px; line-height: 1.7; } .learning-page[data-learning-view="coaching"] thead th:first-child { width: 38%; } .learning-page[data-learning-view="coaching"] thead th small { font-size: 14px; } .learning-page[data-learning-view="coaching"] tbody th, .learning-page[data-learning-view="coaching"] tbody td { padding: 15px 22px; font-size: 15px; line-height: 1.8; color: #816b89; } .learning-page[data-learning-view="coaching"] tr.diff td { color: #a96735; } .learning-page[data-learning-view="coaching"] .comparison-footnote { margin-top: 14px; font-size: 14px; line-height: 1.8; color: #927b9b !important; } .learning-page[data-learning-view="coaching"] .learning-footer { margin-top: 32px; padding: 22px 0; font-size: 15px; } .learning-page[data-learning-view="coaching"] .learning-footer span, .learning-page[data-learning-view="coaching"] .learning-footer > a { font-size: 14px; } .learning-page[data-learning-view="coaching"] button:focus-visible, .learning-page[data-learning-view="coaching"] a:focus-visible { outline: 3px solid #b991c9; outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .learning-page[data-learning-view="coaching"] .coaching-shortcuts > button, .learning-page[data-learning-view="coaching"] .solid, .learning-page[data-learning-view="coaching"] .outline { transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } } .learning-page[data-learning-view="coaching"] .coaching-shortcuts > button:active, .learning-page[data-learning-view="coaching"] .solid:not(:disabled):active, .learning-page[data-learning-view="coaching"] .outline:not(:disabled):active { box-shadow: inset 0 0 0 2px #76508724; }