/* Shared styles of the Solutions pages, on top of site.css (the landing's own stylesheet, extracted by build.mjs).
   Only sl-* parts live here; tokens, type, buttons, cards, nav and footer come from the landing unchanged,
   except one brand rule the detail pages follow: full-pill buttons. */
.sl .btn{border-radius:999px}
.sl .burger{border-radius:999px}
.sl .dark .over{color:#8FCBC4}

/* hero: crumb, headline, lead, buttons, then the stage (the page's product moment) */
.sl-hero{padding:56px 0 0}
.sl-crumb{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:0;font:500 15px/20px Inter,sans-serif;color:var(--t3)}
.sl-crumb a{color:var(--brand);text-decoration:none;border-radius:4px;padding:12px 4px;margin:-12px -4px}
@media (hover:hover) and (pointer:fine){.sl-crumb a:hover{text-decoration:underline;text-underline-offset:3px}}
.sl-crumb a:active{opacity:.6}
.sl-crumb span[aria-hidden]{color:var(--line-2)}
.sl-hero .h1{max-width:880px;margin:20px auto 0}
.sl-hero .lead{max-width:640px;margin-left:auto;margin-right:auto}
.sl-stage{position:relative;margin:56px 0 0;height:clamp(540px,44vw,620px);border-radius:28px;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 80% at 50% 0%,#F3EFE6 0%,var(--band) 62%);--glass:rgb(255 255 255 / .82);--glass-edge:rgb(255 255 255 / .8);--faint:rgb(14 18 24 / .26);--ease-out:cubic-bezier(0.23,1,0.32,1)}
.sl-stage p{margin:0}
.sl-stage .hx-glass{background:var(--glass)}
.sl-stage .hx-card{z-index:2}
/* the ground of every stage is the real product, softened, so the glass cards sit over Sona itself (the landing puts them over a photo) */
.sl-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sl-bg img{width:100%;height:100%;object-fit:cover;object-position:var(--bgp,0 0);transform-origin:30% 20%}
.sl-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(235 230 219 / .5),rgb(235 230 219 / .72)),linear-gradient(90deg,rgb(235 230 219 / .2),transparent 40%,transparent 60%,rgb(235 230 219 / .2))}
.hero-motion .sl-bg img{animation:hx-drift 20s ease-in-out infinite alternate}
.sl-stage.hx-is-paused .sl-bg img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.sl-bg img{animation:none!important}}
/* a stage's state classes hide what has not happened yet, only under html.hero-motion; the markup is the poster */
.hero-motion .sl-stage [data-in]{transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}

/* the agent's voice is lavender, everything else spruce and ink */
.sl-ag{color:var(--ai)}
.sl-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:500 13px/24px Inter,sans-serif;white-space:nowrap}
.sl-tag.ai{background:var(--ai-s);color:var(--ai)}
.sl-tag.w{background:var(--warn-s);color:var(--warn)}
.sl-tag.ok{background:var(--ok-s);color:var(--ok)}
.sl-tag.n{background:var(--mist);color:var(--t2)}
.sl-tag.r{background:#FDE8E6;color:#B42318}
.sl-tag i{width:6px;height:6px;border-radius:50%;background:currentColor}

/* sections: copy on one side, the product on the other, alternating */
.sl-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:center}
.sl-row.flip>.sl-copy{order:2}
.sl-row+.sl-row{margin-top:120px}
.sl-copy .lead{margin-top:16px}
.sl-copy .list{margin-top:24px}
.sl-copy .price-inline{margin-top:24px}
.sl-head{max-width:760px}
.sl-head.center{margin:0 auto;text-align:center}
.sl-head .lead{margin-top:16px}

/* the product's ground: a tinted field the window or phone runs off */
.sl-media{position:relative;border-radius:20px;background:var(--band);overflow:hidden;isolation:isolate}
.band .sl-media{background:var(--canvas)}
.sl-media.win{padding:40px 0 0 40px}
.sl-media.win.left{padding:40px 40px 0 0}
.sl-win{position:relative;overflow:hidden;border-radius:14px 0 0 0;background:#fff;box-shadow:0 0 0 1px rgba(14,18,24,.07),0 30px 60px -30px rgba(14,18,24,.35)}
.left .sl-win{border-radius:0 14px 0 0}
.sl-win img,.sl-win video{display:block;width:100%;height:auto}
.sl-media.ph{display:flex;justify-content:center;padding:48px 24px 0;height:560px}
.sl-media.ph .phone{width:300px;height:max-content}
.sl-vid{display:block;width:100%;height:auto;background:#fff}
.sl-vbtn{position:absolute;right:16px;bottom:16px;z-index:3;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid rgb(255 255 255 / .8);background:rgb(255 255 255 / .86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);cursor:pointer;box-shadow:0 4px 12px -4px rgb(14 18 24 / .25)}
.sl-vbtn svg{width:14px;height:14px}
.sl-vbtn .i-play{display:none}
.sl-vbtn[aria-pressed=true] .i-play{display:block}.sl-vbtn[aria-pressed=true] .i-pause{display:none}
.sl-vbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.sl-vbtn:hover{background:#fff}}
.sl-vbtn{transition:transform .12s var(--e-out),background-color .2s}.sl-vbtn:active{transform:scale(.94)}
.sl-cap{margin:14px 0 0;font-size:14px;line-height:20px;color:var(--t3)}

/* what a person still decides: one per page, after the capability it bounds */
.sl-decide{display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;align-items:start;margin-top:72px;padding:28px 32px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.sl-decide .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:999px;background:var(--brand-s);color:var(--brand)}
.sl-decide .ico svg{width:22px;height:22px}
.sl-decide .h4{font-size:1.125rem;line-height:1.556}
.sl-decide p{margin:6px 0 0;color:var(--t2);max-width:72ch}

/* three facts that come straight from the product, on a hairline */
.sl-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:56px}
.sl-fact{border-left:2px solid var(--spruce-400);padding-left:20px}
.sl-fact b{display:block;font:400 2.5rem/1.1 Onest,sans-serif;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.sl-fact span{display:block;margin-top:8px;color:var(--t2);font-size:15px;line-height:22px}

/* other solutions: both groups, this page marked */
.sl-rel{padding:120px 0}
.sl-rel .h2{font-size:2.25rem;line-height:1.2}
.sl-rel-g{margin-top:40px}
.sl-rel-g+.sl-rel-g{margin-top:28px}
.sl-rel-g h3{margin:0 0 12px;font:500 15px/20px Inter,sans-serif;color:var(--t3)}
.sl-rel-g ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sl-rc{display:flex;flex-direction:column;justify-content:space-between;gap:20px;height:100%;min-height:156px;padding:20px 22px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .2s var(--e-out)}
.sl-rc b{display:block;font:500 18px/26px Onest,sans-serif;letter-spacing:-.01em}
.sl-rc p{margin:6px 0 0;font-size:14px;line-height:21px;color:var(--t2)}
.sl-rc .ar{align-self:flex-end;width:16px;height:16px;color:var(--brand);transition:transform .45s var(--e-spring)}
.sl-rc.cur{background:transparent;border-style:dashed}
.sl-rc.cur small{align-self:flex-start;font:500 13px/20px Inter,sans-serif;color:var(--t3)}
.sl-rc:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* touch: press feedback on the card itself, since hover is mouse-only */
a.sl-rc{transition:border-color .2s var(--e-out),transform .12s var(--e-out)}a.sl-rc:active{transform:scale(.985);border-color:#8FCBC4}
@media (hover:hover) and (pointer:fine){a.sl-rc:hover{border-color:#8FCBC4}a.sl-rc:hover .ar{transform:translateX(3px)}}

@media (max-width:1100px){
  .sl-row,.sl-row.flip{grid-template-columns:minmax(0,1fr);gap:40px}
  .sl-row.flip>.sl-copy{order:0}
  .sl-rel-g ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px),(max-width:1100px) and (max-height:500px){
  .sl-hero{padding-top:28px}
  .sl-hero .h1{font-size:clamp(31px,9vw,38px);line-height:1.16;margin-top:16px}
  .sl-stage{margin-top:36px;height:auto;border-radius:22px}
  .hero-motion .sl-bg img{animation:none}
  .sl-row+.sl-row{margin-top:80px}
  .sl-media.win{padding:24px 0 0 24px}
  .sl-media.win.left{padding:24px 24px 0 0}
  .sl-media.ph{height:460px;padding-top:32px}
  .sl-media.ph .phone{width:240px}
  .sl-decide{grid-template-columns:1fr;gap:14px;padding:22px;margin-top:56px}
  .sl-facts{grid-template-columns:1fr;gap:24px;margin-top:40px}
  .sl-fact b{font-size:2rem}
  .sl-rel{padding:72px 0}
  .sl-rel .h2{font-size:1.875rem}
  .sl-rc{min-height:0}
}
@media (max-width:560px){.sl-rel-g ul{grid-template-columns:1fr}}