/* ========== GuestMaker Homepage, Design Tokens & Base ========== */

:root {
  /* Editorial dark palette (default) */
  --bg: #0E0D0C;
  --bg-elev-1: #161412;
  --bg-elev-2: #1E1B19;
  --bg-elev-3: #2A2622;
  --hairline: rgba(245, 241, 234, 0.08);
  --hairline-strong: rgba(245, 241, 234, 0.16);

  --ink: #F5F1EA;          /* warm cream */
  --ink-2: #D8D2C7;        /* secondary */
  --ink-3: #97918A;        /* tertiary */
  --ink-4: #6A655F;        /* muted */

  /* Accent, magenta from logo, tuned */
  --accent: #ED4D86;
  --accent-soft: #F8B7CF;
  --accent-glow: rgba(237, 77, 134, 0.22);
  --accent-ink: #1A0A10;

  /* Channel hues (for journey + inbox chrome) */
  --c-whatsapp: #25D366;
  --c-email: #6BA3FF;
  --c-voice: #FF8A4C;
  --c-instagram: #E1306C;
  --c-facebook: #4267B2;
  --c-booking: #FFC107;
  --c-web: #B388FF;

  /* Type */
  --f-display: "Instrument Serif", "Times New Roman", serif;
  --f-sans: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Layout */
  --max-w: 1280px;   /* border-box cap for a container that pays its own gutter */
  --gutter: 32px;
  --rail: 1216px;    /* the visible edge: logo left to demo-button right.
                        --max-w minus both gutters. Use this when the PARENT
                        already pays the gutter, or the child lands 32px wide
                        on each side while measuring the right number. */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
}

[data-theme="light"] {
  --bg: #F5F1EA;
  --bg-elev-1: #FAF7F1;
  --bg-elev-2: #FFFFFF;
  --bg-elev-3: #EDE7DC;
  --hairline: rgba(14, 13, 12, 0.08);
  --hairline-strong: rgba(14, 13, 12, 0.18);
  --ink: #0E0D0C;
  --ink-2: #2A2622;
  --ink-3: #5A554E;
  --ink-4: #8B857C;
  --accent-glow: rgba(237, 77, 134, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* overflow-x lived on body alone; a position:fixed off-canvas drawer
   (.gm-mob, translateX(100%) when closed) is positioned against the
   viewport/initial containing block, not body, so on at least one page
   (crm-b2b.html) its translated box still widened the ROOT scrollable
   area even though body's own overflow-x:hidden was set. html needs the
   same rule to actually own the page's horizontal scroll boundary. */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Heading weight has ONE default, and it is the display face's only weight.
   Instrument Serif ships a single 400 cut, so a heading that falls through
   to the UA stylesheet's `bold` is not a heavier cut — it is the browser
   SYNTHESISING bold by smearing 400 glyphs. That is why Campaigns &
   Journeys read as heavier and slightly muddier than every other page: 28
   of its 33 headings were faux-bold, because .h-1/.h-2/.h-3 declare 400 but
   nothing ever declared it for a bare <h2>, or for a class that sets the
   family without a weight (inbox had 17 of those).

   A class may still opt UP — .h-3 is sans 500 — because a class beats an
   element selector. */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ========== Type system ========== */
.eyebrow {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}

.h-display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-size: clamp(44px, 7vw, 104px);
  color: var(--ink);
  text-wrap: balance;
}
.h-1 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(40px, 5.4vw, 76px);
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.h-2 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-size: clamp(32px, 3.8vw, 52px);
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.h-3 {
  font-family: var(--f-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}
.lead {
  font-family: var(--f-sans);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 400;
  text-wrap: pretty;
}
.body {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
.caption {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-family: var(--f-mono);
}

.italic-accent {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--accent);
}

.serif { font-family: var(--f-display); }
.sans { font-family: var(--f-sans); }

/* Anything wearing the display face renders at the only cut it has.
   Two ways a heavier weight sneaks back in after the base reset above:

     .h-3.serif   .h-3 is sans 500; adding .serif swaps the FAMILY and keeps
                  the 500, which Geist has and Instrument Serif does not.
     <b>/<strong> inline emphasis inside a serif line, where the UA
                  stylesheet's `bolder` applies.

   font-synthesis-weight is inherited, so declaring it here also stops a
   descendant from being faked. It is the belt to the font-weight braces:
   if some future rule asks for 600 anyway, the text renders as a clean 400
   rather than smeared glyphs. */
.serif, .h-display, .h-1, .h-2, .italic-accent {
  font-synthesis-weight: none;
}
.h-3.serif, .serif b, .serif strong,
.h-display b, .h-1 b, .h-2 b,
.h-display strong, .h-1 strong, .h-2 strong { font-weight: 400; }

/* ========== Layout ========== */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { position: relative; }

.section-pad {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
}
.section-pad-tight {
  padding-top: clamp(64px, 7vw, 96px);
  padding-bottom: clamp(64px, 7vw, 96px);
}

.divider {
  height: 1px;
  background: var(--hairline);
  width: 100%;
}

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -10px var(--accent-glow), 0 0 0 1px var(--accent);
}
.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
}
.btn-ghost:hover {
  border-color: var(--ink-2);
  background: var(--bg-elev-1);
}
.btn .arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.btn:hover .arrow { transform: translateX(3px); }

/* ========== Nav ========== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.scrolled { border-bottom-color: var(--hairline); }
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.nav-logo .mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-2);
}
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 12px; align-items: center; }
@media (max-width: 800px) {
  .nav-links { display: none; }
}

/* ========== Channel chips ========== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--f-sans);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-2);
  background: var(--bg-elev-1);
  transition: all .3s ease;
}
.chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
}
.chip.primary {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev-1));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--ink);
}
.chip.primary .chip-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.chip.dim {
  opacity: 0.32;
}

/* Density tweak */
[data-density="compact"] .section-pad {
  padding-top: clamp(56px, 7vw, 100px);
  padding-bottom: clamp(56px, 7vw, 100px);
}

/* Light bg variant */
.cream-bg {
  background: var(--bg-elev-1);
}

/* utilities */
.text-mute { color: var(--ink-3); }
.text-soft { color: var(--ink-2); }
.text-accent { color: var(--accent); }
.flex { display: flex; }
.col { flex-direction: column; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 24px; }
.gap-6 { gap: 32px; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }

/* ========== Reveal-on-scroll ========== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========== Footer ========== */
.footer {
  padding: 64px var(--gutter) 32px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--ink-3);
}

/* hide scrollbar on horizontal scrollers */
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll { scrollbar-width: none; }

/* The Resources dropdown CSS used to live here. It now ships inside
   section-nav.jsx, with the markup it styles — see the note there. */

/* ── CTA ──────────────────────────────────────────────────────────────
 * The closing section of a page. Defined here, in the sheet every page
 * loads, because six pages had previously hand-rolled it and it rendered
 * at 620 / 640 / 720 / 720 / 880 — the last thing a visitor sees, at four
 * different widths depending which page they were on.
 *
 * Only two of those six carried the hairline rule and only three blurred
 * the glow. The rule is what makes a background change read as a
 * deliberate edge; the blur is what stops a radial gradient showing a
 * hard ellipse. Both are the treatment, not decoration.
 *
 * Everything that legitimately varied between the six was content —
 * heading, lead, button labels — so none of it lives here.
 * ------------------------------------------------------------------- */
.gm-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 10vw, 140px) 0;
  text-align: center;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}
.gm-cta::before {
  content: "";
  position: absolute;
  top: -140px; left: 50%;
  width: 820px; height: 540px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse,
    color-mix(in srgb, var(--accent) 20%, transparent) 0%,
    transparent 62%);
  filter: blur(50px);
  pointer-events: none;
}
.gm-cta__inner {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
  padding: 0 var(--gutter);
}
.gm-cta__eyebrow { justify-content: center; display: inline-flex; }
.gm-cta__h {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 26px 0 0;
  text-wrap: balance;
}
.gm-cta__lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 24px auto 0;
  max-width: 580px;
}
.gm-cta__actions {
  display: flex; gap: 12px;
  justify-content: center; flex-wrap: wrap;
  margin-top: 34px;
}

/* Inverted closer. loyalty.html ends on a dark section by design -
   background: var(--ink), white heading, cream lead - and the first pass at
   this primitive silently flattened it to the light ground. A primitive
   should carry a legitimate variant, not delete it; a refactor that changes
   what a page looks like is not a refactor. */
.gm-cta--invert { background: var(--ink); color: hsl(40 20% 95%); }
.gm-cta--invert .gm-cta__h { color: #fff; }
.gm-cta--invert .gm-cta__lead { color: rgba(255, 255, 255, .6); }
.gm-cta--invert::before {
  background: radial-gradient(ellipse,
    color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 62%);
}

@media (prefers-reduced-motion: reduce) { .gm-cta::before { filter: blur(50px); } }

/* ── FAQ ──────────────────────────────────────────────────────────────
 * Defined here, not inside module-page.jsx, because FAQItem is used by
 * pages that never render <ModulePage> — and a component's styles living
 * inside another component means those pages got bare browser buttons
 * unless they pasted the rules in. Four of them did, so this block existed
 * five times and had already drifted into two versions.
 *
 * This is the richer of the two: the one the four pages were using, with
 * the hover state and the circular bordered icon. module-page.jsx's copy
 * had neither, so adopting IT would have quietly downgraded four pages.
 *
 * The .mp- prefix is legacy — it means "module page", which is no longer
 * where this lives. Kept because renaming costs markup edits in five files
 * and buys nothing.
 * ------------------------------------------------------------------- */
.mp-faq-section { padding-top: 100px; padding-bottom: 100px; background: var(--bg); }
.mp-faq-wrap {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}
/* The sticky column: the question list is long, the heading should not
   scroll away from it. Five pages had written this themselves, three of
   them without the sticky, which is the whole point of the two-column
   layout. */
.mp-faq-side { position: sticky; top: 96px; }
.mp-faq-h { margin-top: 16px; }
.mp-faq-side-p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin-top: 18px;
  max-width: 300px;
}
.mp-faq-side-p a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (max-width: 1000px) {
  .mp-faq-wrap { grid-template-columns: 1fr; gap: 40px; }
  .mp-faq-side { position: static; }
}
.mp-faq-list { border-top: 1px solid var(--hairline); }
.mp-faq-item { border-bottom: 1px solid var(--hairline); }
.mp-faq-q {
  width: 100%;
  padding: 26px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: none; border: 0;
  text-align: left;
  color: var(--ink);
  font-family: var(--f-sans); font-size: 16px; font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: color .2s ease;
}
.mp-faq-q:hover { color: var(--accent); }
/* Keyboard parity, from pricing.css — it was the only page that gave the
   question a visible focus state, and a conversion that dropped it would
   have traded an accessibility feature for consistency. */
.mp-faq-q span:first-child { flex: 1; }
.mp-faq-q:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.mp-faq-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--ink-3);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .25s ease, color .25s ease, border-color .25s ease;
}
.mp-faq-icon.open {
  transform: rotate(45deg);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
/* The answer animates open. grid-template-rows 0fr → 1fr travels to the
   answer's OWN height, where a max-height guess either clips a long one or
   spends the tail of the transition crossing empty space on a short one.
   pricing.css had worked this out and was the only page doing it; the rest
   snapped open with a conditional render. Promoted here rather than the
   other way round, for the same reason the hover state was: a shared
   primitive should be the best version, not the average one.

   Padding lives on the inner element — on the grid parent it would not
   collapse to zero, leaving a gap under a closed question. */
.mp-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--e, cubic-bezier(.22,.61,.36,1));
}
.mp-faq-a.open { grid-template-rows: 1fr; }
.mp-faq-a > div { overflow: hidden; }
.mp-faq-a > div > * {
  margin: 0;
  padding: 0 0 28px;
  color: var(--ink-2);
  font-size: 15px; line-height: 1.7;
  max-width: 720px;
}
@media (prefers-reduced-motion: reduce) {
  .mp-faq-a { transition-duration: 1ms; }
}