/* Roni Gozali – course page. Design "A · Course page" (desktop 1440 + mobile 390 artboards), values 1:1.
   accent #5B7A70 · head font DM Sans · ink #1E1F1D · surface #F4F6F3 · mute #6B6E6A · gold #9C7745. */

.cp{ --cp-accent:#5B7A70; --cp-head:'DM Sans', sans-serif; font-family:'DM Sans', sans-serif; background:#FFFFFF; color:#1E1F1D; font-size:16px; line-height:normal; -webkit-font-smoothing:antialiased; }
.cp *, .cp *::before, .cp *::after{ box-sizing:border-box; }
.cp a{ color:inherit; text-decoration:none; }
.cp a:hover{ opacity:.9; }
.cp p, .cp h1, .cp h2, .cp ul, .cp ol{ margin:0; }
.cp img, .cp svg{ display:block; max-width:none; }
.cp-m{ display:none; }

/* shared bits */
.cp-glass{ background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.24); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.cp-kicker{ font-size:12px; letter-spacing:0.22em; font-weight:500; color:#9C7745; }
.cp-kicker.is-mute{ color:#6B6E6A; margin-top:4px; }
.cp-kicker-hero{ font-size:13px; letter-spacing:0.24em; font-weight:500; color:#E8CFA4; }
.cp-kicker-hero.is-12{ font-size:12px; }
.cp-muted-13{ font-size:13px; color:#6B6E6A; }
.cp-muted-14{ font-size:14px; color:#6B6E6A; }
.cp-muted-15{ font-size:15px; color:#6B6E6A; }
.cp-row-between{ display:flex; align-items:center; justify-content:space-between; }
.cp-row-between.is-baseline{ align-items:baseline; }
.cp-row-between.is-wrap{ flex-wrap:wrap; gap:12px; }
.cp-row-between.is-center{ align-items:center; gap:12px; }
.cp-accent{ color:var(--cp-accent); }
.cp-price{ font-family:var(--cp-head); font-weight:600; line-height:1; letter-spacing:-0.045em; }
.cp-price.is-52{ font-size:52px; } .cp-price.is-48{ font-size:48px; } .cp-price.is-44{ font-size:44px; }
.cp-price.is-soon{ font-size:36px; }
.cp-price s{ font-size:.42em; font-weight:500; letter-spacing:-0.01em; color:#6B6E6A; vertical-align:middle; }
.cp-bar{ display:block; height:6px; border-radius:999px; background:#F4F6F3; overflow:hidden; }
.cp-bar i{ display:block; height:100%; border-radius:999px; background:var(--cp-accent); }
.cp-btns{ display:flex; flex-direction:column; gap:10px; }
.cp-btn{ display:flex; align-items:center; justify-content:center; gap:10px; height:54px; border-radius:999px; font-size:16px; }
.cp-btn-fill{ background:var(--cp-accent); color:#FFFFFF !important; font-weight:500; }
.cp-btn-line{ border:1px solid #DADDD8; color:#1E1F1D; }
.cp-btn.is-off{ opacity:.55; }
.cp-note{ text-align:center; font-size:13px; color:#6B6E6A; }
.cp-note.is-m{ margin-top:4px; }
.cp-st{ flex:none; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.cp-st.is-fill{ background:var(--cp-accent); }
.cp-st.is-line{ border:1px solid #DADDD8; color:#6B6E6A; }
.cp-tag{ display:inline-flex; align-items:center; height:20px; margin-left:10px; padding:0 8px; border-radius:999px; background:#EEF2EF; color:var(--cp-accent); font-size:11px; font-style:normal; font-weight:600; letter-spacing:.06em; vertical-align:2px; }

/* ════════ desktop ════════ */
.cp-d{ width:100%; padding:16px; }
.cp-hero{ position:relative; border-radius:32px; overflow:hidden; min-height:720px; display:flex; flex-direction:column; justify-content:flex-end; gap:48px; padding:28px; background:#8A8F86; }
.cp-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0%; }
.cp-hero-img.is-mirror{ transform:scaleX(-1); }
.cp-hero-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,25,23,0.66) 0%, rgba(20,25,23,0.32) 42%, rgba(20,25,23,0) 68%), linear-gradient(0deg, rgba(20,25,23,0.5) 0%, rgba(20,25,23,0) 46%); }
.cp-hero-row{ position:relative; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:32px; }
.cp-hero-copy{ flex:1 1 520px; min-width:0; max-width:700px; display:flex; flex-direction:column; gap:22px; padding:0 0 8px 12px; color:#FFFFFF; }
.cp-back{ align-self:flex-start; display:flex; align-items:center; gap:8px; padding:8px 14px 8px 10px; border-radius:999px; font-size:14px; color:#FFFFFF !important; }
.cp-h1{ font-family:var(--cp-head); font-weight:600; font-size:min(116px, max(60px, 8.05vw)); line-height:0.9; letter-spacing:-0.055em; color:#FFFFFF; overflow-wrap:break-word; }
.cp-sub{ font-size:21px; color:rgba(255,255,255,0.88); }
.cp-hero-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:6px; }
.cp-watch{ display:flex; align-items:center; gap:12px; height:52px; padding:0 22px 0 6px; border-radius:999px; background:#FFFFFF; color:#1E1F1D !important; font-size:15px; font-weight:500; }
.cp-watch-dot{ width:40px; height:40px; border-radius:999px; background:var(--cp-accent); display:flex; align-items:center; justify-content:center; }
.cp-watch-dot.is-36{ width:36px; height:36px; }
.cp-chip{ display:flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; font-size:14px; color:#FFFFFF; }

.cp-enroll{ flex:0 1 384px; min-width:0; background:#FFFFFF; border-radius:28px; padding:24px; display:flex; flex-direction:column; gap:18px; box-shadow:0 40px 80px -30px rgba(10,15,12,0.55); color:#1E1F1D; }
.cp-mini{ list-style:none; padding:6px; display:flex; flex-direction:column; gap:2px; background:#F4F6F3; border-radius:20px; }
.cp-mini-i{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; }
.cp-mini-i.is-on{ background:#FFFFFF; }
.cp-mini-t{ flex:1; min-width:0; font-size:14px; line-height:1.3; color:#3D3F3C; }
.cp-mini-i.is-on .cp-mini-t{ color:#1E1F1D; }

.cp-incl{ list-style:none; margin:0 auto !important; padding:28px 12px 12px; max-width:1180px; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.cp-incl li{ display:flex; align-items:center; gap:14px; font-size:16px; }
.cp-incl-ic{ flex:none; width:48px; height:48px; border-radius:999px; background:#EEF2EF; color:var(--cp-accent); display:flex; align-items:center; justify-content:center; }

.cp-body{ max-width:1220px; margin:0 auto; padding:72px 24px 96px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:72px; }
.cp-main{ flex:1 1 600px; min-width:0; display:flex; flex-direction:column; gap:80px; }
.cp-sec{ display:flex; flex-direction:column; gap:28px; }
.cp-sec.is-24{ gap:24px; }
.cp-h2{ font-family:var(--cp-head); font-weight:600; font-size:52px; line-height:1; letter-spacing:-0.05em; }
.cp-learn{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; }
.cp-learn li{ display:flex; align-items:flex-start; gap:14px; padding:20px; border-radius:22px; background:#F4F6F3; font-size:17px; line-height:1.45; }
.cp-learn li > span:last-child{ padding-top:3px; }
.cp-learn-ic{ flex:none; width:32px; height:32px; border-radius:999px; background:#FFFFFF; color:var(--cp-accent); display:flex; align-items:center; justify-content:center; }
.cp-text{ font-size:18px; line-height:1.65; color:#3D3F3C; }

.cp-chapter{ border-radius:26px; background:#F4F6F3; padding:8px; }
.cp-chapter + .cp-chapter{ margin-top:-16px; }
.cp-chapter-h{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 16px 18px; }
.cp-chapter-t{ display:flex; align-items:center; gap:12px; min-width:0; }
.cp-chapter-t .cp-kicker{ flex:none; }
.cp-chapter-name{ font-size:18px; font-weight:600; }
.cp-chapter-btn{ flex:none; display:flex; align-items:center; gap:8px; height:36px; padding:0 6px 0 14px; border-radius:999px; border:none; background:#FFFFFF; font-family:inherit; font-size:14px; color:#4F524E; cursor:pointer; }
.cp-chapter-chev{ width:26px; height:26px; border-radius:999px; background:#F4F6F3; display:flex; align-items:center; justify-content:center; transition:transform .3s ease; }
.cp-chapter-btn[aria-expanded="false"] .cp-chapter-chev{ transform:rotate(180deg); }
.cp-chapter.is-closed .cp-lessons{ display:none; }
.cp-lessons{ list-style:none; padding:0; display:flex; flex-direction:column; gap:6px; }
.cp-lesson{ display:flex; align-items:center; gap:16px; padding:16px 20px 16px 16px; background:#FFFFFF; border-radius:20px; transition:box-shadow .2s ease; }
.cp-lesson:hover{ opacity:1 !important; box-shadow:0 10px 30px -22px rgba(20,25,23,.45); }
.cp-lesson-n{ flex:none; width:44px; height:44px; border-radius:14px; background:#EEF2EF; color:var(--cp-accent); display:flex; align-items:center; justify-content:center; font-family:var(--cp-head); font-weight:600; font-size:16px; }
.cp-lesson-t{ flex:1; min-width:0; font-size:16px; line-height:1.35; }

.cp-prose{ max-width:680px; font-size:18px; line-height:1.65; color:#3D3F3C; }
.cp-prose > * + *{ margin-top:1em; }
.cp-prose h3, .cp-prose h4{ font-family:var(--cp-head); font-weight:600; font-size:24px; line-height:1.15; letter-spacing:-0.03em; color:#1E1F1D; margin-top:1.4em; }
.cp-prose h4{ font-size:19px; }
.cp-prose ul, .cp-prose ol{ padding-left:1.3em; }
.cp-prose a{ color:var(--cp-accent); text-decoration:underline; text-underline-offset:.2em; }
.cp-prose blockquote{ margin:0; padding-left:18px; border-left:3px solid #E8CFA4; }
.cp-req{ list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; max-width:680px; }
.cp-req li{ display:flex; align-items:center; gap:12px; font-size:16px; color:#3D3F3C; }
.cp-req li::before{ content:""; flex:none; width:8px; height:8px; border-radius:999px; background:var(--cp-accent); }
.cp-author{ display:flex; align-items:center; gap:16px; padding:16px 20px 16px 16px; border-radius:22px; background:#F4F6F3; max-width:520px; }
.cp-author img{ flex:none; width:56px; height:56px; border-radius:999px; object-fit:cover; object-position:48% 12%; }
.cp-author > div{ display:flex; flex-direction:column; gap:2px; }
.cp-author-n{ font-size:16px; font-weight:600; }

.cp-side{ flex:0 1 360px; min-width:0; position:sticky; top:calc(var(--rgc-nav, 5.4rem) + 24px); border-radius:28px; background:#FFFFFF; border:1px solid #ECEEEB; overflow:hidden; box-shadow:0 30px 60px -36px rgba(20,25,23,0.35); }
.cp-side-ph{ position:relative; height:220px; background:#8A8F86; }
.cp-side-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.cp-side-watch{ position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:10px; height:44px; padding:0 16px 0 4px; border-radius:999px; background:rgba(255,255,255,0.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-size:14px; font-weight:500; color:#1E1F1D !important; }
.cp-side-in{ padding:24px; display:flex; flex-direction:column; gap:18px; }
.cp-side-list{ list-style:none; padding:0; display:flex; flex-direction:column; gap:12px; font-size:15px; color:#3D3F3C; }
.cp-side-list li{ display:flex; align-items:center; gap:12px; }

/* lesson with a short description: opens in place */
.cp-lessons .cp-lcard{ background:#FFFFFF; border-radius:20px; transition:box-shadow .2s ease; }
/* hover shadow: on the whole card while it is closed, none on the inner row and none once it is open */
.cp-lcard .cp-lesson:hover{ box-shadow:none; }
.cp-lcard:not(.is-open):hover{ box-shadow:0 10px 30px -22px rgba(20,25,23,.45); }
.cp-lesson.is-toggle, .cp-mini-i.is-toggle{ width:100%; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.cp-lesson.is-toggle{ background:transparent; }
.cp-lchev{ flex:none; width:26px; height:26px; margin-left:-6px; border-radius:999px; background:#F4F6F3; color:#4F524E; display:flex; align-items:center; justify-content:center; transition:transform .3s ease; }
.cp-lcard.is-open .cp-lchev{ transform:rotate(180deg); }
.cp-lmore{ padding:0 20px 18px 76px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.cp-lmore[hidden]{ display:none; }
.cp-lmore p{ font-size:15px; line-height:1.6; color:#3D3F3C; max-width:560px; }
.cp-lgo{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:999px; background:#EEF2EF; color:var(--cp-accent) !important; font-size:14px; font-weight:500; }
.cp-lgo.is-locked{ background:#F4F6F3; color:#6B6E6A !important; }
.cp-sec .cp-author{ margin-top:8px; }

/* trailer window */
.cp-modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:rgba(14,16,15,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.cp-modal[hidden]{ display:none; }
.cp-modal-box{ position:relative; width:min(1100px, 100%); }
.cp-modal-v{ aspect-ratio:16/9; border-radius:24px; overflow:hidden; background:#000; }
.cp-modal-v .rgc-video-el{ width:100%; height:100%; border:0; display:block; object-fit:contain; }
.cp-modal-x{ position:absolute; top:-56px; right:0; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.14); color:#FFFFFF; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* ════════ mobile (design artboard 390, max 480) ════════ */
@media (max-width:760px){
  .cp-d{ display:none; }
  .cp-m{ display:block; width:100%; max-width:480px; margin:0 auto; }
  .cp-m-hero{ position:relative; height:600px; overflow:hidden; border-radius:0 0 32px 32px; display:flex; flex-direction:column; justify-content:space-between; padding:18px 18px 56px; background:#8A8F86; }
  .cp-m-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:44% 0%; }
  .cp-m-shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,25,23,0.78) 0%, rgba(20,25,23,0.2) 48%, rgba(20,25,23,0) 62%), linear-gradient(180deg, rgba(20,25,23,0.32) 0%, rgba(20,25,23,0) 20%); }
  .cp-m-top{ position:relative; display:flex; align-items:center; justify-content:space-between; }
  .cp-m-back{ width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:#FFFFFF !important; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.28); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
  .cp-m-copy{ position:relative; display:flex; flex-direction:column; gap:14px; color:#FFFFFF; }
  .cp-h1.is-m{ font-size:60px; line-height:0.92; letter-spacing:-0.05em; }
  .cp-sub.is-m{ font-size:17px; }
  .cp-m-play{ flex:none; width:52px; height:52px; border-radius:999px; background:#FFFFFF; display:flex; align-items:center; justify-content:center; }
  .cp-m-sheet{ position:relative; margin-top:-32px; background:#FFFFFF; border-radius:28px 28px 0 0; padding:22px 18px 28px; display:flex; flex-direction:column; gap:20px; }
  .cp-m-stats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  .cp-m-stats > div{ background:#F4F6F3; border-radius:18px; padding:12px; display:flex; flex-direction:column; gap:6px; min-width:0; }
  .cp-m-stats b{ font-size:17px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cp-m-stats > div > span:last-child{ font-size:12px; color:#6B6E6A; }
  .cp-h2.is-m{ font-size:30px; line-height:normal; letter-spacing:-0.045em; }
  .cp-h2.is-gap, .cp-row-between.is-gap{ margin-top:16px; }
  .cp-learn.is-m{ display:flex; flex-direction:column; gap:8px; }
  .cp-learn.is-m li{ gap:12px; padding:16px; border-radius:18px; font-size:15px; }
  .cp-learn.is-m .cp-learn-ic{ width:28px; height:28px; }
  .cp-mini.is-m{ border-radius:22px; }
  .cp-mini.is-m .cp-mini-i{ padding:12px; border-radius:16px; }
  /* lessons as separate cards with room between them */
  .cp-mini.is-m.is-cards{ gap:10px; padding:10px; }
  .cp-mini.is-m.is-cards > li > .cp-mini-i, .cp-mini.is-m.is-cards .cp-lcard{ background:#FFFFFF; border-radius:16px; }
  .cp-mini.is-m.is-cards .cp-mini-i{ padding:14px 14px 14px 12px; gap:14px; }
  .cp-mini.is-m.is-cards .cp-lcard .cp-mini-i{ background:transparent; }
  .cp-mini.is-m.is-cards .cp-mini-t{ color:#1E1F1D; }
  .cp-mini.is-m .cp-tag{ margin:4px 0 0; display:flex; width:max-content; }
  .cp-lmore{ padding:0 14px 16px 62px; gap:10px; }
  .cp-lmore p{ font-size:14px; }
  .cp-lchev{ margin-left:0; }
  .cp-prose.is-m, .cp-text.is-m{ font-size:16px; }
  .cp-req.is-m li{ font-size:15px; }
  .cp-author.is-m{ gap:14px; padding:14px; border-radius:20px; }
  .cp-author.is-m img{ width:48px; height:48px; }
  .cp-author.is-m .cp-author-n{ font-size:15px; }
  .cp-btns.is-last{ margin-top:8px; }
  .cp-modal{ padding:12px; }
  .cp-modal-v{ border-radius:16px; }
}