/* ============================================================
   SOLUTIONS PAGES — scoped under #sol-page

   Deliberately NOT /ac-page.css. The agent section owns the
   hero-with-product-mock + 3x2 bento + navy steps pattern.
   Solutions gets its own: a typographic opening with no product
   visual, a 5x2 micro-bento of benefits, and a testimonial where
   the agent pages put a feature section.
   ============================================================ */

#sol-page{
  --orange:var(--color-orange,#FF731E);
  --accent:var(--color-accent,#C2410C);
  --accent-hover:var(--color-accent-hover,#A63A0A);
  --ink:var(--color-ink,#1C1917);
  --muted:var(--color-muted,#57534E);
  --line:var(--color-line,#E7E2DA);
  --line-soft:#EFEAE2;
  --bg:var(--color-bg,#FCFBF9);
  --bg-soft:var(--color-bg-soft,#F4F0EA);
  --container:74.5rem;
  font-family:Inter,Arial,sans-serif;color:var(--ink);font-size:1rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
#sol-page *,#sol-page *::before,#sol-page *::after{box-sizing:border-box;margin:0;padding:0;}
#sol-page a{text-decoration:none;color:inherit;}
#sol-page ul{list-style:none;}
#sol-page .sp-container{max-width:var(--container);margin:0 auto;padding:0 1.5rem;}
#sol-page .sp-section{padding:5.5rem 0;}
#sol-page .sp-section.is-soft{background:var(--bg-soft);}
#sol-page [id]{scroll-margin-top:6rem;}

#sol-page .sp-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
}
#sol-page h1,#sol-page h2,#sol-page h3{color:var(--ink);text-wrap:balance;}
#sol-page .sp-h1{font-size:clamp(2.5rem,5.2vw,4rem);font-weight:800;line-height:1.04;letter-spacing:-.035em;}
#sol-page .sp-h2{font-size:clamp(1.875rem,3.2vw,2.5rem);font-weight:800;line-height:1.12;letter-spacing:-.028em;}
#sol-page .sp-lede{font-size:1.1875rem;line-height:1.6;color:var(--muted);text-wrap:pretty;}

#sol-page .sp-head{max-width:44rem;margin:0 auto 3rem;display:grid;gap:1rem;justify-items:center;text-align:center;}

/* ---------- buttons ---------- */
#sol-page .sp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:1rem;font-weight:600;line-height:1;padding:.9375rem 1.75rem;border-radius:10px;
  border:1px solid transparent;transition:background .15s,border-color .15s,color .15s,transform .15s;
}
#sol-page .sp-btn svg{width:1.0625rem;height:1.0625rem;}
#sol-page .sp-btn.is-solid{background:var(--ink);color:#fff;border-color:var(--ink);}
#sol-page .sp-btn.is-solid:hover{background:#332e2b;transform:translateY(-1px);}
#sol-page .sp-btn.is-ghost{background:#fff;color:var(--ink);border-color:var(--line);}
#sol-page .sp-btn.is-ghost:hover{border-color:var(--orange);color:var(--accent);}
#sol-page .sp-btn-row{display:flex;flex-wrap:wrap;gap:.875rem;justify-content:center;}

/* ============================================================
   1. OPENING — typographic, no product visual.
   Warm dot-grid field with a soft orange bloom behind the type.
   ============================================================ */
#sol-page .sp-open{
  position:relative;overflow:hidden;text-align:center;
  padding:5.5rem 0 4rem;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
#sol-page .sp-open::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at center, rgba(28,25,23,.09) 1px, transparent 1.4px);
  background-size:1.5rem 1.5rem;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 78%);
}
#sol-page .sp-open::after{
  content:"";position:absolute;left:50%;top:-16%;transform:translateX(-50%);
  width:min(58rem,110%);height:34rem;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,115,30,.20) 0%, rgba(255,115,30,.07) 42%, transparent 70%);
}
#sol-page .sp-open-in{position:relative;z-index:1;max-width:52rem;margin:0 auto;display:grid;gap:1.5rem;justify-items:center;}
#sol-page .sp-open .sp-lede{max-width:40rem;font-size:1.25rem;}
#sol-page .sp-open-micro{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;
  font-size:.875rem;font-weight:500;color:var(--muted);margin-top:.25rem;
}
#sol-page .sp-open-micro span{display:inline-flex;align-items:center;gap:.4375rem;}
#sol-page .sp-open-micro svg{width:.9375rem;height:.9375rem;color:#00875A;flex:none;}

/* Proof rail: numbers instead of a fabricated screenshot. */
#sol-page .sp-rail{
  position:relative;z-index:1;max-width:60rem;margin:3.5rem auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.86);
  overflow:hidden;
}
#sol-page .sp-rail-item{padding:1.5rem 1.25rem;text-align:center;border-right:1px solid var(--line);}
#sol-page .sp-rail-item:last-child{border-right:0;}
#sol-page .sp-rail-n{font-size:1.875rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;}
#sol-page .sp-rail-n em{font-style:normal;color:var(--orange);}
#sol-page .sp-rail-k{font-size:.8125rem;color:var(--muted);margin-top:.4375rem;line-height:1.4;}

/* ============================================================
   2. BENEFITS — 5x2 micro-bento. The section signature.
   Smaller cards than anywhere else on the site, icon-led.
   ============================================================ */
#sol-page .sp-bento{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;}
#sol-page .sp-b{
  display:grid;gap:.625rem;align-content:start;
  padding:1.375rem 1.25rem 1.5rem;
  border:1px solid var(--line-soft);border-radius:14px;background:#fff;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
#sol-page .sp-b:hover{border-color:rgba(255,115,30,.5);box-shadow:0 14px 30px -22px rgba(28,25,23,.5);transform:translateY(-2px);}
#sol-page .sp-b-ic{
  width:2.25rem;height:2.25rem;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,rgba(255,115,30,.14),rgba(194,65,12,.08));color:var(--accent);
}
#sol-page .sp-b-ic svg{width:1.1875rem;height:1.1875rem;}
#sol-page .sp-b h3{font-size:.9375rem;font-weight:700;line-height:1.3;letter-spacing:-.008em;}
#sol-page .sp-b p{font-size:.8125rem;line-height:1.5;color:var(--muted);}

@media (max-width:1180px){#sol-page .sp-bento{grid-template-columns:repeat(4,1fr);}}
@media (max-width:940px){#sol-page .sp-bento{grid-template-columns:repeat(3,1fr);}}
@media (max-width:680px){#sol-page .sp-bento{grid-template-columns:repeat(2,1fr);}}
@media (max-width:430px){#sol-page .sp-bento{grid-template-columns:1fr;}}

/* ============================================================
   3. TESTIMONIAL — where the agent pages put a feature section.
   ============================================================ */
#sol-page .sp-quote-sec{padding:5rem 0;background:var(--ink);}
#sol-page .sp-quote{max-width:50rem;margin:0 auto;text-align:center;display:grid;gap:1.75rem;justify-items:center;}
#sol-page .sp-quote-logo{
  display:inline-flex;align-items:baseline;gap:.4em;
  font-size:.875rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);
}
#sol-page .sp-quote-logo span{font-weight:500;color:rgba(255,255,255,.5);letter-spacing:.2em;}
#sol-page .sp-quote-t{
  font-size:clamp(1.375rem,2.6vw,1.875rem);font-weight:600;line-height:1.4;letter-spacing:-.018em;
  color:#fff;text-wrap:balance;
}
#sol-page .sp-quote-t::before{content:"\201C";}
#sol-page .sp-quote-t::after{content:"\201D";}
#sol-page .sp-quote-by{display:flex;align-items:center;gap:.875rem;}
#sol-page .sp-quote-av{
  width:3.25rem;height:3.25rem;border-radius:50%;overflow:hidden;flex:none;
  display:grid;place-items:center;background:var(--orange);color:#fff;font-weight:700;font-size:1rem;
}
#sol-page .sp-quote-av img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
#sol-page .sp-quote-meta{text-align:left;}
#sol-page .sp-quote-name{font-weight:700;font-size:.9375rem;color:#fff;}
#sol-page .sp-quote-role{font-size:.8125rem;color:rgba(255,255,255,.6);}

/* ============================================================
   4. GET STARTED — compact rail, written from the partner's side.
   ============================================================ */
#sol-page .sp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;position:relative;}
#sol-page .sp-step{
  position:relative;padding:1.75rem 1.5rem;border:1px solid var(--line);border-radius:14px;background:#fff;
  display:grid;gap:.5rem;align-content:start;
}
#sol-page .sp-step-n{
  width:1.875rem;height:1.875rem;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-size:.75rem;font-weight:800;
}
#sol-page .sp-step h3{font-size:1.0625rem;font-weight:700;}
#sol-page .sp-step p{font-size:.9375rem;line-height:1.55;color:var(--muted);}
@media (max-width:820px){#sol-page .sp-steps{grid-template-columns:1fr;}}

/* ============================================================
   5. FAQ — dividers only. The agent pages use boxed cards.
   ============================================================ */
#sol-page .sp-faq{max-width:46rem;margin:0 auto;border-top:1px solid var(--line);}
#sol-page .sp-faq details{border-bottom:1px solid var(--line);}
#sol-page .sp-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.375rem .25rem;font-size:1.0625rem;font-weight:650;color:var(--ink);
  cursor:pointer;list-style:none;line-height:1.4;
}
#sol-page .sp-faq summary::-webkit-details-marker{display:none;}
#sol-page .sp-faq summary::after{
  content:"";flex:none;width:.5625rem;height:.5625rem;margin-right:.375rem;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s;
}
#sol-page .sp-faq details[open] summary::after{transform:rotate(-135deg);}
#sol-page .sp-faq details[open] summary{color:var(--accent);}
#sol-page .sp-faq p{font-size:.9375rem;line-height:1.65;color:var(--muted);padding:0 3rem 1.375rem .25rem;}

/* ============================================================
   6. CLOSING CTA
   ============================================================ */
#sol-page .sp-cta{padding:4.5rem 0;background:var(--bg-soft);border-top:1px solid var(--line);text-align:center;}
#sol-page .sp-cta-in{max-width:40rem;margin:0 auto;display:grid;gap:1.125rem;justify-items:center;}
#sol-page .sp-cta h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800;letter-spacing:-.028em;line-height:1.14;}
#sol-page .sp-cta p{font-size:1.0625rem;color:var(--muted);}
#sol-page .sp-cta-micro{font-size:.8125rem;color:var(--muted);opacity:.85;}

/* ============================================================
   SEGMENT SWITCHER — sits near the foot of the page.

   Deliberately NOT a sticky strip at the top: the agent section owns
   that pattern, and a nav bar above the opening steals attention from
   a page whose whole point is the typographic statement. A visitor
   realises they picked the wrong segment after reading, not before,
   so the lateral move belongs at the end.
   ============================================================ */
#sol-page .sp-switch{padding:3.5rem 0;border-top:1px solid var(--line);}
#sol-page .sp-switch-label{
  display:block;text-align:center;margin-bottom:1.75rem;
  font-size:.8125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
#sol-page .sp-switch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;max-width:64rem;margin:0 auto;}
#sol-page .sp-switch-card{
  display:grid;gap:.3125rem;align-content:start;
  padding:1.0625rem 1.125rem 1.1875rem;border:1px solid var(--line-soft);border-radius:12px;background:#fff;
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
#sol-page .sp-switch-card:hover{border-color:rgba(255,115,30,.55);transform:translateY(-2px);box-shadow:0 12px 26px -20px rgba(28,25,23,.45);}
#sol-page .sp-switch-card b{display:flex;align-items:center;gap:.375rem;font-size:.9375rem;font-weight:700;color:var(--ink);line-height:1.3;}
#sol-page .sp-switch-card b svg{width:.8125rem;height:.8125rem;color:var(--accent);flex:none;opacity:0;transform:translateX(-3px);transition:opacity .16s,transform .16s;}
#sol-page .sp-switch-card:hover b svg{opacity:1;transform:translateX(0);}
#sol-page .sp-switch-card span{font-size:.8125rem;line-height:1.45;color:var(--muted);}
@media (max-width:900px){#sol-page .sp-switch-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){#sol-page .sp-switch-grid{grid-template-columns:1fr;}}

/* ---------- responsive ---------- */
@media (max-width:768px){
  #sol-page .sp-section{padding:3.75rem 0;}
  #sol-page .sp-open{padding:3.5rem 0 3rem;}
  #sol-page .sp-rail{grid-template-columns:1fr 1fr;}
  #sol-page .sp-rail-item:nth-child(2){border-right:0;}
  #sol-page .sp-rail-item:nth-child(-n+2){border-bottom:1px solid var(--line);}
  #sol-page .sp-quote-by{flex-direction:column;text-align:center;gap:.75rem;}
  #sol-page .sp-quote-meta{text-align:center;}
  #sol-page .sp-btn{width:100%;}
}