.support-page { --sp-teal:#087f83; --sp-orange:#d94c22; --sp-ink:#26354a; padding:0 0 76px; color:var(--sp-ink); background:#fff; font-family:"Pretendard", "Noto Sans KR", sans-serif; line-height:1.65; }
.support-page *, .support-page *::before, .support-page *::after { box-sizing:border-box; }
.support-page [hidden] { display:none !important; }
.support-page h1, .support-page h2, .support-page h3, .support-page p, .support-page figure { margin:0; }
.support-page a { color:inherit; text-decoration:none; }
.support-page button, .support-page audio { font:inherit; }
.support-page a:focus-visible, .support-page button:focus-visible, .support-page audio:focus-visible { outline:3px solid var(--sp-teal); outline-offset:4px; }
.support-page .sp-shell { width:100%; max-width:1230px; margin:0 auto; padding:0 24px; }
.support-page .sp-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:25px 0; color:#6c7580; font-size:13px; }
.support-page .sp-breadcrumb a:hover { color:var(--sp-teal); }
.support-page .sp-eyebrow { color:var(--sp-teal); font-family:"Outfit", "Pretendard", sans-serif; font-size:12px; font-weight:600; letter-spacing:1px; }
.support-page .sp-hero { position:relative; display:flex; align-items:center; min-height:405px; overflow:hidden; padding:46px 54px; border-radius:12px 12px 76px 12px; background:#eef6f3; }
.support-page .sp-hero-copy { position:relative; z-index:2; width:62%; }
.support-page .sp-hero h1 { margin-top:13px; color:#000; font-size:clamp(28px, 3.2vw, 39px); font-weight:700; line-height:1.35; letter-spacing:-1.3px; word-break:keep-all; }
.support-page .sp-hero-description { margin-top:21px; color:#53616c; font-size:18px; line-height:1.85; word-break:keep-all; }
.support-page .sp-hero .sp-button { margin-top:25px; border-color:var(--sp-orange); background:var(--sp-orange); }
.support-page .sp-hero .sp-button:hover { border-color:#b63d19; background:#b63d19; }
.support-page .sp-hero-art { position:absolute; top:0; right:30px; bottom:0; width:36%; }
.support-page .sp-art-circle { position:absolute; top:50%; left:50%; width:300px; height:300px; border-radius:50%; background:#d0e6d8; transform:translate(-50%, -50%); }
.support-page .sp-hero-art img { position:absolute; z-index:1; top:46%; left:50%; width:80%; max-width:280px; height:auto; max-height:300px; object-fit:contain; transform:translate(-50%, -50%); }
.support-page .sp-art-caption { position:absolute; z-index:2; bottom:20px; left:50%; padding:7px 18px; border-radius:30px; color:#fff; background:var(--sp-teal); font-family:"Outfit", sans-serif; font-size:17px; white-space:nowrap; transform:translateX(-50%) rotate(-7deg); }
.support-page .sp-button { display:inline-flex; float:none; align-items:center; justify-content:center; gap:20px; min-height:44px; padding:11px 20px; border:1px solid var(--sp-teal); border-radius:6px; color:#fff; background:var(--sp-teal); font-size:14px; font-weight:600; line-height:1.4; }
.support-page .sp-button:hover { color:#fff; background:#066366; }
.support-page .sp-button span { font-size:19px; }
.support-page .sp-secondary { color:var(--sp-teal); background:#fff; }
.support-page .sp-secondary:hover { color:var(--sp-teal); background:#e8f5f0; }
.support-page .sp-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; padding-bottom:24px; border-bottom:1px solid #e1e8e5; }
.support-page .sp-nav a { display:flex; flex:1 1 auto; align-items:center; justify-content:center; min-height:48px; padding:10px 16px; border:1px solid #e0e8e5; border-radius:6px; color:#54656b; background:#fff; font-size:15px; font-weight:600; white-space:nowrap; }
.support-page .sp-nav a:hover { border-color:var(--sp-teal); color:var(--sp-teal); background:#f4faf8; }
.support-page .sp-nav a[aria-current="page"] { border-color:var(--sp-teal); color:#fff; background:var(--sp-teal); }
.support-page .sp-library { padding-top:42px; scroll-margin-top:24px; }
.support-page .sp-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:25px; }
.support-page .sp-heading h2 { margin-top:8px; color:#111; font-size:30px; font-weight:700; line-height:1.45; letter-spacing:-.9px; word-break:keep-all; }
.support-page .sp-heading > p { flex-shrink:0; color:#6c7580; font-size:14px; text-align:right; }
.support-page .sp-card-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.support-page .sp-resource-card { display:flex; position:relative; flex-direction:column; min-width:0; min-height:280px; padding:28px; border:1px solid #e2e9e6; border-radius:12px; background:#f7faf8; transition:border-color .2s, transform .2s; }
.support-page .sp-resource-card:hover { border-color:#8eb4a8; transform:translateY(-3px); }
.support-page .sp-card-number { display:block; margin-bottom:18px; color:#b3ccc1; font-family:"Outfit", sans-serif; font-size:34px; font-weight:500; line-height:1; }
.support-page .sp-resource-card h3 { margin-top:9px; color:#111; font-size:21px; font-weight:700; line-height:1.5; letter-spacing:-.7px; word-break:keep-all; }
.support-page .sp-resource-card > p:not(.sp-eyebrow) { flex:1; margin:12px 0 23px; color:#617078; font-size:14px; word-break:keep-all; }
.support-page .sp-card-videos, .support-page .sp-card-overview { background:#fff5eb; }
.support-page .sp-card-digital, .support-page .sp-card-materials { background:#f4f1f8; }
.support-page .sp-card-action { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; color:var(--sp-teal); font-size:14px; font-weight:600; }
.support-page .sp-card-action > span { font-size:20px; }
.support-page .sp-reading-flow { display:grid; grid-template-columns:1fr 3fr; gap:30px; margin-bottom:40px; padding:30px 0; border-top:1px solid #e4eae7; border-bottom:1px solid #e4eae7; }
.support-page .sp-reading-flow h2 { margin-top:10px; color:#111; font-size:24px; letter-spacing:-.8px; }
.support-page .sp-reading-flow ol { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.support-page .sp-reading-flow li > span { color:var(--sp-orange); font-family:"Outfit", sans-serif; font-size:22px; }
.support-page .sp-reading-flow h3 { margin:5px 0 8px; font-size:17px; font-weight:700; }
.support-page .sp-reading-flow li p { color:#617078; font-size:14px; }
.support-page .sp-series-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; }
.support-page .sp-series-card { display:flex; min-width:0; overflow:hidden; flex-direction:column; border:1px solid #e2e9e6; border-radius:12px; background:#fff; transition:border-color .2s; }
.support-page .sp-series-card:hover { border-color:var(--sp-teal); }
.support-page .sp-series-art { display:flex; align-items:center; justify-content:center; height:205px; overflow:hidden; padding:16px 26px; background:#f3f7f4; }
.support-page .sp-series-art .sp-figure { width:100%; max-width:255px; margin:0; }
.support-page .sp-series-art .sp-frame { max-height:160px; }
.support-page .sp-series-art figcaption { display:none; }
.support-page .sp-series-body { display:flex; flex:1; flex-direction:column; padding:23px; }
.support-page .sp-series-body h3 { margin:7px 0 10px; color:#111; font-family:"Outfit", "Pretendard", sans-serif; font-size:23px; font-weight:600; line-height:1.35; }
.support-page .sp-series-body > p:not(.sp-eyebrow) { flex:1; margin-bottom:23px; color:#617078; font-size:14px; word-break:keep-all; }
.support-page .sp-guide-heading { margin-bottom:30px; }
.support-page .sp-guide-heading h1 { margin:10px 0 15px; color:#000; font-family:"Outfit", "Pretendard", sans-serif; font-size:38px; font-weight:600; line-height:1.3; letter-spacing:-.8px; overflow-wrap:anywhere; }
.support-page .sp-guide-heading > p:last-child { max-width:800px; color:#617078; font-size:16px; word-break:keep-all; }
.support-page .sp-guide-layout { display:grid; grid-template-columns:235px minmax(0, 1fr); gap:38px; align-items:start; }
.support-page .sp-topic-nav { position:sticky; z-index:20; top:100px; display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 124px); max-height:calc(100dvh - 124px); overflow-y:auto; background:#fff; scrollbar-width:thin; }
.support-page .sp-topic-nav a { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:15px; padding:13px 15px; border:1px solid #e3eae6; border-radius:6px; color:#5c6c72; font-size:14px; line-height:1.55; }
.support-page .sp-topic-nav a:hover { border-color:var(--sp-teal); color:var(--sp-teal); }
.support-page .sp-topic-nav a[aria-current="page"] { border-color:var(--sp-teal); color:#fff; background:var(--sp-teal); font-weight:600; }
.support-page .sp-topic-nav a span { flex-shrink:0; }
.support-page .sp-guide-content { min-width:0; }
.support-page .sp-reading-section { padding:28px; border:1px solid #e3eae6; border-radius:12px; background:#fff; scroll-margin-top:124px; }
.support-page .sp-reading-section h2, .support-page .sp-sounds-section > h2 { color:#111; font-size:25px; font-weight:700; line-height:1.45; letter-spacing:-.7px; word-break:keep-all; }
.support-page .sp-reading-lead { margin:15px 0 22px; color:#5a6b73; font-size:16px; line-height:1.9; word-break:keep-all; }
.support-page .sp-points { margin:20px 0 0; padding-left:20px; color:#40535b; font-size:15px; line-height:1.9; }
.support-page .sp-points li { margin-bottom:9px; padding-left:4px; word-break:keep-all; }
.support-page .sp-points li::marker { color:var(--sp-teal); }
.support-page .sp-reading-section > .sp-button { margin-top:20px; }
.support-page .sp-figure { width:100%; max-width:733px; margin:25px auto; }
.support-page .sp-frame { position:relative; width:100%; height:0; overflow:hidden; background:#fff; }
.support-page .sp-frame img { position:absolute; display:block; float:none; max-width:none; height:auto; margin:0; border:0; }
.support-page .sp-image-mask { position:absolute; display:block; background:#fff; pointer-events:none; }
.support-page .sp-illustrations { width:100%; max-width:733px; margin:24px auto; }
.support-page .sp-illustrations .sp-figure { margin:0 auto 30px; }
.support-page .sp-illustrations .sp-figure:last-child { margin-bottom:0; }
.support-page .sp-illustrations-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
.support-page .sp-illustrations-grid .sp-figure { min-width:0; margin:0; }
.support-page .sp-illustrations-tools { max-width:733px; margin:20px auto 0; text-align:right; }
.support-page .sp-illustrations-joined { margin-top:12px; }
.support-page .sp-illustrations-joined .sp-figure { margin:0; }
.support-page .sp-figure figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; color:#6c7b80; font-size:12px; line-height:1.6; }
.support-page .sp-zoom { display:inline-flex; float:none; align-items:center; gap:8px; margin:0; padding:4px 0; border:0; color:var(--sp-teal); background:none; font-size:12px; cursor:pointer; }
.support-page .sp-guide-paging { display:flex; justify-content:space-between; gap:20px; margin-top:24px; }
.support-page .sp-guide-paging a { display:flex; flex:1; flex-direction:column; gap:5px; max-width:50%; padding:15px 0; color:var(--sp-teal); font-size:14px; }
.support-page .sp-guide-paging a:last-child { text-align:right; }
.support-page .sp-guide-paging small { color:#7c888c; font-size:12px; }
.support-page .sp-note { margin:0 0 25px; padding:16px 20px; border-radius:8px; color:#5d6f72; background:#f3f7f4; font-size:14px; line-height:1.8; }
.support-page .sp-sample-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:24px; }
.support-page .sp-sample-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid #e1e8e5; border-radius:9px; }
.support-page .sp-sample-card > .sp-sample-image { display:block; float:none; width:100%; max-width:100%; height:auto; margin:0; padding:12px; border:0; box-sizing:border-box; background:#fff; }
.support-page .sp-sample-card > div { display:flex; flex:1; flex-direction:column; gap:16px; padding:18px; }
.support-page .sp-sample-card h3 { flex:1; color:#23374b; font-size:16px; font-weight:600; line-height:1.6; }
.support-page .sp-listen { display:inline-flex; float:none; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:9px 12px; border:1px solid #c7ddd4; border-radius:6px; color:var(--sp-teal); background:#fff; font-size:13px; font-weight:600; line-height:1.45; cursor:pointer; }
.support-page .sp-listen:hover, .support-page .sp-listen.is-playing { border-color:var(--sp-teal); color:#fff; background:var(--sp-teal); }
.support-page .sp-listen svg { flex-shrink:0; }
.support-page .sp-video-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:25px; }
.support-page .sp-video-card { min-width:0; overflow:hidden; border:1px solid #e1e8e5; border-radius:12px; background:#fff; }
.support-page .sp-video-thumb { display:block; position:relative; padding:22px 75px; overflow:hidden; background:#edf4f0; }
.support-page .sp-video-thumb .sp-figure { max-width:320px; margin:0 auto; }
.support-page .sp-video-thumb figcaption { display:none; }
.support-page .sp-play-icon { position:absolute; top:50%; left:50%; display:flex; align-items:center; justify-content:center; width:52px; height:52px; padding-left:3px; border-radius:50%; color:#fff; background:rgba(8,127,131,.92); font-size:19px; transform:translate(-50%, -50%); }
.support-page .sp-video-thumb:hover .sp-play-icon { background:#d94c22; }
.support-page .sp-video-body { padding:23px 26px; }
.support-page .sp-video-body h3 { margin:8px 0; color:#111; font-family:"Outfit", "Pretendard", sans-serif; font-size:24px; font-weight:600; line-height:1.4; }
.support-page .sp-video-body > p:not(.sp-eyebrow) { color:#617078; font-size:15px; }
.support-page .sp-text-link { display:inline-flex; align-items:center; gap:24px; margin-top:18px; color:var(--sp-teal); font-size:14px; font-weight:600; }
.support-page .sp-sound-nav { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.support-page .sp-sound-nav a { display:inline-flex; align-items:center; gap:13px; padding:12px 18px; border:1px solid #d5e4dc; border-radius:6px; color:var(--sp-teal); background:#f5faf7; font-size:14px; }
.support-page .sp-sound-nav strong { font-family:"Outfit", sans-serif; font-size:18px; }
.support-page .sp-sounds-section { margin-top:35px; scroll-margin-top:24px; }
.support-page .sp-sound-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-top:20px; }
.support-page .sp-sound-card { display:flex; min-width:0; flex-direction:column; padding:20px; border:1px solid #dfe9e3; border-radius:10px; background:#f8fbf9; }
.support-page .sp-sound-card h3 { color:#263f49; font-family:"Outfit", "Pretendard", sans-serif; font-size:29px; font-weight:600; line-height:1.3; }
.support-page .sp-graphemes { margin-top:12px; color:#617078; font-family:"Outfit", "Pretendard", sans-serif; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.support-page .sp-word-examples { flex:1; margin:10px 0 18px; color:#435c54; font-family:"Outfit", sans-serif; font-size:15px; line-height:1.65; overflow-wrap:anywhere; }
.support-page .sp-sound-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:8px; }
.support-page .sp-sound-actions > a { flex:1 1 auto; padding:9px 7px; font-size:12px; }
.support-page .sp-blend-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:20px; }
.support-page .sp-blend-grid .sp-sound-actions { margin-top:14px; }
.support-page .sp-overview-list { display:grid; grid-template-columns:1fr; gap:25px; max-width:920px; margin:0 auto; }
.support-page .sp-bottom-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:144px; margin-top:48px; padding:24px 28px; border-radius:9px; background:#eef6f3; }
.support-page .sp-bottom-banner > div { flex:1; min-width:0; }
.support-page .sp-bottom-banner h2 { color:#000; font-size:22px; font-weight:700; line-height:1.45; letter-spacing:-.5px; word-break:keep-all; }
.support-page .sp-bottom-banner p { margin-top:6px; color:#61757d; font-size:14px; line-height:1.7; }
.support-page .sp-bottom-banner > a { flex:0 0 auto; width:230px; max-width:100%; gap:12px; }
.support-page .sp-assessment-banner { margin-top:24px; background:#fff3e7; }
.support-page .sp-player { position:fixed; z-index:90; right:24px; bottom:96px; width:410px; max-width:calc(100% - 48px); padding:15px 18px; border:1px solid #bed6c9; border-radius:12px; color:#263f49; background:#fff; box-shadow:0 5px 30px rgba(25,57,43,.18); }
.support-page .sp-player-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.support-page .sp-player-heading p { min-width:0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.support-page .sp-player-heading button, .support-page .sp-dialog-heading button { display:flex; float:none; flex:0 0 auto; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid #d8e4dd; border-radius:50%; color:#405b50; background:#fff; font-size:25px; line-height:1; cursor:pointer; }
.support-page .sp-player audio { display:block; width:100%; height:40px; }
.support-page .sp-audio-status { margin-top:8px; color:#697b73; font-size:12px; }
.support-page .sp-dialog { width:900px; max-width:calc(100% - 40px); max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); margin:auto; padding:0; overflow:auto; border:0; border-radius:12px; color:var(--sp-ink); background:#fff; box-shadow:0 12px 60px rgba(0,0,0,.2); }
.support-page .sp-dialog::backdrop { background:rgba(20,35,30,.65); }
.support-page .sp-dialog-heading { position:sticky; z-index:2; top:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; border-bottom:1px solid #e1e9e4; background:#fff; }
.support-page .sp-dialog-heading h2 { color:#111; font-size:18px; font-weight:600; line-height:1.5; }
.support-page .sp-dialog-body { max-height:calc(100dvh - 125px); padding:20px; overflow:auto; }
.support-page .sp-dialog-body .sp-figure { width:var(--sp-figure-width, 733px); min-width:100%; max-width:none; margin:0; }
.support-page .sp-dialog-body .sp-illustrations-joined { width:733px; min-width:100%; max-width:none; margin:0; }
.support-page .sp-video-player { position:relative; width:100%; padding-top:56.25%; background:#142e27; }
.support-page .sp-video-player iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.support-page .sp-video-fallback { margin-top:14px; color:var(--sp-teal); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.support-page .sp-dialog.sp-naver-dialog { width:800px; }
.support-page .sp-naver-dialog .sp-dialog-body { padding:0 0 16px; }
.support-page .sp-naver-dialog .sp-video-fallback { display:block; margin:14px 16px 0; }
@media (max-width:1100px) {
	.support-page .sp-hero { padding:40px; }
	.support-page .sp-hero h1 { font-size:clamp(26px, 3.2vw, 35px); }
	.support-page .sp-hero-art { right:16px; }
	.support-page .sp-art-circle { width:260px; height:260px; }
	.support-page .sp-card-grid, .support-page .sp-series-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.support-page .sp-sound-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
	.support-page .sp-guide-layout { grid-template-columns:210px minmax(0, 1fr); gap:25px; }
	.support-page .sp-reading-flow { grid-template-columns:1fr; }
}
@media (max-width:991px) {
	.support-page .sp-topic-nav { position:static; top:auto; max-height:none; }
	.support-page .sp-player { bottom:calc(156px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:700px) {
	.support-page { padding-bottom:48px; }
	.support-page .sp-shell { padding:0 16px; }
	.support-page .sp-breadcrumb { gap:8px; padding:18px 0; font-size:12px; }
	.support-page .sp-hero { display:block; min-height:0; padding:30px 20px 255px; border-radius:10px 10px 50px 10px; }
	.support-page .sp-hero-copy { width:100%; }
	.support-page .sp-hero .sp-eyebrow { font-size:10px; letter-spacing:.4px; }
	.support-page .sp-hero h1 { font-size:clamp(22px, 5.6vw, 30px); letter-spacing:-.9px; }
	.support-page .sp-hero-description { margin-top:16px; font-size:16px; }
	.support-page .sp-hero-description br:not(.sp-copy-break) { display:none; }
	.support-page .sp-hero .sp-button { margin-top:20px; }
	.support-page .sp-hero-art { top:auto; right:50%; bottom:8px; width:280px; max-width:calc(100% - 32px); height:230px; transform:translateX(50%); }
	.support-page .sp-art-circle { width:210px; height:210px; }
	.support-page .sp-hero-art img { top:42%; width:200px; max-height:210px; }
	.support-page .sp-art-caption { bottom:7px; padding:6px 16px; font-size:15px; }
	.support-page .sp-nav { flex-wrap:nowrap; gap:7px; margin-top:22px; padding:3px 3px 20px; overflow-x:auto; }
	.support-page .sp-nav a { flex:0 0 auto; min-height:44px; padding:10px 14px; font-size:13px; }
	.support-page .sp-library { padding-top:30px; }
	.support-page .sp-heading { display:block; margin-bottom:20px; }
	.support-page .sp-heading h2 { font-size:24px; letter-spacing:-.7px; }
	.support-page .sp-heading > p { margin-top:12px; font-size:13px; text-align:left; }
	.support-page .sp-heading > p br { display:none; }
	.support-page .sp-card-grid { grid-template-columns:1fr; gap:14px; }
	.support-page .sp-resource-card { min-height:0; padding:24px; }
	.support-page .sp-card-number { margin-bottom:13px; font-size:28px; }
	.support-page .sp-resource-card h3 { font-size:21px; }
	.support-page .sp-resource-card > p:not(.sp-eyebrow) { font-size:14px; }
	.support-page .sp-reading-flow { gap:22px; margin-bottom:30px; padding:26px 0; }
	.support-page .sp-reading-flow ol { grid-template-columns:1fr; gap:20px; }
	.support-page .sp-reading-flow li { position:relative; padding-left:44px; }
	.support-page .sp-reading-flow li > span { position:absolute; top:2px; left:0; }
	.support-page .sp-reading-flow li p br { display:none; }
	.support-page .sp-series-grid { grid-template-columns:1fr; gap:18px; }
	.support-page .sp-series-art { height:190px; }
	.support-page .sp-series-body { padding:21px; }
	.support-page .sp-guide-heading h1 { font-size:29px; }
	.support-page .sp-guide-heading > p:last-child { font-size:14px; }
	.support-page .sp-guide-layout { display:block; }
	.support-page .sp-guide-content { margin-top:20px; }
	.support-page .sp-topic-nav { flex-direction:row; gap:7px; overflow-x:auto; overflow-y:hidden; padding:8px 3px; border-bottom:1px solid #e3eae6; }
	.support-page .sp-topic-nav a { flex:0 0 auto; padding:10px 13px; font-size:13px; white-space:nowrap; }
	.support-page .sp-topic-nav a span { display:none; }
	.support-page .sp-reading-section { padding:22px 18px; scroll-margin-top:124px; }
	.support-page .sp-illustrations-grid { grid-template-columns:1fr; gap:24px; }
	.support-page .sp-reading-section h2, .support-page .sp-sounds-section > h2 { font-size:22px; }
	.support-page .sp-reading-lead { margin:13px 0 20px; font-size:14px; }
	.support-page .sp-points { padding-left:18px; font-size:14px; }
	.support-page .sp-guide-paging { gap:15px; }
	.support-page .sp-guide-paging a { font-size:12px; }
	.support-page .sp-note { padding:15px 17px; font-size:13px; }
	.support-page .sp-sample-grid { grid-template-columns:1fr; }
	.support-page .sp-video-grid { grid-template-columns:1fr; gap:20px; }
	.support-page .sp-video-thumb { padding:20px 58px; }
	.support-page .sp-video-body { padding:20px; }
	.support-page .sp-video-body h3 { font-size:22px; }
	.support-page .sp-sound-nav { gap:7px; }
	.support-page .sp-sound-nav a { flex:1 1 auto; justify-content:center; padding:10px 12px; font-size:12px; }
	.support-page .sp-sound-grid, .support-page .sp-blend-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
	.support-page .sp-sound-card { padding:16px 12px; }
	.support-page .sp-sound-card h3 { font-size:24px; }
	.support-page .sp-graphemes { font-size:12px; }
	.support-page .sp-word-examples { font-size:13px; }
	.support-page .sp-sound-actions { gap:6px; }
	.support-page .sp-sound-actions > a { width:100%; padding:10px 7px; }
	.support-page .sp-overview-list { grid-template-columns:1fr; gap:20px; }
	.support-page .sp-bottom-banner { flex-direction:column; align-items:stretch; gap:16px; min-height:0; margin-top:32px; padding:20px 18px; }
	.support-page .sp-bottom-banner h2 { font-size:20px; }
	.support-page .sp-bottom-banner p { font-size:13px; }
	.support-page .sp-bottom-banner > a { align-self:flex-end; font-size:13px; }
	.support-page .sp-assessment-banner { margin-top:20px; }
	.support-page .sp-player { right:12px; bottom:calc(156px + env(safe-area-inset-bottom, 0px)); width:calc(100% - 24px); max-width:none; padding:12px 15px; }
	.support-page .sp-dialog { max-width:calc(100% - 24px); max-height:calc(100dvh - 28px); border-radius:9px; }
	.support-page .sp-dialog-heading { padding:12px 15px; }
	.support-page .sp-dialog-heading h2 { font-size:15px; }
	.support-page .sp-dialog-body { padding:14px; }
}
@media (prefers-reduced-motion:reduce) {
	.support-page .sp-resource-card, .support-page .sp-series-card { transition:none; }
}