/* ==========================================================
   FeedBecky landing — full page styles
   Slack-native feedback. $1/user/month.
   ========================================================== */

/* ==========================================================
   Self-hosted fonts (Fraunces, Inter, JetBrains Mono)

   These used to load from fonts.googleapis.com / fonts.gstatic.com.
   That sent every visitor's IP address to Google's US infrastructure on
   every page view. Our DPA names exactly two sub-processors and states
   that personal data otherwise stays in the EU — Google is not one of
   the two, so that request was an undisclosed transfer. (A German court
   has separately held that dynamically embedding Google Fonts without
   consent breaches the GDPR — see LG München I, judgment of 20 Jan 2022,
   3 O 17493/20.) Self-hosting removes the transfer entirely: no request
   to Google happens on page load, consent banner or not.

   Fraunces, Inter and JetBrains Mono are all released under the SIL Open
   Font License 1.1 — see the OFL-*.txt files next to the woff2s in
   ../fonts/ — which permits redistribution as part of this codebase.

   Each family below ships as a genuine variable font (`font-weight: lo hi`
   ranges, not a fixed value) rather than one static file per weight the
   page happens to use today. That matches what Google's own CSS2 API
   served for these exact requests once axis ranges are asked for instead
   of pinned instances, and it means a future weight change in the CSS
   below doesn't require fetching a new binary. Two @font-face rules per
   style (latin / latin-ext, split on unicode-range) is the standard
   Google Fonts subsetting split; latin-ext alone covers Polish and the
   rest of Central European Latin (ą, ć, ę, ł, ń, ó, ś, ź, ż all fall in
   U+0100-017F). Cyrillic/Greek/Vietnamese subsets were dropped — nothing
   on this site is set in those scripts — which is a glyph-coverage
   trim, not the weight/style trim the self-hosting task explicitly
   ruled out.
   ========================================================== */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #FDF6EC;
  --bg-2: #F8ECD8;
  --bg-3: #FFFAF1;
  --bg-dark: #1F1611;
  --bg-dark-2: #2B1F17;
  --ink: #2A241D;
  --ink-soft: #5C4F42;
  --ink-mute: #8A7B6B;
  --ink-on-dark: #FDF6EC;
  --ink-on-dark-soft: #C9B5A0;
  --ink-on-dark-mute: #8A7B6B;
  --line: #E7D9C3;
  --line-soft: #F0E4CE;
  --line-on-dark: rgba(253,246,236,0.10);
  /* Unified orange-amber axis only; no pink/red */
  --accent: #F39B6D;
  --accent-deep: #D97A3D;
  --accent-amber: #E8A155;
  --accent-soft: #FCD9B8;
  --accent-faint: #FDF0E1;
  --praise: #E8A155;
  --feature: #B07A3F;
  --rating: #D4A574;
  --bug: #C75D2D;

  /* Slack mock palette (Slack uses dark sidebar + white message area;
     our mocks live inside a light Slack window) */
  --slack-bg: #FFFFFF;
  --slack-border: #E5E0D6;
  --slack-text: #1d1c1d;
  --slack-text-dim: #616061;
  --slack-purple: #4A154B;
  --slack-modal-bg: #FFFFFF;
  --mock-text-dim: #888;

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --shadow-sm: 0 1px 2px rgba(42,36,29,0.06);
  --shadow-md: 0 8px 24px rgba(42,36,29,0.08), 0 1px 2px rgba(42,36,29,0.06);
  --shadow-lg: 0 24px 60px rgba(42,36,29,0.12), 0 4px 12px rgba(42,36,29,0.06);
  --shadow-glass: 0 16px 50px rgba(243,155,109,0.18), 0 4px 12px rgba(42,36,29,0.05);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ==========================================================
   MESH GRADIENT (decorative orbs behind everything)
   ========================================================== */
.mesh-gradient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.mesh-orb-1 { top: -10%; left: -10%; width: 480px; height: 480px; background: var(--accent-soft); }
.mesh-orb-2 { top: 20%; right: -10%; width: 520px; height: 520px; background: #FFE3CC; opacity: 0.6; }
.mesh-orb-3 { top: 60%; left: 30%; width: 400px; height: 400px; background: #F8ECD8; opacity: 0.7; }
.mesh-orb-4 { top: 40%; right: 20%; width: 360px; height: 360px; background: var(--accent-faint); }

/* ==========================================================
   GLOBAL PRIMITIVES
   ========================================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.section-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.text-gradient {
  background: linear-gradient(95deg, #C75D2D 0%, var(--accent) 50%, #E8A155 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Slack install button */
.btn-slack {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 0 rgba(42,36,29,0.12), 0 2px 8px rgba(42,36,29,0.1);
}
.btn-slack:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(42,36,29,0.12), 0 4px 12px rgba(42,36,29,0.12); }
.btn-slack:active { transform: translateY(1px); box-shadow: 0 3px 0 rgba(42,36,29,0.12); }
.btn-slack-large {
  padding: 16px 28px;
  font-size: 15px;
  border-radius: 999px;
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.6); border-color: var(--ink-mute); }

.glass-card {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(231,217,195,0.6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ==========================================================
   NAV
   ========================================================== */
.main-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 0;
  background: rgba(253, 246, 236, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.main-nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(253, 246, 236, 0.92);
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nav-cat-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--accent-soft);
}
.nav-wordmark { font-weight: 500; }
.nav-wordmark strong { font-weight: 700; }
.nav-actions { display: flex; gap: 10px; align-items: center; }

/* ==========================================================
   HERO
   ========================================================== */
.hero-section {
  position: relative;
  padding: 60px 0 80px;
  text-align: center;
  overflow: hidden;
}
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 5;
}

/* Becky stage */
.becky-stage {
  position: relative;
  width: 320px;
  height: 320px;
  margin-bottom: -10px;
}
.becky-wrap {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.becky-shadow {
  position: absolute;
  left: 50%; bottom: 4%;
  transform: translateX(-50%);
  width: 60%; height: 22px;
  background: radial-gradient(ellipse, rgba(42,36,29,0.22) 0%, transparent 70%);
  filter: blur(6px);
  transition: width 0.4s, opacity 0.4s;
}
.becky-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.becky-static { animation: beckyIdle 5s ease-in-out infinite; }
@keyframes beckyIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Hero copy */
.hero-headline-wrap { max-width: 880px; }
.hero-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink);
  display: block;
  max-width: 18ch;
  margin: 0 auto;
}
.hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  text-wrap: pretty;
}
.hero-cta-row {
  display: flex; gap: 12px; justify-content: center;
  margin-top: 6px;
}
.hero-proof {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

/* Floating bubble field */
.bubble-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.feedback-bubble {
  position: absolute;
}
.bubble-float-1 { animation: floatA 8s ease-in-out infinite; }
.bubble-float-2 { animation: floatB 9s ease-in-out infinite; }
.bubble-float-3 { animation: floatC 10s ease-in-out infinite; }
@keyframes floatA { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-12px) rotate(1deg);} }
@keyframes floatB { 0%,100%{transform:translateY(0) rotate(2deg);} 50%{transform:translateY(-10px) rotate(-2deg);} }
@keyframes floatC { 0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-14px) rotate(2deg);} }

/* Reusable Slack-style message bubble */
.msg {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  box-shadow: var(--shadow-md);
  padding: 10px 14px;
  display: flex; gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  max-width: 260px;
  line-height: 1.4;
}
.msg-avatar {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--praise);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.msg-praise .msg-avatar { background: var(--praise); }
.msg-feature .msg-avatar { background: var(--feature); }
.msg-rating .msg-avatar { background: var(--rating); }
.msg-bug .msg-avatar { background: var(--bug); }
.msg-body { flex: 1; min-width: 0; }
.msg-meta {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
}
.msg-name { font-weight: 700; font-size: 12px; color: var(--ink); }
.msg-time { font-size: 10px; color: var(--ink-mute); font-family: var(--font-mono); }
.msg-tag {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  margin-left: 2px;
}
.msg-praise .msg-tag { background: #FDF0D9; color: #9E6A1F; }
.msg-feature .msg-tag { background: #E7EDE4; color: #4B6545; }
.msg-rating .msg-tag { background: #F5E6D0; color: #86612E; }
.msg-bug .msg-tag { background: #FAE0DA; color: #9B3A24; }
.msg-text { color: var(--ink-soft); font-weight: 500; }

/* Falling messages */
.falling-msg {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 2;
}

/* ==========================================================
   SOCIAL PROOF
   ========================================================== */
.social-proof-section {
  padding: 32px 0 56px;
  position: relative;
  z-index: 1;
}
/* Stacked, not a one-line bar. The three claims run ~180 characters, which needs
   roughly 1480px of row; the container caps out at 1200px, so the bar could never
   fit on one line. It wrapped instead, and justify-content centred every wrapped
   line on its own axis, staircasing the icons. A column with a shared left axis,
   centred as a block, keeps the icons in one vertical line at every width. */
.social-proof-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 22px 32px;
}
/* align-items is flex-start, not center: each claim is now two lines, and centring
   would float the icon against the middle of the pair instead of the headline it
   belongs to. */
.social-proof-item {
  display: flex; align-items: flex-start; gap: 14px;
}
.social-proof-icon {
  color: var(--accent-deep);
  display: flex;
  /* Fixed square: without this the tile gets squeezed into a narrow rectangle
     once the text beside it wraps on narrow screens. */
  flex: 0 0 40px;
  width: 40px; height: 40px;
  background: var(--accent-soft);
  border-radius: 10px;
  align-items: center; justify-content: center;
}
.social-proof-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.social-proof-claim {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.social-proof-detail {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ==========================================================
   HOW IT WORKS
   ========================================================== */
.how-section {
  padding: 96px 0 96px;
  position: relative;
  z-index: 1;
}
.how-section .section-heading,
.how-section .section-sub {
  text-align: center;
}
.how-section .section-heading { margin-bottom: 14px; }
.how-section .section-sub { max-width: 580px; margin: 0 auto 56px; }

.how-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.how-card {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.how-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-soft);
}
.how-step-header {
  display: flex; align-items: flex-start; gap: 12px;
}
.how-step-badge {
  width: 32px; height: 32px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-display);
  flex-shrink: 0;
  margin-top: 2px;
}
.how-step-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.how-step-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.how-step-desc:last-child { margin-bottom: 0; }
.how-step-desc code,
.hero-sub code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--accent-faint);
  color: var(--accent-deep);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
}
.how-card-mockup {
  order: 2;
  margin-top: 4px;
}

.how-cta {
  margin-top: 56px;
  text-align: center;
}
.how-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap .2s;
}
.how-cta-link:hover { gap: 14px; }

/* ==========================================================
   SLACK MOCKUP CHROME
   ========================================================== */
.slack-mockup {
  background: var(--slack-bg);
  border: 1px solid var(--slack-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  font-family: 'Inter', sans-serif;
  color: var(--slack-text);
  font-size: 13px;
}
.slack-chrome {
  display: flex; align-items: center;
  padding: 8px 12px;
  background: #F8F4ED;
  border-bottom: 1px solid var(--slack-border);
}
.slack-dots { display: flex; gap: 5px; }
.slack-dots span { width: 9px; height: 9px; border-radius: 50%; background: #ddd; }
.slack-dots span:nth-child(1) { background: #FF5F57; }
.slack-dots span:nth-child(2) { background: #FFBD2E; }
.slack-dots span:nth-child(3) { background: #28CA41; }
.slack-title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--slack-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Modal */
.mock-modal-inline {
  padding: 0;
}
.mock-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px 14px;
  border-bottom: 1px solid #f0ece4;
}
.mock-modal-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--slack-text);
}
.mock-title-icon {
  display: inline-block;
  width: 15px; height: 15px;
  vertical-align: -3px;
  border-radius: 50%;
}
.mock-modal-close { color: var(--slack-text-dim); font-size: 18px; }
.mock-modal-body { padding: 14px 18px; }
.mock-modal-footer {
  padding: 12px 18px;
  background: #FAF7F1;
  border-top: 1px solid #f0ece4;
  display: flex; justify-content: flex-end; gap: 8px;
}
.mock-field { margin-bottom: 14px; }
.mock-field:last-child { margin-bottom: 0; }
.mock-label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  color: var(--slack-text);
  margin-bottom: 5px;
}
.mock-select {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--slack-border);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
.mock-avatar {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
.mock-avatar-green { background: #2EB67D; }
.mock-avatar-blue { background: #1F8DED; }
.mock-avatar-purple { background: var(--slack-purple); }
.mock-chevron { margin-left: auto; color: var(--slack-text-dim); }
.mock-richtext-toolbar {
  display: flex; gap: 12px;
  padding: 6px 10px;
  border: 1px solid var(--slack-border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  color: var(--slack-text-dim);
  background: #FAF7F1;
}
.mock-richtext {
  padding: 10px;
  border: 1px solid var(--slack-border);
  border-radius: 0 0 6px 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--slack-text);
  background: #fff;
}
.mock-richtext-short { padding: 10px; }
.mock-textarea {
  padding: 10px;
  border: 1px solid var(--slack-border);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  color: var(--slack-text);
}
.mock-tip {
  padding: 8px 10px;
  background: #FFF8E5;
  border-left: 3px solid #FFC940;
  border-radius: 4px;
  font-size: 12px;
  color: #6B5A2A;
  margin-bottom: 14px;
}
.mock-checkbox-row { display: flex; align-items: center; gap: 8px; }
.mock-checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid var(--slack-border);
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  background: #fff;
  color: transparent;
}
.mock-checkbox.checked { background: var(--slack-purple); color: #fff; border-color: var(--slack-purple); }
.mock-checkbox-label { font-size: 13px; color: var(--slack-text); }
.mock-btn-primary {
  background: #007a5a;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
}
.mock-btn-outline {
  background: #fff;
  color: var(--slack-text);
  border: 1px solid var(--slack-border);
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
}
.mock-btn-sm { padding: 7px 12px; font-size: 12px; }

/* /feedbecky picker */
.mock-type-prompt {
  padding: 16px 18px 4px;
  font-size: 13px;
  color: var(--slack-text-dim);
}
.mock-type-actions {
  padding: 10px 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.mock-type-btn {
  text-align: left;
  padding: 10px 14px;
  background: #FAF7F1;
  border: 1px solid var(--slack-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--slack-text);
  font-weight: 500;
  transition: background .15s, border-color .15s;
}
.mock-type-btn:hover { background: #fff; border-color: var(--accent); }

/* Channel feedback message */
.mock-message-area {
  padding: 16px 18px;
  background: #fff;
  min-height: 200px;
}
.mock-message {
  display: flex; gap: 10px;
}
.mock-msg-avatar-wrap {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.mock-msg-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.mock-msg-content { flex: 1; min-width: 0; }
.mock-msg-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
  font-size: 13px;
}
.mock-msg-header strong { color: var(--slack-text); font-weight: 700; }
.mock-app-badge {
  background: #DDD8D0;
  color: #555;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.mock-msg-time { color: var(--slack-text-dim); font-size: 11px; }
.mock-msg-header-block {
  font-weight: 700;
  font-size: 14px;
  color: var(--slack-text);
  margin-bottom: 2px;
}
.mock-msg-context {
  font-size: 11px;
  color: var(--slack-text-dim);
  margin-bottom: 6px;
  font-weight: 500;
}
.mock-msg-richtext {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slack-text);
}

/* App Home */
.mock-apphome {
  padding: 16px 18px;
  background: #fff;
}
.mock-section-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--slack-text);
  margin-bottom: 4px;
}
.mock-section-text:not(:first-child) { padding-top: 0; }
.mock-section-hint {
  font-size: 11px;
  color: var(--slack-text-dim);
  margin-bottom: 10px;
}
.mock-apphome-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.mock-divider {
  height: 1px;
  background: #f0ece4;
  margin: 14px 0;
}
.mock-tabs {
  display: flex; gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f0ece4;
}
.mock-tab {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--slack-text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
}
.mock-tab.active {
  color: var(--slack-text);
  border-bottom-color: var(--accent);
  font-weight: 700;
}
.mock-apphome-cards {
  display: flex; flex-direction: column; gap: 8px;
}
.mock-feedback-card-simple {
  padding: 10px 12px;
  border: 1px solid #f0ece4;
  border-radius: 6px;
  font-size: 12px;
}
.mock-card-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.mock-card-top strong { font-size: 12px; color: var(--slack-text); }
.mock-card-view { font-size: 11px; color: var(--accent-deep); font-weight: 600; }
.mock-card-meta { font-size: 11px; color: var(--slack-text-dim); }
.mock-apphome-footer {
  margin-top: 12px;
  font-size: 11px;
  color: var(--slack-text-dim);
  padding: 8px;
  background: #FAF7F1;
  border-radius: 6px;
}

/* ==========================================================
   FEATURES
   ========================================================== */
.features-section {
  padding: 110px 0;
  position: relative;
  z-index: 1;
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  overflow: hidden;
}
.features-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 20% -10%, rgba(243,155,109,0.18), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, rgba(232,161,85,0.10), transparent 60%);
  pointer-events: none;
}
.features-section .container { position: relative; z-index: 2; }
.features-section .section-heading { color: var(--ink-on-dark); }
.features-section .section-sub { color: var(--ink-on-dark-soft); }
.features-section .feature-card {
  background: rgba(253,246,236,0.04);
  border-color: rgba(253,246,236,0.10);
  backdrop-filter: blur(6px);
}
.features-section .feature-card:hover {
  background: rgba(253,246,236,0.07);
  border-color: var(--accent);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.features-section .feature-card-title { color: var(--ink-on-dark); }
.features-section .feature-card-body { color: var(--ink-on-dark-soft); }
.features-section .feature-card-bullets li { color: var(--ink-on-dark-soft); }
.features-section .feature-card-icon {
  background: rgba(243,155,109,0.18);
  color: var(--accent);
}
.features-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.features-heading .section-heading { margin-bottom: 14px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.feature-card {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-soft);
  box-shadow: var(--shadow-md);
}
.feature-card-icon {
  width: 44px; height: 44px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.feature-card-icon svg { width: 22px; height: 22px; }
.feature-card-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  text-wrap: balance;
}
.feature-card-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.feature-card-bullets {
  list-style: none;
  margin-top: auto;
  padding-top: 6px;
}
.feature-card-bullets li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}
.feature-card-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ==========================================================
   PRICING
   ========================================================== */
.pricing-section {
  padding: 96px 0;
  text-align: center;
  position: relative;
  z-index: 1;
}
.pricing-section .section-heading { margin-bottom: 12px; }
.pricing-section .section-sub { margin-bottom: 48px; }
.pricing-card-wrap {
  max-width: 540px;
  margin: 0 auto;
}
.pricing-card {
  position: relative;
  padding: 44px 36px;
  text-align: left;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
}
.pricing-card-glow {
  position: absolute;
  top: -100px; right: -100px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.pricing-header { margin-bottom: 28px; position: relative; }
.pricing-plan-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-deep);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: italic;
}
.pricing-amount {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 10px;
}
.pricing-dollar {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.pricing-period {
  font-size: 16px;
  color: var(--ink-soft);
  font-weight: 500;
}
.pricing-clarification {
  font-size: 13px;
  color: var(--ink-mute);
}
.pricing-features {
  list-style: none;
  margin-bottom: 28px;
}
.pricing-features li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-check {
  color: var(--accent-deep);
  flex-shrink: 0;
  margin-top: 2px;
}
.pricing-cta {
  width: 100%;
  justify-content: center;
}
.pricing-reassurance {
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ==========================================================
   FAQ
   ========================================================== */
.faq-section {
  padding: 96px 0;
  position: relative;
  z-index: 1;
}
.faq-section .section-heading {
  text-align: center;
  margin-bottom: 56px;
}
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .2s;
}
.faq-item.open { border-color: var(--accent-soft); }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  font-family: inherit;
}
.faq-chevron {
  color: var(--ink-mute);
  transition: transform .2s;
  flex-shrink: 0;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  padding: 0 24px;
}
.faq-item.open .faq-answer {
  padding-bottom: 22px;
}
.faq-answer p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul {
  margin: 6px 0 12px 18px;
  font-size: 14px;
  color: var(--ink-soft);
}
.faq-answer ul li { margin-bottom: 4px; }

/* ==========================================================
   FINAL CTA
   ========================================================== */
.cta-section {
  padding: 100px 0 120px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.cta-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, var(--accent-soft) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}
.cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.cta-cat {
  width: 80px; height: 80px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  margin-bottom: 8px;
}
.cta-cat img { width: 80px; height: 80px; object-fit: contain; }
.cta-section .section-heading {
  max-width: 720px;
}
.cta-sub {
  max-width: 600px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cta-micro {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.cta-admin-link {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.cta-admin-link:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer {
  background: var(--ink);
  color: var(--bg);
  padding: 56px 0 32px;
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 2fr 1fr;
  gap: 40px;
  align-items: start;
}
.footer-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--bg);
}
.footer-cat-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--accent-soft);
}
.footer-tagline {
  font-size: 14px;
  color: var(--accent-soft);
  opacity: 0.8;
  line-height: 1.5;
  max-width: 280px;
}
.footer-col-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.footer-link {
  color: var(--bg);
  font-size: 14px;
  opacity: 0.75;
  transition: opacity .2s;
}
.footer-link:hover { opacity: 1; }
.footer-legal-line {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-soft);
  opacity: 0.7;
  letter-spacing: 0.02em;
  text-align: right;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 980px) {
  .how-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal-line { text-align: left; }
  .social-proof-grid { gap: 12px; padding: 18px; }
  .bubble-field { display: none; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .becky-stage { width: 240px; height: 240px; }
  .hero-section { padding: 30px 0 60px; }
}

/* ==========================================================
   HOW-IT-WORKS STICKY PROGRESS
   ========================================================== */
.how-layout {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 32px;
  align-items: start;
}
.how-progress {
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding-top: 14px;
}
.how-progress-rail {
  position: absolute;
  left: 50%;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(217,117,87,0.18) 20%, rgba(217,117,87,0.18) 80%, transparent);
  transform: translateX(-50%);
  z-index: 0;
}
.how-progress-dot {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  transition: all 0.4s cubic-bezier(.22,1,.36,1);
}
.how-progress-dot.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-amber) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(217,117,87,0.35);
  transform: scale(1.08);
}
.how-progress-dot span { line-height: 1; }
@media (max-width: 980px) {
  .how-layout { grid-template-columns: 1fr; gap: 24px; }
  .how-progress { display: none; }
}

/* ==========================================================
   PROGRESSION STATES (App Home empty → loaded)
   ========================================================== */
/* Stacked, not side by side. Two mockups plus the arrow inside a half-width card
   left each App Home about 218px, which clipped the "Given (8)" tab and wrapped
   every label onto three lines. One per row gives each the card's full ~500px. */
.how-progression {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}
.progression-state {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.progression-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.progression-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.progression-pill-active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-amber) 100%);
  color: #fff;
}
.progression-arrow {
  align-self: center;
  justify-self: center;
  transform: rotate(90deg);
  color: var(--accent);
  opacity: 0.5;
}
.mini-mockup { width: 100%; max-width: none; }

.mock-apphome-empty {
  text-align: center;
  padding: 24px 18px;
}
.mock-empty-illust {
  margin: 8px auto 12px;
}
.mock-empty-emoji-lg {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}
.mock-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.mock-empty-sub {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-bottom: 16px;
  line-height: 1.5;
}
.mock-apphome-actions-center {
  justify-content: center;
}
.mock-empty-tip {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px 12px;
  background: rgba(217,117,87,0.08);
  border: 1px dashed rgba(217,117,87,0.3);
  border-radius: 8px;
  color: var(--ink-soft);
  display: inline-block;
}

/* ==========================================================
   TRY-IT DEMO
   ========================================================== */
.try-section {
  padding: 100px 0 100px;
  background: var(--bg-2);
  position: relative;
}
.try-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(217,117,87,0.05) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(78,205,196,0.04) 0, transparent 40%);
  pointer-events: none;
}
.try-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  /* Split the axes: 64px between the columns is right, but as a row gap it landed
     on top of the sub's own 28px margin and opened ~92px under the intro. */
  column-gap: 64px;
  row-gap: 8px;
  /* start, not center: the preview is ~269px against a ~490px form, so centring
     it split the leftover ~220px above and below and left it floating. */
  align-items: start;
}
/* The heading spans both columns so it gets the full container measure instead of
   being crushed into the 480px left column, where 52px type broke it over three
   ragged lines. Everything below stays in its column, left-aligned as before. */
.try-head {
  grid-column: 1 / -1;
}
/* Both kept at their original measure, so the text reads exactly as before -- the
   band only frees the heading from the column, it does not re-flow the copy. */
.try-head .section-heading { margin-bottom: 14px; }
.try-head .section-sub { max-width: 480px; margin-bottom: 28px; }
.try-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(217,117,87,0.1);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.try-form {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 4px 24px rgba(42,24,16,0.06);
}
.try-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin: 14px 0 6px;
}
.try-label:first-child { margin-top: 0; }
.try-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.try-input:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}
.try-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.try-anon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.try-anon input { width: 16px; height: 16px; accent-color: var(--accent); }
.try-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-amber) 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(217,117,87,0.3);
  transition: transform 0.15s, box-shadow 0.2s;
}
.try-send:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(217,117,87,0.4); }
.try-send:active { transform: translateY(0); }
.try-preview { display: flex; flex-direction: column; gap: 14px; }
.try-note {
  font-size: 13px;
  color: var(--ink-mute);
  text-align: center;
  font-style: italic;
}
.demo-flash {
  animation: demoFlash 0.6s ease;
}
@keyframes demoFlash {
  0% { background: rgba(217,117,87,0.18); }
  100% { background: transparent; }
}
@media (max-width: 980px) {
  .try-grid { grid-template-columns: 1fr; gap: 40px; }
}