/* ==========================================================================
   ConvoOK — the marketing site
   --------------------------------------------------------------------------
   One stylesheet, no build step, no framework. It is served with a cache-
   busting mtime query, so it can be edited and reloaded.

   The identity comes from the logo: two speech bubbles crossing as an
   infinity — an electric BLUE one carrying a voice waveform, an aqua TEAL one
   carrying a check. Blue is the conversation, teal is the resolution, and the
   gradient between them is the product. That pairing is the only decoration
   this site needs, which is why it shows up as the button fill, the heading
   accent, the soft blobs behind the hero and nothing else.

   Written against the class vocabulary the existing pages already use
   (.wrap, .btn, .card, .section, .plan, .road…), so the whole site changed
   its appearance without every page being rewritten.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------
   Light is the default and complete. Dark redefines only the tokens, twice:
   once for the OS preference and once for an explicit choice, so neither can
   leave half the palette behind. Every colour below is defined here first —
   a colour that exists only inside a media query is the classic unreadable-
   in-one-theme bug. */
:root {
  /* Ground and ink */
  --bg: #ffffff;
  --bg-tint: #f4f8ff;
  --surface: #ffffff;
  --surface-2: #eef4ff;
  --ink: #0b1020;
  --ink-mid: #45536b;
  --ink-soft: #6b7a92;
  --line: #e2e9f5;
  --line-soft: #eef2f9;

  /* The logo's blue: the conversation */
  --brand: #1570f2;
  --brand-deep: #0c53c8;
  --brand-lift: #2e8bff;
  --brand-wash: #e8f1ff;
  --on-brand: #ffffff;

  /* The logo's teal: the resolution */
  --accent: #19c6b8;
  --accent-deep: #0e9384;
  --accent-lift: #3ad7cf;
  --accent-wash: #e2f8f5;

  /* States, borrowed sparingly */
  --ok: #0e9384;
  --warn: #b45309;
  --warn-wash: #fff5e6;
  --idea: #7c5cff;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 16, 32, .05), 0 2px 8px rgba(11, 16, 32, .04);
  --shadow: 0 8px 28px rgba(11, 16, 32, .08);
  --shadow-lg: 0 24px 60px rgba(12, 83, 200, .14);

  --wrap: 1180px;
  --head-h: 72px;

  --sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --script: "Caveat", "Segoe Script", cursive;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070b16;
    --bg-tint: #0b1222;
    --surface: #0e1526;
    --surface-2: #131c31;
    --ink: #eef3ff;
    --ink-mid: #a9b6cd;
    --ink-soft: #8593ac;
    --line: #1f2a44;
    --line-soft: #172038;
    --brand: #4d94ff;
    --brand-deep: #2e8bff;
    --brand-lift: #74afff;
    --brand-wash: #10203c;
    --accent: #3ad7cf;
    --accent-deep: #19c6b8;
    --accent-wash: #0c2b2c;
    --warn-wash: #2a1f0c;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --bg: #070b16;
  --bg-tint: #0b1222;
  --surface: #0e1526;
  --surface-2: #131c31;
  --ink: #eef3ff;
  --ink-mid: #a9b6cd;
  --ink-soft: #8593ac;
  --line: #1f2a44;
  --line-soft: #172038;
  --brand: #4d94ff;
  --brand-deep: #2e8bff;
  --brand-lift: #74afff;
  --brand-wash: #10203c;
  --accent: #3ad7cf;
  --accent-deep: #19c6b8;
  --accent-wash: #0c2b2c;
  --warn-wash: #2a1f0c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Both, and on `html`: `overflow-x: hidden` on `body` alone does not clip a
     FIXED element, because a fixed element is laid out against the viewport
     rather than against body. `clip` where it is supported, because `hidden`
     silently turns the element into a scroll container and breaks
     `position: sticky` on the header inside it. */
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: var(--on-brand);
  padding: .7rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }
.center { text-align: center; }
.lede { font-size: 1.125rem; color: var(--ink-mid); max-width: 62ch; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 .95rem/1 var(--sans);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .58rem 1.05rem; font-size: .875rem; }
.btn--lg { padding: .95rem 1.7rem; font-size: 1rem; }

.btn--primary {
  background: linear-gradient(135deg, var(--brand-lift), var(--brand-deep));
  color: var(--on-brand);
  box-shadow: 0 6px 18px rgba(21, 112, 242, .28);
}
.btn--primary:hover { box-shadow: 0 10px 26px rgba(21, 112, 242, .36); }

.btn--accent {
  background: linear-gradient(135deg, var(--accent-lift), var(--accent-deep));
  color: #04231f;
  box-shadow: 0 6px 18px rgba(25, 198, 184, .3);
}

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-deep); }

/* On the blue CTA band, where a blue button would vanish. */
.btn--onbrand { background: #fff; color: var(--brand-deep); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* --- Header -------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-head[data-stuck="true"] { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.site-head__bar {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--head-h);
}

.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.brand span { font-size: 1.12rem; }
.brand span b { color: var(--brand); font-weight: 800; }

/* --- The mega menu -------------------------------------------------------
   Every link is a real anchor in the markup from the first byte, so a crawler
   reads the whole information architecture without running anything. The
   panel is hidden with opacity and visibility rather than `display:none`,
   because a display-none subtree is not focusable and this has to work from
   the keyboard. Opening is `:hover`, `:focus-within` AND a data attribute the
   script sets — pointer, keyboard and touch each get a way in. */
.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }

.nav__item { position: static; }

.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .8rem;
  color: var(--ink-mid);
  font-weight: 500; font-size: .95rem;
  border-radius: 10px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--brand-deep); font-weight: 600; }
.nav__link svg { width: 14px; height: 14px; transition: transform .18s ease; }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  z-index: 80;
}
.nav__item:hover > .mega,
.nav__item:focus-within > .mega,
.nav__item[data-open="true"] > .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.5rem 2rem;
  padding: 1.75rem 0 2rem;
}
.mega__inner--feature { grid-template-columns: repeat(2, minmax(190px, 1fr)) minmax(230px, .85fr); }
/* With a split column taking two tracks, the row needs a fourth. */
.mega__inner--feature:has(.mega__col--wide) { grid-template-columns: repeat(3, minmax(170px, 1fr)) minmax(230px, .85fr); }

.mega__head {
  font: 700 .72rem/1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .9rem;
}

.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }

/* A long column flows into two, and takes twice the width to do it. Nine
   items stacked made the panel taller than the hero behind it. */
.mega__col--wide { grid-column: span 2; }
.mega__list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem 1rem; }

.mega__link {
  display: block;
  padding: .5rem .65rem;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 600; font-size: .935rem;
}
.mega__link:hover { background: var(--brand-wash); color: var(--brand-deep); text-decoration: none; }
.mega__link span { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-soft); margin-top: .1rem; }
.mega__link:hover span { color: var(--ink-mid); }

.mega__feature {
  border-radius: var(--radius);
  padding: 1.15rem;
  background: linear-gradient(140deg, var(--brand-wash), var(--accent-wash));
  border: 1px solid var(--line);
}
.mega__feature .eyebrow { color: var(--brand-deep); }
.mega__feature h4 { margin: .2rem 0 .4rem; font-size: 1.02rem; }
.mega__feature p { font-size: .875rem; color: var(--ink-mid); margin-bottom: .8rem; }

.nav__actions { display: flex; align-items: center; gap: .55rem; margin-left: .6rem; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
}

/* --- Sections ------------------------------------------------------------ */
.section { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.section--tint { background: var(--bg-tint); }
.section--brand { background: linear-gradient(160deg, var(--brand-wash), var(--accent-wash)); }

.section__head { max-width: 62ch; margin: 0 auto clamp(1.8rem, 1rem + 2vw, 3rem); text-align: center; }
.section__head p { color: var(--ink-mid); margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font: 700 .74rem/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .7rem;
}

.accent { color: var(--brand); }
.accent--teal { color: var(--accent-deep); }

/* The one flourish: the logo's own gradient, on the words that matter. */
.gradient-text {
  background: linear-gradient(120deg, var(--brand-lift), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.script {
  font: 600 1.5rem/1.25 var(--script);
  color: var(--brand);
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
  background: linear-gradient(180deg, var(--brand-wash) 0%, var(--bg) 78%);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner { position: relative; z-index: 2; text-align: center; }

/* An inner page's hero is a heading, not a stage: the home page's vertical
   room under it reads as a missing section anywhere else. */
.hero--page { padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) 0 clamp(1.8rem, 1.4rem + 1.8vw, 3rem); }
.hero--page .hero__cta { margin-bottom: 0; }

.hero__lockup { display: flex; justify-content: center; margin-bottom: clamp(1.2rem, 1rem + 1vw, 2rem); }
.hero__lockup img { width: min(440px, 82vw); }

.hero h1 { margin-bottom: .6rem; }
.hero__sub { max-width: 58ch; margin: 0 auto 1.8rem; color: var(--ink-mid); font-size: 1.06rem; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: 1rem; }
.hero__note { font-size: .875rem; color: var(--ink-soft); }

/* Soft shapes, drawn rather than downloaded. Decorative, so they are hidden
   from assistive technology and skipped entirely when motion is reduced. */
.blob {
  position: absolute; z-index: 0;
  border-radius: 50%;
  filter: blur(6px);
  opacity: .5;
  pointer-events: none;
}
.blob--1 { width: 460px; height: 460px; left: -180px; top: -140px; background: radial-gradient(circle at 35% 35%, rgba(46, 139, 255, .30), transparent 68%); }
.blob--2 { width: 520px; height: 520px; right: -200px; top: -80px; background: radial-gradient(circle at 60% 40%, rgba(58, 215, 207, .28), transparent 68%); }
.blob--3 { width: 380px; height: 380px; left: 8%; bottom: -200px; background: radial-gradient(circle at 50% 50%, rgba(21, 112, 242, .18), transparent 70%); }

.dot-grid {
  position: absolute; z-index: 0; pointer-events: none;
  width: 130px; height: 90px;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.4px);
  background-size: 14px 14px;
  color: rgba(21, 112, 242, .22);
}
.dot-grid--tl { left: 2%; top: 26%; }
.dot-grid--tr { right: 3%; top: 16%; }

.side-tag {
  position: absolute; z-index: 1;
  font: 700 .66rem/1.7 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.side-tag--left { left: 1.5rem; top: 34%; }
.side-tag--right { right: 1.5rem; top: 12%; text-align: right; }

@media (max-width: 1100px) { .side-tag, .dot-grid { display: none; } }

/* --- Channel strip ------------------------------------------------------- */
.channel-strip {
  list-style: none; margin: 0 0 1.8rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.8rem, .4rem + 1.6vw, 2.4rem);
}
.channel-strip li { display: flex; flex-direction: column; align-items: center; gap: .55rem; width: 84px; }
.channel-strip__icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); color: var(--brand);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.channel-strip li:hover .channel-strip__icon { transform: translateY(-3px); box-shadow: var(--shadow); }
.channel-strip__icon svg { width: 24px; height: 24px; }
.channel-strip__label { font-size: .8rem; color: var(--ink-mid); text-align: center; line-height: 1.3; }

/* --- Cards & grids ------------------------------------------------------- */
.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card--raised:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.card h3 { margin-bottom: .35rem; }
.card p:last-child { margin-bottom: 0; }

.card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand-deep);
  margin-bottom: .85rem;
}
.card__icon svg { width: 22px; height: 22px; }

/* A card that is a link in its entirety. The whole surface is the target,
   which is what a person expects from a tile. */
a.card { color: inherit; display: block; }
a.card:hover { text-decoration: none; }
a.card .card__more { color: var(--brand-deep); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .3rem; }
a.card:hover .card__more svg { transform: translateX(3px); }
a.card .card__more svg { width: 1em; height: 1em; transition: transform .18s ease; }

/* --- Checklist ----------------------------------------------------------- */
.ticks { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .6rem; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: .65rem; align-items: start; color: var(--ink-mid); }
.ticks svg { width: 22px; height: 22px; color: var(--brand); margin-top: .18rem; }

/* --- Numbered steps ------------------------------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; }
.steps li::before {
  counter-increment: step; content: counter(step);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-lift), var(--brand-deep));
  color: var(--on-brand); font-weight: 700; font-size: .95rem;
}
.steps h3 { margin-bottom: .2rem; }
.steps p { color: var(--ink-mid); margin: 0; }

/* --- Logo strip ---------------------------------------------------------- */
.logo-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.logo-strip__item {
  flex: 1 1 140px; max-width: 190px; height: 62px;
  display: grid; place-items: center;
  background: var(--surface-2); border-radius: 10px;
  color: var(--ink-soft); font-weight: 600; font-size: .9rem;
}

/* --- Showcase (copy beside a picture) ------------------------------------ */
.showcase { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.showcase--flip > :first-child { order: 2; }

.frame {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  color: var(--ink-soft);
  overflow: visible;
}
.frame svg { width: 64px; height: 64px; opacity: .5; }

/* The two floating proof cards from the design. Absolute, so they overlap the
   frame's corners; they stack into the flow on a narrow screen instead of
   hanging off the edge of it. */
.float-card {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: .7rem .9rem;
  display: flex; align-items: center; gap: .6rem;
  font-size: .82rem;
}
.float-card--tr { right: -14px; top: 12%; }
.float-card--bl { left: -14px; bottom: 10%; }
.float-card strong { display: block; font-size: 1.15rem; line-height: 1.1; }
.float-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.float-card .bars { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.float-card .bars i { width: 3px; background: var(--brand); border-radius: 2px; animation: bar 1.1s ease-in-out infinite; }
.float-card .bars i:nth-child(2) { animation-delay: .12s; }
.float-card .bars i:nth-child(3) { animation-delay: .24s; }
.float-card .bars i:nth-child(4) { animation-delay: .36s; }
.float-card .bars i:nth-child(5) { animation-delay: .48s; }

@keyframes bar { 0%, 100% { height: 5px; } 50% { height: 18px; } }

@media (max-width: 720px) {
  .float-card { position: static; margin-top: .8rem; }
}

/* --- Channels (existing markup) ------------------------------------------ */
.channels { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.channel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); }
.channel__top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.channel__name { font-weight: 700; }
.channel__note { color: var(--ink-soft); font-size: .86rem; margin: .35rem 0 0; }

.state {
  font: 700 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: .32rem .55rem; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-soft);
}
.state--live { background: var(--accent-wash); color: var(--accent-deep); }
.state--beta { background: var(--warn-wash); color: var(--warn); }
.state--building { background: var(--brand-wash); color: var(--brand-deep); }
.state--soon { background: var(--brand-wash); color: var(--brand-deep); }
.state--idea { background: var(--surface-2); color: var(--ink-soft); }
/* A state under a channel's name on the home strip, and beside it on a chip. */
.channel-strip__state { font-size: .55rem; letter-spacing: .04em; padding: .22rem .4rem; white-space: nowrap; }
.chip__state { font-weight: 600; opacity: .75; }

/* --- Chips --------------------------------------------------------------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .75rem; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-mid);
  font-size: .84rem; font-weight: 500;
  border: 1px solid var(--line-soft);
}
.chip--brand { background: var(--brand-wash); color: var(--brand-deep); border-color: transparent; }

/* --- Plans (existing markup) --------------------------------------------- */
.plans { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem 1.35rem; box-shadow: var(--shadow-sm); position: relative; }
.plan--featured { border-color: var(--brand); box-shadow: var(--shadow-lg); }
.plan__badge { position: absolute; top: -12px; left: 1.35rem; background: linear-gradient(135deg, var(--brand-lift), var(--brand-deep)); color: var(--on-brand); font: 700 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: .42rem .7rem; border-radius: var(--radius-pill); }
.plan__name { font-size: 1.15rem; font-weight: 700; }
.plan__tagline { color: var(--ink-soft); font-size: .88rem; min-height: 2.6em; }
.plan__price { display: flex; align-items: baseline; gap: .25rem; margin: .7rem 0 .2rem; }
.plan__amount { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }
.plan__per { color: var(--ink-soft); font-size: .9rem; }
.plan__annual { color: var(--accent-deep); font-size: .84rem; font-weight: 600; }
.plan__rows { list-style: none; margin: 1rem 0 1.2rem; padding: 0; display: grid; gap: .45rem; font-size: .9rem; color: var(--ink-mid); }

/* --- Roadmap (existing markup) ------------------------------------------- */
.road { display: grid; gap: 1.6rem; }
.road__group h3 { display: flex; align-items: center; gap: .6rem; }
.road__items { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.road__item { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px; padding: .7rem .9rem; box-shadow: var(--shadow-sm); }

/* --- Chat mock (existing markup) ----------------------------------------- */
.mock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.mock__bar { display: flex; align-items: center; gap: .45rem; padding: .65rem .9rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mock__title { font-size: .84rem; color: var(--ink-soft); margin-left: .35rem; }
.mock__body { padding: 1rem; display: grid; gap: .6rem; }
.bubble { max-width: 82%; padding: .65rem .9rem; border-radius: 14px; font-size: .92rem; line-height: 1.5; }
.bubble--them { background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 4px; }
.bubble--us { background: linear-gradient(135deg, var(--brand-lift), var(--brand-deep)); color: var(--on-brand); margin-left: auto; border-bottom-right-radius: 4px; }
.bubble--note { background: transparent; color: var(--ink-soft); font-size: .8rem; text-align: center; max-width: 100%; }

/* --- Testimonials -------------------------------------------------------- */
.quotes { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.quote__mark { color: var(--brand); width: 26px; height: 26px; margin-bottom: .5rem; }
.quote p { font-size: .95rem; color: var(--ink-mid); }
.quote__who { display: flex; align-items: center; gap: .65rem; margin-top: 1rem; }
.quote__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); flex: none; }
.quote__name { font-weight: 700; font-size: .9rem; }
.quote__org { color: var(--ink-soft); font-size: .82rem; }

/* --- Meters (what a use case actually costs) ----------------------------- */
.meters { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.meter {
  display: grid; grid-template-columns: auto 1fr auto; gap: .5rem 1rem; align-items: baseline;
  padding: .8rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.meter__name { font-weight: 700; }
.meter__what { color: var(--ink-soft); font-size: .86rem; grid-column: 1 / -1; margin: 0; }
.meter__flag { font: 700 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: .3rem .55rem; border-radius: var(--radius-pill); background: var(--warn-wash); color: var(--warn); }

/* --- CTA band ------------------------------------------------------------ */
.cta-band {
  background: linear-gradient(120deg, var(--brand-deep), var(--brand-lift) 55%, var(--accent));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 1.2rem + 2.5vw, 3rem);
  display: grid; gap: 1.2rem; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { margin-bottom: .3rem; color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .88); margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: .6rem; max-width: 78ch; margin-inline: auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: .95rem 1.1rem;
}
.faq details[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 1.3rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: .7rem 0 0; color: var(--ink-mid); }

/* --- Prose (legal pages) ------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2rem; }
.prose ul { color: var(--ink-mid); }

/* The legal pages: long, numbered, read on phones. Tables scroll inside
   themselves so a wide one never pushes the page sideways. */
.prose h3 { margin-top: 1.4rem; font-size: 1.05rem; }
.prose ol { color: var(--ink-mid); }
.prose li + li { margin-top: .35rem; }
.prose code { font-size: .9em; background: var(--surface-2); border-radius: 6px; padding: .1em .35em; }
.legal h2 { scroll-margin-top: 90px; }
.legal-summary { background: var(--surface-2); border-radius: var(--radius); padding: 1rem 1.2rem; }
.legal-toc { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.4rem 0; }
.legal-toc ol { margin: .5rem 0 0; columns: 2 16rem; column-gap: 2rem; }
.legal-toc li { break-inside: avoid; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
.prose th { color: var(--ink); background: var(--surface-2); font-weight: 600; }
.prose td { color: var(--ink-mid); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 34rem; }
.draft { background: var(--warn-wash); color: var(--warn); border-radius: var(--radius); padding: .9rem 1.1rem; font-size: .9rem; }

.code {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  padding: .9rem 1rem; overflow-x: auto;
  font: 400 .84rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
}

.contact-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --- Footer -------------------------------------------------------------- */
.site-foot { background: var(--bg-tint); border-top: 1px solid var(--line); padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0 2rem; margin-top: 0; }
.foot__grid { display: grid; gap: 2rem; grid-template-columns: minmax(220px, 1.3fr) repeat(auto-fit, minmax(140px, 1fr)); }
.foot__col h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .8rem; }
.foot__col a { display: block; color: var(--ink-mid); font-size: .9rem; padding: .22rem 0; }
.foot__col a:hover { color: var(--brand-deep); }
.foot__brand img { width: 190px; margin-bottom: .7rem; }

.socials { display: flex; gap: .5rem; margin-top: 1rem; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-mid);
}
.socials a:hover { color: var(--brand-deep); border-color: var(--brand); }
.socials svg { width: 17px; height: 17px; }

.foot__note { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.2rem; color: var(--ink-soft); font-size: .8rem; }
.foot__note p { margin: 0 0 .5rem; }

/* --- Scroll reveal -------------------------------------------------------
   The page is fully readable with JavaScript off: `.reveal` only becomes
   invisible once the script has said it is in charge, by setting `js` on the
   root. Nothing is ever parked at opacity 0 waiting for an observer that may
   never run. */
:root.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
:root.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  :root.js .reveal { opacity: 1; transform: none; transition: none; }
  .float-card .bars i { animation: none; height: 12px; }
  .btn:hover, .card--raised:hover { transform: none; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed; inset: var(--head-h) 0 0 auto;
    width: min(380px, 88vw);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    overflow-y: auto;
    transform: translateX(100%);
    /* `visibility` as well as the transform: a drawer parked off-screen is
       still focusable, so tabbing from the page walks into an invisible menu.
       Delayed on the way out so the slide is still seen. */
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
    margin-left: 0;
  }
  .nav[data-open="true"] { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }

  .nav__item { border-bottom: 1px solid var(--line-soft); }
  .nav__link { width: 100%; justify-content: space-between; padding: .85rem .4rem; font-size: 1rem; }

  /* On a phone the panel is an accordion in the flow, not an overlay. */
  .mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    display: none;
  }
  .nav__item[data-open="true"] > .mega { display: block; }
  .nav__item:hover > .mega, .nav__item:focus-within > .mega { display: none; }
  .nav__item[data-open="true"]:hover > .mega { display: block; }

  .mega__inner, .mega__inner--feature,
  .mega__inner--feature:has(.mega__col--wide) { grid-template-columns: 1fr; padding: 0 0 1rem; gap: 1rem; }
  .mega__col--wide { grid-column: auto; }
  .mega__list--split { grid-template-columns: 1fr; }
  .mega__feature { display: none; }

  .nav__actions { margin: 1rem 0 0; flex-direction: column; align-items: stretch; }
  .nav__actions .btn { justify-content: center; }

  .showcase--flip > :first-child { order: 0; }
}

@media (max-width: 560px) {
  .channel-strip { gap: .8rem 1.2rem; }
  .channel-strip li { width: 72px; }
  .cta-band { text-align: center; }
  .cta-band__actions { justify-content: center; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-head, .site-foot, .hero .blob, .dot-grid, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
}