<!--
  Gathering Hour: FAQ page
  Created: 2026-08-13
  Notes: Full rebuild on the shared design system (cream background, orange
  eyebrow, large Cormorant headline, Archivo questions, thin divider lines),
  replacing the old standalone dark-burgundy FAQ page. Structural changes
  from the old version, per Sarah's spec: no 52vh hero, no Q01/Q02
  numbering, a row of pill category filters, a "currently viewing" sidebar
  (no question count), and a wide accordion.

  Content changes from the old version, flagged and corrected rather than
  carried over as-is:
  - "Gathering Page" renamed to "Gathering Plan" throughout, matching
    current product naming.
  - Removed the "delivered within 24 hours" / manual-review language for
    Gathering Plans, since that described the old fulfillment model.
  - Removed specific Host Box contents and the separate Premium Host Box
    tier, since neither is live yet and the exact contents aren't final.
  - Removed firm shipping windows and physical-product refund/return
    policy specifics, since Host Boxes and Activity Kits haven't launched
    and those policies aren't set. "Where will physical products ship?"
    and "What happens if a physical order arrives damaged?" are answered
    honestly as "not finalized yet" rather than with invented specifics.
  - Founding Friends and Corporate & Events questions removed from this
    page entirely, per Sarah's note that those belong on their own pages
    (founding-friends.html, corporate.html) rather than making every
    visitor wade through membership/corporate questions here. (Renamed
    from "Founding Members" to "Founding Friends" 2026-08-14, see
    founding-friends-2026-08-14.html.)
  - Added two questions Sarah and I agreed on beyond her original list:
    "Can I preview a Gathering Plan before I buy?" (Getting Started, links
    to the live Tea in the Garden page) and "Can I turn the activity off?"
    (Your Gathering Plan, carried over from the old FAQ since it's a real,
    already-documented feature).

  2026-08-14: rebuilt after this file (and gatherings.html, shipping.html)
  disappeared from the outputs folder between sessions. Reconstructed from
  this session's own conversation history, should be byte-for-byte
  equivalent to the version Sarah last approved.

  2026-08-14, later same day: hero headline converted to the site's new
  two-tone treatment (see styles.css), "A few things" stays italic
  aubergine, "you might be wondering." is now bold tomato Archivo Black.

  2026-08-17: the "Still stuck?" aubergine band was Sarah's favorite of
  the site's saturated-color moments, she wants it as a repeatable
  Gathering Hour component (small eyebrow, editorial serif line, bold
  action line, primary + optional secondary button) on other important
  pages, not just here. Promoted it from page-scoped .faq-stuck-* classes
  to a shared .closer-band/.closer-eyebrow/.closer-headline (.cl-italic/
  .cl-black)/.closer-btns component in styles.css, so this page, the
  homepage, and gatherings.html (first two rollout spots) all share one
  real implementation instead of copies that can drift apart. Visual
  result here is unchanged, same copy, same look, just renamed classes
  pointing at the shared component.

  2026-08-18: applied the new Gathering Hour Web Type Scale (see
  styles.css). Not on Sarah's exception list, so .faq-hero-headline's two
  spans (46px/42px mismatched) unified to 52px/52px (Hero tier), mobile
  34px/30px mismatched -> 40px/40px. .faq-sidebar-cat-name 32px -> 40px
  (Editorial tier), 32px mobile added. .faq-sidebar-label (a true
  eyebrow-style caps label) matched to the shared 13px/700/0.14em spec,
  12px mobile added. .faq-hero-body and .faq-answer floored to 16px
  (body), the latter matching the same fix already made on Founding
  Friends' and Painting Kit's FAQ answers for consistency. .faq-sidebar-
  stuck 13px -> 14px (meta). .faq-cat-tab (pill-style category filter)
  and .faq-q-icon left alone, UI chrome.

  2026-08-19, later same day: eyebrow reduction pass, per the new
  sitewide rule (max 1-2 per page, banners exempt). Cut the hero's
  "FAQ" eyebrow, redundant with the page title/nav/headline. Kept
  "Currently viewing" (.faq-sidebar-label), that's a live filter-state
  indicator, functional UI, not decoration. Kept the closer band's
  "Still stuck?" and the newsletter band's "From Gathering Hour", both
  inside purple/pink banners, exempt per Sarah's rule.

  2026-08-20: fixed the two-tone hero headline's second line running on
  the same line as the first instead of breaking. .faq-hero-headline
  .hl-italic/.hl-black never got display: block, which every other
  page sets per the shared two-tone headline pattern (see styles.css).
  Same bug found and fixed sitewide today (Contact, Activity Kits,
  Founding Friends, Gatherings, Order Tracking, Privacy & Terms,
  Shipping & Returns).

  2026-08-20, later same day: Sarah asked to center the content on the
  "practical" pages (FAQ, Shipping & Returns, Privacy & Terms, Order
  Tracking) to see if it reads better than hugging the left edge.
  .faq-body (the sidebar + accordion grid) had no max-width at all, so
  it stretched full-bleed; gave it max-width: 1036px (220px sidebar +
  56px gap + 760px accordion, matching .faq-accordion's own max-width
  exactly) plus margin: 0 auto. .faq-hero's max-width was bumped from
  720px to the same 1036px and centered too, so the hero's left edge
  lines up with the sidebar's left edge below it rather than sitting
  narrower and off-center above the wider grid. The hero copy itself
  doesn't get any wider, since .faq-hero-body already has its own
  max-width: 560px for readability, only the outer container widened.

  2026-08-20, later same day: the category filter pills (.faq-cats,
  "Getting Started" / "Your Gathering Plan" / etc.) were missed in the
  centering pass above, still had no max-width so they stayed flush
  against the section's left padding while the hero and sidebar/
  accordion below them were now centered. Gave .faq-cats the same
  max-width: 1036px + margin: 0 auto so the pills line up with the
  content above and below.

  2026-08-20, later same day: Sarah flagged that the hero headline was
  STILL not lined up with the pills/sidebar, even after the above fix
  (both used identical max-width: 1036px + margin: 0 auto, but on two
  separately-centered elements, hero being its own <section> and pills/
  body living in a different one). Verified with a rendered screenshot
  that there was a genuine ~45px left-edge gap between them, not just
  an optical illusion from the italic headline's glyph shape. Root
  fix: merged the hero and the category+accordion area into one
  <section class="faq-hero-section">, and introduced one shared
  .faq-container (max-width: 1036px, margin: 0 auto) that directly
  wraps the headline, intro, pills AND the sidebar/accordion grid as
  siblings. Since they're now children of the exact same centered box
  instead of three independently-centered elements, they can't drift
  out of alignment regardless of rendering quirks. .faq-hero and the
  old wrapping section-tight <section> are gone; .faq-hero-section
  carries the page's own padding-top (32px, was on .faq-hero) and
  padding-bottom (40px, was on the old section-tight wrapper).
  .faq-cats's own top padding went from 22px to 70px to absorb the
  vertical gap that used to come from the two sections sitting back to
  back (old hero padding-bottom 8px + section-tight padding-top 40px +
  faq-cats's own 22px = 70px total, preserved exactly). .faq-body's
  own padding-top (40px) is unchanged.

  2026-08-21: sitewide Flamingo Estate rollout. Dropped the closer-band's
  "Still stuck?" eyebrow, it loses its banner-exemption now that the
  shared .closer-band defaults to paper instead of aubergine (see
  styles.css). Also swapped the secondary "hello@..." button off
  .btn-outline-paper, which was styled for a dark background and would've
  been invisible here, onto the plain .link-arrow style instead. Footer
  also dropped its now-meaningless divider-top class (the color change
  from paper to garnet reads as its own break).
  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, tenth page. This page has no photos and
  no pink usage, so the only change is the nav: simplified to How it
  works / About / Shop pill, matching the homepage. toggleShopMenu()
  removed from the closing <script> block. Newsletter band needs no
  page-scoped change, picks up the new aubergine default from the
  shared .cta-band in styles.css automatically.

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 headline sized up further to match Gatherings' finalized "oversized header treatment" (fluid clamp, tighter letter-spacing/line-height) -- see the CSS comment above .faq-hero-headline for the full spec and the flagged wrap risk on this page's longer line.
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: "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: FAQ</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 (small, text-only, no photo) ──
   2026-08-20: .faq-hero-section is now the ONLY element with side
   padding/background for this whole area; .faq-container is the ONLY
   place max-width/centering is declared, and the hero, pills and
   sidebar/accordion are all its direct or nested children, so they
   share one box and can't drift apart the way three separately
   max-width'd elements did (see header comment). */
.faq-hero-section { padding-top: 32px; padding-bottom: 40px; }
.faq-container { max-width: 1036px; margin: 0 auto; }
.faq-hero-headline { margin-bottom: 20px; }
/* Two-tone hero headline (site standard, see styles.css). 2026-09-17:
   sized up to the "oversized header treatment" numbers nailed down on
   Gatherings (see that page's CSS comment for the full spec/reasoning) --
   fluid clamp instead of a fixed px, near-flush 2px gap, -0.01em
   letter-spacing, breakpoint-varying line-height. Colors (aubergine
   italic / tomato black) unchanged -- this pass is sizing only. FAQ's
   longest line ("you might be wondering.", 24 characters) is a bit
   longer than Gatherings' own tested line ("without the stress.", 20) --
   flag if this wraps to two lines; step the clamp ceiling down in 4px
   increments (84px, 80px, 76px...) the same way Gatherings' own ceiling
   got corrected if so. */
.faq-hero-headline .hl-italic,
.faq-hero-headline .hl-black {
  font-size: clamp(2.875rem, 8vw, 5.5rem);
  letter-spacing: -0.01em;
  display: block;
  line-height: 0.98;
}
.faq-hero-headline .hl-italic { color: var(--hl-serif); }
.faq-hero-headline .hl-black { color: var(--tomato); margin-top: 2px; }
@media (max-width: 1024px) {
  .faq-hero-headline .hl-italic,
  .faq-hero-headline .hl-black { line-height: 0.95; }
}
@media (max-width: 480px) {
  .faq-hero-headline .hl-italic,
  .faq-hero-headline .hl-black { line-height: 1.02; }
}
.faq-hero-body { font-size: 16px; color: var(--espresso-70); line-height: 1.6; margin-bottom: 18px; max-width: 560px; }

/* ── CATEGORY FILTERS (pill style, matches the old FAQ page's tabs) ── */
.faq-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 70px 0 0;
}
.faq-cat-tab {
  font-family: 'Archivo', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--espresso-70);
  background: transparent;
  border: 1px solid var(--espresso-15);
  border-radius: 100px;
  padding: 12px 22px;
  cursor: pointer;
  transition: all 0.15s;
}
.faq-cat-tab:hover { border-color: var(--aubergine); color: var(--aubergine); }
.faq-cat-tab.active {
  background: var(--aubergine);
  border-color: var(--aubergine);
  color: var(--paper);
}

/* ── BODY (sidebar + accordion) ── */
.faq-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
  padding-top: 40px;
}

.faq-sidebar-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso-50);
  margin-bottom: 10px;
}
.faq-sidebar-cat-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  color: var(--aubergine);
  line-height: 1.1;
  margin-bottom: 34px;
}
.faq-sidebar-stuck { font-size: 14px; color: var(--espresso-50); line-height: 1.6; }
.faq-sidebar-stuck a { color: var(--tomato); text-decoration: none; font-weight: 500; }
.faq-sidebar-stuck a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .faq-body { grid-template-columns: 1fr; gap: 20px; }
}

/* ── ACCORDION ── */
.faq-accordion { max-width: 760px; }
.faq-item { border-bottom: 0.5px solid var(--espresso-15); }
.faq-item:first-child { border-top: 0.5px solid var(--espresso-15); }
.faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.faq-q-text {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--espresso);
  line-height: 1.4;
  transition: color 0.15s;
}
.faq-question:hover .faq-q-text { color: var(--aubergine); }
.faq-q-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--espresso-15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--espresso-50);
  font-size: 14px;
  line-height: 1;
  margin-top: 1px;
  transition: all 0.2s;
}
.faq-item.open .faq-q-icon { background: var(--aubergine); border-color: var(--aubergine); color: var(--paper); transform: rotate(45deg); }
.faq-answer {
  display: none;
  padding: 0 30px 22px 0;
  font-size: 16px;
  color: var(--espresso-70);
  line-height: 1.7;
  max-width: 620px;
}
.faq-answer a { color: var(--tomato); text-decoration: none; }
.faq-answer a:hover { text-decoration: underline; }
.faq-item.open .faq-answer { display: block; }

@media (max-width: 900px) {
  /* Fixed 40px override removed 2026-09-17 -- the new clamp()'s own 46px
     floor already handles small screens, same reasoning as Gatherings. */
  .faq-sidebar-cat-name { font-size: 32px; }
  .faq-sidebar-label { font-size: 12px; }
}
</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 ── -->
<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 + CATEGORY FILTERS + ACCORDION ──
     One section, one centered .faq-container, so the hero and the
     pills/sidebar/accordion below it share the exact same left edge
     (see 2026-08-20 header comment: two separately-centered max-width
     elements were drifting out of alignment). ── -->
<section class="faq-hero-section">
 <div class="faq-container">
  <h1 class="faq-hero-headline">
    <span class="hl-italic headline-serif">A few things</span>
    <span class="hl-black headline-black">you might be wondering.</span>
  </h1>
  <p class="faq-hero-body">Everything you need to know about your Gathering Plan, Host Boxes, activities and orders.</p>
  <a class='link-arrow' href='/contact'>Still have a question? Contact us →</a>

  <div class="faq-cats" id="faqCats">
    <button class="faq-cat-tab active" data-cat="getting-started" onclick="switchCat('getting-started', this)">Getting Started</button>
    <button class="faq-cat-tab" data-cat="gathering-plan" onclick="switchCat('gathering-plan', this)">Your Gathering Plan</button>
    <button class="faq-cat-tab" data-cat="host-boxes" onclick="switchCat('host-boxes', this)">Host Boxes &amp; Activity Kits</button>
    <button class="faq-cat-tab" data-cat="orders" onclick="switchCat('orders', this)">Orders &amp; Policies</button>
  </div>

  <div class="faq-body">
    <div class="faq-sidebar">
      <p class="faq-sidebar-label">Currently viewing</p>
      <p class="faq-sidebar-cat-name" id="faqSidebarName">Getting Started</p>
      <p class="faq-sidebar-stuck">Still stuck? <a href="mailto:hello@thegatheringhour.com">Email Sarah directly</a></p>
    </div>
    <div class="faq-accordion" id="faqAccordion"></div>
  </div>
 </div>
</section>

<!-- ── CLOSER ── -->
<section class="closer-band">
  <h2 class="closer-headline">
    <span class="cl-italic">Send a note. We'll write back,</span>
    <span class="cl-black">usually within a day.</span>
  </h2>
  <div class="closer-btns" style="align-items: center;">
    <a class='btn-pill btn-tomato' href='/contact'>Contact us →</a>
    <a href="mailto:hello@thegatheringhour.com" class="link-arrow">hello@thegatheringhour.com</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' style='opacity:1; color: var(--aubergine);'>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>
  // Nav shrinks and quiets down after a small scroll, same behavior as
  // every other page.
  (function () {
    var nav = document.querySelector('nav');
    function onScroll() {
      if (window.scrollY > 24) {
        nav.classList.add('nav-scrolled');
      } else {
        nav.classList.remove('nav-scrolled');
      }
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
  })();

</script>

<script>
  // FAQ content and accordion behavior. No Q01/Q02 numbering, just a
  // category filter row, a "currently viewing" sidebar and a wide
  // accordion. Founding Friends and Corporate & Events questions live on
  // their own pages now, not here.
  var faqs = {
    'getting-started': [
      {
        q: 'What is Gathering Hour?',
        a: 'Gathering Hour is a hosting platform. Each gathering starts with a Gathering Plan, a personalized page that holds everything you need to plan and coordinate it: invitations, RSVPs, a shopping list built for your guest count, and a host guide. Host Boxes and Activity Kits are on the way for anyone who wants the physical pieces shipped to their door too.'
      },
      {
        q: 'How does it work?',
        a: 'Pick a gathering, tell us your date and guest count, and your Gathering Plan is ready to go. From there you send invitations, watch RSVPs come in, and work from a shopping list that\'s already calibrated to your table. Everything lives in one place instead of five different apps.'
      },
      {
        q: 'How much does a gathering cost?',
        a: 'Digital Gathering Plans start at $22. Pricing varies slightly by gathering, and you\'ll always see the exact price before you check out.'
      },
      {
        q: 'How many guests can I host?',
        a: 'Most gatherings are built for 6 to 12 guests. Your Gathering Plan, including your shopping list, adjusts automatically as you update your headcount.'
      },
      {
        q: 'Can I choose my own date?',
        a: 'Yes. Gathering Hour isn\'t tied to a fixed event date. Pick whatever day works for you at checkout, and you can update it later if plans change.'
      },
      {
        q: 'Can I preview a Gathering Plan before I buy?',
        a: 'Yes. <a href="/tea-in-the-garden.html">Tea in the Garden</a> is live now, take a look through a real Gathering Plan before deciding if it\'s right for your gathering.'
      }
    ],
    'gathering-plan': [
      {
        q: 'What\'s included in my Gathering Plan?',
        a: 'Invitations, live RSVPs, a shopping list calibrated to your guest count, potluck coordination, and a host guide, all in one page built for your gathering.'
      },
      {
        q: 'Is the Plan personalized to my gathering?',
        a: 'Yes. Your Gathering Plan is built around the theme, date, and guest count you choose, not a generic template.'
      },
      {
        q: 'How do invitations and RSVPs work?',
        a: 'You send a designed invitation straight from your Gathering Plan, by email or as a link you share however you\'d normally reach your guests. Guests RSVP and claim potluck items, and you see it all update in real time.'
      },
      {
        q: 'What if my guest count changes?',
        a: 'Your shopping list updates automatically as you adjust your headcount, so you\'re not left recalculating anything by hand.'
      },
      {
        q: 'Can I change my gathering date?',
        a: 'Yes. Update it directly in your Gathering Plan any time before your gathering.'
      },
      {
        q: 'How long can I access my Plan?',
        a: 'Your Gathering Plan stays live through your gathering date and for a while after, so you can revisit it and download anything you need.'
      },
      {
        q: 'Do I need a Host Box or Activity Kit?',
        a: 'No. Your Gathering Plan works on its own. Host Boxes and Activity Kits are optional add-ons for anyone who wants the physical pieces handled too.'
      },
      {
        q: 'Can I turn the activity off?',
        a: 'Yes. Each gathering includes an optional creative activity. If it\'s not right for your occasion, you can turn it off, and the rest of your Gathering Plan stays exactly as it is.'
      }
    ],
    'host-boxes': [
      {
        q: 'When will Host Boxes be available?',
        a: 'Host Boxes are on the way. Join the waitlist and we\'ll let you know the moment they\'re ready to order.'
      },
      {
        q: 'When will Activity Kits be available?',
        a: 'Activity Kits are coming soon too. Join the waitlist to be first to know.'
      },
      {
        q: 'Can I join the waitlist?',
        a: 'Yes. You\'ll find a "Join the waitlist" option on any gathering marked Coming Soon, or you can <a href="/gatherings.html">browse gatherings</a> to see what\'s available now.'
      },
      {
        q: 'Can I add one after buying my Gathering Plan?',
        a: 'Yes. Once Host Boxes and Activity Kits are live, you\'ll be able to add either to a Gathering Plan you\'ve already purchased.'
      }
    ],
    orders: [
      {
        q: 'Are digital Gathering Plans refundable?',
        a: 'Digital purchases are non-refundable once your Gathering Plan has been accessed. If you haven\'t accessed it yet, get in touch within 24 hours and we\'ll sort it out.'
      },
      {
        q: 'Where will physical products ship?',
        a: 'We\'re still finalizing shipping details for Host Boxes and Activity Kits. We\'ll share exactly where we ship as soon as they\'re ready to order.'
      },
      {
        q: 'What happens if a physical order arrives damaged?',
        a: 'Once Host Boxes and Activity Kits are live, if anything arrives damaged or missing, contact us and we\'ll make it right.'
      },
      {
        q: 'How do I contact you?',
        a: 'Send us a note any time at <a href="mailto:hello@thegatheringhour.com">hello@thegatheringhour.com</a> or use the <a href="/contact.html">contact page</a>. We\'re a small team and read every message.'
      }
    ]
  };

  var faqCatNames = {
    'getting-started': 'Getting Started',
    'gathering-plan': 'Gathering Plan',
    'host-boxes': 'Host Boxes & Activities',
    orders: 'Orders & Policies'
  };

  function switchCat(cat, btn) {
    document.querySelectorAll('.faq-cat-tab').forEach(function (t) { t.classList.remove('active'); });
    btn.classList.add('active');
    document.getElementById('faqSidebarName').textContent = faqCatNames[cat];
    renderAccordion(cat);
  }

  function renderAccordion(cat) {
    var accordion = document.getElementById('faqAccordion');
    accordion.innerHTML = '';
    faqs[cat].forEach(function (item, i) {
      var el = document.createElement('div');
      el.className = 'faq-item' + (i === 0 ? ' open' : '');
      el.innerHTML =
        '<button class="faq-question" onclick="toggleFaq(this)">' +
          '<span class="faq-q-text">' + item.q + '</span>' +
          '<span class="faq-q-icon">+</span>' +
        '</button>' +
        '<div class="faq-answer">' + item.a + '</div>';
      accordion.appendChild(el);
    });
  }

  function toggleFaq(btn) {
    var item = btn.closest('.faq-item');
    var isOpen = item.classList.contains('open');
    document.querySelectorAll('.faq-item').forEach(function (i) { i.classList.remove('open'); });
    if (!isOpen) item.classList.add('open');
  }

  renderAccordion('getting-started');
</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>