* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', Arial, sans-serif; background: #faf9f5; color: #141413; }
h1, h2, h3 { font-family: 'Poppins', Arial, sans-serif; letter-spacing: -0.01em; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
@keyframes fadeSlideUp {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36,115,218,0.40); }
  50% { box-shadow: 0 0 0 12px rgba(36,115,218,0); }
}
@keyframes slideIn {
  0% { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes mobileMenuIn {
  0% { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}

.animate-float { animation: float 4s ease-in-out infinite; }
.animate-fade-slide-up { animation: fadeSlideUp 0.6s ease-out forwards; }
.animate-fade-slide-up-2 { animation: fadeSlideUp 0.6s ease-out 0.15s forwards; opacity: 0; }
.animate-fade-slide-up-3 { animation: fadeSlideUp 0.6s ease-out 0.3s forwards; opacity: 0; }
.animate-typing-dot { animation: typingDot 1.4s ease-in-out infinite; }
.animate-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.animate-typing-dot:nth-child(3) { animation-delay: 0.4s; }
.animate-pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
.animate-slide-in { animation: slideIn 0.4s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.3s ease-out forwards; }

.chat-message { animation: slideIn 0.35s ease-out forwards; }

.mobile-menu-panel { animation: mobileMenuIn 0.25s ease-out forwards; }

.gradient-text { background: linear-gradient(135deg, #103462, #2473da, #51bfc7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.hero-gradient { background: linear-gradient(135deg, #f4f8fd 0%, #eaf7f8 50%, #f6fcfc 100%); }

.card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(36,115,218,0.30); }

.plan-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.plan-card:hover { transform: translateY(-6px); }

.popular-card { box-shadow: 0 8px 32px rgba(36,115,218,0.25); border-color: #2473da; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 2px #faf9f5, 0 0 0 4px #2473da; }

.step-circle { animation: scaleIn 0.4s ease-out forwards; animation-timeline: view(); }

/* Anchor sections: offset for fixed navbar */
section[id] { scroll-margin-top: 5.5rem; }

/* Small-screen typography + hero refinements */
@media (max-width: 639px) {
  .hero-chat-card { max-width: 100%; }
  .hero-heading { font-size: 2.15rem !important; }
  .hero-sub { font-size: 1rem !important; }
  .trust-badges { gap: 0.5rem; }
}

/* ==========================================================================
   Utilities the views reference that the compiled landing.css does not have.

   public/css/landing.css is a checked-in Tailwind build and there is no build
   step wired into package.json. Its palette is also NOT the one in
   tailwind.config.js (there bg-orange-500 resolves to #2473da, the primary
   blue), so re-running Tailwind would recolour the whole site. Anything added
   after that build therefore has to be declared here by hand -- otherwise the
   class silently does nothing and the markup looks correct in review while
   rendering wrong.

   Palette values below are lifted from landing.css so the additions blend with
   the compiled rules: primary-50 #f4f8fd, 100 #e5eefb, 200 #c8dcf6,
   300 #a7c7f0, 400 #80aeea, 500 #2473da, 600 #1f63bb, teal-300 #b9e5e9.
   ========================================================================== */

/* Colours */
.bg-\[\#f4f8fd\] { background-color: #f4f8fd; }
.text-\[\#103462\] { color: #103462; }
.bg-primary-300 { --tw-bg-opacity: 1; background-color: rgb(167 199 240 / var(--tw-bg-opacity, 1)); }
.bg-primary-400 { --tw-bg-opacity: 1; background-color: rgb(128 174 234 / var(--tw-bg-opacity, 1)); }
.bg-primary-700 { --tw-bg-opacity: 1; background-color: rgb(26 80 143 / var(--tw-bg-opacity, 1)); }
.bg-teal-300 { --tw-bg-opacity: 1; background-color: rgb(185 229 233 / var(--tw-bg-opacity, 1)); }
.bg-orange-400 { --tw-bg-opacity: 1; background-color: rgb(61 132 226 / var(--tw-bg-opacity, 1)); }
.bg-primary-100\/80 { background-color: rgba(229, 238, 251, 0.8); }
.bg-primary-300\/10 { background-color: rgba(167, 199, 240, 0.1); }
.bg-primary-950\/30 { background-color: rgba(16, 52, 98, 0.3); }
.border-primary-100\/60 { border-color: rgba(229, 238, 251, 0.6); }
.border-primary-200\/60 { border-color: rgba(200, 220, 246, 0.6); }
.hover\:border-primary-300:hover { border-color: #a7c7f0; }
.shadow-primary-300\/40 { --tw-shadow-color: rgba(167, 199, 240, 0.4); }

/* The rose accent the landing uses for its "no credit card" and warning cues. */
.bg-rose-50 { background-color: #fff1f2; }
.border-rose-200 { border-color: #fecdd3; }
.text-rose-500 { --tw-text-opacity: 1; color: rgb(244 63 94 / var(--tw-text-opacity, 1)); }
.hover\:text-rose-700:hover { --tw-text-opacity: 1; color: rgb(190 18 60 / var(--tw-text-opacity, 1)); }
.from-rose-50 { --tw-gradient-from: #fff1f2 var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 241 242 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-rose-50\/50 { --tw-gradient-from: rgba(255, 241, 242, 0.5) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 241 242 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-rose-200 { --tw-gradient-from: #fecdd3 var(--tw-gradient-from-position); --tw-gradient-to: rgb(254 205 211 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-rose-200\/40 { --tw-gradient-from: rgba(254, 205, 211, 0.4) var(--tw-gradient-from-position); --tw-gradient-to: rgb(254 205 211 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

/* Gradient stops. "orange" is aliased to the primary blue throughout
   landing.css, so these stay in the blue family on purpose. */
.from-primary-50\/40 { --tw-gradient-from: rgba(244, 248, 253, 0.4) var(--tw-gradient-from-position); --tw-gradient-to: rgb(244 248 253 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-primary-50\/60 { --tw-gradient-from: rgba(244, 248, 253, 0.6) var(--tw-gradient-from-position); --tw-gradient-to: rgb(244 248 253 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-primary-200\/40 { --tw-gradient-from: rgba(200, 220, 246, 0.4) var(--tw-gradient-from-position); --tw-gradient-to: rgb(200 220 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-primary-300\/40 { --tw-gradient-from: rgba(167, 199, 240, 0.4) var(--tw-gradient-from-position); --tw-gradient-to: rgb(167 199 240 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-primary-400 { --tw-gradient-via-position: 50%; --tw-gradient-mid: #80aeea var(--tw-gradient-via-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-mid), var(--tw-gradient-to); }
.to-primary-200 { --tw-gradient-to: #c8dcf6 var(--tw-gradient-to-position); }
.to-teal-300 { --tw-gradient-to: #b9e5e9 var(--tw-gradient-to-position); }
.to-pink-300 { --tw-gradient-to: #f9a8d4 var(--tw-gradient-to-position); }
.to-orange-200\/40 { --tw-gradient-to: rgba(200, 220, 246, 0.4) var(--tw-gradient-to-position); }
.to-orange-50\/40 { --tw-gradient-to: rgba(244, 248, 253, 0.4) var(--tw-gradient-to-position); }

/* Layout / typography */
.leading-snug { line-height: 1.375; }
.invisible { visibility: hidden; }
.list-none { list-style-type: none; }
.top-full { top: 100%; }
.min-h-\[44px\] { min-height: 44px; }
.min-w-\[180px\] { min-width: 11.25rem; }
.max-w-\[260px\] { max-width: 16.25rem; }
.max-h-\[calc\(100vh-4rem\)\] { max-height: calc(100vh - 4rem); }
.overscroll-contain { overscroll-behavior: contain; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-slide-down { animation: slideDown 180ms ease-out forwards; }

/* Breakpoint utilities the compiled build is missing. */
@media (min-width: 640px) {
  .sm\:gap-3 { gap: 0.75rem; }
  .sm\:flex-wrap { flex-wrap: wrap; }
  .sm\:justify-end { justify-content: flex-end; }
  .sm\:h-10 { height: 2.5rem; }
}
@media (min-width: 1024px) {
  /* The navbar shows all five dropdown groups plus two buttons. Below this width
     that row is wider than a tablet viewport, so the buttons used to be pushed
     past the right edge and clipped with no way to reach them. The drawer takes
     over below 1024 instead. */
  .lg\:flex { display: flex; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .lg\:gap-0\.5 { gap: 0.125rem; }
  .xl\:gap-1 { gap: 0.25rem; }
  .xl\:px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
}
@media (min-width: 1280px) {
  .lg\:gap-0\.5 { gap: 0.25rem; }
}

/* ==========================================================================
   Shared navbar behaviour

   The dropdown panels used to rely on `opacity-0 invisible group-hover:*` for
   their closed state, and none of those utilities survived the CSS build. The
   panels therefore stayed in the layout at opacity 0 and silently swallowed
   clicks on whatever sat underneath them. A closed panel is now hidden and
   inert for real.
   ========================================================================== */
.nav-trigger { white-space: nowrap; }
.nav-panel {
  top: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  min-width: 11.25rem;
  max-width: 16.25rem;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.nav-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
/* Open-on-hover is handled in JS, not here, so that aria-expanded stays in sync
   with what is actually on screen. */
.mobile-menu-panel details > summary { list-style: none; }
.mobile-menu-panel details > summary::-webkit-details-marker { display: none; }
.mobile-menu-panel details[open] > summary svg { transform: rotate(180deg); }
.mobile-menu-panel details[open] > div { animation: slideDown 180ms ease-out forwards; }

/* ==========================================================================
   Landing responsiveness

   Mock product UI (the dashboard, blog widget and report previews) has to stay
   legible inside a card that is only ~150px wide on a 320px phone. A fixed
   1.5rem number is wider than its own column there, so these scale with the
   viewport instead.
   ========================================================================== */
.mock-stat-value { font-size: clamp(1.05rem, 4.4vw, 1.5rem); }
.mock-stat-label { font-size: clamp(0.625rem, 2.4vw, 0.75rem); }

/* FAQ toggles were 34px tall on a phone, under the 44px comfortable target. */
.faq-toggle { min-height: 44px; }

/* --------------------------------------------------------------------------
   Second batch: spacing and sizing utilities the marketing pages reference.

   These are the standard Tailwind scale (0.25rem steps) so they match the
   compiled rules in landing.css rather than introducing a second rhythm.
   -------------------------------------------------------------------------- */
.pb-16 { padding-bottom: 4rem; }
.pb-14 { padding-bottom: 3.5rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.p-7 { padding: 1.75rem; }
.pl-11 { padding-left: 2.75rem; }
.pt-32 { padding-top: 8rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-9 { margin-top: 2.25rem; }
.mt-14 { margin-top: 3.5rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-9 { margin-bottom: 2.25rem; }
.ml-4 { margin-left: 1rem; }
.gap-10 { gap: 2.5rem; }
.gap-3\.5 { gap: 0.875rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
.space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem; }
.space-y-16 > :not([hidden]) ~ :not([hidden]) { margin-top: 4rem; }
.top-2 { top: 0.5rem; }
.top-5 { top: 1.25rem; }
.top-6 { top: 1.5rem; }
.left-\[19px\] { left: 19px; }
.self-start { align-self: flex-start; }
.max-w-6xl { max-width: 72rem; }
.min-w-\[560px\] { min-width: 35rem; }
.w-px { width: 1px; }
.opacity-75 { opacity: 0.75; }
.list-disc { list-style-type: disc; }

.text-7xl { font-size: 4.5rem; line-height: 1; }
.text-primary-100 { --tw-text-opacity: 1; color: rgb(229 238 251 / var(--tw-text-opacity, 1)); }
.text-purple-400 { --tw-text-opacity: 1; color: rgb(192 132 252 / var(--tw-text-opacity, 1)); }
.text-teal-500 { --tw-text-opacity: 1; color: rgb(53 168 178 / var(--tw-text-opacity, 1)); }
.bg-orange-300 { --tw-bg-opacity: 1; background-color: rgb(253 186 116 / var(--tw-bg-opacity, 1)); }
.to-primary-700 { --tw-gradient-to: #1a508f var(--tw-gradient-to-position); }

/* Ring utilities. Only the ring colour and width are ever used on these pages,
   so the Tailwind v3 shadow stack is reproduced rather than approximated. */
.ring-2, .ring-4 {
  --tw-ring-offset-shadow: 0 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
}
.ring-2 { --tw-ring-shadow: 0 0 0 calc(2px) var(--tw-ring-color, #e5eefb); }
.ring-4 { --tw-ring-shadow: 0 0 0 calc(4px) var(--tw-ring-color, #e5eefb); }
.ring-primary-100 { --tw-ring-color: #e5eefb; }
.ring-primary-200 { --tw-ring-color: #c8dcf6; }
.focus\:ring-primary-100:focus { --tw-ring-color: #e5eefb; }
.focus-within\:border-primary-400:focus-within { border-color: #80aeea; }
/* A Tailwind shadow *colour* does not paint anything on its own: it sets
   --tw-shadow-color, then re-points --tw-shadow at the --tw-shadow-colored
   variant that shadow-lg / shadow-xl already declared. Setting only the colour
   leaves the black default in place. Both properties are required. */
.hover\:shadow-primary-300\/50:hover {
  --tw-shadow-color: rgba(167, 199, 240, 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary-500\/25 {
  --tw-shadow-color: rgba(36, 115, 218, 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

@media (min-width: 640px) {
  .sm\:p-9 { padding: 2.25rem; }
  .sm\:pl-16 { padding-left: 4rem; }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:text-8xl { font-size: 6rem; line-height: 1; }
}
@media (min-width: 1024px) {
  .lg\:pt-40 { padding-top: 10rem; }
  .lg\:pb-24 { padding-bottom: 6rem; }
  .lg\:pb-20 { padding-bottom: 5rem; }
  .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .lg\:gap-14 { gap: 3.5rem; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:sticky { position: sticky; }
  .lg\:top-28 { top: 7rem; }
}

/* -my-1 pairs with py-1 to grow a link's hit area to the WCAG 2.5.8 minimum
   without moving anything around it. The compiled build has py-1 but not the
   negative-margin counterpart. */
.-my-1 { margin-top: -0.25rem; margin-bottom: -0.25rem; }

/* --------------------------------------------------------------------------
   FAQ progressive disclosure.

   #faq-more holds the lower-priority questions. It ships WITHOUT `hidden` in
   the markup so a no-JS visitor and any crawler still see all 25 answers; the
   inline script hides it during parse, before first paint. The class below then
   owns the reveal.

   `overflow: hidden` is required while the height animates, otherwise the extra
   questions simply appear outside the box instead of growing it. Once open the
   overflow is released via .is-open, because a persistent `hidden` would clip the
   shadow of any FAQ the visitor then expands inside.
   -------------------------------------------------------------------------- */
.faq-more {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.faq-more.is-open { overflow: visible; opacity: 1; }

/* FAQ show-more button: asymmetric padding leaves room for the chevron disc on
   the right, plus the group-hover tint on that disc. */
.pl-6 { padding-left: 1.5rem; }
.pr-5 { padding-right: 1.25rem; }
.group:hover .group-hover\:bg-primary-100 { --tw-bg-opacity: 1; background-color: rgb(229 238 251 / var(--tw-bg-opacity, 1)); }