/* ==========================================================================
Course info pages (every "-course-info" page) on the landing presentation
layer. Loaded after landing-page.css inside the .lp wrapper: the tokens,
the eyebrow chip, the section head, the glass card, the arrow button and
the section rhythm are the ones of the landing page. The page keeps its
own composition and every block keeps its tint (deep blue hero, white
features, mint exam, amber practical, cream certificate, gold reviews);
only the frame changes. The copy and the grids are untouched: this file
styles the existing markup.
========================================================================== */
/* --------------------------------------------------------------------------
Tokens: the page's own token systems point at the landing tokens, so the
type, the ink, the hairline, the radii and the shadows agree everywhere
-------------------------------------------------------------------------- */
.lp {
--ph-font: var(--lp-font-body);
--ph-container: var(--lp-measure);
--ph-radius: var(--lp-radius);
--ph-radius-sm: var(--lp-radius-sm);
--ph-shadow: var(--lp-shadow);
--ph-shadow-lg: var(--lp-shadow-hover);
--ph-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--ph-text: var(--lp-ink);
--ph-text-secondary: var(--lp-ink-2);
--ph-text-muted: var(--lp-ink-3);
--ph-border: var(--lp-line);
--crx-ink: var(--lp-ink);
--crx-body: var(--lp-ink-2);
--crx-line: var(--lp-line);
--crx-blue: var(--lp-blue-deep);
--ovw-ink: var(--lp-ink);
--ovw-body: var(--lp-ink-2);
--ovw-line: var(--lp-line);
--ovw-blue: var(--lp-blue-deep);
--qna-ink: var(--lp-ink);
--qna-body: var(--lp-ink-2);
--qna-line: var(--lp-line);
--qna-blue: var(--lp-blue-deep);
/* the deep plate of the stats band, used by every dark board here */
--ip-plate: linear-gradient(150deg, #0b1f3a 0%, #12325c 55%, #16407a 100%);
--ip-plate-line: rgba(148, 197, 255, 0.18);
--ip-panel-pad: calc(48px * var(--lp-scale)) calc(40px * var(--lp-scale));
--ip-block-gap: calc(64px * var(--lp-scale));
}
/* --------------------------------------------------------------------------
Shared shapes: chip, head, intro, glass card, buttons
-------------------------------------------------------------------------- */
/* One eyebrow chip for every block, the landing chip */
.lp .pf-label,
.lp .ovw-eyebrow,
.lp .crx-eyebrow,
.lp .target-badge,
.lp .cert-exam-label,
.lp .video-badge,
.lp .certv2-label,
.lp .ph-reviews-badge,
.lp .qna-eyebrow,
.lp .qna-cta-tag {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0 0 calc(24px * var(--lp-scale));
padding: 9px 16px 9px 12px;
border-radius: 999px;
background: var(--lp-glass-strong);
border: 1px solid var(--lp-line);
box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lp-ink-2);
line-height: 1;
white-space: nowrap;
-webkit-text-fill-color: currentColor;
}
/* Their icons become the round blue tile of the landing chips */
.lp .ovw-eyebrow svg,
.lp .crx-eyebrow svg,
.lp .target-badge svg,
.lp .video-badge svg,
.lp .ph-reviews-badge svg {
box-sizing: border-box;
width: 22px;
height: 22px;
flex: 0 0 22px;
padding: 5px;
border-radius: 50%;
color: #ffffff;
stroke: currentColor;
fill: none;
stroke-width: 2.4;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.8);
}
.lp .video-badge svg {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
box-shadow: 0 6px 14px -8px rgba(217, 119, 6, 0.8);
}
.lp .ph-reviews-badge svg {
background: linear-gradient(135deg, var(--lp-gold) 0%, #d97706 100%);
box-shadow: 0 6px 14px -8px rgba(217, 119, 6, 0.8);
fill: #ffffff;
stroke: #ffffff;
}
.lp .ph-reviews-badge span,
.lp .target-badge span {
color: inherit;
font: inherit;
letter-spacing: inherit;
}
/* One section head: the display title and the reading measure intro */
.lp .pf-title,
.lp .ovw-title,
.lp .crx-title,
.lp .target-title,
.lp .cert-exam-title,
.lp .video-title,
.lp .certv2-title,
.lp .ph-reviews-title,
.lp .qna-title {
margin: 0;
font-family: var(--lp-font-display);
font-size: clamp(30px, 3.1vw, calc(44px * var(--lp-scale)));
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--lp-ink);
text-wrap: balance;
background: none;
-webkit-text-fill-color: currentColor;
}
.lp .pf-subtitle,
.lp .crx-lede,
.lp .target-desc,
.lp .cert-exam-desc,
.lp .video-subtitle,
.lp .certv2-desc,
.lp .qna-sub {
max-width: calc(760px * var(--lp-scale));
margin: calc(20px * var(--lp-scale)) auto 0;
font-family: var(--lp-font-body);
font-size: calc(17.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.65;
letter-spacing: 0;
color: var(--lp-ink-2);
text-wrap: pretty;
}
.lp .pf-subtitle strong,
.lp .crx-lede strong,
.lp .target-desc strong,
.lp .cert-exam-desc strong,
.lp .video-subtitle strong,
.lp .certv2-desc strong,
.lp .qna-sub strong {
color: var(--lp-ink);
}
/* Centred heads */
.lp .pf-header,
.lp .crx-head,
.lp .crx-skills-head,
.lp .target-header,
.lp .video-top,
.lp .certv2-top,
.lp .ph-reviews-header,
.lp .qna-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: none;
margin: 0 auto calc(44px * var(--lp-scale));
}
/* The glass card */
.lp .pf-card,
.lp .pf-item,
.lp .pf-trust-banner,
.lp .ovw-law,
.lp .ovw-path,
.lp .crx-stats,
.lp .crx-node-card,
.lp .crx-exam li,
.lp .crx-skills-list li,
.lp .target-card,
.lp .target-stat,
.lp .cert-exam-stat,
.lp .cert-exam-benefit,
.lp .video-step-content,
.lp .certv2-frame,
.lp .certv2-feat,
.lp .qna-card,
.lp .qna-cta {
background: var(--lp-glass);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow: var(--lp-shadow), 0 0 0 1px var(--lp-line);
border-radius: var(--lp-radius);
box-sizing: border-box;
}
/* The small glass card: list rows, feature rows, chips of facts */
.lp .pf-item,
.lp .pf-trust-banner,
.lp .crx-exam li,
.lp .crx-skills-list li,
.lp .target-stat,
.lp .cert-exam-benefit,
.lp .certv2-feat,
.lp .ovw-proof-list li,
.lp .ed-feature {
border-radius: var(--lp-radius-sm);
}
/* Lift on hover for the standing cards */
.lp .pf-card,
.lp .pf-item,
.lp .ovw-law,
.lp .ovw-path,
.lp .crx-node-card,
.lp .crx-skills-list li,
.lp .target-card,
.lp .cert-exam-stat,
.lp .cert-exam-benefit,
.lp .certv2-feat {
transition: transform 0.28s var(--lp-ease), box-shadow 0.28s var(--lp-ease);
}
.lp .pf-card:hover,
.lp .pf-item:hover,
.lp .ovw-law:hover,
.lp .ovw-path:hover,
.lp .crx-node-card:hover,
.lp .crx-skills-list li:hover,
.lp .target-card:hover,
.lp .cert-exam-stat:hover,
.lp .cert-exam-benefit:hover,
.lp .certv2-feat:hover {
transform: translateY(-3px);
box-shadow: var(--lp-shadow-hover), 0 0 0 1px rgba(37, 99, 235, 0.22);
}
/* The panels: a block on the page as one framed plate */
.lp .target-section,
.lp .cert-exam,
.lp .video-section,
.lp .certv2,
.lp .crx-skills,
.lp .ovw-proof,
.lp .crx-cta,
.lp .ed-panel {
border-radius: var(--lp-radius);
border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow: var(--lp-shadow), 0 0 0 1px var(--lp-line);
box-sizing: border-box;
}
.lp .target-section,
.lp .cert-exam,
.lp .video-section,
.lp .certv2,
.lp .crx-skills,
.lp .ovw-proof {
padding: var(--ip-panel-pad);
}
/* The arrow buttons: one primary shape, tinted per block */
.lp .ed-btn,
.lp .ovw-path-btn,
.lp .ovw-path-btn-solid,
.lp .crx-cta-btn,
.lp .qna-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 54px;
margin: 0;
padding: 0 calc(26px * var(--lp-scale));
border-radius: 999px;
font-family: var(--lp-font-display);
font-size: calc(15.5px * var(--lp-scale));
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.005em;
color: #ffffff;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.28);
background: linear-gradient(135deg, #047857 0%, #059669 55%, #10b981 100%);
background-size: 160% 100%;
background-position: 0% 50%;
box-shadow: 0 18px 34px -16px rgba(5, 150, 105, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.26);
transition: transform 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease), background-position 0.45s var(--lp-ease), filter 0.2s var(--lp-ease);
white-space: nowrap;
cursor: pointer;
}
.lp .ed-btn:hover,
.lp .ovw-path-btn:hover,
.lp .ovw-path-btn-solid:hover,
.lp .crx-cta-btn:hover,
.lp .qna-cta-btn:hover {
color: #ffffff;
text-decoration: none;
transform: translateY(-3px);
background-position: 100% 50%;
filter: saturate(1.08) brightness(1.04);
box-shadow: 0 26px 44px -16px rgba(5, 150, 105, 0.85), 0 0 0 6px rgba(5, 150, 105, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lp .ed-btn:active,
.lp .ovw-path-btn:active,
.lp .ovw-path-btn-solid:active,
.lp .crx-cta-btn:active,
.lp .qna-cta-btn:active {
transform: translateY(-1px) scale(0.99);
}
.lp .ed-btn:focus-visible,
.lp .ovw-path-btn:focus-visible,
.lp .ovw-path-btn-solid:focus-visible,
.lp .crx-cta-btn:focus-visible,
.lp .qna-cta-btn:focus-visible {
outline: 0;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28);
}
.lp .ed-btn svg,
.lp .ovw-path-btn svg,
.lp .crx-cta-btn svg,
.lp .qna-cta-btn svg {
width: 18px;
height: 18px;
flex: 0 0 18px;
stroke: currentColor;
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.25s var(--lp-ease);
}
.lp .ed-btn:hover svg,
.lp .ovw-path-btn:hover svg,
.lp .crx-cta-btn:hover svg,
.lp .qna-cta-btn:hover svg {
transform: translateX(4px);
}
/* The quiet secondary: glass pill, blue ink */
.lp .ovw-path-btn:not(.ovw-path-btn-solid) {
color: var(--lp-blue-deep);
background: var(--lp-glass-strong);
border: 1px solid var(--lp-line-strong);
box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
}
.lp .ovw-path-btn:not(.ovw-path-btn-solid):hover {
color: var(--lp-blue-deep);
filter: none;
box-shadow: 0 16px 30px -18px rgba(30, 58, 138, 0.6), 0 0 0 6px rgba(37, 99, 235, 0.1);
}
/* The gold primary of the curriculum board, on the deep plate */
.lp .crx-cta-btn {
color: #1c1608;
background: linear-gradient(135deg, #fde68a 0%, #f59e0b 55%, #d97706 100%);
background-size: 160% 100%;
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 18px 34px -16px rgba(245, 158, 11, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.lp .crx-cta-btn:hover {
color: #1c1608;
box-shadow: 0 26px 44px -16px rgba(245, 158, 11, 0.85), 0 0 0 6px rgba(245, 158, 11, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* The brand orange call to action, the hero pill of the landing page */
.lp .hero-ultra-btn,
.lp .cta-invest-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: auto;
min-height: calc(62px * var(--lp-scale));
margin: 0;
padding: 0 calc(34px * var(--lp-scale));
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
background-size: 200% 200%;
color: #ffffff;
text-decoration: none;
font-family: var(--lp-font-display);
font-size: calc(15.5px * var(--lp-scale));
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
isolation: isolate;
box-shadow: 0 6px 20px -4px rgba(194, 65, 12, 0.35), 0 0 30px -10px rgba(249, 115, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, filter 0.35s ease;
}
.lp .hero-ultra-btn:hover,
.lp .cta-invest-btn:hover {
color: #ffffff;
text-decoration: none;
transform: translateY(-4px) scale(1.015);
filter: saturate(1.06) brightness(1.04);
box-shadow: 0 18px 38px -10px rgba(194, 65, 12, 0.5), 0 0 0 6px rgba(249, 115, 22, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.lp .hero-ultra-btn:active,
.lp .cta-invest-btn:active {
transform: translateY(-1px) scale(0.985);
}
.lp .hero-ultra-btn::before,
.lp .cta-invest-btn::before,
.lp .hero-ultra-btn::after,
.lp .cta-invest-btn::after {
display: none;
}
.lp .hero-ultra-btn-text,
.lp .cta-invest-btn-text {
position: static;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-shadow: none;
}
.lp .hero-ultra-btn-icon,
.lp .cta-invest-btn-arrow {
width: 24px;
height: 24px;
flex: 0 0 24px;
opacity: 1;
transition: transform 0.3s var(--lp-ease);
}
.lp .hero-ultra-btn:hover .hero-ultra-btn-icon,
.lp .cta-invest-btn:hover .cta-invest-btn-arrow {
transform: translateX(4px);
}
/* --------------------------------------------------------------------------
Page frame: the containers take the landing measure, the top level blocks
take the section rhythm, the nested sections give theirs up
-------------------------------------------------------------------------- */
.lp .hero-ultra-container,
.lp .pf-container,
.lp .ph-container,
.lp .cta-invest-inner,
.lp .ph-reviews-inner,
.lp .qna-shell {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--lp-measure);
margin: 0 auto;
padding: 0 var(--lp-pad-x);
box-sizing: border-box;
}
.lp .pf-section,
.lp .ph-content,
.lp .cta-invest,
.lp .ph-reviews,
.lp .qna {
padding: var(--lp-sec-pad) 0;
}
.lp .crx,
.lp .ovw-laws,
.lp .ovw-paths {
padding: 0;
overflow: visible;
}
/* One gap between the blocks of the content column */
.lp .ovw,
.lp .crx,
.lp .target-section,
.lp .cert-exam,
.lp .video-section {
margin: 0 0 var(--ip-block-gap);
}
.lp .certv2 {
margin: 0;
}
.lp .ph-content {
background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 26%, #f7faff 100%);
}
/* --------------------------------------------------------------------------
Hero: the deep blue plate, one centred column, the landing hero type
-------------------------------------------------------------------------- */
.lp .hero-ultra {
padding: calc(88px * var(--lp-scale)) 0 calc(150px * var(--lp-scale));
background: linear-gradient(180deg, #061220 0%, #0b1f3a 45%, #0c2447 100%);
}
.lp .hero-ultra-container {
max-width: calc(900px * var(--lp-scale));
}
.lp .hero-ultra-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.lp .hero-ultra-badge {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 calc(24px * var(--lp-scale));
padding: 9px 16px 9px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: none;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
color: rgba(255, 255, 255, 0.92);
white-space: nowrap;
}
.lp .hero-ultra-badge::before,
.lp .hero-ultra-badge::after {
display: none;
}
.lp .hero-ultra-badge span {
color: inherit;
font: inherit;
letter-spacing: inherit;
}
.lp .hero-ultra-badge-dot {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
}
.lp .hero-ultra-title {
margin: 0;
}
.lp .hero-ultra-main {
display: block;
margin: 0;
padding: 0;
font-family: var(--lp-font-display);
font-size: clamp(34px, 4.4vw, calc(58px * var(--lp-scale)));
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.028em;
color: #ffffff;
background: none;
-webkit-text-fill-color: #ffffff;
text-shadow: 0 2px 18px rgba(2, 10, 30, 0.45);
text-wrap: balance;
}
.lp .hero-ultra-sub {
display: block;
margin: calc(18px * var(--lp-scale)) 0 0;
font-family: var(--lp-font-body);
font-size: clamp(18px, 1.6vw, calc(23px * var(--lp-scale)));
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 1px 10px rgba(2, 10, 30, 0.4);
}
.lp .hero-ultra-desc {
max-width: calc(820px * var(--lp-scale));
margin: calc(22px * var(--lp-scale)) auto 0;
font-family: var(--lp-font-body);
font-size: clamp(16px, 1.25vw, calc(18.5px * var(--lp-scale)));
font-weight: 400;
line-height: 1.7;
letter-spacing: 0.005em;
color: rgba(255, 255, 255, 0.94);
text-shadow: 0 1px 8px rgba(2, 10, 30, 0.45);
text-wrap: pretty;
}
.lp .hero-ultra-desc b,
.lp .hero-ultra-desc strong {
font-weight: 700;
color: #ffffff;
}
/* What you will get: four dark glass tiles under one quiet label */
.lp .hero-ultra-includes {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: 100%;
margin: calc(34px * var(--lp-scale)) 0 0;
}
.lp .hero-ultra-includes-label {
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.62);
}
.lp .hero-ultra-includes-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
width: 100%;
}
.lp .hero-ultra-include {
display: inline-flex;
align-items: center;
gap: 11px;
padding: 10px 16px 10px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: none;
color: #ffffff;
transition: background 0.25s var(--lp-ease), border-color 0.25s var(--lp-ease), transform 0.25s var(--lp-ease);
}
.lp .hero-ultra-include:hover {
background: rgba(255, 255, 255, 0.13);
border-color: rgba(255, 255, 255, 0.24);
transform: translateY(-2px);
}
.lp .hero-ultra-include .hero-ultra-include-icon {
width: 30px;
height: 30px;
flex: 0 0 30px;
border-radius: 50%;
border: 0;
}
.lp .hero-ultra-include .hero-ultra-include-icon svg {
width: 15px;
height: 15px;
}
.lp .hero-ultra-include span {
font-family: var(--lp-font-body);
font-size: 14.5px;
font-weight: 600;
line-height: 1.2;
color: #ffffff;
}
.lp .hero-ultra-cta {
display: flex;
justify-content: center;
width: 100%;
margin: calc(36px * var(--lp-scale)) 0 0;
}
/* --------------------------------------------------------------------------
Why choose: the three value cards, the six perks, the trust strip and
the employer dashboard plate
-------------------------------------------------------------------------- */
.lp .pf-section {
background:
radial-gradient(60% 40% at 50% 0%, rgba(219, 234, 254, 0.7) 0%, rgba(219, 234, 254, 0) 70%),
linear-gradient(180deg, #f0f7ff 0%, #f8fbff 45%, #ffffff 100%);
}
.lp .pf-bg-pattern {
display: none;
}
.lp .pf-main-grid {
gap: calc(22px * var(--lp-scale));
margin: 0 0 calc(22px * var(--lp-scale));
}
/* Three value cards stay side by side while there is room for them; the
page's own sheet stacks them from 1024px down, too early for a tablet */
@media (min-width: 900px) {
.lp .pf-main-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.lp .pf-card {
padding: calc(30px * var(--lp-scale)) calc(28px * var(--lp-scale));
}
.lp .pf-card-glow {
display: none;
}
.lp .pf-card .pf-card-icon {
width: 56px;
height: 56px;
margin: 0 0 calc(22px * var(--lp-scale));
border-radius: 18px;
}
.lp .pf-card-value {
margin: 0 0 6px;
font-family: var(--lp-font-display);
font-size: clamp(34px, 3vw, calc(44px * var(--lp-scale)));
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
}
.lp .pf-card-title {
margin: 0 0 10px;
font-family: var(--lp-font-display);
font-size: calc(20px * var(--lp-scale));
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--lp-ink);
}
.lp .pf-card-desc {
margin: 0;
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 500;
line-height: 1.65;
color: var(--lp-ink-2);
}
.lp .pf-card-badge {
padding: 6px 12px;
border-radius: 999px;
font-family: var(--lp-font-body);
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
.lp .pf-secondary-grid {
gap: calc(14px * var(--lp-scale));
margin: 0 0 calc(22px * var(--lp-scale));
}
.lp .pf-item {
align-items: flex-start;
gap: 14px;
padding: 18px 20px;
}
.lp .pf-item .pf-item-icon {
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 14px;
}
.lp .pf-item-text strong {
display: block;
margin: 0 0 3px;
font-family: var(--lp-font-body);
font-size: calc(16.5px * var(--lp-scale));
font-weight: 700;
line-height: 1.3;
color: var(--lp-ink);
}
.lp .pf-item-text span {
font-family: var(--lp-font-body);
font-size: calc(15.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.5;
color: var(--lp-ink-2);
}
.lp .pf-trust-banner {
justify-content: center;
gap: calc(28px * var(--lp-scale));
padding: calc(22px * var(--lp-scale)) calc(28px * var(--lp-scale));
border-radius: var(--lp-radius);
}
.lp .pf-trust-item .pf-trust-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 12px;
}
.lp .pf-trust-text strong {
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 700;
color: var(--lp-ink);
}
.lp .pf-trust-text span {
font-family: var(--lp-font-body);
font-size: calc(14.5px * var(--lp-scale));
font-weight: 500;
color: var(--lp-ink-2);
}
.lp .pf-trust-divider {
background: var(--lp-line);
}
/* The employer dashboard: deep plate on the left, white on the right */
.lp .ed-panel {
max-width: none;
margin: calc(44px * var(--lp-scale)) auto 0;
overflow: hidden;
}
/* On the View Course pages of the single course platforms the plate is a
direct child of the section, outside .pf-container: it takes the
container's box itself (the measure minus the container padding), so it
ends on the same lines as the grids above it instead of running edge to
edge. */
.lp .pf-section > .ed-panel {
width: calc(100% - 2 * var(--lp-pad-x));
max-width: calc(var(--lp-measure) - 2 * var(--lp-pad-x));
margin-left: auto;
margin-right: auto;
}
.lp .ed-panel-left {
padding: calc(40px * var(--lp-scale)) calc(36px * var(--lp-scale));
background: var(--ip-plate);
gap: 18px;
}
.lp .ed-badge {
gap: 9px;
padding: 9px 14px 9px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #a7f3d0;
}
.lp .ed-badge svg {
width: 14px;
height: 14px;
color: #34d399;
}
.lp .ed-title {
margin: 0;
font-family: var(--lp-font-display);
font-size: clamp(24px, 2.4vw, calc(32px * var(--lp-scale)));
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: #ffffff;
}
.lp .ed-desc {
margin: 0;
font-family: var(--lp-font-body);
font-size: calc(16.5px * var(--lp-scale));
font-weight: 400;
line-height: 1.7;
color: rgba(255, 255, 255, 0.8);
}
.lp .ed-btn {
margin-top: 6px;
}
.lp .ed-panel-right {
padding: calc(28px * var(--lp-scale)) calc(28px * var(--lp-scale));
gap: 8px;
}
.lp .ed-feature {
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
border: 1px solid transparent;
transition: background 0.25s var(--lp-ease), border-color 0.25s var(--lp-ease);
}
.lp .ed-feature:hover {
background: rgba(37, 99, 235, 0.04);
border-color: var(--lp-line);
}
.lp .ed-feature .ed-feature-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 12px;
}
.lp .ed-feature-text strong {
font-family: var(--lp-font-body);
font-size: calc(16.5px * var(--lp-scale));
font-weight: 700;
line-height: 1.3;
color: var(--lp-ink);
}
.lp .ed-feature-text span {
font-family: var(--lp-font-body);
font-size: calc(15.5px * var(--lp-scale));
font-weight: 400;
line-height: 1.55;
color: var(--lp-ink-2);
}
/* --------------------------------------------------------------------------
Course overview: statement, the law rail, the two audience cards, the
dark proof board
-------------------------------------------------------------------------- */
.lp .ovw-intro-grid {
gap: calc(32px * var(--lp-scale)) calc(48px * var(--lp-scale));
align-items: start;
}
.lp .ovw-eyebrow {
margin-bottom: calc(20px * var(--lp-scale));
}
.lp .ovw-title {
margin: 0;
text-align: left;
}
/* The tricolour rule stays; the leads hang off it with the landing gutter */
.lp .ovw-intro-side {
padding-left: calc(30px * var(--lp-scale));
}
.lp .ovw-lead {
margin: 0;
font-family: var(--lp-font-body);
font-size: calc(17.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.7;
color: var(--lp-ink-2);
text-wrap: pretty;
}
.lp .ovw-lead strong {
color: var(--lp-ink);
}
.lp .ovw-lead-soft {
margin-top: 14px;
font-size: calc(16.5px * var(--lp-scale));
color: var(--lp-ink-3);
}
.lp .ovw-intro-rail {
align-items: center;
gap: 12px 14px;
margin-top: calc(32px * var(--lp-scale));
padding-top: calc(24px * var(--lp-scale));
border-top: 1px solid var(--lp-line);
}
.lp .ovw-rail-label {
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lp-ink-3);
}
.lp .ovw-chips li {
padding: 9px 15px;
border-radius: 999px;
background: var(--lp-glass-strong);
border: 1px solid var(--lp-line);
box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
font-family: var(--lp-font-body);
font-size: 14.5px;
font-weight: 600;
line-height: 1.2;
color: var(--lp-ink-2);
}
.lp .ovw-laws {
margin-top: var(--ip-block-gap);
}
.lp .ovw-laws-title {
margin: 0 0 calc(24px * var(--lp-scale));
font-family: var(--lp-font-body);
font-size: 13px;
font-weight: 800;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: center;
color: var(--lp-ink-3);
}
.lp .ovw-laws-grid {
gap: calc(22px * var(--lp-scale));
}
.lp .ovw-law {
padding: calc(30px * var(--lp-scale)) calc(26px * var(--lp-scale)) calc(28px * var(--lp-scale));
}
.lp .ovw-law-index {
font-family: var(--lp-font-display);
font-size: clamp(44px, 4vw, calc(58px * var(--lp-scale)));
color: rgba(30, 58, 138, 0.08);
}
.lp .ovw-law-ref {
padding: 6px 11px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.08);
border: 1px solid rgba(37, 99, 235, 0.14);
font-family: var(--lp-font-body);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lp-blue-deep);
}
.lp .ovw-law-name {
margin: 14px 0 8px;
font-family: var(--lp-font-display);
font-size: calc(19px * var(--lp-scale));
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--lp-ink);
}
.lp .ovw-law-text {
margin: 0;
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 500;
line-height: 1.65;
color: var(--lp-ink-2);
}
.lp .ovw-paths {
gap: calc(22px * var(--lp-scale));
margin-top: var(--ip-block-gap);
}
.lp .ovw-path {
padding: calc(34px * var(--lp-scale)) calc(32px * var(--lp-scale));
}
.lp .ovw-path-emp {
background:
radial-gradient(80% 55% at 100% 0%, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0) 70%),
var(--lp-glass);
}
.lp .ovw-path-wrk {
background:
radial-gradient(80% 55% at 100% 0%, rgba(5, 150, 105, 0.1) 0%, rgba(5, 150, 105, 0) 70%),
var(--lp-glass);
}
.lp .ovw-path-head {
align-items: center;
gap: 12px;
}
.lp .ovw-path .ovw-path-glyph {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 14px;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
box-shadow: 0 14px 26px -16px rgba(37, 99, 235, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lp .ovw-path-wrk .ovw-path-glyph {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
box-shadow: 0 14px 26px -16px rgba(5, 150, 105, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lp .ovw-path-tag {
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--lp-blue-deep);
}
.lp .ovw-path-wrk .ovw-path-tag {
color: var(--lp-green-ink);
}
.lp .ovw-path-title {
margin: 18px 0 18px;
font-family: var(--lp-font-display);
font-size: calc(22px * var(--lp-scale));
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--lp-ink);
}
/* Side by side, both titles reserve two lines, so the two lists start on
the same line and their first rows sit level across the cards. */
@media (min-width: 961px) {
.lp .ovw-path-title {
min-height: 2.5em;
}
}
.lp .ovw-path-list {
margin: 0 0 calc(24px * var(--lp-scale));
}
/* Every row has the same padding, the first one included (the base sheet
trims the first row and moves its check up, which put that one check 9px
above its line). The 26px check disc is centred on the first line of the
text: line box 25.6px * scale, top padding 12px * scale. */
.lp .ovw-path-list li,
.lp .ovw-path-list li:first-child {
padding: calc(12px * var(--lp-scale)) 0 calc(12px * var(--lp-scale)) 40px;
border-top: 1px solid var(--lp-line);
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 500;
line-height: 1.6;
color: var(--lp-ink-2);
}
.lp .ovw-path-list li:first-child {
border-top: 0;
}
.lp .ovw-path-list li::before,
.lp .ovw-path-list li:first-child::before {
top: calc(24.8px * var(--lp-scale) - 14px);
}
.lp .ovw-path-list li::after,
.lp .ovw-path-list li:first-child::after {
top: calc(24.8px * var(--lp-scale) - 7px);
}
.lp .ovw-path-btn {
align-self: flex-start;
margin-top: auto;
}
/* The proof board: the deep plate */
.lp .ovw-proof {
margin-top: var(--ip-block-gap);
background: var(--ip-plate);
border-color: var(--ip-plate-line);
box-shadow: var(--lp-shadow), 0 0 0 1px rgba(11, 31, 58, 0.6);
}
.lp .ovw-proof-glow {
display: none;
}
.lp .ovw-proof-head {
text-align: center;
}
.lp .ovw-proof-title {
margin: 0;
font-family: var(--lp-font-display);
font-size: clamp(24px, 2.4vw, calc(32px * var(--lp-scale)));
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
color: #ffffff;
}
.lp .ovw-proof-sub {
max-width: calc(680px * var(--lp-scale));
margin: 12px auto 0;
font-family: var(--lp-font-body);
font-size: calc(17px * var(--lp-scale));
font-weight: 400;
line-height: 1.65;
color: rgba(255, 255, 255, 0.78);
}
.lp .ovw-proof-list {
gap: 12px;
margin-top: calc(30px * var(--lp-scale));
}
.lp .ovw-proof-list li {
align-items: center;
padding: 15px 18px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.lp .ovw-proof-check {
width: 26px;
height: 26px;
flex: 0 0 26px;
border-radius: 50%;
background: linear-gradient(135deg, #34d399 0%, #059669 100%);
box-shadow: 0 6px 14px -6px rgba(16, 185, 129, 0.8);
}
.lp .ovw-proof-text {
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 500;
line-height: 1.5;
color: rgba(255, 255, 255, 0.94);
}
.lp .ovw-proof-foot {
margin-top: calc(30px * var(--lp-scale));
padding-top: calc(26px * var(--lp-scale));
border-top: 1px solid rgba(255, 255, 255, 0.12);
text-align: center;
}
.lp .ovw-seals {
justify-content: center;
gap: 10px;
margin: 0 0 18px;
}
.lp .ovw-seal {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #ffffff;
}
.lp .ovw-foot-text {
max-width: calc(860px * var(--lp-scale));
margin: 0 auto;
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 400;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
}
/* --------------------------------------------------------------------------
Curriculum: the at a glance strip, the module path, the outcomes panel
and the start today board
-------------------------------------------------------------------------- */
.lp .crx-head {
max-width: none;
}
.lp .crx-lede {
max-width: calc(820px * var(--lp-scale));
}
.lp .crx-stats {
margin: 0 0 calc(36px * var(--lp-scale));
overflow: hidden;
}
.lp .crx-stat {
gap: 4px;
padding: calc(22px * var(--lp-scale)) calc(22px * var(--lp-scale));
border-left: 1px solid var(--lp-line);
}
.lp .crx-stat strong {
font-family: var(--lp-font-display);
font-size: clamp(26px, 2.3vw, calc(32px * var(--lp-scale)));
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--lp-green-ink);
}
.lp .crx-stat span {
font-family: var(--lp-font-body);
font-size: calc(15px * var(--lp-scale));
font-weight: 600;
line-height: 1.4;
color: var(--lp-ink-2);
}
.lp .crx-stats-note {
padding: 14px calc(22px * var(--lp-scale));
border-top: 1px solid var(--lp-line);
background: rgba(255, 255, 255, 0.55);
font-family: var(--lp-font-body);
font-size: calc(15px * var(--lp-scale));
font-weight: 500;
line-height: 1.55;
color: var(--lp-ink-2);
}
.lp .crx-stats-note svg {
color: var(--lp-green);
}
.lp .crx-path {
gap: calc(16px * var(--lp-scale));
margin: 0;
}
.lp .crx-node {
grid-template-columns: 52px minmax(0, 1fr);
gap: calc(20px * var(--lp-scale));
}
.lp .crx-node-num {
width: 52px;
height: 52px;
background: linear-gradient(135deg, #059669 0%, #047857 100%);
border: 3px solid #ffffff;
color: #ffffff;
font-family: var(--lp-font-display);
font-size: 16px;
font-weight: 800;
letter-spacing: 0;
box-shadow: 0 0 0 1px var(--lp-line), 0 14px 26px -16px rgba(5, 150, 105, 0.8);
}
.lp .crx-node-card {
padding: calc(24px * var(--lp-scale)) calc(26px * var(--lp-scale));
}
.lp .crx-node-head {
align-items: center;
gap: 10px 14px;
margin-bottom: 8px;
}
.lp .crx-node-title {
margin: 0;
font-family: var(--lp-font-display);
font-size: calc(20px * var(--lp-scale));
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--lp-ink);
}
.lp .crx-node-tag {
padding: 6px 11px;
border-radius: 999px;
background: rgba(5, 150, 105, 0.08);
border: 1px solid rgba(5, 150, 105, 0.16);
font-family: var(--lp-font-body);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lp-green-ink);
}
.lp .crx-node-text {
margin: 0;
max-width: none;
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 500;
line-height: 1.65;
color: var(--lp-ink-2);
}
.lp .crx-exam {
gap: 12px;
margin-top: 18px;
}
.lp .crx-exam li {
gap: 3px;
padding: 14px 16px;
background: var(--lp-glass-strong);
}
.lp .crx-exam li strong {
font-family: var(--lp-font-display);
font-size: calc(20px * var(--lp-scale));
font-weight: 800;
letter-spacing: -0.02em;
color: var(--lp-green-ink);
}
.lp .crx-exam li span {
font-family: var(--lp-font-body);
font-size: calc(14px * var(--lp-scale));
font-weight: 600;
color: var(--lp-ink-2);
}
/* Learning outcomes panel */
.lp .crx-skills {
margin-top: var(--ip-block-gap);
background:
radial-gradient(90% 70% at 100% 0%, rgba(209, 250, 229, 0.7) 0%, rgba(209, 250, 229, 0) 60%),
radial-gradient(70% 60% at 0% 100%, rgba(219, 234, 254, 0.7) 0%, rgba(219, 234, 254, 0) 60%),
var(--lp-glass-strong);
}
.lp .crx-skills-head {
margin-bottom: calc(36px * var(--lp-scale));
}
.lp .crx-skills-title {
margin: 0;
font-family: var(--lp-font-display);
font-size: clamp(26px, 2.6vw, calc(36px * var(--lp-scale)));
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.022em;
color: var(--lp-ink);
text-wrap: balance;
}
.lp .crx-skills-sub {
max-width: calc(680px * var(--lp-scale));
margin: calc(16px * var(--lp-scale)) auto 0;
font-family: var(--lp-font-body);
font-size: calc(17px * var(--lp-scale));
font-weight: 500;
line-height: 1.65;
color: var(--lp-ink-2);
}
.lp .crx-skills-list {
gap: calc(14px * var(--lp-scale));
}
/* The number disc marks the item like a list bullet: centred on the first
line of its text (line box 25.6px * scale), so a wrapped outcome keeps
its number level with the others in the row. */
.lp .crx-skills-list li {
align-items: flex-start;
gap: 16px;
padding: 18px 20px;
}
.lp .crx-skill-num {
width: 40px;
height: 40px;
flex: 0 0 40px;
margin-top: calc((25.6px * var(--lp-scale) - 40px) / 2);
border-radius: 12px;
background: linear-gradient(135deg, #059669 0%, #047857 100%);
border: 0;
color: #ffffff;
font-family: var(--lp-font-display);
font-size: 14px;
font-weight: 800;
letter-spacing: 0;
box-shadow: 0 14px 26px -16px rgba(5, 150, 105, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lp .crx-skill-text {
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 500;
line-height: 1.6;
color: var(--lp-ink);
}
.lp .crx-skills-foot {
align-items: flex-start;
gap: 14px;
margin-top: calc(28px * var(--lp-scale));
padding: calc(22px * var(--lp-scale)) calc(26px * var(--lp-scale));
border-radius: var(--lp-radius-sm);
border: 1px solid rgba(255, 255, 255, 0.12);
background: linear-gradient(135deg, #047857 0%, #059669 60%, #10b981 100%);
box-shadow: 0 18px 34px -20px rgba(5, 150, 105, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.lp .crx-skills-foot-icon {
color: #ffffff;
}
.lp .crx-skills-foot-label {
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
.lp .crx-skills-foot p {
margin: 0;
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 500;
line-height: 1.65;
color: #ffffff;
}
.lp .crx-skills-foot .crx-link {
color: #ffffff;
font-weight: 800;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
/* Start today board: the deep plate with the gold pill */
.lp .crx-cta {
align-items: center;
gap: calc(32px * var(--lp-scale)) calc(40px * var(--lp-scale));
margin-top: calc(28px * var(--lp-scale));
padding: calc(40px * var(--lp-scale)) calc(40px * var(--lp-scale));
background: var(--ip-plate);
border-color: var(--ip-plate-line);
box-shadow: var(--lp-shadow), 0 0 0 1px rgba(11, 31, 58, 0.6);
}
.lp .crx-cta-glow {
display: none;
}
.lp .crx-cta-title {
margin: 0 0 10px;
font-family: var(--lp-font-display);
font-size: clamp(24px, 2.3vw, calc(30px * var(--lp-scale)));
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
color: #ffffff;
}
.lp .crx-cta-sub {
margin: 0 0 18px;
max-width: none;
font-family: var(--lp-font-body);
font-size: calc(16.5px * var(--lp-scale));
font-weight: 400;
line-height: 1.65;
color: rgba(255, 255, 255, 0.8);
}
.lp .crx-cta-sub strong {
color: #ffffff;
}
.lp .crx-cta-points li {
padding: 8px 14px 8px 32px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
font-family: var(--lp-font-body);
font-size: 14.5px;
font-weight: 600;
color: #ffffff;
}
.lp .crx-cta-action {
align-items: center;
gap: 12px;
}
.lp .crx-cta-note {
font-family: var(--lp-font-body);
font-size: calc(14.5px * var(--lp-scale));
font-weight: 600;
line-height: 1.4;
color: rgba(255, 255, 255, 0.66);
text-align: center;
}
/* --------------------------------------------------------------------------
Who should take this course: the industry cards panel
-------------------------------------------------------------------------- */
.lp .target-section {
background:
radial-gradient(55% 60% at 8% 0%, rgba(209, 250, 229, 0.55) 0%, rgba(209, 250, 229, 0) 60%),
radial-gradient(50% 55% at 100% 100%, rgba(219, 234, 254, 0.6) 0%, rgba(219, 234, 254, 0) 60%),
var(--lp-glass-strong);
}
.lp .target-grid {
gap: calc(18px * var(--lp-scale));
margin-bottom: calc(22px * var(--lp-scale));
}
.lp .target-card {
padding: calc(28px * var(--lp-scale)) calc(22px * var(--lp-scale));
text-align: center;
}
.lp .target-card .target-card-icon {
width: 60px;
height: 60px;
margin: 0 auto 16px;
border-radius: 18px;
}
.lp .target-card-title {
margin: 0 0 6px;
font-family: var(--lp-font-display);
font-size: calc(18.5px * var(--lp-scale));
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--lp-ink);
}
.lp .target-card-desc {
margin: 0;
font-family: var(--lp-font-body);
font-size: calc(15.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.55;
color: var(--lp-ink-2);
}
.lp .target-stats {
gap: 12px;
padding: 12px;
border-radius: var(--lp-radius);
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--lp-line);
}
.lp .target-stat {
align-items: flex-start;
gap: 14px;
padding: 14px 18px;
background: var(--lp-glass-strong);
}
.lp .target-stat .target-stat-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 12px;
}
.lp .target-stat-title {
margin: 0 0 2px;
font-family: var(--lp-font-body);
font-size: calc(16.5px * var(--lp-scale));
font-weight: 700;
line-height: 1.3;
color: var(--lp-ink);
}
.lp .target-stat-desc {
font-family: var(--lp-font-body);
font-size: calc(15px * var(--lp-scale));
font-weight: 500;
line-height: 1.45;
color: var(--lp-ink-2);
}
/* --------------------------------------------------------------------------
The exam: mint panel, the two big numbers, the three benefits, the pass
rate banner
-------------------------------------------------------------------------- */
.lp .cert-exam {
background:
radial-gradient(60% 50% at 100% 0%, rgba(209, 250, 229, 0.75) 0%, rgba(209, 250, 229, 0) 60%),
linear-gradient(160deg, #ffffff 0%, #f0fdf4 50%, #ecfdf5 100%);
}
.lp .cert-exam-header {
flex-direction: column;
align-items: center;
gap: calc(20px * var(--lp-scale));
margin-bottom: calc(40px * var(--lp-scale));
text-align: center;
}
.lp .cert-exam-icon-wrap {
display: none;
}
.lp .cert-exam-header-text {
display: flex;
flex-direction: column;
align-items: center;
}
.lp .cert-exam-stats {
gap: calc(18px * var(--lp-scale));
margin-bottom: calc(18px * var(--lp-scale));
}
.lp .cert-exam-stat {
align-items: center;
gap: calc(20px * var(--lp-scale));
padding: calc(26px * var(--lp-scale)) calc(28px * var(--lp-scale));
}
.lp .cert-exam-stat-primary {
background:
radial-gradient(70% 70% at 0% 0%, rgba(219, 234, 254, 0.7) 0%, rgba(219, 234, 254, 0) 65%),
var(--lp-glass);
}
.lp .cert-exam-stat-success {
background:
radial-gradient(70% 70% at 0% 0%, rgba(209, 250, 229, 0.7) 0%, rgba(209, 250, 229, 0) 65%),
var(--lp-glass);
}
.lp .cert-exam-stat-big {
font-family: var(--lp-font-display);
font-size: clamp(40px, 4vw, calc(52px * var(--lp-scale)));
font-weight: 800;
line-height: 1;
letter-spacing: -0.035em;
}
.lp .cert-exam-stat-unit {
margin-top: 6px;
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lp .cert-exam-stat-info strong {
margin-bottom: 4px;
font-family: var(--lp-font-display);
font-size: calc(18px * var(--lp-scale));
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--lp-ink);
}
.lp .cert-exam-stat-info p {
margin: 0;
font-family: var(--lp-font-body);
font-size: calc(15.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.55;
color: var(--lp-ink-2);
}
.lp .cert-exam-benefits {
gap: calc(14px * var(--lp-scale));
margin-bottom: calc(18px * var(--lp-scale));
}
.lp .cert-exam-benefit {
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
}
.lp .cert-exam-benefit .cert-exam-benefit-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 12px;
}
.lp .cert-exam-benefit-text strong {
display: block;
margin: 0 0 2px;
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 700;
line-height: 1.3;
color: var(--lp-ink);
}
.lp .cert-exam-benefit-text span {
font-family: var(--lp-font-body);
font-size: calc(14.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.45;
color: var(--lp-ink-2);
}
.lp .cert-exam-success {
padding: calc(22px * var(--lp-scale)) calc(26px * var(--lp-scale));
border-radius: var(--lp-radius-sm);
background: linear-gradient(135deg, #047857 0%, #059669 60%, #10b981 100%);
box-shadow: 0 18px 34px -20px rgba(5, 150, 105, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.lp .cert-exam-success-glow {
display: none;
}
.lp .cert-exam-success-content {
align-items: center;
gap: 16px;
}
.lp .cert-exam-success-text strong {
margin-bottom: 3px;
font-family: var(--lp-font-display);
font-size: calc(18px * var(--lp-scale));
font-weight: 800;
letter-spacing: -0.01em;
color: #ffffff;
}
.lp .cert-exam-success-text span {
font-family: var(--lp-font-body);
font-size: calc(15.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.5;
color: rgba(255, 255, 255, 0.92);
}
/* --------------------------------------------------------------------------
Practical assessment: amber panel, the three steps as glass cards
-------------------------------------------------------------------------- */
.lp .video-section {
background:
radial-gradient(60% 50% at 0% 0%, rgba(254, 243, 199, 0.8) 0%, rgba(254, 243, 199, 0) 60%),
linear-gradient(160deg, #ffffff 0%, #fffbeb 50%, #fef9c3 100%);
}
.lp .video-top {
margin-bottom: calc(40px * var(--lp-scale));
}
.lp .video-note {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: calc(18px * var(--lp-scale));
padding: 10px 16px;
border-radius: 999px;
background: var(--lp-glass-strong);
border: 1px solid var(--lp-line-strong);
box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
font-family: var(--lp-font-body);
font-size: 14.5px;
font-weight: 600;
line-height: 1.4;
color: var(--lp-blue-deep);
text-align: left;
}
.lp .video-timeline {
max-width: calc(760px * var(--lp-scale));
margin: 0 auto calc(28px * var(--lp-scale));
}
/* The timeline: each disc is centred on its own card (the card centre sits
half the card's bottom margin above the row centre), and the thread runs
from disc centre to disc centre behind them. The base sheet stacked the
disc at the top of the row and hung a flex line under it, so the discs
floated 21px above the middle of their cards. */
.lp .video-timeline {
display: flex;
flex-direction: column;
gap: 0;
}
.lp .video-step {
--vs-mb: calc(14px * var(--lp-scale));
gap: calc(18px * var(--lp-scale));
align-items: stretch;
}
.lp .video-step-last {
--vs-mb: 0px;
}
.lp .video-step-marker {
position: relative;
display: block;
width: 40px;
flex: 0 0 40px;
}
.lp .video-step-marker span {
position: absolute;
left: 0;
top: calc(50% - var(--vs-mb) / 2 - 20px);
width: 40px;
height: 40px;
margin: 0;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: #ffffff;
font-family: var(--lp-font-display);
font-size: 15px;
font-weight: 800;
box-shadow: 0 14px 26px -16px rgba(217, 119, 6, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lp .video-step-marker::before,
.lp .video-step-line {
content: "";
position: absolute;
left: 19px;
width: 2px;
min-height: 0;
margin: 0;
border-radius: 0;
background: rgba(217, 119, 6, 0.25);
}
/* thread above the disc (down to its centre) */
.lp .video-step-marker::before {
top: 0;
height: calc(50% - var(--vs-mb) / 2);
}
/* thread below the disc, to the next row */
.lp .video-step-line {
top: calc(50% - var(--vs-mb) / 2);
bottom: 0;
flex: none;
}
.lp .video-step:first-child .video-step-marker::before,
.lp .video-step-last .video-step-line,
.lp .video-step:last-child .video-step-line {
display: none;
}
.lp .video-step-content {
align-items: center;
gap: 16px;
margin-bottom: var(--vs-mb);
padding: 18px 20px;
}
.lp .video-step-last .video-step-content {
margin-bottom: 0;
padding-bottom: 18px;
}
.lp .video-step-content .video-step-icon {
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 14px;
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.18);
box-shadow: none;
color: #b45309;
}
.lp .video-step-content .video-step-icon-success {
background: rgba(5, 150, 105, 0.1);
border-color: rgba(5, 150, 105, 0.18);
color: var(--lp-green-ink);
}
.lp .video-step-text strong {
margin-bottom: 4px;
font-family: var(--lp-font-display);
font-size: calc(18px * var(--lp-scale));
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--lp-ink);
}
.lp .video-step-text p {
margin: 0;
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 500;
line-height: 1.6;
color: var(--lp-ink-2);
}
.lp .video-info-row {
justify-content: center;
gap: 10px;
}
.lp .video-info-card {
gap: 9px;
padding: 10px 16px 10px 12px;
border-radius: 999px;
background: var(--lp-glass-strong);
border: 1px solid var(--lp-line);
box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
font-family: var(--lp-font-body);
font-size: 14px;
font-weight: 700;
color: var(--lp-ink-2);
}
.lp .video-info-card svg {
width: 16px;
height: 16px;
color: #b45309;
}
/* --------------------------------------------------------------------------
Certificate: cream panel, the framed certificate, the four features
-------------------------------------------------------------------------- */
.lp .certv2 {
background:
radial-gradient(60% 50% at 100% 0%, rgba(254, 243, 199, 0.55) 0%, rgba(254, 243, 199, 0) 60%),
linear-gradient(168deg, #ffffff 0%, #fffcf5 45%, #fdf8eb 100%);
}
.lp .certv2-top {
margin-bottom: calc(40px * var(--lp-scale));
}
.lp .certv2-showcase {
max-width: calc(860px * var(--lp-scale));
}
.lp .certv2-frame {
padding: calc(14px * var(--lp-scale));
background: var(--lp-glass-strong);
}
.lp .certv2-frame img {
border-radius: calc(var(--lp-radius) - 10px);
}
/* The certificate opens full size, as on the landing: zoom cursor, a
magnifier disc in the free corner (the RoSPA pill holds the bottom left,
the QQI pill the top right), the viewer itself comes from landing-page.js
and its .lp-lightbox styles in landing-page.css. */
.lp .certv2-frame.is-zoomable {
cursor: zoom-in;
outline: 0;
}
.lp .certv2-frame.is-zoomable::after {
content: '';
position: absolute;
right: calc(14px * var(--lp-scale) + 14px);
bottom: calc(14px * var(--lp-scale) + 14px);
z-index: 3;
width: 44px;
height: 44px;
border-radius: 50%;
background:
url("data:image/svg+xml;utf8,") center / 20px no-repeat,
rgba(255, 255, 255, 0.94);
box-shadow: 0 10px 24px -12px rgba(2, 44, 34, 0.6), 0 0 0 1px rgba(5, 150, 105, 0.16);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s var(--lp-ease), transform 0.25s var(--lp-ease);
pointer-events: none;
}
.lp .certv2-frame.is-zoomable:hover::after,
.lp .certv2-frame.is-zoomable:focus-visible::after {
opacity: 1;
transform: translateY(0);
}
.lp .certv2-frame.is-zoomable:focus-visible img {
box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.35);
}
@media (hover: none) {
.lp .certv2-frame.is-zoomable::after {
opacity: 1;
transform: none;
}
}
.lp .certv2-pill {
gap: 9px;
padding: 10px 16px 10px 12px;
border-radius: 999px;
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
.lp .certv2-pill svg {
width: 14px;
height: 14px;
}
.lp .certv2-features {
gap: calc(14px * var(--lp-scale));
margin-top: calc(36px * var(--lp-scale));
}
.lp .certv2-feat {
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
}
.lp .certv2-feat .certv2-feat-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 12px;
}
.lp .certv2-feat-text strong {
display: block;
margin: 0 0 2px;
font-family: var(--lp-font-body);
font-size: calc(16px * var(--lp-scale));
font-weight: 700;
line-height: 1.3;
color: var(--lp-ink);
}
.lp .certv2-feat-text span {
font-family: var(--lp-font-body);
font-size: calc(14.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.45;
color: var(--lp-ink-2);
}
/* --------------------------------------------------------------------------
Invest call to action: the dark plate under the content
-------------------------------------------------------------------------- */
.lp .cta-invest {
background: linear-gradient(180deg, #061220 0%, #0b1f3a 50%, #0c2447 100%);
}
.lp .cta-invest-orb {
display: none;
}
.lp .cta-invest-inner {
max-width: calc(900px * var(--lp-scale));
}
.lp .cta-invest-content {
flex-direction: column;
align-items: center;
text-align: center;
}
.lp .cta-invest-quote-wrapper {
margin-bottom: calc(24px * var(--lp-scale));
}
.lp .cta-invest-quote-mark {
width: 32px;
height: 32px;
color: rgba(147, 197, 253, 0.35);
}
.lp .cta-invest-quote {
margin: 0;
font-family: var(--lp-font-body);
font-size: clamp(17px, 1.6vw, calc(22px * var(--lp-scale)));
font-weight: 500;
font-style: italic;
line-height: 1.5;
letter-spacing: 0;
color: #ffffff;
text-wrap: balance;
}
.lp .cta-invest-title {
margin: 0 0 calc(24px * var(--lp-scale));
font-family: var(--lp-font-display);
font-size: clamp(28px, 3.1vw, calc(40px * var(--lp-scale)));
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.025em;
color: #ffffff;
background: none;
-webkit-text-fill-color: #ffffff;
text-wrap: balance;
}
.lp .cta-invest-perks {
justify-content: center;
gap: 10px;
margin-bottom: calc(30px * var(--lp-scale));
}
.lp .cta-invest-perk {
gap: 8px;
padding: 9px 14px 9px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.lp .cta-invest-perk svg {
width: 15px;
height: 15px;
color: #67e8f9;
}
.lp .cta-invest-perk span {
font-family: var(--lp-font-body);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #ffffff;
}
.lp .cta-invest-btn {
margin-bottom: calc(18px * var(--lp-scale));
}
.lp .cta-invest-sub {
max-width: calc(680px * var(--lp-scale));
margin: 0;
font-family: var(--lp-font-body);
font-size: calc(15.5px * var(--lp-scale));
font-weight: 500;
line-height: 1.55;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.7);
}
/* the link to the course page inside the closing line: a quiet gold underline */
.lp .cta-invest-sub a {
color: #fcd34d;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(252, 211, 77, 0.45);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.2s var(--lp-ease), text-decoration-color 0.2s var(--lp-ease);
}
.lp .cta-invest-sub a:hover {
color: #ffffff;
text-decoration-color: #fcd34d;
}
/* --------------------------------------------------------------------------
Reviews: the gold tint of the landing reviews section
-------------------------------------------------------------------------- */
.lp .ph-reviews {
padding: var(--lp-sec-pad) 0;
background:
radial-gradient(60% 40% at 50% 0%, rgba(254, 243, 199, 0.8) 0%, rgba(254, 243, 199, 0) 70%),
linear-gradient(180deg, #fffbeb 0%, #fef3c7 55%, #fff7ed 100%);
}
.lp .ph-reviews-header {
margin-bottom: calc(40px * var(--lp-scale));
}
/* The letter opens up towards the width of the reviews widget under it (the
owner found the 860px column too narrow next to the 1180px widget, and
asked for "a bit" more on each side); the words are the ranking asset,
only the measure changed. */
.lp .ph-reviews-subtitle {
max-width: calc(1000px * var(--lp-scale));
margin: calc(20px * var(--lp-scale)) auto 0;
font-family: var(--lp-font-body);
font-size: calc(17px * var(--lp-scale));
font-weight: 500;
line-height: 1.7;
letter-spacing: 0;
color: var(--lp-ink-2);
text-wrap: pretty;
}
.lp .ph-reviews-subtitle strong {
color: var(--lp-ink);
}
.lp .ph-reviews-subtitle a {
color: var(--lp-blue-deep);
}
.lp .ph-reviews-widget {
margin-bottom: calc(34px * var(--lp-scale));
}
.lp .ph-trust-row {
justify-content: center;
gap: 10px;
}
.lp .ph-trust-item {
gap: 9px;
padding: 10px 16px 10px 12px;
border-radius: 999px;
background: var(--lp-glass-strong);
border: 1px solid var(--lp-line);
box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
font-family: var(--lp-font-body);
font-size: 14px;
font-weight: 700;
color: var(--lp-ink-2);
}
.lp .ph-trust-item svg {
width: 16px;
height: 16px;
color: #b45309;
}
/* --------------------------------------------------------------------------
Questions: the accordion deck of the landing FAQ
-------------------------------------------------------------------------- */
.lp .qna {
background:
radial-gradient(60% 40% at 50% 0%, rgba(219, 234, 254, 0.55) 0%, rgba(219, 234, 254, 0) 70%),
linear-gradient(180deg, #f6fafe 0%, #ffffff 52%, #f4fbf8 100%);
}
.lp .qna-glow {
display: none;
}
.lp .qna-deck {
gap: calc(12px * var(--lp-scale));
margin-top: 0;
}
.lp .qna-card {
overflow: hidden;
transition: box-shadow 0.28s var(--lp-ease), border-color 0.28s var(--lp-ease);
}
.lp .qna-card[open] {
background: var(--lp-glass-strong);
border-color: rgba(255, 255, 255, 0.95);
box-shadow: var(--lp-shadow-hover), 0 0 0 1px rgba(37, 99, 235, 0.22);
}
.lp .qna-sum {
grid-template-columns: 44px minmax(0, 1fr) 36px;
gap: calc(16px * var(--lp-scale));
padding: calc(20px * var(--lp-scale)) calc(24px * var(--lp-scale));
}
.lp .qna-num {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
border: 0;
color: #ffffff;
font-family: var(--lp-font-display);
font-size: 15px;
font-weight: 800;
letter-spacing: 0;
box-shadow: 0 14px 26px -16px rgba(37, 99, 235, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lp .qna-q {
margin: 0;
font-family: var(--lp-font-display);
font-size: clamp(17px, 1.4vw, calc(19.5px * var(--lp-scale)));
font-weight: 800;
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--lp-ink);
}
.lp .qna-chev {
width: 36px;
height: 36px;
background: var(--lp-glass-strong);
border: 1px solid var(--lp-line);
color: var(--lp-blue-deep);
}
.lp .qna-ans {
padding: 0 calc(24px * var(--lp-scale)) calc(24px * var(--lp-scale)) calc(44px + calc(16px * var(--lp-scale)) + calc(24px * var(--lp-scale)));
font-family: var(--lp-font-body);
font-size: calc(16.5px * var(--lp-scale));
font-weight: 400;
line-height: 1.75;
color: var(--lp-ink-2);
}
.lp .qna-ans strong {
color: var(--lp-ink);
}
.lp .qna-cta {
align-items: center;
gap: 18px calc(28px * var(--lp-scale));
margin-top: calc(28px * var(--lp-scale));
padding: calc(28px * var(--lp-scale)) calc(32px * var(--lp-scale));
}
.lp .qna-cta-tag {
margin: 0 0 12px;
}
.lp .qna-cta-line {
margin: 0;
font-family: var(--lp-font-body);
font-size: calc(17px * var(--lp-scale));
font-weight: 600;
line-height: 1.5;
color: var(--lp-ink);
}
/* --------------------------------------------------------------------------
Icon contract: the outline set stays (Feather-style, one idea per row),
its geometry is made uniform. The glyph is half the tile (22px in a 44px
tile, 24px in 46 to 48px, 30px in 56 to 60px) and every glyph carries the
same 2px stroke; the page mixed 1.8, 2 and 2.5 next to each other. CSS
wins over the stroke-width attribute on the svg, the paths inherit it.
-------------------------------------------------------------------------- */
.lp .pf-trust-icon svg,
.lp .target-stat-icon svg,
.lp .ed-feature-icon svg,
.lp .certv2-feat-icon svg,
.lp .cert-exam-benefit-icon svg {
width: 22px;
height: 22px;
stroke-width: 2;
}
.lp .pf-item-icon svg,
.lp .video-step-content .video-step-icon svg {
width: 24px;
height: 24px;
stroke-width: 2;
}
.lp .pf-card-icon svg,
.lp .target-card-icon svg {
width: 30px;
height: 30px;
stroke-width: 2;
}
.lp .cert-exam-success-icon svg {
width: 26px;
height: 26px;
stroke-width: 2.2;
}
.lp .video-step-content .video-step-icon,
.lp .pf-item .pf-item-icon,
.lp .pf-trust-item .pf-trust-icon,
.lp .target-stat .target-stat-icon,
.lp .ed-feature .ed-feature-icon,
.lp .certv2-feat .certv2-feat-icon,
.lp .cert-exam-benefit .cert-exam-benefit-icon {
box-sizing: border-box;
}
/* --------------------------------------------------------------------------
The Irish signature: the shamrock the owner approved on the proof board
(course-modules.css .ovw-proof::after), and only that one. Gold leaf at
six percent, turned fourteen degrees, sitting in the bottom right corner
of a DEEP plate with a quarter of it clipped by the corner, never in the
open page. Tall plates take the 300px leaf, bands the 190px one. On a
full-bleed band the leaf is anchored to the content measure, not to the
viewport edge, so on a wide monitor it stays with the content.
The UK platforms print no shamrock anywhere (the course-roadmap sheet
they share still draws one on the curriculum boards: hidden here).
-------------------------------------------------------------------------- */
.lp--ie .ed-panel-left,
.lp--ie .cta-invest {
position: relative;
overflow: hidden;
}
.lp--ie .ed-panel-left::after,
.lp--ie .cta-invest::after {
content: "";
position: absolute;
right: -52px;
bottom: -64px;
width: 300px;
height: 300px;
background: url("data:image/svg+xml,") no-repeat center / contain;
opacity: 0.06;
transform: rotate(-14deg);
pointer-events: none;
z-index: 0;
}
/* the dashboard plate is a band: the smaller leaf */
.lp--ie .ed-panel-left::after {
right: -34px;
bottom: -46px;
width: 190px;
height: 190px;
opacity: 0.07;
}
/* the invest plate is full-bleed: anchor the leaf to the content measure */
.lp--ie .cta-invest::after {
right: max(-52px, calc((100% - var(--lp-measure)) / 2 - 52px));
}
.lp--ie .ed-panel-left > *,
.lp--ie .cta-invest > * {
position: relative;
z-index: 1;
}
.lp--uk .crx-cta::after,
.lp--uk .crx-skills-foot::after {
display: none;
}
/* --------------------------------------------------------------------------
Responsive: the panels tighten, the chips may wrap, the heads stay centred
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.lp {
--ip-panel-pad: calc(40px * var(--lp-scale)) calc(28px * var(--lp-scale));
--ip-block-gap: 52px;
}
.lp .ovw-intro-grid {
grid-template-columns: minmax(0, 1fr);
}
.lp .ovw-title {
text-align: center;
}
.lp .ovw-intro-main {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.lp .ovw-intro-side {
max-width: 760px;
margin: 0 auto;
padding-left: 0;
text-align: center;
}
.lp .ovw-intro-side::before {
display: none;
}
.lp .ovw-intro-rail {
justify-content: center;
}
.lp .ovw-chips {
justify-content: center;
}
.lp .crx-cta {
grid-template-columns: minmax(0, 1fr);
text-align: center;
}
.lp .crx-cta-points {
justify-content: center;
}
.lp .crx-cta-action {
align-items: center;
}
}
@media (max-width: 768px) {
.lp {
--ip-panel-pad: 30px 20px;
--ip-block-gap: 44px;
}
.lp .hero-ultra {
padding: 64px 0 120px;
}
.lp .hero-ultra-includes-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.lp .hero-ultra-include {
justify-content: flex-start;
padding: 8px 12px 8px 8px;
border-radius: var(--lp-radius-sm);
}
.lp .hero-ultra-include span {
font-size: 13.5px;
}
.lp .hero-ultra-btn,
.lp .cta-invest-btn {
min-height: 56px;
padding: 0 24px;
font-size: 14px;
letter-spacing: 0.05em;
}
.lp .pf-header,
.lp .crx-head,
.lp .crx-skills-head,
.lp .target-header,
.lp .video-top,
.lp .certv2-top,
.lp .ph-reviews-header,
.lp .qna-head {
margin-bottom: 30px;
}
.lp .pf-trust-banner {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.lp .pf-trust-divider {
display: none;
}
.lp .ed-panel-left,
.lp .ed-panel-right {
padding: 28px 22px;
}
.lp .ed-panel-left {
align-items: center;
text-align: center;
}
.lp .ovw-proof-list,
.lp .crx-skills-list,
.lp .cert-exam-stats,
.lp .certv2-features {
grid-template-columns: minmax(0, 1fr);
}
.lp .ovw-proof,
.lp .crx-cta {
padding: 30px 20px;
}
.lp .crx-node {
grid-template-columns: 44px minmax(0, 1fr);
gap: 14px;
}
.lp .crx-node-num {
width: 44px;
height: 44px;
font-size: 14px;
}
.lp .crx-exam {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp .video-step-content {
align-items: flex-start;
}
.lp .video-info-row,
.lp .ph-trust-row,
.lp .cta-invest-perks {
flex-wrap: wrap;
}
.lp .qna-sum {
grid-template-columns: 40px minmax(0, 1fr) 34px;
gap: 12px;
padding: 16px 16px;
}
.lp .qna-num {
width: 40px;
height: 40px;
font-size: 14px;
}
.lp .qna-chev {
width: 34px;
height: 34px;
}
.lp .qna-ans {
padding: 0 16px 20px 16px;
}
.lp .qna-cta {
flex-direction: column;
align-items: stretch;
text-align: center;
padding: 24px 18px;
}
.lp .qna-cta-btn {
justify-content: center;
}
}
@media (max-width: 640px) {
.lp .pf-label,
.lp .ovw-eyebrow,
.lp .crx-eyebrow,
.lp .target-badge,
.lp .cert-exam-label,
.lp .video-badge,
.lp .certv2-label,
.lp .ph-reviews-badge,
.lp .qna-eyebrow,
.lp .qna-cta-tag,
.lp .hero-ultra-badge {
max-width: 100%;
white-space: normal;
text-align: center;
line-height: 1.35;
}
.lp .hero-ultra-includes-list {
grid-template-columns: minmax(0, 1fr);
}
.lp .crx-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp .crx-stat {
border-left: 0;
border-top: 1px solid var(--lp-line);
}
.lp .crx-stat:nth-child(-n + 2) {
border-top: 0;
}
.lp .crx-stat:nth-child(2n) {
border-left: 1px solid var(--lp-line);
}
.lp .cert-exam-stat {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.lp .video-note {
white-space: normal;
}
}
@media (max-width: 480px) {
.lp {
--ip-panel-pad: 26px 16px;
--ip-block-gap: 36px;
}
.lp .hero-ultra {
padding: 56px 0 110px;
}
.lp .hero-ultra-btn,
.lp .cta-invest-btn {
width: 100%;
max-width: 360px;
}
.lp .pf-card {
padding: 24px 20px;
}
.lp .ovw-law {
padding: 24px 20px;
}
.lp .ovw-path {
padding: 26px 20px;
}
.lp .crx-node-card {
padding: 20px 18px;
}
.lp .crx-exam {
grid-template-columns: minmax(0, 1fr);
}
.lp .target-stats {
flex-direction: column;
}
.lp .ed-btn,
.lp .ovw-path-btn,
.lp .ovw-path-btn-solid,
.lp .crx-cta-btn,
.lp .qna-cta-btn {
width: 100%;
white-space: normal;
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
.lp .pf-card,
.lp .pf-item,
.lp .ovw-law,
.lp .ovw-path,
.lp .crx-node-card,
.lp .crx-skills-list li,
.lp .target-card,
.lp .cert-exam-stat,
.lp .cert-exam-benefit,
.lp .certv2-feat,
.lp .hero-ultra-include,
.lp .hero-ultra-btn,
.lp .cta-invest-btn,
.lp .ed-btn,
.lp .ovw-path-btn,
.lp .crx-cta-btn,
.lp .qna-cta-btn {
transition: none;
}
.lp .pf-card:hover,
.lp .pf-item:hover,
.lp .ovw-law:hover,
.lp .ovw-path:hover,
.lp .crx-node-card:hover,
.lp .crx-skills-list li:hover,
.lp .target-card:hover,
.lp .cert-exam-stat:hover,
.lp .cert-exam-benefit:hover,
.lp .certv2-feat:hover,
.lp .hero-ultra-include:hover,
.lp .hero-ultra-btn:hover,
.lp .cta-invest-btn:hover,
.lp .ed-btn:hover,
.lp .ovw-path-btn:hover,
.lp .crx-cta-btn:hover,
.lp .qna-cta-btn:hover {
transform: none;
}
}