:root { --learn-green:#b7dc69; --learn-panel:rgba(20,23,18,.9); --learn-border:rgba(183,220,105,.16); --learn-muted:#858c80; }
.learn-body { min-width:320px; overflow-x:hidden; background:#0d0f0c; }
.learn-body .dash-bg { filter:grayscale(.65) saturate(.6); }
.learn-page { width:min(1240px,calc(100% - 40px)); margin:0 auto; padding:112px 0 72px; }
.learn-hero { --learn-image:none; position:relative; min-height:390px; display:flex; align-items:flex-end; overflow:hidden; padding:clamp(26px,5vw,62px); border:1px solid var(--learn-border); border-radius:24px; background:linear-gradient(90deg,rgba(8,10,7,.97) 0%,rgba(8,10,7,.83) 45%,rgba(8,10,7,.32) 100%),var(--learn-image) center/cover; box-shadow:0 26px 75px rgba(0,0,0,.28); }
.learn-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,10,7,.75),transparent 50%); pointer-events:none; }
.learn-hero-content { position:relative; z-index:1; max-width:710px; }
.learn-eyebrow { margin:0; color:var(--learn-green); font-size:.68rem; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }
.learn-hero h1 { margin:9px 0 12px; color:#f4f6f1; font-size:clamp(2.7rem,6vw,5.8rem); line-height:.9; letter-spacing:-.065em; }
.learn-hero p:last-of-type { max-width:650px; margin:0; color:#a0a69b; font-size:clamp(.88rem,1.4vw,1.06rem); line-height:1.6; }
.learn-hero-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.learn-hero-actions a { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:0 18px; border-radius:999px; font-size:.7rem; font-weight:800; text-decoration:none; }
.learn-primary { color:#172016; background:var(--learn-green); }
.learn-secondary { color:#b7bdb2; border:1px solid rgba(255,255,255,.11); background:rgba(12,14,11,.55); backdrop-filter:blur(8px); }
.learn-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:38px 0 15px; }
.learn-heading h2 { margin:6px 0 0; color:#eef1eb; font-size:clamp(1.55rem,3vw,2.2rem); letter-spacing:-.04em; }
.learn-heading > p { max-width:420px; margin:0; color:#747b70; font-size:.7rem; line-height:1.5; text-align:right; }
.learn-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.learn-card { min-width:0; min-height:245px; display:flex; flex-direction:column; padding:24px; border:1px solid rgba(255,255,255,.075); border-radius:18px; background:linear-gradient(145deg,rgba(183,220,105,.035),transparent 48%),var(--learn-panel); transition:transform .2s,border-color .2s; text-decoration:none; }
.learn-card:hover { border-color:rgba(183,220,105,.29); transform:translateY(-3px); }
.learn-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#77806f; font-size:.61rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.learn-card-top i { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--learn-green); background:rgba(183,220,105,.08); font-style:normal; }
.learn-card h2 { margin:25px 0 9px; color:#edf0ea; font-size:1.18rem; line-height:1.15; letter-spacing:-.035em; }
.learn-card > p { margin:0; color:#7f867b; font-size:.72rem; line-height:1.55; }
.learn-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:20px; color:#66705f; font-size:.63rem; }
.learn-card footer strong { color:#9eb873; }
.learn-grid--published { grid-template-columns:1fr; gap:16px; }
.learn-grid--published .learn-card { min-height:0; display:grid; grid-template-columns:minmax(300px,1.05fr) minmax(300px,.95fr); padding:0; overflow:hidden; }
.learn-card-media { min-width:0; margin:0; aspect-ratio:16/9; overflow:hidden; background:#11140f; }
.learn-card-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .35s ease; }
.learn-card-content { min-width:0; display:flex; flex-direction:column; padding:clamp(24px,4vw,42px); }
.learn-card-content h2 { margin:clamp(24px,4vw,38px) 0 10px; font-size:clamp(1.35rem,2.5vw,2rem); }
.learn-card-content > p { margin:0; color:#7f867b; font-size:.78rem; line-height:1.65; }
.learn-grid--published .learn-card:hover .learn-card-media img { transform:scale(1.025); }
.learn-coming-soon { min-height:300px; display:grid; grid-template-columns:minmax(190px,.42fr) minmax(0,1fr); align-items:stretch; overflow:hidden; border:1px solid var(--learn-border); border-radius:20px; background:var(--learn-panel); }
.learn-coming-soon-mark { position:relative; min-height:300px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,rgba(183,220,105,.2),rgba(183,220,105,.035)); }
.learn-coming-soon-mark::before,.learn-coming-soon-mark::after { content:''; position:absolute; border:1px solid rgba(183,220,105,.18); border-radius:50%; }
.learn-coming-soon-mark::before { width:210px; height:210px; }
.learn-coming-soon-mark::after { width:130px; height:130px; }
.learn-coming-soon-mark span { position:relative; z-index:1; color:var(--learn-green); font-size:4.5rem; font-weight:900; letter-spacing:-.08em; }
.learn-coming-soon-copy { align-self:center; padding:clamp(28px,5vw,58px); }
.learn-coming-soon-copy > span { display:inline-flex; padding:7px 11px; border-radius:999px; color:var(--learn-green); background:rgba(183,220,105,.08); font-size:.58rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.learn-coming-soon-copy h2 { max-width:650px; margin:18px 0 10px; color:#edf0ea; font-size:clamp(1.65rem,3vw,2.5rem); line-height:1.05; letter-spacing:-.045em; }
.learn-coming-soon-copy p { max-width:650px; margin:0; color:#7f867b; font-size:.76rem; line-height:1.65; }
.learn-coming-soon-copy > div { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.learn-coming-soon-copy > div span { padding:7px 10px; border:1px solid rgba(255,255,255,.075); border-radius:999px; color:#9ba397; font-size:.58rem; font-weight:700; }
.learn-resource { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; margin-top:14px; }
.learn-resource > article,.learn-resource > aside { min-width:0; padding:clamp(22px,3vw,31px); border:1px solid var(--learn-border); border-radius:19px; background:var(--learn-panel); }
.learn-resource h2 { margin:6px 0 9px; color:#e9ede6; font-size:1.4rem; letter-spacing:-.035em; }
.learn-resource p { margin:0; color:#7f867b; font-size:.73rem; line-height:1.6; }
.learn-resource-links { display:grid; gap:8px; margin-top:18px; }
.learn-resource-links a { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 13px; border:1px solid rgba(255,255,255,.075); border-radius:11px; color:#aeb4aa; background:rgba(255,255,255,.022); font-size:.69rem; font-weight:700; text-decoration:none; }
.learn-resource-links a:hover { color:#172016; border-color:var(--learn-green); background:var(--learn-green); }
.learn-note { margin-top:14px; padding:15px 17px; border-left:2px solid var(--learn-green); border-radius:0 12px 12px 0; color:#868d82; background:rgba(183,220,105,.05); font-size:.67rem; line-height:1.55; }
@media (max-width:900px) { .learn-page { width:min(100% - 28px,720px); padding-top:104px; } .learn-grid { grid-template-columns:1fr 1fr; } .learn-resource { grid-template-columns:1fr; } }
@media (max-width:700px) { .learn-grid--published .learn-card { grid-template-columns:1fr; } .learn-card-media { width:100%; } .learn-coming-soon { grid-template-columns:1fr; } .learn-coming-soon-mark { min-height:180px; } .learn-coming-soon-mark::before { width:150px; height:150px; } .learn-coming-soon-mark::after { width:95px; height:95px; } .learn-coming-soon-mark span { font-size:3.5rem; } }
@media (max-width:600px) { .learn-page { width:min(100% - 24px,540px); padding-bottom:50px; } .learn-hero { min-height:360px; padding:23px; border-radius:18px; background-position:62% center; } .learn-grid { grid-template-columns:1fr; } .learn-heading { align-items:start; flex-direction:column; } .learn-heading > p { text-align:left; } .learn-card { min-height:220px; padding:20px; } .learn-grid--published .learn-card { min-height:0; padding:0; } .learn-card-content { padding:22px; } }
@media (prefers-reduced-motion:reduce) { .learn-card,.learn-card-media img { transition:none; } }