/* Lulu Integrations - public site.
 *
 * Same palette and type as the admin app, taken from the brand tokens, so the
 * site and the product look like one thing. Plain CSS with no build step: a
 * marketing page should be editable without running a toolchain. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --forest: #189F4A;
  --forest-deep: #0E6E36;
  --moss: #2FBF63;
  --mint: #8CF5A9;
  --mint-pale: #E3FBE9;
  --brass: #E8890C;
  --brass-bright: #FFB238;
  --paper: #FCFBF6;
  --paper-warm: #F4F2E6;
  --ink: #16241C;
  --ink-soft: #62705F;
  --line: #E1DECD;

  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 14px; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 16px; color: var(--ink-soft); }
a { color: var(--forest-deep); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- Header ---- */
/* The header used to be near-white on a near-white page, which is why it read
   as flat: there was nothing to separate it from the content below.
   It is NOT green. The logo is navy with teal, orange and purple nodes, and a
   green bar behind it fights all four. Instead the brand navy anchors the top
   edge, green is kept for the one thing we want clicked, and the bar itself
   stays paper so the logo lands on the background it was drawn for. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 251, 246, 0.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid rgba(37, 42, 74, 0.12);
  box-shadow: 0 1px 0 rgba(37, 42, 74, .04), 0 8px 24px -18px rgba(37, 42, 74, .45);
}
/* A hairline of the brand navy across the very top - the smallest possible
   amount of colour that makes the bar feel deliberate. */
.site-header::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #252A4A 0%, #2AA6A0 38%, var(--forest) 62%, #E8890C 100%);
}
/* 88px was most of a phone screen before any content appeared. */
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 72px; }
.brand-link { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand-link img { height: 44px; width: auto; max-width: 200px; display: block; }
.site-nav { display: flex; gap: 26px; margin-left: 12px; flex: 1; }
.site-nav a {
  color: #3D4460; text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 6px 2px; position: relative; transition: color .15s ease;
}
/* An underline that grows from the link rather than a colour change alone -
   it gives the nav something to do on hover without adding chrome. */
.site-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--forest); border-radius: 1px;
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }
.site-nav a:hover, .site-nav a.active { color: #252A4A; }
@media (prefers-reduced-motion: reduce) { .site-nav a::after { transition: none; } }
.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-weight: 600; font-size: 0.95rem;
  padding: 11px 20px; border-radius: 9px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.btn-primary { background: var(--forest); color: #fff; box-shadow: 0 2px 0 rgba(14, 110, 54, 0.35); }
.btn-primary:hover { background: var(--forest-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--forest-deep); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--forest); }
.btn-sm { padding: 8px 15px; font-size: 0.88rem; }
.btn-lg { padding: 14px 28px; font-size: 1.02rem; }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 18px; }

/* ---- Hero ---- */
.hero { padding: 78px 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mint-pale); color: var(--forest-deep);
  border-radius: 30px; padding: 6px 14px; font-size: 13px; font-weight: 600; margin-bottom: 18px;
}
.hero p.lead { font-size: 1.12rem; max-width: 54ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-note { font-size: 13.5px; color: var(--ink-soft); margin-top: 16px; }

/* A phone-call illustration built from CSS - no image to load or maintain. */
.hero-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; box-shadow: 0 18px 46px rgba(22, 36, 28, 0.09);
}
.call-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--paper-warm); }
.call-row:last-child { border-bottom: none; }
.call-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--mint-pale); color: var(--forest-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.call-meta { flex: 1; min-width: 0; }
.call-meta b { display: block; font-size: 14.5px; }
.call-meta span { font-size: 12.5px; color: var(--ink-soft); }
.call-tag { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: var(--paper-warm); color: var(--ink-soft); }
.call-tag.ai { background: var(--mint-pale); color: var(--forest-deep); }

/* ---- Sections ---- */
section { padding: 66px 0; }
.section-head { text-align: center; max-width: 62ch; margin: 0 auto 44px; }
.section-head p { font-size: 1.04rem; }
.alt { background: var(--paper-warm); }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; }
.card .ico { width: 42px; height: 42px; border-radius: 11px; background: var(--mint-pale); color: var(--forest-deep); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; font-size: 14.5px; }

/* ---- Pricing ---- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; align-items: stretch; }
.plan {
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  padding: 26px 22px; display: flex; flex-direction: column; position: relative;
}
.plan.featured { border-color: var(--forest); box-shadow: 0 14px 34px rgba(24, 159, 74, 0.13); }
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--forest); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 4px 13px; border-radius: 20px; letter-spacing: 0.03em;
}
.plan-name { font-family: var(--display); font-size: 1.25rem; font-weight: 600; }
.plan-price { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 2px; }
.plan-price small { font-size: 0.95rem; font-weight: 400; color: var(--ink-soft); }
.plan-desc { font-size: 13.5px; color: var(--ink-soft); min-height: 42px; margin: 8px 0 16px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.plan li { font-size: 14px; color: var(--ink-soft); display: flex; gap: 9px; align-items: flex-start; }
.plan li::before { content: '✓'; color: var(--forest); font-weight: 700; flex: none; }
.plan li.ai::before { content: '✦'; color: var(--brass); }
.plan li.ai { color: var(--forest-deep); font-weight: 600; }
.plan .btn { margin-top: auto; width: 100%; }

.price-note { text-align: center; color: var(--ink-soft); font-size: 14px; margin-top: 30px; }

/* ---- FAQ ---- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--forest); font-size: 22px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 12px 0 0; font-size: 14.5px; }

/* ---- CTA + footer ---- */
.cta-band { background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%); color: #fff; text-align: center; }
.cta-band h2, .cta-band p { color: #fff; }
.cta-band p { opacity: 0.92; max-width: 54ch; margin: 0 auto 26px; }
.cta-band .btn-primary { background: #fff; color: var(--forest-deep); box-shadow: 0 2px 0 rgba(0,0,0,0.16); }
.cta-band .btn-primary:hover { background: var(--mint-pale); }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.cta-band .btn-ghost:hover { border-color: #fff; }

.site-footer { background: var(--ink); color: rgba(255,255,255,0.72); padding: 52px 0 26px; font-size: 14px; }
.site-footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
.site-footer a { color: rgba(255,255,255,0.72); text-decoration: none; display: block; margin-bottom: 9px; }
.site-footer a:hover { color: var(--mint); }
.footer-brand img { height: 84px; margin-bottom: 16px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 36px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }

/* ---- Content pages ---- */
.page-head { padding: 56px 0 28px; }
.prose { max-width: 74ch; }
.prose h2 { margin-top: 34px; }
.prose ul { color: var(--ink-soft); padding-left: 20px; }
.prose li { margin-bottom: 8px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .site-nav {
    display: none; position: absolute; top: 88px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff;
    border-bottom: 1px solid var(--line); padding: 8px 24px 16px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 11px 0; }
  .nav-toggle { display: block; }
  .header-actions .btn-ghost { display: none; }
  section { padding: 48px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ---- CRM integration band ---- */
.crm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.crm-band .eyebrow { background: rgba(232, 137, 12, 0.14); color: #8a5200; }
.crm-shot img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(22, 36, 28, 0.12);
}
@media (max-width: 900px) { .crm-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Polish ---------------------------------------------------------------
   Small things that separate a page that is merely online from one that feels
   built: focus rings for keyboard users, selection colour, smooth entry, and
   an accessible skip link.
   -------------------------------------------------------------------------- */
::selection { background: var(--mint-pale); color: var(--forest-deep); }

/* Visible focus for keyboard navigation. Removing outlines without replacing
   them makes a site unusable without a mouse. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--forest); color: #fff; padding: 10px 18px;
  border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Cards lift slightly on hover - enough to feel responsive, not enough to
   distract while reading. */
.card { transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(22, 36, 28, 0.08); border-color: var(--line); }
.plan { transition: transform 0.16s ease, box-shadow 0.16s ease; }
.plan:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(22, 36, 28, 0.11); }

.faq details { transition: border-color 0.14s ease; }
.faq details[open] { border-color: var(--forest); }
.faq summary:hover { color: var(--forest-deep); }

/* Section rhythm: a hairline between light sections stops them running
   together on long pages. */
section + section:not(.alt):not(.cta-band):not(.crm-band) { border-top: 1px solid var(--line); }

/* Long words and numbers must not force horizontal scrolling on a phone. */
body { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover, .plan:hover { transform: none; }
}

/* Print: nobody needs the sticky header or the calls-to-action on paper. */
@media print {
  .site-header, .cta-band, .nav-toggle, .skip-link { display: none; }
  body { background: #fff; }
  .site-footer { background: none; color: #000; }
}

/* Sign in appears in the nav only on small screens, where the header button is
   hidden for space. On desktop the header button is the one to use. */
.nav-signin { display: none; }
@media (max-width: 720px) {
  .nav-signin { display: block; color: var(--forest-deep) !important; font-weight: 600; }
}