Link and copy tweaks

Author: simonkurtz-MSFT

assets/APIM-Samples-Slide-Deck.html

@@ -1118,7 +1118,7 @@ <h4>Azure Maps</h4>
       </div>
       <div class="arch-card">
         <h4>Costing</h4>
-        <p>Track API costs per business unit via subscriptions, Entra ID apps, and AI Gateway tokens, including streaming token usage (not simple to capture correctly in APIM).</p>
+        <p>Track API costs per business unit via subscriptions, Entra ID apps, and AI Gateway tokens, <em>including streaming (SSE) token usage</em> (not simple to capture correctly in APIM).</p>
       </div>
       <div class="arch-card">
         <h4>Dynamic CORS</h4>

docs/index.html

@@ -233,7 +233,7 @@ <h1>Azure API Management <span class="accent">Samples</span></h1>
       <div class="container">
         <h2 id="value-heading" class="visually-hidden">Why APIM Samples</h2>
         <div class="value-grid">
-          <article class="value-card">
+          <a class="value-card value-card-link" href="#infrastructures">
             <!-- Inline SVG, not emoji: the building-construction and
                  fork-and-plate emoji default to monochrome text
                  presentation on most platforms, and this repo forbids
@@ -252,8 +252,8 @@ <h3>Infrastructures</h3>
               Five pre-built Azure architectures, from a simple public APIM instance through to Front Door,
               Application Gateway, Private Link, and VNet-injected designs.
             </p>
-          </article>
-          <article class="value-card">
+          </a>
+          <a class="value-card value-card-link" href="#samples">
             <div class="icon" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M10 3v6L4 20h16L14 9V3"/>
@@ -266,7 +266,7 @@ <h3>Samples</h3>
               Real-world policy examples covering authentication, load balancing, cost allocation, OAuth
               credential management, and more.
             </p>
-          </article>
+          </a>
           <article class="value-card">
             <div class="icon" aria-hidden="true">
               <svg viewBox="0 0 24 24">
@@ -447,7 +447,7 @@ <h3>Azure Maps</h3>
 
           <a class="sample-card" href="https://github.com/Azure-Samples/Apim-Samples/tree/main/samples/costing" target="_blank" rel="noopener">
             <h3>Costing</h3>
-            <p>Track and allocate API costs per business unit using subscriptions, Entra ID application tracking, and AI Gateway token/PTU tracking including streaming (SSE) token usage, which is not simple to capture correctly in APIM.</p>
+            <p>Track and allocate API costs per business unit using subscriptions, Entra ID application tracking, and AI Gateway token/PTU tracking <em>including streaming (SSE) token usage</em>, which is not simple to capture correctly in APIM.</p>
             <span class="infra-tag">All infrastructures</span>
           </a>
 

docs/styles.css

@@ -439,6 +439,25 @@ img { max-width: 100%; height: auto; }
   box-shadow: var(--shadow-card);
 }
 
+/* Anchor variant: the Infrastructures and Samples value cards link to their
+   respective in-page sections. Strip default link styling and mirror the
+   subtle lift used by .infra-card / .sample-card so the affordance is
+   consistent across the page. */
+a.value-card-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  transition: transform var(--transition-card), box-shadow var(--transition-card), border-color var(--transition-card);
+}
+
+a.value-card-link:hover,
+a.value-card-link:focus-visible {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-card-hover);
+  border-color: var(--brand-blue);
+  color: inherit;
+}
+
 /* Icon is a gradient circle echoing the .step::before counter badge
    further down the page, so the two sections share visual DNA.
    The SVG child uses currentColor for fill/stroke; setting color