/* Uruswang – landing page */
.uwl {
	--uwl-green: #1F5A4C;
	--uwl-gold: #C9A227;
	--uwl-ink: #0F2A24;
	--uwl-text: #2C3F3A;
	--uwl-muted: #5A6B66;
	--uwl-mist: #EEF3EF;
	--uwl-line: #D9E3DD;
	--uwl-paper: #FBF8EF;
	--uwl-rule: #C8473A;
	--uwl-in: #1E7B4F;
	--uwl-out: #B4532A;
	--uwl-font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--uwl-hand: "Kalam", "Comic Sans MS", cursive;
	background: #fff;
	color: var(--uwl-text);
	font-family: var(--uwl-font);
	font-size: 18px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
.uwl *, .uwl *::before, .uwl *::after { box-sizing: border-box; }
.uwl svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.uwl h1, .uwl h2, .uwl h3 { font-family: var(--uwl-font); color: var(--uwl-ink); margin: 0; letter-spacing: -0.015em; text-transform: none; }
.uwl h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; }
.uwl h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; font-weight: 800; max-width: 22ch; }
.uwl h3 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; }
.uwl p { margin: 0; }
.uwl a { color: var(--uwl-green); }
.uwl-muted { color: var(--uwl-muted); }
.uwl-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.uwl a:focus-visible, .uwl summary:focus-visible { outline: 3px solid var(--uwl-gold); outline-offset: 3px; border-radius: 6px; }

/* Butang */
.uwl .uwl-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 14px 26px;
	background: var(--uwl-gold); color: var(--uwl-ink); border-radius: 14px; font: 700 17px/1.2 var(--uwl-font);
	text-decoration: none; box-shadow: inset 0 -3px 0 rgba(15, 42, 36, .22); transition: transform .1s ease, filter .15s ease;
}
.uwl .uwl-btn:hover { filter: brightness(1.06); color: var(--uwl-ink); }
.uwl .uwl-btn:active { transform: translateY(1px); }
.uwl .uwl-btn-sm { min-height: 42px; padding: 8px 18px; font-size: 15px; border-radius: 11px; }
.uwl .uwl-btn-ghost { display: inline-flex; align-items: center; min-height: 56px; padding: 14px 6px; color: var(--uwl-green); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.uwl .uwl-btn-ghost.uwl-on-dark { color: #fff; }
.uwl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

/* Navigasi */
.uwl-nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--uwl-line); }
.uwl-nav-in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.uwl .uwl-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; color: var(--uwl-green); text-decoration: none; letter-spacing: -0.02em; }
.uwl-brand-logo { display: inline-flex; align-items: center; gap: 10px; }
.uwl-brand-logo.has-img img { display: block; height: 28px; width: auto; max-width: 160px; object-fit: contain; }
.uwl-foot .uwl-brand-logo.has-img img { height: 24px; }
.uwl-brand-logo-mark, .uwl-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--uwl-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; box-shadow: inset 0 -4px 0 var(--uwl-gold); }
.uwl-nav-links { display: flex; gap: 26px; margin-left: 12px; }
.uwl-nav-links a { color: var(--uwl-text); text-decoration: none; font-size: 16px; font-weight: 600; }
.uwl-nav-links a:hover { color: var(--uwl-green); }
.uwl-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.uwl .uwl-login { color: var(--uwl-ink); text-decoration: none; font-weight: 600; font-size: 16px; white-space: nowrap; }
.uwl .uwl-btn-sm { white-space: nowrap; }

/* Hero */
.uwl-hero { padding: 64px 0 88px; background: var(--uwl-mist); }
.uwl-hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.uwl-free { display: inline-block; font-weight: 600; font-size: 15px; color: var(--uwl-green); background: #fff; border-radius: 999px; padding: 6px 14px; margin-bottom: 22px !important; }
.uwl-hero h1 { max-width: 11ch; }
.uwl-lede { font-size: 20px; color: var(--uwl-text); max-width: 46ch; margin: 22px 0 32px !important; }
.uwl-assure { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.uwl-assure li { display: flex; align-items: center; gap: 7px; font-size: 15.5px; font-weight: 600; color: var(--uwl-muted); margin: 0; }
.uwl-assure svg { width: 18px; height: 18px; color: var(--uwl-in); stroke-width: 3; }

/* Adegan: buku tunai + telefon */
.uwl-scene { position: relative; min-height: 640px; }
.uwl-ledger {
	position: absolute; right: 0; top: 0; width: 84%; background: var(--uwl-paper);
	border-radius: 6px 6px 4px 4px; padding: 18px 0 26px;
	box-shadow: 0 1px 0 #E8E1CC, 0 2px 0 #FBF8EF, 0 3px 0 #E8E1CC, 0 22px 50px -24px rgba(15, 42, 36, .35);
	transform: rotate(2.5deg); font-family: var(--uwl-hand); color: #253B7A;
	background-image: repeating-linear-gradient(180deg, transparent 0 39px, #CFDCE9 39px 40px);
	background-position: 0 56px;
}
.uwl-ledger::before { content: ""; position: absolute; top: 0; bottom: 0; left: 64px; width: 2px; background: var(--uwl-rule); opacity: .7; }
.uwl-ledger-head, .uwl-ledger-row { display: grid; grid-template-columns: 64px 1fr 92px 92px; align-items: end; }
.uwl-ledger-head { font-family: var(--uwl-font); font-size: 12.5px; font-weight: 600; color: #8C7B57; padding-bottom: 8px; height: 38px; }
.uwl-ledger-head span, .uwl-ledger-row span { padding: 0 10px; }
.uwl-ledger-head span:nth-child(n+3), .uwl-ledger-row span:nth-child(n+3) { text-align: right; border-left: 1px solid rgba(200, 71, 58, .35); }
.uwl-ledger-row { height: 40px; font-size: 19px; line-height: 1; padding-bottom: 8px; white-space: nowrap; }
.uwl-ledger-row span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.uwl-ledger-row span:nth-child(4) { color: #8A2D24; }

.uwl-phone {
	position: absolute; left: 0; top: 150px; width: 252px; border-radius: 38px; padding: 10px;
	background: #0F2A24; box-shadow: 0 30px 60px -20px rgba(15, 42, 36, .55), inset 0 0 0 2px #2A4A42;
}
.uwl-phone-screen { position: relative; border-radius: 29px; overflow: hidden; background: #F4F1E8; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #12302A; height: 470px; }
.uwl-p-top { background: var(--uwl-green); color: #fff; padding: 30px 16px 12px; }
.uwl-p-top small { display: block; font-size: 10px; opacity: .8; }
.uwl-p-top b { font-size: 15px; }
.uwl-p-body { padding: 12px; }
.uwl-p-bal { background: var(--uwl-green); background: linear-gradient(135deg, var(--uwl-green), #143D33); color: #fff; border-radius: 14px; padding: 14px; }
.uwl-p-bal small { font-size: 10px; opacity: .8; display: block; }
.uwl-p-bal b { font-size: 23px; letter-spacing: -0.01em; }
.uwl-p-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0; }
.uwl-p-tiles div { background: #FFFDF8; border: 1px solid #E4DED0; border-radius: 11px; padding: 9px; }
.uwl-p-tiles small { display: block; font-size: 9.5px; color: #5B6B65; }
.uwl-p-tiles b { font-size: 12.5px; white-space: nowrap; }
.uwl-p-tiles .in b { color: var(--uwl-in); }
.uwl-p-tiles .out b { color: var(--uwl-out); }
.uwl-p-list { background: #FFFDF8; border: 1px solid #E4DED0; border-radius: 12px; padding: 2px 10px; }
.uwl-p-list > div { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid #ECE7DA; }
.uwl-p-list > div:last-child { border-bottom: 0; }
.uwl-p-list i { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 13px; flex: none; }
.uwl-p-list i.in { background: #E3F1E8; color: var(--uwl-in); }
.uwl-p-list i.out { background: #F8E8DF; color: var(--uwl-out); }
.uwl-p-list span { flex: 1; min-width: 0; }
.uwl-p-list span b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uwl-p-list span small { display: block; font-size: 9.5px; color: #5B6B65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uwl-p-list em { font-style: normal; font-weight: 700; font-size: 11px; white-space: nowrap; }
.uwl-p-list em.in { color: var(--uwl-in); }
.uwl-p-list em.out { color: var(--uwl-out); }
.uwl-p-fab { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--uwl-gold); color: var(--uwl-ink); display: flex; align-items: center; justify-content: center; font: 400 28px/1 system-ui, sans-serif; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); }

/* Satu-satunya gerakan: entri ditulis, kemudian telefon muncul */
@media (prefers-reduced-motion: no-preference) {
	.uwl-ledger-row:not(.blank) span { clip-path: inset(0 100% 0 0); animation: uwl-write .5s ease-out forwards; }
	.uwl-ledger-row.r1 span { animation-delay: .25s; }
	.uwl-ledger-row.r2 span { animation-delay: .55s; }
	.uwl-ledger-row.r3 span { animation-delay: .85s; }
	.uwl-ledger-row.r4 span { animation-delay: 1.15s; }
	.uwl-ledger-row.r5 span { animation-delay: 1.45s; }
	.uwl-phone { opacity: 0; transform: translateY(28px) rotate(-3deg); animation: uwl-phone .7s cubic-bezier(.2, .8, .3, 1) 1.9s forwards; }
}
@keyframes uwl-write { to { clip-path: inset(0 0 0 0); } }
@keyframes uwl-phone { to { opacity: 1; transform: translateY(0) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .uwl-phone { transform: rotate(-3deg); } }

/* Statistik */
.uwl-stats { background: var(--uwl-mist); padding: 0 0 40px; }
.uwl-stats-in { display: flex; flex-wrap: wrap; gap: 12px 48px; color: var(--uwl-muted); font-size: 16px; }
.uwl-stats b { color: var(--uwl-ink); font-size: 26px; font-weight: 800; margin-right: 6px; }

/* Bahagian umum */
.uwl-section { padding: 96px 0; }
.uwl-section > .uwl-wrap > h2 { margin-bottom: 40px; }

/* Perbandingan */
.uwl-compare-table { border-top: 2px solid var(--uwl-ink); max-width: 960px; }
.uwl-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--uwl-line); }
.uwl-compare-row span:first-child { color: var(--uwl-muted); }
.uwl-compare-row span:last-child { color: var(--uwl-ink); font-weight: 600; }
.uwl-compare-head span { font-size: 15px; font-weight: 700 !important; color: var(--uwl-muted) !important; }
.uwl-compare-head span:last-child { color: var(--uwl-green) !important; }

/* Untuk siapa */
.uwl-audience h2 { margin-bottom: 12px; }
.uwl .uwl-audience-intro { margin-bottom: 36px; max-width: 52ch; }
.uwl-audience-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.uwl a.uwl-aud { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border: 1px solid var(--uwl-line); border-radius: 16px; background: #fff; color: var(--uwl-text); text-decoration: none; transition: border-color .15s, transform .15s; }
.uwl a.uwl-aud:hover { border-color: var(--uwl-green); transform: translateY(-2px); }
.uwl-aud h3 { font-size: 18px; }
.uwl-aud p { color: var(--uwl-muted); font-size: 15px; line-height: 1.5; flex: 1; }
.uwl-aud span { color: var(--uwl-green); font-weight: 600; font-size: 15px; }
.uwl a.uwl-aud:last-child { background: var(--uwl-paper); }

/* Ciri */
.uwl-features { background: var(--uwl-mist); }
.uwl-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 48px; }
.uwl-feature svg { color: var(--uwl-green); width: 26px; height: 26px; margin-bottom: 14px; }
.uwl-feature h3 { margin-bottom: 8px; }
.uwl-feature p { color: var(--uwl-muted); font-size: 16.5px; max-width: 34ch; }

/* Peranan */
.uwl-roles-in { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.uwl-roles-in h2 { margin-bottom: 16px; }
.uwl-roles-in > div > p { max-width: 38ch; }
.uwl-role-list { margin: 0; }
.uwl-role-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--uwl-line); }
.uwl-role-list > div:first-child { border-top: 1px solid var(--uwl-line); }
.uwl-role-list dt { font-weight: 700; color: var(--uwl-ink); }
.uwl-role-list dd { margin: 0; color: var(--uwl-muted); }

/* Langkah */
.uwl-steps { background: var(--uwl-ink); color: #D5E2DC; }
.uwl-steps h2, .uwl-steps h3 { color: #fff; }
.uwl-steps h2 { margin-bottom: 12px !important; }
.uwl-steps .uwl-muted { color: #9DB5AC; }
.uwl-steps-intro { margin-bottom: 48px !important; max-width: 50ch; }
.uwl-step-list { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: st; }
.uwl-step-list li { counter-increment: st; position: relative; padding-top: 64px; margin: 0; }
.uwl-step-list li::before { content: counter(st); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--uwl-gold); color: var(--uwl-gold); font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center; }
.uwl-step-list li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: -16px; height: 2px; background: repeating-linear-gradient(90deg, #3E5C54 0 6px, transparent 6px 12px); }
.uwl-step-list h3 { margin-bottom: 8px; }
.uwl-step-list p { font-size: 16px; color: #9DB5AC; }

/* Borang daftar (dalam landing) */
.uwl-signup { background: var(--uwl-mist); scroll-margin-top: 70px; }
.uwl-signup-in { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.uwl-signup-copy { position: sticky; top: 100px; }
.uwl-signup-copy h2 { margin-bottom: 16px; }
.uwl-signup-copy > p { max-width: 40ch; }
.uwl-signup-notes { list-style: none; margin: 28px 0; padding: 0; }
.uwl-signup-notes li { padding: 14px 0; border-top: 1px solid var(--uwl-line); font-size: 16.5px; color: var(--uwl-muted); margin: 0; }
.uwl-signup-notes li:last-child { border-bottom: 1px solid var(--uwl-line); }
.uwl-signup-notes b { color: var(--uwl-ink); font-weight: 600; }
.uwl-small { font-size: 15.5px; }
.uwl .uwl-signup-form .uw-root { --uw-font: var(--uwl-font); --uw-brand: var(--uwl-green); --uw-accent: var(--uwl-gold); padding: 0; font-size: 16px; }
.uwl .uwl-signup-form .uw-register .uw-form { max-width: none; margin: 0; padding: 32px; border-radius: 20px; border-color: var(--uwl-line); background: #fff; box-shadow: 0 24px 48px -32px rgba(15, 42, 36, .35); }
.uwl .uwl-signup-form .uw-btn-primary { background: var(--uwl-gold); border-color: var(--uwl-gold); color: var(--uwl-ink); font-weight: 700; min-height: 54px; font-size: 17px; }
.uwl .uwl-signup-form .uw-auth-links { display: none; }
.uwl-steps, .uwl-faq { scroll-margin-top: 70px; }
#ciri, #cara, #soalan { scroll-margin-top: 70px; }

/* Soalan lazim */
.uwl-faq-in { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 56px; align-items: start; }
.uwl-faq-list details { border-bottom: 1px solid var(--uwl-line); }
.uwl-faq-list details:first-child { border-top: 1px solid var(--uwl-line); }
.uwl-faq-list summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-weight: 600; color: var(--uwl-ink); font-size: 18px; }
.uwl-faq-list summary::-webkit-details-marker { display: none; }
.uwl-faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--uwl-green); transition: transform .2s ease; }
.uwl-faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.uwl-faq-list details p { padding: 0 40px 22px 0; color: var(--uwl-muted); max-width: 62ch; }

/* Penutup */
.uwl-final { background: var(--uwl-green); padding: 80px 0; }
.uwl-final-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.uwl-final h2 { color: #fff; max-width: 24ch; }

.uwl-foot { padding: 32px 0; border-top: 1px solid var(--uwl-line); }
.uwl-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.uwl-foot nav { display: flex; gap: 22px; }
.uwl-foot nav a { color: var(--uwl-text); text-decoration: none; font-size: 15px; }
.uwl-foot small { margin-left: auto; color: var(--uwl-muted); font-size: 14px; }

/* Responsif */
@media (max-width: 960px) {
	.uwl-nav-links { display: none; }
	.uwl-hero-in { grid-template-columns: 1fr; gap: 40px; }
	.uwl-hero { padding-top: 44px; }
	.uwl-scene { max-width: 520px; width: 100%; margin: 0 auto; }
	.uwl-feature-grid { grid-template-columns: 1fr 1fr; }
	.uwl-audience-grid { grid-template-columns: 1fr 1fr; }
	.uwl-roles-in, .uwl-faq-in, .uwl-signup-in { grid-template-columns: 1fr; gap: 28px; }
	.uwl-signup-copy { position: static; }
	.uwl-step-list { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
	.uwl-step-list li:nth-child(2)::after { display: none; }
}
@media (max-width: 600px) {
	.uwl { font-size: 17px; }
	.uwl-wrap { padding: 0 20px; }
	.uwl-nav-in { gap: 12px; min-height: 60px; }
	.uwl .uwl-login { font-size: 15px; }
	.uwl-lede { font-size: 18px; }
	.uwl-actions .uwl-btn { width: 100%; }
	.uwl-scene { min-height: 560px; }
	.uwl-ledger { width: 100%; top: 0; right: 0; }
	.uwl-ledger-head, .uwl-ledger-row { grid-template-columns: 52px 1fr 72px 72px; }
	.uwl-ledger-head { font-size: 11px; }
	.uwl-ledger::before { left: 52px; }
	.uwl-ledger-row { font-size: 16px; }
	.uwl-ledger-head span, .uwl-ledger-row span { padding: 0 6px; }
	.uwl-phone { width: 236px; top: 168px; left: 50%; margin-left: -118px; border-radius: 32px; padding: 8px; }
	.uwl-phone-screen { height: 380px; border-radius: 25px; }
	.uwl-section { padding: 68px 0; }
	.uwl-section > .uwl-wrap > h2 { margin-bottom: 28px; }
	.uwl-compare-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
	.uwl-compare-head { display: none; }
	.uwl-compare-row span:first-child { text-decoration: line-through; text-decoration-color: rgba(200, 71, 58, .5); font-size: 15.5px; }
	.uwl-feature-grid { grid-template-columns: 1fr; gap: 32px; }
	.uwl-audience-grid { grid-template-columns: 1fr; }
	.uwl-role-list > div { grid-template-columns: 1fr; gap: 2px; }
	.uwl-step-list { grid-template-columns: 1fr; }
	.uwl-step-list li { padding: 0 0 0 64px; min-height: 44px; }
	.uwl-step-list li::after { display: none; }
	.uwl-final { padding: 60px 0; }
	.uwl-foot small { margin-left: 0; width: 100%; }
	.uwl .uwl-signup-form .uw-register .uw-form { padding: 22px 18px; }
	.uwl-brand-logo.has-img img { height: 24px; max-width: 130px; }
}

@media (prefers-reduced-motion: no-preference) { html:has(.uwl) { scroll-behavior: smooth; } }

/* Pasang apps */
.uwl [hidden] { display: none !important; }
.uwl .uwl-install { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--uwl-line); background: #fff; color: var(--uwl-green); font: 600 15.5px var(--uwl-font); cursor: pointer; }
.uwl .uwl-install:hover { border-color: var(--uwl-green); }
.uwl .uwl-install svg { width: 20px; height: 20px; }
@media (max-width: 600px) { .uwl .uwl-install { width: 100%; justify-content: center; min-height: 50px; } }
@media (max-width: 380px) {
	.uwl-nav-cta { gap: 12px; }
	.uwl .uwl-brand { font-size: 18px; gap: 8px; }
	.uwl-mark, .uwl-brand-logo-mark { width: 30px; height: 30px; font-size: 17px; }
	.uwl .uwl-btn-sm { padding: 8px 14px; }
}

/* Akaun demo */
.uwl-demo { background: #fff; border: 1px solid var(--uwl-line); border-radius: 16px; padding: 20px; margin: 0 0 22px; }
.uwl-demo h3 { margin-bottom: 6px; }
.uwl-demo p { font-size: 15.5px; margin-bottom: 14px !important; }
.uwl-demo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uwl .uwl-demo-btn { display: block; border: 1.5px solid var(--uwl-line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--uwl-ink); transition: border-color .15s; }
.uwl .uwl-demo-btn:hover { border-color: var(--uwl-green); }
.uwl-demo-btn b { display: block; font-size: 16px; color: var(--uwl-green); }
.uwl-demo-btn small { display: block; font-size: 13.5px; color: var(--uwl-muted); }
@media (max-width: 380px) { .uwl-demo-btns { grid-template-columns: 1fr; } }