:root {
  /* Cobalt — cobalt blue on cool slate.
     Brand blue belongs to MentionSpot; Reddit orange and X ink stay on the
     platform marks, and green / red / amber stay semantic so a score, an error
     and a warning never read as branding. */
  --ink: #0d1526;
  --muted: #5d6980;
  --soft: #68738a;
  --line: #e2e7f3;
  --paper: #ffffff;
  --white: #ffffff;
  --ground: #ffffff;
  --ground-soft: #f7f9fd;
  --brand: #1734a8;
  --brand-bright: #2044d6;
  --brand-pale: #e5ebfd;
  --cyan: #0ea5e9;
  --sky: #6e9bff;
  --green: #15803d;
  --amber: #d97706;
  --gate: #b45309;
  --gate-pale: #fef3e2;
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 16px 40px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 40px 100px rgba(8, 14, 28, 0.16);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --page: min(1600px, calc(100% - 64px));
  font-family:
    "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--ink);
  background: var(--ground);
  font-synthesis: none;
}

h1, h2, h3,
.brand,
.button,
.tier-price,
.window-bar strong {
  font-family: "Space Grotesk", "Manrope", ui-sans-serif, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

/* ---------------------------------------------------------------- */
/* Header                                                            */
/* ---------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  width: var(--page);
  height: 96px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -0.03em;
}
.brand-accent {
  color: var(--brand);
}

.site-header nav,
.blog-header nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 15px;
  font-weight: 560;
}

.site-header nav a,
.blog-header nav a {
  color: var(--muted);
  transition: color 180ms ease;
}

.site-header nav a:hover,
.blog-header nav a:hover {
  color: var(--ink);
}

.nav-cta,
.header-action {
  display: inline-flex;
  height: 48px;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  border: 1.5px solid rgba(13, 21, 38, 0.14);
  border-radius: 999px;
  background: rgba(13, 21, 38, 0.05);
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.nav-cta:hover,
.header-action:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
  background: var(--brand-pale);
  color: var(--brand);
}

/* ---------------------------------------------------------------- */
/* Buttons                                                            */
/* ---------------------------------------------------------------- */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 32px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    gap 160ms ease;
}

.button span {
  transition: transform 160ms ease;
}

.button:hover {
  gap: 15px;
}

.button:hover span {
  transform: translateX(2px);
}

.button-primary {
  background: linear-gradient(180deg, #3357e6, #1c3cb4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 18px 34px -12px rgba(13, 21, 38, 0.55);
  color: var(--white);
}

.button-primary:hover {
  background: linear-gradient(180deg, #1c3cb4, #142e8f);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 22px 40px -12px rgba(13, 21, 38, 0.65);
  transform: translateY(-2px);
}

.button-quiet {
  border-color: rgba(13, 21, 38, 0.16);
  background: transparent;
  color: var(--ink);
}

.button-quiet:hover {
  border-color: #1734a8;
  background: var(--brand-pale);
  color: #1734a8;
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------- */
/* Section chrome                                                     */
/* ---------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 16px;
  color: #1734a8;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0.14em;
}

.eyebrow-light {
  color: #1734a8;
}

.section-heading h2,
.faq-intro h2,
.final-cta h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.06;
}

/* ---------------------------------------------------------------- */
/* Pricing (shared with legacy classes)                              */
/* ---------------------------------------------------------------- */

.pricing-section {
  padding: 150px 0 130px;
}

.faq-section {
  display: grid;
  padding: 40px max(24px, calc((100% - 1220px) / 2)) 150px;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 110px;
}

.faq-intro {
  align-self: start;
  position: sticky;
  top: 40px;
}

.faq-intro h2 {
  font-size: 44px;
}

.faq-intro > p:last-child {
  margin: 0;
  margin-top: 24px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.faq-intro a {
  color: #1734a8;
  font-weight: 650;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: grid;
  min-height: 96px;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  color: var(--soft);
  font-size: 12px;
  font-weight: 750;
}

.faq-list summary::after {
  content: "+";
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 17px;
  font-weight: 400;
}

.faq-list details[open] summary::after {
  content: "\2212";
  background: var(--brand-pale);
  border-color: transparent;
  color: var(--brand);
}

.faq-list details p {
  max-width: 760px;
  margin: -6px 46px 32px 62px;
  color: #414d63;
  font-size: 15px;
  line-height: 1.75;
}

.final-cta {
  position: relative;
  display: grid;
  width: min(1220px, calc(100% - 48px));
  min-height: 420px;
  margin: 0 auto 32px;
  overflow: hidden;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 60px;
  padding: 76px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #ffffff, #f7f9fd);
  box-shadow: var(--shadow-md);
  color: var(--ink);
}

.final-cta h2 {
  color: var(--ink);
  font-size: clamp(48px, 5vw, 66px);
}

.final-cta p:not(.eyebrow) {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.button-light {
  min-width: 230px;
  background: var(--brand);
  color: #ffffff;
}

footer,
.blog-footer {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: var(--page);
  margin: 0 auto;
  padding: 64px 0 44px;
  color: #4d5970;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
  flex: 1;
  min-width: 280px;
}

.footer-sitemap > div p {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 700;
}

.footer-sitemap a {
  display: block;
  font-size: 14px;
  color: #4d5970;
  margin-bottom: 9px;
}

.footer-sitemap a:hover {
  color: var(--ink);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 14px;
}

footer p,
.blog-footer p {
  margin: 0;
  font-size: 13px;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

footer small,
.blog-footer small {
  color: #5a6680;
  font-size: 12px;
}

/* ---------------------------------------------------------------- */
/* Blog and article pages (unchanged surface, preserved as-is)       */
/* ---------------------------------------------------------------- */

.blog-shell {
  min-height: 100vh;
  background: linear-gradient(180deg, #f2f5fe 0%, #f9fbff 38%, #ffffff 72%);
}

.blog-header {
  display: flex;
  width: var(--page);
  height: 92px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.blog-header .brand {
  color: var(--ink);
}

.blog-header nav a {
  color: var(--muted);
}

.blog-header nav a:hover {
  color: var(--ink);
}

.blog-header .header-action {
  border-color: var(--line);
  background: var(--white);
  color: var(--ink);
}

.blog-hero {
  width: var(--page);
  margin: 0 auto;
  padding: 110px 0 70px;
  text-align: center;
}

.blog-hero h1 {
  max-width: 850px;
  margin: 0 auto;
  color: var(--ink);
  font-size: clamp(40px, 4.8vw, 58px);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.blog-hero > p:last-child {
  max-width: 780px;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.blog-index {
  width: var(--page);
  margin: 0 auto;
  padding-bottom: 110px;
}

.blog-featured {
  display: flex;
  min-height: 420px;
  flex-direction: column;
  align-items: center;
  padding: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.blog-card-label {
  margin: 0 0 18px;
  color: #1734a8;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.blog-featured h2 {
  max-width: 750px;
  margin: 0 auto;
  color: var(--ink);
  font-size: clamp(34px, 4.2vw, 51px);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.blog-featured h2 a:hover,
.blog-card h2 a:hover {
  color: var(--brand);
}

.blog-featured > p:not(.blog-card-label) {
  max-width: 760px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.blog-card-meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  color: var(--soft);
  font-size: 12px;
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
  color: #1734a8;
  font-size: 14px;
  font-weight: 700;
}

.blog-grid {
  display: grid;
  margin-top: 20px;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.blog-card {
  display: flex;
  min-height: 350px;
  flex-direction: column;
  align-items: center;
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  text-align: center;
}

.blog-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.blog-card > p:not(.blog-card-label) {
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.blog-card .blog-card-meta {
  margin-top: auto;
  padding-top: 25px;
}

.blog-card .blog-read-link {
  color: #1734a8;
}

.blog-cta {
  margin-top: 20px;
  padding: 60px;
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: var(--ink);
  text-align: center;
}

.blog-cta h2 {
  max-width: 750px;
  margin: 0 auto;
  font-size: 40px;
  letter-spacing: -0.035em;
}

.blog-cta > p:not(.eyebrow) {
  max-width: 640px;
  margin: 17px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.blog-cta .button {
  margin-top: 25px;
}

.blog-footer {
  border-top: 1px solid var(--line);
}

.blog-footer .brand {
  color: var(--ink);
}

.article-page {
  width: var(--page);
  margin: 0 auto;
  padding: 62px 0 110px;
}

.article-breadcrumbs {
  display: flex;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
}

.article-breadcrumbs a {
  color: var(--brand);
}

.article-hero {
  max-width: 930px;
  margin: 0 auto;
  padding: 66px 0 55px;
  text-align: center;
}

.article-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(40px, 4.8vw, 58px);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.article-deck {
  max-width: 770px;
  margin: 25px auto 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.65;
}

.article-meta {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 27px;
  color: var(--soft);
  font-size: 12px;
}

.article-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 720px);
  justify-content: center;
  align-items: start;
  gap: 75px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.article-toc {
  position: sticky;
  top: 28px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}

.article-toc > p,
.article-next > p {
  margin: 0 0 14px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.article-toc ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.article-toc li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  counter-increment: toc;
}

.article-toc li::before {
  content: "0" counter(toc);
  color: var(--soft);
  font-size: 10px;
}

.article-content {
  min-width: 0;
}

.article-lede {
  margin: 0;
  color: #34445a;
  font-size: 22px;
  font-weight: 520;
  line-height: 1.65;
}

.hub-prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.hub-prose .article-content > section:first-child {
  padding-top: 0;
}

.article-content > section {
  padding-top: 48px;
}

.article-content > section h2 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 32px;
  letter-spacing: -0.038em;
  line-height: 1.15;
  text-align: center;
}

.article-content > section > p,
.article-content li,
.article-source-note {
  color: #3e4a60;
  font-size: 16px;
  line-height: 1.8;
}

.article-content code {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--ground-soft);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.article-content ul {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.article-content li {
  position: relative;
  padding-left: 23px;
}

.article-content li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand);
}

.compare-table {
  margin: 22px 0 0;
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 15px;
}

.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: #3e4a60;
  vertical-align: top;
}

.compare-table th {
  background: var(--ground-soft);
  color: var(--ink);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.compare-table tr:last-child td {
  border-bottom: none;
}

.compare-table td:first-child,
.compare-table th:first-child {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Wide tables scroll inside their own box so the page itself never scrolls
   sideways on a phone. */
.table-scroll {
  margin: 22px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll .compare-table {
  margin: 0;
  min-width: 480px;
}

/* Quoted example comments in guides. */
.article-content blockquote {
  margin: 22px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--ground-soft);
}

.article-content blockquote p {
  margin: 0;
  color: #3e4a60;
  font-size: 15px;
  line-height: 1.75;
}

.article-content blockquote p + p {
  margin-top: 12px;
}

.compare-table .yes {
  color: var(--green);
}

.compare-table .no {
  color: var(--soft);
}

.article-source-note {
  margin-top: 35px;
  padding: 18px;
  border-left: 3px solid var(--brand);
  background: var(--brand-pale);
  font-size: 13px;
}

.article-source-note a {
  color: var(--brand);
  font-weight: 650;
}

.article-faq {
  margin-top: 50px;
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
}

.article-faq > h2 {
  margin-bottom: 25px;
  text-align: center;
}

.article-faq > div {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.article-faq h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  text-align: center;
}

.article-faq > div p {
  margin-bottom: 0;
}

.article-inline-cta {
  margin-top: 50px;
  padding: 44px;
  border-radius: 22px;
  background: #ffffff;
  color: var(--ink);
  text-align: center;
}

.article-inline-cta h2 {
  margin: 0;
  color: var(--ink);
  font-size: 32px;
  text-align: center;
}

.article-inline-cta > p:not(.eyebrow) {
  color: var(--muted);
}

.article-inline-cta .button {
  margin-top: 18px;
}

.article-next {
  margin-top: 50px;
}

.article-next > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.article-next a {
  display: flex;
  min-height: 130px;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  transition: transform 180ms ease;
}

.article-next a:hover {
  transform: translateY(-2px);
}

.article-next span {
  color: var(--brand);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.article-next strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.article-related {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.article-related > p {
  margin: 0 0 14px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.article-related > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-related a {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: #4d5970;
  font-size: 13px;
  line-height: 1.3;
  transition: color 160ms ease, border-color 160ms ease;
}

.article-related a:hover {
  color: var(--ink);
  border-color: var(--soft);
}


/* ---------------------------------------------------------------- */
/* Homepage — hero                                                   */
/* ---------------------------------------------------------------- */

.home-page {
  background: var(--paper);
}

/* The walkthrough carries as much of the pitch as the copy does, so the two
   columns are near enough equal and the video is given the slightly wider
   half. An earlier split gave the copy 1fr and then capped the video at 460px,
   which left a column of dead space and made the product look like a
   thumbnail beside the headline. */
.new-hero {
  position: relative;
  display: grid;
  width: var(--page);
  max-width: 1340px;
  margin: 0 auto;
  padding: 76px 0 96px;
  grid-template-columns: minmax(320px, 1fr) minmax(440px, 1.06fr);
  align-items: center;
  gap: 56px;
  color: var(--ink);
}

.new-hero-copy {
  max-width: 560px;
  text-align: left;
}

.product-kicker {
  display: inline-flex;
  margin: 0 0 20px;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--brand-pale);
  color: #1734a8;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-kicker span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2044d6;
}

.new-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 730;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.new-hero-lede {
  max-width: 560px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.new-hero .hero-actions {
  margin-top: 26px;
  justify-content: flex-start;
}

.new-hero .button-quiet {
  border-color: var(--line);
  color: var(--ink);
}

.hero-proof {
  display: flex;
  margin-top: 26px;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 24px;
  color: var(--muted);
  font-size: 13px;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.hero-proof i {
  color: #1734a8;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

/* ---------------------------------------------------------------- */
/* Product window mock                                                */
/* ---------------------------------------------------------------- */

.product-window {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.hero-product {
  width: 100%;
  max-width: 460px;
  margin: 0;
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
}

/* ---------------------------------------------------------------- */
/* Hero live-preview demo (type a site, click "Find leads", watch it work) */
/* ---------------------------------------------------------------- */

.hero-demo .window-bar {
  min-height: 50px;
}

.hero-demo-body {
  padding: 14px 16px 14px;
}

.hero-demo-url-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 10px;
  transition: opacity 0.3s ease;
}

.hero-demo.is-loading .hero-demo-url-row,
.hero-demo.is-results .hero-demo-url-row {
  opacity: 0.45;
}

.hero-demo-url-bar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f2f5fa;
  color: var(--muted);
  font-size: 12.5px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.hero-demo-url-bar.is-typing {
  border-color: #8fb0f5;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(32, 68, 214, 0.16), 0 14px 26px -14px rgba(23, 52, 168, 0.4);
}

.hero-demo {
  position: relative;
}

.hero-demo-globe {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #1734a8;
}

.hero-demo-url-text {
  overflow: hidden;
  color: var(--ink);
  font-weight: 650;
  white-space: nowrap;
}

.hero-demo-caret {
  display: inline-block;
  width: 2px;
  height: 15px;
  flex-shrink: 0;
  background: #1734a8;
  animation: hero-caret-blink 1s steps(1) infinite;
}

@keyframes hero-caret-blink {
  50% { opacity: 0; }
}

.hero-demo-btn {
  position: relative;
  width: 100%;
  min-height: 38px;
  padding: 0 16px;
  font-size: 13px;
  transform-origin: center;
  z-index: 2;
}

.hero-demo-btn.is-pressed {
  animation: hero-btn-zoom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hero-btn-zoom {
  0% { transform: scale(1) translateY(0); }
  40% { transform: scale(1.015) translateY(-2px); box-shadow: 0 18px 34px -12px rgba(23, 52, 168, 0.55); }
  72% { transform: scale(0.995) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

.hero-demo-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(32, 68, 214, 0.55);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.hero-demo-btn.is-pressed::after {
  animation: hero-btn-ring 0.6s ease-out;
}

@keyframes hero-btn-ring {
  0% { opacity: 0.85; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.7); }
}

.hero-demo-stage {
  position: relative;
  min-height: 190px;
}

/* --- The "searching" popup window --- */

.hero-demo-modal {
  position: absolute;
  inset: -6px -16px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(13, 21, 38, 0.4);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hero-demo.is-loading .hero-demo-modal {
  opacity: 1;
  pointer-events: auto;
}

.hero-demo-modal-card {
  display: flex;
  width: min(260px, 100%);
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 18px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 40px 80px -30px rgba(13, 21, 38, 0.55);
  transform: scale(0.8) translateY(14px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.hero-demo.is-loading .hero-demo-modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.hero-demo-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--line);
  border-top-color: #1734a8;
  border-radius: 50%;
  animation: hero-spin 0.85s linear infinite;
}

@keyframes hero-spin {
  to { transform: rotate(360deg); }
}

.hero-demo-step-text {
  min-height: 18px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  text-align: center;
}

.hero-demo-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.hero-demo-steps span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eceff6;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}

.hero-demo-steps span.is-active {
  background: var(--brand-pale);
  color: #152e94;
}

.hero-demo-steps span.is-done {
  background: #e3f6ec;
  color: #15803d;
}

/* --- Result cards (mix of Reddit posts + X posts, like the workspace feed) --- */

.hero-demo-cards {
  display: grid;
  gap: 6px;
}

.demo-card {
  position: relative;
  padding: 8px 10px 6px;
  border: 1px solid var(--line);
  border-left: 3px solid #ff4500;
  border-radius: 10px;
  background: #ffffff;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.hero-demo.is-results .demo-card {
  opacity: 1;
  transform: none;
}

.hero-demo.is-results .demo-card:nth-child(1) { transition-delay: 0.05s; }
.hero-demo.is-results .demo-card:nth-child(2) { transition-delay: 0.2s; }
.hero-demo.is-results .demo-card:nth-child(3) { transition-delay: 0.35s; }
.hero-demo.is-results .demo-card:nth-child(4) { transition-delay: 0.5s; }

.demo-card-x {
  border-left-color: #0f1419;
}

.demo-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.demo-card-label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10.5px;
}

.demo-card-avatar {
  display: grid;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  background: #fdece7;
  color: #ff4500;
}

.demo-card-avatar svg {
  width: 9px;
  height: 9px;
}

.demo-card-avatar-x {
  background: #eef0f2;
  color: #0f1419;
}

.demo-card-meta strong {
  color: var(--ink);
  font-weight: 700;
}

.demo-card-body {
  margin: 0 0 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.demo-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
}

.demo-card-foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.demo-arrow-up,
.demo-retweet,
.demo-heart {
  display: inline-block;
  width: 13px;
  height: 13px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.demo-arrow-up {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12l7-7 7 7' fill='none' stroke='%236b6b70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.demo-retweet {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10l-3-3M17 17H7l3 3M7 7v7a3 3 0 0 0 3 3M17 17v-7a3 3 0 0 0-3-3' fill='none' stroke='%236b6b70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.demo-heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-9.5-9C1 8 2.5 5 6 5c2 0 3.5 1.2 4 2.3.5-1.1 2-2.3 4-2.3 3.5 0 5 3 3.5 6-2.5 4.6-9.5 9-9.5 9z' fill='none' stroke='%236b6b70' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.window-bar {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f2f5fa);
  color: var(--ink);
  font-size: 14px;
}

.window-bar > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
}

.window-mark {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #1734a8;
}

.live-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid #c3d2f7;
  border-radius: 999px;
  background: var(--brand-pale);
  color: #152e94;
  font-size: 12px;
  font-weight: 750;
}

.live-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
}

.window-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.window-metrics div {
  display: flex;
  min-height: 116px;
  flex-direction: column;
  justify-content: center;
  padding: 0 30px;
  border-right: 1px solid var(--line);
}

.window-metrics div:last-child {
  border-right: 0;
}

.window-metrics small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.window-metrics strong {
  margin-top: 6px;
  color: var(--ink);
  font-size: 32px;
  font-weight: 700;
}

.window-metrics span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  background: var(--brand-pale);
  color: #1734a8;
  font-size: 12px;
  font-weight: 800;
}

.avatar-blue {
  background: #e7f3f8;
  color: #23647e;
}

/* ---------------------------------------------------------------- */
/* Product contract strip                                            */
/* ---------------------------------------------------------------- */

.product-contract {
  display: grid;
  width: var(--page);
  margin: 0 auto 24px;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  overflow: hidden;
}

.product-contract div {
  display: flex;
  min-height: 130px;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(26px, 4vw, 42px);
  border-right: 1px solid var(--line);
}

.product-contract div:last-child {
  border-right: 0;
}

.product-contract strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.product-contract span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- */
/* Section rhythm                                                    */
/* ---------------------------------------------------------------- */

.overview-section,
.feature-section,
.usecase-section,
.new-pricing {
  padding: 150px 0;
}

.overview-section,
.usecase-section,
.new-pricing {
  background: var(--paper);
}

.section-intro {
  width: var(--page);
  max-width: 940px;
  margin: 0 auto 64px;
  text-align: center;
}

.section-intro h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(40px, 4.8vw, 58px);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.section-intro > p:last-child {
  max-width: 780px;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.usecase-grid {
  display: grid;
  width: var(--page);
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.usecase-grid article {
  min-height: 240px;
  padding: 40px 34px 42px;
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.usecase-grid small {
  color: #1734a8;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.1em;
}

.usecase-grid h3 {
  margin: 20px 0 12px;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -0.02em;
}

.usecase-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------------------------------------------------------------- */
/* Discovery / Engagement layer grid                                  */
/* ---------------------------------------------------------------- */

.feature-white {
  background: #fff;
}

.feature-paper {
  background: #f2f5fa;
}

.layer-grid {
  display: grid;
  width: var(--page);
  margin: 0 auto;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.layer-card {
  padding: 44px;
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.layer-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.layer-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.layer-tag svg {
  width: 13px;
  height: 13px;
}

.layer-tag-auto {
  background: var(--brand-pale);
  color: #1734a8;
}

.layer-tag-gate {
  background: var(--gate-pale);
  color: var(--gate);
}

.layer-card h3 {
  margin: 24px 0 14px;
  color: var(--ink);
  font-size: 30px;
  letter-spacing: -0.025em;
}

.layer-card > p {
  margin: 0;
  color: #465268;
  font-size: 16px;
  line-height: 1.75;
}

.layer-steps {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.layer-steps li {
  position: relative;
  padding-left: 20px;
  color: #3e4a60;
  font-size: 14px;
  line-height: 1.6;
}

.layer-steps li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #1734a8;
}

/* ---------------------------------------------------------------- */
/* Channel cards                                                     */
/* ---------------------------------------------------------------- */

.channel-card-grid {
  display: grid;
  width: var(--page);
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* The two channel pillars, Reddit and X. Left in the three-column grid they sat
   hard against the left edge with an empty third column, because there used to
   be a third pillar. Two columns in a narrower container centres the pair and
   keeps each card the width it already was. */
.channel-card-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1080px;
}

.channel-card {
  display: flex;
  flex-direction: column;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.channel-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.channel-icon {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 17px;
  background: var(--brand-pale);
  color: #1734a8;
}

.channel-icon svg {
  width: 30px;
  height: 30px;
}

/* Pillar cards: the three surfaces on the home page. Same card as
   .channel-card, plus a footer link, so each pillar can hand the reader off to
   its own page instead of trying to say everything inline. */
.channel-icon-x {
  background: #e8eaee;
  color: #0f1419;
}

.channel-icon-ai {
  background: #efe9fd;
  color: #5b2bd9;
}

.pillar-card .pillar-link {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e2e7f3;
}

/* margin-top:auto on the link row, not the card, so the three cards' links sit
   on one line even when the copy above them runs to different lengths. */
.pillar-card {
  justify-content: flex-start;
}

.pillar-card .pillar-link {
  margin-top: auto;
  /* The "You are here" chip is a padded pill and the link is bare inline text,
     so without a shared min-height the footer row sits a few pixels off between
     the current page's card and its two neighbours. */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 62px;
}

/* "You are here" replaces the link on whichever pillar page you are reading, so
   the strip is a map rather than three links one of which reloads the page. */
.pillar-card .pillar-here {
  display: inline-block;
  padding: 4px 12px;
  line-height: 16px;
  border-radius: 999px;
  background: var(--brand-pale);
  color: #1734a8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pillar-card .pillar-link a {
  color: #1734a8;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.pillar-card .pillar-link a:hover {
  text-decoration: underline;
}

.pillar-card .pillar-link a span {
  display: inline-block;
  transition: transform 160ms ease;
}

.pillar-card .pillar-link a:hover span {
  transform: translateX(3px);
}

.channel-icon-reddit {
  background: #fdece7;
  color: #ff4500;
}

.channel-card h3 {
  margin: 22px 0 18px;
  color: var(--ink);
  font-size: 24px;
  letter-spacing: -0.02em;
}

.channel-line {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid #e2e7f3;
}

.channel-line:first-of-type {
  border-top: 1px solid #e2e7f3;
}

.channel-line > b {
  align-self: start;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--brand-pale);
  color: #1734a8;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.channel-line:nth-of-type(2) > b {
  background: var(--gate-pale);
  color: var(--gate);
}

.channel-line span {
  color: #465268;
  font-size: 14px;
  line-height: 1.6;
}

.channel-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
}

.channel-price strong {
  color: var(--ink);
  font-size: 28px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.channel-price small {
  color: var(--muted);
  font-size: 13px;
}

.channel-footnote {
  width: var(--page);
  margin: 32px auto 0;
  color: var(--soft);
  font-size: 14px;
}

/* ---------------------------------------------------------------- */
/* Feature shells (two-column, with product window)                  */
/* ---------------------------------------------------------------- */

.feature-shell {
  display: grid;
  width: var(--page);
  margin: 0 auto;
  grid-template-columns: minmax(380px, 0.95fr) minmax(520px, 1.05fr);
  align-items: start;
  gap: 80px;
}

.feature-reverse {
  grid-template-columns: minmax(520px, 1.05fr) minmax(380px, 0.95fr);
}

.feature-reverse .feature-copy {
  grid-column: 2;
  grid-row: 1;
}

.feature-reverse .feature-window {
  grid-column: 1;
  grid-row: 1;
}

.feature-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(36px, 3.4vw, 46px);
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.feature-copy > p:not(.eyebrow) {
  margin: 26px 0 0;
  color: #465268;
  font-size: 17px;
  line-height: 1.75;
}

.feature-list,
.route-list {
  display: grid;
  gap: 22px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
}

.feature-list li > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-pale);
  color: #1734a8;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.feature-list li > i svg {
  width: 17px;
  height: 17px;
}

.icon-handoff {
  color: #1734a8;
}

.feature-list li span {
  color: #465268;
  font-size: 15px;
  line-height: 1.65;
}

.feature-list li strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 16px;
}

.feature-window {
  min-height: 500px;
}

/* ---------------------------------------------------------------- */
/* Route list (reply handling)                                        */
/* ---------------------------------------------------------------- */

.route-list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 14px;
  align-items: start;
}

.route-dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
}

.route-dot.positive {
  background: #12b76a;
}

.route-dot.review {
  background: #1734a8;
}

.route-dot.close {
  background: #7c3aed;
}

.route-dot.pause {
  background: #f79009;
}

.route-list p {
  margin: 0;
  color: #465268;
  font-size: 15px;
  line-height: 1.6;
}

.route-list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 16px;
}

/* ---------------------------------------------------------------- */
/* Reply message preview                                              */
/* ---------------------------------------------------------------- */

.reply-message {
  padding: 28px;
  border-bottom: 1px solid var(--line);
}

.reply-person {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
}

.reply-person p {
  display: flex;
  margin: 0;
  flex-direction: column;
  gap: 3px;
}

.reply-person strong {
  color: var(--ink);
  font-size: 14px;
}

.reply-person small,
.reply-person time {
  color: var(--muted);
  font-size: 12px;
}

.reply-message blockquote {
  margin: 20px 0 0;
  padding: 20px;
  border-left: 3px solid #1734a8;
  border-radius: 0 12px 12px 0;
  background: #f7f9fd;
  color: #3a465c;
  font-size: 15px;
  line-height: 1.7;
}

.reply-decision {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.reply-decision > span {
  display: flex;
  min-height: 96px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 0 20px;
  border-right: 1px solid var(--line);
}

.reply-decision > span:last-child {
  border-right: 0;
}

.reply-decision small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.reply-decision strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.reply-decision strong i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #12b76a;
}

.reply-assist {
  margin: 22px;
  padding: 20px;
  border: 1px solid #dbe4fb;
  border-radius: 14px;
  background: var(--brand-pale);
}

.reply-assist small {
  color: #1734a8;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.reply-assist p {
  margin: 9px 0 0;
  color: #3a465c;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- */
/* Pricing tiers                                                      */
/* ---------------------------------------------------------------- */

.pricing-tiers {
  display: grid;
  width: var(--page);
  margin: 0 auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

.tier-card {
  display: flex;
  flex-direction: column;
  padding: 38px 32px;
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.tier-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.tier-card.featured {
  border: 2px solid var(--brand);
  background: linear-gradient(160deg, #ffffff, #f7f9fd);
  box-shadow: var(--shadow-md);
}

.tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tier-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-pale);
  color: #1734a8;
}

.tier-icon svg {
  width: 18px;
  height: 18px;
}

.tier-icon-reddit {
  background: #fdece7;
  color: #ff4500;
}

.tier-name {
  color: var(--ink);
  font-size: 16px;
  font-weight: 720;
}

.tier-badge {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--gate-pale);
  color: var(--gate);
  font-size: 11px;
  font-weight: 750;
}

.tier-price {
  display: flex;
  align-items: flex-start;
  margin-top: 22px;
}

.tier-price > span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 20px;
  font-weight: 650;
}

.tier-price strong {
  color: var(--ink);
  font-size: 52px;
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1;
}

.tier-price small {
  align-self: flex-end;
  margin: 0 0 9px 8px;
  color: var(--muted);
  font-size: 13px;
}

.tier-desc {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.tier-features {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  flex: 1;
}

.tier-features li {
  position: relative;
  padding-left: 20px;
  color: #3e4a60;
  font-size: 14px;
  line-height: 1.5;
}

.tier-features li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #1734a8;
}

.tier-card .button {
  margin-top: 28px;
  width: 100%;
}

.pricing-footnote {
  display: flex;
  width: min(640px, calc(100% - 48px));
  margin: 30px auto 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--soft);
  font-size: 13px;
  text-align: center;
}

.pricing-footnote a {
  color: #1734a8;
  font-weight: 650;
}

/* ---------------------------------------------------------------- */
/* Multi-channel hero strip + dashboard mock                          */
/* ---------------------------------------------------------------- */

.channel-strip {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.channel-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff;
  transition: background 180ms ease;
}

.channel-row:hover {
  background: #f2f5fa;
}

.channel-glyph {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-pale);
  color: #1734a8;
}

.channel-glyph svg {
  width: 22px;
  height: 22px;
}

.channel-glyph-reddit {
  background: #fdece7;
  color: #ff4500;
}

.channel-glyph-x {
  background: #eef0f2;
  color: #0f1419;
}

.channel-icon-x {
  background: #eef0f2;
  color: #0f1419;
}

.channel-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.channel-row strong {
  color: var(--ink);
  font-size: 15px;
}

.channel-row small {
  color: var(--muted);
  font-size: 12px;
}

.channel-status {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-gated {
  border: 1px solid rgba(21, 128, 61, 0.22);
  background: rgba(21, 128, 61, 0.09);
  color: #15803d;
}

.status-queue {
  border: 1px solid rgba(194, 85, 26, 0.28);
  background: var(--gate-pale);
  color: var(--gate);
}

.dashboard-window .dashboard-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.dashboard-col {
  padding: 24px;
  border-right: 1px solid var(--line);
}

.dashboard-col:last-child {
  border-right: 0;
}

.dashboard-col-heading {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.09em;
}

.dashboard-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #e2e7f3;
}

.dashboard-col > .dashboard-item:first-of-type {
  border-top: 0;
}

.dashboard-item strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.dashboard-item small {
  color: var(--muted);
  font-size: 11px;
}

.channel-pill {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
}

.channel-pill-reddit {
  background: #fdece7;
  color: #ff4500;
}

.channel-pill-x {
  background: #eef0f2;
  color: #0f1419;
}

.dot-status {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 auto;
  border-radius: 50%;
}

.dot-live {
  background: #15803d;
}

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 1180px) {
  .feature-shell,
  .feature-reverse {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .feature-reverse .feature-copy,
  .feature-reverse .feature-window {
    grid-column: 1;
  }

  .feature-reverse .feature-copy {
    grid-row: 1;
  }

  .feature-reverse .feature-window {
    grid-row: 2;
  }

  .feature-copy {
    max-width: 760px;
  }

  .pricing-tiers {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1080px) {
  .site-header nav {
    gap: 22px;
  }
}

@media (max-width: 820px) {
  :root {
    --page: min(100% - 32px, 680px);
  }

  .site-header {
    height: 76px;
  }

  .site-header nav {
    display: none;
  }

  .nav-cta {
    height: 40px;
  }

  .overview-section,
  .feature-section,
  .usecase-section,
  .new-pricing,
  .pricing-section {
    padding: 96px 0;
  }

  .faq-section {
    padding: 10px 16px 96px;
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .faq-intro {
    position: static;
  }

  .final-cta {
    min-height: 460px;
    grid-template-columns: 1fr;
    align-content: center;
    padding: 48px;
  }

  footer,
  .blog-footer {
    padding: 48px 0;
    gap: 26px;
    text-align: center;
  }

  .footer-top {
    flex-direction: column;
    align-items: center;
  }

  .footer-sitemap {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    text-align: left;
  }

  .blog-header {
    height: auto;
    flex-wrap: wrap;
    padding: 14px 0 12px;
    row-gap: 12px;
  }

  .blog-header .brand {
    order: 1;
  }

  .blog-header .header-action {
    order: 2;
    height: 40px;
    white-space: nowrap;
  }

  .blog-header nav {
    order: 3;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    font-size: 13px;
  }

  .blog-featured {
    display: block;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .article-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .article-toc {
    position: static;
  }

  .new-hero {
    grid-template-columns: 1fr;
    padding: 56px 0 72px;
    gap: 34px;
  }

  .hero-product {
    max-width: 460px;
    margin: 8px auto 0;
  }

  .new-hero h1 {
    font-size: clamp(34px, 7.5vw, 46px);
  }

  .hero-proof {
    flex-wrap: wrap;
    gap: 16px 26px;
  }

  .product-contract {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-contract div:nth-child(2) {
    border-right: 0;
  }

  .product-contract div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .usecase-grid {
    grid-template-columns: 1fr;
  }

  .layer-grid,
  .channel-card-grid,
  .pricing-tiers {
    grid-template-columns: 1fr;
  }

  .dashboard-window .dashboard-columns {
    grid-template-columns: 1fr;
  }

  .dashboard-col {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .dashboard-col:last-child {
    border-bottom: 0;
  }

  .channel-row {
    grid-template-columns: 42px 1fr;
  }

  .channel-status {
    grid-column: 2;
    justify-self: start;
    margin-top: 8px;
  }
}

@media (max-width: 580px) {
  :root {
    --page: calc(100% - 24px);
  }

  .brand {
    font-size: 18px;
  }

  .nav-cta,
  .blog-header .header-action {
    padding: 0 14px;
    font-size: 12px;
  }

  .section-intro h2,
  .faq-intro h2 {
    font-size: 36px;
  }

  .faq-list summary {
    min-height: 100px;
    grid-template-columns: 32px 1fr auto;
    font-size: 16px;
  }

  .faq-list details p {
    margin-left: 44px;
  }

  .final-cta {
    width: calc(100% - 24px);
    padding: 36px 26px;
  }

  .final-cta h2 {
    font-size: 42px;
  }

  .button-light {
    width: 100%;
  }

  .blog-header {
    width: var(--page);
  }

  .blog-hero {
    padding: 74px 0 48px;
  }

  .blog-hero h1,
  .article-hero h1 {
    font-size: 45px;
  }

  .blog-featured {
    min-height: 500px;
    padding: 32px;
  }

  .blog-featured h2 {
    font-size: 35px;
  }

  .blog-card,
  .blog-cta {
    padding: 28px;
  }

  .article-hero {
    padding: 50px 0 40px;
  }

  .article-deck {
    font-size: 17px;
  }

  .article-meta {
    flex-wrap: wrap;
  }

  .article-content > section h2 {
    font-size: 27px;
  }

  .article-lede {
    font-size: 19px;
  }

  .article-faq,
  .article-inline-cta {
    padding: 26px;
  }

  .article-next > div {
    grid-template-columns: 1fr;
  }

  .new-hero {
    padding-top: 40px;
  }

  .new-hero h1 {
    font-size: 32px;
  }

  .new-hero-lede {
    font-size: 15px;
  }

  .hero-proof {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-demo-url-row {
    flex-wrap: wrap;
  }

  .hero-demo-btn {
    width: 100%;
  }

  .hero-product,
  .feature-window {
    border-radius: 16px;
  }

  .window-metrics,
  .reply-decision {
    grid-template-columns: 1fr;
  }

  .window-metrics div,
  .reply-decision > span {
    min-height: 76px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .product-contract {
    grid-template-columns: 1fr;
  }

  .product-contract div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .product-contract div:last-child {
    border-bottom: 0;
  }

  .section-intro {
    text-align: left;
  }

  .section-intro h2,
  .feature-copy h2 {
    font-size: 34px;
  }

  .section-intro > p:last-child {
    margin-left: 0;
  }

  .feature-shell {
    gap: 40px;
  }

  .channel-line {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .channel-line > b {
    justify-self: start;
  }

  .channel-row {
    grid-template-columns: 36px 1fr;
    row-gap: 8px;
  }

  .usecase-grid h3 {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Selected symbol: compass mark (assets/logo-mark.svg) */
.brand-symbol,
.brand-mark {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  overflow: visible;
  background: url("assets/logo-mark.svg") no-repeat center / contain;
}

.brand-symbol i,
.brand-mark i {
  display: none;
}

/* Compass mark inside every product window */
.home-page .window-mark {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: url("assets/logo-mark.svg") no-repeat center / contain;
}

/* ================================================================
   MODERN MOTION & DEPTH LAYER (v2 visual refresh)
   ================================================================ */

.hero-gradient {
  background: linear-gradient(102deg, var(--brand) 0%, var(--sky) 46%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.new-hero {
  position: relative;
}

.new-hero-copy,
.new-hero .hero-product {
  position: relative;
  z-index: 1;
}

.aurora {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 100vw;
  height: 130%;
  z-index: 0;
  transform: translateX(-50%);
  pointer-events: none;
  filter: blur(72px);
  opacity: 0.5;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(180deg, #000 60%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(180deg, #000 60%, transparent);
  mask-composite: intersect;
}

.aurora b {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.aurora .a1 {
  top: 4%;
  left: 14%;
  width: 32vw;
  height: 32vw;
  background: radial-gradient(circle at 30% 30%, rgba(32, 68, 214, 0.6), transparent 70%);
}

.aurora .a2 {
  top: -6%;
  right: 12%;
  width: 34vw;
  height: 34vw;
  background: radial-gradient(circle at 60% 40%, rgba(14, 165, 233, 0.45), transparent 70%);
}

.aurora .a3 {
  top: 20%;
  left: 44%;
  width: 28vw;
  height: 28vw;
  background: radial-gradient(circle at 50% 50%, rgba(110, 155, 255, 0.42), transparent 70%);
}

.layer-card,
.channel-card,
.tier-card,
.usecase-grid article,
.dashboard-item {
  transition:
    transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.layer-card:hover,
.channel-card:hover {
  transform: translateY(-5px);
  border-color: rgba(13, 21, 38, 0.32);
  box-shadow: 0 26px 60px -28px rgba(13, 21, 38, 0.4);
}

.tier-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 60px -28px rgba(13, 21, 38, 0.32);
}

.channel-icon,
.flow-ico {
  transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.channel-card:hover .channel-icon {
  transform: translateY(-3px) rotate(-4deg) scale(1.05);
}

.channel-row {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hero-product .channel-row:hover {
  transform: translateX(4px);
  box-shadow: 0 10px 26px -14px rgba(13, 21, 38, 0.35);
}

/* --- Intent badges (feed rows, hero preview) --- */
.intent-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.intent-high {
  background: rgba(21, 128, 61, 0.1);
  color: #15803d;
}

.intent-emerging {
  background: var(--gate-pale);
  color: var(--gate);
}

/* --- Subreddit ticker --- */
.ticker {
  padding: 26px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: #ffffff;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ticker-label {
  width: var(--page);
  margin: 0 auto 18px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.ticker-inner {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: ticker 38s linear infinite;
}

.ticker:hover .ticker-inner {
  animation-play-state: paused;
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

.sub-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.sub-chip b {
  color: var(--brand);
  font-weight: 800;
}

/* --- Animated pipeline flow diagram (interactive stepper) --- */
.flow {
  padding: 120px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
}

.flow-track {
  position: relative;
  display: grid;
  width: var(--page);
  margin: 0 auto;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.flow-track::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 9%;
  right: 9%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-pale), var(--brand-bright), var(--cyan), var(--brand-pale));
  background-size: 220% 100%;
  animation: flow-shift 5s linear infinite;
}

.flow-comet-dot {
  position: absolute;
  top: 34px;
  left: 9%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-bright);
  box-shadow: 0 0 0 5px rgba(13, 21, 38, 0.18);
  transition: left 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.flow-node {
  position: relative;
  z-index: 1;
  text-align: center;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 16px;
  transition: background 0.3s ease;
}

.flow-ico {
  display: grid;
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  color: var(--brand);
  transition:
    transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1),
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

.flow-node:hover .flow-ico {
  transform: translateY(-5px) scale(1.04);
}

.flow-node[aria-selected="true"] .flow-ico {
  transform: translateY(-6px) scale(1.06);
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand-bright), var(--sky));
  color: #fff;
  box-shadow: 0 18px 40px -14px rgba(13, 21, 38, 0.6);
}

.flow-node[aria-selected="true"] .flow-step {
  color: var(--brand);
}

.flow-ico svg {
  width: 32px;
  height: 32px;
}

.flow-step {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.flow-node strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.flow-node span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.flow-caption {
  width: min(640px, calc(100% - 48px));
  margin: 44px auto 0;
  min-height: 52px;
  padding: 20px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  transition: opacity 0.3s ease;
}

.flow-caption strong {
  color: var(--ink);
}

@keyframes flow-shift {
  to { background-position: 220% 0; }
}

/* --- Live scoring demo --- */
.demo-section {
  padding: 150px 0;
  background: #ffffff;
}

.demo-shell {
  display: grid;
  width: var(--page);
  margin: 0 auto;
  grid-template-columns: minmax(300px, 0.85fr) minmax(420px, 1.15fr);
  gap: 32px;
  align-items: stretch;
}

.demo-posts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.demo-postnote {
  margin: 0 0 4px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-post {
  display: block;
  width: 100%;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.demo-post:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 21, 38, 0.4);
}

.demo-post[aria-selected="true"] {
  border-color: var(--brand);
  box-shadow: 0 18px 40px -22px rgba(13, 21, 38, 0.5);
}

.demo-post .dp-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 750;
}

.demo-post .dp-body {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

.demo-post .dp-meta {
  margin-top: 10px;
  color: var(--soft);
  font-size: 12px;
}

.demo-stage {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.demo-stage .window-bar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.demo-scores {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.meter small,
.demo-draft-wrap small {
  display: block;
  margin-bottom: 10px;
  color: var(--soft);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.1em;
}

.meter-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--brand-pale);
  overflow: hidden;
}

.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-bright), var(--cyan));
  transition: width 1s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.meter-val {
  margin-top: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.intent-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.7);
}

.intent-chip.pop {
  animation: chip-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.intent-chip.high { background: rgba(21, 128, 61, 0.1); color: #15803d; }
.intent-chip.emerging { background: var(--gate-pale); color: var(--gate); }
.intent-chip.neutral { background: var(--ground-soft); color: var(--muted); }

/* ---------------------------------------------------------------- */
/* Free tool widgets (subreddit finder, calculator, keyword tester)  */
/* ---------------------------------------------------------------- */

.tool-widget {
  margin: 22px 0 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--ground-soft);
  box-shadow: var(--shadow-sm);
}

.tool-widget .intent-chip {
  opacity: 1;
  transform: none;
}

.tool-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.tool-field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.tool-field input[type="text"],
.tool-field input[type="number"],
.tool-field textarea,
.tool-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
}

.tool-field textarea {
  resize: vertical;
  min-height: 90px;
}

.tool-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 22px;
}

.tool-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.tool-checkboxes label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 14px;
  cursor: pointer;
}

.tool-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
}

.tool-sample-btn {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.tool-sample-btn:hover {
  color: var(--ink);
  border-color: var(--brand);
}

.tool-results {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.tool-results[hidden] {
  display: none;
}

.tool-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.tool-stat {
  padding: 18px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--line);
}

.tool-stat small {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tool-stat strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 26px;
  color: var(--ink);
}

.sub-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.sub-result-card {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--line);
}

.sub-result-card strong {
  display: block;
  margin-bottom: 6px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  color: var(--ink);
}

.sub-result-card span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.tool-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

@keyframes chip-pop {
  to { opacity: 1; transform: scale(1); }
}

.demo-draft-wrap {
  flex: 1;
  padding: 24px 28px 26px;
}

.tone-toggle {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.tone-btn {
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.tone-btn[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
}

.demo-draft {
  min-height: 118px;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid rgba(13, 21, 38, 0.16);
  border-radius: 14px;
  background: rgba(13, 21, 38, 0.05);
  color: #475467;
  font-size: 15px;
  line-height: 1.7;
}

.demo-draft .caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--brand);
  animation: caret-blink 1s step-end infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

.demo-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px 22px;
  color: var(--soft);
  font-size: 12px;
}

.demo-foot .pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
}

/* --- Signal feed: interactive tabs + expandable rows --- */
.feed-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.03);
}

.feed-tab {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.feed-tab[aria-selected="true"] {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.feed-list {
  display: grid;
  gap: 2px;
  padding: 12px;
}

.feed-row {
  border: 0;
  width: 100%;
  padding: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  border-radius: 14px;
  transition:
    max-height 0.45s cubic-bezier(0.16, 0.84, 0.44, 1),
    opacity 0.35s ease,
    transform 0.35s ease,
    background 0.25s ease;
}

.feed-row:hover {
  background: rgba(13, 21, 38, 0.04);
}

.feed-row.hidden {
  max-height: 0 !important;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.feed-row-head {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
}

.feed-row-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.feed-row-head small {
  color: var(--muted);
  font-size: 12px;
}

.feed-row-draft {
  max-height: 0;
  margin: 0 14px;
  padding: 0 16px;
  opacity: 0;
  overflow: hidden;
  border-width: 0;
  transition:
    max-height 0.45s cubic-bezier(0.16, 0.84, 0.44, 1),
    opacity 0.35s ease,
    margin 0.35s ease,
    padding 0.35s ease;
}

.feed-row-draft b {
  display: block;
  margin-bottom: 6px;
  color: var(--soft);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.1em;
}

.feed-row[aria-expanded="true"] {
  background: rgba(13, 21, 38, 0.04);
}

.feed-row[aria-expanded="true"] .feed-row-draft {
  max-height: 200px;
  margin: 0 14px 16px;
  padding: 14px 16px;
  border-width: 1px;
  opacity: 1;
}

/* ================================================================
   MOTION — only when the visitor allows it
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {
  .aurora b {
    animation: aurora-drift 20s ease-in-out infinite;
  }
  .aurora .a2 { animation-duration: 26s; animation-direction: reverse; }
  .aurora .a3 { animation-duration: 23s; }

  @keyframes aurora-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -22px) scale(1.08); }
  }

  .new-hero .hero-product {
    animation: float-soft 8s ease-in-out infinite;
  }

  @keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
  }

  .live-state i {
    position: relative;
  }

  .live-state i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: pulse-ring 1.9s ease-out infinite;
  }

  @keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
  }

  .new-hero-copy > * {
    animation: fade-up-v2 0.8s both cubic-bezier(0.16, 0.84, 0.44, 1);
  }
  .new-hero-copy > *:nth-child(1) { animation-delay: 0.04s; }
  .new-hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
  .new-hero-copy > *:nth-child(3) { animation-delay: 0.20s; }
  .new-hero-copy > *:nth-child(4) { animation-delay: 0.28s; }
  .new-hero-copy > *:nth-child(5) { animation-delay: 0.36s; }
  .new-hero-copy > *:nth-child(6) { animation-delay: 0.44s; }

  @keyframes fade-up-v2 {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
      transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 820px) {
  .flow-track {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 420px;
  }
  .flow-track::before,
  .flow-comet-dot {
    display: none;
  }
  .flow-node {
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: center;
    gap: 18px;
    text-align: left;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
  }
  .flow-ico { margin: 0; }
  .flow-step { position: absolute; top: 10px; right: 16px; margin: 0; }
  .demo-shell {
    grid-template-columns: 1fr;
  }
  .flow-caption { margin-top: 28px; }
  .pricing-tiers {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}

/* ---------------------------------------------------------------- */
/* Pricing channel toggle (Reddit / Twitter / Bundle)                */
/* ---------------------------------------------------------------- */

.pricing-toggle {
  display: inline-flex;
  margin: 0 auto 48px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
}

.pricing-toggle-wrap {
  display: flex;
  justify-content: center;
}

.pricing-toggle button {
  padding: 11px 22px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.pricing-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}

.pricing-tiers[hidden] {
  display: none;
}

.trial-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.tier-save {
  display: inline-flex;
  margin: 14px 0 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.1);
  color: #15803d;
  font-size: 11.5px;
  font-weight: 750;
}

@media (max-width: 820px) {
  .addon-shell {
    padding: 32px 24px;
  }
}

/* Custom / contact-only tier: deliberately quieter than the priced cards so it
   doesn't read as a self-serve option you can pick. */
.tier-price-custom {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.tier-price-custom strong {
  font-weight: 700;
}

/* ==========================================================================
   Why Reddit — three compounding channels
   ========================================================================== */

.channels3 {
  padding: 140px 0;
  background: var(--paper);
}

.channels3-grid {
  width: var(--page);
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.channels3-card {
  position: relative;
  padding: 38px 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.channels3-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand);
}

.channels3-card h3 {
  margin: 0;
  font-size: 1.34rem;
  line-height: 1.24;
  letter-spacing: -0.01em;
}

.channels3-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
  font-size: 0.99rem;
}

.channels3-tag {
  margin-top: auto;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--brand-pale);
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ==========================================================================
   Channel landing pages (/reddit/, /x/)
   ========================================================================== */

.site-header nav a.is-active {
  color: var(--ink);
  font-weight: 700;
}

.chansteps {
  padding: 140px 0;
  background: var(--ground-soft);
}

.chanstep-grid {
  width: var(--page);
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}

.chanstep {
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.chanstep-num {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand);
  margin-bottom: 12px;
}

.chanstep h3 {
  margin: 0 0 8px;
  font-size: 1.12rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.chanstep p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Cross-sell strip between the CTA and the footer: the other channel's page
   is the single most likely next click from here, so it gets its own band
   rather than a link buried in the footer sitemap. */
.crosslink {
  width: var(--page);
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 0 110px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}

.crosslink p {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 720px) {
  .chansteps {
    padding: 96px 0;
  }

  .crosslink {
    padding-bottom: 80px;
  }
}

/* The channel pages publish three tiers, not the home page's four (there is no
   Custom tier when only one channel is on offer). Without this the shared
   four-column rule leaves a dead column and squeezes the cards. */
.pricing-tiers.tiers-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1080px;
}

@media (max-width: 980px) {
  .pricing-tiers.tiers-3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   "One reply, three compounding channels" — staged over time
   ========================================================================== */

.stages {
  padding: 150px 0;
  background: var(--paper);
}

.stage-grid {
  width: var(--page);
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.stage {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.stage-tag {
  align-self: flex-start;
  padding: 6px 12px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--brand-pale);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Fixed height so the three headlines below sit on one baseline across the
   row — the time progression only reads as a progression if the eye can run
   straight across "Same day / Weeks later / Months later". */
.stage-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 208px;
  padding: 16px;
  margin-bottom: 22px;
  border-radius: var(--radius-sm);
  background: var(--ground-soft);
  border: 1px solid var(--line);
}

.stage h3 {
  margin: 0 0 8px;
  font-size: 1.24rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.stage h3 em {
  font-style: normal;
  color: var(--brand);
}

.stage > p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

/* --- stage 1: the thread --- */

.stage-thread {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
}

.stage-thread-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.78rem;
}

.stage-thread-head strong {
  color: var(--ink);
}

.stage-thread-head span {
  color: var(--soft);
}

.stage-thread p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.stage-thread-you {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
  box-shadow: 0 0 0 3px var(--brand-pale);
}

.stage-thread-foot {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--soft);
}

/* --- stage 2: the search result --- */

.stage-serp {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
}

.stage-serp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.76rem;
  color: var(--soft);
}

.stage-serp-head b {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.12);
  color: var(--green);
  font-size: 0.74rem;
}

.stage-serp strong {
  display: block;
  margin-bottom: 5px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--brand);
}

.stage-serp p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --- stage 3: the AI answer --- */

.stage-ai-q {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}

.stage-ai-a {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
}

.stage-ai-model {
  display: inline-block;
  margin-bottom: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

.stage-ai-a p {
  margin: 0 0 9px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink);
}

.stage-ai-cite {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--brand-pale);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Third stage: the thread that turned into a customer. Same card weight as the
   thread and SERP visuals so the three read as one row, not two plus an
   afterthought. */
.stage-win {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
}

.stage-win-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--green);
}

.stage-win-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

.stage-win strong {
  display: block;
  margin-bottom: 11px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.stage-win-src {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
  color: var(--soft);
}

.stage-win-src b {
  color: var(--brand);
  font-weight: 600;
}

.stage-foot {
  width: var(--page);
  max-width: 1240px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 1000px) {
  /* Both three-up grids stack here. Three 1fr columns below this width squeeze
     to ~150px, which is narrower than the card headings can set. */
  .stage-grid,
  .channels3-grid {
    grid-template-columns: 1fr;
  }

  .stage-visual {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .stages {
    padding: 96px 0;
  }
}

/* ==========================================================================
   Hero URL capture — the primary conversion path
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A real GET form, not a button that scrolls to pricing: the URL is the one
   piece of information onboarding actually needs, and asking for it here means
   signup arrives already knowing what the customer sells. Works with JS off —
   the submit handler below only tidies the value. */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 34px 0 0;
  max-width: 540px;
}

.hero-cta-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 0;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.hero-cta-field:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-pale);
}

.hero-cta-globe {
  flex: none;
  width: 19px;
  height: 19px;
  margin-right: 10px;
  color: var(--soft);
}

.hero-cta-field input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}

.hero-cta-field input::placeholder {
  color: var(--soft);
}

.hero-cta-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 16px 26px;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
}

.hero-cta-btn span {
  transition: transform 0.18s ease;
}

.hero-cta-btn:hover span {
  transform: translateX(3px);
}

.hero-cta-note {
  margin: 14px 0 0;
  font-size: 0.88rem;
  color: var(--soft);
}

@media (max-width: 560px) {
  .hero-cta-field,
  .hero-cta-btn {
    flex: 1 1 100%;
  }

  .hero-cta-btn {
    justify-content: center;
  }
}

/* The three time-stage headlines only read as a progression if the eye can run
   straight across "Same day / Weeks later / Months later". The mock visuals
   above them are different heights, so subgrid syncs the four rows across all
   three cards. The min-height above is the fallback for engines without it. */
@supports (grid-template-rows: subgrid) {
  .stage-grid {
    grid-template-rows: repeat(4, auto);
  }

  .stage {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
  }

  .stage-visual {
    min-height: 0;
  }
}


/* ---------------------------------------------------------------- */
/* Single $12 pass strip                                             */
/* ---------------------------------------------------------------- */

/* The pass used to be repeated as a card in every pricing panel, which read as
   three different passes. There is only one, it covers both channels, so it
   sits once above the whole section as a strip rather than a tier. */
.trial-strip {
  display: flex;
  width: min(880px, calc(100% - 48px));
  margin: 0 auto 34px;
  padding: 22px 26px;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--ground-soft);
}

.trial-strip-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trial-strip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 750;
}

.trial-strip-price {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.trial-strip-copy p:last-child {
  max-width: 58ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.trial-strip .button {
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .trial-strip {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Channel pages carry Starter and Growth only — no Custom tier when a single
   channel is on offer. */
.pricing-tiers.tiers-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
}

@media (max-width: 820px) {
  .pricing-tiers.tiers-2 {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}

/* Prices on the cards are pre-tax, which is what the payment provider charges
   on. Saying so once under the table is the honest place for it — repeating it
   on six cards would read as a disclaimer rather than a fact. */
.pricing-tax-note {
  display: block;
  margin-top: 6px;
  color: var(--soft);
  font-size: 12.5px;
}