/* Front door for ai.flowstudio.app.
   Palette matches web/widget/styles.css exactly — teal is the FlowStudio AI lane
   (flowstudio.app: "MCP is your agent, AI is ours. There is no third brand colour").
   Match by HEX, never by token name: the two sibling sites use these same values
   under swapped names. */
:root {
  --fs-navy: #0a1422;
  --fs-navy-2: #102d4a;
  --fs-ink: #1f1d41;
  --fs-teal: #1a9ba1;
  --fs-cyan: #37c6d0;
  /* Canonical solid plum. Was #8e3f8e here, which is the gradient's mid-stop, not
     the brand's secondary — mcp.flowstudio.app uses #752876 in eight places. */
  --fs-plum: #752876;
  --fs-plum-2: #8e3f8e;
  --fs-plum-light: #d4a8d6;
  --fs-plum-tint: #f2def4;
  --fs-coral: #e87272;
  --fs-paper: #f7f9fb;
  --fs-line: #e2e7ee;
  --fs-muted: #5a6675;
  --fs-teal-tint: #e7f7f8;
  --fs-ribbon: linear-gradient(95deg, #d4a8d6, #8e3f8e 35%, #1a9ba1 65%, #37c6d0);
  /* Same recipe, legible ends. The full ribbon starts at #d4a8d6 and finishes at
     #37c6d0, which measure 2.02:1 and 2.07:1 on white — both fail even the 3:1 bar
     for large text. Painting headline text needs the solid stops: #752876 is 9.04:1
     and #1a9ba1 is 3.36:1, so a large bold headline clears the bar across the run. */
  --fs-ribbon-text: linear-gradient(95deg, #752876, #1a9ba1);
  --fs-btn: linear-gradient(135deg, #1a9ba1, #37c6d0);

  --col: 40rem;      /* prose measure */
  --col-wide: 66rem; /* hero, card grids */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.62 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--fs-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* ── Full-bleed bands ──────────────────────────────────────────────
   The page used to be one 640px column on a single flat background, which
   left ~55% of a 1440px viewport as bare paper. Both sibling sites solve
   this by alternating full-width colour bands; the prose column inside
   stays the same width, so this costs no content. */
.band { padding: clamp(2.6rem, 6vw, 4.4rem) 1.5rem; }
.band > .inner { max-width: var(--col); margin-inline: auto; }
.band > .inner.wide { max-width: var(--col-wide); }
.band--paper { background: var(--fs-paper); }
.band--white { background: #fff; }
/* Holds its tint to the bottom edge. It used to resolve to #fff before its own edge,
   so the seam into the next white band was the one transition on the page with no
   visible boundary. */
.band--tint  { background: linear-gradient(180deg, var(--fs-teal-tint), #f2fbfc); }

/* ── Header ─────────────────────────────────────────────────────── */
.top {
  border-top: 3px solid transparent;
  border-image: var(--fs-ribbon) 1;
  background: #fff;
  border-bottom: 1px solid var(--fs-line);
}
.top-inner {
  max-width: var(--col-wide);
  margin-inline: auto;
  padding: 14px 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mark { width: 26px; height: 26px; }
.wordmark { font-weight: 700; letter-spacing: -0.01em; }
.top-spacer { flex: 1; }
.signin { color: var(--fs-ink); text-decoration: none; font-weight: 600; font-size: .94rem; }
.signin:hover { text-decoration: underline; }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.4rem); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1fr 1fr; } }

.eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fs-plum);
  background: var(--fs-plum-tint);
  border-radius: 999px;
  padding: .3rem .75rem;
  margin: 0 0 1.1rem;
}

h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.033em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
/* The brand's signature gradient, used the way flowstudio.app uses it — painting
   the headline — rather than as a 3px underline nobody notices. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  h1 .paint {
    background: var(--fs-ribbon-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.lede { font-size: 1.09rem; color: var(--fs-muted); margin: 1.1rem 0 1.7rem; max-width: 34rem; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 9px;
  font-weight: 650;
  text-decoration: none;
  border: 2px solid transparent;
  font-size: 1rem;
}
/* Ink, not white. White measures 2.07:1 on the gradient's cyan end and 3.36:1 on
   solid teal, against a 4.5:1 bar; ink clears both (4.77:1 teal, 7.75:1 cyan).
   The colours themselves are untouched (Catherine, 2026-08-02). */
.btn.primary { background: var(--fs-btn); color: var(--fs-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.quiet { border-color: var(--fs-teal); color: var(--fs-ink); }
.btn.quiet:hover { background: var(--fs-teal); color: var(--fs-ink); }
.btn:focus-visible { outline: 3px solid var(--fs-plum); outline-offset: 3px; }

.trust { margin: 1.3rem 0 0; font-size: .9rem; color: var(--fs-muted); max-width: 32rem; }

/* ── The exchange: what the product actually does ───────────────── */
.demo {
  background: var(--fs-navy);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 18px 40px -22px rgba(10, 20, 34, .6);
  font-size: .93rem;
  line-height: 1.55;
}
.demo-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .9rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.demo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fs-coral); flex: none; }
.demo-run { color: #9fb0c4; font-size: .78rem; letter-spacing: .01em; }
.demo-run b { color: #e6ecf4; font-weight: 600; }

.turn { display: grid; grid-template-columns: auto 1fr; gap: .55rem .7rem; margin-bottom: .9rem; }
.turn:last-child { margin-bottom: 0; }
.who {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .17rem .45rem;
  border-radius: 4px;
  align-self: start;
  white-space: nowrap;
}
.who.you { background: var(--fs-plum); color: #fff; }
.who.bot { background: var(--fs-btn); color: var(--fs-navy); }
/* Every paragraph sits in the text column. Without this the second one lands in the
   badge's cell on the next row and stretches it the full column width. */
.turn p { margin: 0; color: #dce4ee; grid-column: 2; }
/* Action names and expressions — the level of detail that is the whole point. */
.turn p em {
  color: #7fe3ea;
  font-style: normal;
  font-family: "Cascadia Code", Consolas, ui-monospace, monospace;
  font-size: .88em;
}
/* The platform's own error text, quoted rather than paraphrased. */
.turn p q { color: #f0b8b4; font-style: italic; quotes: "\201C" "\201D"; }
/* The judgement call a run history cannot make for you: is this flaky, or is it my bug? */
.turn p.verdict {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #9fe8ec;
  font-weight: 600;
}
/* The approval card, mirroring the real one in web/widget/app.js showOfferButtons():
   teal-tint bubble, the offer as a question, "Yes, go ahead" / "Not now". This is the
   product's actual consent gate — nothing is changed until the button is clicked — so
   the hero shows it rather than implying the agent acts on its own. Not interactive
   here: it is a picture of the product, so these are spans, not buttons. */
.offer {
  background: var(--fs-teal-tint);
  border: 1px solid #bfe3e6;
  border-radius: 10px;
  padding: .8rem .9rem;
  margin-top: .2rem;
}
.offer p { margin: 0 0 .65rem; color: var(--fs-ink); font-weight: 600; font-size: .92rem; }
.offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Deliberately NOT a control. These are a picture of the product's approval card, and
   they sat pixel-identical to the page's real buttons with no signal that they are
   inert — so a visitor would try to click them and get nothing. Slightly smaller, no
   pointer, and not focusable, so they read as part of the illustration. */
.ob {
  font-size: .78rem;
  font-weight: 650;
  padding: .34rem .72rem;
  border-radius: 6px;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.ob.yes { background: var(--fs-btn); color: var(--fs-ink); }
.ob.no { background: #fff; border: 1px solid #bfe3e6; color: var(--fs-ink); }

.demo-note { margin: .95rem 0 0; font-size: .74rem; color: #7d8ea3; }

/* ── Section headings ───────────────────────────────────────────── */
h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 0 0 1.3rem;
  text-wrap: balance;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
/* Keeps a readable measure inside a wide band — the band is full width so the
   section's left edge lines up with every other heading down the page, but the
   line length stays short enough to read. */
.prose { max-width: 44rem; color: var(--fs-muted); }
a { color: var(--fs-teal); }

/* ── What it does: three cards ──────────────────────────────────── */
.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: #fff;
  border: 1px solid var(--fs-line);
  border-radius: 11px;
  padding: 1.15rem 1.2rem;
}
.card h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.008em; }
.card p { font-size: .94rem; color: var(--fs-muted); }
.card .rule { display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--fs-btn); margin-bottom: .8rem; }

/* ── Two ways to connect: a real pair, numbered ─────────────────── */
.ways { display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: way; }
@media (min-width: 760px) { .ways { grid-template-columns: repeat(2, 1fr); } }
.way {
  counter-increment: way;
  background: #fff;
  border: 1px solid var(--fs-line);
  border-radius: 11px;
  padding: 1.15rem 1.2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 .8rem;
}
.way::before {
  content: counter(way);
  font-size: .82rem;
  font-weight: 700;
  color: var(--fs-teal);
  background: var(--fs-teal-tint);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  grid-row: span 2;
}
.way h3 { margin: .1rem 0 .3rem; font-size: 1rem; font-weight: 700; }
.way p { font-size: .94rem; color: var(--fs-muted); }

/* ── Price ──────────────────────────────────────────────────────── */
.price-card {
  background: #fff;
  border: 1px solid var(--fs-line);
  border-radius: 14px;
  padding: 1.9rem 1.6rem;
  box-shadow: 0 12px 30px -24px rgba(31, 29, 65, .5);
  text-align: center;
  /* Wider than the prose column. At 640px inside a 1440px viewport this band still
     read as 55% bare flank — the same emptiness the bands were meant to fix, just
     tinted. Centred, but not narrow. */
  max-width: 46rem;
  margin-inline: auto;
}
/* Styled as the big number it is, but it IS the section's heading. */
.price-num {
  font-size: clamp(2.4rem, 6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
}
.price-num span { font-size: 1rem; font-weight: 600; color: var(--fs-muted); letter-spacing: 0; }
.price-card .sub { margin: .7rem auto 1.3rem; color: var(--fs-muted); font-size: .96rem; max-width: 30rem; }
.price-card .btn { margin: 0 auto; }

/* ── Footer ─────────────────────────────────────────────────────── */
footer { background: var(--fs-navy); color: #b9c6d6; padding: 2.6rem 1.5rem; }
.foot-inner { max-width: var(--col-wide); margin-inline: auto; display: grid; gap: 1.1rem; }
.foot-brand { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; }
.foot-links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: .92rem; }
.foot-links a { color: #cfdae7; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
footer .legal { margin: 0; font-size: .82rem; color: #7d8ea3; max-width: 44rem; }
footer a:focus-visible, .signin:focus-visible { outline: 2px solid var(--fs-cyan); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 560px) {
  /* Stack the speaker badge above its text. Side by side, the reply column narrowed
     from 385px to 227px and the paragraph grew ~74% taller from wrapping alone,
     pushing the demo card to three-quarters of the screen height. */
  .turn { grid-template-columns: 1fr; gap: .3rem; }
  .turn p { grid-column: 1; }
  .who { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}