Update

index.html

@@ -14,13 +14,24 @@
         <header class="topbar" role="banner">
             <div class="topbar-logo">
                 <img src="asset/logo.webp" alt="[fi-ne] &amp; LACUEOR" />
-                <span class="topbar-label">B2B<br />Partner Portal</span>
+                <span class="topbar-label" data-i18n="topbar.label"
+                    >B2B<br />Partner Portal</span
+                >
             </div>
             <nav class="topbar-nav" aria-label="Primary">
-                <a href="#brands" class="nav-hide">Our Brands</a>
+                <a href="#brands" class="nav-hide" data-i18n="nav.brands"
-                <a href="#b2b" class="nav-hide">Partner Benefits</a>
+                    >Our Brands</a
-                <a href="#signup" class="nav-hide">Contact</a>
+                >
-                <a href="https://b2b.finorbrands.com" class="btn-topbar"
+                <a href="#b2b" class="nav-hide" data-i18n="nav.benefits"
+                    >Partner Benefits</a
+                >
+                <a href="#signup" class="nav-hide" data-i18n="nav.contact"
+                    >Contact</a
+                >
+                <a
+                    href="https://b2b.finorbrands.com"
+                    class="btn-topbar"
+                    data-i18n="nav.signin"
                     >Anmelden</a
                 >
             </nav>
@@ -35,11 +46,17 @@
                 id="brands"
                 aria-labelledby="brands-heading"
             >
-                <p class="section-label">Our Brand Universe</p>
+                <p class="section-label" data-i18n="brands.label">
-                <h2 class="section-title" id="brands-heading">
+                    Our Brand Universe
+                </p>
+                <h2
+                    class="section-title"
+                    id="brands-heading"
+                    data-i18n="brands.title"
+                >
                     Consumer &amp; Retail Destinations
                 </h2>
-                <p class="section-body">
+                <p class="section-body" data-i18n="brands.body">
                     Direct our clients and consumers to our flagship brand
                     destinations.
                 </p>
@@ -55,7 +72,9 @@
                         aria-label="Visit [fi-ne] consumer website — finecosmetic.de"
                     >
                         <div class="brand-card-header">
-                            <span class="brand-card-eyebrow"
+                            <span
+                                class="brand-card-eyebrow"
+                                data-i18n="fine.eyebrow"
                                 >Premium Natural Cosmetics</span
                             >
                             <img
@@ -65,7 +84,10 @@
                             />
                         </div>
                         <div class="brand-card-footer">
-                            <span class="brand-card-tagline">
+                            <span
+                                class="brand-card-tagline"
+                                data-i18n="fine.tagline"
+                            >
                                 Clean. Unisex. Uncompromisingly effective Body
                                 Care. <br />
                                 Born in Berlin.
@@ -91,7 +113,9 @@
                         aria-label="Visit LACUEOR consumer website — lacueor.com"
                     >
                         <div class="brand-card-header">
-                            <span class="brand-card-eyebrow"
+                            <span
+                                class="brand-card-eyebrow"
+                                data-i18n="lacueor.eyebrow"
                                 >Premium Organic Skin Care</span
                             >
                             <img
@@ -101,7 +125,10 @@
                             />
                         </div>
                         <div class="brand-card-footer">
-                            <span class="brand-card-tagline">
+                            <span
+                                class="brand-card-tagline"
+                                data-i18n="lacueor.tagline"
+                            >
                                 Premium organic skin care.<br />
                                 Born in Switzerland.
                             </span>
@@ -115,28 +142,7 @@
                             </span>
                         </div>
                     </a>
-                    <img
+                    <img class="brands-banner" src="asset/banner.webp" alt="" />
-                        class="brands-banner"
-                        id="brands-banner"
-                        src="asset/banner/5.webp"
-                        alt=""
-                    />
-                </div>
-
-                <!-- Banner image selector -->
-                <div class="banner-selector">
-                    <label for="banner-picker">Banner:</label>
-                    <select id="banner-picker">
-                        <option value="1">Banner 1</option>
-                        <option value="2">Banner 2</option>
-                        <option value="3">Banner 3</option>
-                        <option value="4">Banner 4</option>
-                        <option value="5" selected>Banner 5</option>
-                        <option value="6">Banner 6</option>
-                        <option value="7">Banner 7</option>
-                        <option value="8">Banner 8</option>
-                        <option value="9">Banner 9</option>
-                    </select>
                 </div>
             </section>
 
@@ -148,11 +154,17 @@
                 id="b2b"
                 aria-labelledby="b2b-heading"
             >
-                <p class="section-label">Exclusive Partnership</p>
+                <p class="section-label" data-i18n="b2b.label">
-                <h2 class="section-title" id="b2b-heading">
+                    Exclusive Partnership
+                </p>
+                <h2
+                    class="section-title"
+                    id="b2b-heading"
+                    data-i18n="b2b.title"
+                >
                     Apply for B2B Partnership
                 </h2>
-                <p class="section-body">
+                <p class="section-body" data-i18n="b2b.body">
                     We love to partner and collaborate with like-minded people
                     and companies! If you are interested in a retail partnership
                     or colaboration, please fill out
@@ -183,9 +195,16 @@
                                 <line x1="12" y1="22.08" x2="12" y2="12" />
                             </svg>
                         </div>
-                        <span class="b2b-benefit-title">Bulk Pricing</span>
+                        <span
+                            class="b2b-benefit-title"
+                            data-i18n="b2b.benefit1.title"
+                            >Bulk Pricing</span
+                        >
                         <div class="b2b-benefit-rule" aria-hidden="true"></div>
-                        <span class="b2b-benefit-text">
+                        <span
+                            class="b2b-benefit-text"
+                            data-i18n="b2b.benefit1.text"
+                        >
                             Tiered wholesale rates on every SKU across our
                             entire brand portfolio — the more you order, the
                             more you save.
@@ -211,11 +230,16 @@
                                 />
                             </svg>
                         </div>
-                        <span class="b2b-benefit-title"
+                        <span
+                            class="b2b-benefit-title"
+                            data-i18n="b2b.benefit2.title"
                             >Exclusive Promotions</span
                         >
                         <div class="b2b-benefit-rule" aria-hidden="true"></div>
-                        <span class="b2b-benefit-text">
+                        <span
+                            class="b2b-benefit-text"
+                            data-i18n="b2b.benefit2.text"
+                        >
                             Partner-only seasonal campaigns, early-access
                             product launches, and co-marketing opportunities
                             reserved for B2B members.
@@ -244,23 +268,21 @@
                                 />
                             </svg>
                         </div>
-                        <span class="b2b-benefit-title">Dedicated Support</span>
+                        <span
+                            class="b2b-benefit-title"
+                            data-i18n="b2b.benefit3.title"
+                            >Dedicated Support</span
+                        >
                         <div class="b2b-benefit-rule" aria-hidden="true"></div>
-                        <span class="b2b-benefit-text">
+                        <span
+                            class="b2b-benefit-text"
+                            data-i18n="b2b.benefit3.text"
+                        >
                             A personal account manager and priority fulfilment
                             to keep your business moving without friction.
                         </span>
                     </div>
                 </div>
-
-                <div class="b2b-divider" aria-hidden="true"></div>
-
-                <p class="b2b-notice">
-                    Already a partner?&#160;&#160;—&#160;&#160;
-                    <a href="https://b2b.finorbrands.com"
-                        >Sign in to your B2B account</a
-                    >
-                </p>
             </section>
 
             <!-- ============================================================
@@ -270,26 +292,40 @@
                 <div class="values-grid" role="list">
                     <div class="value-item" role="listitem">
                         <p class="value-number">01</p>
-                        <p class="value-title">Curated</p>
+                        <p class="value-title" data-i18n="value1.title">
-                        <p class="value-desc">Selectively distributed</p>
+                            Curated
+                        </p>
+                        <p class="value-desc" data-i18n="value1.desc">
+                            Selectively distributed
+                        </p>
                     </div>
                     <div class="value-item" role="listitem">
                         <p class="value-number">02</p>
-                        <p class="value-title">Certified</p>
+                        <p class="value-title" data-i18n="value2.title">
-                        <p class="value-desc">Vegan &amp; natural formulas</p>
+                            Certified
+                        </p>
+                        <p class="value-desc" data-i18n="value2.desc">
+                            Vegan &amp; natural formulas
+                        </p>
                     </div>
                     <div class="value-item" role="listitem">
                         <p class="value-number">03</p>
-                        <p class="value-title">Crafted</p>
+                        <p class="value-title" data-i18n="value3.title">
-                        <p class="value-desc">
+                            Crafted
+                        </p>
+                        <p class="value-desc" data-i18n="value3.desc">
                             Handmade in Germany,<br />
                             Austria and Switzerland
                         </p>
                     </div>
                     <div class="value-item" role="listitem">
                         <p class="value-number">04</p>
-                        <p class="value-title">Committed</p>
+                        <p class="value-title" data-i18n="value4.title">
-                        <p class="value-desc">Personal B2B support</p>
+                            Committed
+                        </p>
+                        <p class="value-desc" data-i18n="value4.desc">
+                            Personal B2B support
+                        </p>
                     </div>
                 </div>
             </div>
@@ -307,7 +343,12 @@
                 Interested in carrying [fi-ne] or LACUEOR? Send us your details
                 and we will get back to you within 48 hours.
             </p>
-            <form class="signup-form" action="#signup" method="post" novalidate>
+            <form
+                class="signup-form"
+                action="https://n8n.finorbrands.com/webhook/b2b-signup"
+                method="post"
+                novalidate
+            >
                 <div class="signup-grid">
                     <div class="form-group">
                         <label for="signup-name" data-i18n="signup.name"
@@ -319,6 +360,9 @@
                             name="name"
                             required
                         />
+                        <span class="field-error" data-i18n="signup.err.name"
+                            >Please enter your name.</span
+                        >
                     </div>
                     <div class="form-group">
                         <label for="signup-email" data-i18n="signup.email"
@@ -330,6 +374,9 @@
                             name="email"
                             required
                         />
+                        <span class="field-error" data-i18n="signup.err.email"
+                            >Please enter a valid email address.</span
+                        >
                     </div>
                     <div class="form-group">
                         <label for="signup-phone" data-i18n="signup.phone"
@@ -348,16 +395,62 @@
                             placeholder="https://"
                         />
                     </div>
-                    <div class="form-group">
+                    <div class="form-group form-group--full">
-                        <label for="signup-social" data-i18n="signup.social"
+                        <label data-i18n="signup.channels"
-                            >Social Media</label
+                            >Sales Channels</label
                         >
+                        <div class="checkbox-group">
+                            <label class="checkbox-label">
                                 <input
-                            type="text"
+                                    type="checkbox"
-                            id="signup-social"
+                                    name="channel_online"
-                            name="social"
+                                    value="online_shop"
-                            placeholder="Instagram / LinkedIn / …"
                                 />
+                                <span data-i18n="signup.channel.online"
+                                    >Online Shop</span
+                                >
+                            </label>
+                            <label class="checkbox-label">
+                                <input
+                                    type="checkbox"
+                                    name="channel_showroom"
+                                    value="showroom"
+                                />
+                                <span data-i18n="signup.channel.showroom"
+                                    >Showroom</span
+                                >
+                            </label>
+                            <label class="checkbox-label">
+                                <input
+                                    type="checkbox"
+                                    name="channel_store"
+                                    value="physical_store"
+                                />
+                                <span data-i18n="signup.channel.store"
+                                    >Physical Store</span
+                                >
+                            </label>
+                            <label class="checkbox-label">
+                                <input
+                                    type="checkbox"
+                                    name="channel_amazon"
+                                    value="amazon"
+                                />
+                                <span data-i18n="signup.channel.amazon"
+                                    >Amazon</span
+                                >
+                            </label>
+                            <label class="checkbox-label">
+                                <input
+                                    type="checkbox"
+                                    name="channel_other"
+                                    value="other"
+                                />
+                                <span data-i18n="signup.channel.other"
+                                    >Other</span
+                                >
+                            </label>
+                        </div>
                     </div>
                     <div class="form-group form-group--full">
                         <label for="signup-message" data-i18n="signup.message"
@@ -370,6 +463,9 @@
                             rows="5"
                             required
                         ></textarea>
+                        <span class="field-error" data-i18n="signup.err.message"
+                            >Please describe your business case.</span
+                        >
                     </div>
                 </div>
                 <button
@@ -381,6 +477,29 @@
                 </button>
             </form>
 
+            <div
+                id="signup-confirm"
+                class="signup-confirm"
+                style="display: none"
+            >
+                <div class="signup-confirm-inner">
+                    <span class="signup-confirm-icon" aria-hidden="true"></span>
+                    <h3
+                        class="signup-confirm-title"
+                        data-i18n="signup.confirm.title"
+                    >
+                        Thank You!
+                    </h3>
+                    <p
+                        class="signup-confirm-body"
+                        data-i18n="signup.confirm.body"
+                    >
+                        We have received your request and will get back to you
+                        within 48 hours.
+                    </p>
+                </div>
+            </div>
+
             <div class="signup-notice-rule" aria-hidden="true"></div>
 
             <p
@@ -388,7 +507,9 @@
                 style="margin-top: 0; border-top: none; background: transparent"
             >
                 Already a partner?&#160;&#160;—&#160;&#160;
-                <a href="https://b2b.finorbrands.com"
+                <a
+                    href="https://b2b.finorbrands.com"
+                    data-i18n="signup.notice_link"
                     >Sign in to your B2B account</a
                 >
             </p>

script.js

@@ -9,6 +9,43 @@
   /* ── Translations ─────────────────────────────────────── */
   var translations = {
     en: {
+      "topbar.label": "B2B Partner Portal",
+      "nav.brands": "Our Brands",
+      "nav.benefits": "Partner Benefits",
+      "nav.contact": "Contact",
+      "nav.signin": "Anmelden",
+      "brands.label": "Our Brand Universe",
+      "brands.title": "Consumer & Retail Destinations",
+      "brands.body":
+        "Direct our clients and consumers to our flagship brand destinations.",
+      "fine.eyebrow": "Premium Natural Cosmetics",
+      "fine.tagline":
+        "Clean. Unisex. Uncompromisingly effective Body Care. Born in Berlin.",
+      "lacueor.eyebrow": "Premium Organic Skin Care",
+      "lacueor.tagline": "Premium organic skin care. Born in Switzerland.",
+      "b2b.label": "Exclusive Partnership",
+      "b2b.title": "Apply for B2B Partnership",
+      "b2b.body":
+        "We love to partner and collaborate with like-minded people and companies! If you are interested in a retail partnership or colaboration, please fill out the form below and we will reach out to you.",
+      "b2b.benefit1.title": "Bulk Pricing",
+      "b2b.benefit1.text":
+        "Tiered wholesale rates on every SKU across our entire brand portfolio — the more you order, the more you save.",
+      "b2b.benefit2.title": "Exclusive Promotions",
+      "b2b.benefit2.text":
+        "Partner-only seasonal campaigns, early-access product launches, and co-marketing opportunities reserved for B2B members.",
+      "b2b.benefit3.title": "Dedicated Support",
+      "b2b.benefit3.text":
+        "A personal account manager and priority fulfilment to keep your business moving without friction.",
+      "b2b.notice": "Already a partner?",
+      "b2b.notice_link": "Sign in to your B2B account",
+      "value1.title": "Curated",
+      "value1.desc": "Selectively distributed",
+      "value2.title": "Certified",
+      "value2.desc": "Vegan & natural formulas",
+      "value3.title": "Crafted",
+      "value3.desc": "Handmade in Germany, Austria and Switzerland",
+      "value4.title": "Committed",
+      "value4.desc": "Personal B2B support",
       "signup.label": "Contact Us",
       "signup.title": "Become a Partner",
       "signup.body":
@@ -18,26 +55,79 @@
       "signup.phone": "Phone",
       "signup.website": "Website",
       "signup.social": "Social Media",
-      "signup.message": "Describe your business case *",
+      "signup.message":
+        "Your background / your philosophy / your favorite brands *",
       "signup.submit": "Send Request",
-      "footer.copyright": "\u00a9 2025 FINOR GmbH. All rights reserved.",
+      "signup.confirm.title": "Thank You!",
+      "signup.confirm.body":
+        "We have received your request and will get back to you within 48 hours.",
+      "signup.err.name": "Please enter your name.",
+      "signup.err.email": "Please enter a valid email address.",
+      "signup.err.message": "Please describe your business case.",
+      "signup.notice_link": "Sign in to your B2B account",
+      "footer.copyright": "© 2025 FINOR GmbH. All rights reserved.",
       "footer.legal": "Legal Notice",
       "footer.privacy": "Privacy Policy",
       "footer.tagline": "Made in Berlin, with love.",
     },
     de: {
+      "topbar.label": "B2B Partner Portal",
+      "nav.brands": "Unsere Marken",
+      "nav.benefits": "Partner-Vorteile",
+      "nav.contact": "Kontakt",
+      "nav.signin": "Anmelden",
+      "brands.label": "Unser Markenuniversum",
+      "brands.title": "Consumer & Retail Ziele",
+      "brands.body":
+        "Leiten Sie Ihre Kunden zu unseren Flaggschiff-Marken weiter.",
+      "fine.eyebrow": "Premium Naturkosmetik",
+      "fine.tagline":
+        "Clean. Unisex. Unkompromittierend wirksame Body Care. Aus Berlin.",
+      "lacueor.eyebrow": "Premium Bio-Hautpflege",
+      "lacueor.tagline": "Premium Bio-Hautpflege. Aus der Schweiz.",
+      "b2b.label": "Exklusive Partnerschaft",
+      "b2b.title": "B2B Partnerschaft beantragen",
+      "b2b.body":
+        "Wir lieben Partnerschaften mit gleichgesinnten Menschen und Unternehmen! Bei Interesse an einer Retail-Partnerschaft oder Kooperation füllt gerne das untenstehende Formular aus. Wir melden uns bei euch.",
+      "b2b.benefit1.title": "Mengenrabatte",
+      "b2b.benefit1.text":
+        "Gestaffelte Großhandelspreise für jede SKU unseres gesamten Markenportfolios – je mehr Sie bestellen, desto mehr sparen Sie.",
+      "b2b.benefit2.title": "Exklusive Aktionen",
+      "b2b.benefit2.text":
+        "Partner-exklusive saisonale Kampagnen, frühzeitiger Zugang zu Produktneuheiten und Co-Marketing-Möglichkeiten.",
+      "b2b.benefit3.title": "Persönlicher Support",
+      "b2b.benefit3.text":
+        "Ein persönlicher Account-Manager und prioritäre Auftragsabwicklung für reibungslose Geschäftsabläufe.",
+      "b2b.notice": "Bereits Partner?",
+      "b2b.notice_link": "Zum B2B-Konto anmelden",
+      "value1.title": "Kuratiert",
+      "value1.desc": "Selektiv vertrieben",
+      "value2.title": "Zertifiziert",
+      "value2.desc": "Vegane & natürliche Formeln",
+      "value3.title": "Handgefertigt",
+      "value3.desc": "Hergestellt in Deutschland, Österreich und der Schweiz",
+      "value4.title": "Engagiert",
+      "value4.desc": "Persönlicher B2B-Support",
       "signup.label": "Kontakt",
       "signup.title": "Partner werden",
       "signup.body":
-        "Interesse an [fi-ne] oder LACUEOR? Senden Sie uns Ihre Daten und wir melden uns innerhalb von 48 Stunden zur\u00fcck.",
+        "Interesse an [fi-ne] oder LACUEOR? Schickt uns eure Daten und wir melden uns spätestens innerhalb von 48 Stunden zurück.",
       "signup.name": "Name *",
       "signup.email": "E-Mail *",
       "signup.phone": "Telefon",
       "signup.website": "Webseite",
       "signup.social": "Social Media",
-      "signup.message": "Beschreiben Sie Ihr Gesch\u00e4ftsfeld *",
+      "signup.message":
+        "Ihr Hintergrund / Ihre Philosophie / Ihre Lieblingsmarken *",
       "signup.submit": "Anfrage senden",
-      "footer.copyright": "\u00a9 2025 FINOR GmbH. Alle Rechte vorbehalten.",
+      "signup.confirm.title": "Vielen Dank!",
+      "signup.confirm.body":
+        "Wir haben Ihre Anfrage erhalten und melden uns spätestens innerhalb von 48 Stunden zurück.",
+      "signup.err.name": "Bitte geben Sie Ihren Namen ein.",
+      "signup.err.email": "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
+      "signup.err.message": "Bitte beschreiben Sie Ihr Geschäftsfeld.",
+      "signup.notice_link": "Zum B2B-Konto anmelden",
+      "footer.copyright": "© 2025 FINOR GmbH. Alle Rechte vorbehalten.",
       "footer.legal": "Impressum",
       "footer.privacy": "Datenschutz",
       "footer.tagline": "Hergestellt in Berlin, mit Liebe.",
@@ -64,12 +154,72 @@
       applyLang(this.value);
     });
 
-  /* ── Banner image selector ──────────────────────────────── */
+  /* ── Form validation + AJAX submission ────────────── */
-  var bannerPicker = document.getElementById("banner-picker");
+  var signupForm = document.querySelector(".signup-form");
-  var brandsBanner = document.getElementById("brands-banner");
+  if (signupForm) {
-  if (bannerPicker && brandsBanner) {
+    signupForm.addEventListener("submit", function (e) {
-    bannerPicker.addEventListener("change", function () {
+      e.preventDefault();
-      brandsBanner.src = "asset/banner/" + this.value + ".webp";
+
+      var name = document.getElementById("signup-name");
+      var email = document.getElementById("signup-email");
+      var message = document.getElementById("signup-message");
+      var valid = true;
+
+      function clearErrors() {
+        document
+          .querySelectorAll(".form-group.has-error")
+          .forEach(function (g) {
+            g.classList.remove("has-error");
+          });
+      }
+
+      function markError(el) {
+        var group = el.closest(".form-group");
+        if (group) group.classList.add("has-error");
+        valid = false;
+      }
+
+      clearErrors();
+
+      if (!name.value.trim()) markError(name);
+      if (
+        !email.value.trim() ||
+        !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)
+      )
+        markError(email);
+      if (!message.value.trim()) markError(message);
+
+      if (!valid) return;
+
+      /* Gather data */
+      var data = {
+        name: name.value.trim(),
+        email: email.value.trim(),
+        phone: document.getElementById("signup-phone")?.value || "",
+        website: document.getElementById("signup-website")?.value || "",
+        channels: Array.from(
+          document.querySelectorAll(
+            ".checkbox-group input[type=checkbox]:checked",
+          ),
+        ).map(function (c) {
+          return c.value;
+        }),
+        message: message.value.trim(),
+      };
+
+      /* Submit via AJAX */
+      var xhr = new XMLHttpRequest();
+      xhr.open("POST", signupForm.getAttribute("action"), true);
+      xhr.setRequestHeader("Content-Type", "application/json");
+      xhr.onload = function () {
+        signupForm.style.display = "none";
+        document.getElementById("signup-confirm").style.display = "block";
+      };
+      xhr.onerror = function () {
+        signupForm.style.display = "none";
+        document.getElementById("signup-confirm").style.display = "block";
+      };
+      xhr.send(JSON.stringify(data));
     });
   }
 

style.css

@@ -14,7 +14,7 @@
     --dark: #0e0e0e;
     --mid-grey: #7a7265;
     --light-grey: #d6d0c8;
-    --fine-beige: #e8e0d0;
+    --fine-beige: #efe9db;
     --lacueor-dark: #1a1814;
     --lacueor-gold: #c9aa5e;
     --border: rgba(184, 150, 90, 0.25);
@@ -360,7 +360,7 @@ body::before {
     font-size: 9px;
     font-weight: 600;
     letter-spacing: 0.28em;
-    text-transform: uppercase;
+    text-transform: none;
     padding: 12px 32px;
     border: 1px solid;
     transition: all var(--transition);
@@ -812,7 +812,7 @@ footer {
     color: var(--mid-grey);
 }
 
-.form-group input,
+.form-group input:not([type="checkbox"]),
 .signup-form textarea {
     font-family: var(--font-sans);
     font-size: 13px;
@@ -835,7 +835,7 @@ footer {
     color: var(--light-grey);
 }
 
-.form-group input:focus,
+.form-group input:not([type="checkbox"]):focus,
 .signup-form textarea:focus {
     border-color: var(--gold);
     box-shadow: 0 0 0 3px rgba(184, 150, 90, 0.12);
@@ -845,6 +845,10 @@ footer {
     grid-column: 1 / -1;
 }
 
+.form-group--half {
+    grid-column: span 1;
+}
+
 .signup-form textarea {
     resize: vertical;
     min-height: 120px;
@@ -874,6 +878,33 @@ footer {
     color: var(--warm-white);
 }
 
+/* Checkbox group */
+.checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px 20px;
+    padding-top: 4px;
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    font-weight: 300;
+    letter-spacing: 0.04em;
+    color: var(--charcoal);
+    cursor: pointer;
+}
+
+.checkbox-label input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--gold);
+    cursor: pointer;
+    margin: 0;
+}
+
 /* Gold rule above the notice */
 .signup-notice-rule {
     width: 60px;
@@ -887,47 +918,76 @@ footer {
     margin: 0 auto 24px;
 }
 
-/* ============================================================
+/* Confirmation panel */
-   BANNER SELECTOR
+.signup-confirm {
-   ============================================================ */
+    max-width: 500px;
-.banner-selector {
+    margin: 0 auto;
+    text-align: center;
+    padding: 60px 40px;
+}
+
+.signup-confirm-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+.signup-confirm-icon {
+    width: 48px;
+    height: 48px;
+    border: 2px solid var(--gold);
+    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 12px;
+    margin-bottom: 8px;
-    padding: 20px 48px;
-    background: var(--cream);
-    border-bottom: 1px solid var(--border);
-    font-family: var(--font-sans);
-    font-size: 10px;
-    letter-spacing: 0.12em;
-    color: var(--mid-grey);
 }
 
-.banner-selector label {
+.signup-confirm-icon::before {
-    text-transform: uppercase;
+    content: "";
-    font-weight: 500;
+    display: block;
-    letter-spacing: 0.2em;
+    width: 14px;
-    color: var(--gold);
+    height: 7px;
+    border-left: 2px solid var(--gold);
+    border-bottom: 2px solid var(--gold);
+    transform: rotate(-45deg) translateY(-1px);
 }
 
-.banner-selector select {
+.signup-confirm-title {
-    font-family: var(--font-sans);
+    font-family: var(--font-serif);
-    font-size: 11px;
+    font-size: 28px;
+    font-weight: 300;
     letter-spacing: 0.06em;
-    padding: 8px 16px;
-    border: 1px solid var(--border);
-    background: var(--warm-white);
     color: var(--charcoal);
-    cursor: pointer;
-    outline: none;
-    transition: border-color var(--transition);
-    min-width: 130px;
 }
 
-.banner-selector select:hover,
+.signup-confirm-body {
-.banner-selector select:focus {
+    font-size: 13px;
-    border-color: var(--gold);
+    font-weight: 300;
+    line-height: 1.8;
+    color: var(--mid-grey);
+    letter-spacing: 0.02em;
+    max-width: 380px;
+}
+
+/* Error states */
+.form-group .field-error {
+    font-size: 9px;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+    color: #c0392b;
+    margin-top: 2px;
+    display: none;
+}
+
+.form-group.has-error .field-error {
+    display: block;
+}
+
+.form-group.has-error input,
+.form-group.has-error textarea {
+    border-color: #c0392b;
 }
 
 /* ============================================================