Changes.

app.py

@@ -369,13 +369,14 @@ with blocks:
                 elem_classes="markdown-text",
             )
 
-            # "Learn more" link to the explainer tab
-            gr.Markdown(
-                '<div class="f1-container"><p style="font-size:1.05rem;font-weight:600;">'
-                '<a class="f1-a" href="#what-is-formulaone">Learn more about FormulaOne.</a>'
-                "</p></div>"
-            )
+        learn_more_btn = gr.Button("Learn more about FormulaOne →", elem_id="learn-more-btn", variant="secondary")
 
+        # Switch to the "What is FormulaOne" tab (id="what-is")
+        learn_more_btn.click(
+            lambda: gr.Tabs(selected="what-is"),  # or gr.Tabs.update(selected="what-is") on older Gradio
+            inputs=None,
+            outputs=tabs,
+        )
         # Existing "What is FormulaOne" tab
         with gr.TabItem("What is FormulaOne", id=1, elem_id="what-is-tab"):
             gr.Image(

src/display/css_html_js.py

@@ -55,6 +55,23 @@ custom_css = """
   box-shadow: 0 1px 2px rgba(0,0,0,0.04);
 }
 
+.f1-tier-select-row { background: white; }
+
+.f1-tier-select-row div { border: none; }
+
+.f1-tier-select { background: white; }
+
+#learn-more-btn, #learn-more-btn button {
+  background: transparent !important;
+  border: none !important;
+  color: #2563eb !important;
+  font-weight: 700 !important;
+  font-size: 1.05rem !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+}
+#learn-more-btn button:hover { text-decoration: underline !important; background: transparent !important; }
+
 /* Text */
 .f1-p, .f1-li { line-height: 1.75; color: #374151; text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }