diff --git a/packages/shared/src/components/InteractionCounter.tsx b/packages/shared/src/components/InteractionCounter.tsx
index 84831e54f02..ed0c3e3e1e7 100644
--- a/packages/shared/src/components/InteractionCounter.tsx
+++ b/packages/shared/src/components/InteractionCounter.tsx
@@ -7,20 +7,23 @@ import { largeNumberFormat } from '../lib';
 export type InteractionCounterProps = {
   className?: string;
   value: number | null;
+  /** Override the number formatter (defaults to `largeNumberFormat`). */
+  format?: (value: number | null) => string | null;
 };
 
 export default function InteractionCounter({
   className,
   value,
+  format = largeNumberFormat,
   ...props
 }: InteractionCounterProps): ReactElement {
   const [shownValue, setShownValue] = useState(value);
   const [animate, setAnimate] = useState(false);
   useEffect(() => {
-    const formattedValue = largeNumberFormat(value);
-    const formattedShownValue = largeNumberFormat(shownValue);
+    const formattedValue = format(value);
+    const formattedShownValue = format(shownValue);
     if (formattedValue !== formattedShownValue) {
-      if (value < shownValue) {
+      if ((value ?? 0) < (shownValue ?? 0)) {
         setShownValue(value);
       } else {
         setAnimate(false);
@@ -37,9 +40,15 @@ export default function InteractionCounter({
   );
 
   if (shownValue === value) {
+    // Center the number within the fixed-height (h-5) box. Without this the text
+    // is top-aligned, so smaller type (e.g. typo-caption1 on mobile/tablet, whose
+    // 1rem line-height is shorter than h-5) sits visibly higher than the icon.
     return (
-      <span className={elementClassName} {...props}>
-        {largeNumberFormat(shownValue)}
+      <span
+        className={classNames(elementClassName, 'justify-center')}
+        {...props}
+      >
+        {format(shownValue)}
       </span>
     );
   }
@@ -49,8 +58,10 @@ export default function InteractionCounter({
     setShownValue(value);
   };
 
+  // leading-5 makes each rolling slice's line box fill its h-5 height so the
+  // digits stay centered during the roll (matches the resting state above).
   const childClassName =
-    'h-5 inline-block transition-[opacity,transform] ease-in-out duration-300 will-change-[opacity,transform]';
+    'h-5 leading-5 inline-block transition-[opacity,transform] ease-in-out duration-300 will-change-[opacity,transform]';
 
   return (
     <span className={elementClassName} {...props}>
@@ -60,7 +71,7 @@ export default function InteractionCounter({
           animate ? '-translate-y-full opacity-0' : 'translate-y-0 opacity-100',
         )}
       >
-        {largeNumberFormat(shownValue)}
+        {format(shownValue)}
       </span>
       <span
         className={classNames(
@@ -69,7 +80,7 @@ export default function InteractionCounter({
         )}
         onTransitionEnd={updateShownValue}
       >
-        {largeNumberFormat(value)}
+        {format(value)}
       </span>
     </span>
   );
diff --git a/packages/shared/src/components/buttons/CardAction.tsx b/packages/shared/src/components/buttons/CardAction.tsx
index f5e64df8b7d..a3e97475eb7 100644
--- a/packages/shared/src/components/buttons/CardAction.tsx
+++ b/packages/shared/src/components/buttons/CardAction.tsx
@@ -46,6 +46,8 @@ type CardActionBaseProps = CardActionPassthroughProps & {
   iconPressed?: IconElement;
   label: string;
   count?: number | null;
+  /** Override the counter formatter (defaults to `largeNumberFormat`). */
+  countFormat?: (value: number | null) => string | null;
   color?: ColorName;
   pressed?: boolean;
   loading?: boolean;
@@ -64,6 +66,7 @@ function CardActionComponent(
     iconPressed,
     label,
     count,
+    countFormat,
     color,
     pressed,
     loading,
@@ -121,7 +124,9 @@ function CardActionComponent(
           {showLabel && (
             <span className="card-action-label truncate">{label}</span>
           )}
-          {showCount && <InteractionCounter value={count ?? 0} />}
+          {showCount && (
+            <InteractionCounter value={count ?? 0} format={countFormat} />
+          )}
         </span>
       )}
     </ButtonV2>
diff --git a/packages/shared/src/components/buttons/QuaternaryButton.tsx b/packages/shared/src/components/buttons/QuaternaryButton.tsx
index 84aa5c2c179..32a846d19ff 100644
--- a/packages/shared/src/components/buttons/QuaternaryButton.tsx
+++ b/packages/shared/src/components/buttons/QuaternaryButton.tsx
@@ -80,7 +80,9 @@ function QuaternaryButtonComponent<TagName extends AllowedTags>(
           htmlFor={id}
           {...labelProps}
           className={classNames(
-            'flex cursor-pointer items-center pl-1 font-bold typo-callout',
+            // Medium weight to match the button typography guideline (the
+            // Button base and CardAction both use font-medium).
+            'flex cursor-pointer items-center pl-1 font-medium typo-callout',
             { readOnly: props.disabled },
             labelClassName,
           )}
diff --git a/packages/shared/src/components/cards/article/ArticleFeaturedWideGridCard.tsx b/packages/shared/src/components/cards/article/ArticleFeaturedWideGridCard.tsx
index 8c9b93c65b1..74a10ce9d5e 100644
--- a/packages/shared/src/components/cards/article/ArticleFeaturedWideGridCard.tsx
+++ b/packages/shared/src/components/cards/article/ArticleFeaturedWideGridCard.tsx
@@ -25,6 +25,7 @@ import { FeedCardGlassActions } from '../common/FeedCardGlassActions';
 import { FeedbackGrid } from './feedback/FeedbackGrid';
 import { ClickbaitShield } from '../common/ClickbaitShield';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
+import { useFitFontSize } from '../../../hooks/useFitFontSize';
 import { useFeedCardGlassActions } from '../../../hooks/useFeedCardGlassActions';
 import { usePostImage } from '../../../hooks/post/usePostImage';
 import { useCardCover } from '../../../hooks/feed/useCardCover';
@@ -51,6 +52,12 @@ const IMAGE_COL_SPAN: Record<FeaturedWideColSpan, string> = {
   4: 'col-span-3',
 };
 
+// The hero title shrinks (title1 → title3) to stay within three lines so the
+// summary below always has room, rather than spilling onto a fourth line and
+// pushing the TLDR off the card.
+const HERO_TITLE_SIZE_CLASSES = ['typo-title1', 'typo-title2', 'typo-title3'];
+const HERO_TITLE_MAX_LINES = 3;
+
 const HighlightChip = ({
   significance,
   className,
@@ -148,6 +155,15 @@ export const ArticleFeaturedWideGridCard = forwardRef(
     const { pinnedAt } = post;
     const { showFeedback } = usePostFeedback({ post });
     const { title } = useSmartTitle(post);
+    const {
+      ref: titleRef,
+      sizeClass: titleSizeClass,
+      isClamped: titleClamped,
+    } = useFitFontSize<HTMLHeadingElement>({
+      text: title,
+      sizeClasses: HERO_TITLE_SIZE_CLASSES,
+      maxLines: HERO_TITLE_MAX_LINES,
+    });
     const isVideoType = isVideoPost(post);
     const image = usePostImage(post);
     const { overlay } = useCardCover({ post, onShare });
@@ -276,9 +292,11 @@ export const ArticleFeaturedWideGridCard = forwardRef(
                     showFeedback={false}
                   />
                   <h3
+                    ref={titleRef}
                     className={classNames(
-                      'mt-2 break-words font-bold text-text-primary typo-title1',
-                      useGlass ? 'line-clamp-3' : 'line-clamp-4',
+                      'mt-2 break-words font-bold text-text-primary',
+                      titleSizeClass,
+                      titleClamped && 'line-clamp-3',
                     )}
                   >
                     {title}
diff --git a/packages/shared/src/components/cards/common/ActionButtons.tsx b/packages/shared/src/components/cards/common/ActionButtons.tsx
index 83e2a65b5b2..b3db5c93866 100644
--- a/packages/shared/src/components/cards/common/ActionButtons.tsx
+++ b/packages/shared/src/components/cards/common/ActionButtons.tsx
@@ -5,12 +5,13 @@ import type { Post } from '../../../graphql/posts';
 import InteractionCounter from '../../InteractionCounter';
 import { QuaternaryButton } from '../../buttons/QuaternaryButton';
 import {
+  AnalyticsIcon,
   DiscussIcon as CommentIcon,
   LinkIcon,
   DownvoteIcon,
 } from '../../icons';
 import { ButtonColor, ButtonSize, ButtonVariant } from '../../buttons/Button';
-import { useFeedPreviewMode } from '../../../hooks';
+import { useFeedPreviewMode, useViewSize, ViewSize } from '../../../hooks';
 import { UpvoteButtonIcon } from './UpvoteButtonIcon';
 import { BookmarkButton } from '../../buttons';
 import { IconSize } from '../../Icon';
@@ -21,6 +22,9 @@ import { PostTagsPanel } from '../../post/block/PostTagsPanel';
 import { LinkWithTooltip } from '../../tooltips/LinkWithTooltip';
 import { useCardActions } from '../../../hooks/cards/useCardActions';
 import { useBrandSponsorship } from '../../../hooks/useBrandSponsorship';
+import { usePostImpressionsModal } from '../../../hooks/post/usePostImpressionsModal';
+import { usePostImpressions } from '../../../hooks/post/usePostImpressions';
+import { formatImpressions } from '../../../lib/impressions';
 import { useEngagementBarV2 } from '../../../hooks/useEngagementBarV2';
 import ActionButtonsV2 from './ActionButtons.v2';
 
@@ -78,6 +82,14 @@ const ActionButtonsV1 = ({
 }: ActionButtonsProps): ReactElement | null => {
   const config = variantConfig[variant];
   const isFeedPreview = useFeedPreviewMode();
+  const isLaptop = useViewSize(ViewSize.Laptop);
+  const { buttonSize, iconSize } = config;
+  // On mobile/tablet keep full-size icons but shrink the count so the icon
+  // reads as the primary affordance and the number as a subtle stat.
+  const counterClassName = classNames(
+    'tabular-nums',
+    isLaptop ? variant === 'grid' && 'typo-footnote' : 'typo-caption1',
+  );
   const { getUpvoteAnimation } = useBrandSponsorship();
 
   const {
@@ -114,6 +126,13 @@ const ActionButtonsV1 = ({
     };
   }, [getUpvoteAnimation, post.tags]);
 
+  const onImpressionsClick = usePostImpressionsModal(post);
+  const {
+    enabled: impressionsEnabled,
+    showImpressions,
+    impressions,
+  } = usePostImpressions(post);
+
   if (isFeedPreview) {
     return null;
   }
@@ -135,13 +154,16 @@ const ActionButtonsV1 = ({
         href={post.commentsPermalink}
         pressed={post.commented}
         variant={ButtonVariant.Tertiary}
-        size={config.buttonSize}
-        icon={<CommentIcon secondary={post.commented} size={config.iconSize} />}
+        size={buttonSize}
+        icon={<CommentIcon secondary={post.commented} size={iconSize} />}
         onClick={() => onCommentClick?.(post)}
       >
         {commentCount > 0 && (
           <InteractionCounter
-            className={classNames('tabular-nums', !commentCount && 'invisible')}
+            className={classNames(
+              counterClassName,
+              !commentCount && 'invisible',
+            )}
             value={commentCount}
           />
         )}
@@ -152,16 +174,16 @@ const ActionButtonsV1 = ({
       <QuaternaryButton
         labelClassName="!pl-[1px]"
         id={`post-${post.id}-comment-btn`}
-        icon={<CommentIcon secondary={post.commented} size={config.iconSize} />}
+        icon={<CommentIcon secondary={post.commented} size={iconSize} />}
         pressed={post.commented}
         onClick={() => onCommentClick?.(post)}
-        size={config.buttonSize}
+        size={buttonSize}
         className="btn-tertiary-blueCheese"
       >
         {commentCount > 0 && (
           <InteractionCounter
             className={classNames(
-              'tabular-nums !typo-footnote',
+              counterClassName,
               !commentCount && 'invisible',
             )}
             value={commentCount}
@@ -192,26 +214,24 @@ const ActionButtonsV1 = ({
             pressed={isUpvoteActive}
             onClick={onToggleUpvote}
             variant={ButtonVariant.Tertiary}
-            size={config.buttonSize}
+            size={buttonSize}
             icon={
               <UpvoteButtonIcon
                 secondary={isUpvoteActive}
-                size={config.iconSize}
+                size={iconSize}
                 brandAnimation={brandAnimation}
               />
             }
           >
             {upvoteCount > 0 && (
               <InteractionCounter
-                className={classNames(
-                  'tabular-nums',
-                  variant === 'grid' && 'typo-footnote',
-                )}
+                className={counterClassName}
                 value={upvoteCount}
               />
             )}
           </QuaternaryButton>
         </Tooltip>
+        {commentButton}
         {showDownvoteAction && (
           <Tooltip
             content={isDownvoteActive ? 'Remove downvote' : 'Downvote'}
@@ -222,21 +242,20 @@ const ActionButtonsV1 = ({
               id={`post-${post.id}-downvote-btn`}
               color={ButtonColor.Ketchup}
               icon={
-                <DownvoteIcon
-                  secondary={isDownvoteActive}
-                  size={config.iconSize}
-                />
+                <DownvoteIcon secondary={isDownvoteActive} size={iconSize} />
               }
               pressed={isDownvoteActive}
               onClick={onToggleDownvote}
               variant={ButtonVariant.Tertiary}
-              size={config.buttonSize}
+              size={buttonSize}
             />
           </Tooltip>
         )}
-        {commentButton}
-        {showAwardAction && (
-          <PostAwardAction post={post} iconSize={config.iconSize} />
+        {/* When impressions are enabled, drop awards below laptop to make room
+            for the extra action; with the flag off, awards stay on every
+            viewport (unchanged from control). */}
+        {showAwardAction && (!impressionsEnabled || isLaptop) && (
+          <PostAwardAction post={post} iconSize={iconSize} />
         )}
         <BookmarkButton
           tooltipSide={variant === 'grid' ? 'bottom' : undefined}
@@ -244,7 +263,7 @@ const ActionButtonsV1 = ({
           buttonProps={{
             id: `post-${post.id}-bookmark-btn`,
             onClick: onToggleBookmark,
-            size: config.buttonSize,
+            size: buttonSize,
             className: classNames(
               'btn-tertiary-bun',
               variant === 'list' && 'pointer-events-auto',
@@ -253,7 +272,7 @@ const ActionButtonsV1 = ({
               variant: ButtonVariant.Tertiary,
             }),
           }}
-          iconSize={config.iconSize}
+          iconSize={iconSize}
         />
         <Tooltip
           content="Copy link"
@@ -261,14 +280,40 @@ const ActionButtonsV1 = ({
         >
           <QuaternaryButton
             id="copy-post-btn"
-            size={config.buttonSize}
-            icon={<LinkIcon size={config.iconSize} />}
+            size={buttonSize}
+            icon={<LinkIcon size={iconSize} />}
             onClick={onCopyLink}
             variant={ButtonVariant.Tertiary}
             color={ButtonColor.Cabbage}
             className={variant === 'list' ? 'pointer-events-auto' : undefined}
           />
         </Tooltip>
+        {showImpressions && (
+          <Tooltip
+            content="Impressions"
+            side={variant === 'grid' ? 'bottom' : undefined}
+          >
+            <QuaternaryButton
+              labelClassName={variant === 'grid' ? '!pl-[1px]' : '!pl-0'}
+              id={`post-${post.id}-impressions-btn`}
+              size={buttonSize}
+              icon={<AnalyticsIcon size={iconSize} />}
+              onClick={onImpressionsClick}
+              variant={ButtonVariant.Tertiary}
+              color={ButtonColor.Cheese}
+              className={classNames(
+                'btn-tertiary-cheese',
+                variant === 'list' && 'pointer-events-auto',
+              )}
+            >
+              <InteractionCounter
+                className={counterClassName}
+                value={impressions}
+                format={formatImpressions}
+              />
+            </QuaternaryButton>
+          </Tooltip>
+        )}
       </div>
     </div>
   );
diff --git a/packages/shared/src/components/cards/common/ActionButtons.v2.tsx b/packages/shared/src/components/cards/common/ActionButtons.v2.tsx
index 9c5063f5fa2..3bc933fe3ad 100644
--- a/packages/shared/src/components/cards/common/ActionButtons.v2.tsx
+++ b/packages/shared/src/components/cards/common/ActionButtons.v2.tsx
@@ -5,12 +5,13 @@ import type { Post } from '../../../graphql/posts';
 import { CardAction } from '../../buttons/CardAction';
 import { CardActionBar } from '../../buttons/CardActionBar';
 import {
+  AnalyticsIcon,
   DiscussIcon as CommentIcon,
   LinkIcon,
   DownvoteIcon,
 } from '../../icons';
 import { ButtonColor } from '../../buttons/ButtonV2';
-import { useFeedPreviewMode } from '../../../hooks';
+import { useFeedPreviewMode, useViewSize, ViewSize } from '../../../hooks';
 import { UpvoteButtonIcon } from './UpvoteButtonIcon';
 import { BookmarkButton } from '../../buttons/BookmarkButton.v2';
 import { Tooltip } from '../../tooltip/Tooltip';
@@ -20,6 +21,9 @@ import { PostTagsPanel } from '../../post/block/PostTagsPanel';
 import { LinkWithTooltip } from '../../tooltips/LinkWithTooltip';
 import { useCardActions } from '../../../hooks/cards/useCardActions';
 import { useBrandSponsorship } from '../../../hooks/useBrandSponsorship';
+import { usePostImpressionsModal } from '../../../hooks/post/usePostImpressionsModal';
+import { usePostImpressions } from '../../../hooks/post/usePostImpressions';
+import { formatImpressions } from '../../../lib/impressions';
 
 export type ActionButtonsVariant = 'grid' | 'list' | 'signal';
 
@@ -70,6 +74,9 @@ const ActionButtons = ({
 }: ActionButtonsProps): ReactElement | null => {
   const config = variantConfig[variant];
   const isFeedPreview = useFeedPreviewMode();
+  // When impressions are enabled, awards are hidden below laptop (tablet +
+  // mobile) to make room for the extra action.
+  const isLaptop = useViewSize(ViewSize.Laptop);
   const { getUpvoteAnimation } = useBrandSponsorship();
 
   const {
@@ -105,6 +112,13 @@ const ActionButtons = ({
     };
   }, [getUpvoteAnimation, post.tags]);
 
+  const onImpressionsClick = usePostImpressionsModal(post);
+  const {
+    enabled: impressionsEnabled,
+    showImpressions,
+    impressions,
+  } = usePostImpressions(post);
+
   if (isFeedPreview) {
     return null;
   }
@@ -175,6 +189,7 @@ const ActionButtons = ({
             buttonClassName="pointer-events-auto"
           />
         </Tooltip>
+        {commentButton}
         {showDownvoteAction && (
           <Tooltip
             content={isDownvoteActive ? 'Remove downvote' : 'Downvote'}
@@ -193,8 +208,7 @@ const ActionButtons = ({
             />
           </Tooltip>
         )}
-        {commentButton}
-        {showAwardAction && (
+        {showAwardAction && (!impressionsEnabled || isLaptop) && (
           <PostAwardAction post={post} density={FEED_CARD_DENSITY} />
         )}
         <BookmarkButton
@@ -223,6 +237,26 @@ const ActionButtons = ({
             )}
           />
         </Tooltip>
+        {showImpressions && (
+          <Tooltip
+            content="Impressions"
+            side={variant === 'grid' ? 'bottom' : undefined}
+          >
+            <CardAction
+              id={`post-${post.id}-impressions-btn`}
+              density={FEED_CARD_DENSITY}
+              icon={<AnalyticsIcon />}
+              label="Impressions"
+              count={impressions}
+              countFormat={formatImpressions}
+              onClick={onImpressionsClick}
+              color={ButtonColor.Cheese}
+              buttonClassName={classNames(
+                variant === 'list' && 'pointer-events-auto',
+              )}
+            />
+          </Tooltip>
+        )}
       </CardActionBar>
     </div>
   );
diff --git a/packages/shared/src/components/cards/common/FeedCardGlassActions.tsx b/packages/shared/src/components/cards/common/FeedCardGlassActions.tsx
index fc1510c4d09..f2565e822fd 100644
--- a/packages/shared/src/components/cards/common/FeedCardGlassActions.tsx
+++ b/packages/shared/src/components/cards/common/FeedCardGlassActions.tsx
@@ -7,6 +7,7 @@ import InteractionCounter from '../../InteractionCounter';
 import { QuaternaryButton } from '../../buttons/QuaternaryButton';
 import { BookmarkButton } from '../../buttons/BookmarkButton';
 import {
+  AnalyticsIcon,
   DiscussIcon as CommentIcon,
   DownvoteIcon,
   LinkIcon,
@@ -16,6 +17,9 @@ import { IconSize } from '../../Icon';
 import { Tooltip } from '../../tooltip/Tooltip';
 import { useFeedPreviewMode } from '../../../hooks/useFeedPreviewMode';
 import { useCardActions } from '../../../hooks/cards/useCardActions';
+import { usePostImpressionsModal } from '../../../hooks/post/usePostImpressionsModal';
+import { usePostImpressions } from '../../../hooks/post/usePostImpressions';
+import { formatImpressions } from '../../../lib/impressions';
 
 // Full-bleed cover: drop side padding/bottom margin and round only the bottom
 // corners so the image meets the card edges. Height/crop are untouched.
@@ -32,10 +36,14 @@ const outerClasses = 'pointer-events-none absolute inset-x-2 bottom-2 z-1';
 // actions evenly across the pill: the icons keep equal gaps and a long counter
 // (e.g. 900 upvotes / 900 comments) just grows its own button instead of
 // clipping or shoving a neighbour off its mark.
-// `px-1` matches the 4px the h-10 pill leaves above/below its h-8 buttons, so
-// the padding is equal on all four sides.
+// The pill stays h-10 (its original height) so it reads as a comfortable bar,
+// while the buttons themselves are the smaller XSmall size.
+// Asymmetric `pl-1 pr-2.5`: the left edge holds the upvote icon while the right
+// edge holds the impressions number — a number reads tighter against the edge
+// than an icon, so it needs more padding to look optically balanced (per
+// jakub.kr "details that make interfaces feel better").
 const pillClasses = classNames(
-  'pointer-events-auto flex h-10 w-full items-center justify-between gap-1 overflow-hidden px-1',
+  'pointer-events-auto flex h-10 w-full items-center justify-between overflow-hidden pl-1 pr-2.5',
   'rounded-12 border border-border-subtlest-tertiary',
   'text-text-primary backdrop-blur-xl backdrop-saturate-150',
   '[&_.btn-quaternary]:[--button-default-color:var(--theme-text-primary)]',
@@ -49,9 +57,10 @@ const pillClasses = classNames(
 const glassBackground =
   'linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), var(--theme-blur-blur-bg)';
 
-// Keep the counter compact: monospaced digits so it never jitters, and the
-// `pr-1` breathing room mirrors the standard grid action bar.
-const countLabelClasses = '!pl-0.5 pr-1';
+// Keep the counter compact: monospaced digits so it never jitters, and a hair
+// of padding on each side so six actions (incl. impressions) still fit a narrow
+// card without the trailing icon clipping.
+const countLabelClasses = '!pl-0.5 pr-0.5';
 const countClasses = 'tabular-nums typo-footnote';
 
 // Dark glow behind the pill so it stays readable over busy cover images. Fixed
@@ -86,6 +95,8 @@ export function FeedCardGlassActions({
     onBookmarkClick,
     onCopyLinkClick,
   });
+  const onImpressionsClick = usePostImpressionsModal(post);
+  const { showImpressions, impressions } = usePostImpressions(post);
 
   if (isFeedPreview) {
     return null;
@@ -117,11 +128,11 @@ export function FeedCardGlassActions({
               pressed={isUpvoteActive}
               onClick={onToggleUpvote}
               variant={ButtonVariant.Tertiary}
-              size={ButtonSize.Small}
+              size={ButtonSize.XSmall}
               icon={
                 <UpvoteButtonIcon
                   secondary={isUpvoteActive}
-                  size={IconSize.XSmall}
+                  size={IconSize.Size16}
                 />
               }
             >
@@ -140,12 +151,12 @@ export function FeedCardGlassActions({
               icon={
                 <CommentIcon
                   secondary={post.commented}
-                  size={IconSize.XSmall}
+                  size={IconSize.Size16}
                 />
               }
               pressed={post.commented}
               onClick={() => onCommentClick?.(post)}
-              size={ButtonSize.Small}
+              size={ButtonSize.XSmall}
               className="btn-tertiary-blueCheese pointer-events-auto"
             >
               {commentCount > 0 && (
@@ -168,13 +179,13 @@ export function FeedCardGlassActions({
                 icon={
                   <DownvoteIcon
                     secondary={isDownvoteActive}
-                    size={IconSize.XSmall}
+                    size={IconSize.Size16}
                   />
                 }
                 pressed={isDownvoteActive}
                 onClick={onToggleDownvote}
                 variant={ButtonVariant.Tertiary}
-                size={ButtonSize.Small}
+                size={ButtonSize.XSmall}
               />
             </Tooltip>
           )}
@@ -184,22 +195,42 @@ export function FeedCardGlassActions({
             buttonProps={{
               id: `post-${post.id}-bookmark-btn`,
               onClick: onToggleBookmark,
-              size: ButtonSize.Small,
+              size: ButtonSize.XSmall,
               className: 'btn-tertiary-bun pointer-events-auto',
             }}
-            iconSize={IconSize.XSmall}
+            iconSize={IconSize.Size16}
           />
           <Tooltip content="Copy link" side="bottom">
             <QuaternaryButton
               id="copy-post-btn"
-              size={ButtonSize.Small}
-              icon={<LinkIcon size={IconSize.XSmall} />}
+              size={ButtonSize.XSmall}
+              icon={<LinkIcon size={IconSize.Size16} />}
               onClick={onCopyLink}
               variant={ButtonVariant.Tertiary}
               color={ButtonColor.Cabbage}
               className="pointer-events-auto"
             />
           </Tooltip>
+          {showImpressions && (
+            <Tooltip content="Impressions" side="bottom">
+              <QuaternaryButton
+                labelClassName={countLabelClasses}
+                id={`post-${post.id}-impressions-btn`}
+                icon={<AnalyticsIcon size={IconSize.Size16} />}
+                size={ButtonSize.XSmall}
+                variant={ButtonVariant.Tertiary}
+                color={ButtonColor.Cheese}
+                onClick={onImpressionsClick}
+                className="btn-tertiary-cheese pointer-events-auto"
+              >
+                <InteractionCounter
+                  className={countClasses}
+                  value={impressions}
+                  format={formatImpressions}
+                />
+              </QuaternaryButton>
+            </Tooltip>
+          )}
         </div>
       </div>
     </>
diff --git a/packages/shared/src/components/modals/common.tsx b/packages/shared/src/components/modals/common.tsx
index 199f5dfcce1..2934626328c 100644
--- a/packages/shared/src/components/modals/common.tsx
+++ b/packages/shared/src/components/modals/common.tsx
@@ -512,6 +512,13 @@ const ReaderPreviewLazyModal = dynamic(
     ),
 );
 
+const PostImpressionsModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "postImpressionsModal" */ './post/PostImpressionsModal'
+    ),
+);
+
 export const modals = {
   [LazyModal.SquadMember]: SquadMemberModal,
   [LazyModal.UpvotedPopup]: UpvotedPopupModal,
@@ -595,6 +602,7 @@ export const modals = {
   [LazyModal.ReaderInstallPrompt]: ReaderInstallPromptModal,
   [LazyModal.ReaderExtensionInstall]: ReaderExtensionInstallModal,
   [LazyModal.ReaderPreview]: ReaderPreviewLazyModal,
+  [LazyModal.PostImpressions]: PostImpressionsModal,
 };
 
 type GetComponentProps<T> = T extends
diff --git a/packages/shared/src/components/modals/common/types.ts b/packages/shared/src/components/modals/common/types.ts
index dfda6a0d09c..f28b066f111 100644
--- a/packages/shared/src/components/modals/common/types.ts
+++ b/packages/shared/src/components/modals/common/types.ts
@@ -107,6 +107,7 @@ export enum LazyModal {
   ReaderInstallPrompt = 'readerInstallPrompt',
   ReaderExtensionInstall = 'readerExtensionInstall',
   ReaderPreview = 'readerPreview',
+  PostImpressions = 'postImpressions',
 }
 
 export type ModalTabItem = {
diff --git a/packages/shared/src/components/modals/post/PostImpressionsModal.tsx b/packages/shared/src/components/modals/post/PostImpressionsModal.tsx
new file mode 100644
index 00000000000..2233fbc9f4e
--- /dev/null
+++ b/packages/shared/src/components/modals/post/PostImpressionsModal.tsx
@@ -0,0 +1,69 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { Modal } from '../common/Modal';
+import type { LazyModalCommonProps } from '../common/Modal';
+import { ModalClose } from '../common/ModalClose';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+  TypographyColor,
+} from '../../typography/Typography';
+import { AnalyticsIcon } from '../../icons';
+import { IconSize } from '../../Icon';
+import { docs } from '../../../lib/constants';
+import { anchorDefaultRel } from '../../../lib/strings';
+
+/**
+ * X/Twitter-style "Views" explainer shown to non-authors when they tap the
+ * impressions stat — daily.dev's own modal styling, X-like messaging.
+ */
+function PostImpressionsModal(props: LazyModalCommonProps): ReactElement {
+  const { onRequestClose } = props;
+
+  return (
+    <Modal
+      kind={Modal.Kind.FlexibleCenter}
+      size={Modal.Size.Small}
+      isDrawerOnMobile
+      {...props}
+    >
+      <ModalClose top="2" right="2" onClick={onRequestClose} />
+      <Modal.Body className="flex flex-col items-center gap-2 text-center">
+        <div className="mb-2 flex size-12 items-center justify-center rounded-full bg-surface-float text-text-primary">
+          <AnalyticsIcon size={IconSize.Large} />
+        </div>
+        <Typography tag={TypographyTag.H2} type={TypographyType.Title2} bold>
+          Impressions
+        </Typography>
+        <Typography
+          type={TypographyType.Callout}
+          color={TypographyColor.Secondary}
+        >
+          The number of times this post was seen across daily.dev. To learn
+          more, visit our{' '}
+          <a
+            className="font-bold text-text-link underline"
+            href={docs}
+            target="_blank"
+            rel={anchorDefaultRel}
+          >
+            docs
+          </a>
+          .
+        </Typography>
+        <Button
+          className="mt-4 w-full"
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Large}
+          onClick={onRequestClose}
+        >
+          Got it
+        </Button>
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+export default PostImpressionsModal;
diff --git a/packages/shared/src/components/post/PostUpvotesCommentsCount.tsx b/packages/shared/src/components/post/PostUpvotesCommentsCount.tsx
index 7e0ca893eb6..c7f63c105c7 100644
--- a/packages/shared/src/components/post/PostUpvotesCommentsCount.tsx
+++ b/packages/shared/src/components/post/PostUpvotesCommentsCount.tsx
@@ -14,12 +14,21 @@ import Link from '../utilities/Link';
 import { Button, ButtonSize } from '../buttons/Button';
 import { AnalyticsIcon } from '../icons';
 import { webappUrl } from '../../lib/constants';
+import { getPostImpressions } from '../../lib/impressions';
+import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { featureCardImpressions } from '../../lib/featureManagement';
+import { usePostImpressionsModal } from '../../hooks/post/usePostImpressionsModal';
 
 const DEFAULT_REPOSTS_PER_PAGE = 20;
 
 type PostUpvotesCommentsCountPost = Pick<
   Post,
-  'analytics' | 'numAwards' | 'numComments' | 'numReposts' | 'numUpvotes'
+  | 'analytics'
+  | 'numAwards'
+  | 'numComments'
+  | 'numReposts'
+  | 'numUpvotes'
+  | 'views'
 > &
   Partial<Pick<Post, 'id'>> & {
     author?: Pick<NonNullable<Post['author']>, 'id'>;
@@ -43,7 +52,9 @@ interface PostUpvotesCommentsCountProps {
 type PostUpvotesCommentsCountContentProps = PostUpvotesCommentsCountProps & {
   onRepostsClick?: () => unknown;
   onAwardsClick?: () => unknown;
+  onImpressionsClick?: () => void;
   showPostAnalytics?: boolean;
+  impressionsEnabled?: boolean;
 };
 
 const PostUpvotesCommentsCountContent = ({
@@ -52,7 +63,9 @@ const PostUpvotesCommentsCountContent = ({
   onCommentsClick,
   onRepostsClick,
   onAwardsClick,
+  onImpressionsClick,
   showPostAnalytics = false,
+  impressionsEnabled = false,
   className,
   compact = false,
   passive = false,
@@ -63,6 +76,18 @@ const PostUpvotesCommentsCountContent = ({
   const reposts = post.numReposts || 0;
   const getText = ({ count, label }: { count: number; label: string }) =>
     `${largeNumberFormat(count)} ${label}${count > 1 ? 's' : ''}`;
+  // Flag on: a single impressions stat next to the other counts (links to the
+  // analytics page). Flag off: keep main's behaviour — the author/team-only
+  // `analytics.impressions` line plus the "Post analytics" button.
+  const impressions = getPostImpressions(post);
+  const impressionsLabel =
+    impressionsEnabled &&
+    !compact &&
+    !!post.id &&
+    impressions !== null &&
+    impressions > 0
+      ? getText({ count: impressions, label: 'Impression' })
+      : null;
 
   const renderText = ({
     key,
@@ -95,7 +120,7 @@ const PostUpvotesCommentsCountContent = ({
       )}
       data-testid="statsBar"
     >
-      {!!post.analytics?.impressions && (
+      {!impressionsEnabled && !!post.analytics?.impressions && (
         <span>
           {getText({ count: post.analytics.impressions, label: 'Impression' })}
         </span>
@@ -112,6 +137,16 @@ const PostUpvotesCommentsCountContent = ({
           onClick: onCommentsClick,
           children: getText({ count: comments, label: 'Comment' }),
         })}
+      {/* Flag on: impressions sit right after comments and look like the other
+          stats. Tapping routes the owner/team to the analytics page and
+          everyone else to the explainer popup (same handler as the feed cards).
+          Shown on the post page/modal strip only (not the compact embed). */}
+      {impressionsLabel &&
+        renderText({
+          key: 'impressions',
+          onClick: onImpressionsClick,
+          children: impressionsLabel,
+        })}
       {reposts > 0 &&
         renderText({
           key: 'reposts',
@@ -136,7 +171,7 @@ const PostUpvotesCommentsCountContent = ({
             </span>
           ),
         })}
-      {showPostAnalytics && (
+      {!impressionsEnabled && showPostAnalytics && (
         <Link href={`${webappUrl}posts/${post.id}/analytics`} passHref>
           <Button
             tag="a"
@@ -160,7 +195,12 @@ const InteractivePostUpvotesCommentsCount = ({
   compact,
 }: PostUpvotesCommentsCountProps): ReactElement => {
   const { openModal } = useLazyModal();
-  const { user } = useAuthContext();
+  const { user, isAuthReady } = useAuthContext();
+  const { value: impressionsEnabled } = useConditionalFeature({
+    feature: featureCardImpressions,
+    shouldEvaluate: isAuthReady,
+  });
+  const onImpressionsClick = usePostImpressionsModal(post);
   const awards = post.numAwards || 0;
   const hasAccessToCores = useHasAccessToCores();
   if (!post.id) {
@@ -214,6 +254,8 @@ const InteractivePostUpvotesCommentsCount = ({
           : undefined
       }
       showPostAnalytics={canViewPostAnalytics({ user, post })}
+      impressionsEnabled={impressionsEnabled}
+      onImpressionsClick={onImpressionsClick}
       className={className}
       compact={compact}
     />
diff --git a/packages/shared/src/graphql/fragments.ts b/packages/shared/src/graphql/fragments.ts
index 84082859142..881e8c92440 100644
--- a/packages/shared/src/graphql/fragments.ts
+++ b/packages/shared/src/graphql/fragments.ts
@@ -383,6 +383,7 @@ export const SHARED_POST_INFO_FRAGMENT = gql`
     analytics {
       impressions
     }
+    views
     numUpvotes
     numComments
     numAwards
diff --git a/packages/shared/src/graphql/posts.ts b/packages/shared/src/graphql/posts.ts
index c5ca42d45ee..1d37a10f537 100644
--- a/packages/shared/src/graphql/posts.ts
+++ b/packages/shared/src/graphql/posts.ts
@@ -261,6 +261,9 @@ export interface Post {
   numComments?: number;
   numAwards?: number;
   numReposts?: number;
+  // Per-post impressions, selected by the feed (FeedPostInfo) and post
+  // (SharedPostInfo) fragments.
+  views?: number;
   author?: Author;
   scout?: Scout;
   read?: boolean;
diff --git a/packages/shared/src/hooks/post/usePostImpressions.ts b/packages/shared/src/hooks/post/usePostImpressions.ts
new file mode 100644
index 00000000000..665fd292a9e
--- /dev/null
+++ b/packages/shared/src/hooks/post/usePostImpressions.ts
@@ -0,0 +1,37 @@
+import type { Post } from '../../graphql/posts';
+import { getPostImpressions } from '../../lib/impressions';
+import { useConditionalFeature } from '../useConditionalFeature';
+import { featureCardImpressions } from '../../lib/featureManagement';
+import { useAuthContext } from '../../contexts/AuthContext';
+
+interface UsePostImpressionsResult {
+  /** Whether the `card_impressions` flag is on (independent of this post). */
+  enabled: boolean;
+  /** Render the impressions stat only when true. */
+  showImpressions: boolean;
+  /** The real impression count (null when none is available). */
+  impressions: number | null;
+}
+
+/**
+ * Gates the impressions stat: it shows only when the `card_impressions` flag is
+ * on and the post has a real, non-zero impression count. There is no mock —
+ * when the data is missing or zero the stat is hidden, matching how the
+ * upvote/comment counters hide at zero.
+ */
+export const usePostImpressions = (
+  post: Pick<Post, 'views' | 'analytics'>,
+): UsePostImpressionsResult => {
+  const { isAuthReady } = useAuthContext();
+  const { value: enabled } = useConditionalFeature({
+    feature: featureCardImpressions,
+    shouldEvaluate: isAuthReady,
+  });
+  const impressions = getPostImpressions(post);
+
+  return {
+    enabled,
+    showImpressions: enabled && impressions !== null && impressions > 0,
+    impressions,
+  };
+};
diff --git a/packages/shared/src/hooks/post/usePostImpressionsModal.ts b/packages/shared/src/hooks/post/usePostImpressionsModal.ts
new file mode 100644
index 00000000000..d71842aeaf5
--- /dev/null
+++ b/packages/shared/src/hooks/post/usePostImpressionsModal.ts
@@ -0,0 +1,40 @@
+import type { MouseEvent } from 'react';
+import { useCallback } from 'react';
+import { useRouter } from 'next/router';
+import type { Post } from '../../graphql/posts';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useLazyModal } from '../useLazyModal';
+import { LazyModal } from '../../components/modals/common/types';
+import { canViewPostAnalytics } from '../../lib/user';
+import { webappUrl } from '../../lib/constants';
+
+/**
+ * Click handler for the impressions stat:
+ * - the post owner (or a team member) can see real analytics, so they go to the
+ *   post analytics page;
+ * - everyone else gets the X/Twitter-style explainer popup.
+ */
+export const usePostImpressionsModal = (post: {
+  id?: string;
+  author?: Pick<NonNullable<Post['author']>, 'id'>;
+}): ((event?: MouseEvent) => void) => {
+  const router = useRouter();
+  const { user } = useAuthContext();
+  const { openModal } = useLazyModal();
+  const canViewAnalytics = canViewPostAnalytics({ user, post });
+
+  return useCallback(
+    (event?: MouseEvent) => {
+      event?.stopPropagation();
+      event?.preventDefault();
+
+      if (canViewAnalytics) {
+        router.push(`${webappUrl}posts/${post.id}/analytics`);
+        return;
+      }
+
+      openModal({ type: LazyModal.PostImpressions });
+    },
+    [canViewAnalytics, openModal, router, post.id],
+  );
+};
diff --git a/packages/shared/src/hooks/useFitFontSize.ts b/packages/shared/src/hooks/useFitFontSize.ts
new file mode 100644
index 00000000000..3e191ba9eca
--- /dev/null
+++ b/packages/shared/src/hooks/useFitFontSize.ts
@@ -0,0 +1,90 @@
+import type { RefCallback } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+
+// Layout effects must run before paint to avoid a flash of the wrong size, but
+// `useLayoutEffect` warns during SSR — fall back to `useEffect` on the server.
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+interface UseFitFontSizeProps {
+  /** Re-measures whenever this changes (pass the rendered text). */
+  text: string;
+  /** Font-size utility classes, largest first (e.g. typo-title1 → title3). */
+  sizeClasses: string[];
+  /** Maximum number of lines the text may occupy at the chosen size. */
+  maxLines: number;
+}
+
+interface UseFitFontSizeResult<T> {
+  ref: RefCallback<T>;
+  /** The largest size class at which the text fits within `maxLines`. */
+  sizeClass: string;
+  /**
+   * True once the smallest size is reached and the text still overflows — the
+   * caller should clamp (ellipsis) as a last resort. While stepping down we
+   * leave the text unclamped so `scrollHeight` reflects its true height.
+   */
+  isClamped: boolean;
+}
+
+/**
+ * Shrinks text to the largest font size at which it still fits within
+ * `maxLines`, measuring the rendered element rather than guessing from
+ * character count (the container width varies, so a count heuristic can't be
+ * trusted). Steps down one size per layout pass until it fits or bottoms out.
+ *
+ * The element is tracked via a callback ref (state, not `useRef`) so the
+ * measure/observe effects re-run whenever the node actually attaches — e.g.
+ * when the title only mounts after a sibling panel (feedback card) is dismissed.
+ */
+export function useFitFontSize<T extends HTMLElement>({
+  text,
+  sizeClasses,
+  maxLines,
+}: UseFitFontSizeProps): UseFitFontSizeResult<T> {
+  const [node, setNode] = useState<T | null>(null);
+  const [index, setIndex] = useState(0);
+  const lastIndex = sizeClasses.length - 1;
+  const ref = useCallback<RefCallback<T>>((el) => setNode(el), []);
+
+  // Start fresh from the largest size whenever the text changes.
+  useIsomorphicLayoutEffect(() => {
+    setIndex(0);
+  }, [text]);
+
+  // After each applied size (and once the node attaches), measure and step
+  // down once if it still overflows.
+  useIsomorphicLayoutEffect(() => {
+    if (!node || index >= lastIndex) {
+      return;
+    }
+    const lineHeight = parseFloat(getComputedStyle(node).lineHeight);
+    if (!lineHeight) {
+      return;
+    }
+    if (Math.round(node.scrollHeight / lineHeight) > maxLines) {
+      setIndex((current) => Math.min(current + 1, lastIndex));
+    }
+  }, [node, text, index, maxLines, lastIndex]);
+
+  // Re-fit from scratch when the available width changes (height changes from
+  // our own shrinking are ignored so we don't loop).
+  useIsomorphicLayoutEffect(() => {
+    const parent = node?.parentElement;
+    if (!parent || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    let lastWidth = parent.clientWidth;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width ?? lastWidth;
+      if (Math.abs(width - lastWidth) > 1) {
+        lastWidth = width;
+        setIndex(0);
+      }
+    });
+    observer.observe(parent);
+    return () => observer.disconnect();
+  }, [node]);
+
+  return { ref, sizeClass: sizeClasses[index], isClamped: index >= lastIndex };
+}
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index cfd1f0385e6..f65ac785cee 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -279,3 +279,9 @@ export const featureNotificationsRedesign = new Feature(
   'notifications_redesign',
   false,
 );
+
+// Surfaces a per-post impressions stat on the feed card action bars (glass +
+// standard) and the post page stats strip. Control hides it entirely. Keep the
+// default `false` — GrowthBook ramps it, and the feed has no real public
+// impressions data yet (see getPostImpressions).
+export const featureCardImpressions = new Feature('card_impressions', false);
diff --git a/packages/shared/src/lib/impressions.spec.ts b/packages/shared/src/lib/impressions.spec.ts
new file mode 100644
index 00000000000..58865f23761
--- /dev/null
+++ b/packages/shared/src/lib/impressions.spec.ts
@@ -0,0 +1,57 @@
+import { formatImpressions, getPostImpressions } from './impressions';
+import type { Post } from '../graphql/posts';
+
+describe('function formatImpressions', () => {
+  it('renders raw numbers below 1000', () => {
+    expect(formatImpressions(0)).toBe('0');
+    expect(formatImpressions(1)).toBe('1');
+    expect(formatImpressions(999)).toBe('999');
+  });
+
+  it('shows one decimal only while the abbreviated value is under 10', () => {
+    expect(formatImpressions(1200)).toBe('1.2K');
+    expect(formatImpressions(9900)).toBe('9.9K');
+    expect(formatImpressions(1_800_000)).toBe('1.8M');
+  });
+
+  it('drops the decimal once the abbreviated value reaches double digits', () => {
+    expect(formatImpressions(12_000)).toBe('12K');
+    expect(formatImpressions(137_000)).toBe('137K');
+    expect(formatImpressions(45_000_000)).toBe('45M');
+  });
+
+  it('carries to the next unit when rounding lands on 1000', () => {
+    expect(formatImpressions(999_500)).toBe('1M');
+    expect(formatImpressions(999_999)).toBe('1M');
+    expect(formatImpressions(999_999_999)).toBe('1B');
+  });
+
+  it('handles null and non-finite input', () => {
+    expect(formatImpressions(null)).toBe('0');
+    expect(formatImpressions(NaN)).toBe('0');
+    expect(formatImpressions(Infinity)).toBe('0');
+  });
+});
+
+describe('function getPostImpressions', () => {
+  const make = (data: Partial<Post>): Pick<Post, 'views' | 'analytics'> =>
+    data as Pick<Post, 'views' | 'analytics'>;
+
+  it('prefers analytics.impressions over views', () => {
+    expect(
+      getPostImpressions(make({ analytics: { impressions: 42 }, views: 7 })),
+    ).toBe(42);
+  });
+
+  it('falls back to views when analytics is absent', () => {
+    expect(getPostImpressions(make({ views: 7 }))).toBe(7);
+  });
+
+  it('returns null when neither is present (no mock)', () => {
+    expect(getPostImpressions(make({}))).toBeNull();
+  });
+
+  it('keeps a real zero rather than inventing a number', () => {
+    expect(getPostImpressions(make({ views: 0 }))).toBe(0);
+  });
+});
diff --git a/packages/shared/src/lib/impressions.ts b/packages/shared/src/lib/impressions.ts
new file mode 100644
index 00000000000..b56a1cf6edd
--- /dev/null
+++ b/packages/shared/src/lib/impressions.ts
@@ -0,0 +1,51 @@
+import type { Post } from '../graphql/posts';
+
+/**
+ * X/Twitter-style compact number: a decimal only shows while the abbreviated
+ * value is < 10 (1.2K, 9.9K, 1.8M) and is dropped once it reaches double digits
+ * (12K, 137K, 45M) — so the decimal point isn't displayed at every magnitude.
+ * Applied at all resolutions.
+ */
+export const formatImpressions = (value: number | null): string => {
+  if (value == null || !Number.isFinite(value)) {
+    return '0';
+  }
+  if (Math.abs(value) < 1000) {
+    return String(Math.round(value));
+  }
+  const units = ['K', 'M', 'B', 'T'];
+  let scaled = value;
+  let unit = -1;
+  while (Math.abs(scaled) >= 1000 && unit < units.length - 1) {
+    scaled /= 1000;
+    unit += 1;
+  }
+  let rounded =
+    Math.abs(scaled) < 10 ? Math.round(scaled * 10) / 10 : Math.round(scaled);
+  // Carry to the next unit when rounding lands on 1000 (e.g. 999_500 → 1M, not
+  // 1000K).
+  if (Math.abs(rounded) >= 1000 && unit < units.length - 1) {
+    rounded /= 1000;
+    unit += 1;
+  }
+  const compact =
+    Math.abs(rounded) < 10
+      ? rounded.toFixed(1).replace(/\.0$/, '')
+      : String(rounded);
+  return `${compact}${units[unit]}`;
+};
+
+/**
+ * Real per-post impressions, or `null` when none are available.
+ *
+ * `analytics.impressions` is populated on the post detail for the author/team;
+ * `views` is the feed-level count. Until the feed exposes a real public count
+ * `views` may be absent — callers should render nothing when this returns null
+ * (and the whole stat is gated behind the `card_impressions` flag).
+ */
+export const getPostImpressions = (
+  post: Pick<Post, 'views' | 'analytics'>,
+): number | null => {
+  const value = post.analytics?.impressions ?? post.views;
+  return typeof value === 'number' ? value : null;
+};
diff --git a/packages/shared/src/lib/numberFormat.ts b/packages/shared/src/lib/numberFormat.ts
index 1ed5599d89d..ce34cbce085 100644
--- a/packages/shared/src/lib/numberFormat.ts
+++ b/packages/shared/src/lib/numberFormat.ts
@@ -1,6 +1,6 @@
 import type { PaddleProductLineItem } from '../graphql/paddle';
 
-export function largeNumberFormat(value: number): string | null {
+export function largeNumberFormat(value: number | null): string | null {
   if (typeof value !== 'number') {
     return null;
   }