/* Atmosly IDP — modernization layer.
   Adds 2026 product-page patterns on top of the existing page: section sub-nav,
   progressive reveals, timeline layers, interactive cards, animated product mock,
   responsive comparison cards, animated FAQ. No new colors, fonts, or layout
   changes — everything resolves from home.css / page-core.css tokens. */

/* ---------- 1. Progressive reveal ---------- */
.rv{opacity:0;transform:translateY(15px);transition:opacity .55s cubic-bezier(.22,.7,.28,1) var(--d,0ms),transform .55s cubic-bezier(.22,.7,.28,1) var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ---------- 2. Section sub-nav + scroll progress ---------- */
.idp-subnav{position:sticky;top:var(--idp-hdr-h,0px);z-index:40;background:color-mix(in oklch,var(--card,#fff) 88%,transparent);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line-2)}
.idp-subnav-prog{position:absolute;left:0;top:0;height:2px;width:0;background:var(--pg-1);transition:width .1s linear}
.idp-subnav-in{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:9px 0}
.idp-subnav-in::-webkit-scrollbar{display:none}
.idp-subnav-in a{flex:0 0 auto;font-size:13px;font-weight:650;letter-spacing:-.012em;color:var(--ink-4);padding:7px 13px;border-radius:999px;white-space:nowrap;transition:color .18s,background .18s}
.idp-subnav-in a:hover{color:var(--ink-2);background:var(--bg-tint)}
.idp-subnav-in a.is-on{color:var(--pg-ink);background:var(--pg-soft)}
.idp-subnav-cta{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:-.012em;color:var(--pg-ink);padding:7px 14px;border-radius:999px;border:1px solid color-mix(in oklch,var(--pg-1) 30%,transparent);transition:border-color .18s,background .18s}
.idp-subnav-cta:hover{background:var(--pg-soft);border-color:color-mix(in oklch,var(--pg-1) 55%,transparent)}
.idp-subnav-cta svg{width:11px;height:11px;transition:transform .2s}
.idp-subnav-cta:hover svg{transform:translateX(2px)}
@media(max-width:760px){.idp-subnav-cta{display:none}}
[id]{scroll-margin-top:calc(var(--idp-hdr-h,0px) + var(--idp-subnav-h,54px) + 16px)}

/* ---------- 3. Capability rail (was a ragged wrapped pill cloud) ---------- */
.idp-cap-strip{padding:20px 0}
.idp-cap-inner{display:block}
.idp-cap-label{width:auto;margin-bottom:10px}
.idp-cap-rail{display:flex;align-items:center;gap:9px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start;padding:2px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.idp-cap-rail::-webkit-scrollbar{display:none}
@media(min-width:1180px){.idp-cap-rail{flex-wrap:wrap;justify-content:center;overflow:visible;-webkit-mask-image:none;mask-image:none}}
.idp-cap{white-space:nowrap;transition:border-color .18s,color .18s,transform .18s,box-shadow .18s}
.idp-cap:hover{border-color:color-mix(in oklch,var(--pg-1) 45%,transparent);color:var(--ink-1);transform:translateY(-1px);box-shadow:0 4px 14px -6px rgba(10,15,28,.18)}
.idp-cap:hover i{background:var(--pg-1);color:#fff}
.idp-cap i{transition:background .18s,color .18s}

/* ---------- 4. Product mock: live state ---------- */
.idp-shot-wrap{transition:box-shadow .4s,transform .4s}
.idp-shot-wrap:hover{box-shadow:0 30px 74px -30px rgba(10,15,28,.34),0 2px 8px -2px rgba(10,15,28,.08)}
.idp-shot-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4)}
.idp-shot-live b{width:6px;height:6px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 0 rgba(22,163,74,.45);animation:idpPulse 2.4s ease-out infinite}
@keyframes idpPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.idp-mt-tr i{transition:width 1.1s cubic-bezier(.22,.7,.28,1) var(--d,0ms)}
.idp-kpi{transition:border-color .18s,transform .18s}
.idp-kpi:hover{border-color:#CBD6E6;transform:translateY(-1px)}
.idp-kpi svg path{transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.3,1) var(--d,0ms)}
.idp-crow{transition:background .16s}
.idp-crow:hover{background:#FAFBFD}
.idp-irow{transition:background .16s}
.idp-irow:hover{background:#FAFBFD}

/* ---------- 5. Pain cards: interactive ---------- */
.idp-pain{position:relative;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.idp-pain::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:#C2373B;opacity:.55;transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.22,.7,.28,1)}
.idp-pain:hover{border-color:#E7D3D4;transform:translateY(-2px);box-shadow:0 14px 34px -20px rgba(10,15,28,.28)}
.idp-pain:hover::before{transform:scaleX(1)}
.idp-pain-ic{transition:background .2s,transform .2s}
.idp-pain:hover .idp-pain-ic{background:rgba(229,72,77,.16);transform:scale(1.06)}

/* ---------- 6. Definition points: stepped ---------- */
.idp-point{position:relative;padding-left:0;transition:background .18s}
.idp-point::before{content:"";position:absolute;left:-14px;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--pg-1);opacity:0;transform:scaleY(.3);transform-origin:center;transition:opacity .22s,transform .22s}
.idp-point:hover::before{opacity:1;transform:scaleY(1)}
.idp-point-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:6px;background:var(--pg-soft);color:var(--pg-ink);font-weight:700;transition:background .18s,color .18s}
.idp-point:hover .idp-point-n{background:var(--pg-1);color:#fff}
.idp-point h3{transition:color .18s}

/* ---------- 7. Layer timeline ---------- */
.pg-rows{position:relative}
.pg-row-num{position:relative;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:999px;background:var(--card,#fff);border:1px solid var(--line-1);color:var(--ink-3);transition:background .3s,border-color .3s,color .3s}
.pg-row-num::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-1);flex:0 0 auto;transition:background .3s,box-shadow .3s}
.pg-row.is-live .pg-row-num{background:var(--pg-soft);border-color:color-mix(in oklch,var(--pg-1) 32%,transparent);color:var(--pg-ink)}
.pg-row.is-live .pg-row-num::before{background:var(--pg-1);box-shadow:0 0 0 3px color-mix(in oklch,var(--pg-1) 18%,transparent)}
.pg-row-list li{transition:color .18s}
.pg-row-list li:hover{color:var(--ink-1)}
.pg-row-media>*{transition:transform .45s cubic-bezier(.22,.7,.28,1),box-shadow .45s}
.pg-row.is-live .pg-row-media>*{transform:translateY(-3px)}

/* ---------- 8. Comparison table: hover + mobile cards ---------- */
.idp-tbl tbody tr{transition:background .16s}
.idp-tbl tbody tr:hover{background:color-mix(in oklch,var(--bg-tint) 70%,transparent)}
.idp-tbl tbody tr:hover td.plat{background:color-mix(in oklch,var(--pg-soft) 62%,transparent)}
@media(max-width:760px){
.idp-tbl-wrap{overflow:visible;border:0;background:transparent;border-radius:0}
.idp-tbl{min-width:0;display:block}
.idp-tbl thead{display:none}
.idp-tbl tbody{display:grid;gap:12px}
.idp-tbl tr{display:block;background:var(--card,#fff);border:1px solid var(--line-1);border-radius:14px;overflow:hidden}
.idp-tbl tbody th{display:block;width:auto;background:var(--bg-tint);border-bottom:1px solid var(--line-1);font-size:14px;padding:12px 16px}
.idp-tbl td{display:block;width:auto;padding:12px 16px 14px;border-bottom:1px solid var(--line-2)}
.idp-tbl td::before{content:attr(data-h);display:block;font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4);margin-bottom:6px}
.idp-tbl td.plat::before{color:var(--pg-ink)}
.idp-tbl tr td:last-child{border-bottom:0}
}

/* ---------- 9. Use cases: scroll-active ---------- */
.idp-uc-item.is-live{border-bottom-color:color-mix(in oklch,var(--pg-1) 45%,transparent)}
.idp-uc-item.is-live .idp-uc-n{color:var(--pg-1)}

/* ---------- 10. Metrics + tiles ---------- */
.pg-stat{transition:transform .2s}
.pg-stat:hover{transform:translateY(-2px)}
.pg-tile{position:relative;transition:border-color .2s,transform .2s,box-shadow .2s}
.pg-tile:hover{transform:translateY(-2px);box-shadow:0 16px 38px -24px rgba(10,15,28,.45)}
.pg-post{transition:transform .22s,box-shadow .22s,border-color .22s}
.pg-post:hover{transform:translateY(-3px);box-shadow:0 20px 44px -26px rgba(10,15,28,.5)}

/* ---------- 11. FAQ: animated disclosure ---------- */
.pg-faq-wrap{overflow:hidden;height:0}
.pg-faq-item{transition:border-color .2s,box-shadow .2s}
.pg-faq-item:hover{border-color:color-mix(in oklch,var(--pg-1) 34%,transparent)}
.pg-faq-item summary{cursor:pointer;list-style:none}
.pg-faq-item summary::-webkit-details-marker{display:none}
.pg-faq-ic{transition:transform .3s cubic-bezier(.22,.7,.28,1),background .2s,color .2s}
.pg-faq-item[open] .pg-faq-ic,.pg-faq-list .pg-faq-item[open] summary .pg-faq-ic{transform:rotate(135deg);background:var(--pg-1);color:#fff}

/* ---------- 12. Micro-interactions ---------- */
.btn-pri,.btn-sec{transition:transform .16s,box-shadow .16s,background .16s,border-color .16s}
.btn-pri:hover,.btn-sec:hover{transform:translateY(-1px)}
.btn-pri:active,.btn-sec:active{transform:translateY(0)}
.idp-uc-tags a{white-space:nowrap;transition:border-color .15s,color .15s,background .15s,transform .15s}
.idp-uc-tags a:hover{transform:translateY(-1px);background:var(--card,#fff)}
.idp-def-guide svg,.idp-def-guide{transition:gap .18s}
.idp-def-guide:hover{gap:11px}
:where(a,button,summary,details):focus-visible{outline:2px solid var(--pg-1);outline-offset:3px;border-radius:6px}

@media(prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;transition:none}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}