fix: responsive navbar logo, AppLayout SVG logo, landing prices from API

- Header: logo h-48px mobile / h-168px desktop, md:self-start overflow
- PublicLayout: main pt-80px to match new header height
- Hero: -mt-80px cancels PublicLayout pt, responsive inner pt
- AppLayout: replace PNG logo (black box) with SVG mark + text
- billing.py: add public GET /billing/packs endpoint
- api.ts + Pricing.tsx: fetch packs from API, fallback to defaults

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/app/routes/billing.py

@@ -18,6 +18,13 @@ logger = logging.getLogger(__name__)
 billing_bp = Blueprint('billing', __name__)
 
 
+@billing_bp.route('/packs', methods=['GET'])
+async def get_credit_packs():
+    """Public — returns available credit pack definitions for the landing page."""
+    settings = await get_settings()
+    return jsonify({'packs': settings.get('credit_packs', [])}), 200
+
+
 @billing_bp.route('/balance', methods=['GET'])
 @jwt_required()
 async def get_balance():

src/components/landing/Hero.tsx

@@ -119,7 +119,7 @@ export default function Hero() {
   const shouldAnimate = !shouldReduce;
 
   return (
-    <section className="relative flex flex-col justify-start overflow-hidden -mt-[176px] pt-[176px]">
+    <section className="relative flex flex-col justify-start overflow-hidden -mt-[80px] pt-[80px] md:pt-[176px]">
       {/* Background glow */}
       <div
         className="glow-orb w-[600px] h-[400px] left-1/4 top-1/3 opacity-15"
@@ -134,7 +134,7 @@ export default function Hero() {
         }}
       />
 
-      <div className="relative max-w-7xl mx-auto px-6 w-full pt-[20px] pb-8 lg:pb-10">
+      <div className="relative max-w-7xl mx-auto px-6 w-full pt-[12px] md:pt-[20px] pb-8 lg:pb-10">
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
 

src/components/landing/Pricing.tsx

@@ -1,8 +1,10 @@
+import { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { useNavigate } from 'react-router-dom';
 import { CheckCircle2, Info } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { fadeUp, staggerChildren, viewportOnce } from '@/lib/motion';
+import { billingApi } from '@/lib/api';
 
 interface CreditPack {
   id: string;
@@ -54,7 +56,13 @@ function CreditTooltip() {
 
 export default function Pricing() {
   const navigate = useNavigate();
-  const packs = DEFAULT_PACKS;
+  const [packs, setPacks] = useState<CreditPack[]>(DEFAULT_PACKS);
+
+  useEffect(() => {
+    billingApi.getPacks()
+      .then(r => { if (r.data?.packs?.length) setPacks(r.data.packs); })
+      .catch(() => {});
+  }, []);
 
   return (
     <section className="py-24 px-6" id="pricing">

src/components/layout/AppLayout.tsx

@@ -31,8 +31,11 @@ export default function AppLayout({ children }: { children?: React.ReactNode })
       <header className="sticky top-0 z-40 bg-[hsl(220_22%_10%/0.95)] backdrop-blur-xl border-b border-border/60">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between gap-4">
           {/* Logo */}
-          <Link to="/" className="flex-shrink-0">
-            <Logo withWordmark size="sm" />
+          <Link to="/" className="flex-shrink-0 flex items-center gap-2">
+            <Logo variant="mark-only" size="sm" />
+            <span className="hidden sm:block font-bold text-base text-foreground tracking-tight" style={{ letterSpacing: '-0.02em' }}>
+              Cohorta
+            </span>
           </Link>
 
           {/* Desktop nav */}

src/components/layout/Header.tsx

@@ -92,13 +92,13 @@ export default function Header() {
               : 'bg-transparent'
           )}
         >
-          {/* Left: Logo banner — top-anchored, overflows below the pill */}
-          <Link to="/" className="flex-shrink-0 self-start">
+          {/* Left: Logo banner */}
+          <Link to="/" className="flex-shrink-0 md:self-start">
             <img
               src={`${import.meta.env.BASE_URL}cohorta-banner.png`}
               alt="Cohorta"
-              style={{ height: '168px', objectFit: 'contain', objectPosition: 'left center' }}
-              className="w-auto"
+              style={{ objectFit: 'contain', objectPosition: 'left center' }}
+              className="w-auto h-[48px] md:h-[168px]"
               draggable={false}
             />
           </Link>

src/components/layout/PublicLayout.tsx

@@ -7,7 +7,7 @@ export default function PublicLayout() {
   return (
     <div className="min-h-screen flex flex-col bg-background">
       <Header />
-      <main className="flex-1 pt-[58px]">
+      <main className="flex-1 pt-[80px]">
         <Outlet />
       </main>
       <Footer />

src/lib/api.ts

@@ -132,6 +132,7 @@ export const authApi = {
 
 // Billing endpoints
 export const billingApi = {
+  getPacks: () => api.get('/billing/packs'),
   getBalance: () => api.get('/billing/balance'),
   getTransactions: (limit = 50) => api.get(`/billing/transactions?limit=${limit}`),
   createCheckout: (packId: string) => api.post('/billing/checkout', { pack_id: packId }),