From 1a7fbcb22310eae4d0da004ea4421b671e6f6abe Mon Sep 17 00:00:00 2001
From: Vishal Rana <v@labstack.com>
Date: Fri, 4 Sep 2026 15:16:53 -0700
Subject: [PATCH 1/6] feat(site): ask for analytics consent instead of
 measuring nothing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The site loaded gtag on every page and then held it in Consent Mode's
denied state. That is the worst of both halves: Google's tag shipped to
every reader, and no `_ga` cookie to make its numbers mean anything. Every
pageview arrived as a new user in a new session, so users, sessions,
bounce rate and returning visitors were all noise, and no amount of
reading the reports would have said so.

Nothing is loaded now until measurement is allowed, and when it loads the
consent it was denied is granted, so the identifier exists and the
sessions are real.

Whether permission must be asked for is a question about the reader's
location rather than about this site. The EEA, the UK and the Crown
Dependencies require it; elsewhere measurement may run with a way to turn
it off. Cloudflare already knows which applies and says so at
`/cdn-cgi/trace`, so most readers are measured properly and never see a
banner, and the readers who are owed the question get it. A failed lookup
asks — the safe direction, and what a build outside Cloudflare gets.

Do Not Track and Global Privacy Control sit above all of it, including
above the site's own controls: a reader who has answered this in their
browser is not asked again and is not measured either way.

Withdrawal is the half that is easy to leave out, so `/privacy` carries a
standing control that states what is currently happening before offering
the buttons, and declining actually revokes: it sets the `ga-disable-`
flag, pushes consent back to denied, and deletes the cookies acceptance
set. Permission that cannot be withdrawn as readily as it was given was
never permission.

Two things are cut down before they leave the browser. Query strings are
dropped from the recorded address, because a link can put anything after
the `?` and the path is the whole of what this site wants to know. The
referrer is reduced to its origin, so the site a reader came from is
recorded and their search terms are not.

The preference lives in localStorage rather than a cookie, so declining
stores nothing that travels with a request, and it is mirrored across
tabs.

The banner renders on every page rather than only where the site footer
does: a reader arriving from a search result lands on a documentation
page, and a prompt confined to the landing page asks the question of the
wrong half of the audience.

`privacy` joins ORDER in both llms.txt generators, which otherwise fail
the build rather than let a section go silently unindexed.

Claude-Session: https://claude.ai/code/session_0188fRgp2DyMXzUcJgdMZSyu
---
 site/src/components/Analytics.astro           | 390 ++++++++++++++----
 site/src/components/AnalyticsConsent.astro    | 142 +++++++
 site/src/components/AnalyticsPreference.astro | 153 +++++++
 site/src/components/PageFrame.astro           |   2 +
 site/src/components/SiteFooter.astro          |  22 +-
 site/src/content/docs/privacy.mdx             |  95 +++++
 site/src/pages/llms-full.txt.ts               |   2 +-
 site/src/pages/llms.txt.ts                    |   3 +-
 8 files changed, 722 insertions(+), 87 deletions(-)
 create mode 100644 site/src/components/AnalyticsConsent.astro
 create mode 100644 site/src/components/AnalyticsPreference.astro
 create mode 100644 site/src/content/docs/privacy.mdx

diff --git a/site/src/components/Analytics.astro b/site/src/components/Analytics.astro
index 71f6cbdd..227dfbea 100644
--- a/site/src/components/Analytics.astro
+++ b/site/src/components/Analytics.astro
@@ -1,12 +1,35 @@
 ---
-/* Privacy-respecting Google Analytics 4.
+/* Consent-gated Google Analytics 4.
  *
  * The component is absent unless PUBLIC_GA_MEASUREMENT_ID is configured for a
- * production build. It denies analytics/ad storage before loading gtag, turns
- * off advertising signals, honors DNT and GPC before making a request, and
- * drops query strings from recorded locations. That keeps local builds and
- * forks silent and avoids asking for consent to store identifiers Fanout does
- * not need.
+ * production build, so local builds and forks stay silent.
+ *
+ * Nothing is loaded until the visitor is allowed to be measured. Earlier this
+ * file loaded gtag on every page and then held it in Consent Mode's denied
+ * state, which sent a cookieless ping for every view: no `_ga` cookie, no
+ * stable client id, so every pageview arrived as a new user and a new session.
+ * That is a report in which sessions, bounce rate and returning visitors are
+ * all meaningless, bought at the price of shipping Google's tag to everybody.
+ * The tag now does not exist until it may set the cookie that makes its numbers
+ * mean something.
+ *
+ * Whether consent must be asked for is a question about the reader's location,
+ * not about this site. The EEA, the UK and the Crown Dependencies require
+ * permission before the cookie is set; elsewhere measurement may run with a way
+ * to turn it off. Cloudflare already knows which one applies and says so at
+ * /cdn-cgi/trace, so most readers are measured properly and never see a banner,
+ * and the readers who are owed the question get it. A failed or unavailable
+ * lookup is treated as "ask" — the safe direction, and what local development
+ * gets, where the whole component is compiled out anyway.
+ *
+ * Do Not Track and Global Privacy Control are honoured above all of it. A
+ * reader who has already answered this question in their browser is not asked
+ * it again, and is not measured either way.
+ *
+ * The preference lives in localStorage rather than a cookie, so declining
+ * stores nothing that travels with a request, and is mirrored across tabs. The
+ * control that changes it later is on /privacy; consent that cannot be
+ * withdrawn as easily as it was given is not consent.
  */
 const measurementId = import.meta.env.PUBLIC_GA_MEASUREMENT_ID?.trim().toUpperCase();
 
@@ -25,92 +48,305 @@ const enabled = Boolean(measurementId) && import.meta.env.PROD;
   enabled && (
     <script is:inline define:vars={{ measurementId }}>
       (function () {
-        var signals = [navigator.doNotTrack, window.doNotTrack, navigator.msDoNotTrack];
-        for (var i = 0; i < signals.length; i++) {
-          if (signals[i] === "1" || signals[i] === "yes") return;
+        var STORAGE_KEY = "fanout.analytics-consent.v1";
+        var PREFERENCE_EVENT = "fanout:analytics-preference";
+
+        // The EEA, the UK and the Crown Dependencies: the places that require
+        // permission before a browser stores an analytics identifier. A country
+        // this list does not name gets measurement with an opt-out instead.
+        var PRIOR_CONSENT = [
+          "AT", "BE", "BG", "HR", "CY", "CZ", "DK", "EE", "FI", "FR", "DE",
+          "GR", "HU", "IE", "IT", "LV", "LT", "LU", "MT", "NL", "PL", "PT",
+          "RO", "SK", "SI", "ES", "SE", "IS", "LI", "NO",
+          "GB", "GG", "IM", "JE",
+        ];
+
+        var memoryPreference = null;
+        var started = false;
+        var listenersAttached = false;
+        var requirementPromise = null;
+
+        // A reader who has set either signal has answered this already.
+        function signalsRefusal() {
+          var flags = [navigator.doNotTrack, window.doNotTrack, navigator.msDoNotTrack];
+          for (var i = 0; i < flags.length; i++) {
+            if (flags[i] === "1" || flags[i] === "yes") return true;
+          }
+          return navigator.globalPrivacyControl === true;
         }
-        if (navigator.globalPrivacyControl === true) return;
 
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { window.dataLayer.push(arguments); }
-        window.gtag = gtag;
+        function readPreference() {
+          try {
+            var stored = window.localStorage.getItem(STORAGE_KEY);
+            return stored === "granted" || stored === "denied" ? stored : null;
+          } catch (_) {
+            // A locked-down browser throws on access rather than returning
+            // null. The in-memory answer still governs this page.
+            return memoryPreference;
+          }
+        }
 
-        gtag("consent", "default", {
-          analytics_storage: "denied",
-          ad_storage: "denied",
-          ad_user_data: "denied",
-          ad_personalization: "denied",
-        });
+        function writePreference(preference) {
+          memoryPreference = preference;
+          try {
+            window.localStorage.setItem(STORAGE_KEY, preference);
+          } catch (_) {
+            // Storage is unavailable; the choice holds for this page only,
+            // which is the direction that does not weaken the gate.
+          }
+          apply();
+          window.dispatchEvent(new Event(PREFERENCE_EVENT));
+        }
 
-        gtag("js", new Date());
-        gtag("config", measurementId, {
-          allow_google_signals: false,
-          allow_ad_personalization_signals: false,
-          page_location: window.location.origin + window.location.pathname,
-        });
+        function consentRequirementFor(country) {
+          if (!country || country === "XX" || country === "T1") return "required";
+          return PRIOR_CONSENT.indexOf(country) === -1 ? "not_required" : "required";
+        }
+
+        function consentRequirement() {
+          if (requirementPromise) return requirementPromise;
+          requirementPromise = window
+            .fetch("/cdn-cgi/trace", {
+              cache: "no-store",
+              credentials: "omit",
+              headers: { Accept: "text/plain" },
+            })
+            .then(function (response) {
+              if (!response.ok) throw new Error("trace " + response.status);
+              return response.text();
+            })
+            .then(function (trace) {
+              var match = trace.match(/^loc=([A-Z0-9]{2})$/m);
+              return consentRequirementFor(match ? match[1] : null);
+            })
+            .catch(function () {
+              return "required";
+            });
+          return requirementPromise;
+        }
+
+        function gtag() {
+          window.dataLayer.push(arguments);
+        }
+
+        function referrerOrigin() {
+          if (!document.referrer) return "";
+          try {
+            return new URL(document.referrer).origin;
+          } catch (_) {
+            return "";
+          }
+        }
+
+        function start() {
+          // Above the stored preference on purpose: a browser-level refusal is
+          // not overridden by a click on this site's own control.
+          if (started || signalsRefusal()) return;
+          started = true;
+
+          window.dataLayer = window.dataLayer || [];
+          window.gtag = gtag;
+          window["ga-disable-" + measurementId] = false;
+
+          gtag("consent", "default", {
+            analytics_storage: "denied",
+            ad_storage: "denied",
+            ad_user_data: "denied",
+            ad_personalization: "denied",
+          });
+          // The tag exists only on the path where measurement is allowed, so
+          // this is the state it is created in rather than a later upgrade.
+          gtag("consent", "update", { analytics_storage: "granted" });
+          gtag("set", "ads_data_redaction", true);
+          gtag("js", new Date());
+          gtag("config", measurementId, {
+            allow_google_signals: false,
+            allow_ad_personalization_signals: false,
+            cookie_flags: "SameSite=Lax;Secure",
+            // Query strings can carry whatever a referrer put there. The path
+            // is the whole of what this site wants to know, and the same is
+            // true of where the reader came from: the site is worth knowing,
+            // the search terms in the rest of the URL are not.
+            page_location: window.location.origin + window.location.pathname,
+            page_referrer: referrerOrigin(),
+          });
+
+          attachListeners();
+
+          var tag = document.createElement("script");
+          tag.async = true;
+          tag.src =
+            "https://www.googletagmanager.com/gtag/js?id=" + encodeURIComponent(measurementId);
+          document.head.appendChild(tag);
+        }
+
+        // Withdrawal has to actually remove what acceptance stored, or the
+        // control is a checkbox that lies. The disable flag stops a tag that is
+        // already on the page from sending anything further.
+        function stop() {
+          window["ga-disable-" + measurementId] = true;
+          if (window.gtag) {
+            window.gtag("consent", "update", {
+              analytics_storage: "denied",
+              ad_storage: "denied",
+              ad_user_data: "denied",
+              ad_personalization: "denied",
+            });
+          }
+          var names = ["_ga", "_ga_" + measurementId.replace(/^G-/, "")];
+          for (var i = 0; i < names.length; i++) {
+            document.cookie = names[i] + "=; Max-Age=0; Path=/; SameSite=Lax; Secure";
+            document.cookie =
+              names[i] +
+              "=; Max-Age=0; Path=/; Domain=." +
+              window.location.hostname +
+              "; SameSite=Lax; Secure";
+          }
+        }
+
+        function send(name, parameters) {
+          if (!started || window["ga-disable-" + measurementId]) return;
+          gtag("event", name, parameters);
+        }
+
+        function attachListeners() {
+          if (listenersAttached) return;
+          listenersAttached = true;
+
+          document.addEventListener("click", function (event) {
+            var target = event.target;
+            if (!(target instanceof Element)) return;
 
-        document.addEventListener("click", function (event) {
-          var target = event.target;
-          if (!(target instanceof Element)) return;
-
-          var link = target.closest("a");
-          if (!link) return;
-
-          var eventName = link.dataset.analyticsEvent;
-          var action = link.dataset.analyticsAction;
-          var location = link.dataset.analyticsLocation;
-
-          // The header's GitHub link is generated by Starlight and cannot carry
-          // the explicit attributes used by Fanout-owned links.
-          if (!eventName) {
-            try {
-              var url = new URL(link.href, window.location.href);
-              if (url.hostname === "github.com" && url.pathname === "/labstack/fanout") {
-                eventName = "outbound_click";
-                action = "fanout_github";
-                location = "site_header";
+            var link = target.closest("a");
+            if (!link) return;
+
+            var eventName = link.dataset.analyticsEvent;
+            var action = link.dataset.analyticsAction;
+            var location = link.dataset.analyticsLocation;
+
+            // The header's GitHub link is generated by Starlight and cannot
+            // carry the explicit attributes used by Fanout-owned links.
+            if (!eventName) {
+              try {
+                var url = new URL(link.href, window.location.href);
+                if (url.hostname === "github.com" && url.pathname === "/labstack/fanout") {
+                  eventName = "outbound_click";
+                  action = "fanout_github";
+                  location = "site_header";
+                }
+              } catch (_) {
+                return;
               }
-            } catch (_) {
-              return;
             }
-          }
 
-          if (!eventName) return;
-          gtag("event", eventName, {
-            action: action || "unknown",
-            location: location || "unknown",
-            link_text: (link.textContent || link.getAttribute("aria-label") || "").trim(),
-            link_url: link.href,
+            if (!eventName) return;
+            send(eventName, {
+              action: action || "unknown",
+              location: location || "unknown",
+              link_text: (link.textContent || link.getAttribute("aria-label") || "").trim(),
+              link_url: link.href,
+            });
           });
-        });
 
-        document.addEventListener("copy", function () {
-          var selection = window.getSelection();
-          var node = selection && selection.anchorNode;
-          var element = node && (node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement);
-          var source = element && element.closest("[data-analytics-copy]");
-          if (!source) return;
+          document.addEventListener("copy", function () {
+            var selection = window.getSelection();
+            var node = selection && selection.anchorNode;
+            var element =
+              node && (node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement);
+            var source = element && element.closest("[data-analytics-copy]");
+            if (!source) return;
 
-          gtag("event", "copy_command", {
-            action: source.dataset.analyticsCopy,
-            location: "closing_cta",
+            send("copy_command", {
+              action: source.dataset.analyticsCopy,
+              location: "closing_cta",
+            });
           });
-        });
 
-        // The copy button writes through the Clipboard API, which raises no
-        // copy event. It announces itself instead, so both paths are counted
-        // the same way.
-        document.addEventListener("fanout:copy", function (event) {
-          gtag("event", "copy_command", {
-            action: event.detail || "unknown",
-            location: "closing_cta",
+          // The copy button writes through the Clipboard API, which raises no
+          // copy event. It announces itself instead, so both paths are counted
+          // the same way.
+          document.addEventListener("fanout:copy", function (event) {
+            send("copy_command", { action: event.detail || "unknown", location: "closing_cta" });
           });
-        });
+        }
+
+        function mayRun(requirement, preference) {
+          if (preference === "granted") return true;
+          return requirement === "not_required" && preference !== "denied";
+        }
+
+        function banner() {
+          return document.getElementById("fo-analytics-consent");
+        }
 
-        var tag = document.createElement("script");
-        tag.async = true;
-        tag.src = "https://www.googletagmanager.com/gtag/js?id=" + encodeURIComponent(measurementId);
-        document.head.appendChild(tag);
+        function apply() {
+          var preference = readPreference();
+          if (preference === "denied") {
+            stop();
+            var element = banner();
+            if (element) element.hidden = true;
+            return;
+          }
+          if (preference === "granted") {
+            start();
+            var accepted = banner();
+            if (accepted) accepted.hidden = true;
+            return;
+          }
+          consentRequirement().then(function (requirement) {
+            if (readPreference() !== null) return;
+            if (mayRun(requirement, null)) {
+              start();
+              return;
+            }
+            var prompt = banner();
+            if (prompt) prompt.hidden = false;
+          });
+        }
+
+        // The privacy page's control and the banner both drive the same state.
+        window.fanoutAnalytics = {
+          preference: readPreference,
+          setPreference: writePreference,
+          requirement: consentRequirement,
+          refused: signalsRefusal,
+          subscribe: function (onChange) {
+            window.addEventListener(PREFERENCE_EVENT, onChange);
+            window.addEventListener("storage", function (event) {
+              if (event.key === STORAGE_KEY) onChange();
+            });
+          },
+        };
+
+        function ready(run) {
+          if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", run, { once: true });
+          } else {
+            run();
+          }
+        }
+
+        if (signalsRefusal()) {
+          // Neither measured nor asked. The banner stays in the document,
+          // hidden, so nothing depends on it having rendered.
+          ready(function () {
+            var element = banner();
+            if (element) element.hidden = true;
+          });
+          return;
+        }
+
+        ready(function () {
+          var element = banner();
+          if (element) {
+            element.addEventListener("click", function (event) {
+              var button = event.target instanceof Element && event.target.closest("button");
+              if (!button || !button.dataset.consent) return;
+              writePreference(button.dataset.consent);
+            });
+          }
+          apply();
+        });
       })();
     </script>
   )
diff --git a/site/src/components/AnalyticsConsent.astro b/site/src/components/AnalyticsConsent.astro
new file mode 100644
index 00000000..83798eed
--- /dev/null
+++ b/site/src/components/AnalyticsConsent.astro
@@ -0,0 +1,142 @@
+---
+/* The consent prompt, for readers whose location requires one.
+ *
+ * Markup only. Analytics.astro decides whether this is ever shown and handles
+ * the clicks: the question of whether to ask is answered in the head, before
+ * anything renders, and putting the logic in two places is how the banner ends
+ * up shown to someone who already declined.
+ *
+ * It renders on every page rather than only where the site footer does, because
+ * a reader who arrives from a search result lands on a documentation page, and
+ * a consent prompt that only appears on the landing page asks the question of
+ * the wrong half of the audience.
+ *
+ * `hidden` in the source, not `display: none` in a stylesheet: the prompt is
+ * absent for the reader whose location does not require it and for the reader
+ * who has already answered, and neither should see it flash while a stylesheet
+ * loads. A build without a measurement id never renders it at all.
+ */
+const enabled =
+  Boolean(import.meta.env.PUBLIC_GA_MEASUREMENT_ID?.trim()) && import.meta.env.PROD;
+---
+
+{
+  enabled && (
+    <section
+      id="fo-analytics-consent"
+      class="fo-consent"
+      role="region"
+      aria-labelledby="fo-consent-title"
+      hidden
+    >
+      <div class="fo-consent-body">
+        <p id="fo-consent-title" class="fo-consent-title">Analytics on this site</p>
+        <p class="fo-consent-copy">
+          Fanout would like to count visits and which pages get read, using Google Analytics.
+          Nothing you send to your own Fanout instance is involved. <a href="/privacy">
+            What is collected
+          </a>.
+        </p>
+      </div>
+      <div class="fo-consent-actions">
+        <button type="button" class="fo-consent-button" data-consent="denied">
+          Do not allow
+        </button>
+        <button
+          type="button"
+          class="fo-consent-button fo-consent-button-primary"
+          data-consent="granted"
+        >
+          Allow
+        </button>
+      </div>
+    </section>
+  )
+}
+
+<style>
+  .fo-consent {
+    position: fixed;
+    z-index: calc(var(--sl-z-index-navbar) + 1);
+    inset-block-end: max(1rem, env(safe-area-inset-bottom));
+    inset-inline: 1rem;
+    margin-inline: auto;
+    max-width: 34rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem 1.5rem;
+    padding: 1rem 1.15rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.6rem;
+    background: var(--sl-color-black);
+    box-shadow: 0 1rem 2.5rem -0.75rem rgb(0 0 0 / 0.5);
+  }
+
+  .fo-consent-title {
+    margin: 0 0 0.2rem;
+    font-size: var(--sl-text-sm);
+    font-weight: 600;
+    color: var(--sl-color-white);
+  }
+
+  .fo-consent-copy {
+    margin: 0;
+    font-size: var(--sl-text-xs);
+    line-height: 1.6;
+    color: var(--sl-color-gray-3);
+  }
+
+  .fo-consent-body {
+    flex: 1 1 16rem;
+  }
+
+  .fo-consent-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .fo-consent-button {
+    padding: 0.4rem 0.85rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.35rem;
+    background: transparent;
+    color: var(--sl-color-gray-2);
+    font: inherit;
+    font-size: var(--sl-text-xs);
+    cursor: pointer;
+  }
+
+  .fo-consent-button:hover {
+    border-color: var(--sl-color-gray-4);
+    color: var(--sl-color-white);
+  }
+
+  .fo-consent-button-primary {
+    border-color: var(--sl-color-accent);
+    background: var(--sl-color-accent);
+    color: var(--sl-color-white);
+  }
+
+  .fo-consent-button-primary:hover {
+    border-color: var(--sl-color-accent-high);
+    background: var(--sl-color-accent-high);
+  }
+
+  .fo-consent-button:focus-visible {
+    outline: 2px solid var(--sl-color-accent-high);
+    outline-offset: 2px;
+  }
+
+  /* Stacked, the buttons want the full width rather than the right edge. */
+  @media (max-width: 30rem) {
+    .fo-consent-actions {
+      flex: 1 1 100%;
+    }
+
+    .fo-consent-button {
+      flex: 1;
+    }
+  }
+</style>
diff --git a/site/src/components/AnalyticsPreference.astro b/site/src/components/AnalyticsPreference.astro
new file mode 100644
index 00000000..efed9e77
--- /dev/null
+++ b/site/src/components/AnalyticsPreference.astro
@@ -0,0 +1,153 @@
+---
+/* The standing analytics control, for the privacy page.
+ *
+ * The banner asks once. This is where the answer is changed afterwards, which
+ * is the half of consent that is easy to leave out: permission that cannot be
+ * withdrawn as readily as it was given was never permission.
+ *
+ * It states the current situation before offering the buttons, because "allowed
+ * or not" is the question a reader arrives with, and in the regions that do not
+ * require a prompt the honest answer is that measurement is already running.
+ *
+ * The status line is scripted rather than rendered, since the answer lives in
+ * the reader's browser and this site is static: every reader would otherwise be
+ * served the same cached sentence about a choice that is theirs alone.
+ */
+const enabled =
+  Boolean(import.meta.env.PUBLIC_GA_MEASUREMENT_ID?.trim()) && import.meta.env.PROD;
+---
+
+{
+  enabled ? (
+    <div id="fo-analytics-preference" class="fo-preference">
+      <p class="fo-preference-status" aria-live="polite">
+        Checking whether analytics are running in this browser.
+      </p>
+      <div class="fo-preference-actions">
+        <button type="button" class="fo-preference-button" data-consent="denied">
+          Do not allow
+        </button>
+        <button type="button" class="fo-preference-button" data-consent="granted">
+          Allow
+        </button>
+      </div>
+    </div>
+  ) : (
+    <p class="fo-preference-status">
+      This build of the site has no analytics configured, so nothing is measured and there is
+      nothing to turn off.
+    </p>
+  )
+}
+
+<script is:inline>
+  (function () {
+    var root = document.getElementById("fo-analytics-preference");
+    var api = window.fanoutAnalytics;
+    if (!root || !api) return;
+
+    var status = root.querySelector(".fo-preference-status");
+    var buttons = root.querySelectorAll("[data-consent]");
+
+    function render() {
+      var preference = api.preference();
+
+      if (api.refused()) {
+        status.textContent =
+          "Your browser sends a Do Not Track or Global Privacy Control signal, so " +
+          "analytics do not run here whatever this control says.";
+        for (var i = 0; i < buttons.length; i++) buttons[i].disabled = true;
+        return;
+      }
+
+      for (var j = 0; j < buttons.length; j++) {
+        buttons[j].disabled = false;
+        buttons[j].setAttribute(
+          "aria-pressed",
+          String(buttons[j].dataset.consent === preference),
+        );
+      }
+
+      if (preference === "granted") {
+        status.textContent = "Analytics are allowed in this browser.";
+        return;
+      }
+      if (preference === "denied") {
+        status.textContent = "Analytics are not allowed in this browser.";
+        return;
+      }
+
+      api.requirement().then(function (requirement) {
+        if (api.preference() !== null) return;
+        status.textContent =
+          requirement === "not_required"
+            ? "Analytics are running in this browser. You can turn them off here."
+            : "You have not yet answered the analytics question in this browser.";
+      });
+    }
+
+    root.addEventListener("click", function (event) {
+      var button = event.target instanceof Element && event.target.closest("[data-consent]");
+      if (!button) return;
+      api.setPreference(button.dataset.consent);
+    });
+
+    api.subscribe(render);
+    render();
+  })();
+</script>
+
+<style>
+  .fo-preference {
+    margin-block: 1rem;
+    padding: 1rem 1.15rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.6rem;
+    background: var(--sl-color-black);
+  }
+
+  .fo-preference-status {
+    margin: 0;
+    font-size: var(--sl-text-sm);
+    line-height: 1.6;
+    color: var(--sl-color-gray-2);
+  }
+
+  .fo-preference-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-block-start: 0.85rem;
+  }
+
+  .fo-preference-button {
+    padding: 0.4rem 0.85rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.35rem;
+    background: transparent;
+    color: var(--sl-color-gray-2);
+    font: inherit;
+    font-size: var(--sl-text-xs);
+    cursor: pointer;
+  }
+
+  .fo-preference-button:hover:not(:disabled) {
+    border-color: var(--sl-color-gray-4);
+    color: var(--sl-color-white);
+  }
+
+  .fo-preference-button[aria-pressed="true"] {
+    border-color: var(--sl-color-accent);
+    background: var(--sl-color-accent);
+    color: var(--sl-color-white);
+  }
+
+  .fo-preference-button:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .fo-preference-button:focus-visible {
+    outline: 2px solid var(--sl-color-accent-high);
+    outline-offset: 2px;
+  }
+</style>
diff --git a/site/src/components/PageFrame.astro b/site/src/components/PageFrame.astro
index 255b3110..86a2c566 100644
--- a/site/src/components/PageFrame.astro
+++ b/site/src/components/PageFrame.astro
@@ -24,6 +24,7 @@
  */
 import MobileMenuToggle from "@astrojs/starlight/components/MobileMenuToggle.astro";
 import SiteFooter from "./SiteFooter.astro";
+import AnalyticsConsent from "./AnalyticsConsent.astro";
 
 const { hasSidebar } = Astro.locals.starlightRoute;
 const isSplash = Astro.locals.starlightRoute.entry.data.template === "splash";
@@ -45,6 +46,7 @@ const isSplash = Astro.locals.starlightRoute.entry.data.template === "splash";
   }
   <div class="main-frame"><slot /></div>
   {isSplash && <SiteFooter />}
+  <AnalyticsConsent />
 </div>
 
 <style>
diff --git a/site/src/components/SiteFooter.astro b/site/src/components/SiteFooter.astro
index d30b33e6..6bb67d24 100644
--- a/site/src/components/SiteFooter.astro
+++ b/site/src/components/SiteFooter.astro
@@ -11,16 +11,20 @@
  * chrome. PageFrame renders it only on splash pages; putting it in page source
  * would leak it into the Markdown alternate.
  *
- * It holds two things: who owns this and under what licence, and where the
- * organisation is. Nothing else, on purpose. Documentation pages already have
- * sidebar navigation, page metadata and previous/next links, so this band would
- * only restate their chrome. Security, the trademark policy, contributing and
- * llms.txt are all real and all deliberately absent: a reader who wants them
- * reaches them from the repository or from the head of the page, and four more
- * links here would turn the band into a link farm nobody arrived looking for.
+ * It holds three things: who owns this and under what licence, where the
+ * organisation is, and how to change the analytics answer. Nothing else, on
+ * purpose. Documentation pages already have sidebar navigation, page metadata
+ * and previous/next links, so this band would only restate their chrome.
+ * Security, the trademark policy, contributing and llms.txt are all real and
+ * all deliberately absent: a reader who wants them reaches them from the
+ * repository or from the head of the page, and four more links here would turn
+ * the band into a link farm nobody arrived looking for.
  *
  * The bar for adding anything: it is something a stranger needs, the sidebar
- * cannot hold it, and they would not otherwise find it.
+ * cannot hold it, and they would not otherwise find it. Privacy clears it on
+ * all three counts — a reader who allowed analytics and wants to take that back
+ * has nowhere else to go, and the page is deliberately not in the sidebar,
+ * which is for documentation rather than for the site's own terms.
  */
 import { Icon } from "@astrojs/starlight/components";
 
@@ -33,6 +37,8 @@ const year = new Date().getFullYear();
       <span>&copy; {year} <a href="/">Fanout</a> by <a href="https://labstack.com">LabStack LLC</a></span>
       <span class="sep" aria-hidden="true">·</span>
       <span><a href="https://github.com/labstack/fanout/blob/main/LICENSE">Apache-2.0</a></span>
+      <span class="sep" aria-hidden="true">·</span>
+      <span><a href="/privacy">Privacy</a></span>
     </p>
     <nav class="fo-sitefooter-links" aria-label="LabStack">
       <a
diff --git a/site/src/content/docs/privacy.mdx b/site/src/content/docs/privacy.mdx
new file mode 100644
index 00000000..8fee9e8a
--- /dev/null
+++ b/site/src/content/docs/privacy.mdx
@@ -0,0 +1,95 @@
+---
+title: Privacy
+description: What fanout.run measures, what it never collects, and how to turn analytics off.
+summary: The website's own privacy terms and the control that turns its analytics on or off. Not about a Fanout instance you run, which sends nothing anywhere.
+read_when:
+  - You want to know what this website records about your visit.
+  - You allowed or declined analytics and want to change that answer.
+status: shipped
+---
+
+import AnalyticsPreference from "../../components/AnalyticsPreference.astro";
+
+This page is about **this website**, `fanout.run`. It is not about the Fanout
+you run: a Fanout instance keeps its telemetry in its own storage on its own
+machine and reports nothing to us. There is no phone-home, no licence check and
+no usage beacon in the binary. Nothing on this page changes that, because
+nothing on this page is in it.
+
+## Website analytics
+
+The site uses Google Analytics 4 to count visits and see which pages get read.
+It runs only when it is allowed to, and it is configured to learn as little as
+will still answer that question.
+
+<AnalyticsPreference />
+
+### When it runs
+
+- **In the EEA, the UK, Guernsey, the Isle of Man and Jersey**, nothing is
+  loaded and no identifier is stored until you say yes. The prompt is the only
+  thing that appears before you answer.
+- **Everywhere else**, analytics run and the control above turns them off.
+- **If your browser sends Do Not Track or Global Privacy Control**, analytics
+  never run and you are never asked. That signal wins over everything else on
+  this page, including the buttons above.
+
+Which of these applies is decided from the country Cloudflare reports for your
+connection. If that lookup fails, the site asks rather than assumes.
+
+### What is sent
+
+When analytics are running, each page view sends the page path, the page title,
+the site you arrived from, and the coarse device, browser and country
+information any web request carries.
+
+Two things are cut down before they leave the browser:
+
+- **Query strings are removed** from the recorded address. Only the path is
+  sent, so anything a link put after the `?` is not.
+- **The referrer is reduced to its site.** We record that you came from a search
+  engine, not what you searched for.
+
+Some clicks and copies are counted as events: following an outbound link from
+the footer or the landing page, and copying the install command. These record
+which control was used, not what you typed.
+
+Google's advertising features are switched off — no Google Signals, no ad
+personalisation, and ad data redaction is on — so the data is not used to build
+an advertising profile of you.
+
+### What is never sent
+
+Nothing you enter anywhere is collected, because this site has no forms, no
+accounts, no search box that reports what you typed, and no session recording or
+heatmaps. It does not attempt to identify you. And, to say it once more: no data
+from any Fanout instance passes through this site.
+
+### Storage
+
+Declining stores nothing that travels with a request. Your answer is kept in
+your browser's local storage under `fanout.analytics-consent.v1`, which is read
+by this site and sent to nobody.
+
+Allowing lets Google Analytics set its `_ga` cookies, which hold a random
+identifier so repeat visits can be recognised as the same browser. Declining
+afterwards deletes them.
+
+Clearing your browser storage for this site clears the answer too, and the
+question comes back if your location requires it.
+
+## Hosting
+
+The site is static files served by Cloudflare Pages. Like any web server,
+Cloudflare receives the IP address and request headers needed to deliver a page,
+and is the reason this site knows which country to apply the rules above to.
+That processing is Cloudflare's, under their terms, and happens whether or not
+you allow analytics.
+
+## Contact
+
+Questions about this page belong in
+[an issue](https://github.com/labstack/fanout/issues). The site's source,
+including the analytics code described here, is in
+[the repository](https://github.com/labstack/fanout/tree/main/site) — this page
+describes what that code does, and the code is the thing you can check.
diff --git a/site/src/pages/llms-full.txt.ts b/site/src/pages/llms-full.txt.ts
index d6590d33..c28dda45 100644
--- a/site/src/pages/llms-full.txt.ts
+++ b/site/src/pages/llms-full.txt.ts
@@ -11,7 +11,7 @@ import { toPlainMarkdown } from "../lib/markdown";
 // listed explicitly — otherwise it is dropped from a document headed "complete
 // documentation".
 const ROOT = "index";
-const ORDER = [ROOT, "start", "guides", "reference", "explanation", "status"];
+const ORDER = [ROOT, "start", "guides", "reference", "explanation", "status", "privacy"];
 
 export const GET: APIRoute = async () => {
   const docs = await getCollection("docs");
diff --git a/site/src/pages/llms.txt.ts b/site/src/pages/llms.txt.ts
index 5da3603f..4e998657 100644
--- a/site/src/pages/llms.txt.ts
+++ b/site/src/pages/llms.txt.ts
@@ -13,7 +13,7 @@ import { getCollection } from "astro:content";
 // it "index", which a list of directory names does not contain, so without it
 // the page would be dropped from an index whose own heading promises every one.
 const ROOT = "index";
-const ORDER = [ROOT, "start", "guides", "reference", "explanation", "status"];
+const ORDER = [ROOT, "start", "guides", "reference", "explanation", "status", "privacy"];
 
 const GROUP_TITLES: Record<string, string> = {
   [ROOT]: "Overview",
@@ -22,6 +22,7 @@ const GROUP_TITLES: Record<string, string> = {
   reference: "Reference",
   explanation: "Explanation",
   status: "Status",
+  privacy: "Site terms",
 };
 
 // Keyed by the status union rather than by string, so adding a fourth status is

From 52455ac8c479c494e4574ffc16b0813190c19e64 Mon Sep 17 00:00:00 2001
From: Vishal Rana <v@labstack.com>
Date: Fri, 4 Sep 2026 15:32:25 -0700
Subject: [PATCH 2/6] fix(site): let allowing after declining work without a
 reload
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`start()` returned early whenever `started` was true, which was also the
state left behind after `stop()`. So the pair of buttons was one-way for
the life of the page: declining set the `ga-disable-` flag and pushed
consent back to denied, and allowing again cleared neither, because the
one function that clears them had already decided it had nothing to do.

The early return was guarding two different things — configuring the tag
twice, which must not happen, and re-enabling measurement, which must.
Clearing the disable flag now happens before the guard, and a tag that is
already loaded takes a branch that re-grants consent, which is what the
port dropped: the component this was ported from has the same branch.

Claude-Session: https://claude.ai/code/session_0188fRgp2DyMXzUcJgdMZSyu
---
 site/src/components/Analytics.astro | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Analytics.astro b/site/src/components/Analytics.astro
index 227dfbea..f59633ba 100644
--- a/site/src/components/Analytics.astro
+++ b/site/src/components/Analytics.astro
@@ -141,12 +141,23 @@ const enabled = Boolean(measurementId) && import.meta.env.PROD;
         function start() {
           // Above the stored preference on purpose: a browser-level refusal is
           // not overridden by a click on this site's own control.
-          if (started || signalsRefusal()) return;
+          if (signalsRefusal()) return;
+
+          window["ga-disable-" + measurementId] = false;
+
+          // Allowing after declining, without leaving the page. The tag is
+          // already loaded and must not be configured twice, but the state
+          // stop() left behind is exactly what has to be undone: clearing the
+          // disable flag above and re-granting here. Returning early on
+          // `started` alone made the pair of buttons one-way until a reload.
+          if (started) {
+            gtag("consent", "update", { analytics_storage: "granted" });
+            return;
+          }
           started = true;
 
           window.dataLayer = window.dataLayer || [];
           window.gtag = gtag;
-          window["ga-disable-" + measurementId] = false;
 
           gtag("consent", "default", {
             analytics_storage: "denied",

From b0a47e95e741e2451dd95f85aa84f17d3b0b0259 Mon Sep 17 00:00:00 2001
From: Vishal Rana <v@labstack.com>
Date: Fri, 4 Sep 2026 15:35:36 -0700
Subject: [PATCH 3/6] fix(site): label the primary consent button in the
 contrasting token
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`--sl-color-white` names a role rather than a colour: under the light
theme it resolves to near-black, because it is the token that contrasts
with the page. Setting it as the label on an accent fill therefore drew
dark text on mid-blue in daylight, and only looked right in the dark.

Both buttons now use the shape the landing page's primary action already
uses — the contrasting token as the fill, the page token as the label —
which inverts correctly in both themes and gives consent the same visual
weight as the other primary action on the site.

Claude-Session: https://claude.ai/code/session_0188fRgp2DyMXzUcJgdMZSyu
---
 site/src/components/AnalyticsConsent.astro    | 16 +++++++++++-----
 site/src/components/AnalyticsPreference.astro |  9 ++++++---
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/site/src/components/AnalyticsConsent.astro b/site/src/components/AnalyticsConsent.astro
index 83798eed..0164ba40 100644
--- a/site/src/components/AnalyticsConsent.astro
+++ b/site/src/components/AnalyticsConsent.astro
@@ -113,15 +113,21 @@ const enabled =
     color: var(--sl-color-white);
   }
 
+  /* The landing page's primary action, in miniature: a solid fill of the
+     token that contrasts with the page, labelled in the token that contrasts
+     with the fill. `--sl-color-white` is a role rather than a colour — it is
+     near-black under the light theme — so a label set in it on an accent fill
+     is dark-on-blue in daylight. The pair below inverts correctly in both. */
   .fo-consent-button-primary {
-    border-color: var(--sl-color-accent);
-    background: var(--sl-color-accent);
-    color: var(--sl-color-white);
+    border-color: var(--sl-color-white);
+    background: var(--sl-color-white);
+    color: var(--sl-color-black);
   }
 
   .fo-consent-button-primary:hover {
-    border-color: var(--sl-color-accent-high);
-    background: var(--sl-color-accent-high);
+    border-color: var(--sl-color-gray-1);
+    background: var(--sl-color-gray-1);
+    color: var(--sl-color-black);
   }
 
   .fo-consent-button:focus-visible {
diff --git a/site/src/components/AnalyticsPreference.astro b/site/src/components/AnalyticsPreference.astro
index efed9e77..ee554a8f 100644
--- a/site/src/components/AnalyticsPreference.astro
+++ b/site/src/components/AnalyticsPreference.astro
@@ -135,10 +135,13 @@ const enabled =
     color: var(--sl-color-white);
   }
 
+  /* Same inversion as the banner's primary action: `--sl-color-white` is the
+     token that contrasts with the page, so it is the fill here and never the
+     label on top of it. */
   .fo-preference-button[aria-pressed="true"] {
-    border-color: var(--sl-color-accent);
-    background: var(--sl-color-accent);
-    color: var(--sl-color-white);
+    border-color: var(--sl-color-white);
+    background: var(--sl-color-white);
+    color: var(--sl-color-black);
   }
 
   .fo-preference-button:disabled {

From baaf27a7d470541c910494bc75dd0bbfdb65da2e Mon Sep 17 00:00:00 2001
From: Vishal Rana <v@labstack.com>
Date: Fri, 4 Sep 2026 15:44:27 -0700
Subject: [PATCH 4/6] fix(site): stop the privacy page claiming analytics a
 build may not have
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The page opened by stating that the site uses Google Analytics, and then
rendered a control that, in a build with no measurement id, says nothing
is measured and there is nothing to turn off. Both sentences shipped
together, so the page contradicted itself for anyone building the site
without analytics configured — a fork, or a local preview.

The claim now belongs to the component that already knows the answer,
beside the control it describes. A build with analytics states what it
does; a build without one says so and frames the rest of the section as
describing the other case. Neither can drift from the other, because they
are the two halves of one branch.

Claude-Session: https://claude.ai/code/session_0188fRgp2DyMXzUcJgdMZSyu
---
 site/src/components/AnalyticsPreference.astro | 36 +++++++++++--------
 site/src/content/docs/privacy.mdx             |  4 ---
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/site/src/components/AnalyticsPreference.astro b/site/src/components/AnalyticsPreference.astro
index ee554a8f..659a07c6 100644
--- a/site/src/components/AnalyticsPreference.astro
+++ b/site/src/components/AnalyticsPreference.astro
@@ -19,23 +19,31 @@ const enabled =
 
 {
   enabled ? (
-    <div id="fo-analytics-preference" class="fo-preference">
-      <p class="fo-preference-status" aria-live="polite">
-        Checking whether analytics are running in this browser.
+    <>
+      <p>
+        The site uses Google Analytics 4 to count visits and see which pages get read. It runs
+        only when it is allowed to, and it is configured to learn as little as will still
+        answer that question.
       </p>
-      <div class="fo-preference-actions">
-        <button type="button" class="fo-preference-button" data-consent="denied">
-          Do not allow
-        </button>
-        <button type="button" class="fo-preference-button" data-consent="granted">
-          Allow
-        </button>
+      <div id="fo-analytics-preference" class="fo-preference">
+        <p class="fo-preference-status" aria-live="polite">
+          Checking whether analytics are running in this browser.
+        </p>
+        <div class="fo-preference-actions">
+          <button type="button" class="fo-preference-button" data-consent="denied">
+            Do not allow
+          </button>
+          <button type="button" class="fo-preference-button" data-consent="granted">
+            Allow
+          </button>
+        </div>
       </div>
-    </div>
+    </>
   ) : (
-    <p class="fo-preference-status">
-      This build of the site has no analytics configured, so nothing is measured and there is
-      nothing to turn off.
+    <p>
+      This build of the site has no analytics configured, so nothing is measured, nothing is
+      stored, and there is nothing to turn off. The rest of this section describes what a build
+      that has them does.
     </p>
   )
 }
diff --git a/site/src/content/docs/privacy.mdx b/site/src/content/docs/privacy.mdx
index 8fee9e8a..059b0af1 100644
--- a/site/src/content/docs/privacy.mdx
+++ b/site/src/content/docs/privacy.mdx
@@ -18,10 +18,6 @@ nothing on this page is in it.
 
 ## Website analytics
 
-The site uses Google Analytics 4 to count visits and see which pages get read.
-It runs only when it is allowed to, and it is configured to learn as little as
-will still answer that question.
-
 <AnalyticsPreference />
 
 ### When it runs

From 03443b046348317564b9921f52c17359b62f33f5 Mon Sep 17 00:00:00 2001
From: Vishal Rana <v@labstack.com>
Date: Fri, 4 Sep 2026 15:53:44 -0700
Subject: [PATCH 5/6] fix(site): state the referrer policy on the injected
 analytics tag

The file promises that query strings do not leave the browser, and then
loaded gtag from a script element whose referrer behaviour was whatever
the reader's browser defaulted to. Every current browser defaults to
strict-origin-when-cross-origin and so already sends only the origin, but
a promise that holds because of someone else's default is not the same as
one the code makes.

Claude-Session: https://claude.ai/code/session_0188fRgp2DyMXzUcJgdMZSyu
---
 site/src/components/Analytics.astro | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/site/src/components/Analytics.astro b/site/src/components/Analytics.astro
index f59633ba..58038bb0 100644
--- a/site/src/components/Analytics.astro
+++ b/site/src/components/Analytics.astro
@@ -186,6 +186,12 @@ const enabled = Boolean(measurementId) && import.meta.env.PROD;
 
           var tag = document.createElement("script");
           tag.async = true;
+          // Every current browser defaults to strict-origin-when-cross-origin,
+          // which already keeps the path and query out of the `Referer` on this
+          // request. Stating it means the guarantee this file makes about query
+          // strings is the file's own rather than one inherited from whatever
+          // default the reader's browser happens to ship.
+          tag.referrerPolicy = "strict-origin";
           tag.src =
             "https://www.googletagmanager.com/gtag/js?id=" + encodeURIComponent(measurementId);
           document.head.appendChild(tag);

From 3b86e810ec5329eb6aeaa88e8287d1be776d53ef Mon Sep 17 00:00:00 2001
From: Vishal Rana <v@labstack.com>
Date: Fri, 4 Sep 2026 16:03:34 -0700
Subject: [PATCH 6/6] fix(site): give documentation pages a route to the
 analytics control
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Outside the regions that require a consent prompt no banner is ever
shown, which makes the control on /privacy the only way to turn analytics
off. The two links to that page were the banner, which those readers
never see, and SiteFooter, which renders on splash pages alone. A reader
who arrives from a search result lands on a documentation page and had no
route to the control at all — the opt-out existed and was unreachable
from where most readers actually are.

One text link in the row that already ends a documentation page, beside
the edit link and the date. Not the whole footer band: the objection to
that here was duplicated navigation and social icons landing under the
fixed right sidebar, and neither applies to a single word.

Claude-Session: https://claude.ai/code/session_0188fRgp2DyMXzUcJgdMZSyu
---
 site/src/components/Footer.astro | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/site/src/components/Footer.astro b/site/src/components/Footer.astro
index bcf629d8..8e2cd3dd 100644
--- a/site/src/components/Footer.astro
+++ b/site/src/components/Footer.astro
@@ -40,6 +40,16 @@ import Pagination from "@astrojs/starlight/components/Pagination.astro";
  * The copyright is no longer part of this component. It is chrome, not the end
  * of an article, so it lives in SiteFooter.astro, which PageFrame puts below
  * the content column entirely.
+ *
+ * Privacy is the exception to that split, and it earns it. Outside the regions
+ * that require a consent prompt no banner is ever shown, so the control on
+ * /privacy is the only way to turn analytics off — and SiteFooter, which
+ * carries the other link to it, renders on splash pages alone. A reader who
+ * arrives from a search result lands here, on a documentation page, and would
+ * have had no route to the control at all. One text link, not the whole band:
+ * the objection to a second footer here was duplicated navigation and social
+ * icons colliding with the fixed right sidebar, and a single word in the row
+ * that already exists is neither.
  */
 const isSplash = Astro.locals.starlightRoute.entry.data.template === "splash";
 ---
@@ -50,6 +60,7 @@ const isSplash = Astro.locals.starlightRoute.entry.data.template === "splash";
       <div class="meta sl-flex">
         <EditLink />
         <LastUpdated />
+        <a href="/privacy">Privacy</a>
       </div>
     )
   }
@@ -75,4 +86,14 @@ const isSplash = Astro.locals.starlightRoute.entry.data.template === "splash";
     margin-inline-start: auto;
   }
 
+  .meta a {
+    color: var(--sl-color-gray-3);
+    text-decoration: none;
+  }
+
+  .meta a:hover {
+    color: var(--sl-color-white);
+    text-decoration: underline;
+  }
+
 </style>