/*
 * CIS Landing Pages CSS
 * File: assets/css/landing.css
 *
 * Prefix: lp- (landing page)
 * Font: Sora (body) + DM Serif Display (display) — sudah di cis-global
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

/* ════════════════════════════════════════════════════════════════
   WRAP
   ════════════════════════════════════════════════════════════════ */

.lp-wrap {
    margin: 0;
    max-width: 100%;   /* bleed keluar dari .cis-main yang punya padding */
}

/* ════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════ */

.lp-hero {
    background: #0F2140 !important;
    padding: 56px 64px 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: flex-end !important;
    overflow: hidden !important;
}

.lp-hero-left { padding-bottom: 56px !important; }

.lp-eyebrow {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .13em !important;
    color: #C8851A !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
}

.lp-eyebrow::before {
    content: '' !important;
    width: 14px !important;
    height: 1px !important;
    background: #C8851A !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.lp-hero-h {
    font-family: 'DM Serif Display', serif !important;
    font-size: 42px !important;
    font-weight: 400 !important;
    color: #fff !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
    margin: 0 0 20px !important;
}

.lp-hero-h em {
    font-style: italic !important;
    color: #D4921F !important;
}

.lp-hero-sub {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: rgba(255,255,255,.5) !important;
    max-width: 380px !important;
    margin: 0 0 32px !important;
}

.lp-hero-btns {
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.lp-btn-amber {
    font-family: 'Sora', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0F2140 !important;
    background: #D4921F !important;
    padding: 12px 26px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background 150ms !important;
    letter-spacing: .01em !important;
}

.lp-btn-amber:hover { background: #C8851A !important; color: #0F2140 !important; }

.lp-btn-amber--lg {
    font-size: 14px !important;
    padding: 14px 32px !important;
}

.lp-btn-ghost {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.5) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 150ms !important;
}

.lp-btn-ghost:hover { color: rgba(255,255,255,.85) !important; }

/* Stats */
.lp-hero-stats {
    display: flex !important;
    gap: 28px !important;
    margin-top: 36px !important;
    padding-top: 28px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

.lp-stat-n {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1 !important;
}

.lp-stat-l {
    font-size: 10.5px !important;
    color: rgba(255,255,255,.35) !important;
    margin-top: 5px !important;
    font-weight: 500 !important;
}

/* ════════════════════════════════════════════════════════════════
   DEVICE CLUSTER
   ════════════════════════════════════════════════════════════════ */

.lp-device-cluster {
    position: relative !important;
    height: 440px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

.lp-phone {
    width: 170px !important;
    background: #1a1a2e !important;
    border-radius: 24px !important;
    border: 2px solid rgba(255,255,255,.12) !important;
    overflow: hidden !important;
    box-shadow: 0 32px 64px rgba(0,0,0,.5) !important;
    flex-shrink: 0 !important;
}

.lp-phone--main {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 178px !important;
    z-index: 10 !important;
}

.lp-phone--left {
    position: absolute !important;
    bottom: 40px !important;
    left: 0 !important;
    transform: rotate(-6deg) !important;
    transform-origin: bottom center !important;
    opacity: .85 !important;
    width: 152px !important;
}

.lp-phone--right {
    position: absolute !important;
    bottom: 40px !important;
    right: 0 !important;
    transform: rotate(6deg) !important;
    transform-origin: bottom center !important;
    opacity: .85 !important;
    width: 152px !important;
}

.lp-phone-notch {
    height: 18px !important;
    background: #1a1a2e !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.lp-phone-notch::after {
    content: '' !important;
    width: 40px !important;
    height: 6px !important;
    background: #111 !important;
    border-radius: 4px !important;
}

.lp-phone-screen {
    background: #fff !important;
    overflow: hidden !important;
}

/* ── Screen: Career Direction ── */
.lp-sc-dir { padding: 12px 10px !important; background: #fff !important; }
.lp-sc-head { font-size: 9px !important; font-weight: 700 !important; color: #1A1C1E !important; margin-bottom: 2px !important; }
.lp-sc-sub  { font-size: 7.5px !important; color: #8A9099 !important; margin-bottom: 10px !important; }
.lp-sc-sect { font-size: 6.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #8A9099 !important; text-transform: uppercase !important; margin-bottom: 4px !important; }
.lp-sc-code { font-family: 'DM Serif Display', serif !important; font-size: 28px !important; color: #3A4F5C !important; line-height: 1 !important; margin-bottom: 2px !important; }
.lp-sc-code-sub { font-size: 6.5px !important; color: #8A9099 !important; margin-bottom: 8px !important; }

.lp-sc-bar-row { display: flex !important; align-items: center !important; gap: 4px !important; margin-bottom: 3px !important; }
.lp-sc-bar-lbl { font-size: 6.5px !important; font-weight: 600 !important; color: #1A1C1E !important; width: 10px !important; flex-shrink: 0 !important; }
.lp-sc-bar-lbl--long { width: 40px !important; font-size: 5.5px !important; }
.lp-sc-bar-track { flex: 1 !important; height: 3px !important; background: #EAE6DD !important; border-radius: 2px !important; overflow: hidden !important; }
.lp-sc-bar-fill { height: 100% !important; border-radius: 2px !important; }
.lp-sc-bar-fill--green { background: #5A8A6E !important; }
.lp-sc-bar-fill--amber { background: #B8943A !important; }
.lp-sc-bar-fill--red   { background: #C4737A !important; }
.lp-sc-bar-val { font-size: 6.5px !important; font-weight: 700 !important; width: 14px !important; text-align: right !important; flex-shrink: 0 !important; }
.lp-sc-bar-val--green { color: #5A8A6E !important; }
.lp-sc-bar-val--amber { color: #8A6520 !important; }
.lp-sc-bar-val--red   { color: #A83A40 !important; }

.lp-sc-divider { height: .5px !important; background: #EAE6DD !important; margin: 8px 0 !important; }
.lp-sc-anchor-title { font-size: 8px !important; font-weight: 700 !important; color: #1A1C1E !important; margin-bottom: 1px !important; }
.lp-sc-anchor-sub   { font-size: 6.5px !important; color: #8A9099 !important; margin-bottom: 6px !important; }

/* ── Screen: Career Readiness ── */
.lp-sc-ready { padding: 0 !important; background: #fff !important; }
.lp-sc-rdy-head {
    background: #3A4F5C !important;
    padding: 7px 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.lp-sc-rdy-title { font-size: 6.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: rgba(255,255,255,.6) !important; text-transform: uppercase !important; }
.lp-sc-rdy-goal  { font-size: 6.5px !important; font-weight: 700 !important; color: #D4921F !important; }

.lp-sc-rdy-tabs {
    display: flex !important;
    border-bottom: .5px solid #EAE6DD !important;
    padding: 0 8px !important;
}
.lp-sc-rdy-tab {
    padding: 5px 0 !important;
    font-size: 6.5px !important;
    font-weight: 600 !important;
    color: #8A9099 !important;
    margin-right: 10px !important;
    border-bottom: 1.5px solid transparent !important;
}
.lp-sc-rdy-tab--active {
    color: #1A1C1E !important;
    border-bottom-color: #1A1C1E !important;
}
.lp-sc-rdy-tab--green.lp-sc-rdy-tab--active {
    color: #2A6B50 !important;
    border-bottom-color: #2A6B50 !important;
}

.lp-sc-rdy-body { padding: 10px !important; }

.lp-sc-rdy-score {
    font-family: 'DM Serif Display', serif !important;
    font-size: 32px !important;
    color: #E24B4A !important;
    line-height: 1 !important;
}
.lp-sc-rdy-score span { font-size: 14px !important; color: #888 !important; }
.lp-sc-rdy-stage {
    font-size: 6.5px !important;
    font-weight: 600 !important;
    color: #E07B40 !important;
    background: #FDF0E8 !important;
    border: .5px solid #F0C8A0 !important;
    padding: 1.5px 5px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}

.lp-sc-dim-row {
    display: grid !important;
    grid-template-columns: 1fr 28px 18px !important;
    align-items: center !important;
    gap: 3px !important;
    margin-bottom: 4px !important;
}
.lp-sc-dim-lbl { font-size: 6px !important; color: #44484E !important; font-weight: 500 !important; }
.lp-sc-dim-track { height: 2.5px !important; background: #EAE6DD !important; border-radius: 2px !important; overflow: hidden !important; }
.lp-sc-dim-fill { height: 100% !important; border-radius: 2px !important; }
.lp-sc-dim-fill--green { background: #8EC4A0 !important; }
.lp-sc-dim-fill--amber { background: #C4A882 !important; }
.lp-sc-dim-fill--red   { background: #E8A09A !important; }
.lp-sc-dim-val { font-size: 6px !important; font-weight: 700 !important; text-align: right !important; }
.lp-sc-dim-val--green { color: #2A6B50 !important; }
.lp-sc-dim-val--amber { color: #7A5A00 !important; }
.lp-sc-dim-val--red   { color: #A83A40 !important; }

.lp-sc-section-label {
    font-size: 6.5px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    color: #8A9099 !important;
    text-transform: uppercase !important;
    margin-bottom: 5px !important;
}
.lp-sc-action-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 5px !important;
    margin-bottom: 4px !important;
}
.lp-sc-action-num {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #0F2140 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 5.5px !important;
    font-weight: 700 !important;
    color: #fff !important;
    flex-shrink: 0 !important;
}
.lp-sc-action-title { font-size: 6.5px !important; font-weight: 600 !important; color: #1A1C1E !important; }
.lp-sc-action-sub   { font-size: 5.5px !important; color: #8A9099 !important; margin-top: 1px !important; }

/* ── Screen: Rekomendasi ── */
.lp-sc-rec { padding: 0 !important; background: #fff !important; }
.lp-sc-rec-head {
    background: #3A4F5C !important;
    padding: 7px 10px !important;
    font-size: 6.5px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    color: rgba(255,255,255,.6) !important;
    text-transform: uppercase !important;
}
.lp-sc-rec-cat  { font-size: 6px !important; color: #8A9099 !important; margin-bottom: 3px !important; }
.lp-sc-rec-pct  {
    font-family: 'DM Serif Display', serif !important;
    font-size: 28px !important;
    color: #2A6B50 !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
}
.lp-sc-rec-pill {
    font-size: 6px !important;
    font-weight: 600 !important;
    color: #2A6B50 !important;
    background: #E1F5EE !important;
    border: .5px solid #9FE1CB !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}
.lp-sc-rec-row { margin-bottom: 5px !important; }
.lp-sc-rec-row-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 2px !important;
}
.lp-sc-rec-lbl { font-size: 6.5px !important; font-weight: 600 !important; color: #1A1C1E !important; }
.lp-sc-rec-sub { font-size: 5.5px !important; color: #8A9099 !important; }
.lp-sc-rec-val { font-size: 6.5px !important; font-weight: 700 !important; color: #2A6B50 !important; }

/* ════════════════════════════════════════════════════════════════
   FEATURE SECTION
   ════════════════════════════════════════════════════════════════ */

.lp-feat {
    padding: 64px 64px 72px !important;
    background: #F7F5F0 !important;
}

.lp-feat-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    color: #C8851A !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 10px !important;
}

.lp-feat-label::before {
    content: '' !important;
    width: 14px !important;
    height: 1px !important;
    background: #C8851A !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.lp-feat-h {
    font-family: 'DM Serif Display', serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    color: #0F2140 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    margin: 0 0 10px !important;
}

.lp-feat-sub {
    font-size: 14px !important;
    color: #8A9099 !important;
    line-height: 1.65 !important;
    max-width: 520px !important;
    margin: 0 0 40px !important;
}

.lp-feat-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

/* Cards */
.lp-card {
    background: #fff !important;
    border: 1px solid #DDD8CF !important;
    border-radius: 16px !important;
    padding: 28px 26px 24px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: border-color .2s !important;
    text-decoration: none !important;
    display: block !important;
}

.lp-card:hover { border-color: #B8A88A !important; }

.lp-card--dark {
    background: #0F2140 !important;
    border-color: #0F2140 !important;
}

.lp-card--dark:hover { border-color: #1B3A6B !important; }

.lp-card-accent {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 3px !important;
    background: #C8851A !important;
    border-radius: 16px 16px 0 0 !important;
}

.lp-card--dark .lp-card-accent { background: rgba(200,133,26,.5) !important; }

.lp-card-ghost {
    position: absolute !important;
    top: -10px !important;
    right: 14px !important;
    font-family: 'DM Serif Display', serif !important;
    font-size: 88px !important;
    line-height: 1 !important;
    color: rgba(15,33,64,.05) !important;
    pointer-events: none !important;
    user-select: none !important;
}

.lp-card--dark .lp-card-ghost { color: rgba(255,255,255,.05) !important; }

.lp-ctag {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    color: #8A9099 !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
}

.lp-card--dark .lp-ctag { color: rgba(255,255,255,.28) !important; }

.lp-ctitle {
    font-family: 'DM Serif Display', serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #0F2140 !important;
    line-height: 1.15 !important;
    letter-spacing: -.01em !important;
    margin-bottom: 5px !important;
}

.lp-card--dark .lp-ctitle { color: #fff !important; }

.lp-csub {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #C8851A !important;
    margin-bottom: 12px !important;
}

.lp-cdesc {
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: #44484E !important;
}

.lp-card--dark .lp-cdesc { color: rgba(255,255,255,.45) !important; }

.lp-clink {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #1B3A6B !important;
    margin-top: 20px !important;
    border-bottom: 1.5px solid transparent !important;
    padding-bottom: 1px !important;
    transition: border-color .15s !important;
    text-decoration: none !important;
}

.lp-clink:hover { border-color: #1B3A6B !important; }
.lp-card--dark .lp-clink { color: #D4921F !important; }
.lp-card--dark .lp-clink:hover { border-color: #D4921F !important; }

/* ════════════════════════════════════════════════════════════════
   CTA SECTION
   ════════════════════════════════════════════════════════════════ */

.lp-cta {
    margin: 0 40px 64px !important;
    background: #0F2140 !important;
    border-radius: 18px !important;
    padding: 48px 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
}

.lp-cta-tag {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    color: #C8851A !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}

.lp-cta-h {
    font-family: 'DM Serif Display', serif !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    color: #fff !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 0 !important;
}

.lp-cta-sub {
    font-size: 13px !important;
    color: rgba(255,255,255,.4) !important;
    margin-top: 10px !important;
    line-height: 1.65 !important;
    max-width: 340px !important;
}

.lp-cta-right { flex-shrink: 0 !important; }

/* ════════════════════════════════════════════════════════════════
   DASHBOARD (logged-in) — retain dari sebelumnya
   ════════════════════════════════════════════════════════════════ */

.cis-dash {
    background: linear-gradient(135deg, #0F2140 0%, #1B3A6B 100%) !important;
    border-radius: 14px !important;
    padding: 36px 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
    margin-bottom: 20px !important;
}

.cis-dash-greeting { flex: 1; min-width: 0; }

.cis-dash-hello {
    display: block !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.5) !important;
    letter-spacing: .03em !important;
    margin-bottom: 6px !important;
}

.cis-dash-name {
    font-family: 'DM Serif Display', serif !important;
    font-size: 2.2rem !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: #fff !important;
    margin: 0 0 10px !important;
    line-height: 1.1 !important;
}

.cis-dash-goal {
    font-size: .82rem !important;
    color: rgba(255,255,255,.65) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.cis-dash-goal strong { color: rgba(255,255,255,.9) !important; font-weight: 600 !important; }

.cis-dash-track {
    display: inline-block !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
}

.cis-dash-track--professional { background: rgba(16,185,129,.2) !important; color: #a7f3d0 !important; border: 1px solid rgba(16,185,129,.35) !important; }
.cis-dash-track--researcher   { background: rgba(99,102,241,.2) !important; color: #c7d2fe !important; border: 1px solid rgba(99,102,241,.35) !important; }
.cis-dash-track--entrepreneur { background: rgba(245,158,11,.2) !important; color: #fde68a !important; border: 1px solid rgba(245,158,11,.35) !important; }

.cis-dash-score-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }

.cis-dash-score-ring { position: relative !important; width: 80px !important; height: 80px !important; }
.cis-dash-score-svg  { width: 80px !important; height: 80px !important; }

.cis-dash-score-num {
    position: absolute !important; inset: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 1px !important;
}

.cis-dash-score-val { font-size: 1.4rem !important; font-weight: 800 !important; color: #fff !important; line-height: 1 !important; }
.cis-dash-score-pct { font-size: .7rem !important; font-weight: 600 !important; color: rgba(255,255,255,.6) !important; align-self: flex-end !important; padding-bottom: 3px !important; }
.cis-dash-score-label { font-size: .62rem !important; font-weight: 600 !important; color: rgba(255,255,255,.5) !important; letter-spacing: .04em !important; text-align: center !important; }

.cis-dash-nav {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.cis-dash-item {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 14px 16px !important;
    background: #fff !important;
    border: 1px solid #DDD8CF !important;
    border-radius: 10px !important;
    text-decoration: none !important; color: inherit !important;
    transition: border-color 150ms, box-shadow 150ms !important;
}

.cis-dash-item:hover { border-color: #24508F !important; box-shadow: 0 2px 8px rgba(27,58,107,.1) !important; }

.cis-dash-item-icon { font-size: 1.3rem !important; flex-shrink: 0 !important; }

.cis-dash-item-text { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }

.cis-dash-item-label { font-size: .78rem !important; font-weight: 600 !important; color: #1A1C1E !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.cis-dash-item-desc  { font-size: .67rem !important; color: #8A9099 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

.cis-dash-onboard {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 20px !important;
    padding: 16px 20px !important;
    background: #E4ECF7 !important;
    border: 1px solid rgba(27,58,107,.15) !important;
    border-radius: 10px !important;
}

.cis-dash-onboard-text { font-size: .8rem !important; color: #1B3A6B !important; line-height: 1.5 !important; flex: 1 !important; }
.cis-dash-onboard-text strong { font-weight: 700 !important; }

/* ════════════════════════════════════════════════════════════════
   GENERIC LANDING (journey, readiness, insights)
   ════════════════════════════════════════════════════════════════ */

.cis-landing {
    padding: 32px 0 64px !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

.cis-landing-hero {
    text-align: center !important;
    padding: 40px 0 48px !important;
    border-bottom: 1px solid #EAE6DD !important;
    margin-bottom: 40px !important;
}

.cis-landing-icon { font-size: 2.5rem !important; display: block !important; margin-bottom: 16px !important; }

.cis-landing-title {
    font-family: 'DM Serif Display', serif !important;
    font-size: 2.2rem !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: #1B3A6B !important;
    margin: 0 0 16px !important;
}

.cis-landing-desc {
    font-size: .88rem !important;
    color: #44484E !important;
    line-height: 1.7 !important;
    max-width: 54ch !important;
    margin: 0 auto 28px !important;
}

.cis-landing-modules {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
    background: #EAE6DD !important;
    border: 1px solid #EAE6DD !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.cis-landing-module { background: #fff !important; padding: 20px 24px !important; }

.cis-landing-module-label {
    font-size: .72rem !important;
    font-weight: 700 !important;
    color: #1B3A6B !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    margin-bottom: 6px !important;
}

.cis-landing-module p { font-size: .78rem !important; color: #44484E !important; line-height: 1.6 !important; margin: 0 !important; }

.cis-landing-dims {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    background: #EAE6DD !important;
    border: 1px solid #EAE6DD !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.cis-landing-dim { display: flex !important; align-items: flex-start !important; gap: 16px !important; padding: 16px 24px !important; background: #fff !important; }
.cis-landing-dim-icon { font-size: 1.2rem !important; flex-shrink: 0 !important; line-height: 1 !important; margin-top: 2px !important; }
.cis-landing-dim-label { font-size: .78rem !important; font-weight: 700 !important; color: #1B3A6B !important; margin-bottom: 3px !important; }
.cis-landing-dim-body  { font-size: .76rem !important; color: #44484E !important; line-height: 1.55 !important; margin: 0 !important; }

.cis-landing-instruments {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
    background: #EAE6DD !important;
    border: 1px solid #EAE6DD !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.cis-landing-instrument { display: flex !important; align-items: flex-start !important; gap: 14px !important; padding: 20px 22px !important; background: #fff !important; }
.cis-landing-instrument-icon  { font-size: 1.4rem !important; flex-shrink: 0 !important; line-height: 1 !important; margin-top: 2px !important; }
.cis-landing-instrument-label { font-size: .78rem !important; font-weight: 700 !important; color: #1B3A6B !important; margin-bottom: 4px !important; }
.cis-landing-instrument-body  { font-size: .75rem !important; color: #44484E !important; line-height: 1.55 !important; margin: 0 !important; }

.cis-landing-note { font-size: .75rem !important; color: #8A9099 !important; line-height: 1.6 !important; text-align: center !important; padding: 0 24px !important; }

/* ════════════════════════════════════════════════════════════════
   MOCKUP (fallback lama — dihapus, tidak dipakai)
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
    .lp-hero { grid-template-columns: 1fr !important; padding: 40px 32px 32px !important; }
    .lp-device-cluster { display: none !important; }
    .lp-feat { padding: 48px 32px !important; }
    .lp-cta  { margin: 0 24px 48px !important; padding: 36px 32px !important; }
}

@media (max-width: 640px) {
    .lp-hero { padding: 32px 20px 24px !important; }
    .lp-hero-h { font-size: 30px !important; }
    .lp-feat { padding: 40px 20px !important; }
    .lp-feat-grid { grid-template-columns: 1fr !important; }
    .lp-cta { flex-direction: column !important; align-items: flex-start !important; margin: 0 16px 40px !important; padding: 28px 24px !important; }
    .cis-dash { flex-direction: column !important; padding: 24px 20px !important; }
    .cis-dash-nav { grid-template-columns: 1fr 1fr !important; }
    .cis-dash-onboard { flex-direction: column !important; align-items: flex-start !important; }
    .cis-landing-modules { grid-template-columns: 1fr !important; }
    .cis-landing-instruments { grid-template-columns: 1fr !important; }
}

@media (max-width: 400px) {
    .cis-dash-nav { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════
   STUDENT JOURNEY LANDING
   Prefix: sj-
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.sj-hero {
    padding: 72px 64px 64px !important;
    text-align: center !important;
    border-bottom: 1px solid #DDD8CF !important;
    background: #F7F5F0 !important;
}

.sj-hero-tag {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .13em !important;
    color: #C8851A !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.sj-hero-tag::before,
.sj-hero-tag::after {
    content: '' !important;
    width: 20px !important;
    height: 1.5px !important;
    background: #C8851A !important;
    display: block !important;
}

.sj-hero-h {
    font-family: 'DM Serif Display', serif !important;
    font-size: 46px !important;
    font-weight: 400 !important;
    color: #0F2140 !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
    margin: 0 0 16px !important;
}

.sj-hero-h em { font-style: italic !important; color: #C8851A !important; }

.sj-hero-sub {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #8A9099 !important;
    max-width: 520px !important;
    margin: 0 auto 36px !important;
}

.sj-hero-note {
    font-size: 11.5px !important;
    color: #8A9099 !important;
    margin-top: 12px !important;
}

/* ── Showcase ── */
.sj-showcase {
    padding: 56px 64px 64px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

.sj-showcase-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    color: #C8851A !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.sj-showcase-label::before {
    content: '' !important;
    width: 14px !important;
    height: 1.5px !important;
    background: #C8851A !important;
    display: block !important;
}

.sj-showcase-h {
    font-family: 'DM Serif Display', serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    color: #0F2140 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    margin: 0 0 40px !important;
    max-width: 480px !important;
}

/* ── Profile Card ── */
.sj-profile-card {
    background: #fff !important;
    border: 1px solid #DDD8CF !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.sj-pc-head {
    background: #0F2140 !important;
    padding: 28px 32px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.sj-pc-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #D4921F !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'DM Serif Display', serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #fff !important;
    flex-shrink: 0 !important;
}

.sj-pc-info {}

.sj-pc-name {
    font-family: 'DM Serif Display', serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #fff !important;
    letter-spacing: -.01em !important;
    margin-bottom: 3px !important;
}

.sj-pc-meta { font-size: 12px !important; color: rgba(255,255,255,.5) !important; font-weight: 500 !important; }
.sj-pc-meta span { color: rgba(255,255,255,.8) !important; font-weight: 600 !important; }

.sj-pc-right { margin-left: auto !important; text-align: right !important; }

.sj-pc-completion-label {
    font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em !important;
    color: rgba(255,255,255,.4) !important; text-transform: uppercase !important; margin-bottom: 6px !important;
}

.sj-pc-completion-bar {
    width: 120px !important; height: 5px !important;
    background: rgba(255,255,255,.15) !important; border-radius: 3px !important; overflow: hidden !important; margin-bottom: 5px !important;
}

.sj-pc-completion-fill { height: 100% !important; border-radius: 3px !important; background: #D4921F !important; }
.sj-pc-completion-pct { font-size: 12px !important; font-weight: 700 !important; color: #D4921F !important; }

/* Goal row */
.sj-pc-goal-row {
    padding: 14px 32px !important;
    background: #EEEAE2 !important;
    border-bottom: 1px solid #DDD8CF !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.sj-pc-goal-lbl { font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #8A9099 !important; text-transform: uppercase !important; }

.sj-pc-goal-badge {
    font-size: 12px !important; font-weight: 700 !important;
    color: #1B3A6B !important; background: #E4ECF7 !important; border: 1px solid #C4D4E8 !important;
    padding: 4px 12px !important; border-radius: 6px !important;
}

.sj-pc-track-badge {
    font-size: 11px !important; font-weight: 600 !important;
    color: #2A6B50 !important; background: #F0F8F4 !important; border: 1px solid #9FE1CB !important;
    padding: 3px 10px !important; border-radius: 6px !important;
}

.sj-pc-readiness { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.sj-pc-readiness-score { font-size: 13px !important; font-weight: 700 !important; color: #C8851A !important; }
.sj-pc-readiness-lbl   { font-size: 11px !important; color: #8A9099 !important; }

/* Sections grid */
.sj-pc-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
}

.sj-pc-section {
    padding: 24px 28px !important;
    border-bottom: 1px solid #DDD8CF !important;
}

.sj-pc-section:nth-child(odd)       { border-right: 1px solid #DDD8CF !important; }
.sj-pc-section:nth-last-child(-n+2) { border-bottom: none !important; }
.sj-pc-section--full                { grid-column: 1 / -1 !important; border-right: none !important; border-bottom: none !important; }

.sj-pc-sec-head {
    display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 14px !important;
}

.sj-pc-sec-title { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1em !important; color: #8A9099 !important; text-transform: uppercase !important; }
.sj-pc-sec-count { font-size: 10.5px !important; font-weight: 700 !important; color: #C8851A !important; }

/* Academic */
.sj-ac-row { display: flex !important; justify-content: space-between !important; align-items: baseline !important; padding: 5px 0 !important; border-bottom: 1px solid #EEEAE2 !important; }
.sj-ac-row:last-child { border-bottom: none !important; }
.sj-ac-k { font-size: 12px !important; color: #8A9099 !important; font-weight: 500 !important; }
.sj-ac-v { font-size: 12px !important; font-weight: 700 !important; color: #0F2140 !important; }
.sj-ac-v--gpa { color: #2A6B50 !important; }

/* Skills */
.sj-skill-wrap { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.sj-skill-tag { font-size: 11px !important; font-weight: 600 !important; padding: 4px 10px !important; border-radius: 6px !important; border: 1px solid !important; }
.sj-skill-tag--verified { color: #2A6B50 !important; background: #F0F8F4 !important; border-color: #9FE1CB !important; }
.sj-skill-tag--claimed  { color: #44484E !important; background: #EEEAE2 !important; border-color: #DDD8CF !important; }
.sj-skill-legend { display: flex !important; gap: 12px !important; margin-top: 10px !important; }
.sj-sl-item { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 10.5px !important; color: #8A9099 !important; }
.sj-sl-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; }
.sj-sl-dot--green { background: #2A6B50 !important; }
.sj-sl-dot--gray  { background: #aaa !important; }

/* Experience */
.sj-exp-item { display: flex !important; gap: 12px !important; padding: 8px 0 !important; border-bottom: 1px solid #EEEAE2 !important; align-items: flex-start !important; }
.sj-exp-item:last-child { border-bottom: none !important; }
.sj-exp-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; margin-top: 4px !important; flex-shrink: 0 !important; }
.sj-exp-dot--amber { background: #D4921F !important; }
.sj-exp-dot--navy  { background: #0F2140 !important; }
.sj-exp-role  { font-size: 12.5px !important; font-weight: 700 !important; color: #0F2140 !important; margin-bottom: 2px !important; }
.sj-exp-place { font-size: 11.5px !important; color: #8A9099 !important; }
.sj-exp-badge { font-size: 10px !important; font-weight: 600 !important; color: #C8851A !important; background: #FDF5E8 !important; border: 1px solid #EDD9A3 !important; padding: 2px 7px !important; border-radius: 4px !important; margin-left: auto !important; flex-shrink: 0 !important; align-self: flex-start !important; margin-top: 2px !important; }

/* Portfolio */
.sj-port-item { padding: 8px 0 !important; border-bottom: 1px solid #EEEAE2 !important; }
.sj-port-item:last-child { border-bottom: none !important; }
.sj-port-name { font-size: 12.5px !important; font-weight: 700 !important; color: #0F2140 !important; margin-bottom: 2px !important; }
.sj-port-meta { font-size: 11px !important; color: #8A9099 !important; }
.sj-port-link { font-size: 10.5px !important; font-weight: 600 !important; color: #C8851A !important; border-bottom: 1px solid #EDD9A3 !important; }

/* Achievement */
.sj-ach-item { display: flex !important; gap: 10px !important; padding: 7px 0 !important; border-bottom: 1px solid #EEEAE2 !important; align-items: flex-start !important; }
.sj-ach-item:last-child { border-bottom: none !important; }
.sj-ach-rank { font-size: 10px !important; font-weight: 700 !important; color: #fff !important; background: #0F2140 !important; padding: 2px 7px !important; border-radius: 4px !important; flex-shrink: 0 !important; margin-top: 2px !important; }
.sj-ach-rank--gold { background: #B8780A !important; }
.sj-ach-name  { font-size: 12px !important; font-weight: 600 !important; color: #0F2140 !important; margin-bottom: 1px !important; }
.sj-ach-scope { font-size: 10.5px !important; color: #8A9099 !important; }

/* Learning */
.sj-learn-item { display: flex !important; gap: 10px !important; padding: 7px 0 !important; border-bottom: 1px solid #EEEAE2 !important; align-items: flex-start !important; }
.sj-learn-item:last-child { border-bottom: none !important; }
.sj-learn-type { font-size: 10px !important; font-weight: 700 !important; color: #1B3A6B !important; background: #E4ECF7 !important; border: 1px solid #C4D4E8 !important; padding: 2px 7px !important; border-radius: 4px !important; flex-shrink: 0 !important; margin-top: 2px !important; }
.sj-learn-name   { font-size: 12px !important; font-weight: 600 !important; color: #0F2140 !important; margin-bottom: 1px !important; }
.sj-learn-issuer { font-size: 10.5px !important; color: #8A9099 !important; }

/* Compass */
.sj-compass-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

.sj-sc-code {
    font-family: 'DM Serif Display', serif !important;
    font-size: 28px !important;
    color: #3A4F5C !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

.sj-riasec-row { display: flex !important; gap: 6px !important; margin-bottom: 8px !important; }

.sj-riasec-bar-wrap { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; }

.sj-riasec-bar-track {
    width: 100% !important; height: 40px !important;
    background: #EEEAE2 !important; border-radius: 4px !important;
    overflow: hidden !important; display: flex !important; align-items: flex-end !important;
}

.sj-riasec-bar-fill { width: 100% !important; border-radius: 4px !important; }
.sj-riasec-bar-fill--green { background: #5A8A6E !important; }
.sj-riasec-bar-fill--amber { background: #B8943A !important; }
.sj-riasec-bar-fill--red   { background: #C4737A !important; }

.sj-riasec-lbl { font-size: 10px !important; font-weight: 700 !important; color: #8A9099 !important; }
.sj-riasec-val { font-size: 10px !important; font-weight: 700 !important; color: #0F2140 !important; }

.sj-compass-right { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.sj-comp-item {}
.sj-comp-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .07em !important; color: #8A9099 !important; text-transform: uppercase !important; margin-bottom: 3px !important; }
.sj-comp-val   { font-size: 14px !important; font-weight: 700 !important; color: #0F2140 !important; margin-bottom: 2px !important; }
.sj-comp-sub   { font-size: 11px !important; color: #8A9099 !important; }

/* ── Why section ── */
.sj-why { background: #0F2140 !important; padding: 64px 64px !important; }
.sj-why-inner { max-width: 1280px !important; margin: 0 auto !important; }

.sj-why-label {
    font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .12em !important;
    color: #C8851A !important; text-transform: uppercase !important;
    display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 10px !important;
}
.sj-why-label::before { content: '' !important; width: 14px !important; height: 1.5px !important; background: #C8851A !important; display: block !important; }

.sj-why-h {
    font-family: 'DM Serif Display', serif !important;
    font-size: 30px !important; font-weight: 400 !important;
    color: #fff !important; line-height: 1.15 !important;
    letter-spacing: -.02em !important; margin-bottom: 36px !important; max-width: 480px !important;
}

.sj-why-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.sj-why-item { background: #0F2140 !important; padding: 28px 26px !important; }

.sj-why-num {
    font-family: 'DM Serif Display', serif !important;
    font-size: 36px !important; font-weight: 400 !important;
    color: rgba(212,146,31,.2) !important; line-height: 1 !important;
    margin-bottom: 14px !important; letter-spacing: -.02em !important;
}

.sj-why-title { font-size: 15px !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 8px !important; line-height: 1.3 !important; }
.sj-why-desc  { font-size: 12.5px !important; line-height: 1.7 !important; color: rgba(255,255,255,.45) !important; }

/* ── CTA ── */
.sj-cta { padding: 64px 48px !important; text-align: center !important; }

.sj-cta-h {
    font-family: 'DM Serif Display', serif !important;
    font-size: 34px !important; font-weight: 400 !important;
    color: #0F2140 !important; line-height: 1.1 !important;
    letter-spacing: -.025em !important; margin-bottom: 12px !important;
}

.sj-cta-sub { font-size: 14px !important; color: #8A9099 !important; line-height: 1.7 !important; margin-bottom: 28px !important; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .sj-hero     { padding: 48px 32px 52px !important; }
    .sj-hero-h   { font-size: 32px !important; }
    .sj-showcase { padding: 40px 24px 48px !important; }
    .sj-pc-head  { flex-wrap: wrap !important; gap: 14px !important; }
    .sj-pc-right { margin-left: 0 !important; width: 100% !important; }
    .sj-pc-completion-bar { width: 100% !important; }
    .sj-pc-goal-row  { padding: 12px 20px !important; }
    .sj-pc-readiness { margin-left: 0 !important; width: 100% !important; }
    .sj-pc-body { grid-template-columns: 1fr !important; }
    .sj-pc-section { border-right: none !important; padding: 20px !important; }
    .sj-pc-section:nth-last-child(-n+2) { border-bottom: 1px solid #DDD8CF !important; }
    .sj-pc-section:last-child { border-bottom: none !important; }
    .sj-compass-grid { grid-template-columns: 1fr !important; }
    .sj-why  { padding: 48px 20px !important; }
    .sj-why-grid { grid-template-columns: 1fr !important; }
    .sj-cta  { padding: 48px 20px !important; }
    .sj-cta-h { font-size: 26px !important; }
}

/* ════════════════════════════════════════════════════════════════
   CAREER INSIGHTS LANDING
   Prefix: ci-
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.ci-hero {
    padding: 80px 64px 72px !important;
    display: grid !important;
    grid-template-columns: 1fr 420px !important;
    gap: 72px !important;
    align-items: center !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

.ci-hero-left {}

.ci-hero-tag {
    font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .13em !important;
    color: #C8851A !important; text-transform: uppercase !important;
    display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 18px !important;
}
.ci-hero-tag::before { content: '' !important; width: 18px !important; height: 1.5px !important; background: #C8851A !important; display: block !important; }

.ci-hero-h {
    font-family: 'DM Serif Display', serif !important;
    font-size: 46px !important; font-weight: 400 !important;
    color: #0F2140 !important; line-height: 1.06 !important;
    letter-spacing: -.03em !important; margin: 0 0 18px !important;
}
.ci-hero-h em { font-style: italic !important; color: #C8851A !important; }

.ci-hero-sub {
    font-size: 14.5px !important; line-height: 1.75 !important;
    color: #8A9099 !important; max-width: 400px !important; margin: 0 0 28px !important;
}

.ci-hero-note { font-size: 11.5px !important; color: #8A9099 !important; margin-top: 10px !important; }

/* Instrument pills */
.ci-instr-row { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-bottom: 28px !important; }

.ci-instr-pill {
    font-size: 11.5px !important; font-weight: 600 !important;
    padding: 6px 14px !important; border-radius: 20px !important;
    border: 1px solid #DDD8CF !important; background: #fff !important; color: #44484E !important;
    display: flex !important; align-items: center !important; gap: 6px !important;
}

.ci-instr-pill-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; flex-shrink: 0 !important; }

/* Compass Result Card */
.ci-compass-card {
    background: #fff !important;
    border: 1px solid #DDD8CF !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(15,33,64,.06) !important;
}

.ci-cc-head {
    background: #0F2140 !important;
    padding: 18px 24px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.ci-cc-title { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1em !important; color: rgba(255,255,255,.5) !important; text-transform: uppercase !important; }
.ci-cc-name  { font-size: 13px !important; font-weight: 700 !important; color: #fff !important; }

.ci-cc-body { padding: 22px 24px !important; }

.ci-hc-label { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .09em !important; color: #8A9099 !important; text-transform: uppercase !important; margin-bottom: 6px !important; }
.ci-hc-code  { font-family: 'DM Serif Display', serif !important; font-size: 40px !important; color: #0F2140 !important; line-height: 1 !important; letter-spacing: -.03em !important; margin-bottom: 2px !important; }
.ci-hc-sub   { font-size: 11px !important; color: #8A9099 !important; margin-bottom: 12px !important; }

.ci-riasec-bars {
    display: flex !important; gap: 4px !important;
    align-items: flex-end !important; height: 60px !important; margin-bottom: 4px !important;
}

.ci-rb-col { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; flex: 1 !important; }
.ci-rb-track { width: 100% !important; background: #EEEAE2 !important; border-radius: 3px !important; overflow: hidden !important; flex: 1 !important; display: flex !important; align-items: flex-end !important; }
.ci-rb-fill  { width: 100% !important; border-radius: 3px !important; }
.ci-rb-lbl   { font-size: 8.5px !important; font-weight: 700 !important; color: #8A9099 !important; }
.ci-rb-val   { font-size: 8.5px !important; font-weight: 700 !important; color: #0F2140 !important; }

.ci-divider { height: 1px !important; background: #DDD8CF !important; margin: 14px 0 !important; }

.ci-anchor-title { font-size: 13px !important; font-weight: 700 !important; color: #0F2140 !important; margin-bottom: 2px !important; }
.ci-anchor-sub   { font-size: 11px !important; color: #8A9099 !important; margin-bottom: 10px !important; }

.ci-anchor-bar-row { display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 5px !important; }
.ci-abr-lbl   { font-size: 10.5px !important; color: #44484E !important; font-weight: 500 !important; width: 88px !important; flex-shrink: 0 !important; }
.ci-abr-track { flex: 1 !important; height: 3px !important; background: #EEEAE2 !important; border-radius: 2px !important; overflow: hidden !important; }
.ci-abr-fill  { height: 100% !important; border-radius: 2px !important; background: #2A6B50 !important; }
.ci-abr-val   { font-size: 10.5px !important; font-weight: 700 !important; color: #2A6B50 !important; width: 22px !important; text-align: right !important; }

.ci-wv-row { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.ci-wv-tag { font-size: 10.5px !important; font-weight: 600 !important; padding: 4px 10px !important; border-radius: 6px !important; border: 1px solid !important; }
.ci-wv-tag--hi  { color: #2A6B50 !important; background: #F0F8F4 !important; border-color: #C0E8D5 !important; }
.ci-wv-tag--mid { color: #C8851A !important; background: #FDF5E8 !important; border-color: #EDD9A3 !important; }

/* ── 4 Instrument Cards ── */
.ci-instr-section {
    background: #EEEAE2 !important;
    border-top: 1px solid #DDD8CF !important;
    border-bottom: 1px solid #DDD8CF !important;
    padding: 64px 64px !important;
}
.ci-instr-inner { max-width: 1280px !important; margin: 0 auto !important; }

.ci-sec-label {
    font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .12em !important;
    color: #C8851A !important; text-transform: uppercase !important;
    display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 10px !important;
}
.ci-sec-label::before { content: '' !important; width: 14px !important; height: 1.5px !important; background: #C8851A !important; display: block !important; }

.ci-sec-h {
    font-family: 'DM Serif Display', serif !important;
    font-size: 28px !important; font-weight: 400 !important;
    color: #0F2140 !important; line-height: 1.15 !important;
    letter-spacing: -.02em !important; margin-bottom: 36px !important; max-width: 500px !important;
}

.ci-instr-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

.ci-instr-card {
    background: #fff !important;
    border: 1px solid #DDD8CF !important;
    border-radius: 14px !important;
    padding: 24px 22px !important;
    position: relative !important;
    overflow: hidden !important;
}

.ci-instr-n {
    font-family: 'DM Serif Display', serif !important;
    font-size: 56px !important; color: rgba(15,33,64,.05) !important;
    position: absolute !important; top: -8px !important; right: 10px !important;
    line-height: 1 !important; letter-spacing: -.03em !important; pointer-events: none !important;
}

.ci-instr-name {
    font-family: 'DM Serif Display', serif !important;
    font-size: 16px !important; font-weight: 400 !important;
    color: #0F2140 !important; margin-bottom: 5px !important; letter-spacing: -.01em !important;
}
.ci-instr-sub  { font-size: 11px !important; font-weight: 600 !important; color: #C8851A !important; margin-bottom: 10px !important; }
.ci-instr-desc { font-size: 12px !important; line-height: 1.65 !important; color: #8A9099 !important; }

.ci-instr-output {
    margin-top: 14px !important; padding-top: 12px !important;
    border-top: 1px solid #EEEAE2 !important;
}
.ci-instr-output-lbl { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #8A9099 !important; text-transform: uppercase !important; margin-bottom: 5px !important; }
.ci-instr-output-val { font-size: 12px !important; font-weight: 700 !important; color: #0F2140 !important; }

/* ── Rekomendasi Cards ── */
.ci-rec-section { padding: 64px 64px !important; }
.ci-rec-inner   { max-width: 1280px !important; margin: 0 auto !important; }

.ci-rec-showcase {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 14px !important;
}

.ci-rec-card {
    background: #fff !important;
    border: 1px solid #DDD8CF !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: box-shadow .2s !important;
}
.ci-rec-card:hover   { box-shadow: 0 6px 24px rgba(15,33,64,.08) !important; }
.ci-rec-card--main   { border-color: #0F2140 !important; }

.ci-rc-head {
    padding: 16px 20px !important; border-bottom: 1px solid #DDD8CF !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.ci-rc-rank        { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #8A9099 !important; text-transform: uppercase !important; }
.ci-rc-rank--main  { color: #C8851A !important; }
.ci-rc-domain      { font-size: 10px !important; color: #8A9099 !important; }

.ci-rc-body  { padding: 18px 20px !important; }
.ci-rc-cat   { font-size: 10.5px !important; color: #8A9099 !important; margin-bottom: 4px !important; font-weight: 500 !important; }
.ci-rc-job   { font-family: 'DM Serif Display', serif !important; font-size: 20px !important; color: #0F2140 !important; margin-bottom: 4px !important; }

.ci-rc-pct-row { display: flex !important; align-items: baseline !important; gap: 6px !important; margin-bottom: 10px !important; }
.ci-rc-pct     { font-family: 'DM Serif Display', serif !important; font-size: 36px !important; line-height: 1 !important; letter-spacing: -.03em !important; }
.ci-rc-pct--green { color: #2A6B50 !important; }
.ci-rc-pct--amber { color: #C8851A !important; }
.ci-rc-pct-lbl { font-size: 11px !important; color: #8A9099 !important; font-weight: 500 !important; }

.ci-rc-pill       { font-size: 10.5px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: 20px !important; display: inline-block !important; margin-bottom: 14px !important; border: 1px solid !important; }
.ci-rc-pill--green { color: #2A6B50 !important; background: #F0F8F4 !important; border-color: #C0E8D5 !important; }
.ci-rc-pill--amber { color: #C8851A !important; background: #FDF5E8 !important; border-color: #EDD9A3 !important; }

.ci-rc-dim     { display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 6px !important; }
.ci-rc-dim-lbl { font-size: 11px !important; color: #44484E !important; font-weight: 500 !important; width: 88px !important; flex-shrink: 0 !important; }
.ci-rc-dim-track { flex: 1 !important; height: 3px !important; background: #EEEAE2 !important; border-radius: 2px !important; overflow: hidden !important; }
.ci-rc-dim-fill  { height: 100% !important; border-radius: 2px !important; }
.ci-rc-dim-fill--green { background: #2A6B50 !important; }
.ci-rc-dim-fill--amber { background: #C8851A !important; }
.ci-rc-dim-pct { font-size: 11px !important; font-weight: 700 !important; width: 28px !important; text-align: right !important; }
.ci-rc-dim-pct--green { color: #2A6B50 !important; }
.ci-rc-dim-pct--amber { color: #C8851A !important; }

.ci-rc-why { margin-top: 14px !important; padding: 12px !important; border-radius: 8px !important; border: 1px solid !important; }
.ci-rc-why--green { background: #F0F8F4 !important; border-color: #C0E8D5 !important; }
.ci-rc-why--amber { background: #FDF5E8 !important; border-color: #EDD9A3 !important; }
.ci-rc-why--gray  { background: #F7F5F0 !important; border-color: #DDD8CF !important; }

.ci-rc-why-lbl { font-size: 9px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; margin-bottom: 4px !important; }
.ci-rc-why-lbl--green { color: #2A6B50 !important; }
.ci-rc-why-lbl--amber { color: #C8851A !important; }
.ci-rc-why-lbl--gray  { color: #8A9099 !important; }
.ci-rc-why-text { font-size: 11px !important; line-height: 1.6 !important; color: #44484E !important; }

/* ── Responsive ── */
@media (max-width: 960px) {
    .ci-hero { grid-template-columns: 1fr !important; padding: 48px 32px 52px !important; gap: 36px !important; }
    .ci-hero-h { font-size: 32px !important; }
    .ci-instr-section { padding: 48px 24px !important; }
    .ci-instr-grid { grid-template-columns: 1fr 1fr !important; }
    .ci-rec-section { padding: 48px 24px !important; }
    .ci-rec-showcase { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
    .ci-instr-grid { grid-template-columns: 1fr !important; }
    .ci-hero-h { font-size: 28px !important; }
}

/* ════════════════════════════════════════════════════════════════
   CAREER READINESS LANDING
   Prefix: cr-
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.cr-hero {
    padding: 80px 64px 72px !important;
    display: grid !important;
    grid-template-columns: 1fr 460px !important;
    gap: 64px !important;
    align-items: center !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

.cr-hero-tag {
    font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .13em !important;
    color: #C8851A !important; text-transform: uppercase !important;
    display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 18px !important;
}
.cr-hero-tag::before { content: '' !important; width: 18px !important; height: 1.5px !important; background: #C8851A !important; display: block !important; }

.cr-hero-h {
    font-family: 'DM Serif Display', serif !important;
    font-size: 44px !important; font-weight: 400 !important;
    color: #0F2140 !important; line-height: 1.06 !important;
    letter-spacing: -.03em !important; margin: 0 0 18px !important;
}
.cr-hero-h em { font-style: italic !important; color: #C8851A !important; }

.cr-hero-sub { font-size: 14.5px !important; line-height: 1.75 !important; color: #8A9099 !important; max-width: 400px !important; margin: 0 0 32px !important; }
.cr-hero-note { font-size: 11.5px !important; color: #8A9099 !important; margin-top: 10px !important; }

/* Dashboard Mock */
.cr-dash {
    background: #fff !important;
    border: 1px solid #DDD8CF !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 40px rgba(15,33,64,.08) !important;
}

.cr-dash-head {
    background: #0F2140 !important; padding: 16px 24px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.cr-dh-title { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1em !important; color: rgba(255,255,255,.5) !important; text-transform: uppercase !important; }
.cr-dh-live  { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 10px !important; color: rgba(255,255,255,.4) !important; }
.cr-dh-dot   { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #4CAF88 !important; }

.cr-dash-tabs { display: flex !important; border-bottom: 1px solid #DDD8CF !important; }
.cr-dash-tab  { padding: 10px 20px !important; font-size: 12px !important; font-weight: 600 !important; color: #8A9099 !important; cursor: pointer !important; border-bottom: 2px solid transparent !important; }
.cr-dash-tab--active { color: #0F2140 !important; border-bottom-color: #0F2140 !important; }

.cr-dash-body { padding: 20px 24px !important; }

/* Score */
.cr-score-row { display: flex !important; align-items: flex-end !important; gap: 16px !important; margin-bottom: 6px !important; }
.cr-score-big {
    font-family: 'DM Serif Display', serif !important;
    font-size: 64px !important; color: #8B3A35 !important; line-height: 1 !important; letter-spacing: -.04em !important;
}
.cr-score-pct { font-family: 'DM Serif Display', serif !important; font-size: 28px !important; color: #8A9099 !important; padding-bottom: 8px !important; }
.cr-score-right { padding-bottom: 6px !important; }
.cr-score-stage { font-size: 11px !important; font-weight: 600 !important; color: #E07B40 !important; background: #FDF5E8 !important; border: 1px solid #EDD9A3 !important; padding: 4px 10px !important; border-radius: 6px !important; display: inline-block !important; margin-bottom: 6px !important; }
.cr-score-goal { font-size: 11px !important; color: #8A9099 !important; font-weight: 500 !important; }
.cr-score-goal strong { color: #0F2140 !important; }

/* Sub scores */
.cr-sub-scores { display: flex !important; gap: 10px !important; margin-bottom: 16px !important; }
.cr-ss-item    { flex: 1 !important; background: #EEEAE2 !important; border-radius: 10px !important; padding: 10px 12px !important; }
.cr-ss-label   { font-size: 9px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #8A9099 !important; text-transform: uppercase !important; margin-bottom: 4px !important; }
.cr-ss-val     { font-size: 18px !important; font-weight: 700 !important; font-family: 'DM Serif Display', serif !important; line-height: 1 !important; }
.cr-ss-val--red   { color: #8B3A35 !important; }
.cr-ss-val--amber { color: #C8851A !important; }
.cr-ss-val--green { color: #2A6B50 !important; }
.cr-ss-sub { font-size: 9px !important; color: #8A9099 !important; margin-top: 2px !important; }

/* Dim rows */
.cr-dim-label-row { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #8A9099 !important; text-transform: uppercase !important; margin-bottom: 10px !important; }
.cr-dim-row { display: grid !important; grid-template-columns: 120px 1fr 36px !important; align-items: center !important; gap: 8px !important; margin-bottom: 8px !important; }
.cr-dim-name  { font-size: 11.5px !important; color: #44484E !important; font-weight: 500 !important; }
.cr-dim-track { height: 5px !important; background: #EEEAE2 !important; border-radius: 3px !important; overflow: hidden !important; }
.cr-dim-fill  { height: 100% !important; border-radius: 3px !important; }
.cr-dim-fill--red   { background: #E8A09A !important; }
.cr-dim-fill--amber { background: #C4A882 !important; }
.cr-dim-fill--green { background: #8EC4A0 !important; }
.cr-dim-pct { font-size: 11.5px !important; font-weight: 700 !important; text-align: right !important; }
.cr-dim-pct--red   { color: #8B3A35 !important; }
.cr-dim-pct--amber { color: #7A5A00 !important; }
.cr-dim-pct--green { color: #2A6B50 !important; }

/* Timeline */
.cr-timeline-wrap { margin-top: 14px !important; padding: 14px !important; background: #EEEAE2 !important; border-radius: 10px !important; }
.cr-tl-label { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #8A9099 !important; text-transform: uppercase !important; margin-bottom: 8px !important; }
.cr-tl-bar-wrap { position: relative !important; height: 8px !important; background: #DDD8CF !important; border-radius: 4px !important; overflow: hidden !important; margin-bottom: 8px !important; }
.cr-tl-now    { position: absolute !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 39% !important; background: #8B3A35 !important; border-radius: 4px 0 0 4px !important; }
.cr-tl-target { position: absolute !important; top: 0 !important; left: 39% !important; height: 100% !important; width: 36% !important; background: #D4921F !important; }
.cr-tl-labels { display: flex !important; justify-content: space-between !important; }
.cr-tl-now-lbl    { font-size: 10px !important; font-weight: 700 !important; color: #8B3A35 !important; }
.cr-tl-target-lbl { font-size: 10px !important; font-weight: 700 !important; color: #8A9099 !important; }
.cr-tl-boxes { display: flex !important; gap: 8px !important; margin-top: 8px !important; }
.cr-tl-box { flex: 1 !important; background: #fff !important; border-radius: 8px !important; padding: 10px !important; border: 1px solid #DDD8CF !important; }
.cr-tl-box-label { font-size: 9px !important; font-weight: 700 !important; letter-spacing: .07em !important; color: #8A9099 !important; text-transform: uppercase !important; margin-bottom: 4px !important; }
.cr-tl-box-val   { font-family: 'DM Serif Display', serif !important; font-size: 22px !important; line-height: 1 !important; }
.cr-tl-box-sub   { font-size: 9px !important; color: #8A9099 !important; margin-top: 2px !important; }
.cr-tl-box--now .cr-tl-box-val { color: #8B3A35 !important; }
.cr-tl-box--acc { border-color: #C0E8D5 !important; background: #F0F8F4 !important; }
.cr-tl-box--acc .cr-tl-box-val { color: #2A6B50 !important; }

/* ── 6 Dimensi ── */
.cr-dims-section { background: #EEEAE2 !important; border-top: 1px solid #DDD8CF !important; border-bottom: 1px solid #DDD8CF !important; padding: 64px 64px !important; }
.cr-dims-inner   { max-width: 1280px !important; margin: 0 auto !important; }

.cr-sec-label {
    font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .12em !important;
    color: #C8851A !important; text-transform: uppercase !important;
    display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 10px !important;
}
.cr-sec-label::before { content: '' !important; width: 14px !important; height: 1.5px !important; background: #C8851A !important; display: block !important; }

.cr-sec-h {
    font-family: 'DM Serif Display', serif !important;
    font-size: 28px !important; font-weight: 400 !important;
    color: #0F2140 !important; line-height: 1.15 !important;
    letter-spacing: -.02em !important; margin-bottom: 36px !important; max-width: 520px !important;
}

.cr-dims-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
}

.cr-dim-card {
    background: #fff !important; border: 1px solid #DDD8CF !important;
    border-radius: 14px !important; padding: 24px 22px !important;
    position: relative !important; overflow: hidden !important;
}

.cr-dim-card-n {
    font-family: 'DM Serif Display', serif !important;
    font-size: 72px !important; color: rgba(15,33,64,.04) !important;
    position: absolute !important; top: -10px !important; right: 8px !important;
    line-height: 1 !important; pointer-events: none !important;
}
.cr-dim-card-code   { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .09em !important; color: #8A9099 !important; text-transform: uppercase !important; margin-bottom: 8px !important; }
.cr-dim-card-title  { font-family: 'DM Serif Display', serif !important; font-size: 18px !important; font-weight: 400 !important; color: #0F2140 !important; margin-bottom: 5px !important; }
.cr-dim-card-weight { font-size: 11px !important; font-weight: 600 !important; color: #C8851A !important; margin-bottom: 10px !important; }
.cr-dim-card-desc   { font-size: 12px !important; line-height: 1.65 !important; color: #8A9099 !important; margin-bottom: 12px !important; }
.cr-dim-card-bar-wrap { height: 4px !important; background: #EEEAE2 !important; border-radius: 2px !important; overflow: hidden !important; margin-bottom: 4px !important; }
.cr-dim-card-bar    { height: 100% !important; border-radius: 2px !important; }
.cr-dim-card-score  { font-size: 12px !important; font-weight: 700 !important; text-align: right !important; }

/* ── Strategi & Triangulasi ── */
.cr-strat-section { padding: 64px 64px !important; }
.cr-strat-inner   { max-width: 1280px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px !important; align-items: start !important; }

.cr-strat-card { background: #fff !important; border: 1px solid #DDD8CF !important; border-radius: 16px !important; overflow: hidden !important; }
.cr-strat-head {
    background: #0F2140 !important; padding: 14px 20px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.cr-strat-ht    { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .09em !important; color: rgba(255,255,255,.5) !important; text-transform: uppercase !important; }
.cr-strat-hgoal { font-size: 11px !important; font-weight: 700 !important; color: #D4921F !important; }
.cr-strat-body  { padding: 18px 20px !important; }

.cr-prio-label { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #8A9099 !important; text-transform: uppercase !important; margin-bottom: 12px !important; }
.cr-prio-item  { display: flex !important; gap: 10px !important; margin-bottom: 12px !important; align-items: flex-start !important; }
.cr-prio-item:last-child { margin-bottom: 0 !important; }
.cr-prio-num   { width: 20px !important; height: 20px !important; border-radius: 50% !important; background: #0F2140 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 9px !important; font-weight: 700 !important; color: #fff !important; flex-shrink: 0 !important; margin-top: 1px !important; }
.cr-prio-title { font-size: 12.5px !important; font-weight: 700 !important; color: #0F2140 !important; margin-bottom: 2px !important; }
.cr-prio-sub   { font-size: 11px !important; color: #8A9099 !important; line-height: 1.5 !important; margin-bottom: 4px !important; }
.cr-prio-impact { font-size: 10.5px !important; font-weight: 600 !important; padding: 2px 8px !important; border-radius: 4px !important; display: inline-block !important; border: 1px solid !important; }
.cr-prio-impact--green { color: #2A6B50 !important; background: #F0F8F4 !important; border-color: #C0E8D5 !important; }
.cr-prio-impact--amber { color: #C8851A !important; background: #FDF5E8 !important; border-color: #EDD9A3 !important; }

/* Triangulasi */
.cr-tri-card { background: #fff !important; border: 1px solid #DDD8CF !important; border-radius: 16px !important; overflow: hidden !important; }
.cr-tri-head { background: #0F2140 !important; padding: 14px 20px !important; }
.cr-tri-ht   { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .09em !important; color: rgba(255,255,255,.5) !important; text-transform: uppercase !important; }
.cr-tri-body { padding: 18px 20px !important; }
.cr-tri-section-lbl { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #8A9099 !important; text-transform: uppercase !important; }
.cr-tri-bar-row { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 7px !important; }
.cr-tri-lbl { font-size: 11.5px !important; color: #44484E !important; font-weight: 500 !important; width: 100px !important; flex-shrink: 0 !important; }
.cr-tri-track { flex: 1 !important; height: 4px !important; background: #EEEAE2 !important; border-radius: 2px !important; overflow: hidden !important; }
.cr-tri-fill  { height: 100% !important; border-radius: 2px !important; }
.cr-tri-fill--purple { background: #7B68D8 !important; }
.cr-tri-fill--green  { background: #2A6B50 !important; }
.cr-tri-fill--amber  { background: #C8851A !important; }
.cr-tri-val { font-size: 11.5px !important; font-weight: 700 !important; width: 32px !important; text-align: right !important; }

.cr-gap-box { background: #FDF5E8 !important; border: 1px solid #EDD9A3 !important; border-radius: 8px !important; padding: 10px 12px !important; margin: 12px 0 !important; }
.cr-gap-lbl { font-size: 9px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #C8851A !important; text-transform: uppercase !important; margin-bottom: 3px !important; }
.cr-gap-txt { font-size: 11.5px !important; line-height: 1.55 !important; color: #44484E !important; }

.cr-pattern-box { background: #EEEAE2 !important; border-radius: 8px !important; padding: 10px 12px !important; margin-top: 10px !important; }
.cr-pat-lbl   { font-size: 9px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #8A9099 !important; text-transform: uppercase !important; margin-bottom: 3px !important; }
.cr-pat-title { font-size: 13px !important; font-weight: 700 !important; color: #0F2140 !important; margin-bottom: 2px !important; }
.cr-pat-desc  { font-size: 11px !important; line-height: 1.55 !important; color: #8A9099 !important; }

/* ── Responsive ── */
@media (max-width: 960px) {
    .cr-hero { grid-template-columns: 1fr !important; padding: 48px 24px 52px !important; gap: 36px !important; }
    .cr-hero-h { font-size: 32px !important; }
    .cr-sub-scores { flex-direction: column !important; }
    .cr-dims-section { padding: 48px 24px !important; }
    .cr-dims-grid { grid-template-columns: 1fr 1fr !important; }
    .cr-strat-section { padding: 48px 24px !important; }
    .cr-strat-inner { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
    .cr-dims-grid { grid-template-columns: 1fr !important; }
    .cr-hero-h { font-size: 28px !important; }
}