/* ============================================================
   Sublime LMS — Resource DETAIL pages
   Blog post / guide / case study / webinar / help article.
   ============================================================ */
.rd-shell { width:100%; max-width:1080px; margin:0 auto; padding:0 28px; }
.rd { padding:36px 0 8px; }
.rd-back { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--fg-muted); text-decoration:none; margin-bottom:24px; transition:color .2s; }
.rd-back:hover { color:var(--color-violet-700); }
.rd-back i { width:15px; height:15px; }
.rd-tag { display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--color-violet-700); background:var(--color-violet-50); padding:5px 11px; border-radius:999px; }
.rd-title { font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; color:var(--fg); margin:16px 0 0; text-wrap:balance; }
.rd-dek { font-size:19px; line-height:1.55; color:var(--fg-body); margin:14px 0 0; }

/* article */
.rd-article { max-width:760px; margin:0 auto; }
.rd-article .rd-title { font-size:clamp(30px,4.2vw,48px); line-height:1.06; }
.rd-byline { display:flex; align-items:center; gap:12px; margin:22px 0 28px; }
.rd-byline .av { width:42px; height:42px; border-radius:999px; display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; }
.rd-byline b { display:block; font-size:14px; font-weight:650; color:var(--fg); }
.rd-byline span { font-size:12.5px; color:var(--fg-muted); }
.rd-hero-img { position:relative; height:340px; border-radius:var(--radius-2xl); overflow:hidden; display:grid; place-items:center; margin-bottom:36px; }
.rd-grain { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:18px 18px; mix-blend-mode:overlay; }

/* body typography */
.rd-body { font-size:17px; line-height:1.75; color:var(--fg-body); }
.rd-body > p { margin:0 0 22px; }
.rd-body h2 { font-family:var(--font-display); font-weight:750; font-size:26px; letter-spacing:-0.02em; color:var(--fg); margin:36px 0 14px; }
.rd-body blockquote { margin:28px 0; padding:4px 0 4px 24px; border-left:3px solid var(--color-violet-500); font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.4; letter-spacing:-0.01em; color:var(--fg); }
.rd-list { list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:11px; }
.rd-list li { display:flex; align-items:flex-start; gap:11px; font-size:16px; line-height:1.5; color:var(--fg); }
.rd-list li i { width:18px; height:18px; color:var(--color-violet-600); flex-shrink:0; margin-top:3px; }
.rd-callout { display:flex; gap:12px; padding:18px 20px; background:linear-gradient(135deg,#FAF5FF,#fff); border:1px solid var(--color-violet-200); border-radius:var(--radius-lg); margin:24px 0; }
.rd-callout i { width:20px; height:20px; color:var(--color-violet-600); flex-shrink:0; }
.rd-callout span { font-size:15px; line-height:1.55; color:var(--fg); }

.rd-share { display:flex; align-items:center; gap:10px; margin:36px 0 8px; padding-top:24px; border-top:1px solid var(--border); }
.rd-share span { font-size:13px; font-weight:600; color:var(--fg-muted); }
.rd-share a { width:38px; height:38px; border-radius:10px; border:1px solid var(--border); display:grid; place-items:center; color:var(--fg-body); transition:all .2s; }
.rd-share a:hover { border-color:var(--color-violet-300); color:var(--color-violet-700); background:var(--color-violet-50); }
.rd-share a i { width:16px; height:16px; }

/* related */
.rd-related { max-width:1080px; margin:56px auto 0; padding:40px 28px 8px; border-top:1px solid var(--border); }
.rd-related h3 { font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-0.02em; color:var(--fg); margin:0 0 24px; }
.rd-rel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rd-rel-card { text-decoration:none; display:block; border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--border); background:#fff; transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.rd-rel-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.rd-rel-art { height:120px; }
.rd-rel-b { padding:16px 18px; }
.rd-rel-meta { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-muted); }
.rd-rel-b h4 { font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.3; letter-spacing:-0.015em; color:var(--fg); margin:8px 0 0; }

/* guide */
.rd-guide-top { display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:center; margin-bottom:40px; }
.rd-guide-cover { position:relative; height:260px; border-radius:var(--radius-2xl); overflow:hidden; display:grid; place-items:center; box-shadow:var(--shadow-lg); }
.rd-guide-cover i { width:56px; height:56px; color:rgba(255,255,255,.95); position:relative; z-index:1; }
.rd-guide-head .rd-title { font-size:clamp(28px,3.6vw,42px); line-height:1.06; }
.rd-guide-meta { display:flex; gap:18px; margin:18px 0 22px; font-size:14px; color:var(--fg-muted); }
.rd-guide-meta span { display:inline-flex; align-items:center; gap:7px; }
.rd-guide-meta i { width:15px; height:15px; }
.rd-guide-layout { display:grid; grid-template-columns:240px 1fr; gap:44px; align-items:start; }
.rd-toc { position:sticky; top:90px; background:var(--color-mist); border-radius:var(--radius-xl); padding:22px; }
.rd-toc-h { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:14px; }
.rd-toc ol { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:10px; }
.rd-toc li { font-size:14px; line-height:1.4; color:var(--fg-body); }
.rd-toc li::marker { color:var(--color-violet-600); font-family:var(--font-mono); font-size:12px; }

/* case study */
.rd-case { max-width:1080px; margin:0 auto; }
.rd-case-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--border); border-radius:var(--radius-3xl); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); margin-bottom:28px; }
.rd-case-hero-l { padding:40px 44px; display:flex; flex-direction:column; }
.rd-case-hero-l .rd-title { font-size:clamp(30px,4vw,46px); }
.rd-case-quote { font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,26px); line-height:1.32; letter-spacing:-0.02em; color:var(--fg); margin:20px 0 24px; text-wrap:balance; }
.rd-case-hero-l .rd-byline { margin:auto 0 0; }
.rd-case-hero-r { position:relative; min-height:320px; display:grid; place-items:center; }
.rd-case-hero-r .big { text-align:center; color:#fff; }
.rd-case-hero-r .big b { font-family:var(--font-display); font-weight:800; font-size:76px; line-height:1; letter-spacing:-0.04em; display:block; }
.rd-case-hero-r .big span { font-size:14px; opacity:.85; }
.rd-case-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--border); border-radius:var(--radius-2xl); overflow:hidden; margin-bottom:36px; }
.rd-case-stats > div { padding:28px 20px; text-align:center; border-right:1px solid var(--border); }
.rd-case-stats > div:last-child { border-right:none; }
.rd-case-stats b { display:block; font-family:var(--font-display); font-weight:800; font-size:36px; color:var(--color-emerald-700); letter-spacing:-0.03em; }
.rd-case-stats span { font-size:13px; color:var(--fg-muted); margin-top:6px; display:block; }
.rd-case-body { max-width:720px; }
.rd-case-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:40px 0 8px; padding:32px 36px; background:var(--color-ivory); border:1px solid var(--border); border-radius:var(--radius-2xl); }
.rd-case-cta h3 { font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-0.02em; color:var(--fg); margin:0 0 4px; }
.rd-case-cta p { font-size:14px; color:var(--fg-muted); margin:0; }

/* webinar */
.rd-webinar { max-width:1080px; margin:0 auto; }
.rd-web-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:start; }
.rd-web-livetag { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#DC2626; }
.rd-web-livetag .dot { width:8px; height:8px; border-radius:999px; background:#EF4444; box-shadow:0 0 0 4px rgba(239,68,68,.18); animation:rd-blink 1.6s ease-in-out infinite; }
@keyframes rd-blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.rd-web-main .rd-title { font-size:clamp(28px,3.6vw,42px); line-height:1.08; }
.rd-web-meta { display:flex; gap:18px; margin:18px 0 28px; font-size:14px; color:var(--fg-muted); flex-wrap:wrap; }
.rd-web-meta span { display:inline-flex; align-items:center; gap:7px; }
.rd-web-meta i { width:15px; height:15px; }
.rd-web-h3 { font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-0.015em; color:var(--fg); margin:0 0 16px; }
.rd-web-host { display:flex; align-items:center; gap:12px; margin-top:32px; padding-top:24px; border-top:1px solid var(--border); }
.rd-web-host .av { width:44px; height:44px; border-radius:999px; display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px; }
.rd-web-host b { display:block; font-size:15px; font-weight:650; color:var(--fg); }
.rd-web-host span { font-size:12.5px; color:var(--fg-muted); }
.rd-web-card { position:sticky; top:90px; border:1px solid var(--border); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-lg); background:#fff; }
.rd-web-card-top { position:relative; height:140px; background:linear-gradient(150deg,#1F1B3A,#2E1065); display:grid; place-items:center; }
.rd-web-card-top::before { content:''; position:absolute; inset:0; background:radial-gradient(60% 60% at 70% 20%, rgba(167,139,250,.4), transparent 60%); }
.rd-web-play { position:relative; width:56px; height:56px; border-radius:999px; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); display:grid; place-items:center; }
.rd-web-play i { width:24px; height:24px; color:#fff; margin-left:2px; }
.rd-web-when { position:absolute; bottom:12px; left:16px; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.85); }
.rd-web-form { padding:20px; display:flex; flex-direction:column; gap:12px; }
.rd-web-form label { font-size:12px; font-weight:600; color:var(--fg); display:flex; flex-direction:column; gap:6px; }
.rd-web-form input { height:44px; border:1px solid var(--border); border-radius:var(--radius-md); padding:0 13px; font-size:14px; color:var(--fg); }
.rd-web-form input:focus { outline:none; border-color:var(--color-violet-400); box-shadow:var(--focus-ring); }
.rd-web-form .btn { height:46px; justify-content:center; margin-top:4px; }
.rd-web-note { font-size:11.5px; color:var(--fg-muted); text-align:center; margin:2px 0 0; }

/* help article */
.rd-help { max-width:1000px; margin:0 auto; }
.rd-help-crumb { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--fg-muted); margin-bottom:8px; }
.rd-help-crumb .rd-back { margin-bottom:0; }
.rd-help-crumb .sep { color:var(--fg-faint); }
.rd-help-layout { display:grid; grid-template-columns:1fr 280px; gap:48px; align-items:start; margin-top:20px; }
.rd-help-ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px; }
.rd-help-ic i { width:26px; height:26px; }
.rd-help-ic.violet { background:var(--color-violet-100); color:var(--color-violet-700); }
.rd-help-ic.teal { background:var(--color-teal-100); color:var(--color-teal-700); }
.rd-help-ic.blue { background:var(--color-blue-100); color:var(--color-blue-700); }
.rd-help-ic.emerald { background:var(--color-emerald-100); color:var(--color-emerald-700); }
.rd-help-ic.amber { background:var(--color-amber-100); color:var(--color-amber-600); }
.rd-help-banner { height:120px; border-radius:var(--radius-2xl); overflow:hidden; position:relative; margin-bottom:22px; }
.rd-help-main .rd-title { font-size:clamp(26px,3.2vw,38px); margin-bottom:24px; }
.rd-help-feedback { display:flex; align-items:center; gap:12px; margin-top:40px; padding-top:24px; border-top:1px solid var(--border); font-size:14px; color:var(--fg-muted); }
.rd-help-feedback button { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border:1px solid var(--border); border-radius:var(--radius-md); background:#fff; font-size:13px; font-weight:600; color:var(--fg-body); cursor:pointer; transition:all .2s; }
.rd-help-feedback button:hover { border-color:var(--color-violet-300); color:var(--color-violet-700); }
.rd-help-feedback button i { width:15px; height:15px; }
.rd-help-side { position:sticky; top:90px; background:var(--color-mist); border-radius:var(--radius-xl); padding:22px; }
.rd-help-side ul { list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:4px; }
.rd-help-side a { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--fg-body); text-decoration:none; padding:8px 0; transition:color .2s; }
.rd-help-side a:hover { color:var(--color-violet-700); }
.rd-help-side a i { width:14px; height:14px; color:var(--fg-faint); flex-shrink:0; }
.rd-help-contact { border-top:1px solid var(--border); padding-top:16px !important; color:var(--color-violet-700) !important; font-weight:600; }
.rd-help-contact i { color:var(--color-violet-600) !important; }

@media (max-width:900px){
  .rd-rel-grid { grid-template-columns:1fr; }
  .rd-guide-top { grid-template-columns:1fr; }
  .rd-guide-cover { height:180px; }
  .rd-guide-layout { grid-template-columns:1fr; gap:24px; }
  .rd-toc { position:static; }
  .rd-case-hero, .rd-web-grid, .rd-help-layout { grid-template-columns:1fr; }
  .rd-case-hero-r { min-height:200px; order:-1; }
  .rd-web-card, .rd-help-side { position:static; }
  .rd-case-stats { grid-template-columns:1fr; }
  .rd-case-stats > div { border-right:none; border-bottom:1px solid var(--border); }
}
@media (prefers-reduced-motion:reduce){ .rd-web-livetag .dot { animation:none; } }