/* greetster-style.css — site-wide styles. Tokens + layout law live in style.md. */

:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --ink: #17181d;
  --body: #4c5158;
  --muted: #868c96;
  --line: #e7e9ee;
  --blurple: #5865f2;
  --blurple-hover: #4752c4;
  --blurple-tint: #eef0fe;
  --green: #23a55a;
  --red: #e5484d;
  --r-panel: 20px;
  --r-card: 12px;
  --r-btn: 10px;
  --shadow: 0 1px 2px rgba(23, 24, 29, 0.04), 0 12px 32px rgba(23, 24, 29, 0.07);
  --shadow-hover: 0 2px 4px rgba(23, 24, 29, 0.05), 0 18px 44px rgba(23, 24, 29, 0.11);
  --max: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  /* the page itself wears a faint wash of the platform accent: obvious enough
     to feel the switch, quiet enough to stay a white/grey SaaS. Fades with
     the same 0.55s morph as everything else. */
  background-color: color-mix(in srgb, var(--blurple) 5%, var(--bg));
  transition: background-color 0.55s ease;
  /* accent splashes: soft platform-colored halos, re-tint on platform switch */
  background-image:
    radial-gradient(1000px 520px at 50% -120px, color-mix(in srgb, var(--blurple) 14%, transparent), transparent 70%),
    radial-gradient(820px 560px at 108% 38%, color-mix(in srgb, var(--blurple) 9%, transparent), transparent 70%),
    radial-gradient(760px 520px at -8% 76%, color-mix(in srgb, var(--blurple) 9%, transparent), transparent 70%),
    radial-gradient(700px 480px at 104% 92%, color-mix(in srgb, var(--blurple) 7%, transparent), transparent 70%);
  background-repeat: no-repeat;
  color: var(--body);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

/* ── Doodle atmosphere (the "feels at home" layer) ──
   One hand-drawn-ish pattern (chat bubble, check, paper plane, coin, key, list),
   painted in the LIVE accent through a mask, so switching platform re-tints
   every doodle in the same 0.55s morph. Barely visible on purpose. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--blurple);
  opacity: 0.065;
  transition: background-color 0.55s ease;
  animation: doodle-drift 140s linear infinite alternate;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'><g fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(20 24) rotate(-8)'><path d='M2 8a6 6 0 0 1 6-6h24a6 6 0 0 1 6 6v13a6 6 0 0 1-6 6H18l-8 7v-7H8a6 6 0 0 1-6-6z'/></g><g transform='translate(136 36) rotate(6)'><circle cx='14' cy='14' r='13'/><path d='M8 14l4 4 8-9'/></g><g transform='translate(56 124) rotate(-10)'><path d='M2 13L32 2l-7 28-9-10z'/><path d='M16 20l16-18'/></g><g transform='translate(162 152) rotate(8)'><circle cx='13' cy='13' r='12'/><path d='M13 6.5v13M16.5 9h-5a2.4 2.4 0 0 0 0 4.8h3a2.4 2.4 0 0 1 0 4.8h-6'/></g><g transform='translate(16 164) rotate(-12)'><circle cx='9' cy='9' r='7'/><path d='M14 14l14 14M23 23l4-4M28 28l3.5-3.5'/></g><g transform='translate(120 196) rotate(5)'><path d='M2 2h26M2 9h18M2 16h22'/></g></g></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'><g fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(20 24) rotate(-8)'><path d='M2 8a6 6 0 0 1 6-6h24a6 6 0 0 1 6 6v13a6 6 0 0 1-6 6H18l-8 7v-7H8a6 6 0 0 1-6-6z'/></g><g transform='translate(136 36) rotate(6)'><circle cx='14' cy='14' r='13'/><path d='M8 14l4 4 8-9'/></g><g transform='translate(56 124) rotate(-10)'><path d='M2 13L32 2l-7 28-9-10z'/><path d='M16 20l16-18'/></g><g transform='translate(162 152) rotate(8)'><circle cx='13' cy='13' r='12'/><path d='M13 6.5v13M16.5 9h-5a2.4 2.4 0 0 0 0 4.8h3a2.4 2.4 0 0 1 0 4.8h-6'/></g><g transform='translate(16 164) rotate(-12)'><circle cx='9' cy='9' r='7'/><path d='M14 14l14 14M23 23l4-4M28 28l3.5-3.5'/></g><g transform='translate(120 196) rotate(5)'><path d='M2 2h26M2 9h18M2 16h22'/></g></g></svg>");
  -webkit-mask-size: 230px 230px;
  mask-size: 230px 230px;
}
@keyframes doodle-drift {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: 230px 460px; mask-position: 230px 460px; }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

h1, h2, h3 { color: var(--ink); line-height: 1.12; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.08rem; font-weight: 700; }

/* ── Sections: unboxed, they sit straight on the doodled background.
   Small cards inside are the "bubbles", like messages on a chat wallpaper. ── */
.panel {
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px 40px;
}
/* symmetry law: every section head is centered, kicker + h2 + p on one axis */
.panel-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.panel-head .kicker {
  display: inline-block;
  background: var(--blurple-tint);
  color: var(--blurple);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.panel-head p { margin-top: 10px; }

/* ── Nav (injected by site-nav.js) ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--blurple); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
}
.logo-word { color: var(--ink); font-weight: 800; font-size: 1.1rem; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a:not(.btn) { color: var(--body); text-decoration: none; font-size: 0.93rem; font-weight: 500; }
.nav-links a:not(.btn):hover { color: var(--ink); }
/* returning customers: their way back in. Quiet on desktop, the only nav
   action on phone. Points at dashboard.html, which bounces to auth if the
   session is gone, so one link serves "log in" and "open my dashboard". */
.nav-login { font-weight: 700 !important; color: var(--ink) !important; }

/* ── Features dropdown: hover opens on desktop, focus covers keyboard/tap.
   Each entry is a mini pitch: bold name + one-line hook, links to its page. ── */
.nav-drop { position: relative; }
.nav-drop::after { content: ""; position: absolute; left: -20px; right: -20px; top: 100%; height: 14px; } /* hover bridge over the gap */
.drop-menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 300px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-hover);
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.drop-menu a { display: block; padding: 10px 12px; border-radius: 9px; text-decoration: none; }
.drop-menu a:hover { background: var(--blurple-tint); }
.drop-menu a strong { display: block; color: var(--ink); font-size: 0.92rem; font-weight: 700; }
.drop-menu a span { color: var(--muted); font-size: 0.8rem; }
.nav-drop > a .caret { font-size: 0.7rem; margin-left: 3px; }

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--blurple); color: #fff; box-shadow: 0 6px 18px rgba(88, 101, 242, 0.32); }
.btn-primary:hover { background: var(--blurple-hover); box-shadow: 0 10px 24px rgba(88, 101, 242, 0.4); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-small { padding: 9px 18px; font-size: 0.88rem; }

/* ── Cards (generic) ── */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* ── Scroll reveal (js/all/scroll-reveal.js flips .visible) ── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Video placeholders ── */
.video-slot {
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #fafbfc, #f0f1f5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.video-slot:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.video-slot .play {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--blurple);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(88, 101, 242, 0.35);
}
.video-slot .play::after {
  content: ""; margin-left: 4px;
  border-left: 17px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.video-slot p { color: var(--muted); font-size: 0.9rem; font-weight: 600; }

/* ── Footer (injected) ── */
.site-footer { max-width: var(--max); margin: 40px auto 28px; padding: 0 24px; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 0.85rem; color: var(--muted);
}
.footer-inner a { color: var(--muted); }

/* ── Platform theming ──
   The accent variables are the ONLY thing that changes per platform.
   html[data-platform] is set by js/all/platform-theme.js and persists in
   localStorage, so the whole site (and dashboard) morphs, nothing is rebuilt. */
html[data-platform="telegram"] {
  --blurple: #24a1de;
  --blurple-hover: #0088cc;
  --blurple-tint: #e7f4fb;
}

/* the "dusty morph": accent-colored things ease into the new color */
.btn-primary, .btn-ghost, .kicker, .logo-mark, .card, .video-slot .play,
.plan, .plan-head, .plan .cap-line, .toggle-row button,
.compare-table th, .compare-table td {
  transition: background-color 0.55s ease, color 0.55s ease,
              border-color 0.55s ease, box-shadow 0.55s ease;
}

/* ── Platform picker pills (hero + reusable) ── */
.platform-pick { display: flex; gap: 10px; justify-content: center; margin: 0 0 26px; flex-wrap: wrap; }
.platform-pick button {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: 99px;
  border: 1.5px solid var(--line);
  background: #fff; color: var(--body);
  font-weight: 700; font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease, transform 0.18s ease;
}
.platform-pick button:hover { transform: translateY(-2px); }
.platform-pick button.active { border-color: var(--blurple); color: var(--blurple); background: var(--blurple-tint); }
.platform-pick .soon {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em;
  color: var(--muted); background: var(--bg);
  padding: 2px 8px; border-radius: 99px;
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .panel { padding: 48px 18px; }
  /* Phone bar = logo + Log in, nothing else. "Start free trial" is already in
     the hero, in pricing, and in the final CTA, so repeating it up here wastes
     the one slot returning customers actually need. */
  .nav-links { gap: 14px; }
  .nav-links a:not(.nav-login) { display: none; }
  .nav-drop { display: none; }
  .nav-login {
    display: inline-block;
    padding: 8px 16px; border-radius: var(--r-btn);
    border: 1px solid var(--line); background: #fff;
    color: var(--ink); font-weight: 700; font-size: 0.86rem;
  }

  /* phone background = SAME white/grey as desktop. The desktop halos are
     sized in px, so on a 375px screen they blanketed the viewport and the
     whole page read "blue". Shrink + soften them, thin the accent wash. */
  body {
    background-color: color-mix(in srgb, var(--blurple) 3%, var(--bg));
    background-image:
      radial-gradient(420px 260px at 50% -80px, color-mix(in srgb, var(--blurple) 10%, transparent), transparent 70%),
      radial-gradient(360px 240px at 110% 45%, color-mix(in srgb, var(--blurple) 6%, transparent), transparent 70%);
  }
  body::before { opacity: 0.05; }
}