.online-editorial { --oc-bg:#f2eee4; --oc-surface:#fbf8f1; --oc-ink:#0e3b2e; --oc-muted:#496758; background:var(--oc-bg); color:var(--oc-ink); font-family:'Aeonik Pro',Inter,'Helvetica Neue',Arial,sans-serif; }
.online-editorial *, .online-editorial *::before, .online-editorial *::after { box-sizing:border-box; }
.online-editorial h1 { font-size:clamp(30px,4vw,44px)!important; line-height:1.12; }
.online-editorial h2 { margin:0; font:700 clamp(24px,2.4vw,30px)/1.2 'Aeonik Pro',Inter,'Helvetica Neue',Arial,sans-serif; letter-spacing:-.025em; }
.online-editorial h3 { margin:0; font-size:19px; font-weight:600; line-height:1.35; }
.online-editorial a { color:inherit; }
.online-editorial :focus-visible { outline:2px solid var(--oc-ink); outline-offset:4px; }
.online-editorial [x-cloak] { display:none!important; }
.online-editorial #online-hero > div { background:var(--oc-bg)!important; }
.online-editorial .course-hero-cta > a { min-height:52px; border-radius:999px!important; color:#fff; }
.online-editorial .course-hero-cta > span { font-weight:600; color:var(--oc-ink)!important; }
.oc-shell { width:min(1320px,calc(100% - 48px)); margin:0 auto; padding-bottom:96px; }
.oc-section { display:flex; flex-wrap:wrap; gap:32px 64px; align-items:flex-start; padding-top:clamp(64px,8vw,104px); }
.oc-section > h2, .oc-section-heading { flex:1 1 300px; }
.oc-section-heading > p { margin:12px 0 0; color:var(--oc-muted); font-size:16px; line-height:1.5; }
.oc-section-content { flex:999 1 560px; max-width:780px; min-width:0; }
.oc-prose { color:#2c5141; font-size:17px; line-height:1.7; }
.oc-prose p { margin:0 0 20px; }
.oc-prose > p:first-child { font-size:18px; line-height:1.65; }
.oc-prose h2, .oc-prose h3 { margin:28px 0 16px; font-size:19px; }
.oc-prose ul, .oc-prose ol { margin:16px 0 24px; padding-left:24px; }
.oc-prose a { text-decoration:underline; text-underline-offset:3px; }
.oc-learning { margin-top:32px; }
.oc-learning h3 { margin-bottom:20px; }
.oc-learning ul { display:block; columns:2; column-gap:32px; padding:28px; margin:0; border-radius:24px; background:var(--oc-surface); list-style:none; color:#2c5141; font-size:17px; line-height:1.6; }
.oc-learning li { break-inside:avoid; padding-bottom:22px; }
.oc-learning li:last-child { padding-bottom:0; }
.oc-chapter + .oc-chapter { margin-top:32px; }
.oc-chapter h3 { display:flex; align-items:baseline; gap:16px; margin-bottom:14px; font-size:18px; }
.oc-chapter h3 > span { flex:none; font-size:15px; font-weight:400; color:var(--oc-muted); }
.oc-lecture-list { display:grid; gap:10px; }
.oc-lecture { display:flex; align-items:center; gap:20px; min-height:90px; padding:10px 18px 10px 10px; border-radius:22px; background:var(--oc-surface); text-decoration:none; }
.oc-lecture-thumb { position:relative; flex:none; width:128px; aspect-ratio:16/9; overflow:hidden; border-radius:14px; }
.oc-lecture-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.oc-lecture-thumb > span { position:absolute; top:50%; left:50%; display:grid; place-items:center; width:34px; height:34px; padding-left:2px; border-radius:50%; background:var(--oc-surface); color:var(--oc-ink); font-size:12px; transform:translate(-50%,-50%); }
.oc-lecture-title { flex:1; min-width:0; font-size:17px; line-height:1.45; }
.oc-duration { flex:none; color:var(--oc-muted); font-size:15px; font-variant-numeric:tabular-nums; }
.oc-all-content > summary { display:inline-flex; align-items:center; justify-content:center; min-height:48px; margin-top:28px; padding:12px 24px; border:1px solid #8b9e8f; border-radius:999px; list-style:none; font-size:16px; font-weight:600; cursor:pointer; }
.oc-all-content > div { padding-top:32px; }
.oc-all-content[open] > summary { margin-bottom:0; }
.oc-show-less, details[open] > summary .oc-show-all { display:none; }
details[open] > summary .oc-show-less { display:inline; }
.oc-all-content summary::-webkit-details-marker, .oc-all-reviews summary::-webkit-details-marker { display:none; }
.oc-teacher { display:flex; align-items:center; gap:20px; }
.oc-teacher img { flex:none; width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:50% 30%; }
.oc-teacher p { margin:6px 0 0; color:var(--oc-muted); font-size:16px; line-height:1.5; }
.oc-teacher-bio { margin-top:24px; }
.oc-teacher-bio > p:first-child { font-size:17px; }
.oc-reviews { position:relative; padding-top:clamp(64px,8vw,104px); }
.oc-reviews header { max-width:calc(100% - 220px); margin-bottom:28px; }
.oc-review-layout { display:flex; flex-wrap:wrap; gap:16px; }
.oc-reviews figure { margin:0; padding:28px; border-radius:28px; background:var(--oc-surface); }
.oc-review-featured { display:flex; flex:2 1 520px; flex-direction:column; justify-content:space-between; gap:32px; min-height:240px; }
.oc-review-featured blockquote { margin:0; color:var(--oc-muted); font-size:19px; line-height:1.6; }
.oc-review-side { display:flex; flex:1 1 300px; flex-direction:column; gap:16px; }
.oc-review-side figure { display:flex; flex:1; align-items:center; }
.oc-review-side blockquote, .oc-review-grid blockquote { margin:0; color:#2c5141; font-size:17px; line-height:1.65; }
.oc-all-reviews summary { position:absolute; top:clamp(64px,8vw,104px); right:0; display:flex; align-items:center; min-height:44px; max-width:210px; list-style:none; font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.oc-review-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:16px; padding-top:16px; }
.oc-pricing { padding-top:clamp(64px,8vw,104px); scroll-margin-top:110px; }
.oc-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:40px; }
.oc-plan { position:relative; display:flex; flex-direction:column; padding:32px 28px 28px; border:2px solid transparent; border-radius:24px; background:var(--oc-surface); }
.oc-plan.is-selected { border-color:var(--oc-ink); }
.oc-popular { position:absolute; top:0; left:50%; padding:5px 18px; border-radius:999px; background:var(--oc-ink); color:#fff; font-size:14px; font-weight:600; transform:translate(-50%,-50%); }
.oc-plan h3 { font-size:20px; }
.oc-plan-price { margin:22px 0 12px; font-size:34px; font-weight:700; letter-spacing:-.025em; line-height:1.2; white-space:nowrap; }
.oc-plan-price small { font-size:15px; font-weight:400; letter-spacing:0; }
.oc-plan-description { margin:0 0 28px; color:var(--oc-muted); font-size:16px; line-height:1.6; }
.oc-plan-description span { display:block; }
.oc-plan-select, .oc-plan-continue { display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; margin-top:auto; padding:12px 20px; border:1px solid #8b9e8f; border-radius:999px; background:transparent; color:var(--oc-ink); font:inherit; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }
.oc-plan-continue { background:var(--oc-ink); border-color:var(--oc-ink); color:#fff!important; }
.oc-pricing-note { margin:20px 0 0; color:var(--oc-muted); font-size:15px; line-height:1.6; text-align:center; }
.oc-pricing-note a { display:inline-flex; align-items:center; min-height:44px; color:var(--oc-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.oc-sticky { position:fixed; z-index:60; right:24px; bottom:20px; left:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:760px; margin:0 auto; padding:10px 12px 10px 24px; border-radius:999px; background:rgba(251,248,241,.97); box-shadow:0 12px 32px rgba(14,59,46,.16); backdrop-filter:blur(16px); transition:opacity .2s,transform .2s; }
.oc-sticky[hidden] { display:none; }
.oc-sticky.is-hidden { opacity:0; transform:translateY(calc(100% + 40px)); pointer-events:none; visibility:hidden; }
.oc-sticky > div { min-width:0; }
.oc-sticky strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:16px; font-weight:600; }
.oc-sticky p { margin:4px 0 0; color:var(--oc-muted); font-size:15px; }
.oc-sticky > a { display:flex; flex:none; align-items:center; justify-content:center; gap:16px; min-height:52px; padding:12px 24px; border-radius:999px; background:var(--oc-ink); color:#fff; font-size:16px; font-weight:600; text-decoration:none; }
@media (max-width:1000px) { .oc-plans { gap:12px; } .oc-plan { padding:28px 18px 22px; } .oc-plan-price { font-size:30px; } }
@media (max-width:760px) {
 .oc-shell { padding-bottom:120px; }
 .oc-section { gap:28px; }
 .oc-section > h2, .oc-section-heading { flex-basis:100%; }
 .oc-learning ul { columns:1; padding:24px; }
 .oc-learning li { padding-bottom:20px; }
 .oc-lecture { flex-wrap:wrap; gap:12px; padding:12px; border-radius:18px; }
 .oc-lecture-thumb { width:84px; border-radius:10px; }
 .oc-lecture-title { font-size:16px; flex-basis:calc(100% - 100px); }
 .oc-duration { margin-left:96px; margin-top:-5px; font-size:14px; }
 .oc-teacher { align-items:flex-start; gap:16px; }
 .oc-reviews header { max-width:none; }
 .oc-all-reviews summary { position:static; max-width:none; margin-top:20px; }
 .oc-reviews figure { padding:24px; border-radius:24px; }
 .oc-review-featured { min-height:0; }
 .oc-plans { grid-template-columns:minmax(0,1fr); gap:24px; margin-top:32px; }
 .oc-plan { padding:28px; }
 .oc-plan-price { font-size:34px; }
 .oc-sticky { right:12px; left:12px; bottom:calc(12px + env(safe-area-inset-bottom)); gap:12px; padding:8px 8px 8px 16px; }
 .oc-sticky strong { font-size:15px; }
 .oc-sticky > a { min-height:48px; padding:12px 18px; }
 .oc-sticky > a span { display:none; }
}
@media (prefers-reduced-motion:reduce) { .oc-sticky { transition:none; } }