/* Course detail pages (/courses/<slug> and /course?c=<id>).
   Layout: dark hero → "at a glance" card overlapping it → sticky section nav
   → content sections with a right-hand rail. Colours, type, radii and
   shadows all come from the site.css tokens. */

/* sticky offsets (set by course-page.js from the real header height) */
:root { --cp-top: 71px; --cp-nav-h: 57px; }
.cp-anchor { scroll-margin-top: calc(var(--cp-top) + var(--cp-nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============ hero ============ */
.cp-hero { padding: 56px 0 128px; }
.cp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; align-items: center; }
.cp-hero .crumbs + .eyebrow { margin-top: 28px; }
.cp-hero h1 { margin: 14px 0 16px; font-size: clamp(32px, 4vw, 48px); line-height: 1.06; max-width: 720px; }
.cp-hero .lead { font-size: 17px; line-height: 1.65; max-width: 620px; }
.cp-by { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.cp-by .cp-av { width: 40px; height: 40px; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.cp-by p { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.35; color: rgba(255,255,255,.86); }
.cp-by a { color: #fff; font-weight: 600; }
.cp-by small { font-size: 13px; color: rgba(255,255,255,.62); }
.cp-hero .actions { margin-top: 28px; }
.cp-hero .btn-soft { box-shadow: none; }
.cp-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.7); }
.cp-proof b { color: #fff; font-weight: 600; }
.cp-proof > i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.35); }
.cp-stars { display: inline-flex; gap: 2px; color: var(--gold); }
.cp-stars svg { fill: var(--gold); }
.cp-hero-visual .frame { border-radius: var(--r-xl); overflow: hidden; background: var(--plum); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.6); }
.cp-hero-visual .frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* avatars */
.cp-av { flex: none; display: block; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: var(--bg-3); }
.cp-av-ini { display: grid; place-items: center; font: 600 14px/1 var(--mono); background: var(--lilac); color: var(--violet); }
.cp-av-logo { display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cp-av-logo img { width: 28px; height: auto; }

/* ============ at a glance (overlaps the hero) ============ */
.cp-glance-wrap { position: relative; z-index: 3; margin-top: -72px; }
.cp-glance { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(27,15,46,.06), 0 24px 48px -28px rgba(27,15,46,.35); }
.cp-glance li { display: flex; gap: 14px; align-items: flex-start; padding: 24px; min-width: 0; }
.cp-glance li + li { border-left: 1px solid var(--line); }
.cp-glance b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.cp-glance small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.cp-glance li:nth-child(2) .ico { background: var(--gold-l); color: var(--gold-d); }
.cp-glance [data-icon="star"] svg { fill: currentColor; }

/* ============ sticky section nav ============ */
.cp-subnav { position: sticky; top: var(--cp-top); z-index: 80; margin-top: 40px; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.cp-subnav.is-stuck { box-shadow: 0 10px 24px -18px rgba(27,15,46,.35); }
.cp-subnav-in { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.cp-tabs { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cp-tabs::-webkit-scrollbar { display: none; }
.cp-tabs li { flex: none; display: flex; }
.cp-tabs a { position: relative; display: flex; align-items: center; padding: 0 14px; font-size: 14.5px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color .15s; }
.cp-tabs li:first-child a { padding-left: 0; }
.cp-tabs a:hover { color: var(--text); }
.cp-tabs a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--em); transform: scaleX(0); transition: transform .2s; }
.cp-tabs li:first-child a::after { left: 0; }
.cp-tabs a[aria-current] { color: var(--text); }
.cp-tabs a[aria-current]::after { transform: none; }
.cp-tabs a:focus-visible { outline-offset: -4px; border-radius: var(--r-sm); }
.cp-subnav-buy { display: none; flex: none; align-items: center; gap: 16px; }
.cp-subnav.show-buy .cp-subnav-buy { display: flex; animation: cpFade .2s ease-out both; }
.cp-subnav-title { max-width: 240px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes cpFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cp-subnav.show-buy .cp-subnav-buy { animation: none; } .cp-tabs a::after { transition: none; } }

/* ============ shared section layout ============ */
.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.cp-main { min-width: 0; display: grid; gap: 56px; }
.cp-main-tight { gap: 24px; }
.cp-aside { position: sticky; top: calc(var(--cp-top) + var(--cp-nav-h) + 24px); }
.cp-sec.cp-first { padding-top: 64px; }
.cp-head h2 { margin: 12px 0 14px; }
.cp-head .muted { line-height: 1.7; max-width: 680px; }
.cp-sub { margin-bottom: 20px; }

/* about */
.cp-about h2 { margin: 12px 0 24px; }
.cp-about p { font-size: 17px; line-height: 1.75; color: var(--muted); }
.cp-about p + p { margin-top: 16px; }

/* what you'll learn: two-column checklist */
.cp-learn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.cp-learn li > span { line-height: 1.55; font-size: 15.5px; }
.cp-learn .chip { display: flex; width: fit-content; margin-top: 8px; white-space: normal; line-height: 1.25; }

/* skills: pill chips */
.cp-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cp-skills li { padding: 8px 14px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; font-weight: 500; line-height: 1.3; }

/* details to know: 2 x 2 */
.cp-details { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cp-details li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.cp-details b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.cp-details small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* who it's for */
.cp-who-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cp-who { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line-2); }
.cp-who h4 { font-size: 15.5px; line-height: 1.35; }
.cp-who p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* buy card */
.cp-buy { box-shadow: var(--shadow); }
.cp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cp-price b { font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cp-price span { font-size: 14px; color: var(--muted); }
.cp-rate { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.cp-rate .stars { font-weight: 600; }
.cp-actions { display: flex; flex-direction: column; gap: 8px; margin: 24px 0 16px; }
.cp-actions .btn-soft { width: 100%; }
.cp-bundle { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: var(--r); background: var(--gold-l); color: var(--gold-d); font-size: 13.5px; line-height: 1.45; margin-bottom: 8px; }
.cp-bundle svg { flex: none; margin-top: 1px; }
.cp-buy .facts svg { color: var(--em); }
.cp-secure { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--faint); margin-top: 16px; }
.cp-secure a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* ============ NMC process ============ */
.cp-map { padding: 32px; }
.sm { display: block; width: 100%; height: auto; font-family: var(--sans); }
.sm-v { display: none; max-width: 400px; }
.sm-track { stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.sm-run { stroke: var(--em); stroke-width: 4; stroke-linecap: round; }
.sm-dot { fill: #fff; stroke: #D6D1DF; stroke-width: 2; }
.sm-halo { fill: var(--em-l); }
.sm-num { font: 600 18px var(--mono); fill: var(--faint); }
.sm-lbl { font-weight: 600; font-size: 17px; fill: var(--muted); }
.sm-sub { font-size: 14px; fill: var(--faint); }
.sm-node.on .sm-dot { fill: var(--em); stroke: var(--em); }
.sm-node.on .sm-num { fill: #fff; }
.sm-node.on .sm-lbl { fill: var(--text); }
.sm-node.on .sm-sub { fill: var(--muted); }
.cp-process { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; margin-top: 40px; align-items: start; }
.cp-prose p { color: var(--muted); line-height: 1.75; }
.cp-legal { display: flex; gap: 12px; align-items: flex-start; }
.cp-legal svg { flex: none; margin-top: 2px; }
.cp-reading { padding: 24px 24px 8px; }
.cp-reading .cp-sub { margin-bottom: 8px; }
.cp-reading .list-rows { border-top: 0; }
.cp-reading .list-row { grid-template-columns: auto 1fr auto; gap: 14px; padding: 14px 0; }
.cp-reading .list-row:last-child { border-bottom: 0; }
.cp-reading .list-row h4 { font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
.cp-reading a.list-row:hover h4 { color: var(--em); }
.cp-reading .list-row > svg { color: var(--faint); }
.cp-out { gap: 16px; padding: 14px 0 16px; border-top: 1px solid var(--line); }

/* ============ curriculum ============ */
.cp-cur { overflow: hidden; }
.cp-cur-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 16px 24px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.cp-cur-top b { font-size: 15px; font-weight: 600; }
.cp-cur-top span { font-size: 13.5px; color: var(--muted); }
.cp-mods { list-style: none; margin: 0; padding: 0; }
.cp-mods > .acc-item, .cp-mods > .acc-item:first-child { border-top: 0; border-bottom: 1px solid var(--line-2); }
.cp-mods > .acc-item:last-child { border-bottom: 0; }
.cp-mods .acc-btn { gap: 16px; padding: 16px 24px; transition: background .15s; }
.cp-mods .acc-btn:hover { background: var(--bg-2); }
.cp-mods .acc-btn:focus-visible { outline-offset: -3px; }
.cp-mods .acc-btn::after, .cp-faq .acc-btn::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.cp-mods .acc-item.open .acc-btn::after, .cp-faq .acc-item.open .acc-btn::after { transform: rotate(180deg); }
.cp-mod.open { background: #FCFBFD; }
.cp-mod-ico { flex: none; width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; }
.cp-mod-lesson .cp-mod-ico { background: var(--lilac); color: var(--violet); }
.cp-mod-module .cp-mod-ico { background: var(--em-l); color: var(--em); }
.cp-mod-quiz .cp-mod-ico { background: var(--gold-l); color: var(--gold-d); }
.cp-mod-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cp-mod-title { font-size: 15.5px; font-weight: 500; line-height: 1.4; }
.cp-mod-meta { font: 500 12px/1.3 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.cp-mods .acc-panel { padding: 0 56px 18px 80px; font-size: 14.5px; }

/* certificate */
.cp-cert { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 28px 32px; background: linear-gradient(120deg, #fff 55%, var(--gold-l)); }
.cp-cert h3 { margin: 10px 0 8px; }
.cp-cert p { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 480px; }
.cp-cert-art { position: relative; width: 196px; padding: 18px 18px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); display: grid; gap: 7px; transform: rotate(2deg); }
.cp-cert-art::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--gold-l); border-radius: var(--r-xs); pointer-events: none; }
.cp-cert-seal { position: absolute; right: -12px; bottom: -12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #fff; box-shadow: 0 0 0 4px #fff, var(--shadow); }
.cp-cert-art i { display: block; height: 6px; border-radius: 3px; background: var(--bg-3); }
.cp-cert-art i:first-of-type { width: 45%; background: var(--lilac); }
.cp-cert-art i:nth-of-type(2) { width: 85%; height: 9px; background: var(--line); }
.cp-cert-art i:nth-of-type(3) { width: 65%; }
.cp-cert-art small { margin-top: 4px; font: 500 10px/1.3 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding-right: 26px; }

/* side card (instructor / provider, and FAQ help) */
.cp-side-card { padding: 24px; box-shadow: var(--shadow-sm); }
.cp-side-h { font: 500 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 14px; }
.cp-side-card hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.cp-person { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cp-person .cp-av { width: 52px; height: 52px; }
.cp-person b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.cp-person small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.cp-side-card .link { font-size: 14.5px; }

/* ============ resources (dark band) ============ */
.res-card { display: flex; flex-direction: column; gap: 12px; }
.res-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.res-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.res-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 13.5px; color: var(--muted); }
.res-price b { color: var(--em-d); font-weight: 600; }
.res-own { display: inline-flex; align-items: center; gap: 8px; color: var(--em-d); font-weight: 600; }
.res-more { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-lg); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.res-more p { color: rgba(255,255,255,.66); font-size: 14.5px; line-height: 1.55; }
.res-more .btn-ghost { margin-top: auto; align-self: flex-start; }

/* ============ instructor ============ */
.cp-people { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.cp-ins { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.cp-ins-head { display: flex; align-items: center; gap: 20px; }
.cp-ins-head .cp-av { width: 88px; height: 88px; }
.cp-ins-head .cp-av-ini { font-size: 24px; }
.cp-ins-head p.cp-role { font-size: 14.5px; margin-top: 6px; color: var(--muted); }
.cp-ins-bio p { color: var(--muted); line-height: 1.7; }
.cp-ins-bio p + p { margin-top: 12px; }
.cp-ins .row { margin-top: auto; gap: 12px 24px; }
.cp-mentor { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.cp-mentor p { line-height: 1.65; }
.cp-mentor .row { margin-top: auto; padding-top: 8px; }

/* ============ reviews ============ */
.cp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.cp-split .sec-head { margin-bottom: 0; }
.cp-reviews { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch; }
.cp-split .cp-reviews { grid-template-columns: minmax(0, 1fr); }
.cp-score-card { padding: 28px; }
.cp-score { display: flex; align-items: center; gap: 16px; }
.cp-score > b { font-size: 56px; font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.cp-score > div { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.cp-dist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.cp-dist li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; gap: 12px; align-items: center; font-size: 13.5px; color: var(--muted); }
.cp-dist b { text-align: right; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.cp-bar { display: block; height: 8px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.cp-bar i { display: block; height: 100%; border-radius: 99px; background: var(--gold); }
.cp-score-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 14px; line-height: 1.55; color: var(--muted); }
.cp-quote { margin: 0; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.cp-quote-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cp-quote blockquote { margin: 0; font-size: 17px; line-height: 1.65; font-weight: 500; letter-spacing: -.01em; }
.cp-quote .quote-by { margin-top: auto; }

/* ============ FAQ ============ */
.cp-faq { padding: 0 28px; }
.cp-faq .acc-item:first-child { border-top: 0; }
.cp-faq .acc-item:last-child { border-bottom: 0; }
.cp-help { display: flex; flex-direction: column; gap: 10px; }
.cp-help .ico { margin-bottom: 6px; }
.cp-help p { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.cp-help-links { list-style: none; margin: 6px 0 0; padding: 0; }
.cp-help-links li { border-top: 1px solid var(--line-2); }
.cp-help-links a { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-size: 15px; font-weight: 500; color: var(--text); transition: color .15s; }
.cp-help-links [data-icon] { display: inline-flex; flex: none; }
.cp-help-links .cp-hl-t { flex: 1; }
.cp-help-links a > [data-icon]:first-child { color: var(--em); }
.cp-help-links a > [data-icon]:last-child { color: var(--faint); }
.cp-help-links a:hover { color: var(--em); }
.cp-help-links li:last-child a { padding-bottom: 2px; }

/* CTA */
.cp-cta-sec { padding: 80px 0; }

/* loading / not-found state for the dynamic template */
.cp-state { text-align: center; padding: 64px 24px; }
.cp-state .ico { margin-bottom: 16px; }
.cp-state p { color: var(--muted); margin: 8px 0 24px; }

/* ============ responsive ============ */
@media (max-width: 1100px) {
  .cp-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
  .cp-subnav-title { display: none; }
}
@media (max-width: 960px) {
  .cp-hero { padding-bottom: 112px; }
  .cp-hero-grid { grid-template-columns: 1fr; }
  .cp-hero-visual { display: none; }
  .cp-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-glance li:nth-child(3) { border-left: 0; }
  .cp-glance li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .cp-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .cp-aside { position: static; }
  .cp-buy { max-width: 560px; }
  .cp-process, .cp-people, .cp-reviews, .cp-split { grid-template-columns: minmax(0, 1fr); }
  .cp-split { gap: 32px; }
  .cp-process { gap: 32px; }
}
@media (max-width: 720px) {
  .cp-hero { padding: 40px 0 96px; }
  .cp-hero .lead { font-size: 16px; }
  .cp-glance-wrap { margin-top: -64px; }
  .cp-subnav { margin-top: 32px; }
  .cp-subnav-in { gap: 12px; min-height: 52px; }
  .cp-tabs a { padding: 0 11px; font-size: 14px; }
  .cp-tabs a::after { left: 11px; right: 11px; }
  .cp-sec.cp-first { padding-top: 48px; }
  .cp-main { gap: 48px; }
  .cp-learn { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 16px; }
  .cp-who-list { grid-template-columns: minmax(0, 1fr); }
  .cp-map { padding: 24px 16px; }
  .sm-h { display: none; }
  .sm-v { display: block; margin: 0 auto; }
  .cp-mods .acc-btn { padding: 14px 16px; gap: 12px; }
  .cp-mod-ico { width: 36px; height: 36px; }
  .cp-mods .acc-panel { padding: 0 16px 16px 64px; }
  .cp-cur-top { padding: 14px 16px; }
  .cp-cert { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 24px; }
  .cp-cert-art { justify-self: start; margin-left: 4px; }
  .cp-faq { padding: 0 20px; }
  .cp-ins, .cp-mentor, .cp-quote { padding: 24px; }
  .cp-ins-head { gap: 16px; }
  .cp-ins-head .cp-av { width: 72px; height: 72px; }
  .cp-cta-sec { padding: 56px 0; }
}
@media (max-width: 560px) {
  .cp-glance { grid-template-columns: minmax(0, 1fr); }
  .cp-glance li { padding: 16px 18px; }
  .cp-glance li + li { border-left: 0; border-top: 1px solid var(--line); }
  .cp-details { grid-template-columns: minmax(0, 1fr); }
  .cp-by small { display: none; }
  .cp-proof > i { display: none; }
  .cp-proof { gap: 6px 14px; }
  .cp-score > b { font-size: 48px; }
}