Merge pull request #32916 from overleaf/td-pricing-features-follow-up

2026 pricing page feature comparison table polish

GitOrigin-RevId: 5ebad4f1bd7c296dff2277a7f2ddd6324597b244

services/web/frontend/stylesheets/pages/plans-2026.scss

@@ -14,14 +14,13 @@
   }
 
   .plans-period-label {
-    font-size: var(--font-size-02);
+    @include body-sm;
+
     font-weight: 400;
-    line-height: var(--line-height-02);
     margin: 0;
 
     @include media-breakpoint-up(md) {
-      font-size: var(--font-size-03);
-      line-height: var(--line-height-03);
+      @include body-base;
     }
   }
 
@@ -324,8 +323,8 @@
 
     .plans-price-card-yearly-summary,
     .student-plan-saving-badge {
-      font-size: var(--font-size-02);
-      line-height: var(--line-height-02);
+      @include body-sm;
+
       position: absolute;
     }
 
@@ -431,10 +430,10 @@
     }
 
     .plans-educational-discount-text {
+      @include body-sm;
+
       cursor: help;
-      font-size: var(--font-size-02);
       font-weight: 400;
-      line-height: var(--line-height-02);
       text-decoration: underline dotted;
       text-underline-offset: var(--spacing-01);
     }
@@ -476,11 +475,19 @@
 
   // ─── Organization logos ────────────────────────────────────────────────────────
 
+  .plans-logos-section {
+    background-color: var(--bg-light-secondary);
+  }
+
   .plans-and-pricing-section .plans-new-organizations {
     padding-block: var(--spacing-13);
 
     .plans-new-organizations-logo {
       margin-top: var(--spacing-06);
+
+      img {
+        filter: grayscale(1) opacity(0.54);
+      }
     }
   }
 
@@ -520,10 +527,6 @@
   // Below xl the plan cards already show prices and CTAs — the table
   // just needs plan names so users can compare features.
   @include media-breakpoint-down(xl) {
-    .plans-feature-table-most-popular-badge {
-      display: none;
-    }
-
     .plans-feature-table-col-header-inner .plans-cta {
       display: none;
     }
@@ -540,7 +543,7 @@
     border-collapse: separate;
     border-radius: var(--border-radius-medium);
     border-spacing: 0;
-    min-width: 640px;
+    min-width: 768px;
     table-layout: fixed;
     width: 100%;
 
@@ -579,25 +582,39 @@
     }
   }
 
-  .plans-feature-table-thead .plans-feature-table-header-row th {
-    backdrop-filter: blur(12px);
-    background: rgb($white, 0.7);
-
-    // -1px spread prevents shadow extending past table edges
-    box-shadow: 0 2px 4px -1px rgb($neutral-90, 0.16);
+  .plans-feature-table-thead .plans-feature-table-header-row {
     position: sticky;
     top: 0;
-    z-index: 2;
+
+    // Paints above positioned .plans-feature-table-cell-bool-content spans in
+    // body rows
+    z-index: 1;
+
+    // Negative spread prevents glow on left/right edges; top glow hidden by
+    // top: 0
+    box-shadow: 0 8px 16px -4px rgb($black, 0.08);
+
+    th {
+      backdrop-filter: blur(12px);
+      background: rgb($white, 0.7);
+      border-bottom: 1px solid var(--border-divider);
+    }
   }
 
   .plans-feature-table-col-header {
     overflow: hidden;
     padding: var(--spacing-06);
-
-    // Extra bottom padding reserves space for the absolutely-positioned CTA button
-    padding-bottom: 56px;
     text-align: center;
     vertical-align: top;
+
+    // Reserve space for the absolutely-positioned CTA button — but only when
+    // it's both rendered (hideForLoggedIn suppresses it) and visible at this
+    // breakpoint (prices+CTA hide below xl via .only-show-for-specific-plan-period)
+    @include media-breakpoint-up(xl) {
+      &:has(.plans-cta) {
+        padding-bottom: 56px;
+      }
+    }
   }
 
   .plans-feature-table-col-header-inner .plans-cta {
@@ -615,26 +632,10 @@
     padding: var(--spacing-06);
   }
 
-  .plans-feature-table-most-popular-badge {
-    @extend .mono-text;
-
-    background-color: var(--green-bright-tint-50);
-    border-radius: var(--border-radius-medium);
-    color: var(--content-primary);
-    font-size: var(--font-size-01);
-    left: 50%;
-    padding: var(--spacing-01) var(--spacing-03);
-    position: absolute;
-    top: 0;
-    transform: translate(-50%, -50%);
-    white-space: nowrap;
-    z-index: 1;
-  }
-
   .plans-feature-table-col-name {
     color: var(--green-60);
     display: block;
-    font-size: var(--font-size-03);
+    font-size: var(--font-size-04);
     font-weight: 500;
     margin-bottom: var(--spacing-02);
     text-align: center;
@@ -657,11 +658,14 @@
   .plans-feature-table-col-price-term {
     color: var(--content-primary);
     font-size: var(--font-size-03);
+    font-weight: 400;
   }
 
   .plans-feature-table-col-price-yearly {
+    @include body-xs;
+
     color: var(--neutral-60);
-    font-size: var(--font-size-01);
+    font-weight: 400;
     margin-bottom: var(--spacing-02);
     text-align: center;
   }
@@ -735,6 +739,7 @@
   }
 
   .plans-feature-table-cell {
+    color: var(--neutral-60);
     padding: var(--spacing-06);
     text-align: center;
     vertical-align: middle;
@@ -749,6 +754,10 @@
 
   .plans-feature-table-cell-bool-content {
     display: inline-block;
+
+    // Collapse to the check icon's height so `top: 50%` on the absolutely-
+    // positioned info icon aligns with the check icon's visual centre.
+    line-height: 1;
     position: relative;
 
     &[data-bs-toggle='tooltip'] {
@@ -757,31 +766,40 @@
   }
 
   .plans-feature-table-info-icon {
-    color: var(--content-secondary);
+    color: var(--neutral-60);
     font-size: var(--font-size-03);
     vertical-align: middle;
   }
 
-  // In bool cells the info icon floats beside the check; in text cells it flows inline
-  .plans-feature-table-cell-bool-content .plans-feature-table-info-icon {
-    left: calc(100% + var(--spacing-01));
+  // In bool cells the info icon floats beside the check; in text cells it flows
+  // inline. The wrapper has left padding to bridge the gap, preventing tooltip
+  // flicker on hover.
+  .plans-feature-table-cell-bool-content
+    .plans-feature-table-info-icon-wrapper {
+    left: 100%;
+    padding-left: var(--spacing-01);
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
   }
 
   .plans-feature-table-cell-text-content {
+    @include body-base;
+
     align-items: center;
     color: var(--content-primary);
     display: inline-flex;
-    font-size: var(--font-size-02);
     gap: var(--spacing-02);
+
+    &.plans-feature-table-cell-text-small {
+      @include body-sm;
+    }
   }
 
   // ─── Quotes and FAQs section────────────────────────────────────────────────
 
   .plans-quotes-section {
-    padding-bottom: var(--spacing-13);
+    padding-block: var(--spacing-13);
   }
 
   .plans-faq {

services/web/locales/en.json

@@ -142,10 +142,10 @@
   "agree": "Agree",
   "agree_with_the_terms": "I agree with the Overleaf terms",
   "ai_allowance": "AI allowance",
-  "ai_allowance_basic_explanation": "5 AI uses per day. Enough for the occasional nudge — fix an error, check a formula, or get unstuck when you need it most.",
+  "ai_allowance_basic_explanation": "5 AI uses per day across available AI tools.",
   "ai_allowance_explanation": "Built-in AI tools that support writing, editing, and LaTeX workflows. Usage is capped by a daily limit that resets every day. AI features can be disabled by individual users or managed at the group level. Fair usage applies.",
-  "ai_allowance_max_explanation": "Unlimited AI usage. Use AI as much as you like — just write, and let Overleaf handle the rest. Fair usage applies.",
-  "ai_allowance_standard_explanation": "10 AI uses per day. Enough for most researchers and writers. Use it to catch errors, tidy formatting, and sharpen your writing throughout the day.",
+  "ai_allowance_max_explanation": "Full access to every AI tool. Fair usage applies.",
+  "ai_allowance_standard_explanation": "10 AI uses per day across all AI tools.",
   "ai_assist": "AI Assist",
   "ai_assist_description": "AI Assist combines AI tools from Overleaf and Writefull to help you write faster, smarter and with confidence.",
   "ai_assist_in_overleaf_is_included_via_writefull_groups": "AI Assist in Overleaf is included as part of your group or organization’s Writefull subscription. To make changes you’ll need to speak to your subscription admin",
@@ -153,6 +153,7 @@
   "ai_assist_subscriber_can_now_write_smarter": "AI Assist subscribers can now write smarter, find citations, and generate LaTeX from prompts and images.",
   "ai_assist_unavailable_due_to_subscription_type": "We’re sorry—it looks like AI Assist isn’t available to you just yet due to your current subscription type.",
   "ai_assistant": "AI Assistant",
+  "ai_assistant_explanation": "A LaTeX-fluent AI Assistant built into your editor.",
   "ai_can_make_mistakes": "AI can make mistakes. Review fixes before you apply them.",
   "ai_features": "AI features",
   "ai_feedback_please_provide_more_detail": "Please provide more detail about what was wrong (optional)",
@@ -258,7 +259,7 @@
   "back_to_your_projects": "Back to your projects",
   "basic": "Basic",
   "basic_ai_allowance": "Basic AI allowance",
-  "basic_ai_allowance_tooltip": "5 AI uses per day. Enough for the occasional nudge — fix an error, check a formula, or get unstuck when you need it most.",
+  "basic_ai_allowance_tooltip": "5 AI uses per day across available AI tools.",
   "basic_compile_time": "Basic compile time",
   "basic_compile_timeout": "Basic compile timeout",
   "basic_compile_timeout_on_fast_servers": "Basic compile timeout on fast servers",
@@ -1186,7 +1187,7 @@
   "includes": "includes",
   "increase_indent": "Increase indentation",
   "increased_ai_allowance": "Increased AI allowance",
-  "increased_ai_allowance_tooltip": "10 AI uses per day. Enough for most researchers and writers. Use it to catch errors, tidy formatting, and sharpen your writing throughout the day.",
+  "increased_ai_allowance_tooltip": "10 AI uses per day across all AI tools.",
   "increased_compile_timeout": "Increased compile timeout",
   "individuals": "Individuals",
   "info": "Info",
@@ -1502,7 +1503,7 @@
   "math_inline": "Math Inline",
   "max_ai": "Max",
   "max_ai_allowance": "Max AI allowance",
-  "max_ai_allowance_tooltip": "Unlimited AI usage. Use AI as much as you like — just write, and let Overleaf handle the rest. Fair usage applies.",
+  "max_ai_allowance_tooltip": "Full access to every AI tool. Fair usage applies.",
   "maximum_files_uploaded_together": "Maximum __max__ files uploaded together",
   "may": "May",
   "maybe_later": "Maybe later",