/* PrimeHavest — design tokens
   Palette: forest green (trust, agriculture), harvest gold (grain/spice), soil brown, warm cream
*/
:root{
  --ph-forest: #1F4B3F;
  --ph-forest-dark: #14332A;
  --ph-gold: #C89B3C;
  --ph-gold-dark: #A87F2A;
  --ph-soil: #6B4226;
  --ph-cream: #FAF7F0;
  --ph-ink: #1B1F1C;
  --ph-ink-soft: #4B554F;
  --ph-line: #E3DDCC;
}

*{ box-sizing: border-box; }

body{
  background: var(--ph-cream);
  color: var(--ph-ink);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4, .ph-display{
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 600;
  color: var(--ph-forest-dark);
  letter-spacing: -0.01em;
}

p{ max-width: 62ch; }
.ph-wide p{ max-width: none; }

a{ color: var(--ph-forest); text-decoration: none; }
a:hover{ color: var(--ph-gold-dark); }

/* Navbar */
.ph-navbar{
  background: var(--ph-forest-dark);
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.ph-navbar .navbar-brand{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
}
.ph-logo-mark{ font-size: 1.1rem; }
.ph-navbar .nav-link{
  color: rgba(255,255,255,.82);
  font-weight: 500;
  font-size: .93rem;
  padding: .5rem .8rem;
}
.ph-navbar .nav-link:hover{ color: #fff; }

.btn-ph-primary{
  background: var(--ph-gold);
  border: 1px solid var(--ph-gold);
  color: var(--ph-forest-dark);
  font-weight: 600;
}
.btn-ph-primary:hover{
  background: var(--ph-gold-dark);
  border-color: var(--ph-gold-dark);
  color: #fff;
}
.btn-ph-outline{
  background: transparent;
  border: 1.5px solid var(--ph-forest);
  color: var(--ph-forest);
  font-weight: 600;
}
.btn-ph-outline:hover{
  background: var(--ph-forest);
  color: #fff;
}
.btn-ph-outline-light{
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.6);
  color: #fff;
  font-weight: 600;
}
.btn-ph-outline-light:hover{
  background: #fff;
  color: var(--ph-forest-dark);
  border-color: #fff;
}

/* Hero */
.ph-hero{
  background:
    linear-gradient(120deg, rgba(20,51,42,.94) 0%, rgba(31,75,63,.88) 55%, rgba(168,127,42,.55) 100%),
    var(--ph-forest-dark);
  color: #fff;
  padding: 5.5rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.ph-hero::after{
  content: "";
  position: absolute;
  right: -6%;
  bottom: -30%;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}
.ph-hero-eyebrow{
  color: var(--ph-gold);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .75rem;
}
.ph-hero h1{
  color: #fff;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  max-width: 15ch;
}
.ph-hero p.lead{
  color: rgba(255,255,255,.85);
  max-width: 48ch;
  font-size: 1.15rem;
}

/* Sections */
.ph-section{ padding: 4.5rem 0; }
.ph-section-alt{ background: #fff; }
.ph-section-forest{ background: var(--ph-forest-dark); color: rgba(255,255,255,.9); }
.ph-section-forest h2, .ph-section-forest h3{ color: #fff; }
.ph-eyebrow{
  color: var(--ph-gold-dark);
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .5rem;
}
.ph-section-forest .ph-eyebrow{ color: var(--ph-gold); }

/* Product cards */
.ph-product-card{
  background: #fff;
  border: 1px solid var(--ph-line);
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  transition: border-color .15s ease;
}
.ph-product-card:hover{ border-color: var(--ph-gold); }
.ph-product-swatch{
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
}
.ph-product-card .card-body{ padding: 1.25rem 1.25rem 1.5rem; }
.ph-product-card h5{ font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--ph-forest-dark); }

/* How it works — this IS a sequence, so step numbers are meaningful here */
.ph-flow{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}
.ph-flow-step{
  flex: 1 1 150px;
  text-align: center;
  padding: 1rem .5rem;
  position: relative;
}
.ph-flow-num{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ph-forest);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin: 0 auto .75rem;
}
.ph-flow-step h6{ font-weight: 600; color: var(--ph-forest-dark); margin-bottom: .25rem; }
.ph-flow-step p{ font-size: .87rem; color: var(--ph-ink-soft); margin: 0 auto; max-width: 20ch; }
.ph-flow-arrow{
  align-self: center;
  color: var(--ph-gold-dark);
  font-size: 1.4rem;
  padding: 0 .25rem;
}
@media (max-width: 767px){
  .ph-flow{ flex-direction: column; }
  .ph-flow-arrow{ transform: rotate(90deg); padding: .25rem 0; }
}

/* AI Assistant */
.ph-ai-panel{
  background: #fff;
  border: 1px solid var(--ph-line);
  border-radius: 8px;
  padding: 2rem;
}
.ph-ai-result{
  background: var(--ph-cream);
  border: 1px dashed var(--ph-gold-dark);
  border-radius: 8px;
  padding: 1.75rem;
}
.ph-ai-result h6{ color: var(--ph-forest-dark); font-weight: 600; margin-top: 1rem; }
.ph-ai-result h6:first-child{ margin-top: 0; }
.ph-checklist li{ margin-bottom: .35rem; }

/* Forms */
.form-label{ font-weight: 500; font-size: .9rem; color: var(--ph-ink); }
.form-control, .form-select{
  border-color: var(--ph-line);
  padding: .6rem .8rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--ph-forest);
  box-shadow: 0 0 0 .2rem rgba(31,75,63,.15);
}

/* Roadmap */
.ph-roadmap-item{
  border-left: 2px solid var(--ph-line);
  padding: 0 0 2rem 1.5rem;
  position: relative;
}
.ph-roadmap-item::before{
  content: "";
  position: absolute;
  left: -7px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ph-gold);
  border: 2px solid var(--ph-forest-dark);
}
.ph-roadmap-item.is-current::before{ background: var(--ph-forest); }
.ph-roadmap-item:last-child{ padding-bottom: 0; }

/* Footer */
.ph-footer{ background: var(--ph-forest-dark); color: rgba(255,255,255,.7); }
.ph-footer a{ color: rgba(255,255,255,.7); }
.ph-footer a:hover{ color: var(--ph-gold); }
.ph-footer-brand{ color: #fff; font-family: 'Poppins', sans-serif; }
.fw-600{ font-weight: 600; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--ph-gold-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}