/* ============================================================
   Farmrix design upgrade — shared treatment
   Reference: the dark final-CTA band (.band/.final):
   near-black container + blurred bokeh blobs (violet/blue/pink/mint),
   uppercase extra-bold display type with one gradient phrase,
   hand-drawn doodle accents.
   Hue family: #8B7CF7 #5B9DF7 #F97CC0 #5BE7C4 + brand pastels
   #F9A8C6 #FFC38A #B7A4FF #6EE7B7
   ============================================================ */

/* ---------- 1. DARK SECTIONS: bokeh glow field ---------- */
.darksec,
.quote-band.qdark,
.frx-darkband{position:relative;overflow:hidden}
.darksec::before,
.quote-band.qdark::before,
.frx-darkband::before{
  content:"";position:absolute;inset:-60px;pointer-events:none;z-index:0;
  background:
    radial-gradient(640px 420px at 10% 4%,rgba(139,124,247,.34),transparent 62%),
    radial-gradient(560px 400px at 92% 10%,rgba(91,157,247,.26),transparent 60%),
    radial-gradient(600px 440px at 86% 90%,rgba(249,124,192,.22),transparent 62%),
    radial-gradient(520px 400px at 4% 94%,rgba(91,231,196,.20),transparent 60%),
    radial-gradient(460px 340px at 70% 48%,rgba(139,124,247,.10),transparent 65%);
  filter:blur(56px);
}
.darksec>*,.quote-band.qdark>*,.frx-darkband>*{position:relative;z-index:1}
/* nested quote inside a dark section: one glow field only */
.darksec .quote-band.qdark::before{display:none}

/* ---------- 2. DARK PANELS (comparison "Farmrix" column, sticky
   pro CTA card, popular plan card): bokeh-lite + gradient hairline */
.cmp-col.us,.procta,.plan.pop,.pstate{
  overflow:hidden;
  border:1px solid transparent!important;
  background-image:linear-gradient(#111,#111),
    linear-gradient(135deg,rgba(139,124,247,.65),rgba(249,124,192,.45) 45%,rgba(91,231,196,.55))!important;
  background-origin:border-box!important;
  background-clip:padding-box,border-box!important;
}
.cmp-col.us{position:relative}
.plan.pop{position:relative}
.pstate{position:relative}
.cmp-col.us::before,.procta::before,.plan.pop::before,.pstate::before{
  content:"";position:absolute;inset:-40px;pointer-events:none;z-index:0;
  background:
    radial-gradient(300px 220px at 90% -6%,rgba(139,124,247,.40),transparent 65%),
    radial-gradient(280px 200px at -8% 106%,rgba(91,231,196,.26),transparent 65%),
    radial-gradient(260px 200px at 106% 92%,rgba(249,124,192,.26),transparent 65%);
  filter:blur(42px);
}
.cmp-col.us>*,.procta>*,.pstate>*{position:relative;z-index:1}
/* page CSS makes .procta static on mobile — keep it a containing block
   so the glow stays clipped inside the card */
@media(max-width:860px){.procta{position:relative!important}}
.plan.pop>*:not(.pbadge){position:relative;z-index:1}
.plan.pop .pbadge{z-index:2}

/* ---------- 3. Reference display type + gradient phrase ---------- */
.frx-disp{text-transform:uppercase;font-weight:800!important;letter-spacing:-.025em!important;line-height:.95!important}
.frx-disp em{font-style:normal!important}
.frx-glow{
  background:linear-gradient(92deg,#8FE9FF 0%,#C9B8FF 45%,#F0A8FF 75%,#8FF0D2 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(150,170,255,.5));
  font-style:normal;
}

/* ---------- 4. Doodle accents (thin white hand-drawn strokes) ---------- */
.darksec::after,.frx-darkband::after,.final::after,.finalcta .cta-band::after{
  content:"";position:absolute;pointer-events:none;z-index:2;
  background-repeat:no-repeat;background-size:contain;background-position:center;
}
/* sparkle */
.darksec::after,.frx-darkband::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 9 L33.6 24.4 L49 28 L33.6 31.6 L30 47 L26.4 31.6 L11 28 L26.4 24.4 Z'/%3E%3Cpath d='M47 10 v7 M43.5 13.5 h7'/%3E%3C/svg%3E");
}
.darksec::after{width:52px;height:52px;top:66px;left:calc(50% + 310px);opacity:.85}
.frx-darkband::after{width:38px;height:38px;top:14px;right:7%;opacity:.7}
/* heart (same drawing as the reference band doodle) */
.final::after,.finalcta .cta-band::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 70' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M30 40 C 22 30, 30 18, 42 24 C 46 12, 62 14, 62 28 C 62 42, 44 52, 38 56 C 34 50, 32 46, 30 40z'/%3E%3Cpath d='M78 24 c 6 -10, 20 -6, 18 4 M96 44 l8 -2'/%3E%3C/svg%3E");
}
.final{position:relative}
.final::after{width:104px;height:66px;top:46px;left:calc(50% + 200px);opacity:.85}

/* ---------- 5. LIGHT THEME: eyebrows as gradient-tint pills ---------- */
.sec-head .eyebrow{
  display:inline-block;padding:5px 14px;border-radius:999px;
  background:linear-gradient(120deg,rgba(249,168,198,.30),rgba(183,164,255,.26) 55%,rgba(110,231,183,.32));
  color:#4A3AA8;font-size:12px;letter-spacing:.1em;
}
/* dark problem-statement panel (persona pages): dark-friendly pill */
.pstate .eyebrow{
  display:inline-block;align-self:flex-start;padding:5px 14px;border-radius:999px;
  background:linear-gradient(120deg,rgba(139,124,247,.28),rgba(249,124,192,.22) 60%,rgba(91,231,196,.24));
  color:#E9E4FF;font-size:12px;letter-spacing:.1em;
}

/* ---------- 6. Card grids: pastel corner washes + gradient
   hairline border on hover ---------- */
.fgrid .fcard{position:relative;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}
.fgrid .fcard::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(340px 200px at 88% -12%,rgba(183,164,255,.18),transparent 68%)}
.fgrid .fcard:nth-child(4n+1)::before{background:radial-gradient(340px 200px at 88% -12%,rgba(249,168,198,.20),transparent 68%)}
.fgrid .fcard:nth-child(4n+2)::before{background:radial-gradient(340px 200px at -10% -14%,rgba(255,195,138,.22),transparent 68%)}
.fgrid .fcard:nth-child(4n+3)::before{background:radial-gradient(340px 200px at 88% -12%,rgba(183,164,255,.18),transparent 68%)}
.fgrid .fcard:nth-child(4n)::before{background:radial-gradient(340px 200px at -10% -14%,rgba(110,231,183,.22),transparent 68%)}
.fgrid .fcard:hover{
  border-color:transparent;
  background-image:linear-gradient(#fff,#fff),linear-gradient(120deg,#F9A8C6,#FFC38A 35%,#B7A4FF 70%,#6EE7B7);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 10px 30px rgba(17,17,17,.07);
}

/* light pricing cards get the same spirit */
.plans .plan:not(.pop){position:relative;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}
.plans .plan:not(.pop)::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(340px 190px at 85% -14%,rgba(183,164,255,.14),transparent 68%)}
.plans .plan:not(.pop):nth-child(odd)::before{
  background:radial-gradient(340px 190px at -10% -14%,rgba(249,168,198,.15),transparent 68%)}
.plans .plan:not(.pop):hover{
  border-color:transparent;
  background-image:linear-gradient(#fff,#fff),linear-gradient(120deg,#F9A8C6,#FFC38A 35%,#B7A4FF 70%,#6EE7B7);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 10px 30px rgba(17,17,17,.07);
}

/* ---------- 7. Step lists: gradient number badges + connector ---------- */
.frx-stepno{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 10px;border-radius:10px;
  font-size:13.5px;font-weight:800;letter-spacing:.02em;color:#241C5C;
  background:linear-gradient(135deg,#DCD2FF,#F9D3E6);
  position:relative;z-index:1;
}
.frx-steps{position:relative}
.frx-steps::before{content:"";position:absolute;top:43px;left:32px;right:32px;height:2px;
  background:linear-gradient(90deg,#F9A8C6,#FFC38A 33%,#B7A4FF 66%,#6EE7B7);opacity:.55}
.frx-steps .fcard:nth-child(1) .frx-stepno{background:linear-gradient(135deg,#FBD0E0,#FFE1C4);color:#7A2148}
.frx-steps .fcard:nth-child(2) .frx-stepno{background:linear-gradient(135deg,#FFE1C4,#DCD2FF);color:#8A4A12}
.frx-steps .fcard:nth-child(3) .frx-stepno{background:linear-gradient(135deg,#DCD2FF,#C9F3E2);color:#41319E}
.frx-steps .fcard:nth-child(4) .frx-stepno{background:linear-gradient(135deg,#C9F3E2,#FBD0E0);color:#0B5E41}
@media(max-width:1100px){.frx-steps::before{display:none}}

/* prose step list (guide pages): gradient dots + connector line */
.frx-plist{list-style:none!important;padding-left:0!important}
.frx-plist>li{position:relative;padding-left:34px;list-style:none}
.frx-plist>li::marker{content:""}
.frx-plist>li::before{content:"";position:absolute;left:5px;top:.5em;width:11px;height:11px;border-radius:50%;
  background:linear-gradient(135deg,#B7A4FF,#F9A8C6)}
.frx-plist>li:nth-child(even)::before{background:linear-gradient(135deg,#6EE7B7,#B7A4FF)}
.frx-plist>li::after{content:"";position:absolute;left:10px;top:calc(.5em + 14px);bottom:-.85em;width:2px;
  background:linear-gradient(180deg,rgba(183,164,255,.55),rgba(110,231,183,.45))}
.frx-plist>li:last-child::after{display:none}

/* ---------- 8. Comparison tables: Farmrix column ---------- */
.ctbl th.us{background:linear-gradient(115deg,#31246E,#6A3DAB 55%,#A03D8C)!important;color:#fff!important}
.ctbl td:nth-child(2){background:linear-gradient(180deg,rgba(183,164,255,.12),rgba(110,231,183,.08))}
/* light column of the two-up comparison gets a soft top wash */
.cmp-col:not(.us){position:relative;overflow:hidden}
.cmp-col:not(.us)::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 220px at 12% -14%,rgba(255,195,138,.16),transparent 70%)}

/* ---------- 9. Quote / testimonial blocks ---------- */
.wrap:has(>.tcard){position:relative}
.wrap:has(>.tcard)::before{content:"";position:absolute;left:50%;top:50%;width:min(780px,92%);height:120%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(183,164,255,.20),rgba(249,168,198,.13) 55%,transparent 78%);
  filter:blur(44px)}
.tcard{position:relative}
.tcard .qm{background:linear-gradient(120deg,#8B7CF7,#F97CC0);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#8B7CF7}
.quote-band:not(.qdark) .quote-in{position:relative}
.quote-band:not(.qdark) .quote-in::before{content:"";position:absolute;left:50%;top:42%;width:min(720px,94%);height:115%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(183,164,255,.17),rgba(110,231,183,.10) 55%,transparent 78%);
  filter:blur(46px)}
.quote-band:not(.qdark) .q-line{color:#B7A4FF!important}

/* ---------- 10. Stat callouts: gradient numbers ---------- */
.frx-stat{font-size:40px;font-weight:800;letter-spacing:-1.5px;
  background:linear-gradient(100deg,#5F41C9,#C2367E 62%,#B44E12);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#5F41C9}

/* ---------- 11. go/ landing pages: final CTA band ---------- */
.finalcta .cta-band::before{content:"";position:absolute;inset:-40px;pointer-events:none;z-index:0;
  background:
    radial-gradient(420px 320px at 84% -2%,rgba(139,124,247,.32),transparent 62%),
    radial-gradient(380px 300px at -2% 102%,rgba(249,124,192,.24),transparent 62%),
    radial-gradient(360px 280px at 102% 88%,rgba(91,157,247,.24),transparent 62%);
  filter:blur(48px)}
.finalcta .cta-band::after{width:96px;height:60px;top:38px;left:calc(50% + 265px);opacity:.9}
.finalcta .cta-band h2.frx-disp{font-weight:800!important;letter-spacing:-.02em!important;line-height:1!important;max-width:820px!important}
.finalcta .capture{position:relative;z-index:1;display:flex;gap:8px;max-width:440px;margin:28px auto 6px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:6px}
.finalcta .capture input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-size:15px;
  padding:10px 14px;font-family:inherit}
.finalcta .capture input::placeholder{color:rgba(255,255,255,.45)}
.finalcta .capture button{background:#fff;color:#0F3D1E;border:0;border-radius:10px;padding:10px 20px;
  font-weight:600;font-size:14.5px;cursor:pointer;font-family:inherit;white-space:nowrap}
.finalcta .frx-rating{position:relative;z-index:1;display:flex;gap:10px;align-items:center;justify-content:center;
  margin-top:16px;font-size:13px;color:rgba(255,255,255,.6);flex-wrap:wrap}
.finalcta .frx-rating .g2{background:rgba(255,255,255,.16);border-radius:6px;padding:2px 7px;font-weight:700;color:#fff}
.finalcta .frx-rating .stars{display:inline-flex;gap:2px}
.finalcta .frx-rating .stars svg{width:13px;height:13px;fill:#fff}
.finalcta .frx-rating .div{width:1px;height:14px;background:rgba(255,255,255,.2)}
.finalcta .frx-rating b{color:#fff}

/* ---------- 12. Motion & mobile ---------- */
@media (prefers-reduced-motion:reduce){
  .finalcta .cta-band .gA,.finalcta .cta-band .gB{animation:none!important}
}
@media(max-width:700px){
  .darksec::after{left:auto;right:6%;top:38px;width:40px;height:40px}
  .final::after{left:auto;right:7%;top:30px;width:68px;height:44px}
  .finalcta .cta-band::after{left:auto;right:6%;top:26px;width:62px;height:40px}
  .frx-darkband::after{display:none}
  .frx-stat{font-size:34px}
}