/* Keep app category controls within the shared collection layout. */
.sv-article-grid .su-story-card[hidden]{display:none!important}
#app-category-filters .filter-btn{appearance:none;text-decoration:none}
#main #app-category-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
#main #app-category-filters .filter-btn{cursor:pointer}
#main #app-category-filters .filter-btn.selected{background:#c4ff54;color:#111}
#main .sv-filter-heading:has(#app-category-filters){display:block}


/* Desktop only: tighten the gap between the introductory scrolling text and category row. */
@media (min-width: 761px) {
  main.sv-collection .sv-introduction { margin-bottom: 24px !important; }
}


/* Category row only: black at the top, fading to transparent below. */
main.sv-collection .sv-filter-heading {
  background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.78) 28%, rgba(0,0,0,.30) 72%, transparent 100%);
}
/* Keep horizontal scrolling available, but conceal its scrollbar until hover. */
main.sv-collection .sv-filter-heading,
main.sv-collection .sv-filter-heading .filter-buttons {
  scrollbar-width: none;
}
main.sv-collection .sv-filter-heading:hover,
main.sv-collection .sv-filter-heading:focus-within,
main.sv-collection .sv-filter-heading .filter-buttons:hover,
main.sv-collection .sv-filter-heading .filter-buttons:focus-within {
  scrollbar-width: thin;
}
main.sv-collection .sv-filter-heading::-webkit-scrollbar,
main.sv-collection .sv-filter-heading .filter-buttons::-webkit-scrollbar {
  height: 0;
}
main.sv-collection .sv-filter-heading:hover::-webkit-scrollbar,
main.sv-collection .sv-filter-heading:focus-within::-webkit-scrollbar,
main.sv-collection .sv-filter-heading .filter-buttons:hover::-webkit-scrollbar,
main.sv-collection .sv-filter-heading .filter-buttons:focus-within::-webkit-scrollbar {
  height: 5px;
}
main.sv-collection .sv-filter-heading::-webkit-scrollbar-thumb,
main.sv-collection .sv-filter-heading .filter-buttons::-webkit-scrollbar-thumb {
  background: rgba(180,180,180,.65);
  border-radius: 8px;
}


/* Subtle category borders and focus-on-hover; preserve the existing row layout. */
main.sv-collection .sv-filter-heading .filter-btn {
  border-color: rgba(165, 165, 165, .23) !important;
  transition: opacity .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  main.sv-collection .sv-filter-heading .filter-buttons:hover .filter-btn {
    opacity: .52;
  }
  main.sv-collection .sv-filter-heading .filter-buttons .filter-btn:hover {
    opacity: 1;
    border-color: rgba(165, 165, 165, .13) !important;
  }
}
main.sv-collection .sv-filter-heading .filter-btn:focus-visible {
  opacity: 1;
  outline-offset: 3px;
}

/* App cards use the shared article grid and hover rules without overriding them. */
#main .sv-app-collection .su-story-image { background:#2e323d; }
#main .sv-app-collection .ad-app-picture {
 position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
 width:var(--art-wide,90%); aspect-ratio:var(--art-aspect,1);
 overflow:hidden; background:#2e323d;
}
#main .sv-app-collection .ad-app-picture > img {
 position:absolute; max-width:none; max-height:none; object-fit:fill;
 filter:brightness(1.18);
}
#main .sv-app-collection .su-story-card:nth-child(4n+2) .ad-app-picture,
#main .sv-app-collection .su-story-card:nth-child(4n+3) .ad-app-picture { width:var(--art-tall,90%); }
@media(max-width:520px){ #main .sv-app-collection .su-story-card:nth-child(n) .ad-app-picture { width:var(--art-tall,90%); } }
#main .sv-app-collection #ad-app-art-2 { --art-aspect:1.33333333; --art-wide:85.714286%; --art-tall:90.000000%; }
#main .sv-app-collection #ad-app-art-2 > img { width:156.750000%!important;height:209.000000%!important;left:-28.500000%!important;top:-61.833333%!important; }
#main .sv-app-collection #ad-app-art-4 { --art-aspect:1.12667353; --art-wide:72.429013%; --art-tall:85.932727%; }
#main .sv-app-collection #ad-app-art-4 > img { width:114.625229%!important;height:129.145211%!important;left:-4.113346%!important;top:-17.198764%!important; }

/* Equal article columns; keep the shared card hover and typography. */
body #main .sv-app-collection .sv-article-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
body #main .sv-app-collection .sv-article-grid>.su-story-card:nth-child(n) { grid-column:auto!important; }
body #main .sv-app-collection .su-story-card:nth-child(n) .su-story-image { aspect-ratio:1.4!important; }
body #main .sv-app-collection .su-story-card:nth-child(n) .ad-app-picture { width:var(--art-wide,90%); }
/* Hide generated article reading-time/category overlays on app pictures. */
body #main .sv-app-collection .su-story-image :is(.adhder-card-read-time,.adhder-desktop-image-meta,.su-story-meta) { display:none!important; }
body #main .sv-app-collection .ad-app-subscriptions { margin-top:72px; }
body #main .sv-app-collection .ad-app-subscriptions>h2 { font-size:clamp(30px,3.5vw,48px);font-weight:500;line-height:1.1;letter-spacing:-.04em;margin:0 0 32px; }
body #main .sv-app-collection .ad-app-subscriptions .su-story-card>p { max-height:none!important;overflow:visible!important; }
@media(min-width:521px) and (max-width:1000px){body #main .sv-app-collection .sv-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:520px){
 body #main .sv-app-collection .sv-article-grid{grid-template-columns:minmax(0,1fr)!important;}
 body #main .sv-app-collection .su-story-card:nth-child(n) .su-story-image{aspect-ratio:1.18!important;}
 body #main .sv-app-collection .su-story-card:nth-child(n) .ad-app-picture{width:var(--art-tall,90%);}
}

/* Newly supplied graphics retain their complete layouts and original colours. */
body #main .sv-app-collection :is(#ad-app-art-videos,#ad-app-art-supplements,#ad-app-art-experiences) {
 inset:0; width:100%!important; height:100%; aspect-ratio:auto;
 transform:none; background:#2e323d;
}
body #main .sv-app-collection :is(#ad-app-art-videos,#ad-app-art-supplements,#ad-app-art-experiences)>img {
 inset:0; width:100%!important; height:100%!important; object-fit:contain; filter:none;
}

/* Feature name inside a white pill at the bottom-right of every card image. */
body #main .sv-app-collection .su-story-image>.ad-app-image-label {
 position:absolute;right:10px;bottom:10px;z-index:8;display:inline-block!important;
 max-width:calc(100% - 20px);padding:8px 14px;border:0;border-radius:999px;
 background:#fff!important;color:#000!important;font-size:14px;font-weight:600;
 line-height:1.2;letter-spacing:0;text-transform:none;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
@media(max-width:520px){body #main .sv-app-collection .su-story-image>.ad-app-image-label{font-size:12px;padding:7px 12px;right:8px;bottom:8px;}}

body #main .sv-app-collection .su-story-card { cursor:default; }
/* Replacement graphics use their full original layouts; no legacy crop/filter. */
body #main .sv-app-collection .su-story-card:nth-child(n) .ad-app-picture--full {
 inset:0; width:100%!important; height:100%; aspect-ratio:auto; transform:none;
}
body #main .sv-app-collection .ad-app-picture--full>img {
 inset:0; width:100%!important; height:100%!important;object-fit:contain;filter:none;
}

/* Keep the final three resource cards together on a new desktop row. */
@media(min-width:1001px){body #main .sv-app-collection .sv-article-grid>#knowledge{grid-column:1!important;}}

/* New root-folder media: full artwork, with no legacy crops. */
body #main .sv-app-collection .ad-app-picture--full > .ad-app-video {
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain;background:#2e323d;z-index:3;opacity:0;pointer-events:none;
}
body #main .sv-app-collection .ad-app-picture--full > img { object-fit:contain; }
body #main .sv-app-collection .is-playing > .ad-app-video { opacity:1!important; }
body #main .sv-app-collection .is-playing > img { opacity:0!important; }
body #main .sv-app-collection .ad-app-play {
 position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;
 padding:10px 18px;border:0;border-radius:999px;background:#bdff63;color:#000;cursor:pointer;
}
body #main .sv-app-collection .ad-app-play[hidden] { display:none!important; }

/* Inset both image and video equally inside the card. */
body #main .sv-app-collection .su-story-card:nth-child(n) .ad-app-picture--full {
 left:10%!important;top:10%!important;right:auto!important;bottom:auto!important;
 width:80%!important;height:80%!important;transform:none!important;
}
body #main .sv-app-collection .ad-app-picture--full > img {
 left:0!important;top:0!important;width:100%!important;height:100%!important;z-index:1;
}
body #main .sv-app-collection .ad-app-picture--full > video:not([poster]) { opacity:1; }

/* Enlarge only the playing demo, retaining the smaller resting image. */
body #main .sv-app-collection .su-story-card:nth-child(n) .ad-app-picture--full.is-playing {
 left:2%!important;top:2%!important;width:96%!important;height:96%!important;
}
body #main .sv-app-collection .ad-app-picture--full {
 transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease;
}
body #main .sv-app-collection .ad-app-title-row {
 display:flex;align-items:center;justify-content:space-between;gap:10px;
}
body #main .sv-app-collection .ad-app-title-row>h3 {
 flex:1;min-width:0;margin:0!important;
}
body #main .sv-app-collection .ad-app-title-row>.ad-app-image-label {
 position:static!important;display:inline-block!important;flex:0 0 auto;
 background:#252830!important;color:#d9dce2!important;border:0!important;
 border-radius:999px;padding:3px 7px!important;font-size:10px!important;
 font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none;white-space:nowrap;
 max-width:45%;overflow:hidden;text-overflow:ellipsis;
}
@media(prefers-reduced-motion:reduce){body #main .sv-app-collection .ad-app-picture--full{transition:none;}}

/* Crossfade artwork while keeping the hover zoom. */
body #main .sv-app-collection .ad-app-picture--full > img {
 opacity:1;visibility:visible!important;transition:opacity .16s ease!important;
}
body #main .sv-app-collection .ad-app-picture--full > .ad-app-video {
 transition:opacity .16s ease!important;
}
/* Clear the legacy brain-dump crop, including its more specific ID rules. */
body #main .sv-app-collection #ad-app-art-2.ad-app-picture--full > img {
 left:0!important;top:0!important;right:auto!important;bottom:auto!important;
 width:100%!important;height:100%!important;object-fit:contain!important;
 transform:none!important;filter:none!important;
}

/* Slide right on entry and reverse left on exit, retaining the zoom. */
body #main .sv-app-collection .ad-app-picture--full { overflow:hidden; }
body #main .sv-app-collection .ad-app-picture--full > img {
 opacity:1!important;visibility:visible!important;transform:translateX(0)!important;
 transition:transform .24s ease!important;
}
body #main .sv-app-collection .ad-app-picture--full > .ad-app-video {
 opacity:1!important;transform:translateX(-101%)!important;
 transition:transform .24s ease!important;
}
body #main .sv-app-collection .ad-app-picture--full.is-playing > img,
body #main .sv-app-collection #ad-app-art-2.ad-app-picture--full.is-playing > img {
 opacity:1!important;transform:translateX(101%)!important;
}
body #main .sv-app-collection .ad-app-picture--full.is-playing > .ad-app-video {
 transform:translateX(0)!important;
}
body #main .sv-app-collection .su-story-card:hover,
body #main .sv-app-collection .su-story-card:hover .su-story-image {
 border-color:transparent!important;box-shadow:none!important;outline:none!important;
}
body #main .sv-app-collection .su-story-card:hover::before,
body #main .sv-app-collection .su-story-card:hover::after,
body #main .sv-app-collection .su-story-card:hover .su-story-image::before,
body #main .sv-app-collection .su-story-card:hover .su-story-image::after {
 border-color:transparent!important;box-shadow:none!important;
}
@media(prefers-reduced-motion:reduce){
 body #main .sv-app-collection .ad-app-picture--full > img,
 body #main .sv-app-collection .ad-app-picture--full > .ad-app-video {transition:none!important;}
}

/* More breathing room between each feature image and its title row. */
body #main .sv-app-collection #app-sections .su-story-image { margin-bottom:28px!important; }
body #main .sv-app-collection #app-sections .ad-app-title-row { margin-top:0!important; }

/* Disable the shared gradient-drawn green frame on app cards only. */
html body #main .sv-app-collection .sv-article-grid .su-story-card .su-story-image::before,
html body #main .sv-app-collection .sv-article-grid .su-story-card .su-story-image::after {
 content:none!important;display:none!important;background:none!important;
 background-image:none!important;border:0!important;box-shadow:none!important;
}

/* Preserve the dashboard video's alpha channel without a video backdrop. */
body #main .sv-app-collection #ad-app-art-1,
body #main .sv-app-collection #ad-app-art-1 > .ad-app-video { background:transparent!important; }

/* A transparent dashboard demo must not reveal its still image underneath. */
html body #main .sv-app-collection #ad-app-art-1.ad-app-picture--full > .ad-app-video {
 opacity:0!important;
}
html body #main .sv-app-collection #ad-app-art-1.ad-app-picture--full.is-playing > .ad-app-video {
 opacity:1!important;
}
html body #main .sv-app-collection #ad-app-art-1.ad-app-picture--full.is-playing > img {
 opacity:0!important;visibility:hidden!important;
}

/* The support section contains two options. */
@media(min-width:1001px){body #main .sv-app-collection .ad-app-subscriptions .sv-article-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}

body #main .sv-app-collection #ad-app-art-human-support,
body #main .sv-app-collection #ad-app-art-pattern-analysis,
body #main .sv-app-collection #ad-app-art-accountability {background:transparent!important;}
body #main .sv-app-collection .ad-app-subscriptions .su-story-image {margin-bottom:28px!important;}

/* Keep every app card at full brightness when another card is hovered. */
html body #main .sv-app-collection .sv-article-grid > .su-story-card,
html body #main .sv-app-collection .sv-article-grid:has(> .su-story-card:hover) > .su-story-card:not(:hover) {
 opacity:1!important;
}

/* Still artwork only: one smooth zoom, with no slide or media swap. */
html body #main .sv-app-collection .su-story-card .ad-app-picture--full {
 left:10%!important;top:10%!important;width:80%!important;height:80%!important;
 transform:scale(1)!important;transform-origin:center;
 transition:transform .25s ease!important;
}
html body #main .sv-app-collection .su-story-card .ad-app-picture--full > img,
html body #main .sv-app-collection .su-story-card #ad-app-art-2.ad-app-picture--full > img {
 transform:none!important;opacity:1!important;visibility:visible!important;
 transition:none!important;
}
@media(hover:hover){
 html body #main .sv-app-collection .su-story-card:hover .ad-app-picture--full {
  transform:scale(1.16)!important;
 }
}
@media(prefers-reduced-motion:reduce){html body #main .sv-app-collection .su-story-card .ad-app-picture--full{transition:none!important;}}

/* Feature pills sit above their titles, aligned to the left. */
html body #main .sv-app-collection .ad-app-title-row {
 display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;
}
html body #main .sv-app-collection .ad-app-title-row > .ad-app-image-label {
 position:static!important;align-self:flex-start;max-width:100%;
 font-size:13px!important;font-weight:700!important;text-transform:uppercase!important;
 background:#484e5c!important;color:#000!important;padding:8px 12px!important;
}
html body #main .sv-app-collection .ad-app-title-row > h3 {width:100%;}

/* Support card backgrounds. */
html body #main .sv-app-collection .ad-app-subscriptions .su-story-image,
html body #main .sv-app-collection .ad-app-subscriptions .ad-app-picture--full {
 background:#2e3d3c!important;
}

/* Support labels match the new support-image colour. */
html body #main .sv-app-collection .ad-app-subscriptions .ad-app-title-row > .ad-app-image-label {
 background:#2e3d3c!important;
}

/* Supporting detail below the introduction. */
html body #main .sv-app-collection .sv-introduction > .ad-app-intro-note {
 font-size:14px!important;line-height:1.6!important;font-weight:400!important;
 letter-spacing:normal!important;max-width:500px!important;width:100%;
 text-align:left!important;margin:20px auto 0 0!important;justify-self:start;
}