/* Fixed-English editorial page; scoped stylesheet and no application runtime. */
:root { --ink:#29223c; --muted:#625b71; --purple:#6535ce; --line:#e3dfe8; --paper:#fcfbf7; --lavender:#f0eafa; --orange:#f6a849; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.65 "Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.wrap { width:min(1200px,calc(100% - 80px)); margin-inline:auto; }
a { color:inherit; text-underline-offset:4px; }
a:hover { color:var(--purple); }
:focus-visible { outline:3px solid #a32862; outline-offset:5px; }
img { display:block; max-width:100%; height:auto; }
figure, p { margin:0; }
p + p { margin-top:16px; }
h1,h2,h3,h4 { margin:0; line-height:1.15; }
h1,h2,h3 { letter-spacing:-.045em; }
h2 { font-size:clamp(32px,3.7vw,48px); font-weight:750; }
h3 { font-size:25px; }
h4 { font-size:15px; line-height:1.5; margin-bottom:8px; }
.skip-link { position:absolute; top:12px; left:20px; z-index:5; transform:translateY(-180%); background:white; padding:12px; }
.skip-link:focus { transform:none; }
.site-header { min-height:104px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-bottom:1px solid var(--line); }
.wordmark { flex-shrink:0; }
.wordmark img { width:158px; }
.site-header nav { display:flex; align-items:center; gap:30px; font-size:14px; font-weight:650; }
.site-header nav > a:not(.button) { text-decoration:none; padding-block:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; background:var(--purple); color:white; border:1px solid var(--purple); padding:16px 23px; min-height:52px; font-size:15px; font-weight:700; line-height:1.5; text-decoration:none; border-radius:12px; text-align:center; box-shadow:0 6px 0 #e1d2f2; }
.button:hover { background:#4f24ab; color:white; }
.button-small { min-height:44px; padding:11px 18px; font-size:14px; }
.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:14px; font-size:14px; color:var(--muted); padding-top:27px; }
.breadcrumbs a { text-decoration:none; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:50px; padding:45px 0 55px; }
.eyebrow,.small-caps { color:var(--purple); font-size:10px; letter-spacing:1.8px; font-weight:750; line-height:1.6; }
.eyebrow { margin-bottom:22px; }
.edition-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--purple); margin-right:7px; }
h1 { font-size:clamp(44px,4.7vw,65px); line-height:1.06; letter-spacing:-.055em; font-weight:750; max-width:660px; }
h1 > span { color:var(--purple); }
.intro { margin-top:28px; font-size:20px; line-height:1.6; max-width:530px; }
.intro em { font-style:normal; background:linear-gradient(transparent 65%,#eadff8 65%); }
.hero-description { margin-top:15px; color:var(--muted); max-width:490px; font-size:16px; }
.hero-actions { display:flex; gap:23px; align-items:center; flex-wrap:wrap; margin-top:28px; }
.text-link { font-weight:700; font-size:14px; display:inline-block; padding-block:10px; }
.byline { font-size:14px; color:var(--muted); margin-top:26px; }
.hero-visual { position:relative; min-width:0; padding:0 0 8px; }
.hero-art-frame { overflow:hidden; border-radius:24px; background:#eadff3; box-shadow:0 22px 45px #42305a24; transform:rotate(1.5deg); border:5px solid white; }
.hero-art-frame img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.hero-art-ribbon { display:flex; gap:11px; align-items:center; position:relative; margin:-31px 15px 0; padding:15px 19px; background:#fff6df; border:1px solid #edce91; border-radius:12px; box-shadow:0 8px 24px #46331c17; font-size:14px; line-height:1.4; }
.hero-art-ribbon > span { display:grid; place-content:center; width:30px; height:30px; flex-shrink:0; border-radius:50%; background:#6a39ba; color:white; font-size:18px; }
.hero-visual figcaption { font-size:14px; color:var(--muted); line-height:1.6; margin-top:14px; text-align:center; padding-inline:12px; }
.disclosure { padding:20px 24px; border-left:3px solid #ceb9ed; background:#f3f0f6; color:var(--muted); font-size:14px; line-height:1.8; }
.disclosure strong { color:var(--ink); }
.contents { display:flex; align-items:center; flex-wrap:wrap; gap:22px; padding:25px 0; border-bottom:1px solid var(--line); font-size:14px; }
.contents > span { font-size:9px; letter-spacing:1.4px; color:var(--muted); font-weight:750; margin-right:8px; }
.contents a { text-decoration:none; padding-block:5px; }
.section { padding-block:76px; border-bottom:1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:32px; }
.section-heading > p { font-size:15px; color:var(--muted); max-width:320px; }
.section-heading .eyebrow { margin-bottom:16px; }
.table-wrap { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:white; }
table { border-collapse:collapse; width:100%; text-align:left; font-size:16px; line-height:1.7; }
caption { text-align:left; font-size:14px; color:var(--muted); padding:15px 20px; border-bottom:1px solid var(--line); }
th,td { padding:20px; vertical-align:top; border-bottom:1px solid var(--line); }
thead { background:#ece5f5; font-size:14px; letter-spacing:.6px; }
th:first-child { width:16%; }
td:nth-child(2) { width:23%; }
td:nth-child(3) { width:28%; }
tbody th { font-size:16px; }
tbody tr:last-child > * { border-bottom:none; }
.featured-row { background:#f0e5ff; box-shadow:inset 4px 0 0 var(--purple); }
tbody tr:not(.featured-row):nth-child(odd) { background:#fcfaff; }
.table-badge { display:block; margin-top:8px; font-size:14px; font-weight:650; color:var(--purple); }
.table-note { font-size:14px; color:var(--muted); margin-top:18px; line-height:1.8; }
.goal-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:32px; }
.goal-card { display:flex; flex-direction:column; padding:24px; border:1px solid var(--line); border-radius:12px; background:white; text-decoration:none; }
.goal-card:hover { border-color:var(--purple); }
.goal-card:first-child { background:var(--lavender); border-color:#dfd0f1; }
.goal-card:nth-child(2) { background:#fff5e0; }
.goal-card:nth-child(3) { background:#eef5ef; }
.goal-card:nth-child(4) { background:#fff0ed; }
.goal-number { color:var(--purple); font-size:12px; font-weight:700; margin-bottom:25px; }
.goal-card h3 { font-size:22px; line-height:1.3; margin-bottom:15px; }
.goal-card p { font-size:16px; color:var(--muted); margin-bottom:22px; }
.goal-link { margin-top:auto; font-size:14px; font-weight:700; line-height:1.6; }
.goal-link > span { float:right; padding-left:7px; }
.quiet-note { margin-top:25px; font-size:16px; color:var(--muted); max-width:900px; }
.product-list { display:grid; gap:20px; margin-top:34px; }
.product-card { padding:34px 38px; background:white; border:1px solid var(--line); border-radius:18px; box-shadow:0 6px 20px #34224805; }
.product-card:target { border-color:var(--purple); }
.wordykid-card { border:1px solid #c8b1ec; background:#fcfaff; }
.product-top { display:flex; align-items:center; gap:17px; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.product-top h3 { font-size:29px; margin-top:4px; }
.product-top .small-caps { font-size:9px; letter-spacing:1.4px; }
.product-monogram { display:grid; place-content:center; width:50px; height:50px; flex-shrink:0; border-radius:14px; font-size:24px; font-weight:750; }
.wk { background:#e8dcff; color:#6332ba; }
.duo { background:#e5f4d6; color:#496c25; }
.cat { background:#fff0cd; color:#79591d; }
.lingo { background:#efe3ff; color:#754ba6; }
.dino { background:#dff3ec; color:#326e59; }
.drops { background:#fde5db; color:#a64a2c; }
.publisher-tag { margin-left:auto; font-size:14px; border:1px solid #d9c8ee; border-radius:30px; padding:5px 10px; color:var(--purple); white-space:nowrap; }
.product-intro { max-width:960px; font-size:16px; }
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:44px; padding-block:25px; }
.pros-cons h4::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#4b8066; margin-right:9px; vertical-align:middle; }
.pros-cons > div:nth-child(2) h4::before { background:#aa7445; }
.pros-cons p,.product-meta { font-size:16px; color:var(--muted); }
.product-meta { padding-bottom:22px; }
.product-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px; border-top:1px solid var(--line); padding-top:17px; font-size:14px; color:var(--muted); }
.product-footer .text-link { font-size:14px; }
.words-section { padding-block:80px; background:#eee8f7; }
.words-section h2 span { color:var(--purple); }
.workflow-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:100px; align-items:center; margin-top:45px; }
.workflow-intro { font-size:17px; }
.workflow-steps { list-style:none; padding:0; margin:28px 0; display:grid; gap:25px; }
.workflow-steps li { display:flex; gap:20px; }
.step-number { display:grid; place-content:center; width:34px; height:34px; flex-shrink:0; color:var(--purple); border:1px solid #d3bde9; border-radius:50%; font-size:13px; font-weight:700; }
.workflow h3 { font-size:20px; letter-spacing:-.5px; margin:4px 0 8px; }
.workflow-steps p { font-size:16px; color:var(--muted); }
.example-note { padding:19px 23px; border-radius:10px; background:#fff9; margin-bottom:28px; font-size:16px; }
.example-note p { margin-top:7px; color:var(--muted); }
.access-note { margin-top:16px; font-size:14px; color:var(--muted); }
.library-figure { justify-self:center; width:min(300px,100%); text-align:center; }
.library-frame { padding:0; background:radial-gradient(ellipse,#d0b7ef,transparent 70%); }
.library-frame img { width:285px; margin-inline:auto; filter:drop-shadow(0 18px 20px #34224526); }
.library-figure figcaption { font-size:14px; color:var(--muted); text-align:center; margin-top:16px; }
.method-grid { display:grid; grid-template-columns:1fr 1fr; gap:65px; margin-top:32px; }
.method-grid h3 { font-size:20px; margin-bottom:15px; }
.method-grid p,.method-note { font-size:16px; color:var(--muted); }
.method-note { margin-top:28px; background:#f1eef5; border-radius:10px; padding:20px 24px; }
.faq-section h2 { margin-bottom:32px; }
details { border-top:1px solid var(--line); padding-block:20px; }
details:last-child { border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-size:17px; font-weight:650; padding-right:18px; }
details p { padding-top:17px; font-size:16px; color:var(--muted); max-width:950px; }
.final-cta { text-align:center; padding:65px 25px; background:#f0eafa; border-radius:20px; margin-block:65px; }
.final-cta h2 { margin-bottom:22px; }
.final-cta > p:not(.eyebrow) { color:var(--muted); font-size:16px; margin-bottom:26px; }
.final-cta .text-link { display:block; width:fit-content; margin:14px auto 0; }
.related-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding-bottom:50px; }
.related-links h2 { grid-column:1/-1; font-size:19px; margin-bottom:8px; letter-spacing:-.5px; }
.related-links a { font-size:14px; padding-block:13px; border-top:1px solid var(--line); display:flex; gap:15px; justify-content:space-between; }
.site-footer { display:flex; gap:30px; align-items:center; padding-block:30px; border-top:1px solid var(--line); }
.site-footer .wordmark img { width:120px; }
.site-footer p { color:var(--muted); font-size:14px; flex:1; }
.site-footer > a:last-child { font-size:14px; }

/* Editorial highlights use learning goals rather than measured ratings. */
.hero-reassurance { margin-top:19px; color:var(--purple); font-size:14px; font-weight:650; }
.editor-pick { display:grid; grid-template-columns:1.2fr 1fr; gap:55px; padding:38px 42px; margin-bottom:32px; background:linear-gradient(120deg,#3b205f,#6236ab); color:white; border:1px solid #794ebe; border-radius:20px; box-shadow:0 16px 35px #53387918; }
.pick-badge { display:inline-block; padding:6px 11px; border:1px solid #bca2e5; border-radius:30px; color:#f2e9ff; font-size:14px; font-weight:700; letter-spacing:1.1px; }
.pick-brand { color:#e1cbff; font-size:18px; font-weight:750; margin:21px 0 8px; }
.editor-pick h3 { font-size:36px; letter-spacing:-1.3px; margin-bottom:18px; }
.pick-copy > p:last-child { font-size:16px; color:#eee4fc; max-width:520px; line-height:1.8; }
.pick-action { display:flex; flex-direction:column; justify-content:center; }
.pick-steps { padding:0; margin:0 0 25px; list-style:none; display:grid; gap:12px; font-size:14px; font-weight:600; }
.pick-steps li { display:flex; align-items:center; gap:12px; }
.pick-steps li::before { content:"→"; display:grid; place-content:center; flex-shrink:0; width:27px; height:27px; border:1px solid #a583d1; border-radius:50%; color:#ffda8d; }
.pick-action .button { background:#ffe1a1; border-color:#ffe1a1; color:#3b205f; box-shadow:0 5px 0 #26133c55; font-size:14px; gap:15px; }
.pick-action .button:hover { background:#ffedc7; }
.pick-limit { margin-top:17px; color:#e2d4ef; font-size:14px; line-height:1.7; }
.table-kicker { font-size:10px; font-weight:750; letter-spacing:1.7px; color:var(--muted); margin-bottom:13px; }
.demo-section { display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center; padding:48px; margin-block:25px 50px; border:1px solid #e4d7f3; border-radius:24px; background:radial-gradient(ellipse at 80% 30%,#dac7f0,transparent 65%),#f0e9f8; }
.demo-copy h2 { font-size:44px; margin-bottom:23px; }
.demo-copy h2 span { color:var(--purple); }
.demo-intro { color:var(--muted); font-size:16px; line-height:1.8; }
.demo-points { list-style:none; padding:0; margin:26px 0; display:grid; gap:20px; }
.demo-points li { border-left:3px solid #b998df; padding-left:16px; }
.demo-points strong { display:block; font-size:15px; }
.demo-points span { display:block; margin-top:4px; color:var(--muted); font-size:14px; }
.demo-copy .button { font-size:14px; gap:13px; }
.demo-note { margin-top:18px; color:var(--muted); font-size:14px; max-width:430px; }
.demo-video { justify-self:center; width:min(310px,100%); text-align:center; }
.hero-video-frame { border-radius:28px; padding:7px; background:#2b1c44; box-shadow:0 24px 45px #39245d2b; overflow:hidden; }
.demo-video video { display:block; width:100%; height:auto; aspect-ratio:628 / 1280; border-radius:21px; background:#211936; }
.demo-video figcaption { margin-top:15px; color:var(--muted); font-size:14px; }

@media (min-width:1400px) { h1 { font-size:68px; } }
@media (max-width:1100px) {
    .hero { gap:30px; }
    .goal-grid { grid-template-columns:1fr 1fr; }
    .workflow-grid { gap:55px; }
}
@media (max-width:800px) {
    .editor-pick,.demo-section { grid-template-columns:1fr; }
    .pick-copy { max-width:650px; }
    .pick-action { max-width:480px; }
    .demo-copy { max-width:620px; }
    .wrap { width:calc(100% - 40px); }
    .site-header { min-height:84px; gap:14px; }
    .wordmark img { width:132px; }
    .site-header nav { gap:18px; }
    .site-header nav > a:not(.button) { display:none; }
    .hero { grid-template-columns:1fr; padding-top:38px; gap:35px; }
    h1 { font-size:clamp(43px,8vw,62px); max-width:650px; }
    .hero-copy { max-width:650px; }
    .hero-visual { width:min(520px,100%); justify-self:center; margin-inline:8px; }
    .section { padding-block:55px; }
    .editor-pick { gap:30px; padding:30px; }
    .demo-section { gap:35px; padding:32px; }
    .demo-copy h2 { font-size:35px; }
    .section-heading { display:block; }
    .section-heading > p { margin-top:19px; max-width:540px; }
    .contents { gap:13px 20px; }
    .contents > span { width:100%; }
    table,tbody,thead,tr,th,td { display:block; width:100%; }
    caption { display:block; width:100%; }
    thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    tbody tr { padding:22px; border-bottom:1px solid var(--line); }
    tbody tr:last-child { border-bottom:none; }
    tbody th:first-child { width:100%; font-size:21px; padding:0 0 14px; }
    tbody td,tbody td:nth-child(2),tbody td:nth-child(3) { width:100%; padding:8px 0; border:none; }
    tbody th { border:none; }
    tbody td::before { content:attr(data-label); display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.9px; font-size:14px; font-weight:700; margin-bottom:3px; }
    .table-badge { display:inline-block; margin:0 0 0 14px; vertical-align:middle; font-size:14px; }
    .pros-cons { gap:28px; }
    .product-card { padding:26px; }
    .workflow-grid { grid-template-columns:1fr; gap:38px; }
    .words-section { padding-block:55px; }
    .library-figure { max-width:260px; }
    .method-grid { gap:35px; }
    .related-links { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
    body { font-size:16px; }
    .wrap { width:calc(100% - 36px); }
    .site-header .button-small { font-size:14px; padding:10px 12px; gap:10px; }
    .site-header .wordmark img { width:120px; }
    .eyebrow { font-size:9px; letter-spacing:1.3px; }
    h1 { font-size:43px; }
    .intro { font-size:18px; }
    .hero-description { font-size:15px; }
    .hero-actions { gap:10px 20px; }
    .disclosure { padding:17px; }
    .goal-grid,.pros-cons,.method-grid,.editor-pick,.demo-section { grid-template-columns:1fr; }
    .editor-pick { padding:25px 22px; gap:25px; }
    .editor-pick h3 { font-size:30px; }
    .pick-brand { margin-top:18px; }
    .pick-badge { font-size:14px; letter-spacing:.7px; }
    .pick-action .button { padding:15px 12px; font-size:14px; gap:9px; }
    .demo-section { padding:28px 22px; }
    .demo-video { width:min(275px,100%); }
    .hero-art-ribbon { margin:-23px 8px 0; padding:13px; font-size:14px; }
    .hero-art-frame { border-width:3px; border-radius:18px; transform:none; }
    .hero-actions > .button { font-size:14px; padding:15px; gap:12px; }
    .hero-reassurance { font-size:14px; line-height:1.8; }
    .goal-card { padding:24px; }
    .goal-card h3 br { display:none; }
    .goal-number { margin-bottom:14px; }
    .goal-card p { margin-bottom:15px; }
    .product-card { padding:23px 20px; }
    .product-top { gap:13px; flex-wrap:wrap; }
    .product-top .small-caps { font-size:8px; letter-spacing:.8px; }
    .product-top h3 { font-size:26px; }
    .product-monogram { width:43px; height:43px; border-radius:12px; }
    .publisher-tag { margin-left:56px; margin-top:-12px; }
    .pros-cons { gap:23px; }
    .final-cta { padding:45px 20px; margin-block:48px; }
    .final-cta .button,.workflow > .button { font-size:14px; padding:15px; gap:12px; }
    .related-links { gap:13px; }
    .site-footer { flex-wrap:wrap; gap:15px; }
    .site-footer p { flex-basis:100%; order:3; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print {
    .site-header nav,.hero-actions,.contents,.final-cta,.button { display:none; }
    body { background:white; font-size:11pt; }
    .wrap { width:100%; }
    .section { padding-block:25px; }
    .product-card,details { break-inside:avoid; }
}