/* Kriyasya Utility — premium dark landing refinement (2026).
 * Loaded after landing.css for all dedicated and automatic Utility landings.
 * Keeps the native navy/emerald theme while guaranteeing WCAG-friendly content contrast.
 */

.lv-landing-body {
  --l-bg: #0b1324;
  --l-surface: #121d31;
  --l-surface-2: #18253b;
  --l-ink: #f5f8fc;
  --l-ink-2: #c6d1df;
  --l-ink-3: #94a3b8;
  --l-line: rgba(214, 225, 239, .13);
  --l-emerald: #24c995;
  --l-emerald-soft: rgba(36, 201, 149, .12);
  --l-royal: #7a6df0;
  --l-gold: #d5b36c;
  --l-ease: cubic-bezier(.22, .8, .24, 1);
  color: var(--l-ink);
  background:
    radial-gradient(980px 440px at 14% -10%, rgba(36, 201, 149, .12), transparent 64%),
    radial-gradient(860px 420px at 94% 4%, rgba(122, 109, 240, .12), transparent 60%),
    var(--l-bg);
  letter-spacing: -.005em;
  text-rendering: optimizeLegibility;
}

/* Hero */
.lv-landing-hero { padding-block: clamp(34px, 5.8vw, 72px); }
.lv-landing-hero-in { gap: clamp(28px, 4.5vw, 56px); }
.lv-landing-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; margin-bottom: 16px;
  border-radius: 999px;
  color: #79e8c3;
  background: var(--l-emerald-soft);
  border: 1px solid rgba(36, 201, 149, .28);
  font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.lv-landing-h1 {
  color: var(--l-ink);
  font-size: clamp(2rem, 5vw, 3.35rem);
  line-height: 1.06; letter-spacing: -.043em; font-weight: 750;
  text-wrap: balance;
}
.lv-landing-h1-icon { flex: none; }
.lv-landing-desc { max-width: 62ch; color: var(--l-ink-2); font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.7; }
.lv-landing-bullets { display: grid; gap: 8px; }
.lv-landing-bullets li { color: var(--l-ink-2); line-height: 1.62; }
.lv-landing-bullets li::before { color: var(--l-emerald); }
.lv-landing-h2 { color: var(--l-ink); font-size: clamp(1.3rem, 2.8vw, 1.85rem); letter-spacing: -.03em; font-weight: 720; text-wrap: balance; }
.lv-landing-section { padding-block: clamp(28px, 4.4vw, 54px); }

/* Preview frames */
.lv-duo-label { color: #6ce1bb; }
.lv-duo-label::before { background: var(--l-emerald); box-shadow: 0 0 0 3px var(--l-emerald-soft); }
.lv-shot-frame { border-radius: 20px; border: 1px solid var(--l-line); background: #08101e; box-shadow: 0 24px 54px rgba(0, 0, 0, .34); }
.lv-shot-bar { background: #111d30; border-bottom-color: var(--l-line); }
.lv-shot-url { background: #091322; border-color: var(--l-line); }
.lv-shot figcaption { color: var(--l-ink-3); }
.lv-landing-img-fallback { border-radius: 22px; border-color: rgba(36, 201, 149, .25); background: linear-gradient(145deg, var(--l-surface-2), #0d1729); }
.lv-fallback-name { color: var(--l-ink-2); }

/* Actions */
.lv-landing-ctas { gap: 12px; }
.lv-landing-body .lv-btn { min-height: 50px; border-radius: 999px; font-weight: 750; transition: transform .18s var(--l-ease), box-shadow .22s var(--l-ease); }
.lv-landing-body .lv-btn-primary {
  color: #041a13;
  background: linear-gradient(135deg, #55e2b4, #20b984);
  box-shadow: 0 12px 30px rgba(20, 167, 118, .25), inset 0 1px rgba(255,255,255,.3);
}
.lv-landing-body .lv-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(20, 167, 118, .32); }

/* How-to steps */
.lv-landing-steps { display: grid; gap: 10px; }
.lv-landing-steps li {
  color: var(--l-ink-2);
  padding: 14px 16px;
  border: 1px solid var(--l-line);
  border-radius: 14px;
  background: rgba(18, 29, 49, .72);
}
.lv-step-num { width: 34px; height: 34px; color: #77e5c1; background: var(--l-emerald-soft); border-color: rgba(36, 201, 149, .28); font-weight: 800; }

/* FAQ — explicit colors prevent inherited white-on-white failures. */
.lv-faq-list { gap: 10px; }
.lv-faq-item {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--l-line);
  border-radius: 16px;
  background: var(--l-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
}
.lv-faq-item + .lv-faq-item { margin-top: 0; }
.lv-faq-item summary {
  min-height: 58px;
  padding: 16px 18px;
  color: var(--l-ink) !important;
  background: transparent;
  cursor: pointer; font-weight: 700; letter-spacing: -.012em;
}
.lv-faq-item summary span { color: inherit !important; }
.lv-faq-item summary::before { color: var(--l-emerald); }
.lv-faq-item p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--l-ink-2) !important;
  font-size: .89rem; line-height: 1.72;
}
.lv-faq-item p span { color: inherit !important; }
.lv-faq-item[open] { border-color: rgba(36, 201, 149, .28); background: var(--l-surface-2); }

/* Related tools */
.lv-related-grid { gap: clamp(10px, 1.6vw, 16px); }
.lv-related-card {
  color: var(--l-ink) !important;
  border: 1px solid var(--l-line) !important;
  border-radius: 18px !important;
  background: var(--l-surface) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  transition: transform .2s var(--l-ease), box-shadow .22s var(--l-ease), border-color .2s var(--l-ease) !important;
}
.lv-related-card:hover { transform: translateY(-3px) !important; border-color: rgba(36, 201, 149, .3) !important; box-shadow: 0 18px 38px rgba(0,0,0,.22) !important; }
.lv-related-name { color: var(--l-ink-2) !important; }

/* Closing CTA — dark, readable, part of the same system. */
.lv-landing-cta-box {
  padding: clamp(26px, 4vw, 42px);
  border-radius: 24px;
  border: 1px solid rgba(122, 109, 240, .28);
  color: var(--l-ink);
  background:
    radial-gradient(620px 230px at 88% -20%, rgba(122, 109, 240, .18), transparent 68%),
    linear-gradient(145deg, var(--l-surface-2), var(--l-surface));
  box-shadow: 0 22px 50px rgba(0,0,0,.24);
}
.lv-landing-cta-box h2 { color: var(--l-ink) !important; }
.lv-landing-cta-box p { color: var(--l-ink-2) !important; }

/* Utility Pass — compact, native to this page. */
.ut-pass-wrap { max-width: 1100px; margin: 6px auto 12px; padding: 0 20px; }
.ut-pass {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 20px;
  padding: 20px 22px;
  border: 1px solid rgba(36, 201, 149, .28);
  border-radius: 20px;
  color: var(--l-ink);
  background:
    radial-gradient(460px 180px at 86% -20%, rgba(36, 201, 149, .14), transparent 68%),
    linear-gradient(135deg, #13233a, #0e1a2d);
  box-shadow: 0 16px 40px rgba(0,0,0,.23), inset 0 1px rgba(255,255,255,.05);
}
.ut-pass::after { content:""; position:absolute; z-index:-1; right:-70px; bottom:-100px; width:220px; height:220px; border:1px solid rgba(122,109,240,.12); border-radius:50%; }
.ut-pass__mark { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; color:#79e8c3; background:rgba(36,201,149,.11); border:1px solid rgba(36,201,149,.24); }
.ut-pass__mark svg { width:26px; height:26px; }
.ut-pass__content { min-width:0; }
.ut-pass__eyebrow { display:block; margin-bottom:3px; color:#70dfbb; font-size:.65rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.ut-pass h2 { margin:0; color:var(--l-ink); font-size:clamp(1.1rem,2.2vw,1.48rem); line-height:1.16; letter-spacing:-.025em; text-wrap:balance; }
.ut-pass p { margin:4px 0 9px; color:var(--l-ink-3); font-size:.78rem; }
.ut-pass__metrics { display:flex; flex-wrap:wrap; gap:7px; }
.ut-pass__metrics > span { padding:4px 8px; border:1px solid var(--l-line); border-radius:999px; color:var(--l-ink-3); font-size:.68rem; background:rgba(255,255,255,.025); }
.ut-pass__metrics strong { color:var(--l-ink-2); font-variant-numeric:tabular-nums; }
.ut-pass__action { min-width:178px; display:flex; flex-direction:column; gap:6px; text-align:center; }
.ut-pass__action form { margin:0; }
.ut-pass__btn { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:9px; padding:10px 16px; border:0; border-radius:999px; color:#041a13; background:linear-gradient(135deg,#65e7bd,#24c995); box-shadow:0 9px 24px rgba(20,167,118,.22); text-decoration:none; font:750 .78rem/1.2 Inter,system-ui,sans-serif; cursor:pointer; }
.ut-pass__btn small { color:#194d3c; font-size:.67rem; }
.ut-pass__btn b { font-size:1rem; }
.ut-pass__note { color:var(--l-ink-3); font-size:.58rem; letter-spacing:.07em; text-transform:uppercase; }
.ut-pass.is-active { border-color:rgba(36,201,149,.42); }

/* Accessibility and responsiveness */
.lv-landing-body a:focus-visible,
.lv-landing-body button:focus-visible,
.lv-landing-body summary:focus-visible { outline:3px solid #70dfbb; outline-offset:3px; border-radius:12px; }
@media (max-width:760px) {
  .ut-pass { grid-template-columns:48px 1fr; gap:14px; }
  .ut-pass__mark { width:46px; height:46px; border-radius:14px; }
  .ut-pass__action { grid-column:1/-1; min-width:0; }
}
@media (max-width:560px) {
  .lv-landing-h1 { font-size:clamp(1.75rem,8.2vw,2.3rem); }
  .lv-landing-ctas .lv-btn { width:100%; }
  .lv-landing-cta-box { border-radius:20px; }
  .ut-pass-wrap { padding:0 14px; }
  .ut-pass { grid-template-columns:1fr; padding:18px; }
  .ut-pass__mark { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .lv-landing-body *, .lv-landing-body *::before, .lv-landing-body *::after { transition:none !important; animation:none !important; }
  .lv-landing-body .lv-btn:hover, .lv-related-card:hover { transform:none !important; }
}