:root { --page-max-width: 1280px; --section-space-desktop: 72px; --section-space-tablet: 56px; --section-space-mobile: 44px; --color-primary: #0BA56A; --color-primary-dark: #078857; --color-primary-soft: #EAF7EF; --color-primary-text: #111B24; --color-secondary-text: #53635f; --color-stroke: #DCE1E5; --color-bg: #FFFFFF; --color-bg-soft: #fafafa; --color-ocean: #0B3D3B; --color-ocean-dark: #072625; --font-primary: "Inter", sans-serif; --font-heading: "Montserrat", sans-serif; --text-paragraph-size: 17px; --radius-btn: 8px; --radius-card: 16px; --radius-pill: 999px; --transition-fast: 0.18s ease; --transition-base: 0.25s ease; }
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-primary); font-size: var(--text-paragraph-size); line-height: 1.65; color: var(--color-primary-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
.tg-main-wrap { display: flex; flex-direction: column; width: 100%; max-width: 100%; overflow-x: clip; }
.tg-main-wrap h1, .tg-main-wrap p { margin: 0; }
.internal-links, a.link-inline { color: #008352 !important; font-weight: 700 !important; }
/* ── LAYOUT & CONTAINERS ── */
.container-xl-custom, .tg-container { max-width: var(--page-max-width); margin-left: auto; margin-right: auto; padding-inline: 24px; width: 100%; }
.section, .tg-section { padding-top: var(--section-space-desktop); padding-bottom: var(--section-space-desktop); position: relative; }
[data-section-surface="white"], .section.bg-white, .tg-section-white, .bg-white { background-color: #ffffff !important; }
[data-section-surface="soft"], .section.bg-soft, .tg-section-soft, .bg-soft { background-color: #fafafa !important; }
/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .sub-h1, .main-heading, .sub-heading { font-family: var(--font-heading) !important; letter-spacing: -0.015em !important; color: var(--color-primary-text); margin-top: 0; }
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .sub-h1, .main-heading, .sub-heading) :is(a, span, strong, b, em) { font-family: inherit !important; }
h1 { font-size: 44px; line-height: 1.18; font-weight: 700; letter-spacing: 0 !important; color: var(--color-primary-text); margin-bottom: 20px; }
h2, .main-heading { font-size: 36px; line-height: 1.22; font-weight: 700; letter-spacing: 0 !important; color: #173b36; margin-bottom: 14px; }
h3, .sub-heading, .h3 { font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: 0 !important; color: var(--color-primary-text); margin-bottom: 10px; }
h4 { font-size: 18px; line-height: 1.38; font-weight: 700; color: #173b36; margin-bottom: 8px; }
p, .paragraph { font-size: var(--text-paragraph-size); line-height: 1.65; font-weight: 400; color: #53635f; margin-top: 0; margin-bottom: 16px; }
.body-large { font-size: 18px; line-height: 1.7; color: #4a5c57; }
.section-header { max-width: 860px; margin-bottom: 48px; }
.section-header.text-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header h2 { font-size: 36px; line-height: 1.22; font-weight: 700; color: #173b36; margin-bottom: 14px; letter-spacing: 0 !important; }
.section-header p, .section-header .paragraph { font-size: 17px; line-height: 1.68; color: #53635f; margin: 0; }
.section-header.text-center p, .section-header.text-center .paragraph { margin-inline: auto; max-width: 820px; }
/* ── BUTTONS ── */
.btn-tg-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 28px; border-radius: var(--radius-pill); background: var(--color-primary); color: #FFFFFF !important; border: 1px solid var(--color-primary); font-size: 15.5px; font-weight: 600; text-decoration: none; transition: all var(--transition-base); white-space: nowrap; box-shadow: 0 8px 20px rgba(11, 165, 106, 0.22); cursor: pointer; }
.btn-tg-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11, 165, 106, 0.32); }
.btn-tg-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: var(--radius-pill); background: #FFFFFF; color: #173b36 !important; border: 1.5px solid var(--color-stroke); font-size: 15.5px; font-weight: 600; text-decoration: none; transition: all var(--transition-base); white-space: nowrap; cursor: pointer; }
.btn-tg-secondary:hover { border-color: var(--color-primary); color: var(--color-primary) !important; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0, 40, 22, 0.04); }
/* ── NAVBAR THEME OVERRIDES ── */
#site-header { display: block; min-height: 0 !important; position: relative !important; z-index: 1050 !important; }
.page-ppwr-compliance #site-header .navbar, .page-ppwr-compliance .navbar { background: rgba(5, 35, 32, .6) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid rgba(255, 255, 255, .12) !important; color: #fff !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important; }
.page-ppwr-compliance #site-header .navbar .nav-link, .page-ppwr-compliance .navbar .nav-link { color: #ffffff !important; font-weight: 500; transition: color 0.2s ease; }
.page-ppwr-compliance #site-header .navbar .nav-link:hover, .page-ppwr-compliance #site-header .navbar .nav-link:focus { color: #57e7b6 !important; }
.page-ppwr-compliance #site-header .navbar .nav-link.active, .page-ppwr-compliance #site-header .navbar .nav-link.show, .page-ppwr-compliance #site-header .navbar .nav-link[aria-expanded="true"], .page-ppwr-compliance #site-header .navbar .nav-item.active > .nav-link, .page-ppwr-compliance #site-header .navbar .nav-item.show > .nav-link, .page-ppwr-compliance #site-header .navbar .nav-item.dropdown.show > .nav-link, .page-ppwr-compliance #site-header .navbar .dropdown-toggle.active, .page-ppwr-compliance #site-header .navbar .dropdown-toggle.show, .page-ppwr-compliance #site-header .navbar .dropdown-toggle[aria-expanded="true"], .page-ppwr-compliance .navbar .nav-link.active, .page-ppwr-compliance .navbar .dropdown-toggle.active { color: #ffffff !important; }
.page-ppwr-compliance #site-header .navbar .dropdown-toggle::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle.active::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle.show::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle[aria-expanded="true"]::after, .page-ppwr-compliance .navbar .dropdown-toggle::after, .page-ppwr-compliance .navbar .dropdown-toggle.active::after, .page-ppwr-compliance .navbar .dropdown-toggle.show::after, .page-ppwr-compliance .navbar .dropdown-toggle[aria-expanded="true"]::after { color: #ffffff !important; border-top-color: #ffffff !important; opacity: 1 !important; }
.page-ppwr-compliance #site-header .navbar-light .navbar-nav .nav-item .nav-link.active::before, .page-ppwr-compliance #site-header .navbar-light .navbar-nav .nav-item .nav-link:hover::before, .page-ppwr-compliance #site-header .navbar-light .navbar-nav .nav-item .nav-link:focus::before { background: #57e7b6 !important; }
.page-ppwr-compliance #site-header .navbar-toggler { border-color: rgba(255, 255, 255, 0.3) !important; }
.page-ppwr-compliance #site-header .navbar-toggler-icon { filter: invert(1) brightness(2); }
.page-ppwr-compliance #site-header .navbar-brand img { content: url("/assets/images/logo-white.webp") !important; }
.page-ppwr-compliance #site-header .navbar .dropdown-menu { background: rgba(5, 35, 32, 0.94) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(87, 231, 182, 0.2) !important; border-radius: 18px !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important; z-index: 1060 !important; }
.page-ppwr-compliance #site-header .navbar .dropdown-menu .dropdown-item { position: relative !important; display: flex !important; min-height: 52px !important; align-items: center !important; padding: 12px 46px 12px 16px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; white-space: normal !important; transition: all 0.2s ease !important; }
.page-ppwr-compliance #site-header .navbar .dropdown-menu .dropdown-item::after { position: absolute !important; top: 50% !important; right: 14px !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; background-color: rgba(87, 231, 182, 0.14) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2357e7b6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9.5 4.5 13 8l-3.5 3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; content: "" !important; transform: translateY(-50%) !important; transition: all 0.2s ease !important; }
.page-ppwr-compliance #site-header .navbar .dropdown-menu .dropdown-item:hover, .page-ppwr-compliance #site-header .navbar .dropdown-menu .dropdown-item:focus { background: rgba(87, 231, 182, 0.14) !important; border-color: rgba(87, 231, 182, 0.35) !important; color: #57e7b6 !important; transform: translateX(2px) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3) !important; }
/* ── HERO SECTION ── */
.tg-hero, .hero-section { overflow: hidden; padding-top: 140px !important; padding-bottom: 70px !important; background-color: #031b1a; background-image: linear-gradient(90deg, rgba(3, 27, 26, 0.88) 0%, rgba(3, 27, 26, 0.74) 50%, rgba(3, 27, 26, 0.42) 100%), url("../images/ppwr-compliance-software/ppwr-hero-banner.webp"); background-size: cover; background-position: center right; background-repeat: no-repeat; border-bottom: 1px solid #052a28; }
.tg-hero .tg-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 48px; align-items: center; }
.tg-hero-content { flex: 1; max-width: 920px; }
.tg-hero h1 { font-family: var(--font-heading) !important; font-size: 44px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: #ffffff !important; margin-top: 0; margin-bottom: 18px !important; }
.tg-hero p, .tg-hero .body-large { color: #e2ece8 !important; font-size: 18px !important; line-height: 1.68 !important; margin-bottom: 24px !important; max-width: 600px; }
.tg-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 26px; }
.btn-tg-primary { display: inline-flex; align-items: center; justify-content: center; background: #00d084; color: #031b1a !important; font-family: var(--font-heading); font-size: 15px; font-weight: 700; padding: 13px 26px; border-radius: 999px; text-decoration: none !important; transition: all 0.2s ease; box-shadow: 0 4px 14px rgba(0, 208, 132, 0.4); border: none; cursor: pointer; }
.btn-tg-primary:hover { background: #57e7b6; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 208, 132, 0.5); color: #031b1a !important; }
.btn-tg-secondary { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); color: #ffffff !important; font-family: var(--font-heading); font-size: 15px; font-weight: 600; padding: 13px 24px; border-radius: 999px; text-decoration: none !important; border: 1px solid rgba(255, 255, 255, 0.35); transition: all 0.2s ease; cursor: pointer; }
.btn-tg-secondary:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-2px); color: #ffffff !important; }
.tg-trust-strip { display: flex; flex-wrap: wrap; align-items: center; border-radius: var(--radius-card); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); margin-top: 28px; backdrop-filter: blur(10px); }
.tg-trust-item { flex: 1; min-width: 140px; padding: 14px 16px; border-right: 1px solid rgba(255, 255, 255, 0.12); text-align: center; font-size: 13px; font-weight: 600; color: #cde6dd; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tg-trust-item:last-child { border-right: none; }
.tg-trust-item i, .tg-trust-item svg { color: #00d084; flex-shrink: 0; }
/* ── HERO DEMO FORM ── */
.hero-form-panel { flex: 0 0 460px; max-width: 460px; width: 100%; scroll-margin-top: 110px; }
.ppwr-demo-card { width: 100%; max-width: 480px; margin-left: auto; background: rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(15, 36, 56, .06), 0 8px 24px rgba(15, 36, 56, .06), 0 20px 48px rgba(0, 0, 0, 0.35) !important; font-family: inherit; text-align: left; overflow: hidden; padding: 28px 26px 24px !important; }
.ppwr-demo-card .demo-title { margin: 0 0 7px !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #ffffff !important; }
.ppwr-demo-card .demo-subtext { margin: 0 0 17px !important; font-size: 14px !important; line-height: 1.5 !important; color: #c4ded7 !important; }
.demo-field { margin-bottom: 12px !important; }
.demo-field label { display: block !important; margin-bottom: 5px !important; color: #e2f1ec !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; }
.demo-field input, .demo-field textarea { display: block !important; width: 100% !important; margin: 0 !important; padding: 10px 12px !important; border: 1.5px solid rgba(255, 255, 255, 0.2) !important; border-radius: 8px !important; outline: 0 !important; background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; font: inherit !important; font-size: 14px !important; line-height: 1.4 !important; box-shadow: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.demo-field textarea { min-height: 82px !important; height: 82px !important; resize: vertical; }
.demo-field input::placeholder, .demo-field textarea::placeholder { color: rgba(196, 222, 215, 0.6) !important; }
.demo-field input:focus, .demo-field textarea:focus { outline: 0 !important; border-color: #57e7b6 !important; background: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 0 0 3px rgba(87, 231, 182, 0.25) !important; color: #ffffff !important; }
.demo-field.invalid input, .demo-field.invalid textarea, .demo-field input[aria-invalid="true"], .demo-field textarea[aria-invalid="true"] { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25) !important; }
.error-msg { display: none; margin-top: 5px !important; color: #fca5a5 !important; font-size: 12px !important; line-height: 1.3 !important; }
.demo-field.invalid .error-msg { display: block !important; }
#ppwrSubmitBtn, .ppwr-demo-card button[type="submit"] { display: block !important; width: 100% !important; margin: 6px 0 0 !important; padding: 13px 20px !important; border: 0 !important; border-radius: 9px !important; background: #008352 !important; color: #ffffff !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.35 !important; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 131, 82, 0.4) !important; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
#ppwrSubmitBtn:hover, .ppwr-demo-card button[type="submit"]:hover { background: #009960 !important; box-shadow: 0 6px 22px rgba(0, 131, 82, 0.55) !important; transform: translateY(-1px); }
#ppwrSubmitBtn:disabled { background: rgba(0, 131, 82, 0.45) !important; color: rgba(255, 255, 255, 0.6) !important; cursor: not-allowed; box-shadow: none !important; }
.ppwr-demo-card .fine-print, .fine-print { margin: 10px 0 0 !important; color: #9ebdb5 !important; font-size: 11px !important; line-height: 1.45 !important; text-align: center; }
.form-response { min-height: 0 !important; margin-top: 8px !important; color: #fca5a5 !important; font-size: 13px !important; line-height: 1.4 !important; text-align: center; }
.honeypot { position: absolute; left: -9999px; top: -9999px; }
/* ── CLIENT STRIP ── */
.tg-client-strip { width: 100%; max-width: 100%; padding: 26px 0; background: #fff; border-top: 0; border-bottom: 1px solid #dce5e0; overflow: hidden; margin: 0; }
.tg-client-logo-marquee { display: flex; align-items: center; width: max-content; gap: 0; margin: 0; padding: 0; animation: tg-client-marquee 40s linear infinite; will-change: transform; }
.tg-client-logo-marquee:hover, .tg-client-logo-marquee:focus-within { animation-play-state: paused; }
.tg-client-logo-row { display: flex; align-items: center; gap: 100px; padding-right: 100px; flex: 0 0 auto; }
.tg-client-logo { display: flex; align-items: center; justify-content: center; min-height: 52px; }
.tg-client-logo img { max-height: 44px; opacity: 0.85; display: block; }
@keyframes tg-client-marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
/* ── TABLE OF CONTENTS ── */
.tg-toc-section { display: none; background: #fbfdfc; border-bottom: 1px solid var(--color-stroke); padding: 16px 0; }
.tg-toc-card { border: 1px solid rgba(11, 165, 106, 0.25); border-radius: 14px; background: #ffffff; box-shadow: 0 4px 16px rgba(0, 40, 22, 0.04); padding: 14px 20px; overflow: hidden; }
.tg-toc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0; background: none; border: none; font-family: inherit; font-size: 15px; font-weight: 700; color: #173b36; cursor: pointer; }
.tg-toc-trigger-text { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: #173b36; }
.tg-toc-trigger-text svg { width: 22px; height: 22px; color: var(--color-primary); flex-shrink: 0; }
.tg-toc-arrow { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: #eaf7ef; color: var(--color-primary-dark); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.tg-toc-arrow svg { width: 16px; height: 16px; stroke: currentColor; }
.tg-toc-card.active .tg-toc-arrow { transform: rotate(180deg); }
.tg-toc-body { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
#toc-list-container.toc-expanded { max-height: 1400px; }
.tg-toc-nav { margin-top: 14px; padding: 14px 0 2px 0; border-top: 1px solid #e6f5ee; border-left: none; }
.tg-toc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; }
.tg-toc-item { margin: 0; padding: 0; }
.tg-toc-link { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #475467; text-decoration: none; padding: 4px 0; line-height: 1.4; transition: color var(--transition-fast); }
.tg-toc-link::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.tg-toc-link:hover, .tg-toc-link:focus { color: var(--color-primary) !important; }
.tg-toc-link.active, .tg-toc-link:active, .tg-toc-item.active .tg-toc-link { color: #ffffff !important; background: var(--color-primary); border-radius: 6px; padding: 4px 8px; }
.tg-toc-link.active::before, .tg-toc-link:active::before, .tg-toc-item.active .tg-toc-link::before { background: #ffffff !important; }
/* ── SECTION: DISCONNECTED PACKAGING DATA ── */
.data-gaps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.gap-card { background: #ffffff; border: 1.5px solid #e1eee7; border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(7, 38, 37, 0.035); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.gap-card:hover { transform: translateY(-4px); border-color: #0ba56a; box-shadow: 0 14px 30px rgba(11, 165, 106, 0.12); }
.gap-card-num { width: 38px; height: 38px; border-radius: 50%; background: #eaf7ef; color: #078857; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.gap-card h3, .gap-card-title { font-size: 19px; font-weight: 700; color: #173b36; margin-bottom: 10px; line-height: 1.35; }
.gap-card p { font-size: 15px; line-height: 1.62; color: #53635f; margin: 0; }
.gap-change-banner { margin-top: 36px; background: linear-gradient(135deg, #072625 0%, #0d3d3b 100%); border-radius: 18px; padding: 32px 36px; color: #ffffff; display: flex; align-items: center; justify-content: space-between; gap: 28px; box-shadow: 0 12px 32px rgba(7, 38, 37, 0.18); border: 1px solid rgba(11, 165, 106, 0.3); }
.gap-change-text h3 { font-size: 22px; font-weight: 700; color: #ffffff; margin-bottom: 8px; }
.gap-change-text p { font-size: 16px; color: #cde6dd; margin: 0; }
/* ── SECTION: WHAT IS PPWR COMPLIANCE SOFTWARE ── */
.overview-top-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.overview-copy-wrap h2 { font-size: 36px; font-weight: 700; color: #173b36; margin-bottom: 16px; line-height: 1.22; }
.overview-copy-wrap p { font-size: 17px; line-height: 1.68; color: #53635f; margin-bottom: 20px; }
.overview-copy-wrap p:last-child { margin-bottom: 0; }
.definition-callout-box { background: #f2faf6; padding: 26px 30px; border-radius: 16px; border-left: 4px solid #0ba56a; margin-top: 40px; margin-bottom: 0; border-top: 1px solid #e1eee7; border-right: 1px solid #e1eee7; border-bottom: 1px solid #e1eee7; box-shadow: 0 4px 18px rgba(7, 38, 37, 0.03); width: 100%; }
.definition-callout-box h3, .definition-callout-title { font-size: 20px; font-weight: 700; color: #078857; margin-bottom: 16px; }
.definition-callout-box ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.definition-callout-box li { font-size: 15px; line-height: 1.55; color: #173b36; display: flex; align-items: flex-start; gap: 10px; }
.definition-callout-box li svg { flex-shrink: 0; margin-top: 3px; }
.definition-callout-box li strong { color: #078857; font-weight: 700; }
.definition-callout-box li:nth-child(3), .definition-callout-box li.callout-item-full { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .definition-callout-box { margin-top: 14px; padding: 12px 14px; border-radius: 12px; }
  .definition-callout-box h3, .definition-callout-title { font-size: 14px !important; margin-bottom: 8px !important; }
  .definition-callout-box ul { grid-template-columns: 1fr; gap: 8px; }
  .definition-callout-box li { font-size: 12px; line-height: 1.4; gap: 8px; }
  .definition-callout-box li:nth-child(3), .definition-callout-box li.callout-item-full { grid-column: auto; }
}
.overview-media-wrap { width: 100%; border-radius: 0; overflow: visible; box-shadow: none; border: none; background: transparent; transition: transform 0.3s ease; display: flex; justify-content: flex-end; align-items: center; }
.overview-media-wrap:hover { transform: translateY(-3px); }
.overview-media-wrap img { width: 100%; max-width: 680px; height: auto; object-fit: contain; display: block; border-radius: 0; }
.commodity-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.commodity-pill { background: #eaf7ef; color: #078857; font-size: 13.5px; font-weight: 700; padding: 6px 14px; border-radius: 50px; border: 1px solid #c8e7d7; }
/* ── SECTION: INTERACTIVE READINESS ASSESSMENT QUIZ ── */
.assess-quiz-container { background: #ffffff; border: 1.5px solid #dbeae2; border-radius: 24px; padding: 36px 40px; box-shadow: 0 16px 44px rgba(7, 38, 37, 0.06); margin-top: 36px; max-width: 1040px; margin-inline: auto; }
.assess-quiz-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1.5px solid #edf4f0; padding-bottom: 20px; margin-bottom: 24px; gap: 16px; }
.assess-quiz-progress { display: inline-flex; align-items: center; gap: 8px; background: #f0fdf4; border: 1.5px solid #c4eed5; color: #078857; font-size: 13.5px; font-weight: 700; padding: 6px 16px; border-radius: 999px; letter-spacing: -0.01em; box-shadow: 0 2px 6px rgba(11, 165, 106, 0.06); }
.assess-quiz-reset { background: #ffffff; border: 1.5px solid #dbeae2; border-radius: 999px; padding: 7px 18px; font-size: 13px; font-weight: 600; color: #53635f; cursor: pointer; text-decoration: none !important; transition: all 0.2s ease; }
.assess-quiz-reset:hover { border-color: #0ba56a; background: #f2faf6; color: #078857; }
.assess-questions-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.assess-question-item { background: #ffffff; border: 1.5px solid #e1eee7; border-radius: 16px; padding: 16px 20px 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 6px rgba(7, 38, 37, 0.02); }
.assess-question-item:hover { border-color: #b5e0cb; background: #fbfdfc; box-shadow: 0 6px 18px rgba(11, 165, 106, 0.06); transform: translateY(-1px); }
.assess-question-item.answered { border-color: #0ba56a; background: #f8fdfa; box-shadow: 0 4px 14px rgba(11, 165, 106, 0.06); }
.assess-q-title { font-size: 15.5px; font-weight: 700; color: #173b36; margin-bottom: 0; display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; line-height: 1.35; }
.assess-q-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #eaf7ef; color: #078857; font-size: 13.5px; font-weight: 800; flex-shrink: 0; border: 1.5px solid #d0ecdd; transition: all 0.25s ease; }
.assess-question-item.answered .assess-q-num { background: #0ba56a; border-color: #0ba56a; color: #ffffff; box-shadow: 0 2px 8px rgba(11, 165, 106, 0.35); }
.assess-options-row { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; background: #f1f6f3; padding: 5px; border-radius: 999px; border: 1px solid #dfeae3; }
.assess-option-btn { background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 7px 18px; font-size: 13.5px; font-weight: 600; color: #4a615a; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); user-select: none; white-space: nowrap; }
.assess-option-btn:hover { color: #078857; background: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); }
.assess-option-btn.selected { background: #0ba56a; border-color: #0ba56a; color: #ffffff !important; font-weight: 700; box-shadow: 0 3px 10px rgba(11, 165, 106, 0.32); }
.assess-result-card { margin-top: 32px; padding: 28px 34px; border-radius: 18px; background: #f0fbf5; border: 2px solid #0ba56a; display: none; box-shadow: 0 12px 36px rgba(11, 165, 106, 0.1); animation: fadeInAssess 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.assess-result-card.active { display: block; }
.assess-result-card.state-ready { background: #f0fbf5; border-color: #0ba56a; }
.assess-result-card.state-ready .assess-result-title { color: #078857; }
.assess-result-card.state-improvement { background: #fefce8; border-color: #eab308; }
.assess-result-card.state-improvement .assess-result-title { color: #a16207; }
.assess-result-card.state-risk { background: #fef2f2; border-color: #ef4444; }
.assess-result-card.state-risk .assess-result-title { color: #dc2626; }
@media (max-width: 991px) {
  .assess-question-item { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 18px; }
  .assess-options-row { width: 100%; display: flex; justify-content: stretch; }
  .assess-option-btn { flex: 1; text-align: center; padding: 8px 12px; font-size: 13px; }
}
.assess-result-top { display: flex; align-items: center; margin-bottom: 8px; }
.assess-result-status-icon { display: none !important; }
.assess-result-title { font-size: 22px; font-weight: 700; color: #173b36; margin: 0; letter-spacing: -0.01em; }
.assess-result-desc { font-size: 15.5px; line-height: 1.55; color: #3e534d; margin: 0; }
.assess-result-actions { display: flex; align-items: center; gap: 16px; }
/* ── SECTION 4: 8 KEY FEATURES GRID ── */
#key-features { position: relative; background: radial-gradient(circle at 50% 0%, rgba(11, 165, 106, 0.05) 0%, transparent 60%), linear-gradient(180deg, #ffffff 0%, #fbfdfc 45%, #f4f9f6 100%) !important; padding: 96px 0; }
#key-features .section-header { max-width: 840px; margin-inline: auto; margin-bottom: 48px; }
#key-features .section-header h2 { letter-spacing: -0.4px; margin-bottom: 16px; line-height: 1.25; }
#key-features .section-header p { font-size: 15.5px; line-height: 1.7; color: #4b635d; margin: 0; }
.features-grid-8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 0; }
.feature-card-item { position: relative; background: #ffffff; border: 1.5px solid #e1eee7; border-radius: 20px; padding: 30px 24px 26px 24px; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(7, 38, 37, 0.04); transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; z-index: 1; }
/* Ambient glow on hover */
.feature-card-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.5px; background: linear-gradient(90deg, #0ba56a, #57e7b6); opacity: 0; transform: scaleX(0.25); transform-origin: left; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2; }
.feature-card-item:hover { transform: translateY(-6px); border-color: #0ba56a; box-shadow: 0 20px 42px -10px rgba(11, 165, 106, 0.16), 0 4px 14px rgba(7, 38, 37, 0.04); }
.feature-card-item:hover::before { opacity: 1; transform: scaleX(1); }
.feature-card-icon { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #eef9f3 0%, #e0f6eb 100%); border: 1.5px solid #bce6cf; color: #078857; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(11, 165, 106, 0.08); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.feature-card-item:hover .feature-card-icon { background: #0ba56a; color: #ffffff; border-color: #0ba56a; box-shadow: 0 6px 18px rgba(11, 165, 106, 0.35); transform: scale(1.08) rotate(-2deg); }
.feature-card-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s ease; }
.feature-card-item:hover .feature-card-icon svg { transform: scale(1.05); }
.feature-card-item h3 { position: relative; z-index: 1; font-size: 18.5px; font-weight: 700; color: #072625; margin-bottom: 12px; line-height: 1.36; letter-spacing: -0.2px; transition: color 0.25s ease; }
.feature-card-item:hover h3 { color: #0ba56a; }
.feature-card-item p { position: relative; z-index: 1; font-size: 14.5px; line-height: 1.68; color: #4b635d; margin: 0; flex-grow: 1; }
.feature-card-item p a { color: #0ba56a; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.feature-card-item p a:hover { color: #078857; }
/* ── SECTION: HOW PPWR WORKS SCROLLER (EUDR-STYLE BLENDED BG & COLORS) ── */
#how-it-works, .how-it-works-section { position: relative; background-color: #f7fcf9; background-image: linear-gradient(180deg, rgba(247, 252, 249, 0.90) 0%, rgba(247, 252, 249, 0.82) 40%, rgba(247, 252, 249, 0.68) 100%), url("../images/ppwr-compliance-software/how-ppwr-works-bg.webp") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; padding: 88px 0; overflow: hidden; }
#how-it-works .section-header { position: relative; z-index: 2; max-width: 860px; margin: 0 auto 40px; padding: 0; background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-align: center; }
#how-it-works .section-header h2 { line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 12px; text-align: center; }
#how-it-works .section-header p { font-size: 16px; color: #244b40 !important; line-height: 1.65; max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; font-weight: 500; }
.workflow-scroller-container { position: relative; margin-top: 36px; }
.workflow-scroller-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 16px 8px 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.workflow-scroller-track::-webkit-scrollbar { display: none; }
.workflow-step-card { flex: 0 0 calc((100% - 48px) / 3); min-width: 340px; max-width: 400px; scroll-snap-align: start; position: relative; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.88); border-radius: 18px; padding: 28px 24px 24px; display: flex; flex-direction: column; transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease; box-shadow: 0 8px 24px rgba(7, 38, 37, 0.05); cursor: pointer; overflow: hidden; }
.workflow-step-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.5px; background: linear-gradient(90deg, #0ba56a, #34d399); opacity: 0; transition: opacity 0.3s ease; border-radius: 18px 18px 0 0; }
.workflow-step-card:hover, .workflow-step-card.active { transform: translateY(-5px); background: rgba(255, 255, 255, 0.94); border-color: rgba(11, 165, 106, 0.5); box-shadow: 0 14px 34px rgba(11, 165, 106, 0.12); }
.workflow-step-card:hover::before, .workflow-step-card.active::before { opacity: 1; }
.workflow-step-badge { font-size: 13px; font-weight: 800; letter-spacing: 0.3px; color: #0ba56a; background: rgba(226, 244, 234, 0.95); border: 1.5px solid rgba(167, 222, 192, 0.75); display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 68px; height: 32px; padding: 0 12px; border-radius: 10px; white-space: nowrap; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(11, 165, 106, 0.08); transition: all 0.25s ease; }
.workflow-step-card:hover .workflow-step-badge, .workflow-step-card.active .workflow-step-badge { background: #0ba56a; color: #ffffff; border-color: #0ba56a; box-shadow: 0 4px 12px rgba(11, 165, 106, 0.25); }
.workflow-content-wrap { display: flex; flex-direction: column; flex-grow: 1; }
.workflow-content-wrap h3 { font-family: "Montserrat", sans-serif !important; font-size: 18px; font-weight: 700; color: #083327 !important; margin-bottom: 10px; line-height: 1.35; letter-spacing: -0.01em; transition: color 0.25s ease; }
.workflow-step-card:hover .workflow-content-wrap h3, .workflow-step-card.active .workflow-content-wrap h3 { color: #0ba56a !important; }
.workflow-content-wrap p { font-size: 14.5px; line-height: 1.6; color: #244b41 !important; margin: 0; font-weight: 500; flex-grow: 1; }
.workflow-bottom-bar { width: 38px; height: 3px; background: #e3eee7; border-radius: 2px; margin-top: 20px; transition: all 0.35s ease; }
.workflow-step-card:hover .workflow-bottom-bar, .workflow-step-card.active .workflow-bottom-bar { width: 100%; background: linear-gradient(90deg, #0ba56a, #34d399); }
.workflow-scroller-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.workflow-nav-arrow { width: 42px; height: 42px; border-radius: 50%; background: #ffffff; border: 1.5px solid #dcece3; color: #173b36; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 4px 14px rgba(7, 38, 37, 0.06); }
.workflow-nav-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.workflow-nav-arrow:hover:not(:disabled) { background: #0ba56a; border-color: #0ba56a; color: #ffffff; transform: scale(1.08); box-shadow: 0 6px 18px rgba(11, 165, 106, 0.28); }
.workflow-nav-arrow:disabled { opacity: 0.35; background: #f8faf9; border-color: #e4ebe7; color: #90a39a; cursor: not-allowed; }
.workflow-scroller-dots { display: flex; align-items: center; gap: 8px; }
.workflow-dot { width: 9px; height: 9px; border-radius: 50%; background: #d6e8de; border: none; padding: 0; cursor: pointer; transition: all 0.25s ease; }
.workflow-dot:hover { background: #34d399; }
.workflow-dot.active { width: 26px; border-radius: 12px; background: #0ba56a; }
/* ── SECTION: PACKAGING TRACEABILITY & INTERACTIVE FLOW ── */
.trace-pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 44px; }
.trace-pillar-card { background: #ffffff; border: 1.5px solid #e1eee7; border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(7, 38, 37, 0.035); transition: transform 0.25s ease, border-color 0.25s ease; }
.trace-pillar-card:hover { transform: translateY(-4px); border-color: #0ba56a; }
.trace-pillar-num { font-size: 13px; font-weight: 800; color: #0ba56a; background: #eaf7ef; border-radius: 999px; padding: 3px 10px; width: fit-content; margin-bottom: 12px; }
.trace-pillar-card h3 { font-size: 17.5px; font-weight: 700; color: #173b36; margin-bottom: 8px; }
.trace-pillar-card p { font-size: 14.5px; line-height: 1.6; color: #53635f; margin: 0; }
/* INTERACTIVE PIPELINE FLOW */
.flow-showcase-box { background: linear-gradient(135deg, #072625 0%, #0d3835 100%); border-radius: 20px; padding: 36px 40px; color: #ffffff; border: 1px solid rgba(11, 165, 106, 0.3); box-shadow: 0 16px 40px rgba(7, 38, 37, 0.2); }
.flow-showcase-header { text-align: center; max-width: 740px; margin: 0 auto 32px; }
.flow-showcase-header h3 { font-size: 26px; font-weight: 700; color: #ffffff; margin-bottom: 10px; }
.flow-showcase-header p { font-size: 15.5px; color: #c4ddd5; margin: 0; }
.flow-nav-track { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; margin-bottom: 32px; padding: 0 10px; }
.flow-stage-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; color: #c4ddd5; transition: all 0.2s ease; z-index: 2; outline: none; }
.flow-node-circle { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(87, 231, 182, 0.3); color: #57e7b6; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.25s ease; }
.flow-node-title { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; transition: color 0.2s ease; }
.flow-stage-btn:hover .flow-node-circle { border-color: #57e7b6; background: rgba(87, 231, 182, 0.16); transform: scale(1.08); }
.flow-stage-btn.active .flow-node-circle { background: #0ba56a; border-color: #57e7b6; color: #ffffff; transform: scale(1.15); box-shadow: 0 0 20px rgba(87, 231, 182, 0.6); }
.flow-stage-btn.active .flow-node-title { color: #ffffff; font-weight: 800; }
.flow-connector-arrow { color: rgba(87, 231, 182, 0.4); font-size: 18px; display: flex; align-items: center; justify-content: center; }
.flow-detail-display-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 30px; align-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; padding: 24px 28px; max-width: 800px; width: 100%; margin: 0 auto; }
.flow-detail-media { border-radius: 14px; overflow: hidden; height: 220px; }
.flow-detail-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.22s ease, transform 0.22s ease; }
.flow-detail-media img.switching { opacity: 0.25; transform: scale(0.98); }
.flow-detail-content { display: flex; flex-direction: column; }
.flow-detail-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #57e7b6; background: rgba(87, 231, 182, 0.15); padding: 4px 10px; border-radius: 999px; width: fit-content; margin-bottom: 12px; }
.flow-detail-title { font-size: 22px; font-weight: 700; color: #ffffff; margin-bottom: 14px; }
.flow-data-points-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.flow-data-points-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #d2ede4; font-weight: 500; }
.flow-data-points-list li svg { color: #0ba56a; flex-shrink: 0; }
/* ── COMMON GRID STYLES (4 & 5 CARDS) ── */
.cards-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 36px; }
.cards-grid-5, .epr-cards-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 36px; }
.cards-grid-5>.card-item:nth-child(1), .cards-grid-5>.card-item:nth-child(2), .cards-grid-5>.card-item:nth-child(3), .epr-cards-grid>.card-item:nth-child(1), .epr-cards-grid>.card-item:nth-child(2), .epr-cards-grid>.card-item:nth-child(3) { grid-column: span 2; }
.cards-grid-5>.card-item:nth-child(4), .epr-cards-grid>.card-item:nth-child(4) { grid-column: 2 / span 2; }
.cards-grid-5>.card-item:nth-child(5), .epr-cards-grid>.card-item:nth-child(5) { grid-column: 4 / span 2; }
.card-item { background: #ffffff; border: 1.5px solid #e1eee7; border-radius: 16px; padding: 26px 22px; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(7, 38, 37, 0.035); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.card-item:hover { transform: translateY(-4px); border-color: #0ba56a; box-shadow: 0 14px 30px rgba(11, 165, 106, 0.12); }
.card-item-num { font-size: 13px; font-weight: 800; color: #078857; background: #eaf7ef; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.card-item h3 { font-size: 18.5px; font-weight: 700; color: #173b36; margin-bottom: 10px; line-height: 1.35; }
.card-item p { font-size: 14.5px; line-height: 1.62; color: #53635f; margin: 0; }
/* ── SECTION 8: RECYCLED CONTENT TRACKING ── */
#recycled-content { position: relative; background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 45%, #f4f9f6 100%) !important; background-image: none !important; padding: 96px 0; }
#recycled-content .section-header { max-width: 840px; margin-inline: auto; margin-bottom: 48px; }
#recycled-content .section-header h2 { letter-spacing: -0.4px; margin-bottom: 16px; line-height: 1.25; }
#recycled-content .section-header p { font-size: 15.5px; line-height: 1.7; color: #4b635d; margin: 0; }
.recycled-scroller-container { position: relative; margin-top: 28px; }
.recycled-scroller-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 12px 6px 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.recycled-scroller-track::-webkit-scrollbar { display: none; }
.recycled-card-item { flex: 0 0 calc((100% - 48px) / 3); min-width: 320px; max-width: 410px; scroll-snap-align: start; position: relative; background: #ffffff; border: 1.5px solid #e1eee7; border-radius: 20px; display: flex; flex-direction: column; box-shadow: 0 6px 22px rgba(7, 38, 37, 0.05); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; cursor: pointer; }
/* Card Media / Image */
.recycled-card-media { position: relative; width: 100%; height: 200px; background: #f0f7f4; overflow: hidden; }
.recycled-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.recycled-card-badge { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1.5px solid #bce6cf; color: #078857; font-size: 14px; font-weight: 800; letter-spacing: 0.5px; box-shadow: 0 4px 12px rgba(7, 38, 37, 0.1); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
/* Card Body */
.recycled-card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.recycled-card-body h3 { font-size: 19px; font-weight: 700; color: #072625; margin-bottom: 12px; line-height: 1.38; letter-spacing: -0.2px; transition: color 0.25s ease; }
.recycled-card-body p { font-size: 14.5px; line-height: 1.68; color: #4b635d; margin: 0; flex-grow: 1; }
/* Top Accent Line */
.recycled-card-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px; background: linear-gradient(90deg, #0ba56a, #57e7b6); opacity: 0; transform: scaleX(0.25); transform-origin: left; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); z-index: 3; }
/* Hover & Active States */
.recycled-card-item:hover, .recycled-card-item.active { transform: translateY(-6px); border-color: #0ba56a; box-shadow: 0 20px 42px -10px rgba(11, 165, 106, 0.18), 0 4px 14px rgba(7, 38, 37, 0.04); }
.recycled-card-item:hover::before, .recycled-card-item.active::before { opacity: 1; transform: scaleX(1); }
.recycled-card-item:hover .recycled-card-img, .recycled-card-item.active .recycled-card-img { transform: scale(1.06); }
.recycled-card-item:hover .recycled-card-badge, .recycled-card-item.active .recycled-card-badge { background: #0ba56a; color: #ffffff; border-color: #0ba56a; box-shadow: 0 6px 18px rgba(11, 165, 106, 0.35); transform: scale(1.06) rotate(-2deg); }
.recycled-card-item:hover .recycled-card-body h3, .recycled-card-item.active .recycled-card-body h3 { color: #0ba56a; }
/* Scroller Controls Below */
.recycled-scroller-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.recycled-nav-arrow { width: 44px; height: 44px; border-radius: 50%; background: #ffffff; border: 1.5px solid #dcece3; color: #173b36; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 4px 14px rgba(7, 38, 37, 0.06); }
.recycled-nav-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.recycled-nav-arrow:hover:not(:disabled) { background: #0ba56a; border-color: #0ba56a; color: #ffffff; transform: scale(1.08); box-shadow: 0 6px 18px rgba(11, 165, 106, 0.28); }
.recycled-nav-arrow:disabled { opacity: 0.35; background: #f8faf9; border-color: #e4ebe7; color: #90a39a; cursor: not-allowed; }
.recycled-scroller-dots { display: flex; align-items: center; gap: 8px; }
.recycled-dot { width: 9px; height: 9px; border-radius: 50%; background: #d6e8de; border: none; padding: 0; cursor: pointer; transition: all 0.25s ease; }
.recycled-dot.active { width: 26px; border-radius: 6px; background: #0ba56a; }
/* ── SECTION 9: REUSABLE & REFILLABLE PACKAGING ── */
.circular-reuse-section, #reusable-packaging { position: relative; background-color: #041e19 !important; background-image: none !important; padding: 88px 0; color: #ffffff; overflow: hidden; }
.eyebrow-light { color: #57e7b6 !important; background: rgba(87, 231, 182, 0.12) !important; border-color: rgba(87, 231, 182, 0.3) !important; }
.text-white { color: #ffffff !important; }
.text-white-muted { color: #c4ddd5 !important; max-width: 820px; margin-inline: auto; }
.reuse-target-banner { margin-top: 16px; }
.reuse-target-pill { display: inline-block; background: rgba(87, 231, 182, 0.14); border: 1px solid rgba(87, 231, 182, 0.4); color: #57e7b6; font-size: 13.5px; font-weight: 700; padding: 6px 18px; border-radius: 999px; letter-spacing: 0.01em; }
.reuse-lifecycle-rail, .reuse-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 1040px; margin: 40px auto 0; }
.reuse-step-card { background: rgba(8, 48, 40, 0.75); border: 1.5px solid rgba(87, 231, 182, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 18px; padding: 30px 28px; display: flex; flex-direction: column; justify-content: flex-start; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.reuse-step-card:hover { transform: translateY(-4px); border-color: #57e7b6; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); }
.reuse-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.reuse-icon-wrap { width: 48px; height: 48px; min-width: 48px; border-radius: 13px; background: rgba(87, 231, 182, 0.14); border: 1px solid rgba(87, 231, 182, 0.3); display: flex; align-items: center; justify-content: center; color: #57e7b6; margin-bottom: 0; flex-shrink: 0; transition: all 0.3s ease; }
.reuse-step-card:hover .reuse-icon-wrap { background: #57e7b6; color: #072625; box-shadow: 0 0 16px rgba(87, 231, 182, 0.4); transform: scale(1.05); }
.reuse-step-card h3 { font-size: 18.5px; font-weight: 700; color: #ffffff; line-height: 1.35; margin: 0; }
.reuse-step-card p { font-size: 14.5px; line-height: 1.65; color: #c4ddd5; margin: 0; }
/* Row 3 (The 'One' in 2-2-1): Full width foundation card across both columns */
.reuse-lifecycle-rail>.reuse-step-card:nth-child(5) { grid-column: span 2; display: flex; flex-direction: column; background: linear-gradient(135deg, rgba(8, 48, 40, 0.88) 0%, rgba(13, 62, 53, 0.88) 100%); border-color: rgba(87, 231, 182, 0.32); }
/* ── SECTION 10: EPR REPORTING ── */
.epr-command-section, #epr-reporting { position: relative; background-color: #f7faf8 !important; background-image: none !important; padding: 88px 0; }
/* ══════════════════════════════════════════════════════════════════ SECTION 11: INTERACTIVE PACKAGING MATERIAL PORTFOLIO STUDIO ══════════════════════════════════════════════════════════════════ */
.materials-interactive-container, .mat-studio-wrapper { margin-top: 36px; display: flex; flex-direction: column; gap: 28px; }
/* 1. Horizontal Material Pill Tabs */
.materials-tabs-nav, .mat-nav-tabs { display: flex; align-items: center; justify-content: flex-start; gap: 6px; background: #f2f7f4; padding: 6px 14px; border-radius: 999px; border: 1.5px solid #d4eae0; width: max-content; max-width: 100%; margin-inline: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.materials-tabs-nav::-webkit-scrollbar, .mat-nav-tabs::-webkit-scrollbar { display: none; }
.mat-tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: #244b42; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; white-space: nowrap; flex-shrink: 0; }
.mat-tab-btn:hover { background: rgba(11, 165, 106, 0.08); color: #072625; }
.mat-tab-btn.active { background: #072625; color: #ffffff; border-color: #072625; box-shadow: 0 4px 14px rgba(7, 38, 37, 0.18); }
/* 2. Main Showcase Display Panel (Centered Text On Top + Full-Width Media) */
.materials-display-card, .mat-showcase-panel { display: flex; flex-direction: column; background: #ffffff; border: 1.5px solid #dcece2; border-radius: 24px; padding: 32px 32px 28px; box-shadow: 0 10px 32px rgba(7, 38, 37, 0.05); max-width: 880px; margin-inline: auto; width: 100%; }
.material-text-wrap, .mat-showcase-content { text-align: center; max-width: 680px; margin: 0 auto 20px; }
.material-text-wrap h3, .mat-showcase-content h3, .mat-detail-title { font-size: 24px; font-weight: 800; color: #173b36; margin-bottom: 8px; line-height: 1.3; }
.material-text-wrap p, .mat-showcase-content p { font-size: 15px; line-height: 1.6; color: #4a5c57; margin: 0; }
.material-media-wrap, .mat-showcase-media { position: relative; width: 100%; max-width: 800px; height: 340px; margin-inline: auto; border-radius: 18px; overflow: hidden; background: #f4f8f6; border: 1px solid rgba(7, 38, 37, 0.08); box-shadow: 0 8px 24px rgba(7, 38, 37, 0.07); }
.material-media-wrap img, .mat-img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: opacity 0.35s ease, transform 0.4s ease; }
.material-media-wrap img.switching, .mat-img-frame img.switching { opacity: 0.25; transform: scale(0.985); }
/* 3. Slider Nav & Dots */
.mat-slider-nav { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: rgba(7, 38, 37, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(87, 231, 182, 0.3); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); z-index: 2; }
.mat-slider-btn { background: transparent; border: none; color: #ffffff; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; padding: 0; }
.mat-slider-btn svg { width: 16px; height: 16px; }
.mat-slider-btn:hover { background: rgba(87, 231, 182, 0.2); color: #57e7b6; }
.mat-slider-dots { display: flex; align-items: center; gap: 8px; }
.mat-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: all 0.25s ease; display: inline-block; }
.mat-dot:hover { background: rgba(87, 231, 182, 0.7); }
.mat-dot.active { background: #57e7b6; width: 24px; border-radius: 999px; box-shadow: 0 0 10px rgba(87, 231, 182, 0.6); }
/* ══════════════════════════════════════════════════════════════════ SECTION 12: HORIZONTAL INDUSTRY ROLES MATRIX ══════════════════════════════════════════════════════════════════ */
.industry-cards-grid, .industry-roles-matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.industry-card, .role-split-card { display: grid; grid-template-columns: 220px 1fr; background: #ffffff; border: 1.5px solid #dcece2; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 20px rgba(7, 38, 37, 0.04); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.industry-card:hover, .role-split-card:hover { transform: translateY(-4px); border-color: #0ba56a; box-shadow: 0 16px 36px rgba(11, 165, 106, 0.12); }
.industry-card-media, .role-media-block { position: relative; width: 100%; height: 100%; min-height: 200px; background: #072625; overflow: hidden; }
.industry-card-media img, .role-media-block img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.industry-card:hover .industry-card-media img, .role-split-card:hover .role-media-block img { transform: scale(1.08); }
.industry-card-num, .role-badge { display: inline-block; align-self: flex-start; font-family: var(--font-heading); font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; color: #078857; background: #eaf7ef; border: 1px solid #cce8da; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.industry-card-body, .role-content-block { padding: 24px 22px; display: flex; flex-direction: column; justify-content: center; }
.industry-card-body h3, .role-content-block h3 { font-size: 19px; font-weight: 700; color: #173b36; margin-bottom: 8px; line-height: 1.3; }
.industry-card-body p, .role-content-block p { font-size: 14px; line-height: 1.58; color: #53635f; margin-bottom: 14px; }
.industry-bullet-list, .business-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.industry-bullet-list li, .business-tag { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #1b4b3e; }
.industry-bullet-list li svg { color: #0ba56a; flex-shrink: 0; }
/* Card 6: Custom Operational Architecture CTA Card */
.role-cta-card { background: linear-gradient(135deg, #072625 0%, #0c3d36 100%); border: 1.5px solid rgba(87, 231, 182, 0.25); border-radius: 20px; padding: 28px 26px; display: flex; align-items: center; box-shadow: 0 10px 30px rgba(7, 38, 37, 0.16); color: #ffffff; position: relative; overflow: hidden; }
.role-cta-card::after { content: ""; position: absolute; top: -40%; right: -20%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(11, 165, 106, 0.25) 0%, transparent 70%); pointer-events: none; }
.role-cta-inner { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; justify-content: center; }
.role-cta-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(87, 231, 182, 0.15); border: 1px solid rgba(87, 231, 182, 0.35); color: #57e7b6; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.role-cta-card h3 { font-size: 19px; font-weight: 700; color: #ffffff; margin-bottom: 8px; }
.role-cta-card p { font-size: 13.5px; line-height: 1.55; color: #c5dbd4; margin-bottom: 16px; }
.role-cta-action { display: inline-flex; align-items: center; gap: 8px; color: #57e7b6; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, color 0.2s ease; }
.role-cta-action:hover { color: #ffffff; transform: translateX(4px); }
/* ── SECTION: INTEGRATIONS (4 CARDS) ── */
.integrations-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 36px; }
.integration-card, .integration-box { background: #ffffff; border: 1.5px solid #e1eee7; border-radius: 16px; padding: 26px 22px; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(7, 38, 37, 0.035); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.integration-card:hover, .integration-box:hover { transform: translateY(-4px); border-color: #0ba56a; box-shadow: 0 14px 30px rgba(11, 165, 106, 0.12); }
.integration-card-num, .integration-icon { font-family: var(--font-heading); font-size: 13px; font-weight: 800; color: #078857; background: #eaf7ef; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.integration-card h3, .integration-box h3 { font-size: 18.5px; font-weight: 700; color: #173b36; margin-bottom: 10px; }
.integration-card p, .integration-box p { font-size: 14.5px; line-height: 1.62; color: #53635f; margin: 0; }
.gain-stream-list { max-width: 1100px; margin: 44px auto 0; border-top: 1.5px solid #d8ece0; }
.gain-stream-row { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px; border-bottom: 1.5px solid #d8ece0; border-left: 3px solid transparent; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); background: transparent; position: relative; }
.gain-stream-row:hover { background: rgba(11, 165, 106, 0.04); border-left-color: #0ba56a; padding-left: 26px; }
.gain-stream-left { display: flex; align-items: center; gap: 16px; flex: 0 0 380px; }
.gain-stream-num { font-family: var(--font-heading); font-size: 13.5px; font-weight: 800; color: #0ba56a; background: #eaf7ef; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.25s ease; }
.gain-stream-row:hover .gain-stream-num { background: #0ba56a; color: #ffffff; box-shadow: 0 4px 12px rgba(11, 165, 106, 0.3); transform: scale(1.05); }
.gain-stream-left h3 { font-size: 19px; font-weight: 650; color: #072625; margin: 0; line-height: 1.35; transition: color 0.2s ease; }
.gain-stream-row:hover .gain-stream-left h3 { color: #0ba56a; }
.gain-stream-right { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.gain-point { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: #314a42; white-space: nowrap; transition: color 0.2s ease; }
.gain-stream-row:hover .gain-point { color: #072625; }
.gain-point-icon { width: 22px; height: 22px; border-radius: 50%; background: rgba(11, 165, 106, 0.12); color: #0ba56a; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s ease; }
.gain-point-icon svg { flex-shrink: 0; }
.gain-stream-row:hover .gain-point-icon { background: #0ba56a; color: #ffffff; transform: scale(1.1); }
/* ── SECTION: PPWR COMPLIANCE SOFTWARE VS MANUAL COMPLIANCE ── */
#software-vs-manual { position: relative; background-color: #ffffff; }
.compare-toggle-bar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 28px; }
.compare-tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: #f0f7f3; color: #1b4b3e; border: 1.5px solid #d4e8dd; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; }
.compare-tab-btn:hover { background: #e2f2e9; border-color: #0ba56a; }
.compare-tab-btn.active { background: #072625; color: #ffffff; border-color: #072625; box-shadow: 0 4px 14px rgba(7, 38, 37, 0.16); }
.compare-view-panel { display: none; }
.compare-view-panel.active { display: block; }
/* Comparison Table */
.compare-interactive-wrapper { max-width: 960px; margin: 36px auto 0; }
.compare-table-responsive, .manual-table-wrap { background: #ffffff; border: 1.5px solid #dcece2; border-radius: 18px; box-shadow: 0 8px 28px rgba(7, 38, 37, 0.04); overflow: hidden; margin-bottom: 28px; }
.compare-table, .manual-diff-table { width: 100%; border-collapse: collapse; text-align: left; }
.compare-table thead, .manual-diff-table thead { background: #f7faf8; }
.compare-table th, .manual-diff-table th { padding: 18px 24px; font-size: 15.5px; font-weight: 700; color: #173b36; border-bottom: 1.5px solid #dcece2; }
.compare-table th.th-manual, .manual-diff-table th.col-manual { width: 50%; background: #fef2f2; color: #991b1b; border-right: 1px solid #fee2e2; }
.compare-table th.th-tg, .manual-diff-table th.col-software { width: 50%; background: #eaf7ef; color: #078857; }
.compare-table td, .manual-diff-table td { padding: 16px 24px; border-bottom: 1px solid #edf4f0; font-size: 14.5px; line-height: 1.55; color: #4a5c57; vertical-align: middle; }
.compare-table tbody tr td:first-child { border-right: 1px solid #edf4f0; color: #617b71; }
.compare-table tbody tr td:last-child { color: #173b36; font-weight: 600; }
.compare-table tbody tr:last-child td, .manual-diff-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover, .manual-diff-table tbody tr:hover { background-color: #f9fcfb; }
.manual-col-cell { color: #556c64 !important; }
.software-col-cell { color: #134e4a !important; font-weight: 600; }
.diff-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800; margin-right: 8px; flex-shrink: 0; }
.diff-status-icon.manual-icon { background: #fee2e2; color: #dc2626; }
.diff-status-icon.software-icon { background: #dcfce7; color: #16a34a; }
/* Dual Cards View */
.compare-dual-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 28px; }
.compare-side-card { border-radius: 20px; padding: 30px 28px; display: flex; flex-direction: column; }
.compare-side-card.manual-side { background: #fdfaf9; border: 1.5px solid #f2dede; }
.compare-side-card.software-side { background: #f7fcf9; border: 1.5px solid #cce8d8; box-shadow: 0 8px 24px rgba(11, 165, 106, 0.08); }
.compare-tag { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.compare-tag.manual-tag { background: #fee2e2; color: #991b1b; }
.compare-tag.software-tag { background: #dcfce7; color: #15803d; }
.compare-card-top h3 { font-size: 21px; font-weight: 800; color: #173b36; margin-bottom: 8px; }
.compare-card-top p { font-size: 14px; color: #5d6f69; margin-bottom: 22px; }
.compare-points-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.compare-points-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; }
.point-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.point-badge.manual-badge { background: #fee2e2; color: #dc2626; }
.point-badge.software-badge { background: #dcfce7; color: #16a34a; }
.compare-points-list strong { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #173b36; margin-bottom: 2px; }
/* Callout Centered */
.manual-diff-callout-centered { display: flex; align-items: center; gap: 16px; background: #f7fcf9; border: 1.5px solid #d4ebdd; border-radius: 16px; padding: 20px 24px; max-width: 960px; margin: 0 auto; }
.manual-leaf-badge { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; border: 1.5px solid #289d68; background: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12); }
.manual-callout-text { font-size: 14.5px; line-height: 1.6; color: #3b544b; margin: 0; }
@media (max-width: 991px) {
  .compare-dual-cards { grid-template-columns: 1fr; gap: 18px; }
  .manual-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .manual-diff-table { min-width: 580px; }
}
@media (max-width: 767px) {
  .compare-toggle-bar { flex-direction: column; width: 100%; gap: 8px; }
  .compare-tab-btn { width: 100%; justify-content: center; font-size: 13px; padding: 8px 16px; }
  .compare-side-card { padding: 20px 18px; }
  .manual-diff-callout-centered { flex-direction: column; align-items: flex-start; padding: 16px; gap: 12px; }
}
@media (max-width: 575px) {
  .manual-diff-callout { align-items: flex-start; gap: 12px; }
  .manual-leaf-badge { width: 38px; height: 38px; min-width: 38px; margin-top: 2px; }
  .manual-callout-text { font-size: 13.5px; }
}
/* ── SECTION 16: WHY CHOOSE TRANSGENIE / PACKAGING COMPLIANCE MADE SIMPLE ── */
.why-choose-section { background-color: #f7fcfb; background-image: url('../images/ppwr-compliance-software/why-choose-bg.webp'); background-repeat: no-repeat; background-position: right center; background-size: auto 100%; position: relative; overflow: hidden; padding-top: 60px; padding-bottom: 68px; }
.why-choose-layout { display: flex; align-items: center; justify-content: flex-start; position: relative; }
.why-choose-content-col { display: flex; flex-direction: column; width: 100%; max-width: 610px; position: relative; z-index: 2; }
.why-choose-header-left { margin-bottom: 22px; text-align: left; }
.why-choose-header-left h2 { color: #0b3429; letter-spacing: -0.02em; line-height: 1.22; margin-bottom: 12px; }
.why-choose-header-left h2 .highlight-green { color: #0ba56a; }
.why-choose-header-left p { font-size: 14.5px; line-height: 1.62; color: #4b635d; margin: 0; max-width: 610px; }
.why-choose-points { display: flex; flex-direction: column; gap: 13px; max-width: 610px; }
.why-point-card { display: flex; align-items: flex-start; gap: 16px; background: #ffffff; padding: 16px 20px; border-radius: 16px; border: 1px solid #e2ebe6; box-shadow: 0 4px 14px rgba(7, 38, 37, 0.03); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.why-point-card:hover { transform: translateY(-2px); border-color: #0ba56a; box-shadow: 0 8px 24px rgba(11, 165, 106, 0.1); }
.why-point-num { font-family: var(--font-heading); font-size: 13px; font-weight: 800; color: #0ba56a; background: #eaf7ef; border: 1px solid #cce8da; width: 36px; height: 36px; min-width: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.why-point-card h3 { font-family: var(--font-heading); font-size: 16.5px; font-weight: 700; color: #0b3429; margin: 0 0 5px 0; line-height: 1.35; }
.why-point-card p { font-size: 13.5px; line-height: 1.58; color: #526963; margin: 0; }
.why-choose-media-blended { display: none; position: relative; align-items: center; justify-content: center; background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; overflow: visible; }
.why-choose-blended-img { width: 100%; height: auto; max-width: 100%; display: block; border-radius: 16px; border: none; box-shadow: none; background: transparent; filter: drop-shadow(0 8px 24px rgba(7, 38, 37, 0.04)); transition: transform 0.3s ease; }
.why-choose-media-blended:hover .why-choose-blended-img { transform: scale(1.01); }
/* ── IN-SECTION CTA BANNER ── */
.inline-cta-banner { background: linear-gradient(135deg, #072625 0%, #0c3e3a 50%, #094738 100%); border-radius: 16px; padding: 40px 48px; color: #ffffff; display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 48px; box-shadow: 0 16px 36px rgba(7, 38, 37, 0.2); border: 1px solid rgba(11, 165, 106, 0.25); position: relative; overflow: hidden; }
.inline-cta-text h3 { font-size: 22px; font-weight: 700; color: #ffffff; margin: 0 0 8px; }
.inline-cta-text p { font-size: 16px; color: #c4ddd5; margin: 0; }
.inline-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #0ba56a; color: #ffffff !important; font-size: 15px; font-weight: 700; padding: 13px 26px; border-radius: 999px; text-decoration: none !important; transition: all 0.2s ease; flex-shrink: 0; box-shadow: 0 4px 14px rgba(11, 165, 106, 0.4); border: none; cursor: pointer; }
.inline-cta-btn:hover { background: #078857; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(11, 165, 106, 0.55); }
/* ── SECTION: FAQ ACCORDION ── */
#faq .section-header { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 860px; }
.faq-accordion-container, .faq-list { max-width: 860px; margin: 36px auto 0; display: grid; gap: 14px; }
.faq-item { background: #FFFFFF; border: 1px solid var(--color-stroke); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 40, 22, 0.04); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.faq-item.active { border-color: var(--color-primary); box-shadow: 0 6px 24px rgba(11, 165, 106, 0.1); }
.faq-question-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: none; border: none; font-family: inherit; font-size: 16.5px; font-weight: 700; color: #173b36; text-align: left; cursor: pointer; gap: 16px; }
.faq-q-text { flex: 1; }
.faq-icon-cross { width: 32px; height: 32px; border-radius: 50%; background: #f0f7f3; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; transition: all 0.3s ease; }
.faq-icon-cross::before, .faq-icon-cross::after { content: ''; position: absolute; background-color: var(--color-primary); border-radius: 2px; transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease; }
.faq-icon-cross::before { width: 14px; height: 2px; }
.faq-icon-cross::after { width: 2px; height: 14px; }
.faq-item.active .faq-icon-cross { background: var(--color-primary); }
.faq-item.active .faq-icon-cross::before { background: #ffffff; }
.faq-item.active .faq-icon-cross::after { transform: rotate(90deg); opacity: 0; }
.faq-question-btn svg { color: var(--color-primary); width: 18px; height: 18px; stroke: currentColor; fill: none; transition: transform var(--transition-base); flex-shrink: 0; }
.faq-item.active .faq-question-btn svg { transform: rotate(180deg); }
.faq-answer-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background: #FFFFFF; }
.faq-item.active .faq-answer-body { max-height: 800px; }
.faq-answer-inner { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--color-secondary-text); }
.faq-concluding-text { max-width: 860px; margin: 36px auto 0; font-size: 15.5px; line-height: 1.65; color: #53635f; text-align: center; }
/* ── SECTION: BOTTOM WALKTHROUGH CTA BANNER ── */
.ppwr-walkthrough-cta { position: relative; padding: 90px 0; color: #FFFFFF; background-color: #031c18; background-image: linear-gradient(90deg, rgba(3, 28, 24, 0.95) 0%, rgba(3, 28, 24, 0.85) 45%, rgba(3, 28, 24, 0.45) 100%), url("../images/ppwr-compliance-software/ppwr-cta-banner.webp"); background-size: cover; background-position: center right; background-repeat: no-repeat; overflow: hidden; }
.ppwr-walkthrough-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; z-index: 1; }
.ppwr-walkthrough-cta-content { max-width: 860px; }
.ppwr-walkthrough-cta-title { font-family: var(--font-heading) !important; font-size: clamp(24px, 4vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: #FFFFFF !important; margin: 0 0 16px 0; }
.ppwr-walkthrough-cta-desc { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: #cbe6dd !important; margin: 0; }
.ppwr-walkthrough-cta-action { flex-shrink: 0; display: flex; align-items: center; }
.ppwr-walkthrough-cta-btn { display: inline-flex; align-items: center; justify-content: center; background: #0BA56A !important; color: #FFFFFF !important; font-family: var(--font-heading) !important; font-size: 16px; font-weight: 700; padding: 16px 34px; border-radius: 12px; text-decoration: none !important; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); transition: all 0.25s ease; white-space: nowrap; cursor: pointer; }
.ppwr-walkthrough-cta-btn:hover { background: #088755 !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(11, 165, 106, 0.4); }
/* ── FLOATING CTA BAR ── */
.cta-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(140%); width: calc(100% - 48px); max-width: 960px; background: rgba(7, 38, 37, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(87, 231, 182, 0.3); border-radius: 16px; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); z-index: 1040; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; opacity: 0; pointer-events: none; }
.cta-bar.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.cta-text { flex: 1; min-width: 0; }
.cta-tag { font-size: 11px; font-weight: 800; color: #57e7b6; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; }
.cta-bar .h3 { font-size: 16px !important; font-weight: 700; color: #ffffff !important; margin: 0 0 2px 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta-text p { font-size: 13.5px !important; color: #c4ddd5 !important; margin: 0 !important; white-space: wrap; overflow: hidden; text-overflow: ellipsis; }
.cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #0ba56a; color: #ffffff !important; font-size: 14.5px; font-weight: 700; padding: 10px 22px; border-radius: 999px; text-decoration: none !important; white-space: nowrap; flex-shrink: 0; transition: all 0.2s ease; }
.cta-btn:hover { background: #078857; transform: translateY(-1px); }
.cta-bar .cta-close, .cta-close { background: none; border: none; color: #c4ddd5; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; }
.cta-bar .cta-close:hover, .cta-close:hover { background: #ffffff !important; color: #072625 !important; border-color: transparent !important; }
/* ── RESPONSIVE STYLING (MATCHING HACCP EXACTLY) ── */
@media (min-width: 992px) {
  .navbar #navMenus { transform: translateX(-24px); }
  .page-ppwr-compliance #site-header .navbar .dropdown-menu[aria-labelledby="tDrop"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 560px !important; padding: 18px !important; gap: 8px 10px !important; }
  .page-ppwr-compliance #site-header .navbar .dropdown-menu[aria-labelledby="tDrop"].show { display: grid !important; }
}
@media (max-width: 1199px) {
  .container-xl-custom, .tg-container { padding-inline: 24px; }
  .features-grid-8, .integrations-grid-4, .trace-pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
/* TABLET (<= 991px) */
@media (max-width: 991px) {
  .container-xl-custom, .tg-container { padding-inline: 20px; }
  .section, .tg-section { padding-top: 56px; padding-bottom: 56px; }
  .section-header { margin-bottom: 32px; }
  h1, .tg-hero h1 { font-size: 34px !important; line-height: 1.2 !important; }
  h2, .main-heading, .section-header h2, .overview-copy-wrap h2, .why-choose-content h2 { font-size: 28px !important; line-height: 1.25 !important; }
  h3, .sub-heading, .h3 { font-size: 19px !important; line-height: 1.35 !important; }
  p, .paragraph, .body-large, .tg-hero p { font-size: 16px !important; line-height: 1.6 !important; max-width: none !important; }
  .tg-hero, .hero-section { padding-top: 115px !important; background-image: linear-gradient(180deg, rgba(3, 27, 26, 0.92) 0%, rgba(3, 27, 26, 0.82) 55%, rgba(3, 27, 26, 0.62) 100%), url("../images/ppwr-compliance-software/ppwr-hero-banner.webp") !important; background-position: center !important; }
  .tg-hero .tg-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .tg-hero-content, .hero-form-panel { max-width: 100%; flex: none; }
  .ppwr-demo-card { max-width: 620px !important; margin: 0 auto !important; }
  .tg-client-logo-row { gap: 44px; padding-right: 44px; }
  .tg-toc-section { display: block !important; background: #fbfdfc !important; padding: 16px 0 !important; }
  .tg-toc-card { padding: 14px 18px !important; border-radius: 14px !important; }
  .tg-toc-list { grid-template-columns: repeat(2, 1fr) !important; gap: 10px 18px !important; }
  .page-ppwr-compliance #site-header .navbar #navbarSupportedContent { background: rgba(5, 35, 32, 0.98) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 14px; padding: 20px; margin-top: 12px; border: 1px solid rgba(87, 231, 182, 0.2); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35); }
  .page-ppwr-compliance #site-header .navbar .dropdown-menu, .page-ppwr-compliance .navbar .dropdown-menu { background: rgba(5, 35, 32, 0.94) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(87, 231, 182, 0.2) !important; border-radius: 14px !important; padding: 10px; }
  .page-ppwr-compliance #site-header .navbar .dropdown-menu .dropdown-item, .page-ppwr-compliance .navbar .dropdown-menu .dropdown-item { color: #ffffff !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; }
  .page-ppwr-compliance #site-header .navbar .dropdown-menu .dropdown-item:hover, .page-ppwr-compliance #site-header .navbar .dropdown-menu .dropdown-item:focus, .page-ppwr-compliance .navbar .dropdown-menu .dropdown-item:hover, .page-ppwr-compliance .navbar .dropdown-menu .dropdown-item:focus { color: #57e7b6 !important; background: rgba(87, 231, 182, 0.14) !important; border-color: rgba(87, 231, 182, 0.35) !important; }
  .page-ppwr-compliance #site-header .navbar .nav-link, .page-ppwr-compliance .navbar .nav-link, .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link, .page-ppwr-compliance #site-header .navbar .nav-link.active, .page-ppwr-compliance #site-header .navbar .nav-link:hover, .page-ppwr-compliance #site-header .navbar .nav-link:focus, .page-ppwr-compliance #site-header .navbar .nav-link.show, .page-ppwr-compliance #site-header .navbar .nav-link[aria-expanded="true"], .page-ppwr-compliance #site-header .navbar .nav-item.active > .nav-link, .page-ppwr-compliance #site-header .navbar .nav-item.show > .nav-link, .page-ppwr-compliance #site-header .navbar .nav-item.dropdown.show > .nav-link, .page-ppwr-compliance .navbar .nav-link.active, .page-ppwr-compliance .navbar .nav-link:hover, .page-ppwr-compliance .navbar .nav-link:focus, .page-ppwr-compliance .navbar .nav-link.show, .page-ppwr-compliance .navbar .nav-link[aria-expanded="true"], .page-ppwr-compliance .navbar .nav-item.active > .nav-link, .page-ppwr-compliance .navbar .nav-item.show > .nav-link, .page-ppwr-compliance .navbar .nav-item.dropdown.show > .nav-link, .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link.active, .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link.show, .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link[aria-expanded="true"], .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link:hover, .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link:focus { color: #ffffff !important; }
  .page-ppwr-compliance #site-header .navbar .dropdown-toggle::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle.active::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle.show::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle[aria-expanded="true"]::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle:hover::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle:focus::after, .page-ppwr-compliance #site-header .navbar .nav-item.dropdown.show .dropdown-toggle::after, .page-ppwr-compliance #site-header .navbar .nav-item.active .dropdown-toggle::after, .page-ppwr-compliance .navbar .dropdown-toggle::after, .page-ppwr-compliance .navbar .dropdown-toggle.active::after, .page-ppwr-compliance .navbar .dropdown-toggle.show::after, .page-ppwr-compliance .navbar .dropdown-toggle[aria-expanded="true"]::after, .page-ppwr-compliance .navbar .dropdown-toggle:hover::after, .page-ppwr-compliance .navbar .dropdown-toggle:focus::after, .page-ppwr-compliance .navbar .nav-item.dropdown.show .dropdown-toggle::after, .page-ppwr-compliance .navbar .nav-item.active .dropdown-toggle::after { color: #ffffff !important; border-top-color: #ffffff !important; opacity: 1 !important; }
  .overview-top-split, .why-choose-split, .flow-detail-display-wrap { grid-template-columns: 1fr; gap: 28px; }
  .why-choose-section { background-image: none !important; padding-top: 48px; padding-bottom: 48px; }
  .why-choose-layout { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 32px !important; }
  .why-choose-content-col { max-width: 100% !important; width: 100% !important; }
  .why-choose-header-left p, .why-choose-points { max-width: 100% !important; }
  .overview-top-split .overview-copy-wrap, .why-choose-split .why-choose-content { order: 1; }
  .overview-top-split .overview-media-wrap { order: 2; max-width: 600px; width: 100%; margin-inline: auto; }
  .why-choose-media, .why-choose-media-blended, .why-choose-split .why-choose-media { display: none !important; }
  .data-gaps-grid, .cards-grid-4, .cards-grid-5, .epr-cards-grid, .reuse-cards-grid, .integrations-grid-4, .why-choose-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .cards-grid-5>.card-item, .epr-cards-grid>.card-item { grid-column: auto !important; }
  .cards-grid-5>.card-item:nth-child(5), .epr-cards-grid>.card-item:nth-child(5) { grid-column: span 2 !important; }
  #recycled-content { padding: 72px 0 !important; }
  .materials-tabs-nav, .mat-nav-tabs { justify-content: flex-start !important; padding: 6px 12px !important; width: 100% !important; max-width: 100% !important; }
  .materials-display-card, .mat-showcase-panel { padding: 24px 20px 20px; }
  .material-media-wrap, .mat-img-frame { height: 280px; max-width: 100%; }
  .industry-cards-grid, .industry-roles-matrix { grid-template-columns: 1fr; gap: 20px; }
  .trace-pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .workflow-scroller-track .workflow-step-card, .recycled-scroller-track .recycled-card-item { flex: 0 0 calc((100% - 20px) / 2); min-width: 280px; }
  .inline-cta-banner { flex-direction: column; align-items: flex-start; padding: 30px !important; gap: 20px; }
  .ppwr-walkthrough-cta { padding: 72px 0; }
  .ppwr-walkthrough-cta-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .ppwr-walkthrough-cta-btn { width: 100%; max-width: 320px; }
  .reuse-lifecycle-rail { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .gain-stream-row { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 14px; }
  .gain-stream-left { flex: 0 0 auto; width: 100%; }
  .gain-stream-right { width: 100%; justify-content: flex-start; padding-left: 54px; gap: 20px; flex-wrap: wrap; }
  .reuse-lifecycle-rail>.reuse-step-card:nth-child(5) { grid-column: span 2; }
}
/* MOBILE (<= 767px) */
@media (max-width: 767px) {
  .page-ppwr-compliance #site-header .navbar .nav-link, .page-ppwr-compliance .navbar .nav-link, .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link, .page-ppwr-compliance #site-header .navbar .nav-link.active, .page-ppwr-compliance #site-header .navbar .nav-link:hover, .page-ppwr-compliance #site-header .navbar .nav-link:focus, .page-ppwr-compliance #site-header .navbar .nav-link.show, .page-ppwr-compliance #site-header .navbar .nav-link[aria-expanded="true"], .page-ppwr-compliance #site-header .navbar .nav-item.active > .nav-link, .page-ppwr-compliance #site-header .navbar .nav-item.show > .nav-link, .page-ppwr-compliance #site-header .navbar .nav-item.dropdown.show > .nav-link, .page-ppwr-compliance .navbar .nav-link.active, .page-ppwr-compliance .navbar .nav-link:hover, .page-ppwr-compliance .navbar .nav-link:focus, .page-ppwr-compliance .navbar .nav-link.show, .page-ppwr-compliance .navbar .nav-link[aria-expanded="true"], .page-ppwr-compliance .navbar .nav-item.active > .nav-link, .page-ppwr-compliance .navbar .nav-item.show > .nav-link, .page-ppwr-compliance .navbar .nav-item.dropdown.show > .nav-link, .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link.active, .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link.show, .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link[aria-expanded="true"], .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link:hover, .page-ppwr-compliance .navbar-light .navbar-nav .nav-item .nav-link:focus { color: #ffffff !important; }
  .page-ppwr-compliance #site-header .navbar .dropdown-toggle::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle.active::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle.show::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle[aria-expanded="true"]::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle:hover::after, .page-ppwr-compliance #site-header .navbar .dropdown-toggle:focus::after, .page-ppwr-compliance #site-header .navbar .nav-item.dropdown.show .dropdown-toggle::after, .page-ppwr-compliance #site-header .navbar .nav-item.active .dropdown-toggle::after, .page-ppwr-compliance .navbar .dropdown-toggle::after, .page-ppwr-compliance .navbar .dropdown-toggle.active::after, .page-ppwr-compliance .navbar .dropdown-toggle.show::after, .page-ppwr-compliance .navbar .dropdown-toggle[aria-expanded="true"]::after, .page-ppwr-compliance .navbar .dropdown-toggle:hover::after, .page-ppwr-compliance .navbar .dropdown-toggle:focus::after, .page-ppwr-compliance .navbar .nav-item.dropdown.show .dropdown-toggle::after, .page-ppwr-compliance .navbar .nav-item.active .dropdown-toggle::after { color: #ffffff !important; border-top-color: #ffffff !important; opacity: 1 !important; }
  .page-ppwr-compliance #site-header .navbar-brand img, .page-ppwr-compliance .navbar-brand img { height: 40px !important; width: auto !important; }
  .page-ppwr-compliance #site-header .navbar-toggler, .page-ppwr-compliance .navbar-toggler { width: 36px !important; height: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; }
  .page-ppwr-compliance #site-header .navbar-toggler-icon, .page-ppwr-compliance .navbar-toggler-icon { width: 18px !important; height: 18px !important; }
  .container-xl-custom, .tg-container { padding-inline: 16px !important; }
  .section, .tg-section { padding-top: 28px !important; padding-bottom: 28px !important; padding-block: 28px !important; }
  .tg-client-strip { padding: 14px 0 !important; }
  .tg-client-logo-row { gap: 32px !important; padding-right: 32px !important; }
  .tg-client-logo { min-height: 32px !important; }
  .tg-client-logo img { max-height: 26px !important; max-width: 110px !important; width: auto !important; }
  .section-header { margin-bottom: 16px !important; text-align: left !important; margin-left: 0 !important; margin-right: auto !important; }
  .section-header p { text-align: left !important; }
  h1, .tg-hero h1 { font-size: 28px !important; line-height: 1.25 !important; }
  h2, .h2, .main-heading, .section-header h2, .overview-copy-wrap h2, .why-choose-content h2, #faq .section-header h2, .ppwr-walkthrough-cta-title { font-size: 22px !important; line-height: 1.25 !important; margin-bottom: 6px !important; text-align: left !important; }
  h3, .sub-heading, .h3, .gap-card h3, .gap-card-title, .card-item h3, .feature-card-item h3, .mat-showcase-content h3, .mat-detail-title, .role-content-block h3, .role-cta-card h3, .integration-box h3, .gain-card h3, .why-choose-item h3, .faq-question-btn { font-size: 16px !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
  p, .paragraph, .body-large, .tg-hero p, .section-header p, .gap-card p, .card-item p, .feature-card-item p, .mat-showcase-content p, .role-content-block p, .role-cta-card p, .integration-box p, .why-choose-item p, .faq-answer-inner { font-size: 13.5px !important; line-height: 1.48 !important; text-align: left !important; }
  .btn-tg-primary, .btn-tg-secondary, .cta-btn { font-size: 13.5px !important; padding: 8px 18px !important; height: auto !important; min-height: 38px !important; width: auto !important; max-width: max-content !important; display: inline-flex !important; align-items: center !important; border-radius: 999px !important; }
  .tg-hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .tg-trust-strip { flex-direction: column; }
  .tg-trust-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); width: 100%; padding: 10px 14px; }
  .tg-trust-item:last-child { border-bottom: none; }
  /* Grid layouts reset to 1 column on mobile with tight 8px gaps */
  .features-grid-8, .data-gaps-grid, .cards-grid-4, .cards-grid-5, .epr-cards-grid, .reuse-cards-grid, .integrations-grid-4, .why-choose-grid, .trace-pillars-grid, .industry-cards-grid, .industry-roles-matrix, .pcr-bento-subgrid, .reuse-lifecycle-rail { display: grid !important; grid-template-columns: 1fr !important; grid-auto-columns: auto !important; gap: 8px !important; margin-top: 14px !important; }
  /* Force single column for all child cards, overriding desktop/tablet nth-child spans */
  .cards-grid-5>.card-item, .cards-grid-5>.card-item:nth-child(n), .epr-cards-grid>.card-item, .epr-cards-grid>.card-item:nth-child(n), .cards-grid-4>.card-item, .cards-grid-4>.card-item:nth-child(n), .reuse-lifecycle-rail>.reuse-step-card, .reuse-lifecycle-rail>.reuse-step-card:nth-child(n), .integrations-grid-4>.integration-box, .integrations-grid-4>.integration-box:nth-child(n) { grid-column: 1 / -1 !important; grid-row: auto !important; width: 100% !important; box-sizing: border-box !important; }
  /* 1. Disconnected Data Gap Cards */
  .gap-card { padding: 12px 14px 11px !important; border-radius: 12px !important; }
  .gap-card-num { width: 24px !important; height: 24px !important; min-width: 24px !important; font-size: 11px !important; margin-bottom: 6px !important; border-radius: 6px !important; }
  .gap-card h3, .gap-card-title { font-size: 14px !important; line-height: 1.3 !important; margin-bottom: 3px !important; }
  .gap-card p { font-size: 12px !important; line-height: 1.4 !important; }
  .gap-change-banner { margin-top: 12px !important; padding: 14px 14px 13px !important; border-radius: 12px !important; gap: 8px !important; box-shadow: 0 4px 14px rgba(7, 38, 37, 0.1) !important; }
  .gap-change-text h3 { font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
  .gap-change-text p { font-size: 12px !important; line-height: 1.4 !important; margin: 0 !important; }
  /* 2. Key Features Cards */
  .feature-card-item { padding: 12px 14px 11px !important; border-radius: 12px !important; }
  .feature-card-icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; margin-bottom: 8px !important; }
  .feature-card-icon svg { width: 16px !important; height: 16px !important; }
  .feature-card-item h3 { font-size: 14px !important; line-height: 1.3 !important; margin-bottom: 3px !important; }
  .feature-card-item p { font-size: 12px !important; line-height: 1.4 !important; }
  /* 3. Standard, EPR & Integration Cards (Single Column, Ultra Compact) */
  .card-item, .integration-box { padding: 12px 14px 11px !important; border-radius: 12px !important; }
  .card-item-num, .integration-card-num, .integration-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; font-size: 10.5px !important; font-weight: 800 !important; margin-bottom: 6px !important; border-radius: 6px !important; }
  .card-item h3, .integration-box h3 { font-size: 14px !important; margin-bottom: 3px !important; line-height: 1.3 !important; font-weight: 700 !important; }
  .card-item p, .integration-box p { font-size: 12px !important; line-height: 1.4 !important; margin: 0 !important; }
  /* 4. Section 9: Reusable Packaging Cards (Single Column, Ultra Compact) */
  .circular-reuse-section, #reusable-packaging { padding: 24px 0 !important; }
  .reuse-step-card, .reuse-lifecycle-rail>.reuse-step-card:nth-child(n) { grid-column: 1 / -1 !important; padding: 12px 14px 11px !important; border-radius: 12px !important; flex-direction: column !important; gap: 0 !important; }
  .reuse-card-header { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 6px !important; }
  .reuse-icon-wrap, .reuse-lifecycle-rail>.reuse-step-card:nth-child(n) .reuse-icon-wrap { width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 7px !important; margin-bottom: 0 !important; }
  .reuse-icon-wrap svg { width: 15px !important; height: 15px !important; }
  .reuse-step-card h3 { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; line-height: 1.3 !important; }
  .reuse-step-card p { font-size: 12px !important; line-height: 1.4 !important; color: #c4ddd5 !important; margin: 0 !important; }
  /* 5. Section 10: EPR Reporting Section Container */
  .epr-command-section, #epr-reporting { padding: 24px 0 !important; }
  /* 6. Section 11: Packaging Materials Showcase */
  #packaging-materials { padding: 24px 0 !important; }
  .materials-tabs-nav, .mat-nav-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; padding: 4px 8px !important; width: 100% !important; max-width: 100% !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 10px !important; gap: 6px !important; border-radius: 999px !important; }
  .materials-tabs-nav::-webkit-scrollbar, .mat-nav-tabs::-webkit-scrollbar { display: none; }
  .mat-tab-btn { padding: 5px 12px !important; font-size: 11.5px !important; white-space: nowrap !important; }
  .materials-display-card, .mat-showcase-panel { padding: 12px 12px 12px !important; border-radius: 12px !important; }
  .material-text-wrap, .mat-showcase-content { margin-bottom: 8px !important; }
  .material-text-wrap h3, .mat-showcase-content h3, .mat-detail-title { font-size: 14px !important; margin-bottom: 3px !important; line-height: 1.3 !important; font-weight: 700 !important; }
  .material-text-wrap p, .mat-showcase-content p { font-size: 12px !important; line-height: 1.4 !important; margin: 0 !important; }
  .material-media-wrap, .mat-img-frame { height: 135px !important; border-radius: 9px !important; }
  .mat-slider-nav { bottom: 6px !important; padding: 3px 8px !important; gap: 6px !important; }
  .mat-slider-btn { width: 22px !important; height: 22px !important; }
  .mat-slider-btn svg { width: 12px !important; height: 12px !important; }
  /* 7. Section 12: Industry Cards & Roles */
  .industry-cards-grid, .industry-roles-matrix { grid-template-columns: 1fr !important; gap: 10px !important; }
  .industry-card, .role-split-card { grid-template-columns: 1fr !important; border-radius: 13px !important; }
  .industry-card-media, .role-media-block { height: 135px !important; min-height: auto !important; }
  .industry-card-body, .role-content-block { padding: 12px 14px !important; }
  /* 8. Section 13: ERP & Business Systems Integrations */
  #integrations, .integrations-section { padding: 24px 0 !important; }
  /* 9. Section 16: Why Choose Points */
  .why-choose-grid { grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 14px !important; }
  .why-point-card { padding: 12px 13px !important; gap: 10px !important; border-radius: 12px !important; }
  .why-point-num { width: 26px !important; height: 26px !important; min-width: 26px !important; font-size: 11px !important; border-radius: 6px !important; }
  .why-point-card h3 { font-size: 14px !important; line-height: 1.3 !important; margin-bottom: 3px !important; }
  .why-point-card p { font-size: 12px !important; line-height: 1.4 !important; }
  .role-cta-card { padding: 16px 14px !important; border-radius: 13px !important; }
  .pcr-bento-subgrid { grid-template-columns: 1fr !important; gap: 8px !important; }
  #gain-benefits { padding: 24px 0 !important; }
  .gain-stream-list { margin-top: 14px !important; }
  .gain-stream-row { padding: 10px 4px 10px !important; gap: 6px !important; border-left-width: 2.5px !important; }
  .gain-stream-row:hover { padding-left: 6px !important; }
  .gain-stream-left { gap: 8px !important; flex: 0 0 auto !important; width: 100% !important; }
  .gain-stream-num { width: 24px !important; height: 24px !important; min-width: 24px !important; font-size: 11px !important; font-weight: 800 !important; }
  .gain-stream-left h3 { font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 0 !important; }
  .gain-stream-right { padding-left: 32px !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; width: 100% !important; }
  .gain-point { font-size: 12px !important; gap: 6px !important; white-space: normal !important; line-height: 1.35 !important; }
  .gain-point-icon { width: 16px !important; height: 16px !important; min-width: 16px !important; }
  .gain-point-icon svg { width: 9.5px !important; height: 9.5px !important; }
  .epr-stats-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .loop-ribbon-steps { flex-direction: column; align-items: flex-start; gap: 6px; }
  .loop-arrow { display: none; }
  #how-it-works, .how-it-works-section { background-image: linear-gradient(180deg, rgba(247, 252, 249, 0.94) 0%, rgba(247, 252, 249, 0.94) 100%), url("../images/ppwr-compliance-software/how-ppwr-works-bg.webp") !important; padding-top: 26px !important; padding-bottom: 26px !important; }
  .workflow-scroller-container { margin-top: 12px !important; }
  .workflow-scroller-track { padding: 4px 2px 8px !important; gap: 10px !important; }
  .workflow-scroller-track .workflow-step-card { flex: 0 0 82% !important; min-width: 220px !important; max-width: 285px !important; padding: 12px 14px 11px !important; border-radius: 12px !important; }
  .workflow-step-badge { height: 22px !important; min-width: 52px !important; font-size: 11px !important; padding: 0 8px !important; margin-bottom: 6px !important; border-radius: 6px !important; }
  .workflow-content-wrap h3 { font-size: 14px !important; margin-bottom: 3px !important; line-height: 1.3 !important; }
  .workflow-content-wrap p { font-size: 12px !important; line-height: 1.4 !important; margin: 0 !important; }
  .workflow-scroller-controls { margin-top: 8px !important; gap: 8px !important; }
  .workflow-nav-arrow { width: 28px !important; height: 28px !important; }
  .workflow-nav-arrow svg { width: 13px !important; height: 13px !important; }
  /* Section 8 Recycled Content Scroller */
  #recycled-content { padding: 24px 0 !important; }
  #recycled-content .section-header { margin-bottom: 12px !important; }
  .recycled-scroller-container { margin-top: 10px !important; }
  .recycled-scroller-track { padding: 4px 2px 8px !important; gap: 10px !important; }
  .recycled-scroller-track .recycled-card-item { flex: 0 0 82% !important; min-width: 220px !important; max-width: 285px !important; border-radius: 12px !important; border-width: 1.5px !important; box-shadow: 0 4px 14px rgba(7, 38, 37, 0.05) !important; }
  .recycled-card-media { height: 110px !important; }
  .recycled-card-badge { width: 24px !important; height: 24px !important; font-size: 10.5px !important; font-weight: 800 !important; top: 6px !important; left: 6px !important; border-radius: 6px !important; }
  .recycled-card-body { padding: 10px 12px 10px !important; flex-grow: 1 !important; }
  .recycled-card-body h3 { font-size: 13.5px !important; margin-bottom: 3px !important; line-height: 1.3 !important; font-weight: 700 !important; }
  .recycled-card-body p { font-size: 11.5px !important; line-height: 1.38 !important; margin-bottom: 0 !important; }
  .recycled-scroller-controls { margin-top: 8px !important; gap: 8px !important; }
  .recycled-nav-arrow { width: 28px !important; height: 28px !important; }
  .recycled-nav-arrow svg { width: 13px !important; height: 13px !important; }
  .recycled-dot { width: 5px !important; height: 5px !important; }
  .recycled-dot.active { width: 16px !important; }
  /* Section 3: Assessment Quiz (Ultra Compact & Clean on Mobile) */
  .assess-quiz-container { padding: 14px 12px 14px !important; border-radius: 12px !important; margin-top: 14px !important; border: 1px solid #dce8e0 !important; box-shadow: 0 4px 16px rgba(7, 38, 37, 0.04) !important; }
  .assess-quiz-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding-bottom: 10px !important; margin-bottom: 12px !important; gap: 8px !important; border-bottom: 1px solid #edf4f0 !important; }
  .assess-quiz-progress { font-size: 11px !important; font-weight: 700 !important; line-height: 1.35 !important; padding: 4px 8px !important; border-radius: 6px !important; letter-spacing: normal !important; box-shadow: none !important; text-align: left !important; flex: 1 !important; min-width: 0 !important; }
  .assess-quiz-reset { padding: 4px 10px !important; font-size: 11px !important; font-weight: 600 !important; border-radius: 6px !important; flex-shrink: 0 !important; white-space: nowrap !important; }
  .assess-questions-grid { gap: 8px !important; }
  .assess-question-item { padding: 10px 10px 10px !important; border-radius: 10px !important; border: 1px solid #e1eee7 !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; box-shadow: none !important; }
  .assess-q-title { font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.35 !important; color: #072625 !important; gap: 8px !important; align-items: flex-start !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; width: 100% !important; }
  .assess-q-num { width: 22px !important; height: 22px !important; min-width: 22px !important; font-size: 11px !important; font-weight: 800 !important; border-radius: 6px !important; border-width: 1px !important; margin-top: 1px !important; flex-shrink: 0 !important; }
  .assess-options-row { display: flex !important; flex-direction: column !important; width: 100% !important; background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; gap: 5px !important; }
  .assess-option-btn { width: 100% !important; text-align: center !important; background: #f4f8f5 !important; border: 1px solid #dce8e0 !important; border-radius: 8px !important; padding: 7px 10px !important; font-size: 12px !important; font-weight: 600 !important; color: #27443b !important; line-height: 1.35 !important; white-space: normal !important; box-shadow: none !important; }
  .assess-option-btn:hover { background: #eaf3ed !important; color: #078857 !important; border-color: #bce0cb !important; }
  .assess-option-btn.selected { background: #0ba56a !important; border-color: #0ba56a !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(11, 165, 106, 0.28) !important; }
  .assess-result-card { margin-top: 12px !important; padding: 12px 14px !important; border-radius: 10px !important; }
  .assess-result-title { font-size: 15px !important; margin-bottom: 3px !important; }
  .assess-result-desc { font-size: 12px !important; line-height: 1.4 !important; margin: 0 !important; }
  /* Section 6 Interactive Flow Showcase */
  .flow-showcase-box { padding: 16px 12px 14px !important; border-radius: 16px !important; }
  .flow-nav-track { overflow-x: auto; justify-content: flex-start; gap: 10px !important; margin-bottom: 16px !important; padding-bottom: 6px !important; }
  .flow-stage-btn { flex: 0 0 auto; gap: 6px !important; }
  .flow-node-circle { width: 38px !important; height: 38px !important; font-size: 13px !important; border-width: 1.5px !important; }
  .flow-stage-btn.active .flow-node-circle { transform: scale(1.06) !important; }
  .flow-node-title { font-size: 11.5px !important; }
  .flow-connector-arrow { display: none; }
  .flow-detail-display-wrap { padding: 12px !important; gap: 12px !important; border-radius: 12px !important; }
  .flow-detail-media { height: 130px !important; border-radius: 10px !important; }
  .flow-detail-badge { font-size: 11px !important; padding: 3px 8px !important; margin-bottom: 6px !important; }
  .flow-detail-title, .flow-detail-copy h3 { font-size: 15.5px !important; margin-bottom: 8px !important; font-weight: 700 !important; }
  .flow-detail-copy p { font-size: 13px !important; line-height: 1.42 !important; }
  .diff-table-wrap { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border: 1px solid #dce8e2 !important; border-radius: 14px !important; }
  .diff-table { display: table !important; width: 100% !important; min-width: 580px !important; }
  .table-scroll-hint { display: inline-flex !important; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #078857; background: #eaf7ef; border: 1px solid #c2e5d2; padding: 5px 12px; border-radius: 20px; margin-bottom: 12px; }
  .inline-cta-banner { padding: 20px !important; gap: 14px !important; border-radius: 12px !important; }
  .inline-cta-text h3 { font-size: 17px !important; }
  .inline-cta-text p { font-size: 13.5px !important; }
  .inline-cta-btn { font-size: 13.5px !important; padding: 8px 18px !important; }
  .ppwr-walkthrough-cta { padding: 36px 0 !important; }
  .ppwr-walkthrough-cta-title { font-size: 21px !important; }
  .ppwr-walkthrough-cta-desc { font-size: 13.5px !important; }
  .ppwr-walkthrough-cta-btn { font-size: 13.5px !important; padding: 8px 20px !important; }
  .tg-toc-list { grid-template-columns: 1fr !important; gap: 8px !important; }
}
@media (max-width: 420px) {
  h1, .tg-hero h1 { font-size: 26px !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .tg-client-logo-marquee { animation-play-state: paused !important; }
}