/* ==========================================================================
   GathrUp Landing Page — scoped styles (gu- namespace)
   Brand: #4C29A9 purple · #F5820A orange · Poppins
   Built section-by-section. Section 1: Header · Section 2: Hero
   ========================================================================== */

:root {
  --gu-purple: #4C29A9;
  --gu-purple-dark: #3B1F86;
  --gu-orange: #F5820A;
  --gu-orange-dark: #E0740A;
  --gu-ink: #1B1130;
  --gu-body: #5b5670;
  --gu-line: #ece9f5;
  --gu-bg: #ffffff;
  --gu-radius: 16px;
  --gu-shadow: 0 18px 40px rgba(76, 41, 169, 0.14);
  --gu-container: 1180px;
}

/* Full-bleed: remove the browser's default body gutter on the landing page */
body { margin: 0; }

/* Reset within the landing scope */
.gu-header *,
.gu-hero *,
.gu-steps *,
.gu-features *,
.gu-tools *,
.gu-app *,
.gu-hosts *,
.gu-roadmap *,
.gu-blog *,
.gu-cta *,
.gu-footer * { box-sizing: border-box; }

.gu-header,
.gu-hero,
.gu-steps,
.gu-features,
.gu-tools,
.gu-app,
.gu-hosts,
.gu-roadmap,
.gu-blog,
.gu-cta,
.gu-footer {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gu-ink);
}

/* Shared buttons ---------------------------------------------------------- */
.gu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.gu-btn:hover { transform: translateY(-1px); text-decoration: none; }

.gu-btn-orange {
  background: var(--gu-orange);
  color: #fff;
  box-shadow: 0 8px 18px rgba(245, 130, 10, 0.28);
}
.gu-btn-orange:hover { background: var(--gu-orange-dark); color: #fff; }

.gu-btn-outline {
  background: transparent;
  color: var(--gu-ink);
  border-color: #d9d5e6;
}
.gu-btn-outline:hover { border-color: var(--gu-purple); color: var(--gu-purple); }

.gu-btn-lg { padding: 16px 34px; font-size: 16px; }
.gu-btn-sm { padding: 8px 18px; font-size: 13px; }

.gu-accent { color: var(--gu-purple); }

/* ==========================================================================
   Section 1 · Header
   ========================================================================== */
.gu-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--gu-line);
}
.gu-header-inner {
  max-width: var(--gu-container);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.gu-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--gu-ink);
}
.gu-logo img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }
.gu-logo span { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

.gu-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0 auto;
}
.gu-nav a {
  color: #3a3350;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color .18s ease;
}
.gu-nav a:hover { color: var(--gu-purple); }

.gu-header-actions { display: flex; align-items: center; gap: 12px; }

.gu-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  color: var(--gu-ink);
  cursor: pointer;
  line-height: 1;
}

/* ==========================================================================
   Section 2 · Hero
   ========================================================================== */
/* Hero + Steps share one continuous grid backdrop that fades out just after
   the steps icons. */
.gu-hero-wrap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 480px at 50% -140px, #f4efff 0%, rgba(244, 239, 255, 0) 60%),
    #ffffff;
}
.gu-hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(76, 41, 169, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(76, 41, 169, 0.05) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
  pointer-events: none;
}

/* Scattered pastel blocks (decorative, grid-aligned) */
.gu-blots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.gu-blot {
  position: absolute;
  border-radius: 6px;
}
.gu-blot--lav   { background: rgba(124, 92, 200, 0.12); }
.gu-blot--peach { background: rgba(245, 130, 10, 0.12); }

.gu-hero {
  position: relative;
  z-index: 1;          /* sit above the shared grid */
  padding: 28px 0 0;   /* no side padding — image runs full-bleed to the edges */
}

.gu-hero-content {
  position: relative;
  max-width: 920px;    /* wider so the title wraps to just 2 lines */
  margin: 0 auto;
  padding: 0 24px;     /* keep text off the edges even though the section is full-bleed */
  text-align: center;
}
.gu-eyebrow {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--gu-body);
  margin-bottom: 14px;
}
.gu-hero-title {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--gu-ink);
}
.gu-hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--gu-body);
  max-width: 720px;
  margin: 0 auto 28px;
}
.gu-hero-cta { margin-bottom: 30px; }

/* Merged hero frame (single full-bleed image) ---------------------------- */
.gu-hero-frame {
  width: 100%;
  margin-top: 24px;
}
.gu-hero-frame img {
  display: block;
  width: 100%;      /* full screen width, edge to edge */
  height: auto;
}

/* ==========================================================================
   Section 3 · Steps (Create / Invite / Celebrate)
   ========================================================================== */
.gu-steps {
  position: relative;
  z-index: 1;          /* sit above the shared grid */
  padding: 24px 24px 72px;
}
.gu-steps-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.gu-step {
  flex: 1 1 260px;
  max-width: 320px;
  text-align: center;
}
.gu-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--gu-purple);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}
.gu-step-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--gu-ink);
  margin: 0 0 8px;
}
.gu-step-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gu-body);
  margin: 0 auto;
  max-width: 240px;
}

/* ==========================================================================
   Shared section heading
   ========================================================================== */
.gu-section-head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
.gu-section-head h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--gu-ink);
}
.gu-section-head p {
  font-size: 15px;
  color: var(--gu-body);
  margin: 0;
}

/* ==========================================================================
   Section 4 · Features (bento grid)
   ========================================================================== */
.gu-features {
  max-width: 1320px;
  margin: 0 auto;
  padding: 60px 24px 76px;
}
.gu-features-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.gu-feature {
  border-radius: 20px;
  padding: 32px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
}
/* alternating wide / narrow bento layout */
.gu-feature:nth-child(1) { grid-column: span 3; }
.gu-feature:nth-child(2) { grid-column: span 2; }
.gu-feature:nth-child(3) { grid-column: span 2; }
.gu-feature:nth-child(4) { grid-column: span 3; }

.gu-feature h3 {
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 12px;
  color: inherit;   /* follow the card's colour (white on image cards, ink on colour cards) — beats the theme's global h3 colour */
}
.gu-feature p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}

/* colour cards — dark text, content vertically centred */
.gu-feature--peach { background: #FBD9A9; justify-content: center; }
.gu-feature--lav   { background: #E9DEFB; justify-content: center; }
.gu-feature--peach p,
.gu-feature--lav p { color: var(--gu-body); }

/* image cards — white text over a darkened photo, content at the bottom */
.gu-feature--img {
  justify-content: flex-end;
  color: #fff;
  background-color: #241634;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gu-feature--img p { color: rgba(255, 255, 255, 0.82); }

/* image sources (relative to this stylesheet) + darkening overlay */
.gu-feature--img1 {
  background-image:
    linear-gradient(180deg, rgba(20, 12, 40, 0.15), rgba(20, 12, 40, 0.85)),
    url('../images/landing/feature-1.png');
}
.gu-feature--img2 {
  background-image:
    linear-gradient(180deg, rgba(20, 12, 40, 0.15), rgba(20, 12, 40, 0.85)),
    url('../images/landing/feature-2.png');
}

@media (max-width: 800px) {
  .gu-features-grid { grid-template-columns: 1fr; }
  .gu-feature { grid-column: 1 / -1 !important; min-height: 240px; }
}

/* ==========================================================================
   Section 4b · Tools for Every Step (tabbed, full-bleed lavender)
   ========================================================================== */
.gu-tools {
  background: #EDE7FB;
  border-radius: 44px 44px 0 0;
  padding: 60px 24px 72px;
}
.gu-tools .gu-section-head { margin-bottom: 22px; }
.gu-tools-tabs {
  display: flex;
  justify-content: center;
  gap: 34px;
  max-width: 460px;
  margin: 0 auto 40px;
  border-bottom: 1px solid #d7cdf0;
}
.gu-tools-tab {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--gu-body);
  cursor: pointer;
  padding: 8px 6px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease;
}
.gu-tools-tab:hover { color: var(--gu-ink); }
.gu-tools-tab.is-active { color: var(--gu-ink); border-bottom-color: var(--gu-purple); }

.gu-tools-grid {
  max-width: 1500px;   /* wider — cards extend toward both page edges */
  margin: 0 auto;
  display: flex;
  gap: 20px;
}
.gu-tools-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gu-tool {
  border-radius: 16px;
  padding: 24px;
  min-height: 150px;
  background: var(--off-bg);
  color: var(--off-fg);
  transition: background .25s ease, color .25s ease;
}
.gu-tools-col.is-active .gu-tool {
  background: var(--on-bg);
  color: var(--on-fg);
}
.gu-tool-ic { font-size: 20px; margin-bottom: 12px; display: block; color: inherit; }
.gu-tool h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; color: inherit; }
.gu-tool p { font-size: 12.5px; line-height: 1.5; margin: 0; color: inherit; opacity: .82; }

/* per-card colour tokens: off = faded tint (inactive), on = saturated (active tab) */
.c-inv-1 { --off-bg:#E4EEFB; --off-fg:#2B4C9E; --on-bg:#3E6FD9; --on-fg:#fff; }
.c-inv-2 { --off-bg:#ECE6FB; --off-fg:#5A3AB8; --on-bg:#6B3FD4; --on-fg:#fff; }
.c-tik-1 { --off-bg:#E7DEFB; --off-fg:#3B1A8C; --on-bg:#3B1A8C; --on-fg:#fff; }
.c-tik-2 { --off-bg:#FCEEDD; --off-fg:#8A5A2A; --on-bg:#F6C177; --on-fg:#4A2E10; }
.c-man-1 { --off-bg:#ECE6FB; --off-fg:#5A3AB8; --on-bg:#7B4FE0; --on-fg:#fff; }
.c-man-2 { --off-bg:#E4EEFB; --off-fg:#2B4C9E; --on-bg:#3E6FD9; --on-fg:#fff; }

@media (max-width: 800px) {
  .gu-tools-grid { flex-direction: column; }
}

/* ==========================================================================
   Section 5 · Download the app
   ========================================================================== */
.gu-app {
  background: #fff;                 /* white card; its rounded top reveals the lavender Tools band above */
  border-radius: 44px 44px 0 0;
  padding: 48px 24px 72px;
}
.gu-app-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.gu-app-avail {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--gu-body);
  margin-bottom: 18px;
}
.gu-app-avail a { display: inline-flex; color: inherit; text-decoration: none; transition: transform .15s ease; }
.gu-app-avail a:hover { transform: translateY(-1px); }
.gu-app-avail i { font-size: 19px; }
.gu-app-avail .fa-apple { color: #111; }
.gu-app-avail .fa-google-play { color: var(--gu-purple); }
.gu-app-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.14;
  margin: 0 0 12px;
  color: var(--gu-ink);
}
.gu-app-sub {
  font-size: 15px;
  color: var(--gu-body);
  margin: 0 0 30px;
}
.gu-app-qr {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.gu-app-arrow {
  width: 62px;
  height: auto;
  flex: 0 0 auto;
  margin-top: 4px;
}
.gu-qr-box {
  border: 1px solid var(--gu-line);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  width: 152px;
  background: #fff;
}
.gu-qr-box span {
  display: block;
  font-size: 12px;
  color: var(--gu-body);
  margin-bottom: 8px;
}
.gu-qr-box #gu-qr { line-height: 0; }
.gu-qr-box #gu-qr img,
.gu-qr-box #gu-qr canvas { display: block; margin: 0 auto; }

/* mobile-only direct download button (hidden on desktop) */
.gu-app-dl-btn { display: none; }

/* Right column: gradient card behind, transparent phone popping out the top */
.gu-app-showcase {
  position: relative;
}
.gu-app-phone {
  position: relative;
  z-index: 1;             /* phone in front, defines the column height */
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
  pointer-events: none;
}
.gu-app-gradient {
  position: absolute;
  z-index: 0;             /* behind the phone */
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: 90%;            /* shorter than the phone → the phone pops out the top */
  border-radius: 24px;
}

@media (max-width: 800px) {
  .gu-app-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  /* phones: hide the scan QR + arrow, show the one-tap download button */
  .gu-qr-box,
  .gu-app-arrow { display: none; }
  .gu-app-dl-btn { display: inline-flex; }
}

/* ==========================================================================
   Section 6 · Built for Every type of Host (full-bleed peach + collage)
   ========================================================================== */
.gu-hosts {
  background: #FCEEDD;              /* full page-width background colour */
  border-radius: 44px 44px 0 0;    /* rounded top corners reveal the lavender band above */
}
.gu-hosts-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px 76px;
}
.gu-hosts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 232px 176px 176px;
  gap: 18px;
  grid-template-areas:
    "head head p1 p1"
    "p2   p3   p3 p4"
    "p5   p3   p3 p6";
}
.gu-hosts-head {
  grid-area: head;
  align-self: center;
  padding-right: 12px;
}
.gu-hosts-head h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--gu-ink);
}
.gu-hosts-head p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gu-body);
  margin: 0;
  max-width: 300px;
}
.gu-host {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  filter: grayscale(1);   /* keep the collage black & white regardless of source */
  display: block;
}
.gu-host--1 { grid-area: p1; }
.gu-host--2 { grid-area: p2; }
.gu-host--3 { grid-area: p3; }
.gu-host--4 { grid-area: p4; }
.gu-host--5 { grid-area: p5; }
.gu-host--6 { grid-area: p6; }

@media (max-width: 768px) {
  .gu-hosts-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 150px;
    grid-template-areas:
      "head head"
      "p1   p1"
      "p2   p4"
      "p3   p3"
      "p5   p6";
  }
  .gu-hosts-head { align-self: start; }
}

/* ==========================================================================
   Section 7 · Roadmap ("And We're Just Getting Started…")
   ========================================================================== */
.gu-roadmap {
  padding: 64px 24px 56px;
  background: #fff;
}
.gu-roadmap-cards {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.gu-road-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 300px;
  max-width: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(76, 41, 169, 0.09);
  padding: 18px 22px;
}
.gu-road-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7B4FE0, #4C29A9);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.gu-road-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--gu-ink);
}

.gu-road-progress-wrap {
  text-align: center;
  margin-top: 40px;
}
.gu-road-progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(76, 41, 169, 0.10);
  padding: 8px 16px;
  font-size: 12px;
  color: var(--gu-body);
}
.gu-road-dots {
  display: inline-flex;
  gap: 5px;
}
.gu-road-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9d5e6;      /* upcoming (empty) */
  display: inline-block;
}
.gu-road-dots i.on-1 { background: #4C29A9; }
.gu-road-dots i.on-2 { background: #F5820A; }
.gu-road-dots i.on-3 { background: #1B1130; }

/* ==========================================================================
   Section 8 · Be in the Know (blog / resources)
   ========================================================================== */
.gu-blog {
  padding: 56px 24px 76px;
  background: #fff;
}
.gu-blog-cards {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.gu-blog-card {
  background: #F1ECFB;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.gu-blog-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
  display: block;
}
.gu-blog-card h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.28;
  margin: 0 0 10px;
  color: var(--gu-ink);
}
.gu-blog-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--gu-body);
  margin: 0 0 18px;
  flex: 1 1 auto;
}
.gu-blog-card .gu-btn { align-self: flex-start; background: #fff; }

.gu-blog-more {
  text-align: center;
  margin-top: 40px;
}

/* ==========================================================================
   Section 9 · CTA — store cards + newsletter (full-bleed grey band)
   ========================================================================== */
.gu-cta {
  background: #F4F4F6;
  border-radius: 44px 44px 0 0;
  padding: 56px 24px 64px;
}
.gu-cta-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.gu-rate-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.gu-rate-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 30px;
}
.gu-rate-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.gu-rate-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--gu-purple);
  background: #F1ECFB;
  padding: 5px 12px;
  border-radius: 999px;
}
.gu-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gu-purple);
  color: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.05;
}
.gu-store-btn i { font-size: 18px; }
.gu-store-btn-txt { display: flex; flex-direction: column; }
.gu-store-btn-txt small { font-size: 9px; font-weight: 400; opacity: .85; }
.gu-rate-card h3 { font-size: 20px; font-weight: 600; margin: 0 0 6px; color: var(--gu-ink); }
.gu-rate-card p { font-size: 13px; color: var(--gu-body); margin: 0 0 16px; }
.gu-rate-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gu-orange);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: gap .15s ease;
}
.gu-rate-dl:hover { gap: 10px; }

/* Newsletter banner */
.gu-newsletter {
  background: var(--gu-purple);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #fff;
}
.gu-newsletter-text { max-width: 430px; }
.gu-newsletter-text h3 { font-size: 22px; font-weight: 600; margin: 0 0 10px; color: #fff; }
.gu-newsletter-text p { font-size: 13px; line-height: 1.55; margin: 0; color: rgba(255, 255, 255, .8); }
.gu-newsletter-msg { margin-top: 12px !important; font-weight: 600; color: #fff !important; }
.gu-newsletter-form {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  flex: 1 1 340px;
  max-width: 460px;
}
.gu-newsletter-form input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--gu-ink);
  font-family: inherit;
}
.gu-newsletter-form button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  background: var(--gu-purple);
  color: #fff;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.gu-footer {
  background: #fff;
  padding: 56px 24px 40px;
  margin: 0;              /* override old theme's footer{margin-top:150px} on the home page */
  min-height: 0;          /* override old theme's footer{min-height:150px} */
  border-radius: 0;       /* override old theme's rounded footer top */
}
.gu-footer::before { content: none; display: none; }  /* remove old theme footer::before decoration */
.gu-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 40px;
}
.gu-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--gu-ink);
}
.gu-footer-brand img { width: 40px; height: 40px; border-radius: 9px; }
.gu-footer-brand span { font-size: 22px; font-weight: 700; }
.gu-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.gu-footer-col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gu-ink);
  margin: 0 0 16px;
  font-weight: 600;
}
.gu-footer-col a {
  display: block;
  font-size: 14px;
  color: var(--gu-body);
  text-decoration: none;
  margin-bottom: 12px;
}
.gu-footer-col a:hover { color: var(--gu-purple); }
.gu-footer-bottom {
  max-width: 1120px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--gu-line);
}
.gu-footer-bottom p { font-size: 12px; line-height: 1.6; color: var(--gu-body); margin: 0; text-align: center; }

/* ==========================================================================
   Page hero (banner on static pages) + FAQ accordion
   ========================================================================== */
.gu-page-hero,
.gu-faq {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.gu-page-hero *,
.gu-faq * { box-sizing: border-box; }

.gu-page-hero {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 64px 24px 96px;
  background:
    linear-gradient(180deg, rgba(33, 20, 52, 0.72), rgba(33, 20, 52, 0.86)),
    url('../images/landing/page-hero.png') center / cover no-repeat,
    #241634;
}
.gu-page-hero-inner { max-width: 640px; margin: 0 auto; }
.gu-page-hero-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #fff;
}
.gu-page-hero-sub { font-size: 15px; color: rgba(255, 255, 255, 0.85); margin: 0 auto; }
.gu-page-hero-sub:empty { display: none; }

/* FAQ search (sits in the hero) */
.gu-faq-search {
  display: flex;
  background: #fff;
  border-radius: 999px;
  padding: 5px;
  max-width: 430px;
  margin: 24px auto 0;
}
.gu-faq-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--gu-ink);
  font-family: inherit;
}
.gu-faq-search button {
  border: none;
  cursor: pointer;
  background: var(--gu-orange);
  color: #fff;
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
}

/* FAQ body — lavender band pulled up over the hero */
.gu-faq {
  position: relative;
  overflow: hidden;                /* keep decorative tickets from causing page scroll */
  background: #EDE7FB;
  border-radius: 44px 44px 0 0;
  margin-top: -44px;
  padding: 128px 24px 160px;       /* room above/below for the decorative tickets */
  color: var(--gu-ink);
}
.gu-faq-inner { position: relative; max-width: 900px; margin: 0 auto; }

/* decorative ticket graphics — faq-1 fully above the content, faq-2 fully below */
.gu-faq-inner::before,
.gu-faq-inner::after {
  content: "";
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}
.gu-faq-inner::before {         /* faq-1 — above, top-right */
  width: 132px; height: 108px;
  top: -118px; right: 4px;
  background-image: url('../images/landing/faq-1.png');
}
.gu-faq-inner::after {          /* faq-2 — below, bottom-left */
  width: 144px; height: 140px;
  bottom: -150px; left: 8px;
  background-image: url('../images/landing/faq-2.png');
}
@media (max-width: 700px) {
  .gu-faq { padding: 96px 20px 120px; }
  .gu-faq-inner::before { width: 96px; height: 78px; top: -84px; right: 0; }
  .gu-faq-inner::after  { width: 104px; height: 100px; bottom: -110px; left: 0; }
}
.gu-faq-inner h2 { font-size: 20px; font-weight: 600; color: var(--gu-ink); margin: 30px 0 14px; }
.gu-faq-inner h2:first-child { margin-top: 0; }

/* accordion — one white container, rows split by a bottom border */
.gu-faq-list {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(76, 41, 169, 0.06);
  padding: 6px 26px;
  margin-bottom: 22px;
}
/* level 1: category header — click to expand its questions */
.gu-faq-list h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--gu-ink);
  margin: 0;
  padding: 20px 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e8e3f3;
}
.gu-faq-list h2::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  color: var(--gu-body);
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.gu-faq .faq-section.open > h2::after { transform: rotate(180deg); }

/* level 2: ALL category body content is hidden until the category opens */
.gu-faq .faq-section > *:not(h2) { display: none; }
.gu-faq .faq-section.open > *:not(h2) { display: block; }

.gu-faq .faq-item { border-bottom: 1px solid #eee7f6; }
.gu-faq .faq-item .faq-question,
.gu-faq .faq-item .faq-answer { padding-left: 16px; }
.gu-faq-list .faq-section:last-child.open .faq-item:last-child { border-bottom: none; }

/* direct text content inside a category (Common Issues, Reporting, Contact Support) */
.gu-faq .faq-section > p,
.gu-faq .faq-section > ul,
.gu-faq .faq-section > ol {
  font-size: 14px;
  line-height: 1.65;
  color: var(--gu-body);
  margin: 12px 0;
  padding-left: 16px;
}
.gu-faq .faq-section > ul,
.gu-faq .faq-section > ol { padding-left: 36px; }
.gu-faq .faq-section > ul li { margin-bottom: 6px; }
.gu-faq .faq-section a { color: var(--gu-purple); }
.gu-faq .faq-section strong { color: var(--gu-ink); }
.gu-faq .faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--gu-ink);
}
.gu-faq .faq-question::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--gu-body);
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.gu-faq .faq-item.open .faq-question::after { transform: rotate(180deg); }
.gu-faq .faq-answer {
  display: none;
  padding: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gu-body);
}
.gu-faq .faq-item.open .faq-answer { display: block; }
.gu-faq .faq-answer p { margin: 0 0 10px; }
.gu-faq .faq-answer p:last-child { margin-bottom: 0; }
.gu-faq .faq-answer ul,
.gu-faq .faq-answer ol { padding-left: 18px; margin: 0 0 10px; }
.gu-faq .faq-answer a { color: var(--gu-purple); }

/* intro / contact boxes that live alongside the accordions */
.gu-faq .highlight-box {
  background: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 24px;
}
.gu-faq .highlight-box strong { display: block; margin-bottom: 6px; color: var(--gu-ink); }
.gu-faq .highlight-box p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gu-body); }
.gu-faq .contact-section {
  background: #fff;
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: 22px;
}
.gu-faq .contact-section h2 { margin-top: 0; }
.gu-faq .contact-section p,
.gu-faq .contact-section li { font-size: 13.5px; color: var(--gu-body); line-height: 1.6; }
.gu-faq .contact-section ul { padding-left: 18px; }
.gu-faq .contact-section a { color: var(--gu-purple); }

/* ==========================================================================
   About page
   ========================================================================== */
.gu-about-hero,
.gu-about-solution,
.gu-about-mv,
.gu-about-contact {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gu-ink);
}
.gu-about-hero *,
.gu-about-solution *,
.gu-about-mv *,
.gu-about-contact * { box-sizing: border-box; }

/* §1 — purple hero + collage */
.gu-about-hero { text-align: center; }
.gu-about-hero-top {
  background: radial-gradient(120% 150% at 50% 0%, #5c37c6 0%, var(--gu-purple) 68%);
  color: #fff;
  padding: 52px 24px 272px;   /* longer purple band — reaches ~halfway up the collage */
}
.gu-about-eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.gu-about-title {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 auto 26px;
  max-width: 720px;
  color: #fff;
}
.gu-about-hero-img {
  max-width: 1120px;
  margin: -240px auto 0;   /* pull the collage up onto the purple; bottom bleeds onto white */
  padding: 0 24px;
  position: relative;
}
.gu-about-hero-img img { width: 100%; height: auto; display: block; }

/* §2 — One Solution */
.gu-about-solution { padding: 64px 24px; }
.gu-about-solution-inner { max-width: 1120px; margin: 0 auto; }
.gu-about-solution-head { max-width: 560px; margin-bottom: 36px; }
.gu-about-solution-head h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; margin: 0 0 12px; }
.gu-about-solution-head p { font-size: 14px; line-height: 1.6; color: var(--gu-body); margin: 0; }
.gu-about-solution-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.gu-about-solution-img img { width: 100%; height: auto; border-radius: 14px; display: block; }
.gu-about-solution-text p { font-size: 14.5px; line-height: 1.7; color: var(--gu-body); margin: 0 0 16px; }
.gu-about-solution-tagline { font-weight: 600; color: var(--gu-ink); }

/* §3 — Mission / Vision */
.gu-about-mv { padding: 12px 24px 64px; }
.gu-about-mv-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.gu-about-mv-card {
  background: linear-gradient(160deg, #f5f2fc 0%, #efeafb 100%);
  border-radius: 18px;
  padding: 32px 32px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gu-about-mv-text h3 { font-size: 22px; font-weight: 600; margin: 0 0 10px; }
.gu-about-mv-text p { font-size: 14px; line-height: 1.6; color: var(--gu-body); margin: 0 0 20px; }
.gu-about-mv-img { width: 100%; height: auto; display: block; margin-top: auto; }

/* §4 — Contact */
.gu-about-contact { padding: 12px 24px 72px; }
.gu-about-contact-inner {
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(rgba(20, 12, 30, 0.55), rgba(20, 12, 30, 0.72)),
    url('../images/landing/about-contact.png') center / cover no-repeat,
    #241634;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 48px;
}
.gu-about-contact-panel { color: #fff; }
.gu-about-contact-eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.gu-about-contact-panel h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; margin: 0 0 12px; color: #fff; }
.gu-about-contact-panel p { font-size: 14px; color: rgba(255, 255, 255, 0.85); margin: 0; }
.gu-about-contact-form {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gu-about-contact-form label {
  font-size: 13px;
  color: var(--gu-ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gu-about-contact-form input,
.gu-about-contact-form textarea {
  border: none;
  background: #f3f3f5;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--gu-ink);
}
.gu-about-contact-form textarea { resize: vertical; }
.gu-about-contact-form button {
  margin-top: 6px;
  border: none;
  cursor: pointer;
  background: #1b1b1f;
  color: #fff;
  border-radius: 10px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
}
.gu-form-note { font-size: 13px; padding: 10px 12px; border-radius: 8px; margin: 0; }
.gu-form-note--ok { background: #e8f6ec; color: #1e7a3d; }
.gu-form-note--err { background: #fdeaea; color: #b23b3b; }

@media (max-width: 800px) {
  .gu-about-solution-body { grid-template-columns: 1fr; gap: 28px; }
  .gu-about-mv-inner { grid-template-columns: 1fr; }
  .gu-about-contact-inner { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
}

/* ==========================================================================
   Doc pages (privacy, terms) — lavender band + intro/footnote notes + white card
   ========================================================================== */
.gu-doc {
  position: relative;
  background: #EDE7FB;
  border-radius: 44px 44px 0 0;
  margin-top: -44px;
  padding: 56px 24px 76px;
  color: var(--gu-ink);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.gu-doc * { box-sizing: border-box; }
.gu-doc-inner { max-width: 900px; margin: 0 auto; }

/* pre-section (intro) + footnote — plain white notes, no left border */
.gu-doc-note {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 22px;
}
.gu-doc-note:last-child { margin: 22px 0 0; }
.gu-doc-note strong { display: block; margin-bottom: 6px; color: var(--gu-ink); }
.gu-doc-note p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gu-body); }
.gu-doc-note a { color: var(--gu-purple); }

/* white content card — prose, no accordion */
.gu-doc-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(76, 41, 169, 0.06);
  padding: 32px 34px;
}
.gu-doc-meta { font-size: 13px; color: var(--gu-body); margin: 0 0 18px; }
.gu-doc-card h2 { font-size: 20px; font-weight: 600; color: var(--gu-ink); margin: 30px 0 12px; }
.gu-doc-card h2:first-of-type { margin-top: 0; }
.gu-doc-card h3 { font-size: 16px; font-weight: 600; color: var(--gu-ink); margin: 22px 0 8px; }
.gu-doc-card p,
.gu-doc-card li { font-size: 14.5px; line-height: 1.7; color: #45414f; }
.gu-doc-card ul,
.gu-doc-card ol { padding-left: 20px; margin: 0 0 14px; }
.gu-doc-card li { margin-bottom: 5px; }
.gu-doc-card a { color: var(--gu-purple); }
.gu-doc-card strong { color: var(--gu-ink); }

@media (max-width: 600px) {
  .gu-doc-card { padding: 24px 20px; }
}

/* ==========================================================================
   Static content pages (legal, help centre, etc.)
   ========================================================================== */
.gu-page {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gu-ink);
}
.gu-page * { box-sizing: border-box; }
.gu-page-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}
.gu-page-header { margin-bottom: 28px; }
.gu-page-header h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--gu-ink);
}
.gu-page-meta { font-size: 13px; color: var(--gu-body); }
.gu-page-body h2 { font-size: 22px; font-weight: 600; margin: 34px 0 12px; color: var(--gu-ink); }
.gu-page-body h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; color: var(--gu-ink); }
.gu-page-body p,
.gu-page-body li { font-size: 15px; line-height: 1.7; color: #45414f; }
.gu-page-body ul,
.gu-page-body ol { padding-left: 20px; margin: 0 0 16px; }
.gu-page-body li { margin-bottom: 6px; }
.gu-page-body a { color: var(--gu-purple); }
.gu-page-body strong { color: var(--gu-ink); }
.gu-page-body .highlight-box {
  background: #F4EFFB;
  border-left: 4px solid var(--gu-purple);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 22px 0;
}
.gu-page-body .highlight-box strong { display: block; margin-bottom: 6px; }
.gu-page-body .highlight-box p { margin: 0; }

@media (max-width: 800px) {
  .gu-rate-cards { grid-template-columns: 1fr; }
  .gu-footer-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .gu-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .gu-nav, .gu-header-actions { display: none; }
  .gu-nav-toggle { display: block; margin-left: auto; }

  /* mobile dropdown */
  .gu-nav.gu-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 20px 24px 26px;
    background: #fff;
    border-bottom: 1px solid var(--gu-line);
  }
  .gu-nav.gu-open + .gu-header-actions { display: none; }

  .gu-hero { padding-top: 48px; }
}