Add checks deep-dive section with dangling-records case study

Introduce a new #checks section presenting domain, zone and service
checkers in three columns linking to the documentation, plus a
dangling-records case study spotlight. Rework discover copy toward
peace-of-mind framing and adjust section backgrounds and CTA layout.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

i18n/en.yaml

@@ -61,10 +61,12 @@
 - id: features-grid-footer
   translation: And we have many other features in preparation...
 
-- id: discover-title
+- id: discover-eyebrow
   translation: "How it works"
+- id: discover-title
+  translation: "Three steps, zero commitment"
 - id: discover-lead
-  translation: "A simple approach to efficient domain management."
+  translation: "Connect a domain and happyDomain starts watching over it. No migration, no configuration, and nothing changes on your side."
 
 - id: features-wip-lead
   translation: "happyDomain is functional but still very much a work in progress: it's a carefully crafted proof of concept that evolves thanks to your feedbacks!"
@@ -85,18 +87,115 @@
 - id: features-wip-p2-end
   translation: "."
 
+- id: discover-1-tag
+  translation: "Connect"
+- id: discover-2-tag
+  translation: "Monitor"
+- id: discover-3-tag
+  translation: "Relax"
+
+- id: checks-eyebrow
+  translation: "Monitoring"
+- id: checks-title
+  translation: "Deep checks on everything your domain exposes"
+- id: checks-lead
+  translation: "The moment a domain joins happyDomain, our checkers start inspecting it from the outside, exactly as the rest of the world sees it. From the registration down to each live service, every layer is covered."
+- id: checks-domain-tag
+  translation: "Domain"
+- id: checks-domain-title
+  translation: "Your registration"
+- id: checks-domain-text
+  translation: "Expiration date, transfer lock, registrar status: the administrative side of your domain, watched continuously."
+- id: checks-zone-tag
+  translation: "Zone"
+- id: checks-zone-title
+  translation: "Your DNS zone"
+- id: checks-zone-text
+  translation: "DNSSEC validity, delegation consistency, server response: the technical foundation, verified end to end."
+- id: checks-services-tag
+  translation: "Services"
+- id: checks-services-title
+  translation: "Your live services"
+- id: checks-services-text
+  translation: "Websites, certificates, mail: every service your domain points to, probed like a real visitor would."
+- id: checks-item-expiration
+  translation: "Expiration"
+- id: checks-item-expiration-detail
+  translation: "in 23 days"
+- id: checks-item-transferlock
+  translation: "Transfer lock"
+- id: checks-item-registration
+  translation: "Registration status"
+- id: checks-item-dnssec
+  translation: "DNSSEC chain"
+- id: checks-item-delegation
+  translation: "Delegation"
+- id: checks-item-responsetime
+  translation: "Response time"
+- id: checks-item-tls
+  translation: "TLS certificate"
+- id: checks-item-http
+  translation: "HTTP availability"
+- id: checks-item-ping
+  translation: "Ping"
+- id: checks-dangling-tag
+  translation: "Case study"
+- id: checks-dangling-title
+  translation: "Dangling records: the takeover nobody sees coming"
+- id: checks-dangling-text
+  translation: "When a CNAME, MX, NS or SRV record keeps pointing at a resource you no longer control (a decommissioned SaaS, an expired domain, a mistyped name server), anyone can claim that target and publish content, intercept mail or obtain valid certificates under your name."
+- id: checks-dangling-text2
+  translation: |
+    It is not a theoretical risk. <a href="https://shhaos.github.io/papers/ccs16-dares.pdf" target="_blank">The reference study on the topic</a>, <a href="https://youtube.com/watch?v=2OQ5yysJPlI" target="_blank">presented at ACM CCS 2016</a>, found 467 exploitable dangling records across 277 of the Alexa top 10,000 domains and 52 .edu zones. Since then, <a href="https://arstechnica.com/security/2026/04/why-are-top-university-websites-serving-porn-it-comes-down-to-shoddy-housekeeping/" target="_blank">top universities have been caught serving porn through forgotten CNAMEs (April 2026)</a>, and <a href="https://krebsonsecurity.com/2025/01/mastercard-dns-error-went-unnoticed-for-years/" target="_blank">a typo in one of MasterCard's name servers went unnoticed for nearly five years (January 2025)</a>. happyDomain's dangling-records checker walks every pointer in your zone, resolves its target and verifies its registration, so these forgotten records surface before someone else finds them.
+- id: checks-dangling-link
+  translation: "Read about the dangling-records checker"
+- id: checks-dangling-caption
+  translation: "happyDomain's dangling-records check in action: a forgotten CNAME flagged before anyone can claim it."
+- id: checks-footer
+  translation: "Each check reports a clear status, and you're notified the moment one of them changes."
+- id: checks-footer-link
+  translation: "Browse all checkers in the documentation"
+- id: checks-more
+  translation: "+{{ .Count }} more checkers"
+
+- id: personas-eyebrow
+  translation: "For everyone"
+- id: personas-title
+  translation: "Made for the way you work"
+- id: personas-lead
+  translation: "One domain or a thousand, deep DNS expertise or none at all: happyDomain meets you where you are. Pick the profile that sounds like you and see what it changes day to day."
+
 - id: discover-1-title
-  translation: "Connect your accounts"
+  translation: "Connect your domains"
 - id: discover-1-text
-  translation: "Add your access information to the various registrars and DNS hosts."
+  translation: "Link your registrar, DNS host or authoritative server in a few clicks. Your domains stay exactly where they are: no transfer, no change of ownership."
 - id: discover-2-title
-  translation: "Import your domains"
+  translation: "Get instant health checks"
 - id: discover-2-text
-  translation: "Automatically import all your domain names and configurations into happyDomain."
+  translation: "From the very first minute, happyDomain runs deep checks on every domain: expiration, DNSSEC, certificates, response time and more. Nothing to install, nothing to configure."
 - id: discover-3-title
-  translation: "Manage with efficiently"
+  translation: "Enjoy peace of mind"
 - id: discover-3-text
-  translation: "Edit, add and synchronize all your DNS records from a single interface."
+  translation: "happyDomain notifies you as soon as a problem affects your domain's configuration or any service discoverable through DNS. And when action is needed, guided editing and one-click rollback are there to help."
+
+- id: discover-assurances-title
+  translation: "Our promises"
+- id: discover-assurance-1-title
+  translation: "Your data stays at your provider"
+- id: discover-assurance-1-text
+  translation: "happyDomain connects to your existing provider. Nothing is moved, nothing is locked in."
+- id: discover-assurance-2-title
+  translation: "No migration needed"
+- id: discover-assurance-2-text
+  translation: "Bring your domains as they are today, and leave whenever you like."
+- id: discover-assurance-3-title
+  translation: "Your usual console still works"
+- id: discover-assurance-3-text
+  translation: "Keep using your provider's interface alongside happyDomain, with no conflict."
+- id: discover-assurance-4-title
+  translation: "Everything is optional"
+- id: discover-assurance-4-text
+  translation: "Monitoring works out of the box. Use the editor, history and API only if and when you need them."
 
 - id: downloads-title
   translation: |

i18n/fr.yaml

@@ -79,23 +79,122 @@
 - id: features-grid-footer
   translation: Et nous avons encore bien d'autres fonctionnalités en préparation...
 
-- id: discover-title
+- id: discover-eyebrow
   translation: "Comment ça marche"
+- id: discover-title
+  translation: "Trois étapes, zéro engagement"
 - id: discover-lead
-  translation: "Une approche simple pour une gestion de domaine efficace."
+  translation: "Connectez un domaine et happyDomain commence à veiller dessus. Pas de migration, pas de configuration, et rien ne change de votre côté."
+
+- id: discover-1-tag
+  translation: "Connexion"
+- id: discover-2-tag
+  translation: "Surveillance"
+- id: discover-3-tag
+  translation: "Profitez"
+
+- id: checks-eyebrow
+  translation: "Surveillance"
+- id: checks-title
+  translation: "Des vérifications approfondies sur tout ce que votre domaine expose"
+- id: checks-lead
+  translation: "Dès qu'un domaine rejoint happyDomain, nos testeurs l'inspectent depuis l'extérieur, exactement comme le reste du monde le voit. De l'enregistrement jusqu'à chaque service en ligne, toutes les couches sont couvertes."
+- id: checks-domain-tag
+  translation: "Domaine"
+- id: checks-domain-title
+  translation: "Votre enregistrement"
+- id: checks-domain-text
+  translation: "Date d'expiration, verrou de transfert, statut auprès du registre : le volet administratif de votre domaine, surveillé en continu."
+- id: checks-zone-tag
+  translation: "Zone"
+- id: checks-zone-title
+  translation: "Votre zone DNS"
+- id: checks-zone-text
+  translation: "Validité DNSSEC, cohérence de la délégation, réponse des serveurs : les fondations techniques, vérifiées de bout en bout."
+- id: checks-services-tag
+  translation: "Services"
+- id: checks-services-title
+  translation: "Vos services en ligne"
+- id: checks-services-text
+  translation: "Sites web, certificats, courriel : chaque service vers lequel pointe votre domaine, sondé comme le ferait un vrai visiteur."
+- id: checks-item-expiration
+  translation: "Expiration"
+- id: checks-item-expiration-detail
+  translation: "dans 23 jours"
+- id: checks-item-transferlock
+  translation: "Verrou de transfert"
+- id: checks-item-registration
+  translation: "Statut d'enregistrement"
+- id: checks-item-dnssec
+  translation: "Chaîne DNSSEC"
+- id: checks-item-delegation
+  translation: "Délégation"
+- id: checks-item-responsetime
+  translation: "Temps de réponse"
+- id: checks-item-tls
+  translation: "Certificat TLS"
+- id: checks-item-http
+  translation: "Disponibilité HTTP"
+- id: checks-item-ping
+  translation: "Ping"
+- id: checks-dangling-tag
+  translation: "Étude de cas"
+- id: checks-dangling-title
+  translation: "Enregistrements orphelins : le détournement que personne ne voit venir"
+- id: checks-dangling-text
+  translation: "Quand un enregistrement CNAME, MX, NS ou SRV continue de pointer vers une ressource que vous ne contrôlez plus (un SaaS décommissionné, un domaine expiré, un serveur de noms mal orthographié), n'importe qui peut récupérer cette cible et publier du contenu, intercepter vos mails ou obtenir des certificats valides en votre nom."
+- id: checks-dangling-text2
+  translation: |
+    Le risque n'est pas théorique. L'<a href="https://shhaos.github.io/papers/ccs16-dares.pdf" target="_blank">étude de référence sur le sujet</a>, <a href="https://youtube.com/watch?v=2OQ5yysJPlI" target="_blank">présentée à l'ACM CCS 2016</a>, a recensé 467 enregistrements orphelins exploitables dans 277 domaines du top 10 000 Alexa et 52 zones .edu. Depuis, <a href="https://arstechnica.com/security/2026/04/why-are-top-university-websites-serving-porn-it-comes-down-to-shoddy-housekeeping/" target="_blank">de grandes universités ont été surprises à servir du porno via des CNAME oubliés (avril 2026)</a>, et <a href="https://krebsonsecurity.com/2025/01/mastercard-dns-error-went-unnoticed-for-years/" target="_blank">une faute de frappe dans l'un des serveurs de noms de MasterCard est passée inaperçue pendant près de cinq ans (janvier 2025)</a>. Le testeur dangling-records de happyDomain parcourt chaque pointeur de votre zone, résout sa cible et vérifie son enregistrement, pour que ces enregistrements oubliés remontent avant que quelqu'un d'autre ne les trouve.
+- id: checks-dangling-link
+  translation: "Découvrir notre testeur dangling-records"
+- id: checks-dangling-caption
+  translation: "La vérification des enregistrements orphelins de happyDomain en action : un CNAME oublié signalé avant que quelqu'un ne puisse le récupérer."
+- id: checks-footer
+  translation: "Chaque vérification rapporte un statut clair, et vous êtes notifié dès que l'un d'eux change."
+- id: checks-footer-link
+  translation: "Découvrez tous les testeurs dans la documentation"
+- id: checks-more
+  translation: "+{{ .Count }} autres testeurs"
+
+- id: personas-eyebrow
+  translation: "Pour tout le monde"
+- id: personas-title
+  translation: "Conçu pour votre façon de travailler"
+- id: personas-lead
+  translation: "Un domaine ou un millier, expert DNS ou débutant : happyDomain s'adapte à votre réalité. Choisissez le profil qui vous ressemble et découvrez ce que ça change au quotidien."
 
 - id: discover-1-title
-  translation: "Connectez vos comptes"
+  translation: "Connectez vos domaines"
 - id: discover-1-text
-  translation: "Ajoutez vos informations d'accès aux différents bureaux d'enregistrement et hébergeurs DNS."
+  translation: "Reliez votre bureau d'enregistrement, votre hébergeur DNS ou votre serveur faisant autorité en quelques clics. Vos domaines restent exactement là où ils sont : pas de transfert, pas de changement de propriétaire."
 - id: discover-2-title
-  translation: "Importez vos domaines"
+  translation: "Des vérifications immédiates"
 - id: discover-2-text
-  translation: "Importez automatiquement tous vos noms de domaine et leurs configurations dans happyDomain."
+  translation: "Dès la première minute, happyDomain effectue des vérifications approfondies sur chaque domaine : expiration, DNSSEC, certificats, temps de réponse et bien plus. Rien à installer, rien à configurer."
 - id: discover-3-title
-  translation: "Gérez efficacement"
+  translation: "Profitez l'esprit tranquille"
 - id: discover-3-text
-  translation: "Modifiez, ajoutez et synchronisez tous vos enregistrements DNS depuis une seule interface."
+  translation: "happyDomain vous prévient dès qu'un problème touche la configuration de votre domaine ou l'un des services découvrables via le DNS. Et quand il faut agir, l'édition guidée et le retour arrière en un clic sont là pour vous aider."
+
+- id: discover-assurances-title
+  translation: "Nos promesses"
+- id: discover-assurance-1-title
+  translation: "Vos données restent chez votre hébergeur"
+- id: discover-assurance-1-text
+  translation: "happyDomain se connecte à votre hébergeur actuel. Rien n'est déplacé, rien n'est verrouillé."
+- id: discover-assurance-2-title
+  translation: "Aucune migration nécessaire"
+- id: discover-assurance-2-text
+  translation: "Amenez vos domaines tels qu'ils sont aujourd'hui, et repartez quand vous voulez."
+- id: discover-assurance-3-title
+  translation: "Votre console habituelle fonctionne toujours"
+- id: discover-assurance-3-text
+  translation: "Continuez d'utiliser l'interface de votre hébergeur en parallèle de happyDomain, sans aucun conflit."
+- id: discover-assurance-4-title
+  translation: "Tout est optionnel"
+- id: discover-assurance-4-text
+  translation: "La surveillance fonctionne immédiatement. Utilisez l'éditeur, l'historique et l'API seulement si vous en avez besoin, quand vous en avez besoin."
 
 - id: downloads-title
   translation: |

layouts/index.html

@@ -15,10 +15,14 @@
 
       {{ partial "carousel.html" . }}
 
+      {{ partial "checks.html" . }}
+
       {{ partial "features.html" . }}
 
       {{ partial "discover.html" . }}
 
+      {{ partial "personas.html" . }}
+
       {{/* partial "testimonials.html" . */}}
 
       {{ partial "cta-join.html" . }}

layouts/partials/checks.html

@@ -0,0 +1,136 @@
+<section id="checks" class="section">
+    <div class="container">
+        <div class="section-head">
+            <span class="eyebrow"
+                ><span class="dot"></span>{{ i18n "checks-eyebrow" }}</span
+            >
+            <h2 class="h2">{{ i18n "checks-title" }}</h2>
+            <p class="lede">{{ i18n "checks-lead" }}</p>
+        </div>
+
+        {{ $base := printf "https://help.happydomain.org/%s/reference/checkers" .Site.Language.Lang }}
+        <div class="checks-grid">
+            <div class="checks-col">
+                <div class="idea-tag">{{ i18n "checks-domain-tag" }}</div>
+                <h3>{{ i18n "checks-domain-title" }}</h3>
+                <p>{{ i18n "checks-domain-text" }}</p>
+                <ul class="check-list list-unstyled">
+                    <li>
+                        <a href="{{ $base }}/domain-expiry/" target="_blank" rel="noopener" data-umami-event="checks-docs-domain-expiry">
+                            <span class="check-name">{{ i18n "checks-item-expiration" }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ $base }}/domain-lock/" target="_blank" rel="noopener" data-umami-event="checks-docs-domain-lock">
+                            <span class="check-name">{{ i18n "checks-item-transferlock" }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ $base }}/domain-availability/" target="_blank" rel="noopener" data-umami-event="checks-docs-domain-availability">
+                            <span class="check-name">{{ i18n "checks-item-registration" }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                    <li class="check-more">
+                        <a href="{{ $base }}/" target="_blank" rel="noopener" data-umami-event="checks-docs-more-domain">
+                            <span class="check-name">{{ i18n "checks-more" (dict "Count" 3) }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="checks-col">
+                <div class="idea-tag">{{ i18n "checks-zone-tag" }}</div>
+                <h3>{{ i18n "checks-zone-title" }}</h3>
+                <p>{{ i18n "checks-zone-text" }}</p>
+                <ul class="check-list list-unstyled">
+                    <li>
+                        <a href="{{ $base }}/dnssec/" target="_blank" rel="noopener" data-umami-event="checks-docs-dnssec">
+                            <span class="check-name">{{ i18n "checks-item-dnssec" }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ $base }}/delegation/" target="_blank" rel="noopener" data-umami-event="checks-docs-delegation">
+                            <span class="check-name">{{ i18n "checks-item-delegation" }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ $base }}/resolver-propagation/" target="_blank" rel="noopener" data-umami-event="checks-docs-resolver-propagation">
+                            <span class="check-name">{{ i18n "checks-item-responsetime" }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                    <li class="check-more">
+                        <a href="{{ $base }}/" target="_blank" rel="noopener" data-umami-event="checks-docs-more-zone">
+                            <span class="check-name">{{ i18n "checks-more" (dict "Count" 10) }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="checks-col">
+                <div class="idea-tag">{{ i18n "checks-services-tag" }}</div>
+                <h3>{{ i18n "checks-services-title" }}</h3>
+                <p>{{ i18n "checks-services-text" }}</p>
+                <ul class="check-list list-unstyled">
+                    <li>
+                        <a href="{{ $base }}/tls/" target="_blank" rel="noopener" data-umami-event="checks-docs-tls">
+                            <span class="check-name">{{ i18n "checks-item-tls" }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ $base }}/http/" target="_blank" rel="noopener" data-umami-event="checks-docs-http">
+                            <span class="check-name">{{ i18n "checks-item-http" }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ $base }}/ping/" target="_blank" rel="noopener" data-umami-event="checks-docs-ping">
+                            <span class="check-name">{{ i18n "checks-item-ping" }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                    <li class="check-more">
+                        <a href="{{ $base }}/" target="_blank" rel="noopener" data-umami-event="checks-docs-more-services">
+                            <span class="check-name">{{ i18n "checks-more" (dict "Count" 13) }}</span>
+                            <span class="check-arrow" aria-hidden="true">&rarr;</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="checks-spotlight" id="dangling-records" style="scroll-margin-top: 5em">
+            <div class="spotlight-copy">
+                <div class="idea-tag idea-tag-danger">{{ i18n "checks-dangling-tag" }}</div>
+                <h3>{{ i18n "checks-dangling-title" }}</h3>
+                <p>{{ i18n "checks-dangling-text" }}</p>
+                <p>{{ i18n "checks-dangling-text2" | safeHTML }}</p>
+                <a class="spotlight-cta" href="{{ $base }}/dangling-records/" target="_blank" rel="noopener" data-umami-event="checks-docs-dangling">
+                    {{ i18n "checks-dangling-link" }}
+                    <span aria-hidden="true">&rarr;</span>
+                </a>
+            </div>
+            <figure class="spotlight-demo">
+                <img src="/img/screenshots/dangling-record.webp" alt="{{ i18n "checks-dangling-caption" }}" loading="lazy">
+                <figcaption>{{ i18n "checks-dangling-caption" }}</figcaption>
+            </figure>
+        </div>
+
+        <p class="checks-footer">
+            {{ i18n "checks-footer" }}
+            <a
+                href="{{ $base }}/"
+                target="_blank"
+                rel="noopener"
+                data-umami-event="checks-docs"
+                >{{ i18n "checks-footer-link" }}</a
+            >
+        </p>
+    </div>
+</section>

layouts/partials/cta-join.html

@@ -1,24 +1,21 @@
 <!-- Call to Action Section -->
 <section id="cta">
     <div class="container">
-        <div class="cta-content">
+        <div class="cta-content" style="text-wrap: balance">
             <h2 class="display-5 fw-bold mb-4">
                 {{ i18n "cta-account-title" }}
             </h2>
-            <div class="row mb-4">
+            <div class="d-flex justify-content-center mb-4">
-                <p
+                <p class="lead text-light">{{ i18n "cta-account-text" }}</p>
-                    class="offset-sm-1 col-sm-10 offset-md-2 col-md-8 lead text-light"
-                >
-                    {{ i18n "cta-account-text" }}
-                </p>
             </div>
             <a
-                href="/beta/"
+                href="/{{ .Site.Language.Lang }}/beta/"
                 class="btn btn-lg btn-light px-4"
                 style="border-radius: 2em"
                 data-umami-event="cta-join"
-                >{{ i18n "cta-account-button" }}</a
             >
+                {{ i18n "cta-account-button" }}
+            </a>
         </div>
     </div>
 </section>

layouts/partials/discover.html

@@ -1,68 +1,60 @@
-<section id="discover" class="py-5" style="background: var(--hd-green-50)">
+<section id="discover" class="section">
     <div class="container">
-        <div class="section-title text-center mb-5">
+        <div class="section-head">
-            <h2 class="mb-3 display-4">
+            <span class="eyebrow"
-                {{ i18n "discover-title" }}
+                ><span class="dot"></span>{{ i18n "discover-eyebrow" }}</span
-            </h2>
+            >
-            <div class="row">
+            <h2 class="h2">{{ i18n "discover-title" }}</h2>
-                <p class="offset-sm-1 col-sm-10 offset-md-2 col-md-8 text-muted" style="font-size: 1.15rem;">
+            <p class="lede">{{ i18n "discover-lead" }}</p>
-                    {{ i18n "discover-lead" }}
-                </p>
-            </div>
         </div>
 
-        <div class="steps">
+        <div class="steps-grid">
-            <div class="step">
+            <div class="step-col">
-                <div class="step-number">1</div>
+                <div class="idea-tag"><span class="num">1</span> {{ i18n "discover-1-tag" }}</div>
                 <h3>{{ i18n "discover-1-title" }}</h3>
                 <p>{{ i18n "discover-1-text" }}</p>
             </div>
-            <div class="step">
+            <div class="step-col">
-                <div class="step-number">2</div>
+                <div class="idea-tag"><span class="num">2</span> {{ i18n "discover-2-tag" }}</div>
                 <h3>{{ i18n "discover-2-title" }}</h3>
                 <p>{{ i18n "discover-2-text" }}</p>
             </div>
-            <div class="step">
+            <div class="step-col">
-                <div class="step-number">3</div>
+                <div class="idea-tag"><span class="num">3</span> {{ i18n "discover-3-tag" }}</div>
                 <h3>{{ i18n "discover-3-title" }}</h3>
                 <p>{{ i18n "discover-3-text" }}</p>
             </div>
         </div>
 
-        <h3 class="text-center my-5">
+        <ul class="assurances list-unstyled">
-            {{ i18n "learnhow" }} happy<strong>Domain</strong> {{ i18n "canhelpyou" }}
+            <li class="assurance">
-        </h3>
+                <span class="assurance-check" aria-hidden="true">&#10003;</span>
-        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 justify-content-center">
+                <div>
-            <div class="col mb-4">
+                    <strong>{{ i18n "discover-assurance-1-title" }}</strong>
-                <a href="{{ ref . "/use-happyDomain/freelance" }}" class="card h-100" data-umami-event="learnmore-freelance">
+                    <p class="mb-0">{{ i18n "discover-assurance-1-text" }}</p>
-                    <img src="/img/screenshots/users/freelance.webp" alt="{{ i18n "freelance" }}" class="img-top flex-grow-1">
+                </div>
-                    <h3 class="text-center mt-1">{{ i18n "freelance" }}</h3>
+            </li>
-                </a>
+            <li class="assurance">
-            </div>
+                <span class="assurance-check" aria-hidden="true">&#10003;</span>
-            <div class="col mb-4">
+                <div>
-                <a href="{{ ref . "/use-happyDomain/sysadmin" }}" class="card h-100" data-umami-event="learnmore-sysadmin">
+                    <strong>{{ i18n "discover-assurance-2-title" }}</strong>
-                    <img src="/img/screenshots/users/sysadmin.webp" alt="{{ i18n "sysadmin" }}" class="img-top flex-grow-1">
+                    <p class="mb-0">{{ i18n "discover-assurance-2-text" }}</p>
-                    <h3 class="text-center mt-1">{{ i18n "sysadmin" }}</h3>
+                </div>
-                </a>
+            </li>
-            </div>
+            <li class="assurance">
-            <div class="col mb-4">
+                <span class="assurance-check" aria-hidden="true">&#10003;</span>
-                <a href="{{ ref . "/use-happyDomain/devops" }}" class="card h-100" data-umami-event="learnmore-devops">
+                <div>
-                    <img src="/img/screenshots/users/devops.webp" alt="{{ i18n "devops" }}" class="img-top flex-grow-1">
+                    <strong>{{ i18n "discover-assurance-3-title" }}</strong>
-                    <h3 class="text-center mt-1">{{ i18n "devops" }}</h3>
+                    <p class="mb-0">{{ i18n "discover-assurance-3-text" }}</p>
-                </a>
+                </div>
-            </div>
+            </li>
-            <div class="col mb-4">
+            <li class="assurance">
-                <a href="{{ ref . "/use-happyDomain/cio" }}" class="card h-100" data-umami-event="learnmore-cio">
+                <span class="assurance-check" aria-hidden="true">&#10003;</span>
-                    <img src="/img/screenshots/users/cio.webp" alt="{{ i18n "cio" }}" class="img-top flex-grow-1">
+                <div>
-                    <h3 class="text-center mt-1">{{ i18n "cio" }}</h3>
+                    <strong>{{ i18n "discover-assurance-4-title" }}</strong>
-                </a>
+                    <p class="mb-0">{{ i18n "discover-assurance-4-text" }}</p>
-            </div>
+                </div>
-            <div class="col mb-4">
+            </li>
-                <a href="{{ ref . "/use-happyDomain/geek" }}" class="card h-100" data-umami-event="learnmore-geek">
+        </ul>
-                    <img src="/img/screenshots/users/geek.webp" alt="{{ i18n "geek" }}" class="img-top flex-grow-1">
-                    <h3 class="text-center mt-1">{{ i18n "geek" }}</h3>
-                </a>
-            </div>
-        </div>
     </div>
 </section>

layouts/partials/downloads.html

@@ -1,5 +1,5 @@
-<div id="downloads" class="py-5" style="scroll-margin-top: 2em">
+<div id="downloads" class="py-5 my-5" style="scroll-margin-top: 2em">
-    <div class="container">
+    <div class="container my-5">
         <div class="row">
             <div
                 class="col-3 d-none d-md-flex flex-column justify-content-center"
@@ -12,14 +12,14 @@
                 />
             </div>
             <div class="col">
-                <h3 class="fw-bolder">
+                <h3 class="fw-bolder display-6">
                     {{ i18n "downloads-title" }}
                     <span class="text-muted">
                         {{ i18n "downloads-subtitle" }}
                     </span>
                 </h3>
                 <div
-                    class="row row-cols-1 row-cols-sm-3 my-4 align-items-center"
+                    class="my-5 row row-cols-1 row-cols-sm-3 my-4 align-items-center"
                 >
                     <div class="col text-center my-2">
                         <a

layouts/partials/features.html

@@ -1,4 +1,4 @@
-<section id="features" class="section" style="scroll-margin-top: 2em">
+<section id="features" class="section section--paper" style="scroll-margin-top: 2em">
     <div class="container">
         <div class="section-head">
             <span class="eyebrow"

layouts/partials/personas.html

@@ -0,0 +1,34 @@
+<section id="personas" class="section section--paper">
+    <div class="container">
+        <div class="section-head">
+            <span class="eyebrow"
+                ><span class="dot"></span>{{ i18n "personas-eyebrow" }}</span
+            >
+            <h2 class="h2">{{ i18n "personas-title" }}</h2>
+            <p class="lede">{{ i18n "personas-lead" }}</p>
+        </div>
+
+        <div class="personas-grid">
+            <a href="{{ ref . "/use-happyDomain/freelance" }}" class="persona-card" data-umami-event="learnmore-freelance">
+                <img src="/img/screenshots/users/freelance.webp" alt="" loading="lazy">
+                <span class="persona-name">{{ i18n "freelance" }}</span>
+            </a>
+            <a href="{{ ref . "/use-happyDomain/sysadmin" }}" class="persona-card" data-umami-event="learnmore-sysadmin">
+                <img src="/img/screenshots/users/sysadmin.webp" alt="" loading="lazy">
+                <span class="persona-name">{{ i18n "sysadmin" }}</span>
+            </a>
+            <a href="{{ ref . "/use-happyDomain/devops" }}" class="persona-card" data-umami-event="learnmore-devops">
+                <img src="/img/screenshots/users/devops.webp" alt="" loading="lazy">
+                <span class="persona-name">{{ i18n "devops" }}</span>
+            </a>
+            <a href="{{ ref . "/use-happyDomain/cio" }}" class="persona-card" data-umami-event="learnmore-cio">
+                <img src="/img/screenshots/users/cio.webp" alt="" loading="lazy">
+                <span class="persona-name">{{ i18n "cio" }}</span>
+            </a>
+            <a href="{{ ref . "/use-happyDomain/geek" }}" class="persona-card" data-umami-event="learnmore-geek">
+                <img src="/img/screenshots/users/geek.webp" alt="" loading="lazy">
+                <span class="persona-name">{{ i18n "geek" }}</span>
+            </a>
+        </div>
+    </div>
+</section>

static/css/custom.css

@@ -314,70 +314,428 @@ img {
     max-width: 100%;
 }
 
-#discover .steps {
+/* ── How it works (#discover) ──
+   Same flat language as the big-idea section: one bordered surface,
+   columns split by hairlines, mono step tags. */
+#discover .steps-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    border: 1px solid var(--hd-border-1);
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--hd-bg-canvas);
+}
+
+#discover .step-col {
+    padding: 28px 28px 24px;
+}
+
+#discover .step-col + .step-col {
+    border-left: 1px solid var(--hd-border-1);
+}
+
+#discover .step-col h3 {
+    font-weight: 700;
+    font-size: 1.125rem;
+    color: var(--hd-fg-1);
+    letter-spacing: -0.015em;
+    margin: 0 0 10px;
+}
+
+#discover .step-col p {
+    font-size: 0.9375rem;
+    line-height: 1.6;
+    color: var(--hd-fg-3);
+    margin: 0;
+}
+
+#discover .assurances {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px 28px;
+    margin: 40px 0 0;
+    padding-top: 32px;
+    border-top: 1px solid var(--hd-border-1);
+}
+
+#discover .assurance {
     display: flex;
-    justify-content: space-between;
+    align-items: flex-start;
-    flex-wrap: wrap;
+    gap: 10px;
-    margin-top: 60px;
-    position: relative;
 }
 
-#discover .steps::before {
+#discover .assurance-check {
-    content: "";
+    flex-shrink: 0;
-    position: absolute;
-    top: 25px;
-    left: 10%;
-    width: 80%;
-    height: 2px;
-    background: linear-gradient(
-        to right,
-        var(--hd-accent) 0%,
-        var(--hd-brand-dark) 100%
-    );
-    z-index: 1;
-}
-
-#discover .step {
-    flex-basis: 30%;
-    text-align: center;
-    position: relative;
-    z-index: 2;
-}
-
-#discover .step-number {
-    background: linear-gradient(
-        135deg,
-        var(--hd-accent) 0%,
-        var(--hd-brand-dark) 100%
-    );
-    color: white;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 24px;
+    width: 20px;
-    font-weight: bold;
+    height: 20px;
-    margin: 0 auto 20px;
+    margin-top: 1px;
+    border-radius: 6px;
+    background: var(--hd-accent-subtle);
+    border: 1px solid var(--hd-accent-border);
+    color: var(--hd-accent);
+    font-size: 11px;
+    font-weight: 700;
 }
 
-#discover .step h3 {
+[data-bs-theme="dark"] #discover .assurance-check {
-    margin-bottom: 15px;
+    background: var(--hd-accent-muted);
-    font-size: 22px;
 }
 
-#discover .step p {
+#discover .assurance strong {
+    display: block;
+    font-size: 0.875rem;
+    color: var(--hd-fg-1);
+    margin-bottom: 3px;
+}
+
+#discover .assurance p {
     color: var(--hd-fg-3);
+    font-size: 0.8125rem;
+    line-height: 1.55;
+}
+
+@media (max-width: 991px) {
+    #discover .assurances {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 767px) {
+    #discover .steps-grid {
+        grid-template-columns: 1fr;
+    }
+    #discover .step-col + .step-col {
+        border-left: none;
+        border-top: 1px solid var(--hd-border-1);
+    }
+    #discover .assurances {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ── Checks deep-dive (#checks) ──
+   Three scope columns sharing one bordered surface, each ending with a
+   mock check-list whose rows echo the .svc rows of the big-idea section. */
+.checks-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    border: 1px solid var(--hd-border-1);
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--hd-bg-canvas);
+}
+
+.checks-col {
+    display: flex;
+    flex-direction: column;
+    padding: 28px 28px 24px;
+}
+
+.checks-col + .checks-col {
+    border-left: 1px solid var(--hd-border-1);
+}
+
+.checks-col h3 {
+    font-weight: 700;
+    font-size: 1.125rem;
+    color: var(--hd-fg-1);
+    letter-spacing: -0.015em;
+    margin: 0 0 10px;
+}
+
+.checks-col > p {
+    font-size: 0.9375rem;
+    line-height: 1.6;
+    color: var(--hd-fg-3);
+    margin: 0 0 18px;
+}
+
+.check-list {
+    margin: auto 0 0;
+    border: 1px solid var(--hd-border-1);
+    border-radius: 8px;
+    background: var(--hd-bg-subtle);
+    overflow: hidden;
+}
+
+.check-list li + li {
+    border-top: 1px solid var(--hd-border-1);
+}
+
+.check-list li > a {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 9px 12px;
+    text-decoration: none;
+    transition: background 0.15s ease, color 0.15s ease;
+}
+
+.check-list li > a:hover,
+.check-list li > a:focus-visible {
+    background: var(--hd-accent-subtle);
+}
+
+[data-bs-theme="dark"] .check-list li > a:hover,
+[data-bs-theme="dark"] .check-list li > a:focus-visible {
+    background: var(--hd-accent-muted);
+}
+
+.check-name {
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--hd-fg-2);
+}
+
+.check-arrow {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--hd-fg-4, var(--hd-fg-3));
+    transform: translateX(-2px);
+    opacity: 0;
+    transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.check-list li > a:hover .check-name,
+.check-list li > a:focus-visible .check-name,
+.check-list li > a:hover .check-arrow,
+.check-list li > a:focus-visible .check-arrow {
+    color: var(--hd-accent);
+}
+
+.check-list li > a:hover .check-arrow,
+.check-list li > a:focus-visible .check-arrow {
+    transform: translateX(0);
+    opacity: 1;
+}
+
+.check-list li.check-more {
+    background: var(--hd-bg-canvas);
+}
+
+.check-list li.check-more .check-name {
+    color: var(--hd-accent);
+    font-weight: 700;
+}
+
+.check-list li.check-more .check-arrow {
+    color: var(--hd-accent);
+    opacity: 1;
+    transform: translateX(0);
+}
+
+/* Dangling-records case study: copy on the left, mock check report on the
+   right, sharing the same bordered surface language as .checks-grid. */
+.checks-spotlight {
+    display: grid;
+    grid-template-columns: 1.15fr 1fr;
+    gap: 36px;
+    align-items: center;
+    margin-top: 24px;
+    padding: 32px;
+    border: 1px solid var(--hd-border-1);
+    border-radius: 12px;
+    background: var(--hd-bg-canvas);
+}
+
+.idea-tag-danger {
+    color: var(--hd-danger);
+}
+
+.spotlight-copy h3 {
+    font-weight: 700;
+    font-size: 1.25rem;
+    color: var(--hd-fg-1);
+    letter-spacing: -0.015em;
+    margin: 0 0 12px;
+}
+
+.spotlight-copy p {
+    font-size: 0.9375rem;
+    line-height: 1.6;
+    color: var(--hd-fg-3);
+    margin: 0 0 14px;
+}
+
+.spotlight-sources-label {
+    font-weight: 700;
+    color: var(--hd-fg-2);
+    margin-bottom: 6px;
+}
+
+.spotlight-sources {
+    margin: 0 0 18px;
+}
+
+.spotlight-sources li {
+    font-size: 0.875rem;
+    line-height: 1.7;
+}
+
+.spotlight-sources a {
+    color: var(--hd-fg-2);
+    text-decoration: underline;
+    text-decoration-color: var(--hd-border-3);
+    text-underline-offset: 3px;
+}
+
+.spotlight-sources a:hover,
+.spotlight-sources a:focus-visible {
+    color: var(--hd-accent);
+    text-decoration-color: var(--hd-accent);
+}
+
+.spotlight-cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--hd-accent);
+    text-decoration: none;
+}
+
+.spotlight-cta:hover,
+.spotlight-cta:focus-visible {
+    text-decoration: underline;
+}
+
+.spotlight-demo {
+    margin: 0;
+}
+
+.spotlight-demo img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--hd-border-1);
+    border-radius: 10px;
+    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
+}
+
+.spotlight-demo figcaption {
+    margin-top: 10px;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    color: var(--hd-fg-4);
+    text-align: center;
+}
+
+@media (max-width: 991px) {
+    .checks-spotlight {
+        grid-template-columns: 1fr;
+        gap: 24px;
+        padding: 24px;
+    }
+}
+
+.checks-footer {
+    margin: 24px 0 0;
+    font-size: 0.9375rem;
+    color: var(--hd-fg-3);
+}
+
+.checks-footer a {
+    color: var(--hd-accent);
+    font-weight: 600;
+}
+
+@media (max-width: 767px) {
+    .checks-grid {
+        grid-template-columns: 1fr;
+    }
+    .checks-col + .checks-col {
+        border-left: none;
+        border-top: 1px solid var(--hd-border-1);
+    }
+}
+
+/* ── Personas (#personas) ── */
+.personas-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 16px;
+}
+
+.persona-card {
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    background: var(--hd-bg-canvas);
+    border: 1px solid var(--hd-border-1);
+    border-radius: 12px;
+    overflow: hidden;
+    transition:
+        border-color 0.15s,
+        transform 0.15s,
+        box-shadow 0.15s;
+}
+
+.persona-card:hover {
+    border-color: var(--hd-accent-border);
+    transform: translateY(-3px);
+    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.35);
+}
+
+.persona-card img {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+}
+
+.persona-card .persona-name {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 11px 14px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--hd-fg-1);
+    border-top: 1px solid var(--hd-border-1);
+}
+
+.persona-card .persona-name::after {
+    content: "\2192";
+    color: var(--hd-fg-4);
+    transition:
+        color 0.15s,
+        transform 0.15s;
+}
+
+.persona-card:hover .persona-name::after {
+    color: var(--hd-accent);
+    transform: translateX(3px);
+}
+
+@media (max-width: 991px) {
+    .personas-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 575px) {
+    .personas-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
 
 #cta {
     padding: 100px 0;
-    background: linear-gradient(
+    background:
-        135deg,
+        linear-gradient(
-        var(--hd-brand-dark) 0%,
+            135deg,
-        var(--hd-accent) 100%
+            rgba(54, 11, 72, 0.65) 0%,
-    );
+            rgba(28, 180, 135, 0.55) 100%
+        ),
+        url("/img/screenshots/home.webp");
+    background-size: cover;
+    background-position: center;
     color: white;
     text-align: center;
     position: relative;