{% extends "standalone/base.html" %}

{% block title %}{{ aug_title }} - {{ brand_name }}{% endblock %}

{% block body_class %}antialiased bg-gray-50{% endblock %}

{% block body %}
<nav class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-gray-200">
    <div class="max-w-5xl mx-auto px-6 py-3 flex justify-between items-center flex-wrap gap-3">
        <a href="../index.html" class="font-bold gradient-text no-underline">{{ brand_name }}</a>
        <div class="flex items-center gap-4 text-sm">
            <a href="../index.html" class="text-gray-500 hover:text-gray-900">&larr; Back to Site</a>
            {% for other in other_augments %}
            <a href="{{ other.slug }}.html" class="text-gray-500 hover:text-gray-900 hidden md:inline">{{ other.title }}</a>
            {% endfor %}
        </div>
    </div>
</nav>

<div class="max-w-3xl mx-auto px-6 py-10">
    <div class="text-center mb-8">
        <span class="inline-block text-[0.65rem] font-bold uppercase tracking-wider px-3 py-1.5 rounded mb-3" style="color:var(--brand-primary); background:rgba(var(--brand-primary-rgb),0.08);">Interactive Tool</span>
        <h1 class="text-2xl font-extrabold text-gray-900 mb-2">{{ aug_title }}</h1>
        {% if aug_desc %}<p class="text-gray-500 max-w-lg mx-auto">{{ aug_desc }}</p>{% endif %}
    </div>

    <div class="bg-white rounded-xl overflow-hidden border border-gray-200">
        <div class="h-0.5" style="background:var(--brand-primary);"></div>
        {{ content | safe }}
    </div>
</div>

<footer class="bg-gray-900 text-gray-400 py-8 px-6 mt-12 text-center">
    <p class="font-bold text-white mb-1">{{ brand_name }}</p>
    <p class="text-xs">{{ tagline }}</p>
</footer>
{% endblock %}