/* =========================================================
   SOFTWARE PRODUCT V2
   Product control, navigation and public product boundaries.
   ========================================================= */

.sp-product-nav-wrap{
    position:sticky;
    top:104px;
    z-index:7200;
    padding:10px 0 0;
    pointer-events:none;
}

.sp-product-nav{
    width:max-content;
    max-width:100%;
    margin:0 auto;
    padding:6px;
    display:flex;
    gap:5px;
    overflow:auto;
    border:1px solid rgba(255,255,255,.085);
    border-radius:999px;
    background:
        radial-gradient(circle at 12% 20%,rgb(var(--world-accent)/.055),transparent 30%),
        linear-gradient(180deg,rgba(9,24,38,.92),rgba(7,18,28,.88));
    box-shadow:
        0 18px 48px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(22px) saturate(165%);
    pointer-events:auto;
    scrollbar-width:none;
}
.sp-product-nav::-webkit-scrollbar{display:none}
.sp-product-nav a{
    min-height:36px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    border:1px solid transparent;
    border-radius:999px;
    color:rgba(255,255,255,.42);
    white-space:nowrap;
    font:700 .39rem/1 monospace;
    letter-spacing:.06em;
}
.sp-product-nav a:hover,
.sp-product-nav a.is-active{
    color:#fff;
    border-color:rgb(var(--world-accent)/.20);
    background:
        linear-gradient(135deg,rgb(var(--world-accent)/.065),rgb(var(--world-accent-2)/.035));
}

.sp-control-section{
    background:
        radial-gradient(circle at 12% 10%,rgb(var(--world-accent)/.045),transparent 30%),
        rgba(8,18,28,.22);
}

.sp-control-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.sp-control-card{
    min-height:168px;
    padding:15px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:22px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--world-accent)/.065),transparent 40%),
        linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),
        rgba(12,24,36,.70);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 16px 44px rgba(0,0,0,.10);
}

.sp-control-card header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.sp-control-card header span{
    color:rgba(255,255,255,.32);
    font:700 .36rem/1 monospace;
    letter-spacing:.07em;
}

.sp-control-state{
    padding:6px 8px;
    border:1px solid rgb(var(--state,91 234 255)/.18);
    border-radius:999px;
    color:rgb(var(--state,91 234 255)/.78);
    background:rgb(var(--state,91 234 255)/.035);
    font:750 .34rem/1 monospace;
    letter-spacing:.06em;
}

.sp-control-card h3{
    margin:18px 0 8px;
    color:#fff;
    font-size:.9rem;
    letter-spacing:-.025em;
}

.sp-control-card p{
    margin:0;
    color:rgba(238,246,255,.46);
    font-size:.5rem;
    line-height:1.58;
}

.sp-boundary{
    margin-top:10px;
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:10px;
}

.sp-boundary-panel{
    padding:17px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:22px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.01)),
        rgba(11,23,35,.68);
}

.sp-boundary-panel>span{
    color:rgb(var(--world-accent)/.72);
    font:700 .39rem/1 monospace;
    letter-spacing:.075em;
}

.sp-boundary-panel h3{
    margin:12px 0 8px;
    color:#fff;
    font-size:1rem;
}

.sp-boundary-list{
    margin:0;
    padding:0;
    display:grid;
    gap:7px;
    list-style:none;
}

.sp-boundary-list li{
    position:relative;
    padding:9px 10px 9px 28px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:13px;
    color:rgba(238,246,255,.48);
    background:rgba(255,255,255,.012);
    font-size:.49rem;
    line-height:1.45;
}

.sp-boundary-list li::before{
    content:"";
    position:absolute;
    left:11px;
    top:50%;
    width:6px;
    height:6px;
    transform:translateY(-50%);
    border-radius:50%;
    background:rgb(var(--world-accent)/.72);
    box-shadow:0 0 10px rgb(var(--world-accent)/.22);
}

.sp-product-graph{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.sp-product-graph a{
    min-height:116px;
    padding:13px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:1px solid rgba(255,255,255,.085);
    border-radius:20px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--world-accent)/.055),transparent 40%),
        rgba(255,255,255,.012);
    transition:
        transform .2s var(--ws-ease),
        border-color .2s ease,
        background .2s ease;
}

.sp-product-graph a:hover{
    transform:translateY(-2px);
    border-color:rgb(var(--world-accent)/.23);
    background:rgb(var(--world-accent)/.035);
}

.sp-product-graph span{
    color:rgb(var(--world-accent)/.62);
    font:700 .36rem/1 monospace;
    letter-spacing:.07em;
}

.sp-product-graph strong{
    color:#fff;
    font-size:.72rem;
    line-height:1.25;
}

.sp-product-graph i{
    color:rgb(var(--world-accent)/.72);
    font-style:normal;
}

@media(max-width:980px){
    .sp-product-nav-wrap{top:86px}
    .sp-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .sp-product-graph{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:680px){
    .sp-product-nav-wrap{top:76px}
    .sp-product-nav{
        width:calc(100vw - 24px);
        justify-content:flex-start;
    }
    .sp-control-grid,
    .sp-product-graph,
    .sp-boundary{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   V13 — SOFTWARE PRODUCT EXPERIENCE
   Shared across all 44 public software product pages.
   ========================================================= */

.sp-main{
    --product-a:var(--world-accent);
    --product-b:var(--world-accent-2);
}

.sp-hero{
    min-height:calc(88vh - 108px);
    isolation:isolate;
}

.sp-hero::after{
    content:"";
    position:absolute;
    inset:8% 0 auto;
    height:68%;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 18% 42%,rgb(var(--product-a)/.10),transparent 28%),
        radial-gradient(circle at 78% 28%,rgb(var(--product-b)/.085),transparent 32%);
    filter:blur(48px);
    opacity:.9;
}

.sp-hero-grid{
    z-index:2;
    gap:72px;
    padding-top:92px;
    padding-bottom:84px;
}

.sp-kicker{
    width:max-content;
    padding:8px 11px;
    border:1px solid rgb(var(--product-a)/.14);
    border-radius:999px;
    background:rgb(var(--product-a)/.025);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.sp-hero h1{
    max-width:920px;
    text-wrap:balance;
    text-shadow:0 18px 70px rgb(var(--product-a)/.05);
}

.sp-lead{
    max-width:700px;
    color:rgba(238,246,255,.60);
}

.sp-record{
    position:relative;
    border-radius:30px;
    border-color:rgba(255,255,255,.105);
    background:
        radial-gradient(circle at 0 0,rgb(var(--product-a)/.14),transparent 35%),
        radial-gradient(circle at 100% 100%,rgb(var(--product-b)/.095),transparent 36%),
        linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.016)),
        rgba(14,28,41,.80);
    box-shadow:
        0 38px 120px rgba(0,0,0,.24),
        0 0 60px rgb(var(--product-a)/.035),
        inset 0 1px 0 rgba(255,255,255,.07);
}

.sp-record::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
        linear-gradient(180deg,rgba(255,255,255,.035),transparent 24%),
        radial-gradient(circle at 70% -20%,rgba(255,255,255,.045),transparent 42%);
}

.sp-record > *{
    position:relative;
    z-index:1;
}

.sp-record-visual{
    height:240px;
    border-radius:22px;
}

.sp-record-visual img{
    transition:transform .7s cubic-bezier(.2,.75,.2,1),filter .4s ease;
}

.sp-record:hover .sp-record-visual img{
    transform:scale(1.025);
    filter:brightness(.90) saturate(1.09);
}

.sp-fact{
    border-radius:17px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}

.sp-product-nav-wrap{
    top:106px;
}

.sp-product-nav{
    position:relative;
    overflow:hidden auto;
    padding:7px;
    border-radius:999px;
    background:
        radial-gradient(circle at 10% 20%,rgb(var(--product-a)/.07),transparent 28%),
        radial-gradient(circle at 90% 20%,rgb(var(--product-b)/.05),transparent 28%),
        linear-gradient(180deg,rgba(9,24,38,.94),rgba(7,18,28,.91));
    box-shadow:
        0 20px 60px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.055);
}

.sp-product-nav a{
    position:relative;
    z-index:2;
    min-height:38px;
}

.sp-product-nav a.is-active{
    color:#fff;
    border-color:rgb(var(--product-a)/.24);
    background:
        linear-gradient(135deg,rgb(var(--product-a)/.09),rgb(var(--product-b)/.055));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 8px 22px rgba(0,0,0,.08);
}

.sp-nav-progress{
    position:absolute;
    z-index:1;
    left:7px;
    right:7px;
    bottom:3px;
    height:2px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.035);
}

.sp-nav-progress > i{
    display:block;
    width:100%;
    height:100%;
    transform:scaleX(var(--sp-progress,0));
    transform-origin:0 50%;
    border-radius:inherit;
    background:
        linear-gradient(90deg,rgb(var(--product-a)),rgb(var(--product-b)),#ff72b7);
    box-shadow:0 0 12px rgb(var(--product-a)/.30);
}

.sp-section{
    position:relative;
    scroll-margin-top:170px;
}

.sp-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.55;
    background:
        radial-gradient(circle at 8% 20%,rgb(var(--product-a)/.025),transparent 24%),
        radial-gradient(circle at 92% 76%,rgb(var(--product-b)/.018),transparent 26%);
}

.sp-section > .ws-shell{
    position:relative;
    z-index:1;
}

.sp-control-card,
.sp-boundary-panel,
.sp-access-card,
.sp-product-graph a,
.sp-related a{
    border-radius:24px;
}

.sp-control-card,
.sp-access-card,
.sp-product-graph a,
.sp-related a{
    transition:
        transform .22s var(--ws-ease),
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.sp-control-card:hover,
.sp-access-card:hover{
    transform:translateY(-2px);
    border-color:rgb(var(--product-a)/.18);
    box-shadow:
        0 20px 52px rgba(0,0,0,.13),
        inset 0 1px 0 rgba(255,255,255,.055);
}

.sp-product-graph a:hover,
.sp-related a:hover{
    transform:translateY(-3px);
    border-color:rgb(var(--product-a)/.28);
    box-shadow:
        0 22px 54px rgba(0,0,0,.14),
        0 0 26px rgb(var(--product-a)/.035);
}

.sp-related a{
    position:relative;
    overflow:hidden;
    min-height:128px;
    background:
        radial-gradient(circle at 0 0,rgb(var(--product-a)/.06),transparent 40%),
        linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}

.sp-related a::after{
    content:"↗";
    position:absolute;
    right:12px;
    top:12px;
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border:1px solid rgb(var(--product-a)/.13);
    border-radius:50%;
    color:rgb(var(--product-a)/.70);
    background:rgb(var(--product-a)/.025);
    font-size:.52rem;
}

.sp-evidence-note{
    position:relative;
    overflow:hidden;
    padding:18px 19px 18px 48px;
    border-radius:20px;
}

.sp-evidence-note::before{
    content:"✓";
    position:absolute;
    left:15px;
    top:50%;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    border:1px solid rgba(184,255,104,.18);
    border-radius:50%;
    color:rgba(184,255,104,.78);
    background:rgba(184,255,104,.035);
}

.sp-section[data-sp-active="true"] .sp-section-head h2{
    text-shadow:0 0 34px rgb(var(--product-a)/.055);
}

@media(max-width:980px){
    .sp-hero{
        min-height:auto;
    }

    .sp-hero-grid{
        gap:38px;
        padding-top:74px;
    }

    .sp-product-nav-wrap{
        top:86px;
    }
}

@media(max-width:680px){
    .sp-record{
        border-radius:24px;
    }

    .sp-record-visual{
        height:210px;
        border-radius:18px;
    }

    .sp-product-nav-wrap{
        top:76px;
    }
}

.sp-visitor-subtitle{margin:.2rem 0 1rem;font-size:clamp(1.25rem,2.6vw,2.15rem);line-height:1.12;color:rgba(229,242,249,.84);max-width:34ch}
.sp-value-grid,.sp-availability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.2rem}
.sp-value-grid article,.sp-availability-grid article{padding:1.3rem;border:1px solid rgba(255,255,255,.1);border-radius:26px;background:linear-gradient(145deg,rgba(17,34,51,.82),rgba(8,18,29,.72));min-height:170px}
.sp-value-grid span,.sp-availability-grid span{font-size:.7rem;letter-spacing:.14em;color:rgb(var(--world-accent))}
.sp-value-grid h3,.sp-availability-grid h3{margin:2rem 0 0;font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.2;overflow-wrap:anywhere}
@media(max-width:850px){.sp-value-grid,.sp-availability-grid{grid-template-columns:1fr}.sp-value-grid article,.sp-availability-grid article{min-height:0}}