/* ==========================================================================
   SymplChat — new homepage design
   Design language cloned from useboom.ai: neutral grayscale canvas,
   rounded-3xl bordered cards, framed sections with corner dots,
   scroll-reveal, marquee, flip-text, hover-reveal cards.
   ========================================================================== */

:root {
  /* Color tokens are RGB triplets (not hex) so Tailwind's /NN opacity
     modifiers can compose them as rgb(var(--x) / <alpha-value>) — see
     the tailwind.config color map in index.html. */
  --background: 255 255 255;
  --foreground: 10 10 10;
  --card: 255 255 255;
  --card-foreground: 10 10 10;
  --muted: 243 243 243;
  --muted-foreground: 115 115 115;
  --border: 229 229 229;
  --input: 229 229 229;
  --ring: 23 23 23;
  --primary: 23 23 23;
  --primary-foreground: 250 250 250;
  --secondary: 243 243 243;
  --secondary-foreground: 23 23 23;
  --sidebar: 250 250 250;
  --sidebar-foreground: 10 10 10;
  --brand-green: #25d366;
  --hero-tint: oklch(0.96 0.004 80);
  --radius: 0.5rem;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-padding-top: 5rem; }

/* Skip link: first focusable element on every page, hidden until focused. */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.6rem 1rem; border-radius: 0.5rem;
  background: rgb(var(--primary)); color: rgb(var(--primary-foreground));
  font-size: 14px; font-weight: 500; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; outline: 2px solid rgb(var(--ring)); outline-offset: 2px; }

body {
  background: rgb(var(--background));
  color: rgb(var(--foreground));
  font-family: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-heading {
  font-family: "Nunito Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* ---------------------------------------------------------------------- */
/* Framed section chrome: hairline edges + corner dots, like the source   */
/* ---------------------------------------------------------------------- */
.frame-x { border-left: 1px solid color-mix(in oklab, rgb(var(--border)), transparent 45%); border-right: 1px solid color-mix(in oklab, rgb(var(--border)), transparent 45%); }
.frame-b { border-bottom: 1px solid color-mix(in oklab, rgb(var(--border)), transparent 55%); }
.frame-t { border-top: 1px solid color-mix(in oklab, rgb(var(--border)), transparent 55%); }

.corner-dot { position: absolute; z-index: 10; width: 3px; height: 3px; display: none; }
@media (min-width: 640px) { .corner-dot { display: block; } }
.corner-dot::after {
  content: "";
  position: absolute; inset: 0;
  transform: translate(-50%, -50%);
  top: 50%; left: 50%;
  width: 2.5px; height: 2.5px;
  border-radius: 999px;
  background: color-mix(in oklab, rgb(var(--foreground)), transparent 60%);
  box-shadow: 0 0 0 10px rgb(var(--background));
}
.corner-dot.tl { top: -1px; left: -1px; }
.corner-dot.tr { top: -1px; right: -1px; }
.corner-dot.bl { bottom: -1px; left: -1px; }
.corner-dot.br { bottom: -1px; right: -1px; }

/* ---------------------------------------------------------------------- */
/* Header                                                                   */
/* ---------------------------------------------------------------------- */
#site-header { border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
#site-header.is-scrolled { border-bottom-color: rgb(var(--border)); box-shadow: 0 8px 24px -16px rgb(0 0 0 / 0.12); }

.nav-link { position: relative; }
.nav-underline {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: rgb(var(--foreground)); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover .nav-underline { transform: scaleX(1); }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  white-space: nowrap; font-size: .875rem; font-weight: 500;
  border-radius: var(--radius); transition: all .2s ease; height: 2.5rem; padding: 0 1.25rem;
}
.btn-primary { background: rgb(var(--primary)); color: rgb(var(--primary-foreground)); }
.btn-primary:hover { background: color-mix(in oklab, rgb(var(--primary)), transparent 10%); transform: translateY(-1px); }
.btn-outline { background: transparent; color: rgb(var(--foreground)); border: 1px solid rgb(var(--border)); }
.btn-outline:hover { background: rgb(var(--muted)); }
.btn-ghost { background: transparent; color: rgb(var(--foreground)); }
.btn-ghost:hover { background: rgb(var(--muted)); }

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll system                                                  */
/* ---------------------------------------------------------------------- */
.reveal-child { opacity: 0; }
[data-inview="true"] .reveal-child {
  animation-duration: .7s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode: both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.reveal-fade-up { animation-name: reveal-fade-up; }
.reveal-fade-left { animation-name: reveal-fade-left; }
.reveal-fade-right { animation-name: reveal-fade-right; }
.reveal-fade-scale { animation-name: reveal-fade-scale; }
.reveal-fade { animation-name: reveal-fade; }

@keyframes reveal-fade-up { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes reveal-fade-left { 0% { opacity: 0; transform: translateX(-16px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes reveal-fade-right { 0% { opacity: 0; transform: translateX(16px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes reveal-fade-scale { 0% { opacity: 0; transform: scale(.92); } 100% { opacity: 1; transform: scale(1); } }
@keyframes reveal-fade { 0% { opacity: 0; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .reveal-child { opacity: 1 !important; animation: none !important; }
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}

/* ---------------------------------------------------------------------- */
/* Logo marquee                                                             */
/* ---------------------------------------------------------------------- */
.marquee-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: logo-marquee 32s linear infinite; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes logo-marquee { to { transform: translateX(-50%); } }
.marquee-track img { filter: grayscale(1) brightness(0) opacity(.45); transition: filter .4s ease, opacity .4s ease; }
.marquee-track img:hover { filter: grayscale(1) brightness(0) opacity(.9); }

/* ---------------------------------------------------------------------- */
/* Flip text (launch banner)                                               */
/* ---------------------------------------------------------------------- */
.flip-wrap { display: inline-grid; vertical-align: top; text-align: left; transition: width .45s cubic-bezier(.22,1,.36,1); }
.flip-item {
  grid-area: 1 / 1;
  white-space: nowrap;
  justify-self: start;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
.flip-item.is-active { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------- */
/* Case / feature cards — hover-reveal description                         */
/* ---------------------------------------------------------------------- */
.reveal-rows { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1); }
.group:hover .reveal-rows,
.case-card:focus-within .reveal-rows { grid-template-rows: 1fr; }

/* Per-card hover color wash: each case-card sets --case-color inline;
   this gradient + grain layer fades in behind the icon/text on hover,
   cloned from useboom.ai's colored-glow hover treatment. */
.case-hover-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1);
  background:
    radial-gradient(130% 110% at 85% -8%,
      color-mix(in oklab, var(--case-color, #171717), white 35%) 0%,
      var(--case-color, #171717) 45%,
      color-mix(in oklab, var(--case-color, #171717), black 25%) 100%);
}
.case-card:hover .case-hover-bg,
.case-card:focus-visible .case-hover-bg { opacity: 1; }
.case-hover-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("grain.png");
  background-size: 160px 160px;
  opacity: .5;
  mix-blend-mode: overlay;
}

/* Blurred gradient + grain "glass" card background, cloned from the
   useboom.ai channel showcase cards. */
.channel-glass {
  position: relative;
  background: radial-gradient(135% 140% at 10% -10%, #6b7fc7 0%, #4a5a9c 28%, #27305e 58%, #12152b 100%);
}
.channel-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("grain.png");
  background-size: 160px 160px;
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* Card art line-draw animations                                           */
/* ---------------------------------------------------------------------- */
.art-draw { stroke-dasharray: 120; stroke-dashoffset: 120; animation: art-draw 6s ease-out infinite both; }
@keyframes art-draw { 0%, 8% { stroke-dashoffset: 120; } 45%, 100% { stroke-dashoffset: 0; } }

.art-pop { transform-box: fill-box; transform-origin: center; opacity: 0; animation: art-pop 6s cubic-bezier(.22,1,.36,1) infinite both; }
@keyframes art-pop { 0%, 30% { opacity: 0; transform: scale(.5); } 45% { opacity: 1; transform: scale(1.1); } 60%, 100% { opacity: 1; transform: scale(1); } }

.line-pulse { animation: line-pulse 3.6s ease-in-out infinite; }
@keyframes line-pulse { 0%, 100% { opacity: 1; } 35% { opacity: .25; } }

.line-drop { animation: line-drop 4.8s cubic-bezier(.22,1,.36,1) infinite both; }
@keyframes line-drop { 0%, 10% { opacity: 0; transform: translateY(-8px); } 30%, 100% { opacity: 1; transform: translateY(0); } }

.spin-slow { animation: spin-cw 9s linear infinite; transform-box: fill-box; transform-origin: center; }
.spin-slow-rev { animation: spin-ccw 5.5s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spin-cw { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

.breathe-dot { animation: breathe 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.7); } }

.orbit-spin { animation: spin-cw 90s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
.orbit-spin-fast { animation: spin-cw 40s linear infinite; transform-box: fill-box; transform-origin: center; }

/* ---------------------------------------------------------------------- */
/* Chat mockups                                                             */
/* ---------------------------------------------------------------------- */
.chat-bubble { opacity: 0; transform: translateY(10px) scale(.97); animation: bubble-in .6s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes bubble-in { to { opacity: 1; transform: translateY(0) scale(1); } }

/* Smooth height-grow entrance: new hero-feed items expand from 0 height
   instead of popping in, so the whole stack glides upward as they arrive. */
.grow-row { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.22,1,.36,1); margin-top: 0; }
.grow-row.is-open { grid-template-rows: 1fr; margin-top: 0.625rem; transition: grid-template-rows .6s cubic-bezier(.22,1,.36,1), margin-top .6s cubic-bezier(.22,1,.36,1); }
.grow-row:first-child.is-open { margin-top: 0; }
.grow-row > .grow-inner { overflow: hidden; }

.typing-dot { animation: typing-dot 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2.5px); } }

/* ---------------------------------------------------------------------- */
/* Sheen sweep (platform showcase)                                          */
/* ---------------------------------------------------------------------- */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.5) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 150% 0;
  animation: sheen 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen { 0% { background-position: 150% 0; } 50%, 100% { background-position: -50% 0; } }

/* ---------------------------------------------------------------------- */
/* Funnel chart draw                                                        */
/* ---------------------------------------------------------------------- */
.funnel-path { animation: funnel-reveal 7s cubic-bezier(.22,1,.36,1) infinite both; }
@keyframes funnel-reveal { 0% { clip-path: inset(0 100% 0 0); } 35%, 88% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }

/* ---------------------------------------------------------------------- */
/* Safety / radar rings                                                    */
/* ---------------------------------------------------------------------- */
.ring-pulse { animation: ring-pulse 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.ring-pulse:nth-child(2) { animation-delay: .5s; }
.ring-pulse:nth-child(3) { animation-delay: 1s; }
@keyframes ring-pulse { 0% { stroke-width: 1.6px; transform: scale(1); opacity: .9; } 100% { stroke-width: .5px; transform: scale(1.5); opacity: 0; } }

.drift { animation: drift 7s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }

/* ---------------------------------------------------------------------- */
/* Misc                                                                     */
/* ---------------------------------------------------------------------- */
.hero-bg-tint { background: var(--hero-tint); }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

code, pre { font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; }

::selection { background: rgb(var(--foreground)); color: rgb(var(--background)); }

.watermark {
  font-size: clamp(3.5rem, 18vw, 13rem);
  line-height: .8;
  letter-spacing: -0.02em;
  color: color-mix(in oklab, rgb(var(--foreground)), transparent 95%);
}

/* ---------------------------------------------------------------------- */
/* Omnichannel agent feed (channels card) — cloned from useboom.ai: a      */
/* masked viewport whose track slides up as each new item lands; older     */
/* items dim to 40%.                                                       */
/* ---------------------------------------------------------------------- */
.omni-viewport {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
}
.omni-track { transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .4s ease; will-change: transform; }
.omni-track.no-anim { transition: none; }
.omni-item { display: flex; opacity: 0; transition: opacity .5s ease; }
.omni-item.is-shown { opacity: 1; }
.omni-item.is-past { opacity: .4; }
.omni-item.is-user { justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) {
  .omni-track, .omni-item { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* Shared inbox stage — cloned from useboom.ai #handoff: grey-blue          */
/* gradient + grain, a sidebar and a conversation panel where messages     */
/* and agent steps land one at a time.                                     */
/* ---------------------------------------------------------------------- */
.inbox-stage { background: linear-gradient(180deg, #9a9ca3 0%, #858b95 38%, #4e5a6a 100%); }
.inbox-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("grain.png");
  background-size: 160px 160px;
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.inbox-thread { transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
.inbox-item { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.inbox-item.is-in { opacity: 1; transform: none; }
/* Agent "working" step: shimmering label until the step resolves. */
.inbox-step-label.is-working {
  background: linear-gradient(90deg, rgb(var(--muted-foreground)) 0%, rgb(var(--muted-foreground)) 40%, rgb(var(--foreground)) 50%, rgb(var(--muted-foreground)) 60%, rgb(var(--muted-foreground)) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: inbox-shimmer 1.4s linear infinite;
}
@keyframes inbox-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .inbox-thread, .inbox-item { transition: none; }
  .inbox-step-label.is-working { animation: none; color: rgb(var(--muted-foreground)); background: none; }
}

/* ---------------------------------------------------------------------- */
/* Blog — cloned from useboom.ai/blog                                      */
/* ---------------------------------------------------------------------- */
.blog-cover::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("grain.png");
  background-size: 160px 160px;
  opacity: .45;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.blog-tab { color: rgb(var(--muted-foreground)); }
.blog-tab[aria-pressed="true"] {
  background: rgb(var(--background));
  color: rgb(var(--foreground));
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 0 0 1px rgb(var(--border) / .6);
}
.blog-card[hidden] { display: none; }
nav[aria-label="On this page"] a.is-active { border-color: #059669; color: rgb(var(--foreground)); }

/* Article body — mirrors Tailwind Typography's prose-neutral defaults. */
.post-prose { color: #404040; font-size: 16px; line-height: 1.75; }
.post-prose > :first-child { margin-top: 0; }
.post-prose p { margin: 1.25em 0; }
.post-prose h2, .post-prose h3 {
  font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400; letter-spacing: -0.015em; color: rgb(var(--foreground));
  scroll-margin-top: 7rem;
}
.post-prose h2 { font-size: 1.5em; line-height: 1.33; margin: 2em 0 1em; }
.post-prose h3 { font-size: 1.25em; line-height: 1.6; margin: 1.6em 0 .6em; }
.post-prose h2 + *, .post-prose h3 + * { margin-top: 0; }
.post-prose strong { color: rgb(var(--foreground)); font-weight: 600; }
.post-prose a { color: #047857; text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.post-prose ul, .post-prose ol { margin: 1.25em 0; padding-left: 1.625em; }
.post-prose ul { list-style: disc; }
.post-prose ol { list-style: decimal; }
.post-prose li { margin: .5em 0; padding-left: .375em; }
.post-prose li::marker { color: #a3a3a3; }
.post-prose hr { border: 0; border-top: 1px solid rgb(var(--border)); margin: 3em 0; }
.post-prose table { width: 100%; border-collapse: collapse; font-size: .875em; line-height: 1.7; margin: 2em 0; }
.post-prose th { color: rgb(var(--foreground)); font-weight: 600; text-align: left; }
.post-prose th, .post-prose td { padding: .57em .57em; border-bottom: 1px solid rgb(var(--border)); vertical-align: top; }
.post-prose blockquote { border-left: 2px solid rgb(var(--border)); padding-left: 1em; font-style: italic; color: rgb(var(--foreground)); }
.post-prose code { font-size: .875em; font-weight: 600; color: rgb(var(--foreground)); }
.post-prose .stat-box .num { line-height: 1.15; }

/* ---------------------------------------------------------------------- */
/* Shared inbox page — cloned from useboom.ai/platform/shared-inbox         */
/* ---------------------------------------------------------------------- */
.inbox-convo { transition: background-color .3s ease, box-shadow .3s ease; }
.inbox-convo.is-active {
  background: rgb(var(--background));
  box-shadow: 0 1px 2px rgba(0,0,0,.04), inset 0 0 0 1px rgb(var(--border));
}
/* AI → team swimlane: lines draw in, then each stage appears. */
.lane-v { transform: scaleY(0); transform-origin: top; transition: transform .6s cubic-bezier(.22,1,.36,1) .5s; }
.lane-h { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.22,1,.36,1) 1s; }
.lane-node { opacity: 0; transform: translateY(6px); transition: opacity .5s ease var(--d, 0s), transform .5s cubic-bezier(.22,1,.36,1) var(--d, 0s); }
[data-inview="true"] .lane-v { transform: scaleY(1); }
[data-inview="true"] .lane-h { transform: scaleX(1); }
[data-inview="true"] .lane-node { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lane-v, .lane-h, .lane-node { transform: none; opacity: 1; transition: none; }
}

/* ---------------------------------------------------------------------- */
/* Automation flows page — cloned from useboom.ai/platform/workflow-builder */
/* ---------------------------------------------------------------------- */
/* Vertical connector between steps of a flow card. */
.flow-step:not(:last-child)::before {
  content: "";
  position: absolute; left: 4.5px; top: 15px; bottom: -1px;
  width: 1px; background: rgb(var(--foreground) / .18);
}
.flow-step { opacity: 0; transform: translateY(6px); transition: opacity .5s ease var(--d, 0s), transform .5s cubic-bezier(.22,1,.36,1) var(--d, 0s); }
[data-inview="true"] .flow-step { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .flow-step { opacity: 1; transform: none; transition: none; } }

/* ---------------------------------------------------------------------- */
/* Legal pages (privacy, terms) — cloned from useboom.ai/privacy           */
/* ---------------------------------------------------------------------- */
.legal-prose h1, .legal-prose h2, .legal-prose h3 { font-family: inherit; font-weight: 600; letter-spacing: -0.025em; }
.legal-prose h1 { font-size: 1.875rem; line-height: 1.2; margin: 0 0 .9em; color: rgb(var(--foreground)); }
@media (min-width: 768px) { .legal-prose h1 { font-size: 2.25rem; } }
.legal-prose h2 { font-size: 1.25rem; line-height: 1.4; margin: 2.5rem 0 .75rem; }
.legal-prose h3 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.legal-prose nav { margin: 2rem 0 2.5rem; }
.legal-prose nav h2 { margin-top: 0; }
.legal-prose nav ul { list-style: disc; }
.legal-prose nav li { margin: .3em 0; }
.legal-callout {
  margin: 1.75rem 0; padding: 1rem 1.25rem;
  border: 1px solid rgb(var(--border)); border-radius: 1rem;
  background: oklch(0.965 0.004 85);
}
.legal-callout p { margin: 0; }