@font-face  {
   font-family: "Plus Jakarta Sans";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("/static/fonts/plus-jakarta-sans-400.ttf") format("truetype");
}

@font-face  {
   font-family: "Plus Jakarta Sans";
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url("/static/fonts/plus-jakarta-sans-500.ttf") format("truetype");
}

@font-face  {
   font-family: "Plus Jakarta Sans";
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url("/static/fonts/plus-jakarta-sans-600.ttf") format("truetype");
}

@font-face  {
   font-family: "Plus Jakarta Sans";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url("/static/fonts/plus-jakarta-sans-700.ttf") format("truetype");
}

@font-face  {
   font-family: "Plus Jakarta Sans";
   font-style: normal;
   font-weight: 800;
   font-display: swap;
   src: url("/static/fonts/plus-jakarta-sans-800.ttf") format("truetype");
}

@font-face  {
   font-family: "Caveat";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("/static/fonts/caveat-400.ttf") format("truetype");
}

@font-face  {
   font-family: "Caveat";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url("/static/fonts/caveat-700.ttf") format("truetype");
}

:root  {
   --background: hsl(80 40% 98%);
   --foreground: hsl(150 30% 10%);
   --card: hsl(0 0% 100%);
   --primary: hsl(125 95% 30%);
   --primary-dark: hsl(125 95% 22%);
   --primary-foreground: hsl(0 0% 100%);
   --secondary: hsl(65 80% 90%);
   --muted: hsl(80 25% 93%);
   --muted-foreground: hsl(150 15% 40%);
   --accent: hsl(119 99% 41%);
   --accent-org: hsl(81 100% 46%);
   --highlight: hsl(65 100% 78%);
   --destructive: hsl(0 72% 51%);
   --border: hsl(120 12% 88%);
   --shadow: 0 18px 60px hsl(125 95% 30% / 0.1);
}

*  {
   box-sizing: border-box;
}

html  {
   scroll-behavior: smooth;
}

body  {
   margin: 0;
   background: var(--background);
   color: var(--foreground);
   font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

body.modal-open  {
   overflow: hidden;
}

a  {
   color: inherit;
   text-decoration: none;
}

button,input  {
   font: inherit;
}

.sr-only,.honeypot  {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.icon,.brand-icon  {
   display: inline-block;
   width: 1.25rem;
   height: 1.25rem;
   flex: 0 0 auto;
   color: currentColor;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   vertical-align: -0.16em;
}

.icon--xs  {
   width: 0.95rem;
   height: 0.95rem;
}

.navbar  {
   position: fixed;
   inset: 0 0 auto;
   z-index: 40;
   border-bottom: 1px solid hsl(120 12% 88% / 0.5);
   background: hsl(80 40% 98% / 0.82);
   backdrop-filter: blur(16px);
}

.nav-inner,.footer-inner  {
   max-width: 1100px;
   height: 4rem;
   margin: 0 auto;
   padding: 0 1.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
}

.brand  {
   display: inline-flex;
   align-items: center;
   gap: 0.65rem;
   flex: 0 0 auto;
}

.brand-icon  {
   width: 1.75rem;
   height: 1.75rem;
   color: var(--primary);
}

.brand-text,.brand-gradient  {
   background: linear-gradient(90deg, var(--foreground), var(--primary));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.brand-text  {
   font-size: 1.5rem;
   font-weight: 800;
}

.page  {
   min-height: 100vh;
   padding-top: 4rem;
}

.hero  {
   padding: 2.5rem 1.5rem 1.5rem;
   display: flex;
   justify-content: center;
}

.hero-card  {
   position: relative;
   width: 100%;
   max-width: 56rem;
   overflow: hidden;
   border: 2px solid hsl(125 95% 30% / 0.2);
   border-radius: 1.5rem;
   box-shadow: var(--shadow);
   background: linear-gradient(145deg, hsl(65 100% 78% / 0.35), hsl(81 100% 46% / 0.2) 25%, hsl(119 99% 41% / 0.12) 50%, hsl(125 95% 30% / 0.08) 75%, hsl(0 0% 100% / 0.9));
}

.hero-content  {
   position: relative;
   z-index: 1;
   max-width: 48rem;
   padding: 4rem 3rem;
}

.pill  {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 1.5rem;
   padding: 0.38rem 1rem;
   border: 1px solid hsl(81 100% 46% / 0.3);
   border-radius: 999px;
   background: hsl(81 100% 46% / 0.1);
   color: var(--primary);
   font-size: 0.875rem;
   font-weight: 700;
}

h1,h2,h3,h4,p  {
   margin-top: 0;
}

h1  {
   max-width: 46rem;
   margin-bottom: 1.25rem;
   font-size: clamp(2rem, 5vw, 3.75rem);
   line-height: 1.08;
   font-weight: 800;
   text-wrap: balance;
}

h1 span {
   background: linear-gradient(90deg, var(--primary), var(--accent), var(--accent-org));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.hero-copy  {
   max-width: 36rem;
   margin-bottom: 2rem;
   color: var(--muted-foreground);
   font-size: clamp(1.08rem, 2vw, 1.25rem);
   line-height: 1.65;
}

u  {
   text-decoration-color: hsl(125 95% 30% / 0.4);
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
}

.hero-actions  {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   flex-wrap: wrap;
}

.button  {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   min-height: 2.75rem;
   border: 0;
   border-radius: 999px;
   padding: 0 1.5rem;
   cursor: pointer;
   font-weight: 700;
   transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.button:hover  {
   transform: translateY(-1px);
}

.button--primary  {
   background: var(--primary);
   color: var(--primary-foreground);
   box-shadow: 0 14px 30px hsl(125 95% 30% / 0.22);
}

.button--primary:hover  {
   box-shadow: 0 16px 36px hsl(125 95% 30% / 0.32);
}

.button--ghost  {
   color: var(--muted-foreground);
   background: transparent;
}

.button--ghost:hover  {
   color: var(--foreground);
   background: hsl(120 12% 88% / 0.3);
}

.button--outline  {
   border: 1px solid hsl(125 95% 30% / 0.4);
   color: var(--foreground);
   background: transparent;
}

.button--light  {
   background: var(--primary-foreground);
   color: var(--primary);
   box-shadow: 0 18px 42px hsl(0 0% 0% / 0.18);
}

.button--lg  {
   min-height: 3rem;
   padding-inline: 2rem;
}

.button--sm  {
   min-height: 2.25rem;
   padding-inline: 1.25rem;
   font-size: 0.875rem;
}

.button--full  {
   width: 100%;
}

.section  {
   padding: 5rem 1.5rem;
}

.section--soft  {
   background: hsl(65 80% 90% / 0.4);
}

.narrow  {
   max-width: 48rem;
   margin: 0 auto;
}

.note-card  {
   padding: clamp(2rem, 5vw, 3rem);
   border: 1px solid var(--border);
   border-radius: 0.75rem;
   background: var(--card);
   box-shadow: 0 1px 4px hsl(150 30% 10% / 0.05);
}

.note-card h2,.section-heading h2  {
   margin-bottom: 1rem;
   font-size: clamp(1.75rem, 3vw, 2.25rem);
   line-height: 1.2;
}

.prose  {
   color: var(--muted-foreground);
   font-size: 1.125rem;
   line-height: 1.72;
}

.prose p  {
   margin-bottom: 1.25rem;
}

.statement  {
   margin: 2.5rem 0;
   font-size: 1.25rem;
   line-height: 1.6;
   font-weight: 700;
}

.signature-wrap  {
   display: flex;
   justify-content: flex-end;
   margin-top: 3rem;
}

.signature  {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.signature-text  {
   text-align: right;
}

.signature p  {
   margin: 0;
   font-family: "Caveat", cursive;
   font-size: 1.5rem;
   color: var(--foreground);
}

.signature span,.signature a  {
   display: block;
   color: var(--muted-foreground);
   font-size: 0.875rem;
}

.signature a  {
   margin-top: 0.15rem;
   color: var(--primary);
}

.signature-avatar  {
   display: inline-flex;
   width: 3.5rem;
   height: 3.5rem;
   flex: 0 0 3.5rem;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border: 2px solid var(--primary);
   border-radius: 999px;
   background: hsl(125 95% 30% / 0.1);
   color: var(--primary);
   font-size: 0.875rem;
   font-weight: 600;
}

.signature-avatar img  {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.section-heading  {
   max-width: 56rem;
   margin: 0 auto 3.5rem;
   text-align: center;
}

.section-heading p  {
   color: var(--muted-foreground);
   font-size: 1.125rem;
   line-height: 1.65;
}

.split-card  {
   max-width: 56rem;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   overflow: hidden;
   border: 1px solid var(--border);
   border-radius: 1rem;
   background: var(--card);
   box-shadow: 0 1px 5px hsl(150 30% 10% / 0.06);
}

.split-panel  {
   padding: clamp(2rem, 4vw, 2.5rem);
}

.split-panel--org  {
   border-left: 1px solid var(--border);
   background: hsl(65 80% 90% / 0.3);
}

.eyebrow  {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 1.5rem;
   color: var(--primary);
   font-size: 0.75rem;
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.eyebrow--accent  {
   color: var(--accent);
}

.icon-box  {
   width: 2.5rem;
   height: 2.5rem;
   display: grid;
   place-items: center;
   border-radius: 0.75rem;
   background: hsl(125 95% 30% / 0.1);
   font-size: 1rem;
   letter-spacing: 0;
}

.icon-box--accent  {
   background: hsl(119 99% 41% / 0.1);
}

.split-panel h3  {
   margin-bottom: 1rem;
   font-size: 1.5rem;
}

.split-panel p,.product-card p,.comparison-card p  {
   color: var(--muted-foreground);
   line-height: 1.65;
}

.check-list  {
   margin: 1.5rem 0;
   padding: 0;
   list-style: none;
}

.check-list li  {
   display: flex;
   align-items: flex-start;
   gap: 0.65rem;
   margin-bottom: 0.75rem;
   font-size: 0.875rem;
}

.check-list .icon  {
   width: 1rem;
   height: 1rem;
   margin-top: 0.12rem;
   color: var(--primary);
}

.check-list--accent .icon  {
   color: var(--accent);
}

.panel-close  {
   margin-bottom: 0;
   color: var(--primary) !important;
   font-size: 0.875rem;
   font-weight: 700;
}

.panel-close--accent  {
   color: var(--accent) !important;
}

.product-grid,.comparison-grid  {
   max-width: 56rem;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1rem;
}

.product-card,.comparison-card  {
   border: 1px solid var(--border);
   border-top: 2px solid hsl(125 95% 30% / 0.2);
   border-radius: 1.25rem;
   background: var(--card);
   padding: clamp(1.5rem, 3vw, 2rem);
   box-shadow: 0 1px 5px hsl(150 30% 10% / 0.05);
   transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.product-card:hover,.comparison-card:hover  {
   transform: translateY(-3px);
   box-shadow: 0 12px 26px hsl(150 30% 10% / 0.08);
}

.product-card--tall  {
   grid-row: span 2;
}

.product-card--steps  {
   grid-row: span 4;
   background: linear-gradient(0deg, hsl(0 0% 100% / 0), hsl(80 20% 96% / 0.65));
}

.product-card--green  {
   background: linear-gradient(135deg, hsl(125 95% 30% / 0.04), hsl(81 100% 46% / 0.06));
}

.product-card--warm  {
   border-top-color: hsl(65 100% 78% / 0.3);
   background: linear-gradient(145deg, hsl(65 100% 78% / 0.14), hsl(80 40% 98% / 0.3));
}

.product-card--soft  {
   background: linear-gradient(160deg, hsl(65 80% 90% / 0.3), hsl(119 99% 41% / 0.04));
}

.product-card h3  {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.8rem;
   font-size: 1.125rem;
}

.product-card h3 .icon  {
   color: var(--primary);
}

.steps  {
   margin-top: 1rem;
}

.step  {
   position: relative;
   margin-left: 0.9rem;
   padding: 0 0 1.25rem 1.5rem;
   border-left: 2px solid hsl(125 95% 30% / 0.15);
}

.step:last-child  {
   border-left-color: transparent;
   padding-bottom: 0;
}

.step span  {
   position: absolute;
   left: -0.9rem;
   top: 0;
   width: 1.75rem;
   height: 1.75rem;
   display: grid;
   place-items: center;
   border: 1px solid hsl(125 95% 30% / 0.2);
   border-radius: 0.5rem;
   background: var(--card);
   color: hsl(125 95% 30% / 0.65);
   font-size: 0.6rem;
   font-weight: 800;
}

.step small  {
   display: block;
   margin-bottom: 0.16rem;
   color: hsl(125 95% 30% / 0.6);
   font-size: 0.62rem;
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.step h4  {
   margin-bottom: 0.25rem;
   font-size: 0.9rem;
}

.step p  {
   margin-bottom: 0;
   font-size: 0.75rem;
}

.comparison-card  {
   border-top-width: 1px;
   border-radius: 1rem;
}

.small-icon  {
   width: 2.25rem;
   height: 2.25rem;
   display: grid;
   place-items: center;
   margin-bottom: 1rem;
   border-radius: 0.55rem;
   background: var(--secondary);
   color: var(--muted-foreground);
}

.comparison-card h3  {
   font-size: 1rem;
}

.comparison-card p,.comparison-card strong  {
   font-size: 0.875rem;
}

.comparison-card ul  {
   margin: 1rem 0 1.25rem;
   padding: 0;
   list-style: none;
}

.comparison-card li  {
   position: relative;
   margin-bottom: 0.45rem;
   padding-left: 1.25rem;
   color: var(--muted-foreground);
   font-size: 0.75rem;
}

.comparison-card li::before  {
   content: "×";
   position: absolute;
   left: 0;
   color: hsl(0 72% 51% / 0.65);
}

.comparison-card strong  {
   display: block;
   padding-top: 1rem;
   border-top: 1px solid var(--border);
   color: var(--primary);
   line-height: 1.6;
}

.cta  {
   position: relative;
   overflow: hidden;
   padding: 6rem 1.5rem;
   background: linear-gradient(135deg, hsl(125 95% 22%), hsl(119 90% 28%) 40%, hsl(120, 85%, 31%));
   text-align: center;
}

.cta-inner  {
   position: relative;
   z-index: 1;
   max-width: 56rem;
   margin: 0 auto;
}

.cta h2  {
   margin-bottom: 1.25rem;
   color: var(--primary-foreground);
   font-size: clamp(2rem, 4vw, 2.5rem);
   line-height: 1.2;
}

.cta h2 span  {
   color: var(--accent-org);
}

.cta p  {
   color: hsl(0 0% 100% / 0.76);
   font-size: 1.125rem;
}

.microcopy  {
   margin-top: 1.25rem;
   color: hsl(0 0% 100% / 0.52) !important;
   font-size: 0.75rem !important;
}

.inline-form  {
   display: flex;
   justify-content: center;
   gap: 0.75rem;
   width: min(100%, 28rem);
   margin: 0 auto;
}

.inline-form input[type="email"]  {
   width: 100%;
   min-height: 3rem;
   border: 1px solid transparent;
   border-radius: 999px;
   padding: 0 1.25rem;
   background: hsl(0 0% 100% / 0.95);
   color: var(--primary-dark);
   outline: none;
}

.inline-form input[type="email"]:focus  {
   border-color: var(--accent-org);
   box-shadow: 0 0 0 4px hsl(81 100% 46% / 0.18);
}

.form-message  {
   width: min(100%, 32rem);
   margin: 1rem auto;
   padding: 0.85rem 1rem;
   border-radius: 0.75rem;
   font-size: 0.95rem;
   font-weight: 700;
}

.form-message--success  {
   border: 1px solid hsl(119 99% 41% / 0.3);
   background: hsl(119 99% 41% / 0.12);
   color: hsl(125 80% 18%);
}

.cta .form-message--success  {
   color: var(--primary-foreground);
}

.form-message--error  {
   border: 1px solid hsl(0 72% 51% / 0.28);
   background: hsl(0 72% 51% / 0.12);
   color: hsl(0 72% 40%);
}

.cta .form-message--error  {
   color: var(--primary-foreground);
}

.footer  {
   border-top: 1px solid var(--border);
   padding: 1.5rem 0;
}

.footer-inner  {
   height: auto;
   color: var(--muted-foreground);
   font-size: 0.875rem;
}

.modal  {
   position: fixed;
   inset: 0;
   z-index: 80;
   display: none;
   place-items: center;
   padding: 1rem;
}

.modal.is-open  {
   display: grid;
}

.modal-backdrop  {
   position: absolute;
   inset: 0;
   background: rgb(0 0 0 / 0.8);
}

.modal .button  {
   min-height: 2.5rem;
   padding-inline: 1rem;
   font-size: 0.875rem;
   font-weight: 500;
   box-shadow: none;
}

.modal .button:hover  {
   transform: none;
   box-shadow: none;
}

.modal-panel  {
   position: relative;
   z-index: 1;
   display: grid;
   gap: 0;
   width: min(100%, 32rem);
   border: 1px solid var(--border);
   border-radius: 0.75rem;
   background-color: var(--background);
   background-image: linear-gradient(to bottom right, var(--card), var(--card), hsl(65 80% 90% / 0.3));
   padding: clamp(2rem, 5vw, 3rem);
   line-height: 1.5;
   box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.modal-close  {
   position: absolute;
   top: 1rem;
   right: 1rem;
   width: 1rem;
   height: 1rem;
   border: 0;
   border-radius: 999px;
   background: transparent;
   color: var(--foreground);
   cursor: pointer;
   font-size: 1rem;
   line-height: 1;
   opacity: 0.7;
}

.modal-panel h2  {
   margin-bottom: 2rem;
   font-size: clamp(1.5rem, 4vw, 1.875rem);
   line-height: 1.2;
}

.modal-copy  {
   margin-bottom: 2rem;
   color: var(--muted-foreground);
   font-size: 1.125rem;
   line-height: 1.625;
}

.modal-copy p  {
   margin-bottom: 1rem;
}

.modal-copy p:last-child  {
   margin-bottom: 0;
}

.modal-section--primary  {
   margin-bottom: 1.5rem;
}

.modal-section--secondary  {
   margin-bottom: 2.5rem;
}

.modal-note  {
   margin: 0.5rem 0 0;
   color: var(--muted-foreground);
   font-size: 0.75rem;
   text-align: center;
}

.separator  {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin: 0 0 1.5rem;
   color: hsl(150 15% 40% / 0.65);
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.separator::before,.separator::after  {
   content: "";
   height: 1px;
   flex: 1;
   background: var(--border);
}

.modal-signature  {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}

.modal-signature > p  {
   margin: 0;
   color: var(--muted-foreground);
   font-family: "Caveat", cursive;
   font-size: 1.875rem;
}

.orb  {
   position: absolute;
   border-radius: 999px;
   filter: blur(56px);
   pointer-events: none;
}

.orb--hero-a  {
   top: -5rem;
   right: -5rem;
   width: 16rem;
   height: 16rem;
   background: hsl(81 100% 46% / 0.2);
}

.orb--hero-b  {
   left: -4rem;
   bottom: -4rem;
   width: 12rem;
   height: 12rem;
   background: hsl(119 99% 41% / 0.1);
}

.orb--cta-a  {
   top: 0;
   right: 0;
   width: 24rem;
   height: 24rem;
   background: hsl(81 100% 46% / 0.2);
}

.orb--cta-b  {
   left: 0;
   bottom: 0;
   width: 18rem;
   height: 18rem;
   background: hsl(119 99% 41% / 0.15);
}

@media (max-width: 760px)  {
   .nav-inner,  .footer-inner  {
     padding-inline: 1rem;
   }

   .brand-text  {
     font-size: 1.3rem;
   }

   .hero  {
     padding-inline: 1rem;
   }

   .hero-content  {
     padding: 2.5rem 1.5rem;
   }

   .hero-actions,  .inline-form,  .footer-inner,  .modal-signature  {
     align-items: stretch;
     flex-direction: column;
   }

   .hero-actions .button,  .inline-form .button  {
     width: 100%;
   }

   .section  {
     padding: 4rem 1rem;
   }

   .split-card,  .product-grid,  .comparison-grid  {
     grid-template-columns: 1fr;
   }

   .split-panel--org  {
     border-left: 0;
     border-top: 1px solid var(--border);
   }

   .product-card--tall,  .product-card--steps  {
     grid-row: auto;
   }

   .footer-inner  {
     text-align: center;
   }

}