/* Inflo AI demo — ai.inflopartners.com
   Inflo-dark page (same palette as inflopartners.com, which is what the white
   wordmark needs) wrapped around a real-proportion iPhone whose SCREEN is
   white. The phone chrome (frame radii, dynamic island, status bar, bubble
   sizing, composer) is lifted from the dmset.ai landing page so the two
   products look like they came from the same shop. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Page chrome: Inflo dark, same as inflopartners.com. The phone screen
     stays white, which is what makes it pop off the page. */
  --bg:          #07070a;
  --bg-soft:     #0d0d12;
  --ink:         #f5f5f7;
  --ink-soft:    #9ca3af;
  --ink-mute:    #6b7280;
  --line:        #ececec;      /* inside the phone only */
  --line-soft:   rgba(255,255,255,0.07);

  --accent:      #a855f7;
  --accent-deep: #6b21a8;
  --accent-lift: #a855f7;
  --accent-bg:   rgba(168, 85, 247, 0.12);
  --accent-line: rgba(168, 85, 247, 0.32);

  --green:       #10b981;

  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 20px 24px 64px; }

/* ── Top bar ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}
.brand { display: block; text-decoration: none; line-height: 0; }
.brand img { height: 34px; width: auto; display: block; }
.topbar-link {
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
  border: 1px solid rgba(255,255,255,0.12); padding: 9px 18px; border-radius: 999px;
  transition: border-color .2s, background .2s; white-space: nowrap;
}
.topbar-link:hover { border-color: var(--accent-line); background: var(--accent-bg); }

/* ── Shared bits ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-bg);
  border: 1px solid var(--accent-line); padding: 7px 14px; border-radius: 999px;
  margin-bottom: 22px;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08; letter-spacing: -0.033em;
  font-weight: 500; color: var(--ink); margin-bottom: 18px;
}
h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent-lift), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lede { font-size: 1.05rem; line-height: 1.65; max-width: 32rem; }

.btn {
  display: inline-block; border: none; cursor: pointer; font-family: var(--font);
  background: linear-gradient(135deg, var(--accent-lift), var(--accent-deep));
  color: #fff; text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 15px 30px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(107,33,168,.22);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(107,33,168,.3); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Stage 1: the builder form ── */
.stage { display: none; }
.stage.on { display: block; animation: fade .4s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.builder { max-width: 620px; margin: 0 auto; text-align: center; }
.builder h1 { text-align: center; }
.builder .lede { margin: 0 auto 38px; }

.progress {
  height: 4px; background: rgba(255,255,255,0.08); border-radius: 999px;
  overflow: hidden; margin-bottom: 26px;
}
.progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-lift), var(--accent-deep));
  border-radius: 999px; transition: width .35s var(--ease);
}

.step-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.back {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; background: var(--bg-soft);
  color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; font-family: var(--font);
  transition: border-color .2s, background .2s;
}
.back:hover { border-color: var(--accent-line); background: var(--accent-bg); }
.back[hidden] { visibility: hidden; }
.step-count { font-size: 13px; color: var(--ink-mute); font-weight: 500; }

.q { font-size: 1.45rem; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 6px; text-align: left; }
.q-note { font-size: 14px; color: var(--ink-mute); margin-bottom: 20px; text-align: left; }

.opts { display: grid; gap: 10px; text-align: left; }
.opt {
  width: 100%; text-align: left; font-family: var(--font); font-size: 15px;
  color: var(--ink); background: var(--bg-soft); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 13px; padding: 15px 18px; cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s var(--ease);
}
.opt:hover { border-color: var(--accent-line); background: var(--accent-bg); transform: translateY(-1px); }
.opt.sel { border-color: var(--accent); background: var(--accent-bg); font-weight: 500; }

.text-in {
  width: 100%; font-family: var(--font); font-size: 16px; color: var(--ink);
  background: var(--bg-soft); border: 1px solid rgba(255,255,255,0.09); border-radius: 13px;
  padding: 16px 18px; outline: none; transition: border-color .16s;
}
.text-in:focus { border-color: var(--accent); }
.text-in::placeholder { color: #5a5a6a; }
.step-cta { margin-top: 18px; display: flex; justify-content: flex-start; }

.builder-foot { margin-top: 30px; font-size: 13px; color: var(--ink-mute); }

/* ── Stage 2: chat ──
   Desktop: headline and body stack in the left column, phone spans both rows
   on the right. Mobile: headline, then phone, then body. Grid areas do the
   reordering, so the markup stays in one sensible source order. */
.layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 394px;
  grid-template-rows: max-content 1fr;
  grid-template-areas:
    "head  phone"
    "body  phone";
  column-gap: 64px;
  row-gap: 0;
  align-items: start;
}
.col-head  { grid-area: head; }
.col-body  { grid-area: body; }
.phone-col { grid-area: phone; }
/* Pull the phone up so its top edge lines up with the eyebrow rather than
   leaving a band of dead space above the fold. */
.phone-col { align-self: start; }
.col-head h1 { margin-bottom: 22px; }
.points { list-style: none; margin: 22px 0 28px; }
.points li {
  position: relative; padding-left: 28px; margin-bottom: 12px;
  font-size: .97rem; color: var(--ink-soft); max-width: 30rem;
}
.points li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--accent-lift); background: var(--accent-bg);
}
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cta-note { font-size: 13.5px; color: var(--ink-mute); }
.restart {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── iPhone ── */
.phone-col { display: flex; flex-direction: column; align-items: center; }
.phone-outer {
  width: 370px; padding: 12px; background: #0a0a0a; border-radius: 62px;
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 90px rgba(107,33,168,.22),
              inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone-frame { width: 100%; background: #fff; border-radius: 46px; overflow: hidden; position: relative; }
.dynamic-island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 30px; background: #0a0a0a; border-radius: 22px; z-index: 10;
}
.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 30px 8px; font-size: 14px; font-weight: 600;
  color: #0a0a0a; letter-spacing: -0.01em; background: #fff;
}
/* Scoped per element, not a blanket rule. A blanket `svg rect { fill }` beats
   the battery outline's fill="none" attribute and paints it a solid block. */
.sb-icons { display: inline-flex; align-items: center; gap: 6px; color: #0a0a0a; }
.sb-icons svg { display: block; fill: currentColor; }
.sb-batt .batt-shell { fill: none; stroke: currentColor; stroke-opacity: .35; stroke-width: 1.2; }
.sb-batt .batt-cap { opacity: .4; }

.chat-head {
  background: #fff; padding: 10px 14px 10px 10px; display: flex;
  align-items: center; gap: 10px; border-bottom: 1px solid var(--line);
}
.head-back { width: 22px; height: 22px; flex-shrink: 0; color: #0a0a0a; }
.head-back svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.head-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-lift), var(--accent-deep));
  color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 600; letter-spacing: -0.02em;
}
.head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.head-name {
  font-size: 14.5px; font-weight: 600; color: #0a0a0a; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.head-status { font-size: 11.5px; color: #8a8a8a; font-weight: 400; margin-top: 2px; }
.head-icons { display: inline-flex; align-items: center; gap: 16px; color: #0a0a0a; }
.head-icons svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.thread {
  height: 430px; overflow-y: auto; background: #fff;
  padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 3px;
  scrollbar-width: thin; scrollbar-color: #dcdce2 transparent;
}
.thread::-webkit-scrollbar { width: 5px; }
.thread::-webkit-scrollbar-thumb { background: #dcdce2; border-radius: 3px; }

.pair { display: flex; align-items: flex-end; gap: 7px; animation: msg-in .3s var(--ease) both; }
.pair-them { justify-content: flex-start; }
.pair-me { justify-content: flex-end; }
.pair-them + .pair-me, .pair-me + .pair-them { margin-top: 8px; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.msg-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; align-self: flex-end;
  background: linear-gradient(135deg, var(--accent-lift), var(--accent-deep));
  color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600;
}

.msg {
  max-width: 72%; padding: 9px 14px; border-radius: 22px;
  font-size: 14px; font-weight: 400; line-height: 1.38; letter-spacing: -0.005em;
  word-wrap: break-word;
}
.msg-them { background: #efefef; color: #0a0a0a; border-bottom-left-radius: 6px; }
.msg-me {
  background: linear-gradient(135deg, var(--accent-lift) 0%, var(--accent-deep) 100%);
  color: #fff; border-bottom-right-radius: 6px;
}
.booking-pill {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
  padding: 9px 12px; border-radius: 11px; background: #fff;
  border: 1px solid #e0e0e6; font-size: 12.5px; color: #0a0a0a; font-weight: 500;
}

.msg-typing {
  display: inline-flex; align-items: center; gap: 4px; padding: 11px 14px;
  border-radius: 20px; background: #efefef; line-height: 1;
}
.msg-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9a9a9a; animation: bounce 1.2s ease-in-out infinite; }
.msg-typing span:nth-child(2) { animation-delay: .15s; }
.msg-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.starters { display: flex; gap: 6px; padding: 8px 12px 2px; flex-wrap: wrap; background: #fff; }
.chip {
  background: rgba(107,33,168,0.07); border: 1px solid rgba(107,33,168,0.22);
  color: var(--accent-deep); font-family: var(--font); font-size: 12.5px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  transition: background .16s, color .16s;
}
.chip:hover { background: var(--accent); color: #fff; }

.composer {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 12px; background: #fff; border-top: 1px solid var(--line);
}
.composer input {
  flex: 1; min-width: 0; background: #f3f3f3; border: 1px solid var(--line);
  border-radius: 22px; padding: 9px 15px; color: #0a0a0a;
  font-family: var(--font); font-size: 14px; outline: none; transition: border-color .16s;
}
.composer input:focus { border-color: rgba(107,33,168,0.35); }
.composer input::placeholder { color: #8a8a8a; }
.send {
  width: 34px; height: 34px; flex-shrink: 0; border: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-lift), var(--accent-deep));
  color: #fff; font-size: 15px; cursor: pointer; display: grid; place-items: center;
  transition: opacity .16s, transform .16s;
}
.send:hover:not(:disabled) { transform: scale(1.06); }
.send:disabled { opacity: .35; cursor: not-allowed; }

.capped { padding: 14px 16px 18px; text-align: center; background: #fff; }
.capped p { font-size: 13px; color: #8a8a8a; margin-bottom: 11px; }
.capped .btn { padding: 12px 24px; font-size: 14px; }

.home-bar { height: 24px; display: flex; align-items: center; justify-content: center; background: #fff; }
.home-ind { width: 130px; height: 4px; border-radius: 2px; background: #0a0a0a; }

.err {
  margin: 6px 14px; padding: 9px 12px; border-radius: 10px;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  font-size: 12.5px; display: none;
}
.err.show { display: block; }

.phone-cap { margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--ink-mute); max-width: 340px; line-height: 1.5; }

.booked-note {
  margin-top: 16px; padding: 15px 17px; border-radius: 14px;
  background: var(--accent-bg); border: 1px solid var(--accent-line);
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
  max-width: 370px; display: none;
}
.booked-note.show { display: block; animation: fade .3s var(--ease) both; }
.booked-note b { color: var(--ink); font-weight: 600; }

footer {
  margin-top: 72px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  text-align: right; font-size: 12.5px; color: var(--ink-mute);
}
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--accent); }

/* ── Responsive ── */
@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "head" "phone" "body";
    column-gap: 0; row-gap: 28px;
    align-items: stretch;
  }
  h1 { font-size: clamp(1.8rem, 6.6vw, 2.4rem); }
  .lede, .points li { max-width: none; }
  .col-head { text-align: left; }
  .col-head h1 { margin-bottom: 0; }
  .eyebrow { margin-bottom: 16px; }
  /* Keep the whole eyebrow on one line rather than wrapping the industry. */
  .eyebrow { font-size: 11px; letter-spacing: .07em; padding: 6px 12px; }
  .wrap { padding-top: 16px; }
  .topbar { margin-bottom: 22px; }
  .topbar-link { font-size: 13px; padding: 8px 14px; }
  .brand img { height: 28px; }
}
@media (max-width: 430px) {
  .wrap { padding: 18px 14px 56px; }
  .phone-outer { width: 100%; max-width: 370px; padding: 10px; border-radius: 52px; }
  .phone-frame { border-radius: 40px; }
  .thread { height: 360px; }
  .btn { width: 100%; text-align: center; }
  .step-cta { justify-content: stretch; }
  footer { text-align: center; }
}