/* Unified premium lesson presentation. 2026. Scoped to existing /ogren/* tutorials. */
.ss-learning-page{
 --primary:#176b65;--primary-hover:#176b65;--success:#147e60;--danger:#bf2450;
 --warning:#d89430;--bg-dark:#eaf3f2;--bg-card:#fff;--border:#eaf3f2;
 --text-main:#133448;--text-light:#0a2132;--text-muted:#607084;
 color:#0a2132;background:#eaf3f2;max-width:100%;overflow:clip;
 font-family:Inter,"Segoe UI",system-ui,sans-serif;
}
.ss-learning-page *,.ss-learning-page *::before,.ss-learning-page *::after{box-sizing:border-box}
.ss-learning-page :is(h1,h2,h3,h4,h5,h6){letter-spacing:-.02em;overflow-wrap:break-word}
.ss-learning-page :is(a,button):focus-visible{outline:3px solid #85dfd0!important;outline-offset:3px}
.ss-learning-page a{transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .2s ease}
.ss-learning-page .breadcrumb-section{background:#eaf3f2!important;border-bottom:1px solid #eaf3f2!important;padding:14px 0!important}
.ss-learning-page .breadcrumb-section .container-custom{max-width:1280px;width:calc(100% - 40px);margin-inline:auto}
.ss-learning-page .breadcrumb-nav{color:#6d7789!important;gap:10px!important;font-size:12px}
.ss-learning-page .breadcrumb-nav a{color:#526b7b!important}
.ss-learning-page .breadcrumb-current{color:#176b65!important}
.ss-learning-page section.page-hero{
 position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(340px,.95fr)!important;
 gap:clamp(23px,4vw,60px)!important;align-items:center!important;
 padding:clamp(55px,6vw,95px) max(26px,calc((100vw - 1300px)/2))!important;
 background:radial-gradient(ellipse at 75% 10%,#526b7b56,transparent 53%),linear-gradient(115deg,#0a2132,#0a2132 65%,#133448)!important;
 background-color:#0a2132!important;color:#fff!important;isolation:isolate;overflow:hidden!important;
}
.ss-learning-page section.page-hero::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,#176b65,transparent)}
.ss-learning-page .page-hero>.container-custom{grid-column:1!important;grid-row:1!important;min-width:0;width:100%!important;max-width:690px!important;position:relative!important;z-index:2;padding:0!important;margin:0!important}
.ss-learning-page .page-hero .hero-content{text-align:left!important;color:#fff}
.ss-learning-page .page-hero .hero-glow-1{background:#176b6529!important}
.ss-learning-page .page-hero .hero-glow-2{background:#176b6535!important}
.ss-learning-page .page-hero .hero-badge{display:inline-flex!important;align-items:center!important;color:#eaf3f2!important;border:1px solid #85dfd068!important;
 background:#ffffff12!important;border-radius:100px!important;font-size:11px!important;font-weight:780!important;letter-spacing:.10em;padding:10px 15px!important;margin:0 0 26px!important}
.ss-learning-page .page-hero .hero-badge :is(i,span){color:#eaf3f2!important;-webkit-text-fill-color:#eaf3f2!important}
.ss-learning-page .page-hero .hero-title{max-width:820px!important;font-size:clamp(37px,4.1vw,69px)!important;line-height:1.12!important;
 color:#fff!important;-webkit-text-fill-color:#fff!important;letter-spacing:-.047em!important;font-weight:860!important;text-align:left!important;margin:0 0 22px!important}
.ss-learning-page .page-hero .hero-title .gradient-text{background:none!important;filter:none!important;color:#85dfd0!important;-webkit-text-fill-color:#85dfd0!important}
.ss-learning-page .page-hero .hero-subtitle{color:#e2d5e0!important;-webkit-text-fill-color:#e2d5e0!important;max-width:650px!important;font-size:15px!important;line-height:1.83!important;margin:0 0 25px!important;text-align:left!important}
.ss-learning-page .page-hero .hero-stats{display:flex!important;justify-content:flex-start!important;gap:9px!important;margin:23px 0 0!important;flex-wrap:wrap!important}
.ss-learning-page .page-hero .hero-stat{display:flex!important;align-items:center!important;gap:9px!important;padding:12px 14px!important;background:#ffffff12!important;
 border:1px solid #ffffff3d!important;border-radius:11px!important;min-width:0!important}
.ss-learning-page .page-hero .stat-icon{color:#85dfd0!important;font-size:17px!important}
.ss-learning-page .page-hero .stat-value{color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:800!important;font-size:13px!important}
.ss-learning-page .page-hero .stat-label{color:#85dfd0!important;-webkit-text-fill-color:#85dfd0!important;font-size:10px!important}
.ss-learning-page .page-hero .reading-progress-container{margin:26px 0 0!important;width:min(100%,450px)!important;height:4px!important;background:#ffffff28!important}
.ss-learning-page .page-hero .reading-progress-bar{background:linear-gradient(90deg,#85dfd0,#eaf3f2)!important}
.ss-learning-page .ss-lesson-art{position:relative!important;z-index:1!important;grid-column:2!important;grid-row:1!important;min-width:0!important;width:100%!important;
 margin:0!important;overflow:hidden!important;border-radius:19px!important;border:1px solid #ffffff40!important;
 box-shadow:0 24px 55px #0a213291!important;transform:rotate(1deg);aspect-ratio:1200/760}
.ss-learning-page .ss-lesson-art img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;max-width:none!important}
.ss-learning-page .quick-access-section{padding:64px 0!important;background:#fff!important;border-color:#e7e7ee!important}
.ss-learning-page :is(.quick-access-section,.content-section,.faq-section,.cta-section)>.container-custom{
 width:min(1280px,calc(100% - 40px))!important;max-width:1280px!important;margin-inline:auto!important}
.ss-learning-page .section-header{text-align:left!important;margin:0 0 25px!important}
.ss-learning-page .section-header .badge{display:inline-flex!important;align-items:center!important;padding:9px 15px!important;border:1px solid #85dfd0!important;background:#eaf3f2!important;color:#176b65!important;font-size:10px!important;font-weight:850!important;letter-spacing:.12em}
.ss-learning-page .section-header .section-title{color:#0a2132!important;font-size:clamp(29px,3vw,46px)!important;letter-spacing:-.035em!important;line-height:1.2!important;text-align:left!important;margin:12px 0 0!important}
.ss-learning-page .section-header .section-title span{color:#176b65!important}
.ss-learning-page .quick-card{background:#eaf3f2!important;border:1px solid #eaf3f2!important;border-radius:16px!important;padding:23px!important;
 box-shadow:0 8px 21px #0a21320c!important;text-align:left!important}
.ss-learning-page .quick-card:hover{border-color:#85dfd0!important;background:#eaf3f2!important;transform:translateY(-3px)}
.ss-learning-page .quick-card .quick-icon{background:#eaf3f2!important;color:#176b65!important;border:1px solid #85dfd0!important;border-radius:12px!important;
 margin:0 0 16px!important;width:51px!important;height:51px!important}
.ss-learning-page .quick-card h3{color:#0a2132!important;font-size:17px!important;line-height:1.35!important;margin-bottom:8px!important}
.ss-learning-page .quick-card p{color:#607083!important;line-height:1.68!important}
.ss-learning-page .content-section{background:#eaf3f2!important;padding:60px 0 75px!important}
.ss-learning-page .content-grid{grid-template-columns:minmax(0,1fr) 285px!important;gap:23px!important}
.ss-learning-page .content-main{min-width:0!important}
.ss-learning-page article.content-block{opacity:1!important;transform:none!important;border:1px solid #eaf3f2!important;border-radius:19px!important;
 background:#fff!important;color:#133448!important;padding:clamp(22px,3vw,39px)!important;box-shadow:0 12px 34px #0a21320c!important;margin-bottom:22px!important}
.ss-learning-page article.content-block .block-header{border-bottom:1px solid #e8e7ec!important;padding:0 0 18px!important;margin-bottom:22px!important}
.ss-learning-page article.content-block .block-header h2{color:#0a2132!important;font-size:clamp(23px,2.1vw,32px)!important;line-height:1.26!important}
.ss-learning-page article.content-block .block-icon{flex:none;background:#eaf3f2!important;color:#176b65!important;border:1px solid #85dfd0!important;
 border-radius:13px!important;width:54px!important;height:54px!important}
.ss-learning-page article.content-block .block-number{color:#176b65!important;font-size:10px!important}
.ss-learning-page article.content-block :is(h3,h4,h5){color:#133448!important;line-height:1.35!important}
.ss-learning-page article.content-block :is(p,li){color:#133448!important;line-height:1.8!important}
.ss-learning-page article.content-block .lead-text{color:#133448!important;font-size:15px!important;line-height:1.85!important}
.ss-learning-page article.content-block :is(.comparison-table-wrapper,.table-responsive){overflow-x:auto!important;max-width:100%!important;border-radius:12px}
.ss-learning-page article.content-block table{width:100%;max-width:100%;border-collapse:collapse}
.ss-learning-page article.content-block table :is(td,th){padding:12px 13px!important;vertical-align:top}
.ss-learning-page article.content-block table th{background:#133448!important;color:#fff!important;font-weight:730!important}
.ss-learning-page article.content-block table td{color:#133448!important;background:#fff!important;border-color:#eaf3f2!important}
.ss-learning-page article.content-block table tr:nth-child(even) td{background:#eaf3f2!important}
.ss-learning-page :is(.sidebar-card,.faq-item,.attack-card,.principle-card,.fw-card,.network-architecture>*,.vpn-card,.tools-grid>*,.checklist-item,.info-box){
 border-radius:13px!important;border-color:#eaf3f2!important}
.ss-learning-page .sidebar-card{background:#fff!important;border:1px solid #eaf3f2!important;box-shadow:0 9px 24px #0a21320b!important;padding:23px!important}
.ss-learning-page .sidebar-card h4{color:#0a2132!important}.ss-learning-page .sidebar-card :is(p,small,li){color:#526b7b!important}
.ss-learning-page .sidebar-card .toc-list a{color:#526b7b!important;font-size:12px!important;border-radius:8px!important}
.ss-learning-page .sidebar-card .toc-list a:hover{color:#526b7b!important;background:#eaf3f2!important}
.ss-learning-page .content-block :is(.info-box,.warning-box,.quiz-question,.quiz-options,.quiz-feedback){max-width:100%}
.ss-learning-page .content-block .info-box :is(h4,p,.info-icon){color:#133448!important}
.ss-learning-page .content-block :is(.quiz-option,.quiz-question){color:#133448!important}
.ss-learning-page .content-block .quiz-option{background:#eaf3f2!important;color:#133448!important;border-color:#eaf3f2!important;border-radius:10px!important;min-height:48px!important}
.ss-learning-page .content-block .quiz-option:hover{border-color:#176b65!important}
.ss-learning-page .content-block .quiz-option.correct{background:#eaf3f2!important;border-color:#526b7b!important;color:#133448!important}
.ss-learning-page .content-block .quiz-option.incorrect{background:#eaf3f2!important;border-color:#176b65!important;color:#526b7b!important}
.ss-learning-page .content-block .quiz-header h4{color:#176b65!important}
.ss-learning-page .content-block .quiz-progress{background:#eaf3f2!important;color:#526b7b!important}
.ss-learning-page .faq-section{background:#fff!important;padding:65px 0!important}
.ss-learning-page .faq-item{background:#eaf3f2!important;border:1px solid #eaf3f2!important;padding:25px!important}
.ss-learning-page .faq-item :is(h3,h4){color:#0a2132!important}.ss-learning-page .faq-item p{color:#526b7b!important}
.ss-learning-page .cta-section{background:linear-gradient(125deg,#133448,#526b7b)!important;padding:64px 0!important;color:#fff!important}
.ss-learning-page .cta-section :is(.cta-title,h2,h3){color:#fff!important}
.ss-learning-page .cta-section :is(.cta-subtitle,p){color:#bfd2db!important}
.ss-learning-page .cta-section .btn-accent{background:#fff!important;border-color:#fff!important;color:#526b7b!important;box-shadow:none!important}
.ss-learning-page .cta-section .btn-outline-light{border:1px solid #bfd2db70!important;color:#fff!important;background:#ffffff13!important}
.ss-learning-page .cta-section .btn-outline-light:hover{background:#ffffff26!important;color:#fff!important}
.ss-learning-page .ss-lesson-back{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap;width:min(1280px,calc(100% - 40px));margin:0 auto;
 padding:26px 0;color:#596b7c;font-size:12px}
.ss-learning-page .ss-lesson-back>a{color:#526b7b!important;font-weight:770}
@media(max-width:1080px){.ss-learning-page section.page-hero{grid-template-columns:1fr!important;padding:54px 30px!important}
 .ss-learning-page .page-hero>.container-custom{grid-column:1!important;grid-row:1!important;max-width:800px!important}
 .ss-learning-page .ss-lesson-art{grid-column:1!important;grid-row:2!important;max-width:760px!important}
 .ss-learning-page .content-grid{grid-template-columns:minmax(0,1fr)!important}
 .ss-learning-page .content-sidebar{position:relative!important;top:auto!important}
}
@media(max-width:640px){.ss-learning-page section.page-hero{padding:40px 16px!important;gap:29px!important}
 .ss-learning-page .page-hero .hero-title{font-size:clamp(32px,8.6vw,46px)!important}
 .ss-learning-page .page-hero .hero-subtitle{font-size:13px!important;line-height:1.8!important}
 .ss-learning-page .page-hero .hero-stats{gap:7px!important}
 .ss-learning-page .page-hero .hero-stat{padding:10px!important}
 .ss-learning-page .page-hero .stat-label{font-size:9px!important}
 .ss-learning-page .ss-lesson-art{border-radius:13px!important;transform:none!important}
 .ss-learning-page :is(.quick-access-section,.content-section,.faq-section,.cta-section)>.container-custom{width:calc(100% - 26px)!important}
 .ss-learning-page .quick-access-section{padding:42px 0!important}
 .ss-learning-page .section-header .section-title{font-size:clamp(27px,7.7vw,37px)!important}
 .ss-learning-page .content-section{padding:39px 0!important}
 .ss-learning-page .content-block{padding:20px 16px!important}
 .ss-learning-page .content-block .block-header{align-items:flex-start!important}
 .ss-learning-page .content-block .block-header h2{font-size:22px!important}
 .ss-learning-page .content-block .block-icon{width:45px!important;height:45px!important}
 .ss-learning-page .comparison-table-wrapper{overflow-x:auto!important}
 .ss-learning-page .faq-section{padding:45px 0!important}
 .ss-learning-page .cta-section{padding:45px 0!important}
 .ss-learning-page .ss-lesson-back{width:calc(100% - 26px)}
}
@media(prefers-reduced-motion:reduce){.ss-learning-page *{scroll-behavior:auto!important;animation-duration:0.01ms!important;transition-duration:0.01ms!important}}

/* The shared page framework applies forceful section backgrounds. */
html body #main-content .ss-learning-page section.page-hero{
 background:radial-gradient(ellipse at 73% 10%,#526b7b44,transparent 48%),linear-gradient(112deg,#0a2132,#0a2132 65%,#133448)!important;
 background-color:#0a2132!important;border:0!important;color:#fff!important;
}
html body #main-content .ss-learning-page section.page-hero>.container-custom,
html body #main-content .ss-learning-page section.page-hero .hero-content,
html body #main-content .ss-learning-page section.page-hero .hero-stats{
 background:transparent!important;
}
html body #main-content .ss-learning-page section.page-hero h1.hero-title{
 color:#fff!important;-webkit-text-fill-color:#fff!important;
}
html body #main-content .ss-learning-page section.page-hero h1.hero-title .gradient-text{
 color:#85dfd0!important;-webkit-text-fill-color:#85dfd0!important;
}
html body #main-content .ss-learning-page section.page-hero p.hero-subtitle{
 color:#eaf3f2!important;-webkit-text-fill-color:#eaf3f2!important;
}
html body #main-content .ss-learning-page section.page-hero .hero-badge{
 background:#ffffff19!important;color:#eaf3f2!important;-webkit-text-fill-color:#eaf3f2!important;
}
html body #main-content .ss-learning-page section.page-hero .hero-stat{
 background:#ffffff10!important;border:1px solid #ffffff4a!important;
}
html body #main-content .ss-learning-page section.page-hero .hero-stat .stat-value{
 color:#fff!important;-webkit-text-fill-color:#fff!important;
}
html body #main-content .ss-learning-page section.page-hero .hero-stat .stat-label{
 color:#85dfd0!important;-webkit-text-fill-color:#85dfd0!important;
}
@media(max-width:640px){
 html body #main-content .ss-learning-page section.page-hero h1.hero-title{
 font-size:clamp(31px,7.8vw,43px)!important;line-height:1.18!important;
 overflow-wrap:anywhere!important;
 }
}