.ags-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:18px auto 0;padding:0 24px;box-sizing:border-box}
  .as-secrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
  /* Category header carries the hierarchy — no rules between sections. */
  .as-sechd{display:inline-flex;align-items:center;gap:9px;min-width:0}
  .as-seclabel{font:600 15px/1.3 'Inter',sans-serif;letter-spacing:-.012em;color:#101828}
  .as-seccount{position:relative;font:500 12.5px/1 'Inter',sans-serif;color:#8F98A6;font-variant-numeric:tabular-nums;padding-left:11px}
  .as-seccount::before{content:'';position:absolute;left:0;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:#C4CAD3}
  body.theme-dark .as-seclabel{color:#F4F4F5}
  body.theme-dark .as-seccount{color:#9096A1}
  body.theme-dark .as-seccount::before{background:#4B515A}
  .ags-hero h2 em{font-style:normal;color:#4F46E5}
  .ags-search{display:flex;align-items:center;gap:8px;max-width:520px;margin:24px auto 0;padding:0 6px 0 14px;background:#fff;border:1px solid #E4E7EC;border-radius:11px;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:border-color .16s ease,box-shadow .16s ease}
  .ags-search:focus-within{border-color:#B9C6F5;box-shadow:0 0 0 4px rgba(79,70,229,.08)}
  .ags-search input{flex:1 1 auto;min-width:0;height:42px;padding:0;border:0;background:transparent;outline:none;font:400 13.5px/1 'Inter',sans-serif;color:#101828}
  .ags-search input::placeholder{color:#98A2B3}
  .ags-search button{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:#F2F4F7;color:#475467;cursor:pointer;transition:background .15s ease,color .15s ease}
  .ags-search button:hover{background:#EAF1FF;color:var(--brand-blue)}
  .ags-search button svg{width:15px;height:15px}
  .ags-sec{padding:30px 0 0;position:relative}
  .ags-sec + .ags-sec{padding-top:52px}
  .ags-sec:last-child{padding-bottom:40px}
  .ags-viewall{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--brand-blue);font:600 12.5px/1 'Inter',sans-serif;cursor:pointer;transition:color .15s ease}
  .ags-viewall:hover{color:var(--brand-blue-strong)}
  .ags-viewall svg{width:14px;height:14px;transition:transform .18s ease}
  .ags-viewall:hover svg{transform:translateX(2px)}
  body.theme-dark .ags-viewall{color:#8AB4FF}
  .ags-users{flex:1 1 auto;min-width:0;font:400 12px/1.3 'Inter',sans-serif;color:#98A2B3}
  .ags-users strong{font-weight:500;color:#475467;font-variant-numeric:tabular-nums}
  body.theme-dark .ags-users strong{color:#C4CBD8}
  body.theme-dark .ags-hero{background:linear-gradient(180deg,#20232A 0%,#1D2024 60%,#191A1C 100%);border-color:#2A2D33}
    body.theme-dark .ags-hero h2{color:#F4F4F5}
    body.theme-dark .ags-hero h2 em{color:#A5A0FF}
    body.theme-dark .ags-hero p{color:#9BA1AC}
    body.theme-dark .ags-hero-badge{background:#23262C;border-color:#33373F;color:#A5A0FF}
    body.theme-dark .ags-search button{background:#2E323A;color:#C7CCD5}
  body.theme-dark .ags-search{background:#23262C;border-color:#33373F}
  body.theme-dark .ags-search input{color:#F4F4F5}
  body.theme-dark .ags-users{color:#8A8F99}
  .aa-scroll .as-secrow{max-width:1180px;margin:0 auto;padding:0 24px;box-sizing:border-box}
  @media(max-width:1000px){.ags-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.ags-grid{grid-template-columns:1fr}}
  .ags-card{--c:#6941C6;--soft:#F4F3FF;display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid #EAECF0;border-radius:14px;padding:20px 20px 16px;cursor:pointer;font-family:'Inter',sans-serif;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;opacity:0;transform:translateY(10px);animation:agsIn .5s cubic-bezier(.22,1,.36,1) forwards}
  @keyframes agsIn{to{opacity:1;transform:none}}
  .ags-grid .ags-card:nth-child(1){animation-delay:.03s}.ags-grid .ags-card:nth-child(2){animation-delay:.07s}.ags-grid .ags-card:nth-child(3){animation-delay:.11s}.ags-grid .ags-card:nth-child(4){animation-delay:.15s}.ags-grid .ags-card:nth-child(5){animation-delay:.19s}.ags-grid .ags-card:nth-child(6){animation-delay:.23s}.ags-grid .ags-card:nth-child(7){animation-delay:.27s}.ags-grid .ags-card:nth-child(8){animation-delay:.31s}
  @media(prefers-reduced-motion:reduce){.ags-card{animation:none;opacity:1;transform:none}}
  .ags-card:hover{border-color:#CFD9E8;box-shadow:0 10px 24px -18px rgba(16,24,40,.24);transform:translateY(-2px)}
  /* One accent for the whole set. The old per-family violet/teal/blue tints were
     decoration — nothing in the product mapped to them. */
  .ags-card.voice,.ags-card.sms,.ags-card.intel,.ags-card{--c:var(--brand-blue);--soft:var(--brand-blue-soft)}
  .ags-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
  .ags-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;color:#344054;background:#F1F4F9;transition:color .18s ease,background .18s ease}
  .ags-ic svg{width:23px;height:23px}
  .ags-card:hover .ags-ic{color:var(--brand-blue);background:var(--brand-blue-soft)}
  .ags-tags{display:inline-flex;align-items:center;gap:6px}
  .ags-cat{font:700 10px/1 'Inter',sans-serif;letter-spacing:.06em;color:var(--c);background:var(--soft);padding:5px 8px;border-radius:6px}
  .ags-new{font:700 10px/1 'Inter',sans-serif;letter-spacing:.05em;color:#fff;background:var(--brand-blue);padding:5px 7px;border-radius:6px}
  .ags-name{font:600 15.5px/1.3 'Inter',sans-serif;color:#101828;letter-spacing:-.01em;margin-bottom:8px}
  .ags-desc{font:400 13px/1.6 'Inter',sans-serif;color:#667085;flex:1 1 auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ags-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid #F2F4F7}
  .ags-status{display:inline-flex;align-items:center;gap:7px;font:500 12px/1 'Inter',sans-serif;color:#667085}
  .ags-dot{width:6px;height:6px;border-radius:50%;background:#12B76A;box-shadow:0 0 0 3px rgba(18,183,106,.14)}
  .ags-go{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#F4F6F9;color:#667085;transition:background .16s ease,color .16s ease,transform .16s ease}
  .ags-go svg{width:16px;height:16px}
  .ags-card:hover .ags-go{background:var(--soft);color:var(--c);transform:translateX(3px)}
  /* No hairline under the hero — its gradient already fades into the page. */
  .ags-hero{position:relative;overflow:hidden;text-align:center;padding:54px 24px 46px;margin:-24px -28px 0;background:linear-gradient(180deg,#F7F9FE 0%,#FBFCFE 52%,#fff 100%);border-bottom:0}
  .ags-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(79,110,247,.045) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(115% 85% at 50% 0%,#000 15%,transparent 68%);mask-image:radial-gradient(115% 85% at 50% 0%,#000 15%,transparent 68%);pointer-events:none}
  .ags-hero::after{content:'';position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:760px;height:340px;background:radial-gradient(closest-side,rgba(99,102,241,.07),transparent 70%);pointer-events:none}
  .ags-hero>*{position:relative;z-index:1}
  .ags-hero-inner{position:relative;z-index:1}
  .ags-hero-kicker{display:none}
  /* ===== Header layouts (tweakable · light mode only) ===== */
  .ags-hero-stats{display:none}

  /* --- Aurora: one calm light source. The grid overlay and the third wash were
         doing the cluttering, so the depth now comes from two soft blooms in a
         single hue family plus a genuinely raised search field. --- */
  body.ai-hero-aurora .ags-hero{padding:60px 24px 52px;background:#FCFDFF;border-bottom:1px solid #EEF1F6}
  body.ai-hero-aurora .ags-hero::before{background:none;background-image:none}
  body.ai-hero-aurora .ags-hero::after{top:-300px;left:50%;width:1040px;height:600px;background:
    radial-gradient(closest-side,rgba(0,76,230,.11),transparent 72%) 32% 42%/700px 440px no-repeat,
    radial-gradient(closest-side,rgba(94,132,255,.08),transparent 72%) 70% 34%/560px 380px no-repeat}
  /* Tracked uppercase leaves a trailing letter-space on the final glyph, which pushes
     a centred label right of true centre — the negative margin pays it back. */
  body.ai-hero-aurora .ags-hero-kicker{display:none;align-items:center;gap:8px;font:600 10.5px/1 'Inter',sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#1B4FE8;margin:0 -.17em 20px 0}
  body.ai-hero-aurora .ags-hero-kicker::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(27,79,232,.12)}
  /* Two lines, one lockup: the subject carries the weight, the audience drops a size
     and a shade so the pair reads as a single stacked statement. */
  body.ai-hero-aurora .ags-hero h2{display:block;font-weight:500;font-size:35px;line-height:1.16;letter-spacing:-.012em;color:#0B1220;background:none;-webkit-text-fill-color:initial;max-width:900px;margin:0 auto;font-kerning:normal;font-optical-sizing:auto}
  body.ai-hero-aurora .ags-hero h2 em{font-style:normal;font-weight:500;color:#0B1220}
  body.ai-hero-aurora .ags-hero h2 span{display:inline;font-weight:300;font-size:35px;line-height:1.16;letter-spacing:-.012em;color:#78859B;margin-top:0}
  body.ai-hero-aurora .ags-hero p{font-size:15px;line-height:1.6;color:#697689;max-width:none;margin:22px auto 0}
  body.ai-hero-aurora .ags-search{margin-top:28px;max-width:500px;height:48px;padding:0 6px 0 16px;border-radius:12px;border:1px solid #E3E8F1;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 28px -20px rgba(11,32,84,.24)}
  body.ai-hero-aurora .ags-search input{height:46px;font-size:14px}
  body.ai-hero-aurora .ags-search:focus-within{border-color:#BCCFF8;box-shadow:0 0 0 4px rgba(0,76,230,.09),0 12px 28px -20px rgba(11,32,84,.26)}
  /* A solid brand-blue chip was the loudest thing in a very quiet header. */
  body.ai-hero-aurora .ags-search button{width:36px;height:36px;border-radius:9px;background:#EEF4FE;border:1px solid #E0EAFB;color:#3B6FE0}
  body.ai-hero-aurora .ags-search button:hover{background:#E2ECFD;border-color:#CFDFFA;color:var(--brand-blue)}

  /* ===== Header texture (tweak: heroTexture) — reclaims ::before as a pattern
     layer. Every option is masked to fade out well before the copy, so the
     texture reads as paper grain behind the words, never as a graphic. ===== */
  body.ai-hero-aurora[class] .ags-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-repeat:repeat;background-position:50% 0}
  body.ai-hero-aurora.hero-tex-off .ags-hero::before{background:none;background-image:none}
  body.ai-hero-aurora.hero-tex-grid .ags-hero::before{background-image:linear-gradient(90deg,rgba(15,38,98,.055) 1px,transparent 1px),linear-gradient(180deg,rgba(15,38,98,.045) 1px,transparent 1px);background-size:72px 72px,72px 72px;-webkit-mask-image:radial-gradient(120% 92% at 50% 0%,#000 8%,rgba(0,0,0,.55) 38%,transparent 74%);mask-image:radial-gradient(120% 92% at 50% 0%,#000 8%,rgba(0,0,0,.55) 38%,transparent 74%)}
  body.ai-hero-aurora.hero-tex-rays .ags-hero::before{background-image:repeating-conic-gradient(from 208deg at 50% -32%,rgba(23,54,140,.075) 0deg .34deg,transparent .34deg 4.6deg);background-size:auto;background-repeat:no-repeat;-webkit-mask-image:radial-gradient(85% 118% at 50% -14%,#000 22%,transparent 76%);mask-image:radial-gradient(85% 118% at 50% -14%,#000 22%,transparent 76%)}
  body.ai-hero-aurora.hero-tex-contour .ags-hero::before{background-image:repeating-radial-gradient(circle at 50% 34%,transparent 0 57px,rgba(20,48,124,.055) 57px 58px);background-repeat:no-repeat;-webkit-mask-image:radial-gradient(70% 105% at 50% 34%,#000 18%,transparent 78%);mask-image:radial-gradient(70% 105% at 50% 34%,#000 18%,transparent 78%)}
  body.ai-hero-aurora.hero-tex-dots .ags-hero::before{background-image:radial-gradient(rgba(30,60,150,.10) 1px,transparent 1.1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(105% 88% at 50% 4%,#000 6%,rgba(0,0,0,.5) 40%,transparent 72%);mask-image:radial-gradient(105% 88% at 50% 4%,#000 6%,rgba(0,0,0,.5) 40%,transparent 72%)}
  /* A hairline that brightens at centre reads as a horizon rather than a border. */
  body.ai-hero-aurora:not(.hero-tex-off) .ags-hero{border-bottom-color:transparent;box-shadow:inset 0 -1px 0 0 transparent}
  body.ai-hero-aurora:not(.hero-tex-off) .ags-hero .ags-hero-rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#DFE5F0 26%,#C9D6EE 50%,#DFE5F0 74%,transparent);pointer-events:none;z-index:2}
  body.ai-hero-aurora.hero-tex-off .ags-hero .ags-hero-rule{display:none}
  body.theme-dark.ai-hero-aurora.hero-tex-grid .ags-hero::before{background-image:linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.045) 1px,transparent 1px)}
  body.theme-dark.ai-hero-aurora.hero-tex-rays .ags-hero::before{background-image:repeating-conic-gradient(from 208deg at 50% -32%,rgba(255,255,255,.07) 0deg .34deg,transparent .34deg 4.6deg)}
  body.theme-dark.ai-hero-aurora.hero-tex-contour .ags-hero::before{background-image:repeating-radial-gradient(circle at 50% 34%,transparent 0 57px,rgba(255,255,255,.055) 57px 58px)}
  body.theme-dark.ai-hero-aurora.hero-tex-dots .ags-hero::before{background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.1px)}
  body.theme-dark.ai-hero-aurora:not(.hero-tex-off) .ags-hero .ags-hero-rule{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 26%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.06) 74%,transparent)}

  /* ===== Header motion (tweak: heroMotion) — 24s+ cycles, sub-4% opacity swing,
     so it reads as light shifting rather than an animation playing. ===== */
  @keyframes agsDrift{0%{transform:translateX(-50%) translate3d(0,0,0) scale(1)}50%{transform:translateX(-50%) translate3d(-16px,10px,0) scale(1.04)}100%{transform:translateX(-50%) translate3d(0,0,0) scale(1)}}
  @keyframes agsBreathe{0%,100%{opacity:.86}50%{opacity:1}}
  body.hero-motion-field.ai-hero-aurora .ags-hero::after{animation:agsDrift 26s ease-in-out infinite,agsBreathe 13s ease-in-out infinite}
  @keyframes agsStroke{from{background-position:0 50%}to{background-position:-720px 50%}}
  body.hero-motion-stroke.ai-hero-aurora .ags-search{border-color:transparent;background-clip:padding-box}
  body.hero-motion-stroke.ai-hero-aurora .ags-search::before{content:'';position:absolute;inset:-1.5px;border-radius:13.5px;padding:1.5px;background:linear-gradient(90deg,#E3E8F1 0%,#E3E8F1 30%,#CBDCF8 41%,#9CBEF6 50%,#CBDCF8 59%,#E3E8F1 70%,#E3E8F1 100%);background-size:720px 100%;background-repeat:repeat-x;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:agsStroke 8s linear infinite;pointer-events:none}
  body.hero-motion-stroke.ai-hero-aurora .ags-search{position:relative}
  body.hero-motion-stroke.ai-hero-aurora .ags-search:focus-within::before{animation-duration:4.5s}
  @media(prefers-reduced-motion:reduce){body.hero-motion-field.ai-hero-aurora .ags-hero::after,body.hero-motion-stroke.ai-hero-aurora .ags-search::before{animation:none}}

  /* ============================================================================
     STUDIO UI OPTIONS (tweak: studioUI) — three ways to give the page structure
     without adding colour. Each one changes the header AND the card grid so the
     two read as one system. Light mode only; dark mode keeps the calm baseline.
     ============================================================================ */
  .ags-hero-stats>div{display:flex;flex-direction:column;gap:5px}
  .ags-hero-stats b{font:600 17px/1 'Inter',sans-serif;color:#101828;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .ags-hero-stats span{font:500 10.5px/1 'Inter',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#98A2B3}

  /* --- 1 · LATTICE ---------------------------------------------------------
     The whitespace problem is really an alignment problem: a centred island of
     text over a centred island of cards. Lattice pulls the header onto the same
     left edge as the grid, puts search and figures on the opposite rail, and
     fuses the cards into one bordered plane so the page has a spine. ---------- */
  body.studio-lattice:not(.theme-dark) .ags-hero{padding:32px 0 28px;background:#FBFCFE;border-bottom:1px solid #E7EBF2;text-align:left}
  body.studio-lattice:not(.theme-dark) .ags-hero::after{display:none}
  body.studio-lattice:not(.theme-dark) .ags-hero::before{background:none;background-image:linear-gradient(90deg,rgba(16,24,40,.032) 1px,transparent 1px);background-size:66px 100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  body.studio-lattice:not(.theme-dark) .ags-hero-inner{max-width:1180px;margin:0 auto;padding:0 24px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title search" "sub stats";align-items:end;column-gap:48px;row-gap:16px}
  body.studio-lattice:not(.theme-dark) .ags-hero h2{grid-area:title;font-size:29px;line-height:1.2;letter-spacing:-.026em;margin:0;max-width:none}
  body.studio-lattice:not(.theme-dark) .ags-hero h2 span{display:inline;font-size:inherit;font-weight:300;margin:0;color:#8A94A6}
  body.studio-lattice:not(.theme-dark) .ags-hero h2 em::after{content:' '}
  body.studio-lattice:not(.theme-dark) .ags-hero p{grid-area:sub;margin:0;font-size:13.5px;line-height:1.55;max-width:520px;color:#7A8698}
  body.studio-lattice:not(.theme-dark) .ags-hero p br{display:none}
  body.studio-lattice:not(.theme-dark) .ags-search{grid-area:search;margin:0;width:330px;max-width:330px;height:42px;align-self:end}
  body.studio-lattice:not(.theme-dark) .ags-search input{height:40px;font-size:13.5px}
  body.studio-lattice:not(.theme-dark) .ags-search button{width:32px;height:32px}
  body.studio-lattice:not(.theme-dark) .ags-hero-stats{grid-area:stats;display:flex;justify-content:flex-end;gap:34px;align-self:end;padding-bottom:2px}
  body.studio-lattice:not(.theme-dark) .ags-hero-stats>div{align-items:flex-end}
  body.studio-lattice:not(.theme-dark) .ags-sec{padding-top:26px}
  body.studio-lattice:not(.theme-dark) .ags-grid{gap:1px;padding:0;width:min(1132px,calc(100% - 48px));margin:14px auto 0;background:#E7EBF2;border:1px solid #E7EBF2;border-radius:14px;overflow:hidden}
  body.studio-lattice:not(.theme-dark) .ags-card{border:0;border-radius:0;box-shadow:none;padding:22px 22px 20px}
  body.studio-lattice:not(.theme-dark) .ags-card:hover{transform:none;box-shadow:none;background:#F8FAFE}
  body.studio-lattice:not(.theme-dark) .ags-ic{width:34px;height:34px;border-radius:9px;margin-bottom:15px;background:#fff;border:1px solid #E7EBF2;color:#475467}
  body.studio-lattice:not(.theme-dark) .ags-ic svg{width:19px;height:19px}
  body.studio-lattice:not(.theme-dark) .ags-card:hover .ags-ic{background:#fff;border-color:#CFDCF6}
  body.studio-lattice:not(.theme-dark) .ags-foot{border-top:0;margin-top:16px;padding-top:0}
  body.studio-lattice:not(.theme-dark) .ags-add{opacity:0;transform:scale(.9);transition:opacity .16s ease,transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease}
  body.studio-lattice:not(.theme-dark) .ags-card:hover .ags-add,body.studio-lattice:not(.theme-dark) .ags-add:focus-visible{opacity:1;transform:none}

  /* --- 2 · EDITORIAL -------------------------------------------------------
     Boxes floating in space are what make the page feel empty. Editorial drops
     the cards entirely: a numbered, ruled list reads as a catalogue, fits far
     more per screen, and lets the type do the work. --------------------------- */
  body.studio-editorial:not(.theme-dark) .ags-hero{padding:46px 24px 34px;background:#fff;border-bottom:1px solid #EDF0F5}
  body.studio-editorial:not(.theme-dark) .ags-hero::after{opacity:.45}
  body.studio-editorial:not(.theme-dark) .ags-hero h2{font-size:33px;line-height:1.18;letter-spacing:-.03em}
  body.studio-editorial:not(.theme-dark) .ags-hero h2 span{display:inline;font-size:inherit;font-weight:300;margin:0;color:#98A2B3}
  body.studio-editorial:not(.theme-dark) .ags-hero h2 em::after{content:' '}
  body.studio-editorial:not(.theme-dark) .ags-hero p{margin-top:14px;font-size:14px;max-width:560px}
  body.studio-editorial:not(.theme-dark) .ags-search{margin-top:22px;max-width:440px;height:44px}
  body.studio-editorial:not(.theme-dark) .ags-search input{height:42px}
  body.studio-editorial:not(.theme-dark) .ags-hero-stats{display:flex;justify-content:center;margin-top:28px}
  body.studio-editorial:not(.theme-dark) .ags-hero-stats>div{align-items:center;padding:0 26px;border-left:1px solid #EDF0F5}
  body.studio-editorial:not(.theme-dark) .ags-hero-stats>div:first-child{border-left:0}
  body.studio-editorial:not(.theme-dark) .ags-sec{padding-top:22px}
  body.studio-editorial:not(.theme-dark) .aa-scroll .as-secrow{max-width:940px}
  body.studio-editorial:not(.theme-dark) .ags-grid{display:block;max-width:940px;padding:0 24px;margin:4px auto 0;counter-reset:agsn}
  body.studio-editorial:not(.theme-dark) .ags-card{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"num ic name foot" "num ic desc foot";align-items:start;column-gap:18px;row-gap:5px;background:transparent;border:0;border-bottom:1px solid #EFF1F5;border-radius:0;padding:20px 10px;box-shadow:none}
  body.studio-editorial:not(.theme-dark) .ags-card:hover{transform:none;box-shadow:none;background:#FAFBFE;border-color:#E2E7F0}
  body.studio-editorial:not(.theme-dark) .ags-card::before{grid-area:num;counter-increment:agsn;content:counter(agsn,decimal-leading-zero);align-self:center;font:500 11px/1 'Inter',sans-serif;letter-spacing:.06em;color:#B6BECB;font-variant-numeric:tabular-nums}
  body.studio-editorial:not(.theme-dark) .ags-ic{grid-area:ic;align-self:center;width:38px;height:38px;margin:0;border-radius:10px;background:#F4F6FA}
  body.studio-editorial:not(.theme-dark) .ags-ic svg{width:20px;height:20px}
  body.studio-editorial:not(.theme-dark) .ags-name{grid-area:name;margin:0;align-self:end;font-size:15px}
  body.studio-editorial:not(.theme-dark) .ags-desc{grid-area:desc;-webkit-line-clamp:2;font-size:13px;line-height:1.5;align-self:start}
  body.studio-editorial:not(.theme-dark) .ags-foot{grid-area:foot;align-self:center;margin:0;padding:0;border-top:0;gap:18px;flex:0 0 auto}
  body.studio-editorial:not(.theme-dark) .ags-users{white-space:nowrap;flex:0 0 auto}
  body.studio-editorial:not(.theme-dark) .ags-add{opacity:0;transform:translateX(-4px);transition:opacity .16s ease,transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease}
  body.studio-editorial:not(.theme-dark) .ags-card:hover .ags-add,body.studio-editorial:not(.theme-dark) .ags-add:focus-visible{opacity:1;transform:none}

  /* --- 3 · PANEL -----------------------------------------------------------
     Keeps the centred header but gives it something to hold: the figures become
     a real console strip under the search. Cards gain an internal title bar, so
     each one is a filled object rather than text adrift in a rounded rectangle. */
  body.studio-panel:not(.theme-dark) .ags-hero{padding:44px 24px 40px;background:linear-gradient(180deg,#F4F7FD 0%,#F9FBFE 62%,#FCFDFF 100%);border-bottom:1px solid #E8ECF4}
  body.studio-panel:not(.theme-dark) .ags-hero::before{background:none;background-image:radial-gradient(rgba(16,24,40,.055) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(120% 95% at 50% 0%,#000 8%,transparent 68%);mask-image:radial-gradient(120% 95% at 50% 0%,#000 8%,transparent 68%)}
  body.studio-panel:not(.theme-dark) .ags-hero h2{font-size:31px;line-height:1.18}
  body.studio-panel:not(.theme-dark) .ags-hero h2 span{font-size:31px;margin-top:4px;color:#8A94A6}
  body.studio-panel:not(.theme-dark) .ags-hero p{margin-top:16px;font-size:14px}
  body.studio-panel:not(.theme-dark) .ags-search{margin-top:24px;max-width:540px;height:50px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 20px 40px -28px rgba(11,32,84,.45)}
  body.studio-panel:not(.theme-dark) .ags-search input{height:48px}
  body.studio-panel:not(.theme-dark) .ags-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:540px;margin:16px auto 0;background:#fff;border:1px solid #E6EAF2;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
  body.studio-panel:not(.theme-dark) .ags-hero-stats>div{align-items:center;padding:13px 0;border-left:1px solid #EFF2F7}
  body.studio-panel:not(.theme-dark) .ags-hero-stats>div:first-child{border-left:0}
  body.studio-panel:not(.theme-dark) .ags-sec{padding-top:26px}
  body.studio-panel:not(.theme-dark) .ags-grid{gap:18px}
  body.studio-panel:not(.theme-dark) .ags-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic name" "desc desc" "foot foot";padding:0;overflow:hidden;border-color:#E6EAF2;box-shadow:0 1px 2px rgba(16,24,40,.04)}
  body.studio-panel:not(.theme-dark) .ags-card:hover{border-color:#D5DFF1;box-shadow:0 18px 34px -24px rgba(16,24,40,.42);transform:translateY(-2px)}
  body.studio-panel:not(.theme-dark) .ags-ic{grid-area:ic;display:flex;align-items:center;align-self:stretch;width:auto;height:auto;margin:0;padding:0 0 0 16px;border-radius:0;background:#F7F9FD;border-bottom:1px solid #EBEFF6}
  body.studio-panel:not(.theme-dark) .ags-ic svg{width:20px;height:20px}
  body.studio-panel:not(.theme-dark) .ags-card:hover .ags-ic{background:#F2F6FE}
  body.studio-panel:not(.theme-dark) .ags-name{grid-area:name;display:flex;align-items:center;margin:0;padding:14px 16px;font-size:14.5px;background:#F7F9FD;border-bottom:1px solid #EBEFF6}
  body.studio-panel:not(.theme-dark) .ags-card:hover .ags-name{background:#F2F6FE}
  body.studio-panel:not(.theme-dark) .ags-desc{grid-area:desc;padding:16px 18px 2px;-webkit-line-clamp:3}
  body.studio-panel:not(.theme-dark) .ags-foot{grid-area:foot;margin:0;padding:14px 18px 15px;border-top:0}

  /* ============================================================================
     HERO POP (tweak: heroPop) — a light source under the headline instead of a
     flat band. Both variants force the header back to a centred lockup so they
     compose with any studioUI card option. heroPop:off = untouched original.
     ============================================================================ */
  body.hero-pop-glow:not(.theme-dark) .ags-hero-inner,body.hero-pop-spotlight:not(.theme-dark) .ags-hero-inner{display:block;grid-template-areas:none;grid-template-columns:none;max-width:840px;margin:0 auto;padding:0 24px;box-sizing:border-box;text-align:center}
  body.hero-pop-glow:not(.theme-dark) .ags-hero,body.hero-pop-spotlight:not(.theme-dark) .ags-hero{text-align:center}
  body.hero-pop-glow:not(.theme-dark) .ags-hero p br,body.hero-pop-spotlight:not(.theme-dark) .ags-hero p br{display:none}
  body.hero-pop-glow:not(.theme-dark) .ags-hero-kicker,body.hero-pop-spotlight:not(.theme-dark) .ags-hero-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:5px 13px 5px 10px;border-radius:999px;font:600 11px/1 'Inter',sans-serif;letter-spacing:.05em;text-transform:uppercase}
  body.hero-pop-glow:not(.theme-dark) .ags-hero-kicker::before,body.hero-pop-spotlight:not(.theme-dark) .ags-hero-kicker::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
  body.hero-pop-glow:not(.theme-dark) .ags-hero h2 em::after,body.hero-pop-spotlight:not(.theme-dark) .ags-hero h2 em::after{content:none}

  /* --- Glow · light. Same paper, but the headline now sits on a horizon: one
         wide bloom rising from the bottom edge, no hard rule underneath, so the
         cards read as standing in the light rather than in a separate box. --- */
  body.hero-pop-glow:not(.theme-dark) .ags-hero{position:relative;padding:62px 24px 78px;background:linear-gradient(180deg,#EFF4FF 0%,#F4F8FF 34%,#FAFCFF 72%,#fff 100%);border-bottom:0}
  body.hero-pop-glow:not(.theme-dark) .ags-hero::before{background:none;background-image:linear-gradient(rgba(16,24,40,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(16,24,40,.03) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,transparent 62%);mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,transparent 62%)}
  body.hero-pop-glow:not(.theme-dark) .ags-hero::after{top:auto;bottom:-320px;left:50%;transform:translateX(-50%);width:1180px;height:660px;background:radial-gradient(closest-side,rgba(0,76,230,.30),rgba(64,124,255,.14) 46%,transparent 74%);filter:blur(6px);opacity:.85}
  body.hero-pop-glow:not(.theme-dark) .ags-hero-kicker{color:#1B4FE8;background:rgba(255,255,255,.85);border:1px solid #DEE7F8;box-shadow:0 1px 2px rgba(16,24,40,.04)}
  body.hero-pop-glow:not(.theme-dark) .ags-hero-kicker::before{box-shadow:0 0 0 3px rgba(27,79,232,.14)}
  body.hero-pop-glow:not(.theme-dark) .ags-hero h2{display:block;grid-area:auto;max-width:none;font-size:44px;font-weight:500;line-height:1.1;letter-spacing:-.035em;color:#0A1020}
  body.hero-pop-glow:not(.theme-dark) .ags-hero h2 em{color:#0A1020;font-weight:500}
  body.hero-pop-glow:not(.theme-dark) .ags-hero h2 span{display:block;font-size:44px;font-weight:300;line-height:1.1;letter-spacing:-.035em;color:#7C89A0;margin-top:6px}
  body.hero-pop-glow:not(.theme-dark) .ags-hero p{grid-area:auto;margin:20px auto 0;max-width:600px;font-size:14.5px;line-height:1.6;color:#66748C}
  body.hero-pop-glow:not(.theme-dark) .ags-search{grid-area:auto;width:auto;max-width:520px;margin:26px auto 0;height:50px;border-color:#DCE5F6;box-shadow:0 1px 2px rgba(16,24,40,.04),0 24px 48px -28px rgba(11,32,84,.55)}
  body.hero-pop-glow:not(.theme-dark) .ags-search input{height:48px;font-size:14px}
  body.hero-pop-glow:not(.theme-dark) .ags-search button{width:36px;height:36px}
  body.hero-pop-glow:not(.theme-dark) .ags-hero-stats{grid-area:auto;display:flex;justify-content:center;gap:0;margin:30px auto 0;padding:0;max-width:none;background:transparent;border:0;box-shadow:none}
  body.hero-pop-glow:not(.theme-dark) .ags-hero-stats>div{align-items:center;padding:0 28px;border-left:1px solid rgba(16,24,40,.08)}
  body.hero-pop-glow:not(.theme-dark) .ags-hero-stats>div:first-child{border-left:0}
  body.hero-pop-glow:not(.theme-dark) .ags-sec{padding-top:34px}

  /* --- Spotlight · inverted panel. The reference translated to the product: a
         deep surface, one blue light source blooming from below the headline,
         glass search. Cards stay on light paper so the band reads as a header,
         not a theme change. --- */
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero{position:relative;padding:66px 24px 76px;background:radial-gradient(120% 130% at 50% 120%,#1E51C8 0%,#12306F 34%,#0B1A3C 62%,#070E20 100%);border-bottom:0;border-radius:0 0 22px 22px;overflow:hidden}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero::before{background:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:58px 58px;-webkit-mask-image:radial-gradient(130% 110% at 50% 0%,#000 0%,transparent 58%);mask-image:radial-gradient(130% 110% at 50% 0%,#000 0%,transparent 58%)}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero::after{top:auto;bottom:-300px;left:50%;transform:translateX(-50%);width:1240px;height:640px;background:radial-gradient(closest-side,rgba(96,150,255,.75),rgba(45,96,220,.34) 44%,transparent 72%);filter:blur(8px);opacity:1}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero-kicker{color:#DCE7FF;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px)}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero h2{display:block;grid-area:auto;max-width:none;font-size:46px;font-weight:500;line-height:1.08;letter-spacing:-.038em;color:#fff;background:none;-webkit-text-fill-color:initial;text-shadow:0 1px 30px rgba(10,20,50,.35)}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero h2 em{color:#fff;font-weight:500}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero h2 span{display:block;font-size:46px;font-weight:300;line-height:1.08;letter-spacing:-.038em;color:rgba(255,255,255,.52);margin-top:6px}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero p{grid-area:auto;margin:20px auto 0;max-width:600px;font-size:14.5px;line-height:1.62;color:rgba(226,235,255,.66)}
  body.hero-pop-spotlight:not(.theme-dark) .ags-search{grid-area:auto;width:auto;max-width:520px;margin:28px auto 0;height:50px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);box-shadow:0 24px 48px -26px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.10)}
  body.hero-pop-spotlight:not(.theme-dark) .ags-search input{height:48px;font-size:14px;color:#fff}
  body.hero-pop-spotlight:not(.theme-dark) .ags-search input::placeholder{color:rgba(226,235,255,.5)}
  body.hero-pop-spotlight:not(.theme-dark) .ags-search:focus-within{border-color:rgba(160,195,255,.5);box-shadow:0 0 0 4px rgba(96,150,255,.16),0 24px 48px -26px rgba(0,0,0,.7)}
  body.hero-pop-spotlight:not(.theme-dark) .ags-search button{width:36px;height:36px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.12);color:#EAF1FF}
  body.hero-pop-spotlight:not(.theme-dark) .ags-search button:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.2);color:#fff}
  body.hero-pop-spotlight.hero-motion-stroke:not(.theme-dark) .ags-search::before{background:linear-gradient(90deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.16) 30%,rgba(150,190,255,.55) 41%,rgba(214,230,255,.95) 50%,rgba(150,190,255,.55) 59%,rgba(255,255,255,.16) 70%,rgba(255,255,255,.16) 100%);background-size:720px 100%;background-repeat:repeat-x}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero-stats{grid-area:auto;display:flex;justify-content:center;gap:0;margin:32px auto 0;padding:0;max-width:none;background:transparent;border:0;box-shadow:none}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero-stats>div{align-items:center;padding:0 30px;border-left:1px solid rgba(255,255,255,.12)}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero-stats>div:first-child{border-left:0}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero-stats b{color:#fff}
  body.hero-pop-spotlight:not(.theme-dark) .ags-hero-stats span{color:rgba(214,226,250,.55)}
  body.hero-pop-spotlight:not(.theme-dark) .ags-sec{padding-top:34px}

  .ags-hero-badge{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#4F46E5;background:#fff;border:1px solid #E6E8F0;box-shadow:0 1px 2px rgba(16,24,40,.04);padding:5px 11px 5px 9px;border-radius:999px;margin-bottom:16px}
  .ags-hero-badge{display:none}
  .ags-hero h2{font:600 28px/1.25 'Inter',sans-serif;letter-spacing:-.032em;margin:0;padding-bottom:2px;color:#101828}
  .ags-hero h2 span{display:block !important;font-size:inherit !important;line-height:inherit !important;letter-spacing:inherit !important;margin:0 !important;white-space:nowrap}
  .ags-hero h2 em::after{content:none !important}
  .ags-hero p{font:400 14.5px/1.6 'Inter',sans-serif;color:#667085;margin:12px auto 0;max-width:520px;text-wrap:pretty}
  body.theme-dark .ags-hero{background:radial-gradient(120% 120% at 50% -10%,#243056 0%,#1E2540 35%,#1A1D28 65%,rgba(25,26,28,0) 100%)}
  body.theme-dark .ags-hero h2{background:linear-gradient(180deg,#F4F4F5,#C7D0E4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  body.theme-dark .ags-hero-badge{background:rgba(255,255,255,.06);border-color:#353F5C;color:#A5B4FC}
  .ags-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid #F2F4F7}
  .ags-more{display:inline-flex;align-items:center;height:34px;background:none;border:0;padding:0;font:600 13px/1 'Inter',sans-serif;color:var(--brand-blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .15s ease}
  .ags-more:hover{color:var(--brand-blue-strong)}
  .ags-add{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#fff;color:#475467;border:1px solid #E1E6EE;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .12s ease}
  .ags-add svg{width:16px;height:16px}
  .ags-add:hover{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
  .ags-add:active{transform:scale(.94)}
  body.theme-dark .ags-more{color:#9CA3AF}
  body.theme-dark .ags-card{background:#23262C;border-color:#2F333A}
  body.theme-dark .ags-ic{color:#C8D0DC;background:#2C3037}
  body.theme-dark .ags-card:hover .ags-ic{color:#8AB4FF;background:#2E3746}
  body.theme-dark .ags-add{background:#2A2D33;border-color:#3A3F47;color:#C4CBD8}
  body.theme-dark .ags-card:hover{border-color:#3C424C}
  body.theme-dark .ags-name{color:#F4F4F5}
  body.theme-dark .ags-foot{border-color:#2F333A}
  body.theme-dark .ags-go{background:#2A2D33;color:#C4CBD8}

  /* ===== Capability card styling ===== */

  /* --- Accent: one blue edge that wipes in on hover, plus a tinted tile. The
         card stays flat; the accent is the only added element. --- */
  body.cards-accent .ags-card{position:relative;overflow:hidden}
  body.cards-accent .ags-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:#7BA4FF;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
  body.cards-accent .ags-card:hover::before{transform:scaleX(1)}
  body.cards-accent .ags-ic{background:#F4F7FD;border:1px solid #E5EBF5;box-shadow:none;color:var(--brand-blue)}
  body.cards-accent .ags-card:hover .ags-ic{background:#EAF1FE;border-color:#D3E0F8}
  /* Neutral, not blue: an outlined ink button reads as an action, and no longer
     mirrors the tinted glyph tile diagonally across the card. */
  body.cards-accent .ags-add{background:#fff;border-color:#DFE3EA;color:#344054}
  body.cards-accent .ags-add:hover{background:#101828;border-color:#101828;color:#fff}
  body.theme-dark.cards-accent .ags-ic{background:#272C34;border-color:#39414E;color:#8AB4FF}
  body.theme-dark.cards-accent .ags-card:hover .ags-ic{background:#2C333D;border-color:#445063}
  body.theme-dark.cards-accent .ags-add{background:#2A2D33;border-color:#3A3F47;color:#D5DAE2}
  body.theme-dark.cards-accent .ags-add:hover{background:#F4F4F5;border-color:#F4F4F5;color:#101828}