/* PK to BD site: header, footer and home page.
   Quiet and neutral: white and light grey, one blue accent taken from the logo,
   WhatsApp green only on WhatsApp buttons. */

.pks-home, .pks-header, .pks-footer, .pks-main, body.pk2bd-site {
	--bg: #ffffff;
	--alt: #f5f5f7;
	--ink: #1d1d1f;
	--ink-2: #6e6e73;
	--line: #e3e3e8;
	--line-2: #d2d2d7;
	--accent: #0071e3;
	--accent-2: #0062c3;
	--accent-soft: rgba(0, 113, 227, .08);
	--wa: #177a3b;
	--wa-2: #12652f;
	--radius: 18px;
	--font: "Kalpurush", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-family: var(--font);
	color: var(--ink);
	line-height: 1.6;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
.pks-home *, .pks-header *, .pks-footer *, .pks-home *::before, .pks-header *::before, .pks-footer *::before, .pks-home *::after, .pks-header *::after, .pks-footer *::after { box-sizing: border-box; }

body.pk2bd-site { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--bg); }
body.pk2bd-site *, body.pk2bd-site *::before, body.pk2bd-site *::after { box-sizing: border-box; }
body.pk2bd-site .pk2bd, body.pk2bd-site .pk2bd-modal { font-family: var(--font); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.pks-wrap { max-width: 1120px; margin: 0 auto; padding-left: 20px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: 20px; padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.pks-i { width: 1.2em; height: 1.2em; flex: none; display: block; }
.pks-home h1, .pks-home h2, .pks-home h3, .pks-footer h2 { font-family: inherit; color: var(--ink); letter-spacing: normal; text-transform: none; margin: 0; text-wrap: balance; }
.pks-home p { margin: 0; }
.pks-home ul, .pks-home ol, .pks-home dl, .pks-home dd, .pks-footer ul { list-style: none; margin: 0; padding: 0; }
.pks-home a, .pks-header a, .pks-footer a { text-decoration: none; }
.pks-accent { color: var(--accent); }
.pks-eyebrow { font-size: 15px; font-weight: 600; color: var(--ink-2); margin: 0 0 12px !important; }
.pks-lead { font-size: 18px; line-height: 1.7; color: var(--ink-2); }

/* ---------- buttons ---------- */
.pks-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1px solid transparent;
	font: 600 15px/1.2 var(--font); white-space: nowrap; cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.pks-btn .pks-i { width: 18px; height: 18px; }
.pks-btn--lg { min-height: 52px; padding: 13px 26px; font-size: 17px; }
.pks-btn--wa, .pks-btn--wa:visited { background: var(--wa); color: #fff !important; }
.pks-btn--ghost, .pks-btn--ghost:visited { background: var(--bg); border-color: var(--line-2); color: var(--ink) !important; }
.pks-btn--quiet, .pks-btn--quiet:visited { background: transparent; color: var(--accent) !important; padding-left: 14px; padding-right: 14px; }
.pks-iconbtn { width: 44px; height: 44px; border-radius: 999px; display: inline-grid; place-items: center; transition: background-color .2s; }
.pks-iconbtn .pks-i { width: 22px; height: 22px; }
.pks-iconbtn--wa, .pks-iconbtn--wa:visited { background: var(--wa); color: #fff !important; }
/* Hover only on devices with a mouse, so a tap on a phone never leaves a button stuck in its hover colours. */
@media (hover: hover) {
	.pks-btn--wa:hover, .pks-iconbtn--wa:hover { background: var(--wa-2); color: #fff !important; }
	.pks-btn--ghost:hover { background: var(--alt); border-color: var(--line-2); color: var(--ink) !important; }
	.pks-btn--quiet:hover { background: var(--accent-soft); color: var(--accent) !important; }
}
.pks-btn:active, .pks-iconbtn:active { opacity: .85; }
.pks-btn:focus-visible, .pks-iconbtn:focus-visible, .pks-home a:focus-visible, .pks-footer a:focus-visible, .pks-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- header ---------- */
.pks-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); border-bottom: 1px solid var(--line); }
body.admin-bar .pks-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .pks-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .pks-header { top: 0; } }
.pks-header__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.pks-logo { display: inline-flex; align-items: center; }
.pks-logo__img { display: block; height: 38px; width: auto; max-width: 60vw; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.pks-header__cta { display: flex; gap: 6px; align-items: center; }
.pks-install[hidden] { display: none !important; }

/* ---------- main ---------- */
.pks-main { flex: 1 0 auto; }
.pks-main--app { padding: 32px 0 64px; }
.pks-main--app > .pk2bd { padding-left: 20px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: 20px; padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* ---------- hero ---------- */
.pks-hero { background: var(--bg); padding: 88px 0 80px; }
.pks-hero__grid { display: grid; gap: 56px; align-items: center; }
.pks-hero:not(.pks-hero--photo) .pks-hero__copy { max-width: 860px; margin: 0 auto; text-align: center; }
.pks-hero--photo .pks-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.pks-hero h1 { font-size: clamp(34px, 5.6vw, 64px); line-height: 1.18; font-weight: 700; }
.pks-hero .pks-lead { margin-top: 20px !important; max-width: 640px; }
.pks-hero:not(.pks-hero--photo) .pks-lead { margin-left: auto !important; margin-right: auto !important; }
.pks-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.pks-hero:not(.pks-hero--photo) .pks-hero__actions { justify-content: center; }
.pks-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px !important; border-top: 1px solid var(--line); }
.pks-facts > div { padding: 18px 12px 0; }
.pks-facts > div + div { border-left: 1px solid var(--line); }
.pks-facts dt { font-size: 20px; font-weight: 700; color: var(--ink); }
.pks-facts dd { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.pks-cover { margin: 0; border-radius: 24px; overflow: hidden; background: var(--alt); aspect-ratio: 4 / 3; max-width: 100%; }
.pks-home .pks-cover img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; border: 0; border-radius: 0; box-shadow: none; }

/* ---------- sections ---------- */
.pks-section { padding: 88px 0; background: var(--bg); }
.pks-section--tint { background: var(--alt); }
.pks-section--tight { padding-top: 0; }
.pks-section--tint.pks-section--tight { padding-top: 88px; }
.pks-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.pks-head h2, .pks-split h2, .pks-community h2 { font-size: clamp(27px, 3.6vw, 42px); line-height: 1.25; font-weight: 700; }
.pks-center { text-align: center; margin-top: 40px; }

.pks-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.pks-features li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.6; }
.pks-features__icon { color: var(--accent); padding-top: 3px; }
.pks-features__icon .pks-i { width: 22px; height: 22px; }
.pks-features--single { grid-template-columns: minmax(0, 1fr); }

.pks-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pks-rules li { background: var(--bg); border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; gap: 10px; }
.pks-section:not(.pks-section--tint) .pks-rules li { background: var(--alt); }
.pks-rules__num { font-size: 40px; line-height: 1; font-weight: 700; color: var(--accent); }
.pks-rules h3 { font-size: 20px; font-weight: 700; margin-top: 8px !important; }
.pks-rules p { color: var(--ink-2); font-size: 16px; line-height: 1.75; }

.pks-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.pks-split__copy { position: sticky; top: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.pks-world { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.pks-world .pks-features li { font-size: 16px; }

.pks-faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.pks-faq__item { border-bottom: 1px solid var(--line-2); }
.pks-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.pks-faq summary::-webkit-details-marker { display: none; }
.pks-faq summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 300; line-height: 1; color: var(--ink-2); transition: transform .2s; }
.pks-faq__item[open] summary::after { transform: rotate(45deg); }
.pks-faq__item p { padding: 0 40px 24px 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }

.pks-community { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pks-community__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }

.pks-notice { background: var(--alt); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pks-section--tint .pks-notice { background: var(--bg); }
.pks-notice h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.pks-notice h2 .pks-i { color: var(--ink-2); }
.pks-notice p { color: var(--ink-2); font-size: 16px; line-height: 1.8; }

/* floating WhatsApp */
.pks-fab {
	position: fixed; right: 18px; right: max(18px, env(safe-area-inset-right, 0px)); bottom: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60;
	width: 54px; height: 54px; border-radius: 50%; background: var(--wa); color: #fff !important; display: grid; place-items: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18); transition: opacity .2s, transform .2s;
}
.pks-fab .pks-i { width: 28px; height: 28px; }
@media (hover: hover) { .pks-fab:hover { background: var(--wa-2); } }
.pks-fab.is-hidden { opacity: 0; transform: scale(.7); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pks-fab, .pks-faq summary::after { transition: none; } }

/* ---------- footer ---------- */
.pks-footer { background: var(--alt); border-top: 1px solid var(--line); color: var(--ink-2); padding: 56px 0 28px; font-size: 14.5px; }
.pks-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.pks-footer h2 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.pks-footer__gap { margin-top: 24px !important; }
.pks-footer .pks-logo__img { height: 32px; }
.pks-footer__brand p { margin: 14px 0 0; max-width: 320px; line-height: 1.7; }
.pks-contact { display: grid; gap: 10px; }
.pks-contact li { display: flex; align-items: center; gap: 10px; }
.pks-contact .pks-i { width: 17px; height: 17px; color: var(--ink-2); }
.pks-contact a, .pks-contact a:visited { color: var(--ink) !important; }
@media (hover: hover) { .pks-contact a:hover, .pks-top:hover { color: var(--accent) !important; } }
.pks-pay { display: flex; flex-wrap: wrap; gap: 8px; }
.pks-pay li { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-weight: 600; color: var(--ink); font-size: 13.5px; }
.pks-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line-2); margin-top: 40px; padding-top: 20px; font-size: 13.5px; }
.pks-top, .pks-top:visited { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2) !important; }
.pks-top .pks-i { width: 16px; height: 16px; }

/* ---------- inside the Android app ---------- */
html.pk2bd-in-app .pks-footer, html.pk2bd-in-app .pks-fab, html.pk2bd-in-app .pks-install { display: none !important; }
html.pk2bd-in-app .pks-header { position: sticky; top: 0; }

/* ---------- Elementor ---------- */
/* PK to BD widgets are full bands: no gaps between them, whatever the kit's widget spacing is. */
.elementor-element[class*="elementor-widget-pk2bd-"] { margin-block-end: 0 !important; }
.pks-app-wrap { padding-block: 32px 64px; padding-left: 20px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: 20px; padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.pks-editor-note { max-width: 1100px; margin: 0 auto; background: var(--alt); border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 28px; }
.pks-editor-note p { margin: 4px 0 0; color: var(--ink-2); }

/* ---------- tablet ---------- */
@media (max-width: 960px) {
	.pks-hero { padding: 64px 0 56px; }
	.pks-hero--photo .pks-hero__grid, .pks-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.pks-split__copy { position: static; }
	.pks-section { padding: 68px 0; }
	.pks-section--tint.pks-section--tight { padding-top: 68px; }
	.pks-rules { grid-template-columns: minmax(0, 1fr); }
	.pks-footer__grid { grid-template-columns: 1fr 1fr; }
	.pks-footer__brand { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
	.pks-wrap { padding-left: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: 16px; padding-right: max(16px, env(safe-area-inset-right, 0px)); }
	.pks-header__in { min-height: 56px; }
	.pks-logo__img { height: 30px; }
	.pks-header__cta .pks-btn--quiet { padding: 8px 12px; font-size: 15px; }
	.pks-hero { padding: 44px 0 44px; }
	.pks-lead { font-size: 16.5px; }
	.pks-hero__actions .pks-btn { flex: 1 1 100%; }
	.pks-facts { margin-top: 36px !important; }
	.pks-facts > div { padding: 14px 6px 0; }
	.pks-facts dt { font-size: 16px; }
	.pks-facts dd { font-size: 12.5px; }
	.pks-section { padding: 52px 0; }
	.pks-section--tint.pks-section--tight { padding-top: 52px; }
	.pks-head { margin-bottom: 32px; }
	.pks-features { grid-template-columns: minmax(0, 1fr); }
	.pks-features li { font-size: 16px; padding: 15px 0; }
	.pks-rules li { padding: 24px 22px; }
	.pks-faq summary { font-size: 16.5px; padding: 18px 0; }
	.pks-faq__item p { padding-right: 0; font-size: 15.5px; }
	.pks-notice { padding: 22px; }
	.pks-community__links .pks-btn { flex: 1 1 100%; }
	.pks-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------- privacy policy ---------- */
.pks-legal .pks-wrap { max-width: 760px; }
.pks-legal h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 700; margin-bottom: 4px !important; }
.pks-legal h2 { font-size: 21px; font-weight: 700; margin: 32px 0 10px !important; }
.pks-legal p, .pks-legal li { font-size: 16.5px; line-height: 1.75; color: var(--ink); }
.pks-legal ul, .pks-legal ol { list-style: revert !important; padding-left: 22px !important; display: grid; gap: 6px; }
.pks-legal p + p { margin-top: 12px !important; }
.pks-legal a { color: var(--accent) !important; text-decoration: underline !important; }
.pks-legal__date { color: var(--ink-2) !important; font-size: 14px !important; margin-bottom: 20px !important; }
.pks-footer__bottom { flex-wrap: wrap; }

/* v4.3: every section is a card 10px from the screen edges and 10px from the next one; footer too.
   Payment methods are a plain list lined up with the contact rows. */
body.pk2bd-cards { background: var(--alt) !important; }
body.pk2bd-cards .pks-main--home { background: var(--alt); padding-top: 10px; }
body.pk2bd-cards .pks-home > .pks-hero, body.pk2bd-cards .pks-home > .pks-section, .pks-footer {
	margin: 0 10px 10px; margin-left: max(10px, env(safe-area-inset-left, 0px)); margin-right: max(10px, env(safe-area-inset-right, 0px));
	border-radius: 18px; border: 1px solid var(--line); background: var(--bg);
}
body.pk2bd-cards .pks-home > .pks-section--tint { background: var(--bg); }
body.pk2bd-cards .pks-home > .pks-section--tight { padding-top: 88px; }
.pks-pay { display: grid; gap: 10px; }
.pks-footer .pks-pay li { background: none; border: 0; border-radius: 0; padding: 0; font-weight: inherit; font-size: inherit; color: inherit; }
@media (max-width: 960px) { body.pk2bd-cards .pks-home > .pks-section--tight { padding-top: 68px; } }
@media (max-width: 640px) {
	body.pk2bd-cards .pks-home > .pks-hero, body.pk2bd-cards .pks-home > .pks-section { padding-top: 36px; padding-bottom: 36px; }
	.pks-footer { padding-top: 36px; }
	body.pk2bd-cards .pks-home .pks-wrap, .pks-footer .pks-wrap { padding-left: 14px; padding-right: 14px; }
}

/* v5: Apple-style finish. Light grey page, borderless white tiles, small orange section
   labels above big headlines, blue outline secondary buttons and "›" links. */
body.pk2bd-cards .pks-home > .pks-hero, body.pk2bd-cards .pks-home > .pks-section, .pks-footer { border: 0; border-radius: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.pks-eyebrow { color: #b64400; font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.pks-home h2 { font-weight: 700; line-height: 1.2; }
.pks-btn--ghost, .pks-btn--ghost:visited { background: transparent; border-color: var(--accent); color: var(--accent) !important; }
.pks-header .pks-btn--quiet { font-weight: 600; }
.pks-footer a { color: var(--ink); }
.pks-footer h2 { color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
@media (hover: hover) { .pks-btn--ghost:hover { background: var(--accent-soft) !important; } }
@media (max-width: 640px) { body.pk2bd-cards .pks-home > .pks-hero, body.pk2bd-cards .pks-home > .pks-section, .pks-footer { border-radius: 20px; } }
/* v5.6: apple.com neutral colours: white, greys and a rich near-black; no blue. */
.pks-home, .pks-header, .pks-footer, .pks-main, body.pk2bd-site { --accent: #1d1d1f; --accent-2: #000; --accent-soft: #f5f5f7; }
.pks-header .pks-btn--quiet { color: #1d1d1f !important; }
.pks-btn--ghost, .pks-btn--ghost:visited { border-color: #d2d2d7; color: #1d1d1f !important; }
@media (hover: hover) { .pks-btn--ghost:hover { background: #f5f5f7 !important; } }
.pks-accent { color: #6e6e73 !important; }