/*
Theme Name: pujiantokelas
Author: PUJIANTO
Description: Tema terang bergaya toko kelas online untuk member.pujianto.id: tombol pil, kartu produk rapi, latar berpola garis, biru tua dengan aksen oranye PUJIANTO. Tanpa JavaScript, font dipasang sendiri (tanpa Google Fonts), tanpa permintaan ke pihak luar. Toko, checkout, akun, dan pemutar kursus ada di plugin "PUJIANTO Member"; tema ini hanya tampilannya.
Version: 1.2.0
Requires at least: 6.3
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pujiantokelas
*/

@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/plus-jakarta-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==========================================================================
   Tokens. The plugin reads --ink/--brand/--bg/--line/--text/--muted/--soft/--tint from here.
   ========================================================================== */
:root{
  --ink:#0B2233; --ink-2:#12324A; --ink-3:#1D4A6B;
  --brand:#FF9000; --brand-2:#FFA33A; --brand-strong:#B45309; --tint:#FFF1DC;
  --bg:#F1F4F7; --line:#DCE3EA; --line-2:#C5D0DB;
  --text:#0B2233; --muted:#4F6172; --soft:#5C6E80;
  --max:1160px; --gut:20px;
  --font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{line-height:1.12;letter-spacing:-.035em;font-weight:800}
em.sf{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--brand-strong);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.ico{flex:none}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;margin:0;padding:12px 18px;background:#fff;color:var(--ink);z-index:100;top:8px;left:8px;border-radius:999px;font-weight:700}

/* Buttons: pills. The dark one carries a small orange arrow, this theme's signature. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border:1px solid transparent;border-radius:999px;font:inherit;font-size:15px;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s,transform .15s}
.btn .ico{width:18px;height:18px}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 1px 0 #001A26,0 4px 10px -3px rgba(11,34,51,.45)}
.btn-dark:hover{background:var(--ink-2)}
.btn-dark .arr{display:grid;place-items:center;width:24px;height:24px;margin:0 -12px 0 2px;border-radius:50%;background:var(--brand);color:var(--ink)}
.btn-dark .arr .ico{width:14px;height:14px;stroke-width:2.4}
.btn-primary{background:var(--brand);color:#1B1206;box-shadow:0 8px 20px -10px rgba(255,144,0,.8)}
.btn-primary:hover{background:var(--brand-2)}
.btn-line{background:#F6F8FA;border-color:var(--line-2);color:var(--ink)}
.btn-line:hover{background:#fff;border-color:var(--ink)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-sm{min-height:40px;padding:0 20px;font-size:14px}

/* ==========================================================================
   Header (sticky). Mobile menu = native <details>, no JavaScript.
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
.bar{display:flex;align-items:center;gap:28px;min-height:68px}
.logo,.custom-logo-link{display:flex;align-items:center;flex:none}
.logo img{height:26px;width:auto}
.custom-logo{height:32px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a,.menu-list a{position:relative;padding:9px 14px;font-size:14.5px;font-weight:600;color:var(--muted);transition:color .15s}
.nav a::after,.menu-list a::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav a:hover,.menu-list a:hover{color:var(--ink)}
.nav a:hover::after,.menu-list a:hover::after{transform:scaleX(1)}
.menu-list{display:flex;gap:4px}
.menu-list .current-menu-item>a,.menu-list .current_page_item>a{color:var(--ink)}
.act{margin-left:2px}
.menu{display:none;margin-left:auto;position:relative}
.menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;cursor:pointer;color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--bg)}
.menu-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(290px,calc(100vw - 32px));padding:10px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 48px -20px rgba(11,34,51,.45);display:grid;gap:2px}
.menu-panel a{padding:12px 14px;border-radius:12px;font-weight:600}
.menu-panel a:hover{background:var(--bg)}
.menu-panel a::after{display:none}
.menu-panel .menu-list{display:grid;gap:2px}
.menu-panel .btn{margin-top:6px;justify-content:center}
@media(max-width:860px){.nav,.act{display:none}.menu{display:block}.bar{gap:12px}}

/* ==========================================================================
   Home
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding:88px 0 76px;text-align:center;background:linear-gradient(#fff,var(--bg));border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 25%,transparent 78%);opacity:.7;pointer-events:none}
.hero-in{position:relative;z-index:1;max-width:820px;margin:0 auto}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--muted);font-size:13px;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.hero h1{font-size:clamp(38px,6.4vw,68px);letter-spacing:-.045em;line-height:1.04;margin:22px 0 20px;text-wrap:balance}
.hero h1 em.sf{font-size:1.12em;letter-spacing:-.02em}
mark{background:linear-gradient(transparent 60%,rgba(255,144,0,.5) 0);color:inherit;padding:0 .08em}
.lead{color:var(--muted);font-size:18px;max-width:600px;margin:0 auto}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.hero-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:30px;color:var(--muted);font-size:14px;font-weight:600}
.hero-facts li{display:inline-flex;align-items:center;gap:7px}
.hero-facts .ico{width:17px;height:17px;color:var(--brand-strong)}

/* small "stickers" around the headline: only true statements about how the shop works */
.stk{position:absolute;z-index:1;text-align:left;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 14px 30px -18px rgba(11,34,51,.5);font-size:13px;font-weight:700;line-height:1.3;color:var(--ink);animation:bob 7s ease-in-out infinite}
.stk .ico{width:34px;height:34px;padding:7px;border-radius:10px;background:var(--tint);color:var(--brand-strong)}
.stk small{display:block;color:var(--soft);font-size:11.5px;font-weight:600}
.stk-1{left:4%;top:22%;transform:rotate(-5deg)}
.stk-2{right:4%;top:16%;transform:rotate(4deg);animation-delay:-2s}
.stk-3{left:9%;bottom:14%;transform:rotate(3deg);animation-delay:-4s}
.stk-4{right:8%;bottom:18%;transform:rotate(-3deg);animation-delay:-1s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(max-width:1180px){.stk-3,.stk-4{display:none}}
@media(max-width:980px){.stk{display:none}}

.sec{padding:84px 0}
.sec-soft{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:38px}
.sec-head h2{font-size:clamp(28px,3.8vw,42px)}
.sec-head p{margin-top:12px;color:var(--muted);font-size:16.5px;max-width:560px}
.eyebrow{display:inline-block;margin-bottom:12px;padding:5px 12px;border-radius:999px;background:var(--tint);color:var(--brand-strong);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.more{display:flex;justify-content:center;margin-top:40px}
.home-grid{padding-bottom:0}

/* product cards (the plugin prints the markup; this is the look) */
.pjm-grid{gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pjm-card{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:none;transition:border-color .15s,box-shadow .2s,transform .2s}
.pjm-card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 24px 44px -28px rgba(11,34,51,.5)}
.pjm-card-cover{border-radius:11px;background:var(--bg)}
.pjm-card-ph{background:linear-gradient(135deg,#FFF1DC,var(--bg));color:var(--brand-strong)}
.pjm-card-body{gap:10px;padding:16px 4px 4px}
.pjm-kind{align-self:flex-start;padding:4px 11px;border-radius:999px;background:var(--tint);color:var(--brand-strong);font-size:11.5px;font-weight:800;letter-spacing:.08em}
.pjm-card-title{font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1.28}
.pjm-card-title a:hover{color:var(--brand-strong)}
.pjm-card-tag{color:var(--muted);font-size:14.5px;line-height:1.55}
.pjm-card-meta{gap:8px 16px;color:var(--soft);font-size:13px;font-weight:600}
.pjm-card-foot{display:grid;grid-template-columns:1fr;gap:12px;padding-top:14px;margin-top:auto;border-top:1px dashed var(--line-2)}
.pjm-price{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.pjm-card-foot .pjm-btn{width:100%;min-height:46px}
.pjm-owned{font-size:14px}

/* categories: chip row (like tabs) and one section per category */
.pjm-cats{gap:10px;margin-bottom:38px}
.pjm-cat{padding:9px 18px;background:#F6F8FA;border-color:var(--line-2);font-weight:700}
.pjm-cat:hover{background:#fff;border-color:var(--ink)}
.pjm-cat.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.pjm-groups{gap:18px}
.pjm-group-head{margin-bottom:20px}
.pjm-group-title{font-size:clamp(22px,2.8vw,30px);letter-spacing:-.035em}
.pjm-group-more{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:var(--tint)}
.pjm-crumb{color:var(--soft)}

/* category page: /produk/category/nama/ — result count, grid, numbered pagination */
.cat-head h1 small{margin-left:6px;font-size:.45em;font-weight:700;letter-spacing:0;color:var(--soft)}
.cat-count{margin:-18px 0 20px;color:var(--soft);font-size:14px;font-weight:600}
.cat-body .pjm-grid{padding-bottom:0}
.pjm-wrap.cat-body{padding-bottom:96px} /* two classes: the plugin skin below resets .pjm-wrap's padding */
.cat-back{margin-top:24px}
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:48px}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:#F6F8FA;color:var(--ink);font-size:14.5px;font-weight:700;transition:background-color .15s,border-color .15s}
.pager a.page-numbers:hover{background:#fff;border-color:var(--ink)}
.pager .current{background:var(--ink);border-color:var(--ink);color:#fff}
.pager .dots{min-width:0;padding:0 4px;border-color:transparent;background:none;color:var(--soft)}
.pager .prev,.pager .next{padding:0 18px}
@media(max-width:560px){.pjm-wrap.cat-body{padding-bottom:64px}.pager .prev,.pager .next{flex-basis:100%;order:2}.pager .next{order:3}.cat-count{margin-top:-24px}}

/* kinds: how the shop is organised, counted from real products */
.kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.kind{display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:border-color .15s,box-shadow .2s,transform .2s}
.kind:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 24px 44px -28px rgba(11,34,51,.5)}
.kind .ico{width:52px;height:52px;padding:13px;border-radius:14px;background:var(--tint);color:var(--brand-strong)}
.kind strong{margin-top:8px;font-size:19px;letter-spacing:-.02em}
.kind span{color:var(--muted);font-size:14.5px}
.kind b{color:var(--ink)}

/* benefits inside one big rounded container */
.perks{padding:26px;border:1px solid var(--line);border-radius:26px;background:#fff}
.perks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.perk{padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff}
.perk .ico{width:46px;height:46px;padding:11px;border-radius:50%;background:var(--ink);color:#fff}
.perk h3{margin:16px 0 8px;font-size:17px;letter-spacing:-.02em}
.perk p{color:var(--muted);font-size:14.5px;line-height:1.6}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.steps li{position:relative;padding-top:4px}
.steps .num{display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border-radius:50%;background:var(--brand);color:#1B1206;font-size:16px;font-weight:800}
.steps li:not(:last-child)::after{content:"";position:absolute;left:54px;right:-16px;top:24px;border-top:2px dashed var(--line-2)}
.steps h3{font-size:19px;margin-bottom:8px}
.steps p{color:var(--muted);font-size:15px}

.faq-wrap{max-width:820px}
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:16px;background:#fff}
.faq details[open]{border-color:var(--line-2);box-shadow:0 18px 34px -26px rgba(11,34,51,.45)}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:19px 22px;cursor:pointer;list-style:none;font-weight:700;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg);color:var(--ink);font-size:18px;font-weight:600;line-height:1}
.faq details[open] summary::after{content:"\2212";background:var(--brand);color:#1B1206}
.faq details p{padding:0 60px 22px 22px;color:var(--muted)}

/* two closing cards: dark and light */
.cta-wrap{padding:0 var(--gut) 88px}
.cta-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:38px 40px;border-radius:26px;border:1px solid var(--line);background:var(--bg)}
.cta h2{font-size:clamp(24px,3vw,34px);margin-bottom:12px}
.cta p{color:var(--muted);margin-bottom:26px}
.cta .btn{margin-top:auto}
.cta-dark{background:var(--ink);border-color:var(--ink);color:#fff;background-image:radial-gradient(circle at 100% 0,rgba(255,144,0,.28),transparent 55%)}
.cta-dark p{color:rgba(255,255,255,.78)}

/* ==========================================================================
   Pages, footer
   ========================================================================== */
.page-head{position:relative;padding:60px 0 34px;background:linear-gradient(#fff,var(--bg));border-bottom:1px solid var(--line);margin-bottom:44px}
.page-head h1{font-size:clamp(30px,4.6vw,46px);letter-spacing:-.04em}
.page-body{padding-bottom:92px}
.entry-content{max-width:var(--max);margin:0 auto}
.entry-content>:not(.pjm-wrap){max-width:calc(740px + var(--gut)*2);padding-left:var(--gut);padding-right:var(--gut)}
.entry-content>:not(.pjm-wrap)+*{margin-top:1em}
.entry-content h2{font-size:26px;margin-top:1.6em}
.entry-content h3{font-size:20px;margin-top:1.4em}
.entry-content>p a,.entry-content>ul a,.entry-content>ol a,.entry-content>blockquote a{color:var(--brand-strong);text-decoration:underline;text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content>blockquote:not(.pjm-wrap){margin-left:0;padding-left:calc(var(--gut) + 16px);color:var(--muted);background:linear-gradient(var(--brand),var(--brand)) var(--gut) 0/3px 100% no-repeat}
.entry-content img{border-radius:14px}
.post-item h2 a:hover{color:var(--brand-strong)}

.site-footer{padding:64px 0 32px;background:var(--ink);color:rgba(255,255,255,.78)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.f-brand .logo{margin-bottom:18px}
.f-brand .logo img{height:26px}
.f-brand p{max-width:340px;font-size:14.5px}
.f-h{margin-bottom:16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-weight:800}
.site-footer ul{display:grid;gap:11px;font-size:14.5px}
.site-footer li a{color:rgba(255,255,255,.78)}
.site-footer li a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--brand)}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.62);font-size:13px}

/* WhatsApp button, only when a number is set in Member → Pengaturan */
.wa{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 6px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;box-shadow:0 14px 30px -10px rgba(11,34,51,.6)}
.wa:hover{background:var(--ink-2)}
.wa .wi{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#25D366;color:var(--ink)}
.wa .wi .ico{width:22px;height:22px;stroke:none;fill:currentColor}
@media(max-width:640px){.wa{padding:0 6px;width:52px;justify-content:center}.wa span.t{display:none}}

/* ==========================================================================
   Skin for the PUJIANTO Member plugin (product page, catalogue, account, course player)
   ========================================================================== */
.pjm-wrap{max-width:var(--max);padding:0 var(--gut)}
.pjm-btn{border-radius:999px;font-weight:700}
.pjm-btn-primary{color:#1B1206;box-shadow:0 8px 20px -10px rgba(255,144,0,.8)}
.pjm-btn-primary:hover{color:#1B1206}
.pjm-btn-dark{box-shadow:0 1px 0 #001A26,0 4px 10px -3px rgba(11,34,51,.45)}
.pjm-btn-ghost{background:#F6F8FA;border-color:var(--line-2);color:var(--ink)}
.pjm-btn-ghost:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
.pjm-btn-ghost-dark{border-color:var(--line-2)}
.pjm-btn-ghost-dark:hover{border-color:var(--ink)}

/* catalogue + product hero: light, with the same grid pattern as the home page */
.pjm-page-head{padding:60px 0 34px;margin:0 0 40px;background:linear-gradient(#fff,var(--bg));color:var(--text);border-radius:0;border-bottom:1px solid var(--line)}
.pjm-page-head h1{color:var(--text);font-size:clamp(30px,4.6vw,46px);letter-spacing:-.04em}
.pjm-page-head .pjm-sub{color:var(--muted)}
.pjm-hero{padding:60px 0 48px;background:linear-gradient(#fff,var(--bg));color:var(--text);border-radius:0;border-bottom:1px solid var(--line);overflow:visible}
.pjm-hero::before{inset:0;left:0;top:0;width:auto;height:auto;margin:0;border-radius:0;background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/48px 48px;-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%);opacity:.55}
.pjm-hero h1{color:var(--text);font-size:clamp(30px,4.4vw,50px);letter-spacing:-.04em}
.pjm-hero-tag{color:var(--muted)}
.pjm-kind-on-dark{color:var(--brand-strong)}
.pjm-chips li{background:#fff;border-color:var(--line);color:var(--muted);font-weight:600}
.pjm-chips .pjm-ico{color:var(--brand-strong)}
.pjm-hero-media{background:var(--bg);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 50px -32px rgba(11,34,51,.5)}
.pjm-card-box,.pjm-buybox{border-radius:20px;box-shadow:0 1px 2px rgba(11,34,51,.04)}
.pjm-side{top:96px}
.pjm-grid{padding-bottom:92px}
.home-grid{padding-bottom:0}
.pjm-acct-head h2{font-size:28px}
.pjm-mine-item{border-radius:16px;box-shadow:none}

/* course player: keeps the deep navy top bar, so learning feels like a class room */
.pjm-l-top{background:var(--ink)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:900px){
  .pjm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:60px 0 52px}
  .perks-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps li:not(:last-child)::after{display:none}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1 / -1}
  .cta-2{grid-template-columns:1fr}
}
@media(max-width:620px){.pjm-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){
  .sec{padding:60px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .perks{padding:14px;border-radius:20px}
  .perks-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr;gap:30px}
  .cta{padding:30px 24px}
  .faq details p{padding-right:22px}
  .pjm-hero,.pjm-page-head,.page-head{padding-top:38px}
  .hero-cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}