/* Public landing only. Existing review snapshots and service screens keep their styles. */
@font-face { font-family: "SpoqaHanSansNeoSubset"; src: url("../../fonts/SpoqaHanSansNeo_WOFF2_Subset/SpoqaHanSansNeo-Regular.6f876d098a68.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SpoqaHanSansNeoSubset"; src: url("../../fonts/SpoqaHanSansNeo_WOFF2_Subset/SpoqaHanSansNeo-Bold.d57ff6f22085.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
.wm-landing {
    --wl-ink: var(--wm-mode-text, #242238);
    --wl-muted: var(--wm-mode-muted, #696677);
    --wl-purple: var(--wm-mode-violet, #6c50bc);
    --wl-paper: var(--wm-mode-surface, #fff);
    --wl-soft: var(--wm-mode-violet-soft, #f3f0fa);
    --wl-line: var(--wm-mode-line, #e6e2ed);
    --wl-emphasis-gradient: linear-gradient(110deg, #48327f 3%, #9a70e2 45%, #5c3f9d 88%);
    --wl-cta-fill: radial-gradient(ellipse at 12% 0%, #ffffff1f, transparent 58%), linear-gradient(115deg, #7b5bca, #6947b5 55%, #51388e);
    --wl-cta-shadow: 0 10px 24px #60409826, 0 3px 7px #442b6e1c, inset 0 1px 0 #ffffff45;
    margin: 0; background: var(--wl-paper); color: var(--wl-ink);
    font-family: "SpoqaHanSansNeoSubset", "Apple SD Gothic Neo", sans-serif;
    font-size: 16px; line-height: 1.7; letter-spacing: -.035em; word-break: keep-all; overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}
.wm-landing *, .wm-landing *::before, .wm-landing *::after { box-sizing: border-box; }
.wm-landing main { overflow: clip; }
.wm-landing h1:not(:where(.wl-legacy-original *)), .wm-landing h2:not(:where(.wl-legacy-original *)), .wm-landing h3:not(:where(.wl-legacy-original *)), .wm-landing p:not(:where(.wl-legacy-original *)) { margin: 0; }
.wm-landing h1:not(:where(.wl-legacy-original *)), .wm-landing h2:not(:where(.wl-legacy-original *)), .wm-landing h3:not(:where(.wl-legacy-original *)) { font-weight: 700; }
.wm-landing h2:not(:where(.wl-legacy-original *)) { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.4; letter-spacing: -.055em; }
.wm-landing h3:not(:where(.wl-legacy-original *)) { font-size: 23px; line-height: 1.5; letter-spacing: -.045em; }
.wm-landing a:not(:where(.wl-legacy-original *)) { color: inherit; text-decoration: none; }
.wm-landing button:not(:where(.wl-legacy-original *)) { font: inherit; cursor: pointer; }
.wm-landing img { display: block; max-width: 100%; }
.wm-landing [hidden] { display: none !important; }
.wm-landing :focus-visible { outline: 3px solid var(--wl-purple); outline-offset: 5px; border-radius: 4px; }
.wm-landing section[id], #main-content { scroll-margin-top: 106px; }
.wm-landing #main-content:focus { outline: none; }
.wm-landing ::selection { background: #e4dcff; color: #332558; }
.wl-container { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.wl-section { padding-block: 104px; }
.wl-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--wl-purple); font-size: 13px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 17px !important; }
.wl-dot { width: 7px; height: 7px; border-radius: 50%; background: #9278d3; box-shadow: 0 0 0 5px #9278d312; }
.wl-skip { position: fixed; top: -100px; left: 20px; z-index: 10001; padding: 12px 20px; background: var(--wl-paper); border: 2px solid var(--wl-purple); border-radius: 8px; }
.wl-skip:focus { top: 12px; }
.wl-button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; min-height: 54px; padding: 14px 24px; border: 1px solid transparent; border-radius: 12px; font-size: 15px; font-weight: 700; line-height: 1.5; text-align: center; transition: background .18s, box-shadow .18s, transform .18s; }
.wm-landing .wl-button-primary { background: var(--wl-cta-fill); border-color: #7250b4; color: #fff; box-shadow: var(--wl-cta-shadow); }
.wm-landing .wl-button-primary:is(:hover, :focus-visible) { box-shadow: 0 14px 30px #60409838, 0 4px 9px #442b6e21, inset 0 1px 0 #ffffff55; transform: translateY(-2px); }
.wm-landing .wl-button-primary:active { box-shadow: 0 3px 9px #60409824, inset 0 1px 2px #36205d29; transform: translateY(0); }
.wl-hero .wl-button-primary, .wl-fit .wl-fit-cta { min-height: 60px; padding-block: 13px; border-radius: 18px; font-size: 17px; }
.wm-landing .wl-button-secondary { border-color: var(--wl-line); background: var(--wl-paper); color: var(--wl-purple); }
.wm-landing .wl-button-secondary:hover { border-color: var(--wl-purple); background: var(--wl-soft); }
.wl-button > span { font-size: 19px; }
.wm-landing .wl-trial-arrow { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid #ffffff38; border-radius: 50%; background: linear-gradient(145deg, #ffffff26, #ffffff08); box-shadow: inset 0 1px #ffffff21; transition: background .2s ease, border-color .2s ease; }
.wl-trial-arrow svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.wm-landing a:is(:hover, :focus-visible) > .wl-trial-arrow { background: #ffffff26; border-color: #ffffff66; }
.wm-landing a:is(:hover, :focus-visible) > .wl-trial-arrow svg { transform: translate(1px, -1px); }
.wm-landing .wl-button:disabled { background: var(--wm-mode-soft, #eeedf2); color: var(--wl-muted); box-shadow: none; cursor: not-allowed; transform: none; }
.wl-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--wl-ink); font-size: 14px; font-weight: 700; }
.wl-text-link:hover { color: var(--wl-purple); text-decoration: underline; text-underline-offset: 5px; }
.wl-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 30px; }

/* A calm, brand-led first screen, without scroll interception or reveal gates. */
.wl-hero { padding-top: 114px; background: radial-gradient(ellipse at 78% 28%, #eee7fa99, transparent 56%), linear-gradient(180deg, #faf8ff 0%, #fdfcff 68%, #fff 100%); }
.wl-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 28px; align-items: center; min-height: 535px; }
.wl-hero-copy { position: relative; z-index: 1; padding-block: 34px; }
.wm-landing h1:not(:where(.wl-legacy-original *)) { font-size: clamp(36px, 4.35vw, 58px); letter-spacing: -.065em; line-height: 1.3; }
.wl-hero h1 em { color: var(--wl-purple); font-style: normal; }
.wl-ocean { --wl-hero-frame-inset: -14px; --wl-hero-frame-border: 1px; --wl-hero-badge-edge: calc(var(--wl-hero-frame-inset) + var(--wl-hero-frame-border) / 2); position: relative; min-width: 0; height: auto; isolation: isolate; }
.wl-ocean::before { content: ""; position: absolute; inset: var(--wl-hero-frame-inset); z-index: 0; border: var(--wl-hero-frame-border) solid #8d7acb3d; border-radius: 34px; background: radial-gradient(ellipse at 52% 50%, #8c7bd20f 0%, transparent 63%); box-shadow: 0 26px 70px #30205216; pointer-events: none; }
.wl-ocean::after { content: ""; position: absolute; inset: -7px; z-index: 0; border: 1px solid #d7cff12e; border-radius: 29px; pointer-events: none; }
.wl-hero-product { position: relative; z-index: 1; display: block; width: 100%; margin: 0; overflow: hidden; border: 1px solid #7164b8b8; border-radius: 28px; background: #080d25; box-shadow: 0 28px 62px #3020522e, 0 0 0 5px #ffffffb8, 0 0 0 6px #8173c52b; }
.wl-hero-product::before { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid #ffffff30; border-radius: inherit; box-shadow: inset 0 0 0 1px #15103352, inset 0 0 30px #06071d24; pointer-events: none; }
.wl-hero-screen-stack { position: relative; display: block; width: 100%; height: auto; }
.wl-hero-product img { width: 100%; height: auto; }
.wl-hero-screen-layer--blank { position: absolute; inset: 0; opacity: 0; pointer-events: none; animation: wl-hero-screen-cycle 4s ease-in-out infinite; }
@keyframes wl-hero-screen-cycle {
    0%, 42% { opacity: 0; }
    50%, 92% { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .wl-hero-screen-layer--blank { animation: none; opacity: 0; }
}
.wl-hero-product-hint { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 12px; border: 1px solid #d9d2f04d; border-radius: 999px; background: #15142edb; color: #fff; font-size: 12px; line-height: 1.3; opacity: 0; transform: translateY(-4px); transition: opacity .18s, transform .18s, background .18s; }
.wl-hero-product:hover .wl-hero-product-hint, .wl-hero-product:focus-visible .wl-hero-product-hint { opacity: 1; transform: translateY(0); background: #4d397f; }
/* Badge centers follow the stroke center of the outermost frame. */
.wl-hero-motifs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wl-hero-motif { position: absolute; display: grid; place-items: center; color: #30245e; }
.wl-hero-motif-sigma, .wl-hero-motif-check { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 9px 18px 9px 10px; border: 1px solid #e0d7ed; border-radius: 999px; background: linear-gradient(130deg, #fffffffa, #f8f5fff5); box-shadow: 0 10px 26px #261b4c21, 0 2px 6px #261b4c0a, inset 0 1px #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.wl-hero-motif-sigma { top: var(--wl-hero-badge-edge); left: 22px; transform: translateY(-50%); }
.wl-hero-badge-copy { display: block; color: #423454; font: 700 14px/1.35 "SpoqaHanSansNeoSubset", "Apple SD Gothic Neo", sans-serif; letter-spacing: -.035em; white-space: nowrap; }
.wl-hero-badge-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid #e0d3f5; border-radius: 50%; background: linear-gradient(145deg, #faf6ff, #e9dffb); color: #855fc3; box-shadow: inset 0 1px #fff; }
.wl-hero-badge-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wl-hero-symbol { position: absolute; display: grid; place-items: center; pointer-events: none; }
.wl-hero-symbol-sigma { top: 20%; left: 25%; color: #9f8be1; font: 400 34px/1 Georgia, "Times New Roman", serif; opacity: .36; text-shadow: 0 0 18px #9c85ed8f; transform: rotate(-12deg); }
.wl-hero-motif-pi { top: 1%; right: 12%; color: #b29be9; font: 400 39px/1 Georgia, "Times New Roman", serif; opacity: .55; text-shadow: 0 0 18px #8f76e57a; transform: rotate(-6deg); }
.wl-hero-motif-check { right: 22px; bottom: var(--wl-hero-badge-edge); transform: translateY(50%); border-color: #dce9e3; background: linear-gradient(130deg, #fffffffa, #f4faf7f5); }
.wl-hero-motif-check .wl-hero-badge-icon { border-color: #cce6db; background: linear-gradient(140deg, #f0fcf6, #dcefe5); color: #4b9b7b; }
@media (min-width: 761px) and (max-width: 1050px) {
    .wl-hero-motif-sigma, .wl-hero-motif-check { gap: 8px; min-height: 46px; padding: 8px 14px 8px 8px; }
    .wl-hero-motif-sigma { left: 14px; }
    .wl-hero-motif-check { right: 14px; }
    .wl-hero-badge-icon { flex-basis: 28px; width: 28px; height: 28px; }
    .wl-hero-badge-icon svg { width: 19px; height: 19px; }
    .wl-hero-badge-copy { font-size: 12px; }
}

.wl-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.wl-section-heading > p { color: var(--wl-muted); font-size: 14px; line-height: 1.9; padding-bottom: 4px; }
.wl-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wl-feature { padding: 28px 25px 25px; border-radius: 20px; background: var(--wl-soft); overflow: hidden; }
.wl-feature-test { background: var(--wm-mode-blue-soft, #edf4f7); }
.wl-feature-review { background: var(--wm-mode-amber-soft, #f7f3ec); }
.wl-feature-top { display: flex; align-items: center; gap: 10px; color: var(--wl-muted); font-size: 12px; font-weight: 700; margin-bottom: 22px; }
.wl-step { display: grid; place-items: center; width: 25px; height: 25px; color: var(--wl-paper); background: var(--wl-purple); border-radius: 50%; font-size: 12px; letter-spacing: 0; }
.wl-feature-test .wl-step { background: #477a91; color: #fff; }
.wl-feature-review .wl-step { background: #9a7c49; color: #fff; }
.wl-feature > p { color: var(--wl-muted); margin-top: 13px; font-size: 14px; line-height: 1.85; min-height: 54px; }
.wl-concept-paper, .wl-test-paper, .wl-review-paper { background: var(--wl-paper); border: 1px solid var(--wl-line); border-radius: 12px; margin-top: 28px; height: 236px; padding: 18px; box-shadow: 0 4px 8px #26203803; }
.wl-paper-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--wl-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.wl-paper-label > span { font-size: 12px; font-weight: 400; letter-spacing: 0; }
.wl-triangle { width: 100%; height: 127px; margin-top: 3px; }
.wl-triangle text { font-family: Georgia, serif; font-size: 16px; font-style: italic; fill: #7357b4; }
.wm-landing .wl-equation { text-align: center; font-family: Georgia, serif; font-size: 23px; letter-spacing: 1px; line-height: 1.3; }
.wl-equation strong { color: var(--wl-purple); }
.wm-landing .wl-paper-note { color: var(--wl-muted); text-align: center; font-size: 12px; margin-top: 8px; }
.wl-test-paper > p { margin-top: 38px; font-size: 15px; line-height: 2.2; }
.wl-test-paper b { font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.wl-answer-box { display: inline-flex; align-items: center; justify-content: center; width: 41px; height: 35px; margin: 0 6px; border: 1px solid #a5c9b4; border-radius: 6px; background: var(--wm-mode-green-soft, #f0faf4); color: var(--wm-mode-green, #3a7859); font-weight: 700; }
.wl-example-answer { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--wl-line); padding-top: 15px; margin-top: 25px; color: var(--wm-mode-green, #3a7859); font-size: 12px; }
.wl-example-answer span { font-size: 15px; }
.wl-review-paper > div { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding: 10px 0; font-size: 12px; }
.wl-review-paper > div:nth-child(2) { margin-top: 22px; }
.wl-routine-icon { color: var(--wl-purple); font-size: 15px; }
.wl-routine-tag { margin-left: auto; color: var(--wl-muted); font-size: 12px; }
.wl-review-paper .wl-routine-active { margin-inline: -8px; margin-top: 5px; padding: 10px 8px; border-radius: 7px; background: var(--wl-soft); }

/* A full, uncropped product illustration bridges the guide and the live blank lesson. */
.wl-product-showcase { margin: 48px 0 0; scroll-margin-top: 110px; }
.wl-showcase-image { position: relative; display: block; overflow: hidden; border: 1px solid var(--wl-line); border-radius: 24px; background: #080d25; }
.wl-showcase-image img { width: 100%; height: auto; }
.wl-showcase-zoom { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid #d9d2f04d; border-radius: 999px; background: #15142edb; color: #fff; font-size: 12px; line-height: 1.4; }
.wl-showcase-image:hover .wl-showcase-zoom { background: #4d397f; }

@media (max-width: 760px) {
    .wl-hero-motifs { display: none; }
    .wl-product-showcase { margin-top: 32px; }
    .wl-showcase-image { border-radius: 17px; }
    .wl-showcase-zoom { top: 8px; right: 8px; min-height: 32px; padding: 6px 10px; font-size: 12px; }
}

/* The mini lesson works with native, keyboard-operable controls. */
.wl-preview-section { background: var(--wm-mode-green-soft, #eef5f2); padding-block: 88px; }
.wl-preview-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.wl-preview-copy > p:not(.wl-eyebrow) { margin-top: 24px; color: var(--wl-muted); font-size: 15px; line-height: 1.9; }
.wl-preview-benefits { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 27px; color: var(--wm-mode-green, #377a5d); font-size: 12px; font-weight: 700; }
.wl-preview-copy .wl-preview-disclaimer { font-size: 12px !important; line-height: 1.8 !important; margin-top: 32px !important; }
.wl-demo { padding: 28px 30px; border: 1px solid var(--wm-mode-line, #dfe7e1); border-radius: 20px; background: var(--wl-paper); box-shadow: 0 16px 45px #23362a08; min-height: 458px; }
.wl-demo-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--wl-muted); }
.wl-demo-brand { display: flex; align-items: center; gap: 8px; color: var(--wl-ink); font-size: 14px; font-weight: 700; }
.wl-demo-brand img { height: 24px; }
.wl-demo progress { display: block; width: 100%; height: 5px; border: none; border-radius: 10px; margin-block: 18px 25px; background: var(--wl-soft); color: #8b74c8; overflow: hidden; }
.wl-demo progress::-webkit-progress-bar { background: var(--wl-soft); }
.wl-demo progress::-webkit-progress-value { background: #8b74c8; border-radius: 10px; }
.wl-demo progress::-moz-progress-bar { background: #8b74c8; }
.wl-demo-topic { font-size: 12px; color: var(--wl-purple); margin-bottom: 10px !important; }
.wl-demo h3 { font-size: 19px; line-height: 1.6; min-height: 31px; scroll-margin-top: 110px; }
.wl-demo-options { display: grid; gap: 9px; margin-top: 21px; }
.wm-demo-option { display: block; width: 100%; padding: 13px 15px; min-height: 46px; border: 1px solid var(--wl-line); border-radius: 9px; background: var(--wl-paper); color: var(--wl-ink); font-size: 13px !important; line-height: 1.7; text-align: left; word-break: keep-all; overflow-wrap: anywhere; }
.wm-demo-option:hover:not(:disabled) { background: var(--wl-soft); border-color: var(--wl-purple); }
.wm-demo-option:disabled { cursor: default; opacity: 1; }
.wm-demo-option.is-correct { border-color: var(--wm-mode-green, #448767); background: var(--wm-mode-green-soft, #f0f8f3); color: var(--wm-mode-green, #286045); }
.wl-demo[data-state="incorrect"] .wm-demo-option.is-selected { border-color: var(--wm-mode-red, #b97662); background: var(--wm-mode-red-soft, #fff5ed); color: var(--wm-mode-red, #945a31); }
.wl-demo-feedback { font-size: 12px; line-height: 1.85; margin-top: 16px; color: var(--wl-muted); }
.wl-demo-feedback[data-state="correct"] { color: var(--wm-mode-green, #286045); }
.wl-demo-feedback[data-state="incorrect"] { color: var(--wm-mode-red, #945a31); }
.wl-demo[data-state="complete"] .wl-demo-feedback { padding: 24px; background: var(--wl-soft); border-radius: 12px; margin-block: 24px; }
.wl-demo-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; }
.wl-demo-controls > span { color: var(--wl-muted); font-size: 12px; max-width: 185px; }
.wl-demo-controls .wl-button { min-height: 42px; font-size: 12px; padding: 10px 15px; flex-shrink: 0; gap: 8px; }
.wl-demo:not(.is-ready) .wl-demo-controls, .wl-demo:not(.is-ready) .wl-demo-options { display: none; }
.wl-no-js { font-size: 14px; margin-top: 30px !important; }
.wl-no-js a { text-decoration: underline; }

.wl-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px; margin-top: 52px; }
.wl-moments article + article { border-left: 1px solid var(--wl-line); padding-left: 30px; }
.wl-moment-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--wl-line); border-radius: 12px; color: var(--wl-purple); font-size: 25px; margin-bottom: 19px; }
/* Reuse the original SVG silhouettes, with theme-aware ink instead of a white fade. */
.wl-moment-art { display: block; width: 28px; height: 28px; background-color: currentColor; -webkit-mask: var(--wl-moment-image) center / contain no-repeat; mask: var(--wl-moment-image) center / contain no-repeat; mask-mode: alpha; }
.wl-moments h3 { font-size: 19px; }
.wl-moments p { margin-top: 12px; color: var(--wl-muted); font-size: 14px; line-height: 1.9; }
.wl-moment-label { display: inline-block; color: var(--wl-purple); font-size: 12px; margin-top: 20px; }
.wl-course-strip { display: flex; align-items: center; gap: 24px; background: var(--wm-mode-violet-soft, #f7f5fb); border: 1px solid var(--wl-line); border-radius: 16px; padding: 28px 34px; margin-top: 58px; transition: border-color .2s; }
.wl-course-strip:hover { border-color: var(--wl-purple); }
.wl-course-strip .wl-eyebrow { font-size: 12px; margin-bottom: 6px !important; }
.wl-course-strip h3 { font-size: 20px; }
.wl-grade-list { display: flex; gap: 9px; margin-left: auto; }
.wl-grade-list span { display: grid; place-items: center; border: 1px solid var(--wl-line); background: var(--wl-paper); width: 48px; height: 48px; border-radius: 50%; font-size: 13px; color: var(--wl-purple); }
.wl-strip-arrow { font-size: 26px; color: var(--wl-purple); margin-left: 12px; }
.wl-pricing-section { background: var(--wm-mode-soft, #f8f7f5); padding-block: 80px; }
.wl-pricing-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; align-items: center; gap: 24px; }
.wl-pricing-grid h2 { font-size: 32px; }
.wl-section-description { color: var(--wl-muted); font-size: 14px; margin-top: 22px !important; }
.wl-plan { display: flex; flex-direction: column; align-self: stretch; border: 1px solid var(--wl-line); border-radius: 18px; padding: 28px 24px 22px; background: var(--wl-paper); }
.wl-plan-free { border-color: var(--wm-mode-violet, #c6b9e5); }
.wl-plan-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--wl-purple); }
.wl-plan h3 { margin-top: 14px; font-size: 23px; }
.wl-plan p { margin-top: 13px; color: var(--wl-muted); font-size: 14px; }
.wl-plan-price { margin-block: 14px; font-size: 37px; font-weight: 700; line-height: 1.5; }
.wl-plan-price span { font-size: 18px; margin-left: 5px; }
.wl-plan ul { padding: 0; margin: 24px 0; list-style: none; font-size: 12px; line-height: 2.2; color: var(--wl-muted); }
.wl-plan li::before { content: "✓"; margin-right: 7px; color: var(--wl-purple); }
.wl-plan .wl-button { width: 100%; margin-top: auto; font-size: 13px; min-height: 48px; padding-inline: 12px; gap: 10px; }
.wl-plan > p:has(+ .wl-button) { margin-bottom: 28px; }
.wl-plan small { text-align: center; color: var(--wl-muted); margin-top: 16px; font-size: 12px; line-height: 1.7; }
.wl-faq { max-width: 1000px; }
.wl-faq-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.wm-landing .wl-faq-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 44px; padding: 8px 0 8px 8px; border-radius: 6px; color: var(--wl-purple); font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap; text-underline-offset: 4px; }
.wm-landing .wl-faq-more:hover { text-decoration: underline; }
.wl-faq-more > svg { display: block; flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.wl-faq-list { border: 1px solid #e3dcec; border-radius: 22px; background: linear-gradient(145deg, #fff 25%, #fcfaff); box-shadow: 0 18px 45px -12px #49316a17, 0 3px 9px #49316a05, inset 0 1px 0 #fff; }
.wl-faq details { transition: background .18s; }
.wl-faq details + details { border-top: 1px solid var(--wl-line); }
.wl-faq details:first-child { border-radius: 21px 21px 0 0; }
.wl-faq details:last-child { border-radius: 0 0 21px 21px; }
.wl-faq details[open] { background: linear-gradient(115deg, #f3edfbee, #fdfbff); }
.wl-faq summary { display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 24px 28px; cursor: pointer; font-size: 16px; line-height: 1.6; font-weight: 700; list-style: none; }
.wl-faq summary::-webkit-details-marker { display: none; }
.wl-faq summary::marker { content: ""; }
.wl-faq-question-mark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; background: var(--wl-soft); color: var(--wl-purple); font-size: 14px; line-height: 1; letter-spacing: 0; }
.wl-faq-question { flex: 1; min-width: 0; }
.wl-faq-toggle { position: relative; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid var(--wl-line); border-radius: 50%; color: var(--wl-purple); transition: background .18s, border-color .18s; }
.wl-faq-toggle::before, .wl-faq-toggle::after { content: ""; position: absolute; top: 14px; left: 9px; width: 12px; height: 2px; border-radius: 2px; background: currentColor; }
.wl-faq-toggle::after { transform: rotate(90deg); transition: transform .18s; }
.wl-faq summary:hover .wl-faq-question, .wl-faq details[open] .wl-faq-question { color: var(--wl-purple); }
.wl-faq details[open] .wl-faq-question-mark { background: var(--wl-paper); }
.wl-faq details[open] .wl-faq-toggle { border-color: var(--wl-purple); background: var(--wl-purple); color: #fff; }
.wl-faq details[open] .wl-faq-toggle::after { transform: rotate(0deg); }
.wl-faq-answer { color: var(--wl-muted); font-size: 15px; line-height: 1.9; padding: 0 76px 28px 74px; }
.wl-faq details a { color: var(--wl-purple); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .wl-faq details, .wl-faq-toggle, .wl-faq-toggle::after, .wm-landing .wl-faq-more { transition: none; }
}
.wl-final-section { padding-bottom: 80px; }
.wl-final { position: relative; padding: 60px 24px 52px; text-align: center; border-radius: 24px; background: var(--wl-soft); overflow: hidden; }
.wl-final::before, .wl-final::after { content: ""; position: absolute; width: 700px; height: 700px; border: 1px solid var(--wm-mode-line, #e6dff0); border-radius: 50%; top: 10%; left: -520px; pointer-events: none; }
.wl-final::after { left: auto; right: -480px; top: -20%; }
.wl-final > img { margin: 0 auto 22px; transform: rotate(-8deg); width: 100px; height: auto; }
.wl-final .wl-eyebrow { justify-content: center; font-size: 12px; }
.wl-final h2 { font-size: 32px; }
.wl-final .wl-button { margin-top: 28px; }

/* Keep the landing logo still; header geometry and interactions are shared. */
.wm-landing #site-header .wm-index-brand-frame { animation: none; }
.wm-landing #site-header .wm-index-brand-frame--kor { opacity: 1; }
.wm-landing #site-header .wm-index-brand-frame--eng { opacity: 0; }

.wm-landing #site-footer .wm-site-footer-container { width: min(1160px, calc(100% - 64px)); }
.wm-landing #site-footer .wm-site-footer-brand-copy { font-size: 12px; }

@media (min-width: 1280px) { .wl-hero-grid { min-height: 565px; } }
@media (max-width: 1050px) {
    .wl-container { width: calc(100% - 48px); }
    .wl-hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 20px; }
    .wl-hero h1 { font-size: 43px; }
    .wl-hero-product { width: 100%; }
    .wl-actions { gap: 16px; }
    .wl-actions .wl-text-link { font-size: 12px; }
    .wl-feature { padding: 22px 18px; }
    .wl-feature h3 { font-size: 21px; }
    .wl-feature > p { min-height: 68px; }
    .wl-desktop-break { display: none; }
    .wl-paper-label { font-size: 7px; }
    .wl-concept-paper, .wl-test-paper, .wl-review-paper { padding-inline: 12px; }
    .wm-landing .wl-equation { font-size: 18px; white-space: nowrap; }
    .wl-review-paper > div { font-size: 12px; gap: 6px; }
    .wl-preview-grid { gap: 40px; }
    .wl-pricing-grid { grid-template-columns: 1fr 1fr; }
    .wl-pricing-grid > div:first-child { grid-column: 1 / -1; margin-bottom: 10px; }
    .wl-pricing-grid > div:first-child br { display: none; }
}
@media (max-width: 760px) {
    .wl-container { width: calc(100% - 40px); }
    .wl-section { padding-block: 68px; }
    .wl-hero { padding-top: 105px; }
    .wl-hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 0; }
    .wl-hero-copy { text-align: center; padding: 10px 0 0; }
    .wl-hero h1 { font-size: clamp(35px, 6.8vw, 48px); }
    .wl-actions { justify-content: center; margin-top: 25px; gap: 12px 20px; }
    .wl-actions .wl-text-link { font-size: 13px; }
    .wl-ocean { width: 100%; margin: 24px auto 0; }
    .wl-hero-product { width: 100%; margin: 0; border-radius: 18px; transform: none; }
    .wl-hero-product-hint { top: 9px; right: 9px; min-height: 30px; padding: 6px 9px; font-size: 12px; }
    .wl-section-heading { flex-direction: column; align-items: flex-start; gap: 19px; margin-bottom: 30px; }
    .wl-section-heading > p { font-size: 13px; }
    .wl-eyebrow { font-size: 12px; margin-bottom: 13px !important; }
    .wl-feature-grid { grid-template-columns: 1fr; gap: 16px; }
    .wl-feature { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 20px; padding: 25px; }
    .wl-feature-top { grid-column: 1; margin-bottom: 14px; }
    .wl-feature h3 { grid-column: 1; font-size: 21px; align-self: start; }
    .wl-feature > p { grid-column: 1; min-height: 0; margin-top: 12px; font-size: 12px; align-self: start; }
    .wl-concept-paper, .wl-test-paper, .wl-review-paper { grid-column: 2; grid-row: 1 / 4; margin-top: 0; height: auto; min-height: 228px; }
    .wl-preview-section { padding-block: 64px; }
    .wl-preview-grid { grid-template-columns: 1fr; gap: 30px; }
    .wl-preview-copy > p:not(.wl-eyebrow) { font-size: 14px; margin-top: 18px; }
    .wl-preview-benefits { margin-top: 20px; }
    .wl-preview-copy .wl-preview-disclaimer { margin-top: 17px !important; }
    .wl-demo { padding: 25px; min-height: 0; }
    .wl-moments { gap: 22px; margin-top: 32px; }
    .wl-moments article + article { padding-left: 18px; }
    .wl-moments h3 { font-size: 16px; }
    .wl-moments p { font-size: 12px; }
    .wl-moment-label { font-size: 12px; }
    .wl-course-strip { padding: 23px; gap: 15px; margin-top: 35px; }
    .wl-course-strip h3 { font-size: 18px; }
    .wl-grade-list { gap: 5px; }
    .wl-grade-list span { width: 36px; height: 36px; font-size: 12px; }
    .wl-strip-arrow { margin-left: auto; font-size: 24px; }
    .wl-pricing-section { padding-block: 62px; }
    .wl-pricing-grid { gap: 17px; }
    .wl-pricing-grid h2 { font-size: 29px; }
    .wl-plan { padding: 24px 20px; }
    .wl-faq-heading { gap: 12px; margin-bottom: 24px; }
    .wl-faq-list { border-radius: 18px; }
    .wl-faq details:first-child { border-radius: 17px 17px 0 0; }
    .wl-faq details:last-child { border-radius: 0 0 17px 17px; }
    .wl-faq summary { gap: 12px; min-height: 80px; padding: 22px 18px; font-size: 15px; }
    .wl-faq-question-mark { flex-basis: 26px; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
    .wl-faq-toggle { flex-basis: 28px; width: 28px; height: 28px; }
    .wl-faq-toggle::before, .wl-faq-toggle::after { top: 12px; left: 7px; }
    .wl-faq-answer { padding: 0 24px 24px 56px; font-size: 14px; line-height: 1.85; }
    .wl-final-section { padding-bottom: 50px; }
    .wl-final { padding: 42px 20px; }
    .wl-final h2 { font-size: 26px; }
    .wm-landing #site-footer .wm-site-footer-container { width: calc(100% - 40px); }
}
@media (max-width: 480px) {
    .wl-container { width: calc(100% - 36px); }
    .wl-hero { padding-top: 91px; }
    .wl-hero h1 { font-size: 35px; }
    .wl-actions { flex-direction: column; gap: 10px; }
    .wl-actions .wl-button { min-width: 225px; }
    .wl-actions .wl-text-link { min-height: 36px; font-size: 12px; }
    .wl-ocean { margin-top: 18px; }
    .wl-hero-product { border-radius: 16px; }
    .wl-hero-product-hint { display: none; }
    .wl-feature { display: block; padding: 27px; }
    .wl-feature h3 { font-size: 24px; }
    .wl-feature > p { font-size: 13px; }
    .wl-concept-paper, .wl-test-paper, .wl-review-paper { margin-top: 24px; padding: 19px 22px; }
    .wm-landing .wl-equation { font-size: 23px; }
    .wl-review-paper > div { font-size: 12px; }
    .wl-paper-label { font-size: 8px; }
    .wl-demo { padding: 23px 19px; }
    .wl-demo h3 { font-size: 18px; }
    .wl-demo-controls { align-items: flex-start; }
    .wl-demo-controls > span { max-width: 145px; }
    .wl-moments { grid-template-columns: 1fr; gap: 27px; }
    .wl-moments article { display: grid; grid-template-columns: 40px 1fr; column-gap: 17px; }
    .wl-moments article + article { border-left: 0; border-top: 1px solid var(--wl-line); padding: 27px 0 0; }
    .wl-moment-icon { grid-row: 1 / 4; width: 38px; height: 38px; font-size: 22px; }
    .wl-moments h3 { font-size: 19px; }
    .wl-moments p { font-size: 13px; margin-top: 8px; }
    .wl-moment-label { grid-column: 2; margin-top: 13px; font-size: 12px; }
    .wl-course-strip { flex-wrap: wrap; padding: 24px; }
    .wl-course-strip > div:first-child { width: 100%; }
    .wl-grade-list { margin-left: 0; }
    .wl-pricing-grid { grid-template-columns: 1fr; }
    .wl-pricing-grid > div:first-child br { display: block; }
    .wl-plan { padding: 26px; }
    .wl-plan h3 { font-size: 25px; }
    .wl-plan p { font-size: 14px; }
    .wl-plan ul { font-size: 12px; }
    .wl-plan small { font-size: 12px; }
    .wl-plan-price { margin-block: 18px; }
    .wl-plan .wl-button { min-height: 50px; font-size: 14px; }
    .wl-final h2 { font-size: 23px; }
    .wl-final .wl-eyebrow { font-size: 12px; }
}
@media (max-width: 350px) {
    .wl-hero h1 { font-size: 30px; }
    .wl-feature { padding: 22px; }
    .wm-landing .wl-equation { font-size: 21px; }
    .wl-hero-product { width: 100%; }
    .wl-demo-controls { flex-wrap: wrap; }
    .wl-demo-controls > span { max-width: none; }
    .wl-demo-controls .wl-button { width: 100%; }
    .wl-final h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .wm-landing *, .wm-landing *::before, .wm-landing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Original index word slot, scaled with the larger headline. */
.wl-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; }
.wl-signature-line { display: flex; align-items: center; gap: .24em; }
.wl-signature-line + .wl-signature-line { margin-top: .13em; }
.wl-signature-blank { display: inline-flex; flex: 0 0 4.85em; align-items: center; justify-content: center; width: 4.85em; height: 1.78em; margin-inline: .1em; padding: 0; border: .133333em solid transparent; outline: 0; border-radius: .2em; background: linear-gradient(var(--wl-paper), var(--wl-paper)) padding-box, linear-gradient(135deg, #9999ff 0%, #6d4aff 48%, #3f357f 100%) border-box; color: #24175f; letter-spacing: -.055em; font-size: .88em; line-height: 1; box-shadow: 0 0 .6em rgba(255, 255, 255, .66), 0 0 1.133333em rgba(255, 255, 255, .36), 0 .466667em .933333em rgba(var(--wm-theme-primary-rgb), .22), inset 0 .033333em 0 rgba(255, 255, 255, .86); filter: drop-shadow(0 0 .4em rgba(255, 255, 255, .5)); }
@media (max-width: 639px) { .wl-signature-blank { flex-basis: 4.32em; width: 4.32em; height: 1.66em; } }
[data-signature-word] { position: relative; display: inline-block; min-height: 1em; white-space: pre; }
[data-signature-word]::after { content: ""; position: absolute; top: 50%; left: calc(100% + .06em); width: max(2px, .04em); height: .9em; border-radius: 999px; background: #4d3d99; transform: translateY(-50%); opacity: 0; pointer-events: none; }
[data-signature-animating="true"] [data-signature-word]::after { opacity: 1; animation: wl-signature-caret 1s steps(2, start) infinite; }
@keyframes wl-signature-caret { 0%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { [data-signature-word]::after { display: none; } }
.wl-signature-question { display: flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 20px; font-weight: 700; }
.wl-hero .wl-hero-grid { min-height: 525px; }

/* The original comic narrative remains in three concern-to-discovery pairs. */
.wl-story-section { padding-bottom: 0; }
.wl-story-toolbar { display: flex; justify-content: flex-end; align-items: center; min-height: 48px; margin-bottom: 16px; gap: 15px; }
.wl-story-toolbar:has(.wl-story-controls[hidden]) { display: none; }
.wl-story-toolbar > p { font-size: 12px; color: var(--wl-muted); }
.wl-story-controls { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.wl-story-controls > span { min-width: 40px; text-align: center; color: var(--wl-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.wl-story-controls button { display: grid; place-items: center; border: 1px solid var(--wl-line); width: 44px; height: 44px; border-radius: 50%; background: var(--wl-paper); color: var(--wl-purple); font-size: 20px; }
.wl-story-controls button:disabled { opacity: .35; cursor: default; }
.wl-story-controls button:hover:not(:disabled) { background: var(--wl-soft); }
.wl-story-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #c5b6df transparent; padding-bottom: 14px; }
.wl-story-track:focus-visible { outline-offset: 5px; }
.wl-story-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--wl-line); border-radius: 18px; background: linear-gradient(165deg, #fff 68%, #fcfaff); box-shadow: 0 6px 12px -8px #49316a26, inset 0 1px 0 #fff; overflow: hidden; scroll-snap-align: start; scroll-margin-top: 115px; }
.wl-story-heading { padding: 24px 24px 20px; }
.wl-story-heading > span { display: block; font-size: 12px; font-weight: 700; color: var(--wl-purple); margin-bottom: 12px; }
.wl-story-heading .wl-story-kicker-bracket { color: #ac96cc; font-weight: 400; }
.wl-story-heading h3 { font-size: 21px; min-height: 63px; }
.wl-story-scene { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #faf5ec; border-block: 1px solid #eee5d8; }
.wl-story-thought { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; flex: 1; container: story-thought / inline-size; }
.wl-story-thought > img { flex: 0 0 72px; width: 72px; height: 88px; object-fit: cover; object-position: center top; border-radius: 14px 14px 10px 10px; background: #faf5ec; }
.wl-story-quote { display: grid; grid-template-columns: auto minmax(0, max-content) auto; justify-content: center; align-items: center; column-gap: 12px; flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.9; container: story-quote / inline-size; }
.wl-story-quote p { min-width: 0; color: var(--wl-muted); font-size: inherit; line-height: inherit; text-align: center; white-space: nowrap; }
.wl-story-break--compact { display: none; }
/* Larger quote marks balance the three-line copy without crowding it. */
.wl-story-quote-mark { display: block; width: .7938lh; height: .7056lh; fill: #c4b1e2; }
.wl-story-quote-mark--closing { transform: rotate(180deg); }
.wl-story-thought strong { color: var(--wl-ink); font-weight: 700; }
@container story-thought (max-width: 330px) {
    .wl-story-thought > img { flex-basis: 56px; width: 56px; height: 72px; }
    .wl-story-quote { font-size: 12px; column-gap: 9px; }
}
@container story-quote (max-width: 300px) {
    .wl-story-break { display: none; }
    .wl-story-break--compact { display: inline; }
}
/* Ornaments start at the upper 38% line; text accents run automatic three-second loops. */
.wl-story-bridge {
    --bridge-pointer-x: 50%; --bridge-pointer-y: 50%; --bridge-pointer-strength: 0;
    --bridge-rail-y: 96px;
    --bridge-hub-size: 60px;
    --bridge-heading-gap: 22px;
    /* Scroll-triggered ornament timing is separate from the text's automatic cycle. */
    --bridge-speed: 2;
    --bridge-signal-start: calc(.55s / var(--bridge-speed));
    --bridge-signal-duration: calc(1.35s / var(--bridge-speed));
    --bridge-glow-start: calc(var(--bridge-signal-start) + var(--bridge-signal-duration));
    --bridge-glow-duration: calc(1.15s / var(--bridge-speed));
    --bridge-text-cycle: 3s;
    position: relative; isolation: isolate; margin-top: 0; padding: calc(var(--bridge-rail-y) + var(--bridge-hub-size) / 2 + var(--bridge-heading-gap)) 24px 68px; text-align: center; scroll-margin-top: 106px;
}
.wl-bridge-atmosphere { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse closest-side at 50% 51%, #e6dbff9c 0%, #f0eaff66 42%, transparent 100%); }
/* The light is a feathered ellipse of its own, so the section never cuts a rectangular edge through it. */
.wl-bridge-atmosphere::after { content: ""; position: absolute; left: var(--bridge-pointer-x); top: var(--bridge-pointer-y); width: min(520px, 80vw); height: min(380px, 60vw); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); background: radial-gradient(ellipse closest-side, #c1b1fa5c 0%, #c1b1fa26 44%, transparent 100%); transition: opacity .3s ease; }
.wl-story-bridge.has-pointer .wl-bridge-atmosphere::after { opacity: var(--bridge-pointer-strength); }
.wl-bridge-convergence { position: absolute; inset: 0 0 auto; height: calc(var(--bridge-rail-y) + var(--bridge-hub-size) / 2 + 2px); pointer-events: none; }
.wl-bridge-connectors { position: absolute; inset: 0; mask-image: linear-gradient(to bottom, transparent, #000 16px); }
/* The branch origins follow the centers of the three cards, including their 22px gaps. */
.wl-bridge-branch { position: absolute; top: 0; height: var(--bridge-rail-y); border-color: #d5c5ed; border-style: solid; border-width: 0; }
.wl-bridge-branch--left { left: calc((100% - 44px) / 6); right: 50%; border-left-width: 1px; border-bottom-width: 1px; border-bottom-left-radius: 22px; }
.wl-bridge-branch--right { left: 50%; right: calc((100% - 44px) / 6); border-right-width: 1px; border-bottom-width: 1px; border-bottom-right-radius: 22px; }
.wl-bridge-branch--middle { left: calc(50% - .5px); width: 1px; height: calc(var(--bridge-rail-y) - var(--bridge-hub-size) / 2 + 2px); background: #d5c5ed; }
/* The core and halo stay circular along every branch, with no solid outline. */
.wl-bridge-signal { position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 0; background: radial-gradient(circle closest-side, #effff7 0%, #b6ffdc 14%, #59dfa8e6 36%, #52d59a73 63%, #52d59a00 100%); filter: blur(.6px); opacity: 0; offset-anchor: center; offset-rotate: 0deg; offset-distance: 0%; }
.wl-bridge-signal::before { content: ""; position: absolute; inset: -12px; background: radial-gradient(circle closest-side, #64e3aa8c 0%, #57dba45c 35%, #57dba41f 65%, #57dba400 100%); filter: blur(2px); }
.wl-bridge-hub { position: absolute; top: calc(var(--bridge-rail-y) - var(--bridge-hub-size) / 2); left: calc(50% - var(--bridge-hub-size) / 2); display: grid; place-items: center; width: var(--bridge-hub-size); height: var(--bridge-hub-size); border: 1px solid #e2d7f3; border-radius: 50%; background: linear-gradient(150deg, #fff 25%, #f2ecfd); box-shadow: 0 5px 18px #8060b710, inset 0 0 0 5px #fff9; }
.wl-bridge-hub img { display: block; width: 40px; height: auto; }
.wl-bridge-content { position: relative; z-index: 1; }
.wl-bridge-eyebrow { position: relative; color: var(--wl-purple); font-size: clamp(34px, 2.8vw, 38px); font-weight: 700; line-height: 1.35; letter-spacing: -.045em; text-shadow: none; }
.wl-bridge-heading-ink { position: relative; display: inline-block; }
.wl-bridge-eyebrow--question { line-height: 1.5; }
.wl-bridge-eyebrow--question .wl-bridge-heading-ink { max-width: 100%; word-break: keep-all; }
/* Match the guide's certainty lettering, without its underline. */
@media screen and (forced-colors: none) {
    @supports (-webkit-text-stroke: 1px #a28bbc) and ((background-clip: text) or (-webkit-background-clip: text)) {
        .wl-bridge-heading-ink { color: transparent; -webkit-text-stroke: 1px #a28bbc; }
        .wl-bridge-heading-ink::after { content: attr(data-text); position: absolute; inset: 0; color: var(--wl-purple); background: var(--wl-emphasis-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0; pointer-events: none; }
        .wl-story-bridge.is-enhanced.has-signal-paths:not(.is-reduced-motion) .wl-bridge-heading-ink::after { clip-path: inset(0 100% 0 0); }
        .wl-story-bridge.is-enhanced.has-signal-paths:not(.is-reduced-motion) .wl-bridge-eyebrow.is-visible .wl-bridge-heading-ink::after { animation: wl-bridge-heading-fill var(--bridge-glow-duration) var(--bridge-glow-start) cubic-bezier(.22, 1, .36, 1) both; }
    }
}
.wm-landing .wl-bridge-title { margin-top: 30px !important; font-size: clamp(40px, 4.6vw, 60px); line-height: 1.43; letter-spacing: -.06em; }
.wl-bridge-line { display: block; white-space: nowrap; }
.wl-bridge-line--method { margin-bottom: .28em; color: var(--wl-muted); font-size: .72em; font-weight: 400; line-height: 1.5; letter-spacing: -.045em; }
.wl-bridge-line--method .wl-bridge-accent { font-weight: 700; }
.wl-bridge-line--promise { display: flex; align-items: center; justify-content: center; }
.wl-bridge-line--promise > span { flex-shrink: 0; }
/* Center the box with the text line; the small optical offset follows the Hangul ink. */
.wl-bridge-blank { position: relative; top: .02em; display: inline-block; isolation: isolate; overflow: hidden; margin-inline: .202em .075em; padding: .0425em .28em; border: 2px solid #a88bdd; border-radius: .21em; line-height: 1.15; color: #fff; background: #fff9; box-shadow: 0 10px 30px #7651c418, inset 0 1px #ffffff; }
/* Restore the empty box, then fill and reveal its word within each three-second cycle. */
.wl-bridge-blank::before { content: ""; position: absolute; z-index: -1; inset: -1px; background: linear-gradient(115deg, #9777eb, #6e48c0 60%, #51348e); transform-origin: left center; animation: wl-bridge-fill var(--bridge-text-cycle) cubic-bezier(.2,.7,.2,1) infinite; }
/* Center the visible Spoqa Bold glyphs, accounting for -.06em tracking and font bearings. */
.wl-bridge-blank-word { position: relative; left: -.052em; top: -.015em; display: inline-block; animation: wl-bridge-word var(--bridge-text-cycle) ease infinite; }
.wl-bridge-blank-shine { display: none; }
.wl-bridge-accent { --bridge-emphasis-start: 0s; position: relative; color: var(--wl-purple); }
.wl-bridge-accent--second { --bridge-emphasis-start: .4s; }
.wl-bridge-accent::after { content: ""; position: absolute; left: 2%; right: 0; bottom: -.06em; height: .1em; border-radius: 50%; background: linear-gradient(90deg, #a68be0a6, #b5a0ee38); transform-origin: left; }
/* The white sweep is clipped to the glyphs; the underline stays still. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .wl-bridge-accent { color: transparent; background-color: var(--wl-purple); background-image: linear-gradient(115deg, transparent 42%, #ffffff70 47%, #fff 50%, #ffffff70 53%, transparent 58%); background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; }
    .wl-bridge-accent { animation: wl-bridge-accent-sheen var(--bridge-text-cycle) var(--bridge-emphasis-start) ease-in-out infinite; }
}
.wl-bridge-actions { display: flex; justify-content: center; margin-top: 38px; }
.wm-landing .wl-bridge-link { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-width: 238px; min-height: 56px; padding: 14px 26px; border: 1px solid #d9cbee; border-radius: 999px; background: linear-gradient(180deg, #fff, #fcfaff); box-shadow: 0 5px 16px #6343990a, inset 0 1px #fff; color: #5c4096; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -.025em; white-space: nowrap; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.wl-bridge-link svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
@media (hover: hover) {
    .wm-landing .wl-bridge-link:hover { border-color: #aa8bd7; background: #f7f1ff; box-shadow: 0 8px 22px #63439914; transform: translateY(-2px); }
    .wl-bridge-link:hover svg { transform: translateY(2px); }
}
.wm-landing .wl-bridge-link:focus-visible { outline: 3px solid #9a7bce; outline-offset: 5px; }
.wm-landing .wl-bridge-link:active { transform: translateY(0); box-shadow: 0 2px 8px #6343990a; }
.wl-story-bridge.is-enhanced .wl-bridge-convergence:not(.is-visible) .wl-bridge-connectors { clip-path: inset(0 0 100%); }
.wl-story-bridge.is-enhanced .wl-bridge-convergence:not(.is-visible) .wl-bridge-hub { opacity: 0; }
.wl-story-bridge.is-enhanced .wl-bridge-convergence.is-visible .wl-bridge-connectors { animation: wl-bridge-connect calc(.7s / var(--bridge-speed)) ease both; }
.wl-story-bridge.is-enhanced .wl-bridge-convergence.is-visible .wl-bridge-hub { animation: wl-bridge-hub-arrive calc(.6s / var(--bridge-speed)) calc(.25s / var(--bridge-speed)) both; }
.wl-story-bridge.is-enhanced.has-signal-paths .wl-bridge-convergence.is-visible .wl-bridge-signal { animation: wl-bridge-signal-travel var(--bridge-signal-duration) var(--bridge-signal-start) linear both; }
.wl-story-bridge.is-enhanced.has-signal-paths .wl-bridge-convergence.is-visible .wl-bridge-hub { animation: wl-bridge-hub-arrive calc(.6s / var(--bridge-speed)) calc(.25s / var(--bridge-speed)) both, wl-bridge-hub-light var(--bridge-glow-duration) var(--bridge-glow-start) ease forwards; }
.wl-story-bridge.is-enhanced.has-signal-paths .wl-bridge-convergence.is-visible .wl-bridge-hub img { animation: wl-bridge-whale-light var(--bridge-glow-duration) var(--bridge-glow-start) ease forwards; }
.wl-story-bridge.is-enhanced .wl-bridge-eyebrow.is-visible { animation: wl-bridge-arrive calc(.7s / var(--bridge-speed)) both; }
.wl-story-bridge.is-enhanced .wl-bridge-actions.is-visible { animation: wl-bridge-arrive calc(.45s / var(--bridge-speed)) both; }
@keyframes wl-bridge-connect { from { clip-path: inset(0 0 100%); } to { clip-path: inset(0); } }
@keyframes wl-bridge-hub-arrive { from { opacity: 0; transform: translateY(-4px) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes wl-bridge-signal-travel { 0% { opacity: 0; offset-distance: 0%; } 9% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
@keyframes wl-bridge-hub-light { 0% { border-color: #e2d7f3; box-shadow: 0 5px 18px #8060b710, inset 0 0 0 5px #fff9; } 38% { border-color: #8ad2b1; box-shadow: 0 0 0 6px #93dfbb2e, 0 0 34px #70cda86b, inset 0 0 0 5px #fff9; } 100% { border-color: #b3dbc9; box-shadow: 0 0 0 3px #93dfbb1f, 0 0 24px #70cda840, inset 0 0 0 5px #fff9; } }
@keyframes wl-bridge-whale-light { 0% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 38% { transform: scale(1.08); filter: drop-shadow(0 0 6px #65cfa3a6); } 100% { transform: scale(1.025); filter: drop-shadow(0 0 4px #65cfa361); } }
@keyframes wl-bridge-heading-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes wl-bridge-accent-sheen { 0% { background-position: 100% 0; } 12%, 100% { background-position: 0% 0; } }
@keyframes wl-bridge-fill { 0% { transform: scaleX(0); } 25%, 100% { transform: scaleX(1); } }
@keyframes wl-bridge-word { 0%, 3.333333% { opacity: 0; } 12.5%, 100% { opacity: 1; } }
@keyframes wl-bridge-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .wl-story-bridge *, .wl-story-bridge *::before, .wl-story-bridge *::after { animation: none !important; transition: none !important; }
    .wl-story-bridge.is-enhanced .wl-bridge-blank::before, .wl-story-bridge.is-enhanced .wl-bridge-accent::after { transform: none; }
    .wl-story-bridge.is-enhanced .wl-bridge-blank-word { opacity: 1; }
    .wl-story-bridge.is-enhanced .wl-bridge-connectors { clip-path: none; }
    .wl-story-bridge.is-enhanced .wl-bridge-hub { opacity: 1; }
    .wl-story-bridge .wl-bridge-heading-ink::after { clip-path: none; }
    .wl-story-bridge .wl-bridge-accent { color: var(--wl-purple); background: none; }
    .wl-story-bridge .wl-bridge-atmosphere::after, .wl-story-bridge .wl-bridge-signal { display: none; }
    .wm-landing .wl-story-bridge .wl-bridge-link, .wl-story-bridge .wl-bridge-link svg { transform: none; }
}

/* A blank-entry lesson, not a choice-only quiz. */
.wl-blank-form { margin-top: 24px; padding: 22px; border-radius: 12px; background: var(--wl-soft); }
.wl-blank-form label { display: block; color: var(--wl-purple); font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.wl-blank-entry { display: flex; align-items: center; gap: 10px; }
.wl-blank-entry > span { color: var(--wl-muted); font-size: 12px; }
.wl-blank-entry input { width: 100%; min-width: 0; height: 50px; border: 2px dashed var(--wm-mode-violet, #a995d2); border-radius: 8px; padding: 10px 12px; background: var(--wl-paper); color: var(--wl-ink); font: inherit; font-size: 17px; text-align: center; }
.wl-blank-entry input::placeholder { font-size: 12px; color: var(--wl-muted); }
.wl-blank-entry input:disabled { opacity: 1; -webkit-text-fill-color: var(--wl-ink); }
.wl-blank-entry .wl-button { font-size: 12px; padding: 11px 14px; min-height: 46px; flex-shrink: 0; }
.wl-blank-form > p { font-size: 12px; line-height: 1.8; color: var(--wl-muted); margin-top: 14px; }
.wl-demo[data-state="correct"] .wl-blank-entry input { border-style: solid; border-color: var(--wm-mode-green, #448767); background: var(--wm-mode-green-soft, #f0f8f3); }
.wl-demo[data-state="incorrect"] .wl-blank-entry input { border-style: solid; border-color: var(--wm-mode-red, #b97662); background: var(--wm-mode-red-soft, #fff5ed); }
.wl-demo:not(.is-ready) .wl-blank-form { display: none; }

.wl-moments-section { padding-top: 54px; }
.wl-moments { row-gap: 38px; }
.wl-moments article:nth-child(3n + 1) { border-left: 0; padding-left: 0; }

@media (max-width: 1050px) {
    .wl-signature-question { font-size: 17px; }
    .wl-story-track { grid-auto-columns: min(390px, 75%); }
    /* A carousel shows one concern at a time; don't connect imaginary columns. */
    .wl-bridge-branch--left, .wl-bridge-branch--right { display: none; }
    .wl-blank-entry { flex-wrap: wrap; }
    .wl-blank-entry input { width: calc(100% - 40px); flex: 1; }
    .wl-blank-entry .wl-button { width: 100%; margin-top: 4px; }
}
@media (max-width: 760px) {
    .wl-hero .wl-hero-grid { min-height: 0; }
    .wl-signature-line, .wl-signature-question { justify-content: center; }
    .wl-signature-question { margin-top: 14px; font-size: 17px; }
    .wl-story-toolbar { align-items: center; }
    .wl-story-toolbar > p { font-size: 12px; }
    .wl-story-track { grid-auto-columns: min(370px, 100%); gap: 16px; }
    .wl-story-bridge { --bridge-rail-y: 78px; --bridge-hub-size: 54px; --bridge-heading-gap: 20px; padding-inline: 10px; padding-bottom: 42px; }
    .wl-bridge-hub img { width: 36px; }
    .wl-bridge-eyebrow { font-size: clamp(28px, 5.2vw, 32px); }
    .wl-bridge-eyebrow--question { font-size: clamp(18px, 5.5vw, 28px); }
    .wm-landing .wl-bridge-title { margin-top: 24px !important; font-size: clamp(32px, 6vw, 44px); }
    .wl-bridge-actions { margin-top: 28px; }
    .wl-moments-section { padding-top: 30px; }
    .wl-blank-entry { flex-wrap: nowrap; }
    .wl-blank-entry input { width: 100%; }
    .wl-blank-entry .wl-button { width: auto; margin-top: 0; }
}
@media (max-width: 480px) {
    .wl-hero h1 { font-size: 36px; }
    .wl-signature-question { font-size: 15px; margin-top: 9px; gap: 0; }
    .wl-story-heading { padding: 22px 20px 17px; }
    .wl-story-heading h3 { font-size: 19px; min-height: 60px; }
    .wl-story-thought { padding: 10px 6px; gap: 4px; }
    .wl-story-thought > img { width: 60px; flex-basis: 60px; height: 74px; }
    .wl-story-quote { font-size: 12px; }
    .wl-story-answer { font-size: 12px; padding: 14px 17px; }
    .wl-story-bridge { padding-inline: 0; }
    .wm-landing .wl-bridge-title { font-size: clamp(22px, 7.2vw, 34px); line-height: 1.5; }
    .wm-landing .wl-bridge-link { min-width: 222px; min-height: 52px; padding: 13px 22px; font-size: 15px; gap: 16px; }
    .wl-moments article:nth-child(3n + 1):not(:first-child) { padding-top: 27px; border-top: 1px solid var(--wl-line); }
    .wl-blank-form { padding: 18px 15px; }
    .wl-blank-entry { flex-wrap: wrap; gap: 9px; }
    .wl-blank-entry input { width: calc(100% - 40px); }
    .wl-blank-entry .wl-button { width: 100%; min-height: 43px; margin-top: 5px; }
}
@media (max-width: 380px) {
    .wl-story-thought { padding-block: 8px; gap: 4px; }
    .wl-story-thought > img { width: 50px; flex-basis: 50px; height: 66px; }
    .wl-story-quote { column-gap: 8px; line-height: 1.75; }
    .wl-story-quote-mark { width: .6048lh; height: .5376lh; }
}
@media (max-width: 350px) {
    .wl-hero h1 { font-size: 30px; }
    .wl-story-toolbar > p { max-width: 126px; }
    .wl-story-track { grid-auto-columns: 100%; }
    .wl-story-heading h3 { font-size: 18px; }
    .wl-story-thought { padding-inline: 6px; gap: 4px; }
    .wl-story-quote { column-gap: 6px; line-height: 1.65; }
    .wl-story-quote-mark { width: .5712lh; height: .50778lh; }
    .wl-story-break { display: none; }
    .wl-story-break--compact { display: inline; }
    .wl-story-thought > img { width: 48px; flex-basis: 48px; height: 64px; }
}

/* Preserve the archived sections' own typography and stacking context. */
/* An open closing invitation fades into the footer instead of ending in a card. */
.wm-landing .wl-closing-section { position: relative; isolation: isolate; padding: 80px 0 120px; }
.wm-landing .wl-closing-section::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 38% 30%, #e9dffc99, transparent 62%), radial-gradient(ellipse at 74% 64%, #e1f2ec66, transparent 48%), linear-gradient(180deg, transparent 16%, var(--wl-paper) 100%); pointer-events: none; }
.wm-landing .wl-closing-panel { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.wm-landing .wl-closing-panel .wm-index-cta-title { margin-top: 0; }
@media (max-width: 639px) {
    .wm-landing .wl-closing-section { padding: 56px 0 88px; }
}
.wm-landing .wl-closing-panel .wm-index-cta-button { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding-block: 13px; border: 1px solid #7250b4 !important; border-radius: 18px; background: var(--wl-cta-fill) !important; box-shadow: var(--wl-cta-shadow); font: 700 17px/1.5 "SpoqaHanSansNeoSubset", "Apple SD Gothic Neo", sans-serif; letter-spacing: -.035em; transition: box-shadow .2s ease, transform .2s ease; }
.wm-landing :is(.wl-hero .wl-button-primary, .wl-fit .wl-fit-cta, .wl-closing-panel .wm-index-cta-button) { --wl-trial-space: 32px; min-width: 0; width: max-content; padding-inline: var(--wl-trial-space); gap: var(--wl-trial-space); }
.wm-landing .wl-trial-label { flex: 0 0 auto; font: inherit; white-space: nowrap; }
.wm-landing .wl-closing-panel .wm-index-cta-button:is(:hover, :focus-visible) { background: var(--wl-cta-fill) !important; box-shadow: 0 14px 30px #60409838, 0 4px 9px #442b6e21, inset 0 1px 0 #ffffff55; transform: translateY(-2px); }
.wm-landing .wl-closing-panel .wm-index-cta-button:active { box-shadow: 0 3px 9px #60409824, inset 0 1px 2px #36205d29; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .wm-landing .wl-button-primary, .wm-landing .wl-closing-panel .wm-index-cta-button, .wm-landing a > .wl-trial-arrow svg { transform: none !important; }
}
.wl-legacy-tail { background: linear-gradient(180deg, var(--wm-mode-surface, #f7f8fc), var(--wm-mode-soft, #f4f6fb)); }
.wl-legacy-original.whalemath-profile-theme {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -.01em;
    word-break: normal;
    overflow-wrap: normal;
}
.wl-faq-answer p + p { margin-top: 12px; }

/* Signed-in readers can use dark mode on the public guide. Pair each surface
   with its ink; screenshots and illustrations keep their original colors. */
@media screen and (forced-colors: none) {
    html[data-wm-theme="dark"] .wm-landing {
        --wl-emphasis-gradient: linear-gradient(110deg, #d6c6ff 3%, #b6dfff 45%, #c4b1ff 88%);
    }
    html[data-wm-theme="dark"] .wm-landing .wl-hero {
        background: radial-gradient(ellipse at 78% 28%, #7959bd24, transparent 56%),
            linear-gradient(180deg, var(--wm-theme-soft), #0b1020);
    }
    html[data-wm-theme="dark"] .wm-landing .wl-signature-blank {
        color: var(--wl-ink);
        box-shadow: 0 0 .8em #9471e526, inset 0 1px 0 #c1b0ff26;
        filter: none;
    }
    html[data-wm-theme="dark"] .wm-landing [data-signature-word]::after { background: var(--wl-purple); }
    html[data-wm-theme="dark"] .wm-landing .wl-story-card {
        background: linear-gradient(165deg, var(--wl-paper) 68%, var(--wm-theme-soft));
        box-shadow: 0 6px 18px #0003, inset 0 1px 0 #c1b0ff0d;
    }
    html[data-wm-theme="dark"] .wm-landing .wl-bridge-atmosphere {
        background: radial-gradient(ellipse closest-side at 50% 51%, #7850ed24, #7850ed0d 42%, transparent 100%);
    }
    html[data-wm-theme="dark"] .wm-landing .wl-bridge-atmosphere::after {
        background: radial-gradient(ellipse closest-side, #9471e526, #9471e50d 44%, transparent 100%);
    }
    html[data-wm-theme="dark"] .wm-landing .wl-bridge-heading-ink { -webkit-text-stroke-color: var(--wl-purple); }
    html[data-wm-theme="dark"] .wm-landing .wl-bridge-blank {
        background: var(--wl-paper);
        box-shadow: 0 8px 24px #0003, inset 0 1px #c1b0ff26;
    }
    html[data-wm-theme="dark"] .wm-landing .wl-bridge-blank::before { background: var(--wm-theme-primary-gradient); }
    html[data-wm-theme="dark"] .wm-landing .wl-bridge-link {
        border-color: var(--wl-line);
        background: var(--wl-paper);
        color: var(--wl-purple);
        box-shadow: 0 5px 16px #0003;
    }
    html[data-wm-theme="dark"] .wm-landing .wl-bridge-link:is(:hover, :focus-visible) { background: var(--wl-soft); border-color: var(--wl-purple); }
    html[data-wm-theme="dark"] .wm-landing .wl-process-check { background: var(--wm-theme-action); }
    html[data-wm-theme="dark"] .wm-landing .wl-faq-list {
        border-color: var(--wl-line);
        background: var(--wl-paper);
        box-shadow: 0 18px 45px -12px #0004;
    }
    html[data-wm-theme="dark"] .wm-landing .wl-faq details[open] { background: var(--wm-mode-soft); }
    html[data-wm-theme="dark"] .wm-landing .wl-faq details[open] .wl-faq-toggle {
        background: var(--wm-theme-action);
        color: var(--wm-theme-on-action);
    }
    html[data-wm-theme="dark"] .wm-landing .wl-closing-section::before {
        background: radial-gradient(ellipse at 38% 30%, #7850ed1f, transparent 62%),
            radial-gradient(ellipse at 74% 64%, #61dfba0a, transparent 48%),
            linear-gradient(180deg, transparent 16%, var(--wl-paper) 100%);
    }
    html[data-wm-theme="dark"] .wm-landing .wl-closing-panel .wm-index-cta-title {
        color: var(--wl-ink) !important;
        text-shadow: none;
    }
    html[data-wm-theme="dark"] .wm-landing .wl-closing-panel .wm-index-word-slot {
        color: var(--wl-ink) !important;
        text-shadow: none;
        box-shadow: 0 0 .8em #9471e526, inset 0 1px 0 #c1b0ff26;
        filter: none !important;
    }
}