/* ==========================================================================
   Ikrar Santri Ecosocpreneur — site.css
   Follows the section pattern of belajardiluarkelas.org (bold uppercase nav,
   big counters in a coloured hero, numbered steps, registration block, map).
   Own palette, own copy, own assets. No external requests (font is bundled).

   Contents
     1. Tokens + font
     2. Base
     3. Buttons
     4. Header + nav
     5. Hero
     6. Sections, split, cards, steps
     7. Register / CTA  (.ikrar-cta from [ikrar_daftar])
     8. Partners, FAQ, share band, footer
     9. Page templates + 404
    10. Materi  ([ikrar_materi])
    11. Accessibility + motion
   ========================================================================== */

/* 1. TOKENS + FONT ------------------------------------------------------- */
@font-face {
	font-family: "Nunito";
	src: url("../fonts/nunito-var-latin.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}

:root {
	--g950: #052a1c;
	--g900: #073b27;
	--g700: #0b5d3b;
	--g100: #e6f2ea;
	--g50: #effaf1;
	--lime: #b9e24b;
	--lime-d: #a6d033;
	--teal: #10a58f;
	--teal-d: #0b7f6e;      /* teal that passes 4.5:1 for text/focus on light */
	--sand: #faf6ea;
	--sand2: #f2ecd9;
	--line: #d9d2bc;
	--ink: #17251d;
	--muted: #4b5d53;
	--white: #fff;

	--radius: 16px;
	--radius-sm: 10px;
	--shadow: 0 6px 24px rgba(7, 59, 39, .12);

	--font-head: "Nunito", "Arial Rounded MT Bold", "Avenir Next", "Segoe UI", system-ui, sans-serif;
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--wrap: 1120px;
	--gutter: 20px;
	--header-h: 64px;
	--focus: var(--teal-d);
}

/* 2. BASE ---------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
body img { max-width: 100%; height: auto; }
body a { color: var(--g700); text-decoration-thickness: .08em; text-underline-offset: .18em; }
body a:hover { color: var(--g900); }
body p { margin: 0 0 1em; }

body h1, body h2, body h3, body h4 {
	font-family: var(--font-head);
	font-weight: 800;
	line-height: 1.12;
	color: var(--g900);
	margin: 0 0 .5em;
	letter-spacing: -.01em;
}
body h1 { font-size: clamp(2.1rem, 6.4vw, 3.6rem); }
body h2 { font-size: clamp(1.7rem, 4.6vw, 2.5rem); }
body h3 { font-size: 1.2rem; }
body h4 { font-size: 1.05rem; }
.h-small { font-size: clamp(1.1rem, 2.4vw, 1.3rem) !important; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) !important; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 760px; }
.wrap-wide { max-width: 1120px; }
.center { text-align: center; }
.center .btn-row { justify-content: center; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: 12px; top: -80px; z-index: 1000;
	background: var(--lime); color: var(--g900); font-weight: 800;
	padding: .7em 1.1em; border-radius: 999px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.eyebrow {
	font: 800 .78rem/1 var(--font-head);
	text-transform: uppercase; letter-spacing: .14em;
	color: var(--teal-d); margin: 0 0 .9rem;
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.on-dark .eyebrow { color: var(--lime); }
.section-lead { font-size: 1.1rem; color: var(--muted); max-width: 62ch; }

/* 3. BUTTONS ------------------------------------------------------------- */
.btn,
body a.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 44px; padding: .7em 1.5em;
	font: 800 .9rem/1.1 var(--font-head);
	text-transform: uppercase; letter-spacing: .05em; text-decoration: none; text-align: center;
	color: #fff; background: var(--g700);
	border: 2px solid var(--g700); border-radius: 999px;
	cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover, body a.btn:hover { background: var(--g900); border-color: var(--g900); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-lime, body a.btn-lime { background: var(--lime); border-color: var(--lime); color: var(--g900); }
.btn-lime:hover, body a.btn-lime:hover { background: var(--lime-d); border-color: var(--lime-d); color: var(--g950); }
.btn-ghost, body a.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn-ghost:hover, body a.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--g900); }
.btn-lg, body a.btn-lg { min-height: 52px; padding: .85em 1.9em; font-size: 1rem; }
.btn-sm, body a.btn-sm { min-height: 40px; padding: .5em 1.1em; font-size: .8rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.5rem 0 0; }

/* 4. HEADER + NAV -------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--line);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 12px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--g900); min-height: 44px; }
.brand .leaf { color: var(--g700); --leaf-vein: #fff; flex: none; }
.brand .custom-logo { max-height: 44px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font: 900 1.15rem/1.05 var(--font-head); color: var(--g900); letter-spacing: -.01em; }
.brand-sub { font: 800 .62rem/1.3 var(--font-head); text-transform: uppercase; letter-spacing: .2em; color: var(--teal-d); }

.nav-toggle {
	display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
	background: transparent; color: var(--g900);
	border: 2px solid var(--g700); border-radius: 999px;
	font: 800 .8rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .08em; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
	display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

.site-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-nav .menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav .menu a {
	display: block; padding: .65em .85em; border-radius: 999px;
	font: 800 .8rem/1.1 var(--font-head); text-transform: uppercase; letter-spacing: .08em;
	text-decoration: none; color: var(--g900);
}
.site-nav .menu a:hover { background: var(--g100); color: var(--g900); }
.site-nav .menu .nav-action a { border: 2px solid var(--g700); }
.site-nav .menu .current-menu-item > a { background: var(--g100); }

/* Mobile: collapsible panel (only when JS is available; otherwise stays visible) */
@media (max-width: 899px) {
	.js .nav-toggle { display: inline-flex; }
	.js .site-nav {
		display: none; width: 100%; flex-direction: column; align-items: stretch;
		padding: 8px 0 18px; border-top: 1px solid var(--line);
	}
	.js .nav-open .site-nav { display: flex; }
	.site-nav .menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.site-nav .menu a { padding: .9em 1em; font-size: .9rem; }
	.site-nav .header-cta { margin-top: 10px; }
}

/* 5. HERO ---------------------------------------------------------------- */
.hero {
	position: relative; overflow: hidden; color: #fff;
	background:
		radial-gradient(circle at 88% 12%, rgba(185, 226, 75, .28) 0, rgba(185, 226, 75, 0) 38%),
		radial-gradient(circle at 6% 96%, rgba(16, 165, 143, .35) 0, rgba(16, 165, 143, 0) 42%),
		linear-gradient(160deg, var(--g950) 0%, var(--g900) 45%, var(--g700) 100%);
	padding: clamp(40px, 8vw, 96px) 0 clamp(48px, 8vw, 104px);
}
.hero::after { /* soft curve into the next section */
	content: ""; position: absolute; left: -5%; right: -5%; bottom: -1px; height: 28px;
	background: var(--white); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hero-inner { position: relative; z-index: 1; display: grid; gap: 32px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: .4em; }
.hero h1 .hl { color: var(--lime); }
.hero-date {
	display: inline-flex; align-items: center; gap: 10px; margin: 0 0 1.1rem;
	font: 800 .82rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .14em; color: var(--lime);
}
.hero-date-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(185, 226, 75, .25); }
.hero-lead { font-size: clamp(1.02rem, 2.4vw, 1.2rem); color: #e6f2ea; max-width: 52ch; }
.hero a:not(.btn) { color: var(--lime); }
.hero .ikrar-counters { margin: 0; }
@media (min-width: 900px) {
	.hero-inner { grid-template-columns: 1.15fr .85fr; gap: 56px; }
}

/* 6. SECTIONS, SPLIT, CARDS, STEPS -------------------------------------- */
.section { padding: clamp(48px, 8vw, 88px) 0; }
.section-alt { background: var(--sand); }
.split { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; gap: 56px; } }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.card {
	display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
	box-shadow: 0 2px 10px rgba(7, 59, 39, .06);
}
.card-icon {
	grid-row: 1 / span 2; display: grid; place-items: center; width: 52px; height: 52px;
	border-radius: 14px; background: var(--g100); color: var(--g700);
}
.card h3 { margin: 0 0 .15em; font-size: 1.08rem; }
.card p { margin: 0; color: var(--muted); font-size: .96rem; }

.steps { list-style: none; counter-reset: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.step {
	position: relative; background: var(--white); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 28px 24px 24px; box-shadow: var(--shadow);
}
.step-num {
	display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px;
	border-radius: 50%; background: var(--g700); color: var(--lime); font: 900 1.4rem/1 var(--font-head);
}
.step h3 { font-size: 1.25rem; }
.step p { color: var(--muted); }
.step-link { font: 800 .85rem/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.step-link:hover { text-decoration: underline; }

/* 7. REGISTER / CTA  — .ikrar-cta is printed by [ikrar_daftar] ----------- */
.section-register { background: var(--white); padding-block: clamp(24px, 5vw, 56px); }
.ikrar-cta {
	position: relative; overflow: hidden; color: #fff;
	background: linear-gradient(150deg, var(--g900), var(--g700));
	border-radius: 24px; padding: clamp(28px, 6vw, 56px);
	display: grid; gap: 14px 40px; justify-items: start; align-content: center;
	box-shadow: var(--shadow);
}
.ikrar-cta::before {
	content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px;
	border-radius: 50%; background: rgba(185, 226, 75, .18); pointer-events: none;
}
.ikrar-cta > * { position: relative; }
.ikrar-cta h2 { color: #fff; margin: 0; }
.ikrar-cta p { margin: 0; color: #e6f2ea; max-width: 46ch; }
.ikrar-cta .btn { margin-top: 6px; }
.ikrar-cta .or { font: 800 .8rem/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .12em; color: var(--lime); }
.ikrar-cta img {
	display: block; width: 180px; height: 180px; padding: 10px;
	background: #fff; border-radius: 18px; border: 0;
}
/* Shown to visitors when the form URL is not set (decision D1 pending). */
.ikrar-warning {
	padding: .8em 1em; border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, .12); border: 1px dashed rgba(255, 255, 255, .55); color: #fff !important;
}
@media (min-width: 760px) {
	.ikrar-cta { grid-template-columns: 1fr auto; grid-auto-flow: row; justify-items: start; }
	.ikrar-cta > h2, .ikrar-cta > p:not(.or), .ikrar-cta > .btn, .ikrar-cta > .ikrar-warning { grid-column: 1; }
	.ikrar-cta > .or { grid-column: 2; grid-row: 1; justify-self: center; align-self: end; }
	.ikrar-cta > img { grid-column: 2; grid-row: 2 / span 3; justify-self: center; align-self: start; width: 220px; height: 220px; }
}

/* 8. PARTNERS, FAQ, SHARE BAND, FOOTER ----------------------------------- */
.section-partners { padding-block: clamp(36px, 6vw, 64px); background: var(--white); }
.partners {
	list-style: none; margin: 1.4rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 40px;
}
.partner { display: flex; align-items: center; min-height: 48px; }
.partner img { height: 44px; width: auto; max-width: 180px; object-fit: contain; }
.wordmark {
	display: inline-block; padding: .55em 1.1em; border: 2px solid var(--line); border-radius: 999px;
	font: 900 .95rem/1.1 var(--font-head); letter-spacing: -.005em; color: var(--g700); background: var(--white);
}

.faq { margin-top: 1.5rem; display: grid; gap: 10px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq summary {
	list-style: none; cursor: pointer; padding: 16px 52px 16px 18px; position: relative;
	font: 800 1.02rem/1.35 var(--font-head); color: var(--g900); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
	font: 800 1.5rem/1 var(--font-head); color: var(--g700);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq details p { margin: 0; padding: 14px 18px 18px; color: var(--muted); }

.share-band { background: var(--lime); color: var(--g900); padding: 28px 0; }
.share-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.share-band h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin: 0 0 .15em; }
.share-band p { margin: 0; }
.share-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.share-band .btn { background: var(--g900); border-color: var(--g900); color: #fff; }
.share-band .btn:hover { background: var(--g950); border-color: var(--g950); }

.site-footer { background: var(--g950); color: #cfe3d6; padding-top: 44px; font-size: .95rem; }
.footer-inner { display: grid; gap: 24px; padding-bottom: 28px; }
@media (min-width: 760px) { .footer-inner { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.site-footer .brand-name { color: #fff; }
.footer-brand p { margin: .5em 0 0; max-width: 46ch; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--lime); }
.footer-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
@media (min-width: 760px) { .footer-nav .menu { justify-content: flex-end; } }
.footer-nav .menu a { display: inline-block; padding: .45em 0; font-weight: 700; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, .14); padding-block: 18px 26px; font-size: .85rem; color: #a9c5b4; }
.footer-legal p { margin: 0; }

/* 9. PAGE TEMPLATES + 404 ------------------------------------------------ */
.page-hero {
	background: linear-gradient(160deg, var(--g950), var(--g700)); color: #fff;
	padding: clamp(32px, 6vw, 64px) 0;
}
.page-hero h1 { color: #fff; margin: 0; }
.page-hero .eyebrow { color: var(--lime); }
.prose { font-size: 1.05rem; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--radius-sm); }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.entry { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.section-404 { padding-block: clamp(64px, 14vw, 140px); }
.page-article .page-hero + .section { padding-top: clamp(32px, 6vw, 64px); }
.navigation.pagination .nav-links { display: flex; gap: 8px; justify-content: center; }
.navigation.pagination a, .navigation.pagination span { padding: .5em .9em; border: 2px solid var(--line); border-radius: 999px; text-decoration: none; }
.navigation.pagination .current { background: var(--g700); border-color: var(--g700); color: #fff; }

/* 10. MATERI — markup from [ikrar_materi] -------------------------------- */
.ikrar-materi-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 1rem; }
.ikrar-materi-header h2 { margin: 0; }
.ikrar-materi-role {
	margin: 0; padding: .35em .9em; background: var(--g100); color: var(--g900);
	border-radius: 999px; font-size: .9rem;
}
.ikrar-materi h3 {
	margin: 2rem 0 .8rem; padding-bottom: .4rem; border-bottom: 2px solid var(--lime);
	font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em;
}
.ikrar-res-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ikrar-res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ikrar-res-grid { grid-template-columns: repeat(3, 1fr); } }
.ikrar-res-card {
	display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 20px; box-shadow: 0 2px 10px rgba(7, 59, 39, .06);
	transition: box-shadow .15s, border-color .15s;
}
.ikrar-res-card:hover { box-shadow: var(--shadow); border-color: var(--g700); }
.ikrar-res-card h4 { margin: 0; font-size: 1.1rem; }
.ikrar-res-card p { margin: 0; color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.ikrar-res-meta { margin-top: auto; padding-top: 4px; }
.ikrar-res-tag {
	display: inline-block; max-width: 100%; padding: .2em .7em; border-radius: 999px;
	background: var(--sand2); color: var(--g900); font: 800 .72rem/1.4 var(--font-head);
	text-transform: uppercase; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.ikrar-res-card .btn { margin-top: 6px; }
.ikrar-materi-empty { padding: 1.2em 1.4em; background: var(--sand); border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); }
.ikrar-materi-locked {
	max-width: 560px; margin: 0 auto; text-align: center;
	padding: clamp(28px, 6vw, 48px); background: var(--sand); border: 1px solid var(--line); border-radius: 24px;
}
.ikrar-materi-locked h2 { margin-bottom: .3em; }
.ikrar-materi-locked p { color: var(--muted); }

/* 11. ACCESSIBILITY + MOTION -------------------------------------------- */
body :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .ikrar-cta :focus-visible, .site-footer :focus-visible, .page-hero :focus-visible { outline-color: var(--lime); }
.share-band :focus-visible { outline-color: var(--g900); }
.btn:focus-visible { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
@media print {
	.site-header, .share-band, .nav-toggle, .hero::after { display: none !important; }
	.hero, .ikrar-cta, .page-hero { background: #fff !important; color: #000 !important; }
}

/* 6b. EXTRA BLOCKS (facts strip, 3/4-up cards, pledge actions, 4 steps) ---- */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fact {
	background: var(--g900); color: #fff; border-radius: var(--radius); padding: 18px 22px;
	display: grid; grid-template-columns: 128px 1fr; column-gap: 18px; align-items: center;
}
.fact strong { font-family: var(--font-head, inherit); font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1; color: var(--lime); }
.fact span { font-size: .95rem; line-height: 1.4; color: #e6f2ea; }

.cards-3, .cards-4 { margin-top: 1.5rem; }
@media (min-width: 700px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.cards-4 .card { display: block; }
.cards-4 .card-icon { margin-bottom: 12px; }
.cards-3 .card { display: block; padding: 22px 22px 20px; }
.card-sub { color: var(--teal-d); font-weight: 700; font-size: .9rem !important; margin-bottom: .6em !important; }
.tick { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tick li { position: relative; padding-left: 26px; color: var(--ink); font-size: .96rem; line-height: 1.4; }
.tick li::before {
	content: ""; position: absolute; left: 0; top: .25em; width: 16px; height: 16px; border-radius: 50%;
	background: var(--g100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-4.9' fill='none' stroke='%230b5d3b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
@media (min-width: 900px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps-4 { grid-template-columns: repeat(4, 1fr); } }
.chain { margin: 2rem auto 0; max-width: 46rem; text-align: center; color: var(--muted); }

/* PLAYFUL CAMPAIGN REFRESH — brighter, friendlier and more tactile. */
:root{--g950:#174a2b;--g900:#176b35;--g700:#21883d;--g100:#e7f7d7;--g50:#f5fbe9;--lime:#ffe34f;--lime-d:#f6cb24;--teal:#24b8a4;--teal-d:#087d70;--sand:#fff8e8;--sand2:#ffedc7;--line:#e7dfca;--ink:#263d2c;--muted:#617365;--radius:26px;--radius-sm:17px;--shadow:0 8px 0 rgba(23,74,43,.10),0 16px 32px rgba(23,74,43,.08);--font-head:"Nunito","Arial Rounded MT Bold","Avenir Next","Segoe UI",system-ui,sans-serif}
body{background:#fffdf6;background-image:radial-gradient(rgba(33,136,61,.07) 1.2px,transparent 1.2px);background-size:20px 20px}
body h1,body h2,body h3,body h4{letter-spacing:-.035em}body h1,body h2{font-weight:1000}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border-radius:999px;background:#e8f6cf;color:#286e32;letter-spacing:.08em;transform:rotate(-1deg)}
.section{padding:clamp(54px,8vw,94px) 0}.section-alt{background:#fff3cf;background-image:radial-gradient(rgba(240,151,44,.13) 1.3px,transparent 1.3px);background-size:19px 19px;border-block:3px dashed rgba(226,160,57,.25)}
.section-lead{font-size:clamp(1.05rem,2.3vw,1.22rem);line-height:1.7}
.site-header{background:rgba(255,253,246,.96);border-bottom:3px solid #f0e6c9;box-shadow:0 4px 0 rgba(23,74,43,.04)}.brand-name{font-size:1.25rem;font-weight:1000}.brand-sub{letter-spacing:.13em}.brand .leaf{color:#f08a27}
.site-nav .menu a{border-radius:999px;font-weight:1000;letter-spacing:.035em;transition:transform .16s ease,background .16s ease}.site-nav .menu a:hover{background:#e8f6cf;transform:translateY(-2px) rotate(-1deg)}.site-nav .menu .nav-action a{color:#fff;background:#f36b32;border:2px solid #f36b32;box-shadow:0 4px 0 #c94a1b}.site-nav .menu .nav-action a:hover{color:#fff;background:#df5722}.site-nav .menu .current-menu-item>a{background:#ffe34f}.nav-toggle{border-color:#21883d;background:#e8f6cf}
.hero{color:#24422c;background:radial-gradient(circle at 90% 14%,rgba(255,227,79,.92) 0 7%,transparent 7.2%),radial-gradient(circle at 7% 90%,rgba(36,184,164,.24) 0 12%,transparent 12.2%),linear-gradient(135deg,#e9f7c9 0%,#fff4ca 48%,#d8f2d1 100%);padding:clamp(48px,8vw,104px) 0 clamp(64px,9vw,112px)}
.hero:before{content:"";position:absolute;width:180px;height:180px;right:4%;bottom:8%;border:4px dashed rgba(33,136,61,.2);border-radius:44% 56% 63% 37%/44% 35% 65% 56%;transform:rotate(17deg);pointer-events:none}.hero:after{background:#fffdf6;height:34px;border-radius:50% 50% 0 0/100% 100% 0 0}
.hero h1{color:#17552c;max-width:13ch;text-wrap:balance}.hero h1 .hl{color:#f15d2b;text-decoration:underline;text-decoration-color:#ffe34f;text-decoration-thickness:.16em;text-underline-offset:.08em}
.hero-date{display:inline-flex;padding:.7rem 1rem;background:#fff;border:2px solid #d9edbd;border-radius:999px;color:#27743a;box-shadow:0 4px 0 rgba(23,74,43,.08);letter-spacing:.07em}.hero-date-dot{background:#f36b32;box-shadow:0 0 0 5px rgba(243,107,50,.15)}.hero-lead{color:#425b46;font-weight:600}.hero a:not(.btn){color:#176b35}
.hero .btn-lime,body .hero a.btn-lime{background:#f36b32;border-color:#f36b32;color:#fff;box-shadow:0 5px 0 #c94a1b}.hero .btn-lime:hover,body .hero a.btn-lime:hover{background:#df5722;border-color:#df5722;transform:translateY(-2px)}.hero .btn-ghost,body .hero a.btn-ghost{color:#176b35;border-color:#21883d;background:rgba(255,255,255,.65);box-shadow:0 4px 0 rgba(23,74,43,.08)}.hero .btn-ghost:hover,body .hero a.btn-ghost:hover{background:#fff;color:#176b35}
.btn,body a.btn{border-radius:16px 22px 17px 22px;text-transform:none;letter-spacing:.01em;font-size:1rem;font-weight:1000;box-shadow:0 4px 0 rgba(7,59,39,.18);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.btn:hover,body a.btn:hover{transform:translateY(-2px) rotate(-.5deg)}.btn:active{transform:translateY(2px);box-shadow:none}
.cards{gap:22px}.card{border:2px solid #e5e8d2;border-radius:24px 28px 22px 27px;padding:24px;box-shadow:0 6px 0 rgba(23,74,43,.08),0 12px 26px rgba(23,74,43,.06);transition:transform .18s ease,box-shadow .18s ease}.card:nth-child(4n+1){border-top:6px solid #f36b32}.card:nth-child(4n+2){border-top:6px solid #f5c842}.card:nth-child(4n+3){border-top:6px solid #25b5a0}.card:nth-child(4n+4){border-top:6px solid #7dbb45}.card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 10px 0 rgba(23,74,43,.08),0 18px 30px rgba(23,74,43,.09)}
.card-icon{width:58px;height:58px;display:inline-grid;place-items:center;border-radius:19px 15px 21px 15px;background:#fff0c6;color:#df6127}.card:nth-child(4n+2) .card-icon{background:#e4f5d0;color:#27743a}.card:nth-child(4n+3) .card-icon{background:#d8f5ee;color:#087d70}.card:nth-child(4n+4) .card-icon{background:#ffe3d4;color:#d94d27}
.fact,.step{border-radius:22px;border:2px solid #e5e8d2;box-shadow:0 5px 0 rgba(23,74,43,.07)}.fact:nth-child(odd){background:#fff2ce}.fact:nth-child(even){background:#e8f6d9}.step-num{background:#ffe34f;color:#17552c;border:3px solid #fff;box-shadow:0 4px 0 #dfbd2d;font-weight:1000}.step-link{font-weight:1000}.chain{background:#fff;border:2px dashed #e5c45c;border-radius:20px;padding:18px 22px}
.section-register{background:radial-gradient(circle at 8% 20%,rgba(255,227,79,.3) 0 70px,transparent 71px),radial-gradient(circle at 93% 80%,rgba(36,184,164,.18) 0 100px,transparent 101px),#eaf7d8;border-block:3px dashed #cce6ac}.section-partners{background:#fffdf6}.partners{gap:18px}.partner{background:#fff;border:2px solid #f0e6c9;border-radius:18px;padding:16px 20px;box-shadow:0 4px 0 rgba(23,74,43,.06)}
.faq details{background:#fff;border:2px solid #e5e8d2;border-radius:18px;margin:0 0 12px;padding:16px 20px;box-shadow:0 4px 0 rgba(23,74,43,.06)}.faq summary{color:#176b35;font-weight:1000;cursor:pointer}.site-footer{background:#174a2b;border-top:8px solid #ffe34f}.site-footer a{color:#ffe34f}.site-footer a:hover{color:#fff}
body .ikrar-counters,body .ikrar-counter,body .ikrar-stat{border-radius:22px!important}body .ikrar-counters>*,body .ikrar-counter,body .ikrar-stat{box-shadow:0 6px 0 rgba(23,74,43,.10)!important}body .ikrar-counters strong,body .ikrar-counter strong,body .ikrar-stat strong{font-weight:1000!important}
@media(max-width:899px){.hero:before{width:100px;height:100px;right:-18px;bottom:9%}.hero h1{max-width:16ch}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* Keep the saturated campaign green for the joining/how-to band only. */
#fokus.section-alt, #faq.section-alt {
  background:#fff5dc;
  color:#354139;
  border:0;
  background-image:radial-gradient(rgba(255,91,26,.08) 1px, transparent 1px);
  background-size:18px 18px;
}
#fokus.section-alt h2, #faq.section-alt h2,
#fokus.section-alt h3, #faq.section-alt h3 { color:#ff5b1a; }
#fokus.section-alt .eyebrow, #faq.section-alt .eyebrow { color:#078a18; }
#fokus.section-alt .section-lead, #faq.section-alt .section-lead { color:#5f6d62; }
#fokus.section-alt .card { color:#354139; }
#fokus.section-alt .card-icon { background:#078a18; color:#fff; }
#faq.section-alt .faq details { background:#fff; color:#354139; border:0; border-bottom:2px solid #ffb28c; box-shadow:none; }
#faq.section-alt .faq summary { color:#078a18; }

/* ==========================================================================
   Reference-inspired visual direction: bold green campaign band, cyan
   divider, orange display headings and simple illustrated steps. Keep layout
   intentionally loose and poster-like rather than a corporate card system.
   ========================================================================== */
:root {
  --g950:#087a18;
  --g900:#078a18;
  --g700:#087c22;
  --g100:#e5f5d8;
  --g50:#f7fbef;
  --lime:#ffe34e;
  --lime-d:#f6cb24;
  --teal:#11a5d5;
  --teal-d:#087ba0;
  --sand:#fff;
  --sand2:#fff4e9;
  --line:#deded7;
  --ink:#24412c;
  --muted:#65746a;
  --radius:8px;
  --radius-sm:4px;
  --shadow:none;
  --font-head:Impact, Haettenschweiler, "Arial Narrow Bold", "Nunito", sans-serif;
}
body {
  background:#fff;
  color:#354139;
  font-family:"Nunito", "Trebuchet MS", Arial, sans-serif;
}
body h1, body h2, body h3, body h4 {
  font-family:var(--font-head);
  font-weight:900;
  letter-spacing:.005em;
  text-transform:uppercase;
}
body h1 { font-size:clamp(2.3rem,5vw,3.7rem); }
body h2 { font-size:clamp(1.9rem,4vw,2.7rem); }
body h3 { font-size:clamp(1.2rem,2.2vw,1.55rem); }
.site-header {
  background:#fff;
  border-bottom:3px solid #f1f1ed;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  backdrop-filter:none;
}
.header-inner { max-width:1440px; min-height:64px; }
.brand .custom-logo { max-height:48px; max-width:180px; }
.brand-name { font-family:var(--font-head); font-size:1.2rem; color:#ff5b1a; }
.brand-sub { color:#078a18; }
.site-nav .menu a {
  font-family:var(--font-head);
  color:#f05b1c;
  font-size:.9rem;
  letter-spacing:0;
  padding:.7em .85em;
  border-radius:0;
}
.site-nav .menu a:hover { background:#fff0e7; color:#d8470e; }
.site-nav .menu .nav-action a {
  color:#fff; background:#ff5b1a; border:0;
  box-shadow:0 3px 0 #ce4510;
}
.site-nav .menu .current-menu-item > a { background:#ff5b1a; color:#fff; }
.nav-toggle { border-radius:0; color:#078a18; border-color:#078a18; }
.hero {
  color:#fff;
  background:#078a18;
  padding:clamp(42px,6vw,76px) 0 clamp(50px,7vw,82px);
}
.hero::before {
  content:"";
  position:absolute; top:0; left:0; right:0; height:clamp(24px,4vw,60px);
  background:#0ca5d3;
}
.hero::after {
  content:"";
  position:absolute; left:calc(50% - 24px); bottom:-1px; width:0; height:0;
  border-left:24px solid transparent; border-right:24px solid transparent;
  border-top:24px solid #078a18;
  background:none; border-radius:0;
}
.hero-inner { padding-top:clamp(24px,3vw,44px); }
.hero-copy { max-width:860px; margin-inline:auto; text-align:center; }
.hero-date {
  display:inline-flex; border:0; border-radius:0; background:#fff;
  color:#078a18; padding:.45rem .8rem; font-weight:900;
  font-family:var(--font-head); text-transform:uppercase;
  box-shadow:none; transform:rotate(-1deg);
}
.hero-date-dot { background:#ff5b1a; box-shadow:none; }
.hero h1 { color:#fff; max-width:19ch; margin:0 auto .45em; }
.hero h1 .hl {
  color:#fff; text-decoration:none;
  border-bottom:3px solid #fff; padding-bottom:.05em;
}
.hero-lead { color:#fff; font-size:clamp(1rem,2vw,1.2rem); max-width:75ch; margin:0 auto 1.4rem; }
.hero-stats { max-width:800px; margin:2rem auto 0; }
.btn, body a.btn {
  border-radius:0;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:0;
  font-size:1rem;
  font-weight:900;
  padding:.85em 1.25em;
  box-shadow:0 4px 0 rgba(0,0,0,.15);
}
.btn-lime, body a.btn-lime, .hero .btn-lime, body .hero a.btn-lime {
  background:#ff5b1a; border-color:#ff5b1a; color:#fff;
}
.btn-lime:hover, body a.btn-lime:hover { background:#e94d10; border-color:#e94d10; }
.btn-ghost, body a.btn-ghost {
  border-color:#fff; color:#fff; background:transparent;
}
.section { padding:clamp(48px,7vw,82px) 0; }
.section-alt {
  background:#078a18;
  color:#fff;
  border:0;
  background-image:none;
}
.section-alt h2, .section-alt h3 { color:#fff; }
.section-alt .eyebrow { color:#ffe34e; }
.section-alt .section-lead { color:#fff; }
.section-alt a { color:#fff; }
.section-alt .step-link { color:#078a18; }
.section-alt .chain {
  background:#fff; color:#087a18; border:0;
  border-radius:0; box-shadow:none;
}
.eyebrow {
  display:block;
  color:#ff5b1a;
  font-family:var(--font-head);
  font-size:1rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:.65rem;
}
.section h2 { color:#ff5b1a; }
.section-alt h2 { color:#fff; text-align:center; }
.section-alt > .wrap > .eyebrow { text-align:center; }
.section-lead { color:#5f6d62; max-width:70ch; }
.split { align-items:center; gap:clamp(30px,6vw,84px); }
.split-main { max-width:780px; }
.facts { gap:12px; }
.fact {
  background:#fff7e7 !important;
  border:0; border-left:6px solid #ff5b1a;
  border-radius:0; box-shadow:none;
}
.fact:nth-child(even) { border-left-color:#0ca5d3; }
.cards { gap:clamp(18px,3vw,34px); }
.card {
  background:transparent;
  border:0;
  border-radius:0;
  padding:18px 8px;
  box-shadow:none;
  text-align:center;
}
.card:nth-child(n) { border-top:0; }
.card:hover { transform:translateY(-3px); box-shadow:none; }
.card-icon {
  width:84px; height:84px;
  border-radius:50%;
  display:inline-grid; place-items:center;
  background:rgba(255,255,255,.38);
  color:#fff;
  border:0;
}
.section:not(.section-alt) .card-icon {
  background:#e4f4d8; color:#078a18;
}
.card h3 { color:#ff5b1a; }
.section-alt .card h3 { color:#fff; }
.card p, .card-sub { max-width:34ch; margin-inline:auto; }
.steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,2vw,28px);
  list-style:none;
  margin:2rem 0 1.5rem;
  padding:0;
}
.step {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0 4px;
  text-align:center;
  color:#fff;
}
.step-num {
  display:inline-grid;
  place-items:center;
  width:32px; height:32px;
  border-radius:50%;
  background:#fff; color:#078a18;
  border:0; box-shadow:none;
  font-family:var(--font-head);
  font-size:1.15rem;
  margin-bottom:12px;
}
.step h3 { color:#fff; margin:.3rem 0 .5rem; }
.step p { color:#fff; font-size:.95rem; }
.step-link {
  display:inline-block;
  background:#fff;
  color:#078a18 !important;
  padding:.4em .65em;
  font-family:var(--font-head);
  text-transform:uppercase;
  text-decoration:none;
  line-height:1.4;
}
.section-register {
  background:#fff;
  border:0;
  padding-top:clamp(36px,5vw,60px);
}
.section-register .ikrar-form,
.section-register .ikrar-form-wrap,
.section-register form {
  max-width:900px;
  margin-inline:auto;
}
.section-register h1,
.section-register h2,
.section-register .ikrar-form-title,
.section-register .ikrar-form-heading {
  color:#ff5b1a !important;
  font-family:var(--font-head);
  text-transform:uppercase;
}
.section-register input,
.section-register select,
.section-register textarea {
  border:2px solid #d8d8d3 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  min-height:46px;
  font-family:"Nunito", Arial, sans-serif;
}
.section-register textarea { min-height:120px; }
.section-register button[type=submit],
.section-register input[type=submit] {
  background:#ff5b1a !important;
  color:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  font-family:var(--font-head);
  font-size:1.1rem;
  text-transform:uppercase;
  padding:14px 24px;
}
.section-register .ikrar-role-option,
.section-register .role-option,
.section-register label {
  border-radius:0;
}
.section-partners { background:#fff; }
.partner {
  border:0; border-bottom:3px solid #078a18;
  border-radius:0; box-shadow:none; background:#fff;
}
.site-footer { background:#087a18; border-top:8px solid #0ca5d3; }
.site-footer a { color:#ffe34e; }
@media (max-width:760px) {
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:26px; }
  .hero-inner { padding-top:28px; }
  .hero h1 { max-width:15ch; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split { grid-template-columns:1fr; }
}
@media (max-width:460px) {
  .steps { grid-template-columns:1fr 1fr; gap:18px 10px; }
  .steps .step p { font-size:.86rem; }
  .hero .btn-row { justify-content:center; }
}


/* Requested campaign header and contrast improvements */
.brand-multi { display:flex; align-items:center; gap:14px; }
.brand-logos { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.brand-logos img { display:block; width:auto; height:auto; max-width:64px; max-height:44px; object-fit:contain; }
.brand-multi .brand-name { color:#ff5b1b; }
.brand-multi .brand-sub { color:#087f2b; }
@media (max-width: 640px) {
	.brand-multi { gap:8px; }
	.brand-logos { gap:4px; }
	.brand-logos img { max-width:36px; max-height:34px; }
	.brand-multi .brand-name { font-size: .9rem; }
	.brand-multi .brand-sub { font-size: .62rem; }
}
/* Hide account-related menu labels while keeping pages and login functionality available by direct URL. */
.site-nav .menu a[href*="/masuk"],
.site-nav .menu a[href*="/akun"],
.site-nav .menu a[href*="/best-team"],
.site-nav .menu a[href*="/best-team/"] { display:none !important; }
.fact strong { color:#9b7900; }
.fact span { color:#33443a; }
.ikrar-cta > h2, .ikrar-cta .ikrar-cta-title { text-align:center; }

.site-nav .menu li:has(> a[href*="/masuk"]),
.site-nav .menu li:has(> a[href*="/akun"]),
.site-nav .menu li:has(> a[href*="/best-team"]) { display:none !important; }

/* Improve contrast for the 'Mudah dan cepat' section label. */
#cara-bergabung > .wrap > .eyebrow { color: #164b1d !important; background: #fff1c2; }

/* RISE × AMP landing page and homepage feature */
.rise-home-promo { padding-top: 34px; padding-bottom: 34px; }
.rise-home-card { position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:28px; align-items:center; padding:clamp(24px,4vw,48px); border-radius:24px; color:#fff; background:linear-gradient(120deg,#063d2b 0%,#087747 58%,#15965b 100%); box-shadow:0 18px 50px rgba(6,61,43,.14); }
.rise-home-card:after { content:""; position:absolute; width:300px; height:300px; border:1px solid rgba(255,255,255,.15); border-radius:50%; right:4%; top:-190px; box-shadow:0 0 0 35px rgba(255,255,255,.035),0 0 0 70px rgba(255,255,255,.025); pointer-events:none; }
.rise-home-mark { display:grid; grid-template-columns:repeat(2,48px); gap:7px; transform:rotate(-5deg); }
.rise-home-mark span { display:grid; place-items:center; width:48px;height:48px;border:1px solid rgba(255,255,255,.45);border-radius:12px;background:rgba(255,255,255,.1);font-size:1.45rem;font-weight:900;color:#d9f99d; }
.rise-home-copy { position:relative;z-index:1;max-width:720px; }.rise-home-copy .eyebrow { color:#d9f99d;margin-bottom:8px; }.rise-home-copy h2 { color:#fff;margin:0 0 12px;font-size:clamp(1.65rem,3vw,2.5rem); }.rise-home-copy p:not(.eyebrow) { color:rgba(255,255,255,.86);max-width:65ch;margin-bottom:20px; }
.rise-home-stamp { position:relative;z-index:1;display:grid;gap:8px;transform:rotate(5deg); }.rise-home-stamp strong { font-size:.78rem;letter-spacing:.16em;color:#083d2c;background:#d9f99d;padding:9px 12px;border-radius:4px;text-align:center; }
.rise-hero { background:radial-gradient(circle at 78% 45%,rgba(100,210,150,.22),transparent 28%),linear-gradient(125deg,#063d2b,#087747 65%,#075d3b);padding:clamp(58px,8vw,108px) 0 82px; }
.rise-hero-grid { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:48px;align-items:center; }.rise-hero h1 { color:#fff;font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:1.04;letter-spacing:-.04em;max-width:850px;margin:12px 0 22px; }.rise-hero h1 span { color:#d9f99d; }.rise-lead { color:rgba(255,255,255,.88);font-size:clamp(1.08rem,1.7vw,1.32rem);line-height:1.7;max-width:66ch;margin-bottom:28px; }
.rise-orbit { width:min(100%,340px);aspect-ratio:1;border:1px solid rgba(255,255,255,.25);border-radius:50%;margin:auto;position:relative;display:grid;place-items:center;box-shadow:0 0 0 24px rgba(255,255,255,.035),0 0 0 55px rgba(255,255,255,.025); }.rise-orbit:before,.rise-orbit:after {content:"";position:absolute;inset:12%;border:1px dashed rgba(217,249,157,.55);border-radius:50%;}.rise-orbit:after {inset:26%;border-style:solid;opacity:.45;}.rise-orbit-core {position:relative;z-index:1;display:flex;align-items:center;gap:7px;font-size:2.4rem;font-weight:900;color:#fff;}.rise-orbit-core span {color:#d9f99d;}.rise-orbit-tag {position:absolute;z-index:2;background:#d9f99d;color:#063d2b;padding:8px 13px;border-radius:999px;font-size:.7rem;font-weight:900;letter-spacing:.1em;}.tag-one{top:8%;left:32%;}.tag-two{right:-2%;top:55%;}.tag-three{left:0;bottom:19%;}
.rise-intro-grid {display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start;}.rise-intro-grid h2,.rise-page h2 {font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.12;letter-spacing:-.025em;}.rise-intro-grid p {font-size:1.05rem;}.rise-three {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;}.rise-three article,.rise-outcomes article,.rise-awards article,.rise-network article {padding:25px;border:1px solid var(--line,#dce5dd);border-radius:16px;background:#fff;}.rise-three article>span,.rise-outcomes article>span,.rise-awards article>span,.rise-network article>span {color:#16804c;font-size:.75rem;font-weight:900;letter-spacing:.12em;}.rise-three h3 {font-size:1.5rem;margin:12px 0 8px;}.rise-callout {margin-top:20px;background:#e9f6df;border-left:5px solid #16804c;padding:22px 26px;border-radius:4px 14px 14px 4px;}.rise-callout p{margin:5px 0 0;}
.rise-pillars {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px;}.rise-pillars article {position:relative;padding:28px;border:1px solid #dce7dd;border-radius:18px;background:#fff;box-shadow:0 8px 26px rgba(10,65,38,.04);}.rise-letter {font-size:3.5rem;line-height:1;font-weight:950;color:#087747;letter-spacing:-.06em;}.rise-pillars h3{font-size:1.35rem;margin:10px 0 14px;}.rise-amp-note{background:#eff8e9;border-radius:10px;padding:14px 16px;margin-top:18px;font-size:.94rem;}.rise-footnote,.rise-privacy{font-size:.9rem;color:var(--muted);margin-top:24px;}.rise-journey {list-style:none;counter-reset:journey;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:0;margin:30px 0;}.rise-journey li{counter-increment:journey;border-top:3px solid #14804b;background:#f5f8f1;padding:22px 18px;border-radius:0 0 12px 12px;}.rise-journey li>span,.rise-roadmap article>b{font-size:.72rem;font-weight:900;letter-spacing:.1em;color:#14804b;}.rise-journey h3{font-size:1.18rem;margin:12px 0 8px;}.rise-journey p{font-size:.94rem;}.rise-outcomes,.rise-awards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px;}.rise-outcomes article:first-child{background:#073f2d;color:#fff;}.rise-outcomes article:first-child h3{color:#fff;}.rise-outcomes article:first-child p{color:rgba(255,255,255,.8);}.rise-outcomes h3,.rise-awards h3{margin:12px 0 8px;}.rise-scorecard{max-width:850px;margin:30px auto 0;border:1px solid #dbe5db;border-radius:16px;overflow:hidden;background:#fff;padding:18px 22px;}.rise-score-row{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:8px;align-items:center;padding:12px 0;font-size:.95rem;}.rise-score-row b,.rise-score-total b{text-align:right;color:#087747;}.rise-score-row i{grid-column:1/-1;display:block;height:7px;border-radius:99px;background:#e8efe8;overflow:hidden;position:relative;}.rise-score-row i:after{content:"";display:block;width:var(--score);height:100%;background:#15965b;border-radius:99px;}.rise-score-total{display:flex;justify-content:space-between;border-top:1px solid #dbe5db;padding-top:15px;margin-top:6px;font-weight:900;}.rise-awards article>span{font-size:1.6rem;}.rise-roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px;}.rise-roadmap article{padding:24px;border-radius:15px;background:#f4f8f0;border:1px solid #e0e9df;}.rise-roadmap h3{margin:10px 0 2px;}.rise-roadmap article p{color:#14804b;font-weight:700;}.rise-roadmap ul{padding-left:19px;margin-bottom:0;font-size:.94rem;}.rise-global{background:#073f2d;color:#fff;}.rise-global h2{color:#fff;}.rise-global .eyebrow{color:#d9f99d;}.rise-network{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px;}.rise-network article{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);}.rise-network h3{color:#d9f99d;font-size:1.1rem;}.rise-network p{color:rgba(255,255,255,.8);}.rise-privacy{color:rgba(255,255,255,.68);}.rise-final{background:#eff7e8;}.rise-final .wrap{max-width:850px;}.rise-final-line{font-size:1.25rem;font-weight:800;color:#075d3b;border-left:4px solid #16804c;padding-left:18px;margin:25px 0;}
@media(max-width:800px){.rise-home-card{grid-template-columns:auto 1fr;gap:18px;}.rise-home-stamp{grid-column:2;display:flex;flex-wrap:wrap;transform:none;}.rise-hero-grid,.rise-intro-grid{grid-template-columns:1fr;gap:34px;}.rise-orbit{width:min(75vw,300px);}.rise-three,.rise-network{grid-template-columns:repeat(2,minmax(0,1fr));}.rise-journey{grid-template-columns:repeat(2,minmax(0,1fr));}.rise-roadmap{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.rise-home-card{grid-template-columns:1fr;}.rise-home-mark{display:flex;transform:none;}.rise-home-mark span{width:38px;height:38px;font-size:1.1rem;}.rise-home-stamp{grid-column:1;}.rise-three,.rise-pillars,.rise-journey,.rise-outcomes,.rise-awards,.rise-roadmap,.rise-network{grid-template-columns:1fr;}.rise-pillars article{padding:22px;}.rise-scorecard{padding:14px;}.rise-score-row{font-size:.88rem;}}

/* RISE contrast refinement: darker lime accents and readable text on light cards. */
.rise-page .rise-hero h1 span,
.rise-page .rise-hero .rise-orbit-core span,
.rise-page .rise-hero .rise-orbit-tag,
.rise-page .rise-global .eyebrow,
.rise-page .rise-network h3,
.rise-page .rise-home-copy .eyebrow,
.rise-page .rise-home-mark span {
  color: #173d27;
}
.rise-page .rise-hero h1 span,
.rise-page .rise-hero .rise-orbit-tag,
.rise-page .rise-home-mark span,
.rise-page .rise-home-stamp strong {
  background-color: #b8d96a;
}
.rise-page .rise-hero .rise-orbit-core span { color: #b8d96a; }
.rise-page .rise-global .eyebrow,
.rise-page .rise-network h3,
.rise-page .rise-home-copy .eyebrow { color: #b8d96a; }
.rise-page .rise-intro,
.rise-page .rise-intro-grid,
.rise-page .rise-three article,
.rise-page .rise-three article h3,
.rise-page .rise-three article p,
.rise-page .rise-pillars article,
.rise-page .rise-pillars article h3,
.rise-page .rise-pillars article p,
.rise-page .rise-amp-note,
.rise-page .rise-journey li,
.rise-page .rise-journey li h3,
.rise-page .rise-journey li p,
.rise-page .rise-outcomes article:not(:first-child),
.rise-page .rise-outcomes article:not(:first-child) h3,
.rise-page .rise-outcomes article:not(:first-child) p,
.rise-page .rise-awards article,
.rise-page .rise-awards article h3,
.rise-page .rise-awards article p,
.rise-page .rise-scorecard,
.rise-page .rise-scorecard span,
.rise-page .rise-roadmap article,
.rise-page .rise-roadmap article h3,
.rise-page .rise-roadmap article p,
.rise-page .rise-roadmap article li,
.rise-page .rise-final,
.rise-page .rise-final h2,
.rise-page .rise-final p {
  color: #26382e;
}
.rise-page .rise-amp-note { background: #e6f0d9; }
.rise-page .rise-journey li,
.rise-page .rise-roadmap article { background: #edf3e7; }
.rise-page .rise-three article,
.rise-page .rise-pillars article,
.rise-page .rise-awards article,
.rise-page .rise-outcomes article:not(:first-child) { background: #fff; }
.rise-page .rise-global .rise-network article { color: #f1f5f2; }
.rise-page .rise-global .rise-network article p { color: #e0ebe3; }
.rise-page .rise-global .rise-privacy { color: #d2e1d7; }