/* Akshara product landing page. Shared Woven Trinity tokens + components live
   in pis-brand.css (loaded first). Wrapper: `.pis pis-aks`.
   Amber is Akshara's own accent — used sparingly here so the page reads as the
   product without leaving the site's brand system. */

.pis-aks {
    --aks-amber: #CC7A33;
    --aks-paper: #FAF6EE;
}

/* Hero — the shared light lede gradient, warmed with Akshara's paper tone */
.pis-aks .pis-aks-hero { background: linear-gradient(135deg, #fff 0%, var(--aks-paper) 55%, var(--pis-band) 100%); position: relative; overflow: hidden; }
.pis-aks .pis-badge { display: inline-block; background: rgba(204,122,51,.12); color: #9a5a20; font-weight: 700; font-size: .8rem; letter-spacing: .02em; padding: 6px 14px; border-radius: 50rem; }

/* Browser-chrome frame around product screenshots */
.pis-aks .browser-frame { background: #fff; border: 1px solid rgba(43,32,53,.12); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(43,32,53,.14); }
.pis-aks .browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3f1ee; border-bottom: 1px solid rgba(43,32,53,.08); }
.pis-aks .browser-dot { width: 10px; height: 10px; border-radius: 50%; background: #d9d5cf; flex: 0 0 auto; }
.pis-aks .browser-url { flex: 1 1 auto; margin-left: 8px; min-width: 0; height: 22px; display: flex; align-items: center; padding: 0 12px; border-radius: 50rem; background: #fff; border: 1px solid rgba(43,32,53,.08); font-size: .7rem; color: #8b8494; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A fixed ratio keeps the frame's shape while the screenshot is lazy-loading (or
   missing) and keeps every frame on the page the same size. The ratio matches the
   shipped 1600x823 captures, so they display uncropped. */
.pis-aks .browser-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 823; object-fit: cover; object-position: top center; background: var(--aks-paper); }
.pis-aks .browser-frame-sm { border-radius: 12px; box-shadow: 0 10px 24px rgba(43,32,53,.12); }
.pis-aks .browser-frame-sm .browser-bar { padding: 7px 10px; }
.pis-aks .browser-frame-sm .browser-dot { width: 8px; height: 8px; }

/* Hover lift for frames and cards that aren't pis-card */
.pis-aks .hover-lift { transition: transform .2s ease-in-out, box-shadow .2s ease-in-out; }
.pis-aks .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 1rem 2.25rem rgba(43,32,53,.16); }

/* Amber-ticked feature list (icon element lives in the markup, so the list
   never depends on a bootstrap-icons codepoint) */
.pis-aks .aks-list { list-style: none; padding: 0; margin: 0; }
.pis-aks .aks-list li { display: flex; gap: 12px; margin-bottom: 14px; color: #4a4453; line-height: 1.6; }
.pis-aks .aks-list li i { color: var(--aks-amber); font-size: 1.05rem; line-height: 1.5; flex: 0 0 auto; }
.pis-aks .aks-list-sm li { gap: 9px; margin-bottom: 9px; font-size: .875rem; line-height: 1.5; }
.pis-aks .aks-list-sm li i { font-size: .95rem; line-height: 1.45; }

/* "How it works" numbered steps */
.pis-aks .step-num { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; background: rgba(204,122,51,.12); color: #9a5a20; margin-bottom: 16px; }

/* Dark "why" band items */
.pis-aks .aks-why-item { display: flex; gap: 16px; align-items: flex-start; }
.pis-aks .aks-why-item i { color: var(--pis-gold); font-size: 1.5rem; line-height: 1.2; flex: 0 0 auto; }
.pis-aks .aks-why-item p { color: rgba(255,255,255,.75); margin-bottom: 0; font-size: .95rem; }
.pis-aks .aks-why-item h3 { color: #fff; }

/* Carousel indicators in brand blue (gallery on mobile) */
.pis-aks .carousel-indicators [data-bs-target] { background-color: var(--pis-blue); }

@media (prefers-reduced-motion: reduce) {
    .pis-aks .hover-lift { transition: none; }
    .pis-aks .hover-lift:hover { transform: none; }
}