/* Solutions-page pattern CSS (hov-9yfc3). Extracted verbatim from the
   approved 'Hover Solutions Page Pattern.html' (claude.design); per-page
   additions appended below the marker. Single shared file for the whole
   solutions family; cache-busted via meta.solutions_buster. */
:root{
  --bg:#06060a; --bg-1:#0a0a11; --bg-2:#0e0e16;
  --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.13);
  --t1:#f0f0f3; --t2:#a7a7b2; --t3:#71717d;
  --olive:#b8b06a; --olive-dim:rgba(184,176,106,.35);
  --sans:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t1);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--t1);text-decoration:none}
a:hover{color:var(--olive)}
p a{color:var(--olive)}
p a:hover{color:var(--t1)}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
.kicker .odot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--olive);margin-right:8px;vertical-align:1px}
h1,h2{font-weight:650;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
h2{font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.muted{color:var(--t2)}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:550;padding:11px 22px;border-radius:8px;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn-primary{background:var(--olive);color:#131308;border:1px solid var(--olive)}
.btn-primary:hover{background:#c8c07d;color:#131308}
.btn-ghost{border:1px solid var(--hair-2);color:var(--t1);background:transparent}
.btn-ghost:hover{border-color:var(--olive-dim);color:var(--t1)}
.chip{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t2);border:1px solid var(--hair-2);border-radius:999px;padding:7px 15px}
.chip .odot{width:6px;height:6px;border-radius:50%;background:var(--olive);animation:softpulse 3s ease-in-out infinite}
@keyframes softpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* ===== NAV ===== */
.nav{border-bottom:1px solid var(--hair);position:sticky;top:0;background:rgba(6,6,10,.88);backdrop-filter:blur(10px);z-index:50}
.nav-in{display:flex;align-items:center;gap:32px;height:64px}
/* Match the canonical site brand (style.css): circle mark + Inter, uppercase,
   letterspaced. The design pattern shipped a mono, mark-less wordmark that
   diverged from the rest of the site (hov-9yfc3 header-parity fix). */
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--t1)}
.brand em{font-style:normal;color:var(--olive);margin-left:-2px}
.brand .mk{width:21px;height:21px;border:1.5px solid var(--olive);border-radius:50%;position:relative;flex:none}
.brand .mk::after{content:"";position:absolute;inset:4.5px;background:var(--olive);border-radius:50%}
.nav-links{display:flex;gap:26px;font-size:14px;color:var(--t2)}
.nav-links a{color:var(--t2)}
.nav-links a:hover{color:var(--t1)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang{font-family:var(--mono);font-size:12px;color:var(--t3)}
.lang a{color:var(--t3)}
.lang a:hover{color:var(--t1)}
.btn-sm{padding:8px 16px;font-size:13.5px}
@media(max-width:860px){.nav-links{display:none}}
@media(max-width:520px){.lang,.nav-ghost{display:none}}

/* ===== HERO ===== */
.hero{padding:88px 0 72px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,5.2vw,60px);margin:22px 0 20px}
.hero .lede{font-size:17px;max-width:52ch}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.motif{display:flex;justify-content:center}
.motif svg{width:100%;max-width:520px;height:auto}
@media(max-width:900px){.hero{padding:64px 0 56px}.hero-grid{grid-template-columns:1fr}.motif{display:none}}

/* ===== FLOW ===== */
.flow-sec{padding:40px 0 84px;border-top:1px solid var(--hair)}
.flow-head{padding:44px 0 34px}
.flow{display:grid;grid-template-columns:1.15fr 28px 1fr 28px 1fr 28px 1fr;align-items:stretch}
.stage{border:1px solid var(--hair-2);border-radius:12px;background:var(--bg-1);padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.stage-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}
.stage-title{font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.stage-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-top:auto}
.srcgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.srccell{display:flex;flex-direction:column;align-items:center;gap:7px;border:1px solid var(--hair);border-radius:8px;padding:12px 6px 9px;background:var(--bg)}
.srccell svg{width:30px;height:30px;color:#d9d9de}
.srccell span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--t3);text-transform:uppercase;text-align:center}
.outrow{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.outcell{display:flex;align-items:center;gap:10px;border:1px solid var(--hair);border-radius:8px;padding:12px 14px;background:var(--bg);font-size:14px;font-weight:550}
.outcell .odot{width:6px;height:6px;border-radius:50%;background:var(--olive);flex:none}
.conn{position:relative;align-self:center;height:1px;background:var(--hair-2);width:100%}
.conn::after{content:"";position:absolute;top:-2.5px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--olive);animation:softpulse 2.4s ease-in-out infinite}
.conn:nth-of-type(4)::after{animation-delay:.8s}
.conn:nth-of-type(6)::after{animation-delay:1.6s}
@media(max-width:960px){
  .flow{grid-template-columns:1fr}
  .conn{width:1px;height:28px;justify-self:center;align-self:auto}
  .conn::after{left:-2.5px;top:calc(50% - 3px)}
}

/* ===== QUICK ANSWER ===== */
.qa{padding:0 0 76px}
.qa-block{border-left:3px solid var(--olive);background:var(--bg-1);border-radius:0 12px 12px 0;padding:26px 30px;max-width:820px}
.qa-block p{font-size:16.5px;color:var(--t2)}
.qa-block strong{color:var(--t1);font-weight:650}

/* ===== SECTIONS ===== */
.sec{padding:76px 0;border-top:1px solid var(--hair)}
.sec-head{margin-bottom:34px;max-width:760px}
.sec-head .kicker{display:block;margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.grid2{grid-template-columns:1fr}}
.pcard{border:1px solid var(--hair-2);border-radius:12px;background:var(--bg-1);padding:24px;display:flex;align-items:center;gap:18px;transition:border-color .15s}
.pcard:hover{border-color:var(--olive-dim)}
.pcard svg{width:34px;height:34px;color:var(--olive);flex:none}
.pcard b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.prose{max-width:none}
.prose p{font-size:16.5px;color:var(--t2);margin-bottom:18px}
.prose p::first-line{color:var(--t1)}
/* Full-width prose: fill the container to match the card grids, but flow into
   two columns on desktop so line length stays readable (single wide lines run
   ~130 chars and read poorly). Single column below 920px. */
@media(min-width:920px){
  .prose{columns:2;column-gap:60px}
  .prose p:first-child{margin-top:0}
  .prose p:last-child{margin-bottom:0}
}
.scard{border:1px solid var(--hair-2);border-radius:12px;background:var(--bg-1);padding:26px;transition:border-color .15s}
.scard:hover{border-color:var(--olive-dim)}
.scard .kicker{display:block;margin-bottom:14px;color:var(--olive)}
.scard b{display:block;font-size:17px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.scard p{font-size:15px;color:var(--t2)}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:860px){.grid3{grid-template-columns:1fr}}
.rcard{border:1px solid var(--hair-2);border-radius:12px;background:var(--bg-1);padding:24px}
.rcard b{display:block;font-size:16.5px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.rcard b::before{content:"";display:block;width:22px;height:2px;background:var(--olive);margin-bottom:14px}
.rcard p{font-size:14.5px;color:var(--t2)}

/* ===== FAQ ===== */
.faq-item{border:1px solid var(--hair-2);border-radius:12px;background:var(--bg-1);padding:22px 26px;margin-bottom:12px;max-width:860px}
.faq-item h3{font-size:16px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.faq-item p{font-size:15px;color:var(--t2)}

/* ===== CTA BAND ===== */
.cta{border-top:1px solid var(--hair);padding:96px 0;text-align:center;background:radial-gradient(ellipse 640px 300px at 50% 0%,rgba(184,176,106,.09),transparent 70%)}
.cta h2{font-size:clamp(26px,3.4vw,38px)}
.cta p{color:var(--t2);font-size:16.5px;margin:14px auto 30px;max-width:52ch}
.cta .hero-ctas{justify-content:center;margin-top:0}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--hair);padding:56px 0 0}
.foot-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;padding-bottom:48px;max-width:820px}
@media(max-width:640px){.foot-cols{grid-template-columns:1fr;gap:36px}}
.foot-cols h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin-bottom:14px;font-weight:500}
.foot-cols ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-cols a{font-size:14px;color:var(--t2)}
.foot-cols a:hover{color:var(--t1)}
.foot-bar{border-top:1px solid var(--hair);padding:22px 0;display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--t3)}
.foot-bar a{color:var(--t3)}
.foot-bar a:hover{color:var(--t1)}
.foot-bar .tag{color:var(--t3)}
.foot-bar .grow{flex:1}
@media print{.nav{position:static}body{background:#fff;color:#111}}

/* ===== per-page additions ===== */