<!--
  Gathering Hour: How It Works page
  Created: 2026-08-11 (draft v1)
  Revised: 2026-08-11 (v2: 01/02/03 numbering, no em dashes in copy, Step 2 rebuilt
  around the iPad mockup graphic instead of a photo + feature list)
  Notes: Rebuilt from the "content added" screenshot on the same design system as the
  homepage (gathering-hour-homepage-redesign-2026-08-10.html). Trimmed for length per
  feedback: merged the old "Pick a date / We'll help with the rest" section into Step 2
  (the one genuinely new detail, RSVP auto-updating guest count, now lives there as a
  line under Invitations + RSVPs), and compressed "THE WHOLE POINT" into a one-line
  closer above the email band instead of a full standalone section, since both were
  largely restating the hero.
  Reused photos already logged in the Website Image Library where the screenshot showed
  the same shots (theme mosaic, Host Box + Activity flat lays, dashboard laptop). Flag
  if any of those should actually be different crops.

  2026-08-14: hero headline converted to the site's new two-tone
  treatment (see styles.css), "A beautiful gathering," is now bold
  tomato instead of solid aubergine, "without all the planning." stays
  italic aubergine.

  2026-08-17: same 30% headline bump trialed on the homepage hero,
  rolled out here too since Sarah liked how it read. .hero h1 .hl-black/
  .hl-italic went from 42px/46px to 55px/60px on desktop, 34px/36px to
  44px/47px on the mobile breakpoint, same ratio as the homepage.

  2026-08-17, later same day: replaced the plain "CLOSER STRIP" text link
  ("Spend less time planning. More time at the table." -> "Find a
  gathering") with an Action Band (see styles.css, the new shared
  .closer-band component): "The hard part is already done. Choose
  something to host." -> "Browse Gatherings ->", linking to
  /gatherings.html. The old .closer-strip/.closer-line CSS was removed,
  nothing else on the page used it.

  2026-08-18: applied the new Gathering Hour Web Type Scale (see
  styles.css). Hero H1 (60px/55px desktop, 47px/44px mobile) kept as the
  intentional exception per Sarah. .step-title (each numbered step's
  Cormorant headline: "Choose your gathering," "We already did the
  planning part," "Make it yours") 32px -> 40px (Editorial tier), 32px
  mobile override added. .host-card-title 17px -> 20px (H3/card-title
  tier, 18px mobile added). .host-eyebrow normalized to match the shared
  eyebrow spec exactly, 11px/600 -> 13px/700, 12px mobile added. Body
  copy floored at 16px: .hero-body, .step-body, .step-closer all moved
  off 14.5-15px. .host-card-desc floored at 14px (meta). .step-num (the
  giant "01/02/03" numeral) left alone, decorative display flourish, not
  content hierarchy.

  2026-08-19: closing table photo's padding-bottom 0 -> 48px, so there's
  breathing room between the photo and the eggplant Action Band below it
  instead of the two sitting flush. Closer headline copy replaced per
  Sarah: "The hard part is already done. / Choose something to host."
  (two-tone, italic + bold) -> a single bold line, "All that's left is
  to enjoy it." Dropped the italic .cl-italic span since only one line
  of copy was given, rather than inventing a second line to fill the old
  two-span shape.

  2026-08-19, later same day: .closer-eyebrow copy "Ready when you are"
  -> "The best part".

  2026-08-19, later same day: new sitewide corner-radius system (see
  styles.css). .hero-img (data-slot="hiw-hero-dashboard", same laptop
  dashboard photo as the homepage's plan-img) is Product/UI imagery,
  so it got the "can feel digital" exception, border-radius 4px ->
  8px, done before the sitewide sed. Every other inline
  border-radius:4px on this page (mosaic grid photos, Host Box and
  Activity Kit flat-lays, closing table photo) is real editorial
  photography, reduced to 2px.

  2026-08-19, later same day: eyebrow reduction pass, following the
  new sitewide rule (max 1-2 eyebrows per page, banners exempt). Cut
  the hero's "How it works" eyebrow, the page title/nav/H1 already say
  what page this is. Cut the two "Add a Host Box" / "Add an Activity"
  .host-eyebrow labels in Step 3, both were redundant with the card
  titles right below them ("Everything for the table.", "Something to
  do together."). Removed the now-unused .host-eyebrow CSS rule and
  its mobile override. Kept the numbered 01/02/03 step markers, those
  aren't eyebrows, they're this page's own distinct structural device.
  Kept the closer band's "The best part" and the newsletter band's
  "From Gathering Hour", both inside purple/pink banners, exempt per
  Sarah's rule.

  2026-08-21: sitewide Flamingo Estate rollout. The shared .closer-band
  now defaults to paper instead of aubergine (see styles.css), so "The
  best part" eyebrow lost its banner-exemption from the note above and
  is cut too. Footer dropped its now-meaningless divider-top class
  (garnet footer color reads as its own break).
  2026-08-21, later same day: migrated every i.imgur.com image reference
  on this page to Shopify's own file library (cdn.shopify.com), after
  discovering Imgur has been fully blocked in the UK since September
  2025 (an Online Safety Act/ICO issue with Imgur's parent company,
  not a temporary glitch) and has also had spotty blocks elsewhere
  (Taiwan uploads). Imgur was only ever meant as a placeholder host
  during early build, this closes that out. Each image was re-uploaded
  via Shopify's fileCreate mutation with its existing alt text carried
  over, same photos, same alt text, just reliable hosting on
  infrastructure Gathering Hour already depends on for checkout.

  2026-08-27: sitewide link audit before staging publish turned up a dead
  link here, "Explore Host Boxes ->" pointed to /host-boxes.html, a page
  that was never built anywhere in the project (probably a leftover from
  early planning, before Host Box info got folded into the Gatherings/
  theme pages instead of getting its own page). Repointed to
  /gatherings.html per Sarah's call, since that's where the Host Box
  physical component actually lives, bundled into each themed Gathering.
  2026-08-27: footer reverted from garnet back to cream sitewide (see
  styles.css), Sarah didn't like it live. Footer here picks up the
  shared default automatically, no page-scoped CSS to change. Restored
  the divider-top class on the <footer> tag, needed again now that
  footer matches the body's cream background.

  2026-09-09: SITEWIDE ROLLOUT, first page. Homepage's "new direction"
  trial (no pink, squared photography, aubergine dark moments, bold
  typography) is approved and rolling out page by page; this is the
  first. Three changes here:
  - Nav simplified to How it works / About / Shop pill, matching the
    homepage (see nav's own comment). toggleShopMenu() removed from the
    closing <script> block, nothing calls it anymore.
  - Corner radius squared off everywhere on this page (was a mix of 2px
    for editorial photography and 8px for the laptop dashboard mockup's
    "Product/UI" exception from the 2026-08-19 system). That exception
    is retired: the new system doesn't carve out UI imagery, every photo
    on the page is now flush/square (0), including the dashboard image.
  - Newsletter band: no page-scoped change needed. The aubergine
    treatment (pink -> aubergine, light-on-dark text) was promoted into
    the shared .cta-band default in styles.css as part of this rollout,
    so this page's plain <section class="cta-band"> picks it up
    automatically.
  .badge.pink ("Optional add-on" tags) untouched, that class was already
  remapped off actual pink sitewide back in Phase 3 of the homepage
  trial (see styles.css), so no visual change needed here.

2026-09-11: added the site favicon (Sarah's gh-mark-cream.png monogram, saved to /assets and rendered down to favicon.ico, 16x16, 32x32, and a 180x180 apple-touch-icon). Same four <link> tags added to every page's <head>, right after <title>.

2026-09-17: hero dashboard photo swapped for Sarah's new laptop photo (saved locally as /assets/gathering-plan-laptop.jpg, replacing the old Shopify-hosted gathering-hour-bYuDnwI.jpg) -- shows the actual current Overview.html "Tea in the Garden" page instead of a generic/older dashboard mock. Same image also swapped into the homepage's "Start with the Plan" explainer image -- see that page's own changelog note.

2026-09-17, later same day: Step 2 iPad mockup (data-slot="plan-detail-mockup") swapped for Sarah's new graphic, saved locally as /assets/gathering-plan-ipad-detail.jpg -- shows the current orange-icon Gathering Plan design with today's real tab names (Invitations + Guests, Menu, Shopping List, Host Guide, Potluck, Music + Printables) instead of the old pink-icon mock with outdated labels (Invitations + RSVPs, etc.). Alt text updated to match. .plan-mockup-img has height:auto so no fixed aspect-ratio conflict with the new image's dimensions.
2026-10-05: Vol. 03 card renamed "The Dinner Party" (was the placeholder "Gathering Hour Party").
2026-10-26 (Sarah): cards match the new Browse Gatherings top row: Tea in the Garden 01, Golden Hour 02, Diwali Lights 03 (replaces The Dinner Party, now in Coming to the table), Apartment Café 04.
2026-10-09: footer gets an "Affiliate Disclosure" link next to Privacy & Terms (Sarah's affiliate handoff).
2026-10-15: Sovrn Commerce (VigLink) affiliate script added before </body>.
2026-10-22 (Sarah): The Dinner Party now "Coming November"; Apartment Café "Coming soon" (pre-order planned for next week).
2026-10-22: "Decorations" (/decorations.html) added to the Shop menu and footer Shop column, after Activity Kits (Sarah).
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2026-09-21: Google Tag Manager added sitewide (container GTM-PCGXB7FK) -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PCGXB7FK');</script>
<!-- End Google Tag Manager -->
<!-- 2026-09-22: Klaviyo onsite tracking added sitewide, per Sarah -- unlocks
     Viewed Product tracking for the browse-abandonment flow. The object-
     loader script goes first so klaviyo.track() calls on product pages
     don't race the async klaviyo.js load. -->
<!-- Klaviyo -->
<script type="text/javascript">
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}();
</script>
<script type="text/javascript" async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=UhUBGL"></script>
<!-- End Klaviyo -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gathering Hour: How It Works</title>
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/styles.css?v=20261026a">
<link rel="stylesheet" href="/signup-popup.css?v=20261004a">
<style>

/* ── HERO ── */
.hero {
  display: grid;
  grid-template-columns: 0.78fr 1.05fr;
  gap: 56px;
  align-items: center;
  min-height: 64vh;
  padding-top: 26px;
  padding-bottom: 32px;
}
.hero h1 { margin-bottom: 22px; }
/* Two-tone hero headline (site standard, see styles.css) */
.hero h1 .hl-black { font-size: 42px; display: block; color: var(--hl-accent); letter-spacing: -1px; line-height: 1.05; }
.hero h1 .hl-italic { font-size: 60px; display: block; color: var(--hl-serif); margin-bottom: 4px; line-height: 1.0; }
.hero-body {
  font-size: 16px;
  font-weight: 400;
  color: var(--espresso-70);
  line-height: 1.65;
  max-width: 400px;
  margin-bottom: 26px;
}
.hero-img { aspect-ratio: 4 / 3.3; max-height: 74vh; }

/* ── STEP SECTIONS ── */
.step-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 14px;
}
.step-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 54px;
  line-height: 1;
}
.step-num { color: var(--tomato); }
.step-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  color: var(--espresso);
}
.step-body { font-size: 16px; color: var(--espresso-70); line-height: 1.6; max-width: none; margin-bottom: 10px; } /* 2026-10-01: was max-width 620px, which forced a mid-page wrap; supporting lines are now one short sentence each */
.step-body:last-of-type { margin-bottom: 16px; }
.step-1 .gath-catalog-grid { margin-top: 20px; } /* 2026-10-01: breathing room under "Browse gatherings" link */


.plan-mockup-img {
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 12px;
}
.plan-mockup-img img { width: 100%; height: auto; }


.table-photo-img { aspect-ratio: 21 / 8; }

/* Explicit rows (text / image / link) so both columns' images and links
   line up on the same baseline, no matter how long either description runs. */
.host-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 0 40px; margin-top: 26px; }
.host-card-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--name); margin-bottom: 4px; } /* 2026-10-01: now a product name (Add a Host Box / Activity Kit) -> name style, per headline colour rule */
.host-card-desc { font-size: 14px; color: var(--espresso-70); margin-bottom: 16px; }
.host-img { aspect-ratio: 16 / 10; margin-bottom: 22px; align-self: start; display: block; position: relative; overflow: hidden; }
.host-img img { transition: transform 0.3s ease; }
.host-img:hover img { transform: scale(1.03); }
/* 2026-10-01, per Sarah: photos are now links, and the "Optional add-on"
   tag is a solid cream label (same style as the VOL. tags on the gathering
   cards) instead of the translucent .badge.pink, which was hard to read. */
.host-tag { position: absolute; top: 10px; right: 10px; z-index: 1; background: var(--paper); color: var(--name); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 8px; }


/* ── RESPONSIVE (page-specific: shared nav/section/footer rules live in styles.css) ── */
@media (max-width: 900px) {
  .hero, .host-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero { min-height: auto; padding-top: 28px; }
  .hero h1 .hl-black { font-size: 36px; letter-spacing: -0.5px; }
  .hero h1 .hl-italic { font-size: 44px; }

    .step-head { flex-wrap: wrap; }
  .table-photo-img { aspect-ratio: 4 / 3; }
  .step-title { font-size: 32px; }
  .host-card-title { font-size: 18px; }

  /* Single column: put each card's text, image and link back in order,
     since desktop uses text/text, image/image, link/link rows. */
  .host-grid > *:nth-child(1) { order: 1; }
  .host-grid > *:nth-child(3) { order: 2; }
  .host-grid > *:nth-child(5) { order: 3; }
  .host-grid > *:nth-child(2) { order: 4; }
  .host-grid > *:nth-child(4) { order: 5; }
  .host-grid > *:nth-child(6) { order: 6; }
}
</style>
</head>
<body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PCGXB7FK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- ── NAV, SIMPLIFIED (2026-09-09) ──
     Matches the homepage's simplified nav from the new-direction
     rollout: How it works / About / Shop pill, no dropdown. Dropped the
     separate Gatherings link, the Journal coming-soon link, and the
     Shop hover/tap dropdown. toggleShopMenu() and its outside-click
     listener removed from the closing <script> block since nothing
     calls them anymore. -->
<nav>
  <a class='nav-logo' href='/'><em>gathering</em><strong>hour</strong></a>
  <button class="nav-toggle" aria-label="Open menu" onclick="document.querySelector('nav').classList.toggle('nav-open')">
    <span></span><span></span><span></span>
  </button>
  <ul class="nav-links">
    <li><a href='/how-it-works'>How it works</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/journal'>Journal</a></li>
    <li class="nav-shop">
      <a class='btn-pill btn-tomato' href='/gatherings' onclick='return toggleShopMenu(event)'>Shop</a>
      <div class="nav-shop-menu">
        <a href='/gatherings'>Gatherings</a>
        <a href='/activity-kits'>Activity Kits</a>
        <a href='/decorations'>Decorations</a>
        <a href='/gift-cards'>Gift Cards</a>
      </div>
    </li>
  </ul>
</nav>

<script>
// 2026-09-23, per Sarah: "Shop" nav pill becomes a dropdown again (Themes,
// Activities -- Gift Shop to follow once that's live). Reuses the
// .nav-shop/.nav-shop-menu CSS already in styles.css from the 2026-08-14
// version of this same idea (hover opens it on desktop via CSS alone;
// touch devices need this JS since :hover doesn't fire on tap). The Shop
// pill keeps its real href to gatherings.html so it still works with JS
// off or on desktop hover; on touch, tapping it just opens the menu
// instead of navigating immediately.
function toggleShopMenu(e){
  if (!window.matchMedia('(hover: none)').matches) return true;
  e.preventDefault();
  var el = e.currentTarget.closest('.nav-shop');
  if (el) el.classList.toggle('open');
  return false;
}
document.addEventListener('click', function(e){
  var open = document.querySelector('.nav-shop.open');
  if (open && !open.contains(e.target)) open.classList.remove('open');
});
</script>


<!-- ── HERO ── -->
<section class="hero">
  <div>
    <h1>
      <!-- 2026-10-01, per Sarah: treatment flipped to the standard order (serif italic first, bold sans second), words unchanged -->
      <span class="hl-italic headline-serif">A beautiful gathering,</span>
      <span class="hl-black headline-black">without all the planning.</span>
    </h1>
    <p class="hero-body">Choose a gathering you love. Your invitations, menu, shopping list, timeline and hosting guide are already waiting.</p>
    <a class='btn-pill btn-tomato' href='/gatherings'>Choose a Gathering →</a> <!-- 2026-10-01, per Sarah: red pill, matches the homepage hero CTA -->
  </div>
  <div class="img-slot hero-img has-photo" data-slot="hiw-hero-dashboard">
    <img src="/assets/gathering-plan-laptop.jpg" alt="Laptop on a styled table showing the Gathering Page dashboard, Tea in the Garden Overview page" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
  </div>
</section>

<!-- ── STEP 1 ── -->
<section class="step-1 section-tight" style="padding-top: 28px; padding-bottom: 28px;">
  <div class="step-head">
    <span class="step-num">01</span>
    <span class="step-title">Choose your gathering</span>
  </div>
  <!-- 2026-10-01, per Sarah: cut the second explanatory paragraph -- the
       title + gathering cards already say "choose a gathering". -->
  <p class="step-body">Choose your date and guest count. We'll take it from there.</p>
  <a class='link-arrow' href='/gatherings'>View all gatherings →</a>

  <!-- 2026-10-01, per Sarah: the four tall mosaic photos were a leftover
       component -- replaced with the real gathering cards from Browse
       Gatherings (shared .gath-catalog-* styles in styles.css). Coming-soon
       cards link to /gatherings.html since this page has no waitlist modal.
       Keep in sync with the top row of gatherings.html. -->
  <div class="gath-catalog-grid">
  
      <a class='gath-catalog-card' href='/tea-in-the-garden'>
        <div class="gath-catalog-img">
          <span class="gath-catalog-vol">Vol. 01</span>
          <img src="/assets/tea-in-the-garden-table.jpg" alt="Tea in the Garden, garden table with Victoria sponge, tiered stands, blue and white china and hydrangeas">
        </div>
        <span class="gath-catalog-name">Tea in the Garden</span>
        <span class="gath-catalog-tags">Brunch <i>&middot;</i> 6–12 guests <i>&middot;</i> Year&#8209;round</span>
        <span class="gath-catalog-status is-now">Available now &middot; From $22</span>
      </a>
  
      <a class='gath-catalog-card' href='/golden-hour'>
        <div class="gath-catalog-img">
          <span class="gath-catalog-vol">Vol. 02</span>
          <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-z4MgD8q.jpg?v=1787475892" alt="Golden Hour, cheese board with figs, olives and brie">
        </div>
        <span class="gath-catalog-name">Golden Hour</span>
        <span class="gath-catalog-tags">Dinner <i>&middot;</i> 6–12 guests <i>&middot;</i> Year&#8209;round</span>
        <span class="gath-catalog-status is-now">Available now &middot; From $22</span>
      </a>
  
      <a class='gath-catalog-card' href='/diwali-lights'>
        <div class="gath-catalog-img">
          <span class="gath-catalog-vol">Vol. 03</span>
          <img src="/assets/diwali/diwali-lanterns-table.jpg" alt="Brass lanterns with candles on an engraved tray, ringed with marigolds and red roses, on a red velvet cloth under a ribbon garland">
        </div>
        <span class="gath-catalog-name">Diwali Lights</span>
        <span class="gath-catalog-tags">Festive feast <i>&middot;</i> 6–18 guests <i>&middot;</i> Autumn</span>
        <span class="gath-catalog-status is-now">Available now &middot; $22</span>
      </a>
  
      <a class='gath-catalog-card' href='/gatherings'>
        <div class="gath-catalog-img">
          <span class="gath-catalog-vol">Vol. 04</span>
          <img src="/assets/apartment-cafe-fall.jpg" alt="Apartment Café fall edition, pastries, scones and pumpkin bread on a kitchen counter">
        </div>
        <span class="gath-catalog-name">Apartment Café</span>
        <span class="gath-catalog-tags">Brunch <i>&middot;</i> 6–10 guests <i>&middot;</i> Fall</span>
        <span class="gath-catalog-status is-coming">Coming soon</span>
      </a>
  
    </div>
</section>

<!-- ── STEP 2 ── -->
<section class="step-2 section-tight" style="padding-top: 28px; padding-bottom: 56px;">
  <div class="step-head">
    <span class="step-num">02</span>
    <span class="step-title">We already did the planning part.</span>
  </div>
  <p class="step-body">Your entire gathering, planned in one place.</p> <!-- 2026-10-01, per Sarah -->

  <div class="img-slot plan-mockup-img has-photo" data-slot="plan-detail-mockup">
    <img src="/assets/gathering-plan-ipad-detail-burgundy.jpg" alt="Gathering Plan dashboard on an iPad, with Invitations + Guests, Menu, Shopping List, Host Guide, Potluck and Music + Printables called out" style="display:block;">
  </div>

  <!-- 2026-10-01, per Sarah: "No Pinterest spiral..." closer line and the
       "Find a gathering" link under the iPad both cut; iPad graphic updated
       to the burgundy call-out version. -->
</section>

<!-- ── STEP 3 ── -->
<section class="step-3 section-tight" id="activity-kits" style="scroll-margin-top: 80px; padding-top: 56px; padding-bottom: 56px; background: var(--mushroom, #F2E9E2);"> <!-- 2026-10-01, per Sarah: step 03 on the putty colour-break band (same as homepage How It Works); 56px cream above it, 56px inside top and bottom -->
  <div class="step-head">
    <span class="step-num">03</span>
    <span class="step-title">Make it yours</span>
  </div>
  <!-- 2026-10-01, per Sarah: hierarchy does the explaining -- name +
       one short line per add-on, long descriptions cut. -->
  <p class="step-body">Add as much or as little as you want.</p>

  <div class="host-grid">
    <div>
      <p class="host-card-title">Add a Host Box</p>
      <p class="host-card-desc">Everything you need for the table.</p>
    </div>
    <div>
      <p class="host-card-title">Add an Activity Kit</p>
      <p class="host-card-desc">Something to do together.</p>
    </div>
    <a class='img-slot host-img has-photo' data-slot='hiw-host-box-flatlay' href='/gatherings'>
      <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-Dc7iGIe.jpg?v=1787475892" alt="Host Box flat lay, plates, napkins, menus, place cards" style="width:100%; height:100%; object-fit:cover; display:block; border-radius:2px;">
      <span class="host-tag">Optional</span>
    </a>
    <a class='img-slot host-img has-photo' data-slot='hiw-activity-kit-flatlay' href='/painting-kit'>
      <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-3Uy50nb.jpg?v=1787475893" alt="Activity Kit flat lay, painting supplies, florals" style="width:100%; height:100%; object-fit:cover; display:block; border-radius:2px;">
      <span class="host-tag">Optional</span>
    </a>
    <a class='link-arrow' href='/gatherings'>Explore Host Boxes →</a>
    <a class='link-arrow' href='/painting-kit'>Explore Activity Kits →</a>
  </div>
</section>

<!-- 2026-09-22: removed the closing table photo section -- Sarah felt it
     read as an anomaly right before the Action Band. Numbered steps now
     lead straight into the closer. -->

<!-- ── CLOSER: Action Band ── -->
<section class="closer-band">
  <h2 class="closer-headline">
    <!-- 2026-10-01, per Sarah: was "All that's left is to enjoy it." -->
    <span class="cl-italic">Less time planning.</span>
    <span class="cl-black">More time gathering.</span>
  </h2>
  <div class="closer-btns">
    <a class='btn-pill btn-tomato' href='/gatherings'>Choose a Gathering →</a>
  </div>
</section>

<!-- ── CTA / EMAIL BAND ── -->
<section class="cta-band">
  <div>
    <p class="cta-eyebrow">From Gathering Hour</p>
    <p class="cta-headline">Stay at the table.</p>
    <p class="cta-body">New gatherings, first looks and hosting inspiration.</p>
  </div>
  <div>
    <form class="cta-form" onsubmit="return false;">
      <input type="email" placeholder="Your email address" required />
      <button type="submit" class="link-arrow" style="background:none;border:none;cursor:pointer;">Join us →</button>
    </form>
      <p class="cta-consent">By signing up, you agree to receive marketing emails from Gathering Hour. Unsubscribe any time. See our <a href='/privacy-terms'>Privacy Policy</a>.</p>
    <!-- 2026-10-26 (Sarah): social icons under the sign-up, cream on burgundy -->
    <div class="cta-social">
      <a href="https://www.instagram.com/gathering.hour/" target="_blank" rel="noopener" aria-label="Gathering Hour on Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></a>
      <a href="https://www.pinterest.com/GatheringHour/" target="_blank" rel="noopener" aria-label="Gathering Hour on Pinterest"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg></a>
      <a href="https://www.tiktok.com/@gathering.hour" target="_blank" rel="noopener" aria-label="Gathering Hour on TikTok"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></a>
    </div>
  </div>
</section>

<!-- ── FOOTER ── -->
<footer class="divider-top">
  <div class="footer-top">
    <div class="footer-col">
      <h5>Gathering Hour</h5>
      <a href='/how-it-works'>How it Works</a>
      <a href='/founding-friends'>Founding Friends</a>
      <a href='/corporate'>Groups &amp; Teams</a>
      <a href='/gatherings'>Gatherings</a>
    </div>
    <div class="footer-col">
      <h5>Shop</h5>
      <a href='/gatherings'>Browse Gatherings</a>
      <a href='/activity-kits'>Activity Kits</a>
      <a href='/decorations'>Decorations</a>
      <a href='/gift-cards'>Gift Cards</a>
    </div>
    <div class="footer-col">
      <h5>Support</h5>
      <a href='/faq'>FAQ</a>
      <a href='/shipping-returns'>Shipping &amp; Returns</a>
      <a href='/order-tracking'>Order Tracking</a>
      <a href='/contact'>Contact</a>
      <a href='/privacy-terms'>Privacy &amp; Terms</a>
      <a href='/affiliate-disclosure'>Affiliate Disclosure</a>
      <a href="#" class="cookie-prefs-link">Cookie Preferences</a>
    </div>
    <div class="footer-col">
      <h5>Company</h5>
      <a href='/about'>About</a>
      <a href='/journal'>Journal</a>
      <a href='/contact'>Contact</a>
    </div>
  </div>

  <hr class="footer-divider">

  <div class="footer-brand">
    <img src="/assets/gh-logo-transp.png" alt="" class="footer-brand-logo">
    <p class="footer-tagline">Beautiful gatherings, already planned.</p>
    <ul class="footer-social">
      <li><a href="https://www.instagram.com/gathering.hour/" target="_blank" rel="noopener">Instagram</a></li>
      <li><a href="https://www.pinterest.com/GatheringHour/" target="_blank" rel="noopener">Pinterest</a></li>
      <li><a href="https://www.tiktok.com/@gathering.hour" target="_blank" rel="noopener">TikTok</a></li>
    </ul>
  </div>

  <div class="footer-bottom">
    <p>© 2026 Gathering Hour</p>
  </div>
</footer>

<!-- ── COOKIE CONSENT BANNER ──
     Notice + opt-out style, see styles.css for the reasoning. Shown
     once per browser until dismissed; "Turn off analytics cookies"
     sets a persistent opt-out flag for when GA4 is wired in. Same
     block duplicated on every page, kept in sync, per this site's
     established "no shared JS file" pattern. -->
<div class="cookie-banner" id="cookieBanner" role="region" aria-label="Cookie notice">
  <div class="cookie-banner-inner">
    <p class="cookie-banner-text">We use cookies to keep your cart working and understand how visitors use this site. See our <a href='/privacy-terms#cookies'>Cookie Policy</a> for details.</p>
    <div class="cookie-banner-btns">
      <button type="button" class="cookie-banner-optout" id="cookieOptOutBtn">Turn off analytics cookies</button>
      <button type="button" class="cookie-banner-accept" id="cookieAcceptBtn">Got it</button>
    </div>
  </div>
</div>


<script>
  (function () {
    var nav = document.querySelector('nav');
    function onScroll() {
      if (window.scrollY > 24) nav.classList.add('nav-scrolled'); // 2026-10-05: was 40, matches the header's 28px slide (styles.css nav)
      else nav.classList.remove('nav-scrolled');
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
  })();
</script>

<script>
  // ── COOKIE CONSENT BANNER ──
  // Notice + opt-out (not block-until-accept), see styles.css header
  // comment for why. Preference lives in localStorage, not a cookie,
  // so the cookie notice itself doesn't need a cookie to work.
  (function () {
    var DISMISSED_KEY = 'gh_cookie_notice_dismissed';
    var OPTOUT_KEY = 'gh_analytics_optout';
    var banner = document.getElementById('cookieBanner');
    if (!banner) return;

    function updateOptOutLabel() {
      var btn = document.getElementById('cookieOptOutBtn');
      if (!btn) return;
      var isOut = localStorage.getItem(OPTOUT_KEY) === 'true';
      btn.textContent = isOut ? 'Analytics cookies are off' : 'Turn off analytics cookies';
    }

    if (localStorage.getItem(DISMISSED_KEY) !== 'true') {
      banner.classList.add('visible');
    }

    var acceptBtn = document.getElementById('cookieAcceptBtn');
    if (acceptBtn) {
      acceptBtn.addEventListener('click', function () {
        localStorage.setItem(DISMISSED_KEY, 'true');
        banner.classList.remove('visible');
      });
    }

    var optOutBtn = document.getElementById('cookieOptOutBtn');
    if (optOutBtn) {
      optOutBtn.addEventListener('click', function () {
        var isOut = localStorage.getItem(OPTOUT_KEY) === 'true';
        localStorage.setItem(OPTOUT_KEY, isOut ? 'false' : 'true');
        updateOptOutLabel();
      });
    }

    document.querySelectorAll('.cookie-prefs-link').forEach(function (el) {
      el.addEventListener('click', function (e) {
        e.preventDefault();
        banner.classList.add('visible');
      });
    });

    updateOptOutLabel();
  })();
</script>

<script src="/signup-popup.js?v=20261004a"></script>
<!-- Sovrn Commerce (VigLink): turns plain retailer links into affiliate links (2026-10-15, affiliate handoff) -->
<script type="text/javascript">
  var vglnk = {key: '0e9a4c55bc62b5523d88dc826290b18e'};
  (function(d, t) {var s = d.createElement(t);
    s.type = 'text/javascript';s.async = true;
    s.src = '//cdn.viglink.com/api/vglnk.js';
    var r = d.getElementsByTagName(t)[0];
    r.parentNode.insertBefore(s, r);
  }(document, 'script'));
</script>
</body>
</html>