:root {
  --ink: #182e44;
  --muted: #668092;
  --cream: #fffdf7;
  --paper: #f8f5ed;
  --line: #d8e1e0;
  --teal: #087e83;
  --deep-teal: #05636b;
  --coral: #ff725e;
  --yellow: #ffc83d;
  --lavender: #e6defe;
  --round: 26px;
  --shadow: 0 24px 70px rgba(25, 59, 73, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.section-shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 30; top: -60px; left: 24px; background: var(--yellow); padding: 12px 16px; border-radius: 0 0 12px 12px; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { height: 82px; width: min(1240px, calc(100% - 48px)); display: flex; align-items: center; gap: 42px; margin: auto; border-bottom: 1px solid rgba(24,46,68,.08); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; font-size: 19px; font-weight: 500; letter-spacing: -.5px; }
.brand b { font-weight: 700; }
.brand-mark { display: flex; align-items: end; gap: 2px; height: 24px; padding-bottom: 2px; }
.brand-mark i { display: block; width: 5px; border-radius: 5px; background: var(--teal); transform: rotate(36deg); }
.brand-mark i:nth-child(1) { height: 11px; }.brand-mark i:nth-child(2) { height: 18px; background: var(--coral); }.brand-mark i:nth-child(3) { height: 24px; background: var(--yellow); }
.site-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.site-nav a { font-size: 14px; font-weight: 600; color: #536a78; transition: color .2s; }.site-nav a:hover, .site-nav .is-active { color: var(--ink); }
.site-nav .is-active { position: relative; }.site-nav .is-active::after { content: ""; position: absolute; height: 2px; background: var(--coral); border-radius: 10px; right: 0; left: 0; bottom: -9px; }
.header-cta, .button { border-radius: 999px; display: inline-flex; align-items: center; gap: 12px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
.header-cta { padding: 11px 17px; background: #e8f4f1; color: var(--deep-teal); font-size: 13px; }.header-cta:hover, .button:hover { transform: translateY(-2px); }
.menu-toggle { display: none; }

.hero { min-height: 630px; display: grid; grid-template-columns: 1fr .96fr; gap: 70px; align-items: center; padding: 66px 0 76px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 15px; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; }.pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255,114,94,.15); }
h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { letter-spacing: -.055em; } h1, h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; } em { color: var(--teal); font-style: normal; }
h1 { max-width: 590px; margin-bottom: 19px; font-size: clamp(50px, 5.3vw, 76px); line-height: .98; } .hero-text { max-width: 478px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 31px; }.button { padding: 15px 23px; border: 0; }.button-primary { color: white; background: var(--teal); box-shadow: 0 10px 22px rgba(8,126,131,.23); }.button-primary span { font-size: 21px; line-height: 11px; }.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 14px; font-weight: 700; }.play-dot { display: grid; place-items: center; width: 28px; height: 28px; padding-left: 2px; border: 1px solid #afc4c3; border-radius: 50%; color: var(--teal); font-size: 9px; }
.trust-row { display: flex; align-items: center; gap: 12px; margin-top: 54px; }.trust-row p { margin: 0; color: #718895; font-size: 12px; line-height: 1.45; }.trust-row p b { color: var(--ink); }.avatar-stack { display: flex; padding-left: 7px; }.avatar { display: grid; place-items: center; width: 29px; height: 29px; margin-left: -7px; border: 2px solid var(--cream); border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; }.avatar-one { background: #ef8158; }.avatar-two { background: #7563c6; }.avatar-three { background: #56939a; }.avatar-four { background: #caa34d; }

.hero-visual { position: relative; min-height: 468px; display: grid; place-items: center; }.orb { position: absolute; border-radius: 50%; }.orb-coral { width: 390px; height: 390px; background: #fbe2d7; }.orb-gold { right: 1px; top: 5px; width: 100px; height: 100px; background: #ffdc73; }.lesson-window { z-index: 1; width: min(100%, 410px); min-height: 406px; padding: 19px 25px 17px; border: 1px solid rgba(0,0,0,.06); border-radius: 22px; background: #fffefa; box-shadow: var(--shadow); transform: rotate(1deg); }.window-top { display: flex; align-items: center; gap: 5px; color: #798c95; font-size: 11px; }.window-top > span { width: 7px; height: 7px; border-radius: 50%; background: #d9e3dd; }.window-top > span:first-child { background: #ffb391; }.window-top p { margin: 0 auto; }.window-top button { border: 0; background: none; color: #6e838f; letter-spacing: 1px; }.progress-line { height: 4px; margin: 21px 0 28px; background: #dce9e5; border-radius: 8px; overflow: hidden; }.progress-line span { display: block; width: 62%; height: 100%; border-radius: 8px; background: var(--teal); }.mini-label { margin: 0 0 7px; color: #8a9ca3; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; }.lesson-window h2 { margin: 0 0 20px; font-size: 31px; }.phrase-card { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #d9e8e3; border-radius: 13px; }.sound-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: var(--teal); background: #daf2ed; font-size: 25px; transform: rotate(-17deg); }.phrase-card div { display: grid; gap: 2px; }.phrase-card small { color: #758992; font-size: 10px; }.phrase-card strong { font-size: 13px; letter-spacing: -.2px; }.listen-button { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; padding-left: 2px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 9px; cursor: pointer; transition: transform .15s; }.listen-button:hover { transform: scale(1.1); }.choice { margin-top: 13px; padding: 12px 14px; border-radius: 11px; font-size: 13px; font-weight: 600; }.choice-good { color: #347669; background: #e9f6e9; }.choice-good span { margin-right: 6px; color: #e99e45; }.window-footer { display: flex; justify-content: space-between; margin-top: 20px; color: #94a4a4; font-size: 10px; }.tiny-spark { color: var(--coral); font-size: 16px; }.floating-note { position: absolute; z-index: 2; padding: 12px 14px; border-radius: 12px; background: #fffefa; box-shadow: 0 13px 28px rgba(48,66,71,.12); font-size: 11px; font-weight: 700; }.note-one { top: 52px; left: 2px; color: #4d7180; transform: rotate(-7deg); }.note-one span { color: var(--coral); font-size: 15px; }.note-two { right: -7px; bottom: 47px; color: var(--deep-teal); transform: rotate(6deg); }.note-two span { margin-left: 7px; color: var(--coral); }

.path-section { padding: 85px 0 104px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 38px; }.section-heading h2 { margin-bottom: 0; font-size: clamp(35px, 4.2vw, 52px); line-height: 1.04; }.split-heading > p, .shorts-heading > p { max-width: 280px; margin: 0 7px 6px 0; color: var(--muted); font-size: 14px; line-height: 1.6; }.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 42px; }.path-card { position: relative; min-height: 293px; padding: 23px 24px; border-radius: 20px; overflow: hidden; transition: transform .25s, box-shadow .25s; }.path-card:hover { transform: translateY(-5px); box-shadow: 0 20px 35px rgba(28,52,64,.12); }.card-conversation { background: #d6f1ed; }.card-listening { background: #fbe2da; }.card-routine { background: #fff0bd; }.path-number, .path-arrow, .card-meta { position: relative; z-index: 1; }.path-number { color: rgba(24,46,68,.48); font-size: 11px; font-weight: 700; }.path-arrow { position: absolute; top: 21px; right: 23px; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(24,46,68,.17); border-radius: 50%; font-size: 16px; }.path-icon { position: absolute; right: 16px; top: 64px; color: rgba(255,255,255,.73); font-family: Fraunces, serif; font-size: 102px; line-height: 1; }.ear-icon { transform: rotate(-19deg); }.sun-icon { top: 70px; font-size: 85px; }.path-card h3 { position: relative; z-index: 1; margin: 53px 0 10px; font-size: 25px; line-height: 1.05; }.path-card p { position: relative; z-index: 1; margin-bottom: 28px; color: rgba(24,46,68,.7); font-size: 13px; }.card-meta { font-size: 9px; font-weight: 700; letter-spacing: 1px; }.card-meta b { margin: 0 4px; color: var(--coral); }

.practice-section { padding: 81px 0; color: #fff; background: var(--ink); }.practice-shell { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 94px; }.eyebrow-light { color: #8fcec9; }.practice-intro h2 { margin-bottom: 18px; color: #fff; font-size: clamp(43px, 5vw, 61px); line-height: .98; }.practice-intro > p:not(.eyebrow) { max-width: 270px; color: #b6cad5; font-size: 15px; line-height: 1.65; }.streak-card { display: flex; align-items: center; width: min(100%, 310px); gap: 12px; margin-top: 32px; padding: 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(255,255,255,.07); }.flame { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; color: #ffe491; background: rgba(255,190,74,.19); }.streak-card div { display: grid; gap: 3px; }.streak-card strong { font-size: 12px; }.streak-card small { color: #a9c2ce; font-size: 10px; }.streak-dots { display: flex; gap: 3px; margin-left: auto; }.streak-dots i { width: 5px; height: 5px; border-radius: 50%; background: #5d7788; }.streak-dots .done { background: #ffcc3b; }
.quiz-card { padding: 26px 30px 22px; border-radius: 18px; background: #fffefa; color: var(--ink); box-shadow: 0 22px 45px rgba(0,0,0,.2); }.quiz-top { display: flex; justify-content: space-between; color: #758c96; font-size: 10px; font-weight: 700; letter-spacing: .9px; }.quiz-progress { height: 4px; margin: 13px 0 33px; border-radius: 3px; background: #e0ebe7; }.quiz-progress i { display: block; width: 100%; height: 100%; border-radius: 3px; background: #5eb7a8; }.quiz-prompt { max-width: 510px; margin-bottom: 20px; font-family: Fraunces, Georgia, serif; font-size: 23px; line-height: 1.22; letter-spacing: -.6px; }.answer-list { display: grid; gap: 9px; }.answer { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px; border: 1px solid #d7e2df; border-radius: 11px; background: #fff; color: #4d6570; text-align: left; cursor: pointer; transition: .2s; }.answer:hover { border-color: #77bdb2; background: #f3fbf8; }.answer b { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #d0ddda; border-radius: 7px; color: #80959d; font-size: 11px; }.answer.is-selected { border-color: var(--teal); color: var(--ink); background: #e9f7f3; }.answer.is-selected b { border-color: var(--teal); color: #fff; background: var(--teal); }.answer.is-correct { border-color: #53a675; background: #e8f7e9; }.answer.is-wrong { border-color: #e89a84; background: #fff0eb; }.quiz-feedback { min-height: 19px; margin: 13px 0 2px; color: #64808b; font-size: 12px; }.quiz-feedback.success { color: #34845b; font-weight: 600; }.quiz-feedback.error { color: #c6644e; font-weight: 600; }.quiz-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 14px; border-top: 1px solid #e2ece9; color: #82949a; font-size: 10px; }.quiz-bottom button { border: 0; border-radius: 8px; padding: 10px 13px; color: #fff; background: var(--teal); font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity .2s, transform .15s; }.quiz-bottom button:disabled { cursor: default; opacity: .35; }

.watch-section { padding: 104px 0; }.watch-heading { align-items: center; }.button-quiet { padding: 12px 17px; border: 1px solid #bfd3cf; color: var(--deep-teal); font-size: 13px; }.feature-video { display: grid; grid-template-columns: .93fr 1.07fr; min-height: 319px; margin-top: 37px; border-radius: 20px; overflow: hidden; background: #e6efeb; }.video-copy { padding: 43px 44px; }.pill { display: inline-block; margin-bottom: 18px; padding: 7px 10px; border-radius: 999px; color: var(--deep-teal); background: #c8e6df; font-size: 9px; font-weight: 700; letter-spacing: .8px; }.video-copy h3 { max-width: 350px; margin-bottom: 13px; font-family: Fraunces, Georgia, serif; font-size: 29px; line-height: 1.08; }.video-copy p { max-width: 380px; color: #607b81; font-size: 13px; line-height: 1.55; }.watch-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--deep-teal); font-size: 13px; font-weight: 700; }.watch-link span { display: grid; place-items: center; width: 28px; height: 28px; padding-left: 2px; border-radius: 50%; color: #fff; background: var(--deep-teal); font-size: 9px; }.feature-thumb { position: relative; display: block; min-height: 319px; overflow: hidden; background: #d0d8d7; }.feature-thumb::after, .video-thumb::after, .short-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2,27,32,.05), rgba(3,34,40,.3)); }.feature-thumb img, .video-thumb img, .short-card img { width: 100%; height: 100%; object-fit: cover; display: block; }.big-play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 60px; height: 60px; padding-left: 4px; border-radius: 50%; color: var(--ink); background: #fff; transform: translate(-50%, -50%); font-size: 17px; transition: transform .2s; }.feature-thumb:hover .big-play { transform: translate(-50%,-50%) scale(1.08); }.duration, .video-thumb span { position: absolute; z-index: 2; right: 11px; bottom: 11px; padding: 4px 6px; border-radius: 5px; color: #fff; background: rgba(8,21,24,.75); font-size: 10px; font-weight: 700; }.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; margin-top: 29px; }.video-thumb { position: relative; display: block; aspect-ratio: 1.63; overflow: hidden; border-radius: 12px; background: #d5dedd; }.video-card .card-label { margin: 16px 0 7px; color: #71918d; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; }.video-card h3 { margin-bottom: 10px; font-size: 19px; line-height: 1.18; }.video-card > a:not(.video-thumb) { color: var(--teal); font-size: 12px; font-weight: 700; }.video-card > a span { margin-left: 5px; }

.shorts-section { padding: 89px 0 85px; background: #f6e9de; }.shorts-heading { align-items: end; }.shorts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; margin-top: 39px; }.short-card { position: relative; aspect-ratio: .58; min-height: 290px; overflow: hidden; border-radius: 15px; background: #b5c5c0; isolation: isolate; transition: transform .25s, box-shadow .25s; }.short-card:hover { z-index: 1; box-shadow: 0 20px 28px rgba(56,62,57,.2); transform: translateY(-6px); }.short-card::after { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(3,18,18,.73)); }.short-play { position: absolute; z-index: 2; top: 15px; right: 15px; display: grid; place-items: center; width: 28px; height: 28px; padding-left: 2px; border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.9); font-size: 9px; }.short-tag, .short-title { position: absolute; z-index: 2; right: 15px; left: 15px; }.short-tag { bottom: 47px; color: #d3f3eb; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; }.short-title { bottom: 16px; color: #fff; font-family: Fraunces, Georgia, serif; font-size: 17px; line-height: 1.03; }.all-shorts { display: table; margin: 30px auto 0; padding-bottom: 3px; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 700; }.all-shorts span { margin-left: 5px; color: var(--coral); }

.connect-section { display: grid; grid-template-columns: .82fr 1.18fr; gap: 90px; padding: 103px 0; }.connect-copy h2 { max-width: 420px; margin-bottom: 18px; font-size: clamp(38px, 4.3vw, 56px); line-height: 1.02; }.connect-copy > p:last-child { max-width: 410px; color: var(--muted); font-size: 14px; line-height: 1.62; }.connect-links { display: grid; align-content: center; }.connect-links a { display: flex; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid #dbe3df; transition: padding .2s; }.connect-links a:hover { padding-left: 7px; }.social-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; font-size: 20px; }.instagram { color: #a35a83; background: #f6e5ee; }.youtube { padding-left: 2px; color: #e65245; background: #fce4df; font-size: 13px; }.mail { color: #2e888b; background: #e2f1ef; font-size: 16px; }.connect-links a > span:nth-child(2) { display: grid; gap: 3px; }.connect-links small { color: #84949b; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; }.connect-links strong { overflow-wrap: anywhere; font-size: 14px; }.connect-links b { margin-left: auto; color: var(--coral); font-size: 18px; font-weight: 500; }.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 24px 0 28px; border-top: 1px solid #dce5e2; color: #78909a; font-size: 11px; }.site-footer .brand { color: var(--ink); font-size: 15px; }.site-footer .brand-mark { transform: scale(.8); transform-origin: left center; margin-right: -4px; }.site-footer p { margin: 0; }

@media (max-width: 850px) {
  .site-header { position: relative; height: 70px; gap: 14px; }.site-nav { position: absolute; z-index: 10; top: 69px; right: 0; left: 0; display: none; padding: 19px 24px; border-bottom: 1px solid var(--line); background: var(--cream); box-shadow: 0 16px 25px rgba(20,40,48,.1); }.site-nav.is-open { display: grid; gap: 19px; }.site-nav .is-active::after { display: none; }.header-cta { display: none; }.menu-toggle { display: grid; width: 38px; gap: 4px; margin-left: auto; padding: 9px; border: 0; border-radius: 8px; background: #e8f4f1; cursor: pointer; }.menu-toggle span:not(.sr-only) { height: 2px; background: var(--deep-teal); }.hero { grid-template-columns: 1fr; gap: 24px; padding-top: 62px; }.hero-copy { text-align: center; }.hero-copy .eyebrow, .hero-actions, .trust-row { justify-content: center; }.hero-text { margin-inline: auto; }.hero-visual { min-height: 420px; }.path-grid, .shorts-grid { grid-template-columns: repeat(2, 1fr); }.practice-shell, .connect-section { grid-template-columns: 1fr; gap: 45px; }.practice-intro { text-align: center; }.practice-intro > p:not(.eyebrow), .streak-card { margin-inline: auto; }.practice-intro .eyebrow { justify-content: center; }.feature-video { grid-template-columns: 1fr; }.feature-thumb { min-height: 250px; }.video-grid { gap: 15px; }.connect-copy { text-align: center; }.connect-copy > p:last-child { margin-inline: auto; }
}
@media (max-width: 570px) {
  .section-shell, .site-header { width: min(100% - 32px, 1160px); }.hero { min-height: auto; padding-bottom: 54px; }.hero-actions { flex-direction: column; gap: 18px; }.hero-visual { min-height: 365px; transform: scale(.9); transform-origin: center; margin: -16px 0; }.orb-coral { width: 330px; height: 330px; }.lesson-window { max-width: 350px; padding: 16px 19px; }.lesson-window h2 { font-size: 26px; }.floating-note { font-size: 10px; }.note-one { left: -8px; }.note-two { right: -11px; }.section-heading { display: block; }.split-heading > p, .shorts-heading > p { max-width: 400px; margin: 18px 0 0; }.path-section, .watch-section, .connect-section { padding: 65px 0; }.path-grid { grid-template-columns: 1fr; }.path-card { min-height: 235px; }.path-card h3 { margin-top: 37px; }.practice-section { padding: 64px 0; }.quiz-card { padding: 21px 17px 17px; }.quiz-prompt { font-size: 21px; }.quiz-bottom { align-items: end; }.quiz-bottom span { max-width: 130px; }.watch-heading .button-quiet { display: table; margin-top: 20px; }.video-copy { padding: 30px 24px; }.video-grid { grid-template-columns: 1fr; gap: 32px; }.video-card h3 { font-size: 22px; }.shorts-section { padding: 65px 0; }.shorts-grid { gap: 12px; }.short-card { min-height: 245px; border-radius: 12px; }.short-title { font-size: 15px; }.short-tag { font-size: 7px; }.connect-links strong { font-size: 12px; }.site-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}