diff --git a/app/portal/page.tsx b/app/portal/page.tsx
index 9f890cf6..2d4a8664 100644
--- a/app/portal/page.tsx
+++ b/app/portal/page.tsx
@@ -14,18 +14,15 @@ import {
     Sparkles,
 } from "lucide-react";
 
-// If you have shadcn/ui Card/Button/Badge already, keep these.
+// shadcn/ui
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 
 /**
- * App Dashboard: Support CTA (simplified hero, no progress meter)
- * ---------------------------------------------------------------
- * - Minimal hero to match site chrome.
- * - No goal/progress UI.
- * - Consistent CTA buttons with solid, high-contrast fills.
- * - Tips/perks render as inline chips so they wrap smoothly.
+ * App Dashboard: Support CTA (polished)
+ * - Stable custom buttons (no hover flicker)
+ * - Perks on their own lines
+ * - Copy + outline adjustments per request
  */
 
 const perks = [
@@ -79,205 +76,200 @@ const adVsCommunity = {
     ],
 };
 
-export default function Page() {
-    return (
-        <div className="min-h-[calc(100dvh-4rem)] w-full">
-        {/* Hero (clean + minimal to match site) */}
-        <section className="mx-auto w-full max-w-6xl px-6 py-14 sm:py-16">
-        <div className="text-center">
-        <Badge variant="secondary" className="mb-4">
-        Community-Funded • Ad-Free • Open Resources
-        </Badge>
+// Reusable button styles (anchors styled as buttons to avoid shadcn hover conflicts)
+const btn =
+"inline-flex items-center justify-center rounded-2xl px-5 py-3 text-sm font-medium text-white shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2";
+        const btnTeal = `${btn} bg-teal-600 hover:bg-teal-700 focus-visible:ring-teal-500`;
+        const btnRose = `${btn} bg-rose-600 hover:bg-rose-700 focus-visible:ring-rose-500`;
+        const btnSky = `${btn} bg-sky-600 hover:bg-sky-700 focus-visible:ring-sky-500`;
 
-        <h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
-        Keep Laser Everything & MakeArmy free for everyone
-        </h1>
+        export default function Page() {
+            return (
+                <div className="min-h-[calc(100dvh-4rem)] w-full">
+                {/* Hero */}
+                <section className="mx-auto w-full max-w-6xl px-6 py-14 sm:py-16">
+                <div className="text-center">
+                <Badge variant="secondary" className="mb-4">
+                Community-Funded • Ad-Free • Open Resources
+                </Badge>
 
-        <p className="mx-auto mt-3 max-w-3xl text-balance text-sm text-muted-foreground sm:text-base">
-        The videos, tools, and docs you use today exist because previous supporters paid it forward.
-        We want to stay independent — no ads, no sponsors, no strings — and that only works if we fund it together.
-        </p>
+                <h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
+                Keep Laser Everything & MakeArmy free for everyone
+                </h1>
 
-        {/* Slim CTA row (consistent shape + solid, high-contrast fills) */}
-        <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
-        {/* Laser Master Academy — teal */}
-        <Button
-        asChild
-        size="lg"
-        className="rounded-2xl bg-teal-600 text-white shadow-sm hover:bg-teal-700 focus-visible:ring-2 focus-visible:ring-teal-500"
-        >
-        <Link
-        href="https://masters.lasereverything.net"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="Join Laser Master Academy"
-        >
-        Join Laser Master Academy <ArrowRight className="ml-2 h-4 w-4" />
-        </Link>
-        </Button>
+                <p className="mx-auto mt-3 max-w-3xl text-balance text-sm text-muted-foreground sm:text-base">
+                The videos, tools, and docs you use today exist because previous supporters paid it forward.
+                We want to stay independent — no ads, no sponsors, no strings — and that only works if we fund it together.
+                </p>
 
-        {/* Patreon — rose */}
-        <Button
-        asChild
-        size="lg"
-        className="rounded-2xl bg-rose-600 text-white shadow-sm hover:bg-rose-700 focus-visible:ring-2 focus-visible:ring-rose-500"
-        >
-        <Link
-        href="https://www.patreon.com/c/LaserEverything"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="Back Laser Everything on Patreon"
-        >
-        Back on Patreon
-        </Link>
-        </Button>
+                {/* CTA row (custom anchors = stable hover) */}
+                <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
+                <Link
+                href="https://masters.lasereverything.net"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Join Laser Master Academy"
+                className={btnTeal}
+                >
+                Join Laser Master Academy <ArrowRight className="ml-2 h-4 w-4" />
+                </Link>
 
-        {/* Ko-Fi — sky (high-contrast; no yellow) */}
-        <Button
-        asChild
-        size="lg"
-        className="rounded-2xl bg-sky-600 text-white shadow-sm hover:bg-sky-700 focus-visible:ring-2 focus-visible:ring-sky-500"
-        >
-        <Link
-        href="https://ko-fi.com/lasereverything"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="Tip Laser Everything on Ko-Fi"
-        >
-        Tip on Ko-Fi
-        </Link>
-        </Button>
-        </div>
+                <Link
+                href="https://www.patreon.com/c/LaserEverything"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Back Laser Everything on Patreon"
+                className={btnRose}
+                >
+                Back on Patreon
+                </Link>
 
-        {/* Perks as inline chips (flows naturally, no awkward line breaks) */}
-        <ul className="mx-auto mt-5 flex max-w-4xl flex-wrap items-center justify-center gap-x-6 gap-y-2 text-muted-foreground">
-        {perks.map((p, i) => (
-            <li key={i} className="inline-flex items-center gap-2 text-sm">
-            {p.icon}
-            <span>{p.text}</span>
-            </li>
-        ))}
-        </ul>
-        </div>
-        </section>
+                <Link
+                href="https://ko-fi.com/lasereverything"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Tip Laser Everything on Ko-Fi"
+                className={btnSky}
+                >
+                Tip on Ko-Fi
+                </Link>
+                </div>
 
-        {/* Support Options */}
-        <section className="mx-auto -mt-2 max-w-6xl px-6 pb-12">
-        <div className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8">
-        <div className="mx-auto max-w-3xl text-center">
-        <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">How you can help—pick what fits</h2>
-        <p className="mt-2 text-muted-foreground">
-        Whether you join the Academy, pledge monthly, or tip once, every contribution sustains the whole community.
-        </p>
-        </div>
+                {/* Perks: each on its own line, centered */}
+                <ul className="mx-auto mt-5 max-w-xl space-y-2 text-muted-foreground">
+                {perks.map((p, i) => (
+                    <li key={i} className="flex items-center justify-center gap-2 text-sm">
+                    {p.icon}
+                    <span>{p.text}</span>
+                    </li>
+                ))}
+                </ul>
+                </div>
+                </section>
 
-        <div className="mt-8 grid grid-cols-1 gap-6 md:grid-cols-3">
-        {supportTiers.map((tier) => (
-            <Card key={tier.name} className="group rounded-2xl transition hover:shadow-lg">
-            <CardHeader>
-            <div className="mb-2 flex items-center gap-2 text-teal-600 dark:text-teal-400">
-            {tier.icon}
-            <CardTitle className="text-lg">{tier.name}</CardTitle>
-            </div>
-            <p className="text-sm text-muted-foreground">{tier.blurb}</p>
-            </CardHeader>
-            <CardContent>
-            <ul className="space-y-2 text-sm">
-            {tier.perks.map((perk) => (
-                <li key={perk} className="flex items-center gap-2">
-                <CheckCircle2 className="h-4 w-4" aria-hidden="true" /> {perk}
-                </li>
-            ))}
-            </ul>
-            <Button asChild className="mt-4 w-full rounded-xl">
-            <Link href={tier.href} target="_blank" rel="noopener noreferrer">
-            {tier.cta}
-            </Link>
-            </Button>
-            </CardContent>
-            </Card>
-        ))}
-        </div>
+                {/* Support Options */}
+                <section className="mx-auto -mt-2 max-w-6xl px-6 pb-12">
+                <div className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8">
+                <div className="mx-auto max-w-3xl text-center">
+                <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">How you can help—pick what fits</h2>
+                <p className="mt-2 text-muted-foreground">
+                Whether you join the Academy, pledge monthly, or tip once, every contribution sustains the whole community.
+                </p>
+                </div>
 
-        {/* Philosophy: Ads vs Community */}
-        <div className="mt-10">
-        <div className="mx-auto max-w-3xl text-center">
-        <h3 className="text-xl font-semibold">Why not just run ads & sponsors?</h3>
-        <p className="mt-2 text-sm text-muted-foreground">
-        Because it quietly changes what we make and who we serve. We’d rather be accountable to you.
-        </p>
-        </div>
+                <div className="mt-8 grid grid-cols-1 gap-6 md:grid-cols-3">
+                {supportTiers.map((tier) => (
+                    <Card key={tier.name} className="group rounded-2xl transition hover:shadow-lg">
+                    <CardHeader>
+                    <div className="mb-2 flex items-center gap-2 text-teal-600 dark:text-teal-400">
+                    {tier.icon}
+                    <CardTitle className="text-lg">{tier.name}</CardTitle>
+                    </div>
+                    <p className="text-sm text-muted-foreground">{tier.blurb}</p>
+                    </CardHeader>
+                    <CardContent>
+                    <ul className="space-y-2 text-sm">
+                    {tier.perks.map((perk) => (
+                        <li key={perk} className="flex items-center gap-2">
+                        <CheckCircle2 className="h-4 w-4" aria-hidden="true" /> {perk}
+                        </li>
+                    ))}
+                    </ul>
+                    <Link
+                    href={tier.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="mt-4 inline-flex w-full items-center justify-center rounded-xl bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-colors hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground"
+                    >
+                    {tier.cta}
+                    </Link>
+                    </CardContent>
+                    </Card>
+                ))}
+                </div>
 
-        <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
-        <Card className="rounded-2xl">
-        <CardHeader>
-        <div className="flex items-center gap-2 text-rose-600 dark:text-rose-400">
-        <CircleX className="h-5 w-5" aria-hidden="true" />
-        <CardTitle className="text-base">Advertising / Sponsorship Model</CardTitle>
-        </div>
-        </CardHeader>
-        <CardContent>
-        <ul className="space-y-2 text-sm text-muted-foreground">
-        {adVsCommunity.ads.map((t) => (
-            <li key={t} className="flex items-center gap-2">
-            <CircleX className="h-4 w-4" aria-hidden="true" /> {t}
-            </li>
-        ))}
-        </ul>
-        </CardContent>
-        </Card>
+                {/* Philosophy: Ads vs Community */}
+                <div className="mt-10">
+                <div className="mx-auto max-w-3xl text-center">
+                <h3 className="text-xl font-semibold">Why not just run ads & sponsors?</h3>
+                <p className="mt-2 text-sm text-muted-foreground">
+                Because it quietly changes what we make and who we serve.
+                </p>
+                <p className="mt-1 text-sm text-muted-foreground">We’d rather be accountable to you.</p>
+                </div>
 
-        <Card className="rounded-2xl border-teal-600/30">
-        <CardHeader>
-        <div className="flex items-center gap-2 text-teal-700 dark:text-teal-300">
-        <CheckCircle2 className="h-5 w-5" aria-hidden="true" />
-        <CardTitle className="text-base">Community-Funded Model</CardTitle>
-        </div>
-        </CardHeader>
-        <CardContent>
-        <ul className="space-y-2 text-sm">
-        {adVsCommunity.community.map((t) => (
-            <li key={t} className="flex items-center gap-2">
-            <CheckCircle2 className="h-4 w-4" aria-hidden="true" /> {t}
-            </li>
-        ))}
-        </ul>
-        </CardContent>
-        </Card>
-        </div>
-        </div>
+                <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
+                {/* Dim outline for Advertising box */}
+                <Card className="rounded-2xl border border-foreground/10 dark:border-foreground/15">
+                <CardHeader>
+                <div className="flex items-center gap-2 text-rose-600 dark:text-rose-400">
+                <CircleX className="h-5 w-5" aria-hidden="true" />
+                <CardTitle className="text-base">Advertising / Sponsorship Model</CardTitle>
+                </div>
+                </CardHeader>
+                <CardContent>
+                <ul className="space-y-2 text-sm text-muted-foreground">
+                {adVsCommunity.ads.map((t) => (
+                    <li key={t} className="flex items-center gap-2">
+                    <CircleX className="h-4 w-4" aria-hidden="true" /> {t}
+                    </li>
+                ))}
+                </ul>
+                </CardContent>
+                </Card>
 
-        {/* Divider */}
-        <div className="my-10 h-px w-full bg-border" />
+                {/* Brighter outline for Community box */}
+                <Card className="rounded-2xl border border-teal-500/50 shadow-sm">
+                <CardHeader>
+                <div className="flex items-center gap-2 text-teal-700 dark:text-teal-300">
+                <CheckCircle2 className="h-5 w-5" aria-hidden="true" />
+                <CardTitle className="text-base">Community-Funded Model</CardTitle>
+                </div>
+                </CardHeader>
+                <CardContent>
+                <ul className="space-y-2 text-sm">
+                {adVsCommunity.community.map((t) => (
+                    <li key={t} className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4" aria-hidden="true" /> {t}
+                    </li>
+                ))}
+                </ul>
+                </CardContent>
+                </Card>
+                </div>
+                </div>
 
-        {/* Other ways */}
-        <div className="mt-10">
-        <h3 className="text-center text-xl font-semibold">No budget? No problem—here’s how to help for free</h3>
-        <div className="mx-auto mt-4 max-w-3xl">
-        <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-        {[
-            "Share our videos with a friend",
-            "Star + share our repos/tools",
-            "Submit laser settings & materials",
-            "Report bugs and suggest features",
-        ].map((item) => (
-            <li key={item} className="flex items-center gap-2 text-sm text-muted-foreground">
-            <HandCoins className="h-4 w-4" aria-hidden="true" /> {item}
-            </li>
-        ))}
-        </ul>
-        </div>
-        </div>
+                {/* Divider */}
+                <div className="my-10 h-px w-full bg-border" />
 
-        {/* Closing statement */}
-        <div className="mx-auto mt-10 max-w-3xl text-center">
-        <p className="text-balance text-sm text-muted-foreground">
-        Laser Everything exists because makers before you chose to keep the ladder down. If we each do a small part—
-        <span className="font-medium text-foreground"> we never need a paywall</span>.
-        </p>
-        </div>
-        </div>
-        </section>
-        </div>
-    );
-}
+                {/* Other ways */}
+                <div className="mt-10">
+                <h3 className="text-center text-xl font-semibold">No budget? No problem—here’s how to help for free</h3>
+                <div className="mx-auto mt-4 max-w-3xl">
+                <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                {[
+                    "Share our videos with a friend",
+                    "Star + share our repos/tools",
+                    "Submit laser settings & materials",
+                    "Report bugs and suggest features",
+                ].map((item) => (
+                    <li key={item} className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <HandCoins className="h-4 w-4" aria-hidden="true" /> {item}
+                    </li>
+                ))}
+                </ul>
+                </div>
+                </div>
+
+                {/* Closing statement */}
+                <div className="mx-auto mt-10 max-w-3xl text-center">
+                <p className="text-balance text-sm text-muted-foreground">
+                Laser Everything exists because makers before you chose to keep the ladder down. If we each do a small part—
+                <span className="font-medium text-foreground"> we never need a paywall</span>.
+                </p>
+                </div>
+                </div>
+                </section>
+                </div>
+            );
+        }