/* =========================================================================
   sauna-ftue — first-time user experience prototype.
   Matches sauna.ai's home (background, type, palette) then reveals an
   onboarding flow on click. Pure prototype: fake data, no backend.
   ========================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss03';
  font-size: 16px;
  color: #171814;
  background: #fafaf9;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, textarea { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------- background */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 1.2s ease;
}
.scene .scene-img {
  position: absolute;
  inset: 0;
  background-image: url('https://www.sauna.ai/sauna-background-apr.png');
  background-size: cover;
  background-position: 50% 78%;
  background-repeat: no-repeat;
  transition: filter 1.6s cubic-bezier(.22,.8,.2,1), transform 18s ease-out;
  transform: scale(1.02);
  filter: saturate(1.08);
}
.scene .scene-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.06) 100%);
  transition: opacity 1.4s ease;
}
.scene .scene-fade {
  position: absolute; inset: 0;
  background: #fafaf9;
  opacity: 0;
  transition: opacity 1.4s ease;
}
/* chat mode: blur the photo and fade to off-white */
.scene[data-mode="chat"] .scene-img { filter: blur(40px) saturate(0.85) brightness(1.04); transform: scale(1.10); }
.scene[data-mode="chat"] .scene-tint { opacity: 0; }
.scene[data-mode="chat"] .scene-fade { opacity: 0.86; }

/* ------------------------------------------------------------- topbar */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px;
  gap: 24px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
  transition: color .8s ease, filter .8s ease;
  height: 22px;
}
.brand-mark {
  width: 77px; height: 22px;
  display: block;
}
body.is-chat .brand { color: #171814; filter: none; }

.pillnav {
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  border-radius: 999px;
  padding: 6px;
  gap: 2px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
.pill {
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  border-radius: 999px;
  letter-spacing: -0.005em;
  transition: background .25s ease, color .25s ease;
}
.pill:hover { color: #fff; }
.pill.is-active {
  background: #fff;
  color: #171814;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
body.is-chat .pillnav,
body.is-chat .login { display: none; }

.auth { justify-self: end; display: flex; align-items: center; gap: 14px; }
.login {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  padding: 8px 14px;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: opacity .2s ease;
}
.login:hover { opacity: .85; }
body.is-chat .login { color: #171814; text-shadow: none; }

.signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  background: #93efa4;
  color: #003116;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  letter-spacing: -0.005em;
  transition: opacity .2s ease, transform .2s ease;
}
.signup:hover { opacity: 0.92; transform: translateY(-0.5px); }

/* ------------------------------------------------------------- stage */
.stage {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px 40px;
  width: 100%;
}
.stage > .view {
  margin-inline: auto;
}

/* ------------------------------------------------------------- view: home */
.view-home {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  animation: rise .9s cubic-bezier(.22,.8,.2,1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hero {
  margin: 0;
  font-size: clamp(32px, 5.6vw, 50px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  max-width: 620px;
  text-wrap: balance;
}
.hero-br { display: none; }
.sub {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #d1cecc;
  max-width: 720px;
  text-wrap: balance;
}

/* "Hire an Agent" — primary CTA in Sauna mint */
.hire {
  width: auto;
  max-width: 520px;
  background: #93efa4;
  border-radius: 999px;
  padding: 8px 8px 8px 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 1.4px 5.6px rgba(0,0,0,0.12),
    0 14px 50px rgba(0,80,30,0.22);
  transition: transform .25s cubic-bezier(.22,.8,.2,1), box-shadow .25s ease, background .25s ease;
  cursor: pointer;
  border: 0;
  position: relative;
}
.hire::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 50%);
  pointer-events: none;
  opacity: 0.55;
}
.hire:hover {
  transform: translateY(-2px);
  background: #a5f3b3;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 1.4px 5.6px rgba(0,0,0,0.14),
    0 22px 64px rgba(0,80,30,0.30);
}
.hire:active {
  transform: translateY(0);
  transition-duration: .08s;
}
.hire-text {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #003116;
  text-align: center;
  padding: 4px 0;
}
.hire-send {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: #003116;
  color: #93efa4;
  flex: none;
  transition: transform .2s cubic-bezier(.22,.8,.2,1);
}
.hire-send svg { width: 18px; height: 18px; }
.hire:hover .hire-send { transform: translateY(-2px) rotate(8deg); }

/* ------------------------------------------------------------- view: chat */
.view-chat {
  width: 100%;
  max-width: 720px;
  position: relative;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  /* Centre the chat content vertically inside the stretched column. */
  justify-content: center;
  animation: rise .9s cubic-bezier(.22,.8,.2,1) both;
  align-self: stretch;
}
.chat-panel {
  position: relative;
  width: 100%;
  /* No card chrome on any viewport — the chat just floats in empty
     space against the page background, same shape as mobile.
     No flex: 1 either, so on desktop the panel takes its natural
     content height and the parent .view-chat (justify-content: center)
     can vertically centre it. Mobile re-asserts flex: 1 in its block
     for full-height behaviour. */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.chat {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Reserve more than the final composed height so the CTA appearing
     never grows the chat box. Pill (~70) + skip (~30) + 16 gap +
     ascii (320) + msg text (~60) + 22 ascii top margin ≈ 520 — set
     620 for a comfortable buffer that absorbs font reflows. */
  min-height: 620px;
  position: relative;
  flex: 1;
  will-change: transform;
}

/* iOS-style user bubble */
.user-bubble-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.user-bubble {
  background: linear-gradient(180deg, #2f96e6 0%, #1c7cce 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.008em;
  padding: 10px 16px;
  border-radius: 22px 22px 6px 22px;
  max-width: 80%;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 6px 18px rgba(40,90,160,0.20),
    0 1px 3px rgba(40,90,160,0.18);
  animation: bubblePop 0.55s cubic-bezier(.34,1.56,.64,1) both;
  transform-origin: 100% 100%;
}
@keyframes bubblePop {
  0%   { opacity: 0; transform: scale(0.5) translateY(6px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(0); }
  78%  {              transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

/* CTA — sits just below the scene with breathing room */
.chat-cta {
  margin-top: 18px;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.chat-cta-pill {
  position: relative;
  padding: 28px 56px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.014em;
  border-radius: 999px;
  min-width: 320px;
  opacity: 0;
  transform: scale(0);
  transform-origin: 50% 50%;
  transition: background .25s ease;
}
.chat-cta-pill.is-popping {
  animation: stickerLand 0.5s cubic-bezier(.22, .9, .28, 1) both;
}
@keyframes stickerLand {
  0% {
    opacity: 0;
    transform: scale(1.22) translateY(-4px);
    filter: blur(2px);
  }
  55% {
    opacity: 1;
    transform: scale(0.97) translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}
.chat-cta-pill::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0);
  pointer-events: none;
  opacity: 0;
}
.chat-cta-pill.is-popping::after {
  animation: stickerRing 0.7s cubic-bezier(.2, .7, .25, 1) both;
}
@keyframes stickerRing {
  0%   { opacity: 0; transform: scale(0.92); border-color: rgba(255, 255, 255, 0); }
  30%  { opacity: 1; transform: scale(1);    border-color: rgba(255, 255, 255, 0.65); }
  100% { opacity: 0; transform: scale(1.30); border-color: rgba(255, 255, 255, 0); }
}
.chat-cta-skip {
  background: none;
  color: rgba(106, 104, 98, 0.7);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 2.4s cubic-bezier(.22,.8,.2,1), transform 2.4s cubic-bezier(.22,.8,.2,1), color .2s ease;
}
.chat-cta-skip::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 1px;
  background: currentColor;
  opacity: 0.35;
}
.chat-cta-skip:hover { color: #171814; }
.chat-cta .is-veiled {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* ASCII scene — full-bleed across the chat panel, no rounded corners */
.ascii-scene {
  /* Bleed left to clear the avatar column so the scene reads as one
     continuous strip behind the message text. Right side flush. */
  margin: 22px 0 4px -54px;
  display: block;
  width: calc(100% + 54px);
  box-sizing: border-box;
  height: 320px;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: transparent;
}
.ascii-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}
/* CRT power-off: a thin glowing line appears across the middle of the
   wrap as the canvas vertically collapses, brightens briefly, then
   shrinks horizontally to a dot and fades out. */
.crt-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 12%, rgba(255,255,255,1) 88%, rgba(255,255,255,0) 100%);
  box-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 0 14px rgba(220,235,255,0.85),
    0 0 36px rgba(180,210,255,0.55);
  opacity: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
  z-index: 2;
}

.msg {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  animation: msg-in .55s cubic-bezier(.22,.8,.2,1) both;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.agent-avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(40,60,30,.18), 0 1px 2px rgba(40,60,30,.10);
  position: relative;
  cursor: pointer;        /* tap to skip to image */
}
.agent-avatar::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset;
}
.agent-avatar img,
.agent-avatar svg { width: 100%; height: 100%; display: block; }
.msg.is-pulsing .agent-avatar { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(40,60,30,.18), 0 0 0 0 rgba(147,239,164,0.0); }
  50%      { box-shadow: 0 6px 20px rgba(40,60,30,.18), 0 0 0 8px rgba(147,239,164,0.20); }
}

.msg-body { padding-top: 4px; }
.msg-meta {
  display: flex; align-items: baseline; gap: 8px;
  color: #6a6862;
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.msg-from { color: #171814; font-weight: 600; }
.msg-dot { opacity: 0.6; }
.msg-text {
  font-size: 27px;
  line-height: 1.38;
  color: #171814;
  letter-spacing: -0.016em;
  font-weight: 500;
}
.msg-text .typing-cursor {
  display: inline-block;
  width: 2px; height: 1.25em;
  background: #2a8ad0;
  vertical-align: -0.24em;
  margin-left: 2px;
  border-radius: 1px;
  animation: blink 0.85s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.msg-text .para-break {
  display: block;
  height: 0.55em;
}

.msg-actions {
  /* Desktop: pair-button rows lay out horizontally so Yes / No (and
     similar binary prompts) sit side by side. Mobile re-stacks via
     the existing flex-direction: column override. */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.msg-actions .choice { flex: 1; min-width: 180px; }
.msg-actions[hidden] { display: none; }
.choice {
  padding: 10px 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #171814;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.choice:hover {
  transform: translateY(-1px);
  background: #fbfbfa;
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 22px rgba(0,0,0,.08);
}
.choice.is-primary { background: #82e3a8; color: #003116; border-color: transparent; }
.choice.is-primary:hover { background: #76d99e; }
.choice.is-soft { background: rgba(255,255,255,0.7); }

.msg-trace {
  margin-top: 10px;
  font-size: 13.5px;
  color: #6a6862;
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 14px;
  border-left: 2px solid rgba(0,0,0,0.08);
  max-height: 230px;
  overflow: hidden;
  position: relative;
  letter-spacing: -0.005em;
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.msg-trace[hidden] { display: none; }
.trace-line { display: flex; align-items: center; gap: 8px; animation: trace-in .35s ease both; opacity: 0.86; }
.trace-line .glyph { color: #5b7a44; font-weight: 600; width: 12px; flex: none; }
.trace-line .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes trace-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 0.86; transform: translateX(0); } }
.trace-line.is-fading { animation: trace-out .9s ease both; }
@keyframes trace-out { to { opacity: 0; transform: translateX(8px); height: 0; padding: 0; margin: 0; } }

/* artifact */
.msg-artifact {
  margin-top: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 12px 40px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  transform-origin: 30% 30%;
  position: relative;
  overflow: hidden;
}
.msg-artifact[hidden] { display: none; }
.art-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.art-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(140deg, #93efa4, #5b7a44);
  display: grid; place-items: center;
  color: #003116;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.art-icon svg { width: 16px; height: 16px; }
.art-title { font-size: 14px; font-weight: 600; color: #171814; letter-spacing: -0.005em; }
.art-sub { font-size: 12.5px; color: #6a6862; margin-left: auto; font-weight: 500; }

/* sectioned tiles */
.art-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  transition: opacity .25s ease, transform .25s ease;
}
.art-tile {
  text-align: left;
  background: #f7f8f3;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column; gap: 4px;
  font-family: inherit;
}
.art-tile:hover {
  background: #f1f4eb;
  border-color: rgba(91,122,68,0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(40,60,30,0.06);
}
.art-tile .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b7a44;
}
.art-tile .snippet {
  font-size: 13.5px;
  line-height: 1.4;
  color: #1f2a1c;
  letter-spacing: -0.005em;
}

/* detail (slides in over tiles) */
.art-detail {
  position: absolute;
  inset: 0;
  background: #fff;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.22,.8,.2,1), transform .35s cubic-bezier(.22,.8,.2,1);
}
.art-detail.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.art-detail-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.art-back {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: #2a3a23;
  background: #f1f4eb;
  border: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: background .2s ease;
}
.art-back:hover { background: #e6ecdc; }
.art-back svg { width: 14px; height: 14px; }
.art-detail-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b7a44;
}
.art-detail-title {
  font-size: 16px;
  font-weight: 600;
  color: #171814;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.art-detail-body {
  font-size: 14px;
  line-height: 1.55;
  color: #1f2a1c;
  letter-spacing: -0.005em;
}
.art-detail-evidence {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,0.10);
  font-size: 12.5px;
  color: #6a6862;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.art-detail-evidence .pip {
  width: 6px; height: 6px; border-radius: 999px; background: #93efa4; flex: none; margin-top: 6px;
  box-shadow: 0 0 0 2px rgba(147,239,164,.35);
}

.art-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.10);
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: #6a6862;
}
.art-foot .pip {
  width: 8px; height: 8px; border-radius: 999px; background: #93efa4;
  box-shadow: 0 0 0 3px rgba(147,239,164,.35);
}

/* ------------------------------------------------------------- rails */
.rail {
  position: absolute;
  top: 60px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 220px;
  pointer-events: none;
}
.rail > * { pointer-events: auto; }
.rail-left {
  right: calc(100% + 10px);
  align-items: flex-end;
}
.rail-right {
  left: calc(100% + 10px);
  align-items: flex-start;
}

.badge {
  --bg: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px;
  background: var(--bg);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #171814;
  letter-spacing: -0.005em;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 22px rgba(0,0,0,.06);
  white-space: nowrap;
  animation: badge-in .55s cubic-bezier(.22,.8,.2,1) both;
  transform-origin: 100% 50%;
}
@keyframes badge-in {
  from { opacity: 0; transform: translateX(20px) scale(.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.badge .icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: #fff;
  background: var(--icon-bg, #5b7a44);
  flex: none;
}
.badge .icon svg { width: 13px; height: 13px; }
.badge.is-skill { --bg: #f6f7f3; }
.badge.is-skill .icon { background: #171814; }

.snippet {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #171814;
  letter-spacing: -0.005em;
  max-width: 280px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 22px rgba(0,0,0,.04);
  animation: snip-in .55s cubic-bezier(.22,.8,.2,1) both;
  transform-origin: 0% 50%;
}
@keyframes snip-in {
  from { opacity: 0; transform: translateX(-20px) scale(.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.snippet .label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b7a44;
  margin-bottom: 2px;
}

.flash {
  position: fixed;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.9) 30%, rgba(147,239,164,0.6) 60%, transparent 100%);
  pointer-events: none;
  z-index: 50;
  opacity: 0;
}

/* ------------------------------------------------------------- oauth */
.oauth { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; animation: oauth-in .35s ease both; }
.oauth[hidden] { display: none; }
@keyframes oauth-in { from { opacity: 0; } to { opacity: 1; } }
.oauth-scrim {
  position: absolute; inset: 0;
  background: rgba(20,30,18,0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.oauth-window {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 20px 80px rgba(0,0,0,0.30), 0 4px 14px rgba(0,0,0,0.16);
  animation: oauth-pop .55s cubic-bezier(.22,.8,.2,1) both;
}
@keyframes oauth-pop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.oauth-chrome { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f1f3f4; border-bottom: 1px solid rgba(0,0,0,0.06); }
.oauth-dots { display: flex; gap: 6px; }
.oauth-dots i { width: 11px; height: 11px; border-radius: 999px; background: #d6d8da; }
.oauth-dots i:nth-child(1) { background: #ed6a5e; }
.oauth-dots i:nth-child(2) { background: #f5be4f; }
.oauth-dots i:nth-child(3) { background: #62c554; }
.oauth-url { flex: 1; text-align: center; font-size: 12px; color: #5f6368; background: #fff; border-radius: 999px; padding: 4px 10px; margin-right: 36px; }
.oauth-body { padding: 28px 28px 22px; }
.oauth-google { display: flex; justify-content: center; margin-bottom: 14px; }
.oauth-title { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 400; color: #202124; text-align: center; margin: 0 0 4px; }
.oauth-sub { font-size: 14px; color: #5f6368; text-align: center; margin: 0 0 20px; }
.oauth-account {
  display: grid;
  grid-template-columns: 40px 1fr 16px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  text-align: left;
  transition: background .2s ease, border-color .2s ease;
}
.oauth-account:hover { background: #f8f9fa; border-color: #c4c7c9; }
.oauth-avatar svg { width: 40px; height: 40px; display: block; }
.oauth-name { font-size: 14px; color: #202124; font-weight: 500; }
.oauth-email { font-size: 13px; color: #5f6368; margin-top: 1px; }
.oauth-chev { color: #5f6368; }
.oauth-chev svg { width: 16px; height: 16px; }
.oauth-scopes-intro { font-size: 13px; color: #3c4043; margin: 22px 0 8px; }
.oauth-scopes { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: #3c4043; }
.oauth-scopes li { display: flex; align-items: center; gap: 10px; }
.oauth-scopes .dot { width: 6px; height: 6px; background: #5f6368; border-radius: 999px; flex: none; }
.oauth-actions { display: flex; justify-content: flex-end; gap: 8px; }
.oauth-deny, .oauth-allow { padding: 9px 18px; font-size: 14px; font-weight: 500; border-radius: 4px; transition: background .2s ease; }
.oauth-deny { color: #1a73e8; }
.oauth-deny:hover { background: rgba(26,115,232,0.06); }
.oauth-allow { background: #1a73e8; color: #fff; }
.oauth-allow:hover { background: #1967d2; }

/* ----------------------- bento stack (bento + post-bento glued together) */
/* One 200vh-tall strip translated as a single unit. From translateY(100vh)
   (offscreen below) → 0 (bento visible, placeholder below viewport) →
   -100vh (bento offscreen above, placeholder visible). The two screens
   share a moving frame so the transition feels like a single scroll. */
.bento-stack {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  /* Height/translation use JS-measured --vh (window.innerHeight) instead
     of CSS vh, which on iOS Safari etc. doesn't match the actual visible
     viewport once the URL bar/keyboard collapse. Three stages stacked:
     bento (0..vh), suggestions (vh..2vh), product (2vh..3vh). */
  height: calc(var(--vh, 100vh) * 3);
  z-index: 80;
  transform: translateY(var(--vh, 100vh));
  transition: transform 720ms cubic-bezier(.55, 0, .25, 1);
  pointer-events: none;
}
.bento-stack[hidden] { display: none; }
.bento-stack.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
/* Stage 2: suggestions. */
.bento-stack.is-scrolled-up { transform: translateY(calc(var(--vh, 100vh) * -1)); }
/* Stage 3: product. */
.bento-stack.is-on-product { transform: translateY(calc(var(--vh, 100vh) * -2)); }

/* ------------------------------------------------------------- full-screen bento (scan phase) */
.bento-loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--vh, 100vh);
  background: transparent;
  padding: 28px;
  display: grid;
  grid-template-rows: 1fr auto;
  row-gap: 18px;
  transition: transform 1000ms cubic-bezier(.4, 0, .2, 1),
              opacity 900ms ease;
  transform-origin: 50% 30%;
}
/* Parallax shrink while the stack slides off — the bento contracts
   and dims, suggestions feel like they're stepping forward. */
.bento-stack.is-scrolled-up .bento-loading {
  transform: scale(0.88);
  opacity: 0.55;
}
/* per-tile canvas — lives inside .tile-back, sized to fill the tile.
   When the tile flips, its canvas reveals its slice of one shared scene. */
.tile-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #1a3850;
}
/* ----------------------- Stage 2: suggestions */
.suggestions {
  position: absolute;
  left: 0;
  top: var(--vh, 100vh);
  width: 100%;
  height: var(--vh, 100vh);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Inner wrapper keeps content width-constrained and vertically centered,
   matching the desktop chat layout feel. */
.suggestions-inner {
  width: 100%;
  max-width: 520px;
  padding: 32px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: stretch;
}
.suggestions-else {
  align-self: center;
  margin-top: 22px;
  background: none;
  border: 0;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #6b6757;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(.22,.8,.2,1), color 160ms ease;
}
.suggestions-else.is-in {
  opacity: 1;
  transform: translateY(0);
}
.suggestions-else:hover { color: #1d1c17; }

.suggestions-intro {
  width: 100%;
  /* Match the chat screen's text width (720px) even though the cards
     row underneath can stretch wider. Centered horizontally. */
  max-width: 720px;
  margin: 0 auto;
}
/* The container is always laid out; the avatar bursts in first (from
   a small circle to full size), then the message body fades in once
   the pop has settled. */
.suggestions-intro .agent-avatar {
  opacity: 0;
  transform: scale(0.18);
  transition: opacity 220ms ease,
              transform 540ms cubic-bezier(.34, 1.65, .35, 1);
}
.suggestions-intro .msg-body {
  opacity: 0;
  transition: opacity 280ms ease;
}
.suggestions-intro.is-arriving .agent-avatar {
  opacity: 1;
  transform: scale(1);
}
.suggestions-intro.is-arriving .msg-body {
  opacity: 1;
  transition-delay: 380ms;
}
.suggestion-stage {
  position: relative;
  width: 100%;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
}
/* Drop the "Sauna" mini label above the intro on the suggestions screen
   only — the avatar already identifies the speaker; the meta line is
   redundant here. */
.suggestions-intro .msg-meta { display: none; }
/* Each card is a clickable tile — entire card is the tap target. No
   Yes/No buttons; clicking a card drills into that area of agency. */
.suggestion-card {
  position: relative;
  width: 100%;
  background: #fff;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(20, 18, 12, 0.08), 0 1px 2px rgba(20, 18, 12, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  /* Staggered fade-in driven by --enter-delay set per card. */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 420ms ease var(--enter-delay, 0ms),
    transform 480ms cubic-bezier(.22,.7,.3,1) var(--enter-delay, 0ms),
    box-shadow 200ms ease;
  will-change: transform, opacity;
}
.suggestion-card.is-in {
  opacity: 1;
  transform: translateY(0);
  /* After entrance, drop the stagger delay so hover/active feel snappy. */
  transition: opacity 420ms ease, transform 220ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms ease;
}
.suggestion-card:hover {
  box-shadow: 0 14px 36px rgba(20, 18, 12, 0.14), 0 1px 2px rgba(20, 18, 12, 0.06);
}
.suggestion-card:active { transform: translateY(1px); }

/* Pick-one transitions: non-picked cards fall back + fade out; the
   picked card lifts a touch then keeps holding until the product
   panels slide in over the top. */
.suggestion-card.is-dimmed {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 280ms ease, transform 280ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.suggestion-card.is-picked {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 22px 48px rgba(20, 18, 12, 0.18), 0 2px 4px rgba(20, 18, 12, 0.08);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(.22, .8, .2, 1), box-shadow 280ms ease;
}

/* Placeholder: same dimensions as a real card but empty and dimmed,
   so the layout is committed before the real cards pop in over them. */
.suggestion-card.is-placeholder {
  background: rgba(20, 18, 12, 0.05);
  box-shadow: none;
  pointer-events: none;
  min-height: 280px;
}

/* Real-card pop-in: bounces over its placeholder. */
.suggestion-card.is-popping {
  animation: cardPop 480ms cubic-bezier(.22, .9, .28, 1) both;
  transition: none;
}
@keyframes cardPop {
  0%   { opacity: 0; transform: scale(0.7) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.suggestion-image {
  height: 130px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
}
.suggestion-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(0,0,0,0.10), transparent 60%);
  pointer-events: none;
}
.suggestion-image-glyph {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.18));
}
.suggestion-body {
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.suggestion-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1d1c17;
}
.suggestion-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #4a463c;
}

/* ----------------------- Stage 3: product */
.product {
  position: absolute;
  left: 0;
  top: calc(var(--vh, 100vh) * 2);
  width: 100%;
  height: var(--vh, 100vh);
  background: #fbfaf6;
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1d1c17;
  overflow: hidden;
}
/* Overlay mode: when the user picks a suggestion the product lifts up
   to sit on top of the current screen (suggestions). The bento-stack
   already has a transform, which traps `position: fixed`, so we anchor
   the overlay to the suggestions screen's coordinates and let z-index
   stack it above. */
.product.is-overlay {
  z-index: 150;
  top: var(--vh, 100vh);
  left: 0;
  background: transparent;
}
@media (min-width: 769px) {
  .product.is-overlay { top: 0; left: 100%; }
}
.product.is-overlay .product-main {
  background: #fbfaf6;
  opacity: 0;
  transition: opacity 500ms ease 120ms;
}
.product.is-overlay.is-arrived .product-main { opacity: 1; }
/* Sidebar + artifacts enter from their respective edges when the user
   picks a suggestion. The main panel (chat) stays put. */
.product .product-sidebar,
.product .product-artifacts {
  transition: transform 700ms cubic-bezier(.22, .8, .2, 1), opacity 500ms ease;
  will-change: transform, opacity;
}
.product:not(.is-arrived) .product-sidebar {
  transform: translateX(-100%);
  opacity: 0;
}
.product:not(.is-arrived) .product-artifacts {
  transform: translateX(100%);
  opacity: 0;
}
.product.is-arrived .product-sidebar,
.product.is-arrived .product-artifacts {
  transform: translateX(0);
  opacity: 1;
}
@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; }
  .product .product-sidebar,
  .product .product-artifacts { display: none; }
}
.product-sidebar {
  border-right: 1px solid #e9e3d0;
  background: #f3efe2;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.product-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-weight: 600;
  font-size: 15px;
}
.product-brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #1d1c17;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.product-new-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid #d8d1bd;
  color: #1d1c17;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.product-new-btn:hover { background: rgba(0,0,0,0.04); }
.product-sessions-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a8470;
  margin-top: 6px;
  padding: 0 8px;
}
.product-sessions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.product-session {
  background: transparent;
  border: none;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1d1c17;
  font-family: inherit;
  cursor: pointer;
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-session:hover { background: rgba(0,0,0,0.05); }
.product-session.is-active {
  background: rgba(0,0,0,0.07);
  font-weight: 500;
}
.product-main {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}
.product-artifacts {
  border-left: 1px solid #e9e3d0;
  background: #f7f3e6;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.product-artifacts-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a8470;
  padding: 4px 4px 6px;
}
.product-artifacts-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-artifact-card {
  background: #fff;
  border: 1px solid #ece6d3;
  border-radius: 10px;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-artifact-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1d1c17;
  letter-spacing: -0.005em;
}
.product-artifact-meta {
  font-size: 12px;
  color: #8a8470;
}
.product-main-header {
  padding: 14px 24px;
  border-bottom: 1px solid #ece6d3;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-back {
  display: none;       /* hidden on desktop — both panes visible */
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #1d1c17;
  cursor: pointer;
  border-radius: 8px;
  margin-left: -6px;
}
.product-back:hover { background: rgba(0,0,0,0.06); }
.product-chat {
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.product-chat-empty {
  color: #8a8470;
  font-size: 14px;
  margin: auto;
}
.product-msg {
  display: flex;
  gap: 12px;
  max-width: 720px;
}
.product-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: #1d1c17;
}
.product-msg-avatar img { width: 100%; height: 100%; display: block; }
.product-msg-body { font-size: 14.5px; line-height: 1.55; color: #1d1c17; }
.product-composer {
  padding: 14px 20px 22px;
  border-top: 1px solid #ece6d3;
  display: flex;
  gap: 10px;
  align-items: center;
  background: #fbfaf6;
}
.product-composer input {
  flex: 1;
  border: 1px solid #d8d1bd;
  background: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  color: #1d1c17;
}
.product-composer input:focus { outline: none; border-color: #8a8470; }
.product-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1d1c17;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
}
.product-send:hover { background: #2a2920; }
/* On mobile the product splits into two stacked views — thread list and
   chat — only one visible at a time. Tap a session → slide to chat,
   back arrow → return to threads. Same pattern as iOS Messages /
   ChatGPT mobile. */
@media (max-width: 720px) {
  .product {
    display: block;
    position: relative;
    overflow: hidden;
  }
  .product-sidebar,
  .product-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
  }
  .product-sidebar { z-index: 1; transform: translateX(0); }
  .product-main    { z-index: 2; transform: translateX(100%); }
  .product.is-chat-view .product-sidebar { transform: translateX(-30%); }
  .product.is-chat-view .product-main    { transform: translateX(0); }
  .product-back { display: inline-flex; }
}
.post-bento-inner {
  text-align: center;
  color: #6b6757;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.post-bento-placeholder {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.bento-loading-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(7, 1fr);              /* dynamic — fill height */
  grid-template-areas:
    "log    log    log    log    log    log"
    "people people people tools  tools  tools"
    "people people people tools  tools  tools"
    "role   role   role   heat   heat   heat"
    "role   role   role   recur  recur  recur"
    "travel travel travel screen screen screen"
    "travel travel travel screen screen screen";
  gap: 12px;
  width: 100%;
  max-width: 1100px;
  height: 100%;
  /* Cap so individual cells stop stretching on tall viewports.
     ~115px per row keeps the 2-row tiles compact + readable. */
  max-height: 820px;
  /* Centre the grid in the 1fr row so the cap above doesn't leave a
     gap at the bottom on tall viewports. */
  align-self: center;
  margin: 0 auto;
  perspective: 1600px;
}

/* global progress / Done button — hidden during loading, surfaces at end */
.bento-progress {
  position: relative;
  display: none;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  height: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(0,0,0,0.045);
  overflow: hidden;
  cursor: default;
  transition: background 0.4s ease, transform 0.2s ease;
}
.bento-progress[disabled] { cursor: default; }
.bento-progress-fill { display: none; }
.bento-progress-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #003116;
  pointer-events: none;
  opacity: 0;                                 /* hidden while loading */
}

/* completed: bar surfaces as a tappable pill */
.bento-progress.is-done {
  display: block;
  height: 54px;
  background: #82e3a8;
  border-color: transparent;
  cursor: pointer;
  animation: doneEnter 0.5s cubic-bezier(.34,1.20,.42,1) both;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 8px 22px rgba(0,80,30,0.18);
}
@keyframes doneEnter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.bento-progress.is-done .bento-progress-fill { display: none; }
.bento-progress.is-done .bento-progress-label {
  opacity: 1;
  transition: opacity 0.35s ease 0.18s;       /* fade in once height has grown */
}
.bento-progress.is-done:hover { background: #76d99e; transform: translateY(-1px); }

/* empty + fill states (now on .tile-front) */
/* Empty card sits a hair darker than the page bg (#efece0) so it
   reads as a placeholder without shouting. (.tile-front is already
   position: absolute / overflow: hidden — don't override.) */
.tile-front.is-empty {
  background: #ededea;
  border-color: transparent;
  box-shadow: none;
  align-items: center;
  justify-content: center;
}

/* Shimmer that sweeps across the whole tile while it's loading — sits on
   top of the LTR fill bar and the placeholder icon. Pure CSS pan of a
   diagonal gradient. */
.tile-front.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,0.55) 50%,
    transparent 70%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: tileShimmer 1.6s linear infinite;
}
@keyframes tileShimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}

/* Per-tile pastel backgrounds for the filled state — a soft, coordinated
   palette so the bento reads as calm rather than tonally noisy. Content-
   heavy tiles (gmail, map, profile, tools) cover their bg fully and the
   color only peeks at edges; sparser tiles (tags, role, logo) wear the
   pastel openly. */
.tile-front.is-filled.tile-log     { background: #faf2e3; }  /* cream */
.tile-front.is-filled.tile-tags    { background: #faf2e3; }  /* cream */
.tile-front.is-filled.tile-tools   { background: #e9eff7; }  /* light blue */
.tile-front.is-filled.tile-role    { background: #ebf2e6; }  /* mint */
.tile-front.is-filled.tile-heatmap { background: #ebf2e6; }  /* mint */
.tile-front.is-filled.tile-map     { background: #e9eff7; }  /* light blue */
.tile-front.is-filled.tile-profile { background: #efebf7; }  /* lavender (covered by photo) */
.tile-front.is-filled.tile-logo    { background: #ebf2e6; }  /* mint behind the check */

/* The loading "bar" is the ENTIRE card now — it fills left-to-right
   from 0% to 100% width with a warmer overlay, and the placeholder
   icon stays floating on top. */
.tile-bar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
/* Fill uses transform: scaleX rather than width%, so the browser
   interpolates the geometry on the compositor (sub-pixel smooth)
   instead of relayouting each frame. */
.tile-bar-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  /* Whisper of darkening — just enough to read as "loading" */
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0;
  will-change: transform;
}
.tile-front.is-loading .tile-bar { opacity: 1; }
/* Placeholder icon sits ABOVE the loading fill */
.ph-icon { position: relative; z-index: 2; }
.tile-front.is-filled > *:not(.tile-bar) {
  animation: tileFillIn 420ms cubic-bezier(.22,.65,.3,1) both;
}
@keyframes tileFillIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------- placeholder icons (one per tile type) ------------- */
.ph-icon {
  width: 38px;
  height: auto;
  color: #a3a89e;
  opacity: 0.65;
  display: block;
}
.ph-icon * { transform-box: fill-box; }

@keyframes phPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
@keyframes phBlink {
  50% { opacity: 0; }
}
@keyframes phRotate {
  to { transform: rotate(360deg); }
}
@keyframes phSweep {
  0%   { transform: translateX(-6px); opacity: 0; }
  18%  {                              opacity: 1; }
  82%  { transform: translateX(20px); opacity: 1; }
  100% { transform: translateX(28px); opacity: 0; }
}

/* banner — three dots cycling */
.ph-banner .dot              { animation: phPulse 1.5s ease-in-out infinite; }
.ph-banner .dot-2            { animation-delay: 0.35s; }
.ph-banner .dot-3            { animation-delay: 0.70s; }

/* people — four heads pulsing in turn */
.ph-people .head             { animation: phPulse 2.0s ease-in-out infinite; }
.ph-people .head-2           { animation-delay: 0.30s; }
.ph-people .head-3           { animation-delay: 0.60s; }
.ph-people .head-4           { animation-delay: 0.90s; }

/* tools — six squares twinkling */
.ph-tools .sq                { animation: phPulse 2.2s ease-in-out infinite; }
.ph-tools .sq-2              { animation-delay: 0.18s; }
.ph-tools .sq-3              { animation-delay: 0.36s; }
.ph-tools .sq-4              { animation-delay: 0.54s; }
.ph-tools .sq-5              { animation-delay: 0.72s; }
.ph-tools .sq-6              { animation-delay: 0.90s; }

/* quote — text rows + blinking cursor */
.ph-quote .line              { animation: phPulse 1.8s ease-in-out infinite; }
.ph-quote .line-2            { animation-delay: 0.30s; }
.ph-quote .cursor            { animation: phBlink 0.85s steps(1) infinite; }

/* recurring — clock hand sweep */
.ph-recurring .hand          { transform-origin: 16px 16px; animation: phRotate 4.5s linear infinite; }

/* travel — paper plane sweeping */
.ph-travel .plane            { animation: phSweep 2.6s cubic-bezier(.4, 0, .6, 1) infinite; transform-origin: center; }

/* screenshot — three rows in turn */
.ph-screenshot .row          { animation: phPulse 1.8s ease-in-out infinite; }
.ph-screenshot .row-2        { animation-delay: 0.28s; }
.ph-screenshot .row-3        { animation-delay: 0.56s; }

/* list — bullets + bars */
.ph-list .dot, .ph-list .bar { animation: phPulse 1.8s ease-in-out infinite; }
.ph-list .dot-2, .ph-list .bar-2 { animation-delay: 0.28s; }
.ph-list .dot-3, .ph-list .bar-3 { animation-delay: 0.56s; }

/* mobile bento-loading */
@media (max-width: 768px) {
  .bento-loading { padding: 18px 14px; row-gap: 10px; }
  .bento-loading-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 8px;
    grid-template-areas:
      "log    log    log    log"
      "people people tools  tools"
      "people people tools  tools"
      "role   role   heat   heat"
      "role   role   recur  recur"
      "travel travel screen screen"
      "travel travel screen screen";
  }
}

/* push the in-chat stage off the top during the scan */
.stage { transition: transform 720ms cubic-bezier(.55, 0, .25, 1); }

/* ------------------------------------------------------------- bento (scan phase, inline in chat) */
/* Lock everything when the scan starts. Body can't scroll, panel clips its
   own overflow — the chat content is then transform-scrolled by JS so the
   latest tile sits near the bottom of the viewport. */
body.is-scanning {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}
body.is-scanning .chat-panel {
  overflow: hidden;
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
}
.chat { transition: transform 880ms cubic-bezier(.16, 1, .3, 1); }
.bento-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a6862;
  margin-top: 8px;
  margin-bottom: 4px;
}
.bento-status-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #5b7a44;
  box-shadow: 0 0 0 0 rgba(91,122,68,0.55);
  animation: bentoPulse 1.6s ease-out infinite;
}
@keyframes bentoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(91,122,68,0.55); }
  100% { box-shadow: 0 0 0 10px rgba(91,122,68,0); }
}

.bento-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 80px;
  gap: 10px;
}

/* ----- tile chrome ----- */
/* canonical 3D flip card: outer cell holds the grid slot; inner flipper
   is the only element that rotates; front + back are separate siblings,
   both backface-hidden, back pre-rotated 180 — both faces are real, so
   nothing has to swap content mid-flip. */
.bento-tile {
  position: relative;
  border-radius: 14px;
  animation: tileLand 0.78s cubic-bezier(.34, 1.20, .42, 1) both;
  will-change: opacity, transform;
}
.tile-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.4, 0, .2, 1);
  border-radius: inherit;
}
@media (min-width: 769px) {
  /* Desktop: snappier flip — the cascading wave feels too slow when
     each tile's own rotation takes over a second. */
  .tile-flipper { transition: transform 0.7s cubic-bezier(.4, 0, .2, 1); }

  /* Desktop CTA pill: compact button. */
  .chat-cta-pill {
    padding: 16px 44px;
    font-size: 18px;
    min-width: 240px;
  }

  /* Inline Yes/No choices in the chat use the same metrics as the pill
     so the visual rhythm holds. */
  body.is-chat .msg-actions .choice {
    padding: 16px 44px;
    font-size: 18px;
    font-weight: 600;
    min-width: 240px;
  }

  /* User's reply bubble — a touch bigger on desktop. */
  .user-bubble {
    font-size: 20px;
    padding: 12px 20px;
  }

  /* Desktop: narrow the bento so tiles aren't sprawling across the page.
     Grid still fills full viewport height — tiles are intentionally tall. */
  .bento-loading-grid { max-width: 880px; }
  .bento-progress     { max-width: 880px; }

  /* Desktop: big Start CTA with a right-arrow — reads as "go next" not
     just a label. */
  .tile-back.is-cta {
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.02em;
    gap: 18px;
  }
  .tile-back.is-cta .cta-arrow {
    display: inline-flex;
    font-size: 40px;
    line-height: 1;
    transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
  }
  .tile-back.is-cta:hover .cta-arrow { transform: translateX(6px); }

  /* Desktop: bento → suggestions transitions horizontally (slide right),
     not vertically. Reposition the screens side-by-side and rewrite the
     translate. Product also slides further right so the whole flow reads
     as one rightward push. */
  .suggestions { top: 0; left: 100%; }
  .product     { top: 0; left: 200%; }
  .bento-stack.is-scrolled-up { transform: translateX(-100%); }
  .bento-stack.is-on-product  { transform: translateX(-200%); }

  /* Desktop: three suggestion cards side-by-side, wider container. */
  .suggestions-inner { max-width: 1080px; }
  .suggestion-stage {
    flex-direction: row;
    gap: 22px;
    align-items: stretch;
  }
  .suggestion-card {
    flex: 1 1 0;
    min-width: 0;
  }
  .suggestion-card:hover { transform: translateY(-3px); }
  .suggestion-image { height: 150px; font-size: 58px; }
}
.bento-tile.is-flipped .tile-flipper { transform: rotateY(180deg); }

.tile-front,
.tile-back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
  box-sizing: border-box;
}

.tile-front {
  /* Filled state keeps the same darker-tan as the loading state —
     tiles never flash white on completion. */
  background: #ededea;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 1px 2px rgba(0,0,0,0.03),
    0 4px 14px rgba(60,80,40,0.04);
  color: #1f2a1c;
}

.tile-back {
  transform: rotateY(180deg);
  padding: 0;
  background: transparent;        /* see-through onto the bento-ascii-canvas */
}
.tile-back.is-cta {
  background-color: #0a0a0a;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  cursor: pointer;
  color: #ffffff;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.018em;
  gap: 14px;
  transition: background 0.2s ease;
}
.tile-back.is-cta:hover { background-color: #1a1a1a; }
.tile-back.is-cta .cta-arrow {
  display: inline-flex;
  font-size: 30px;
  line-height: 1;
  transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
}
.tile-back.is-cta:active .cta-arrow,
.tile-back.is-cta:hover .cta-arrow { transform: translateX(5px); }
@keyframes tileLand {
  0%   { opacity: 0; transform: translateY(18px) scale(0.94); }
  55%  { opacity: 1; transform: translateY(-2px) scale(1.018); }
  78%  {              transform: translateY(0)   scale(0.997); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ----- sizes (6-col grid) ----- */
.tile-1x1 { grid-column: span 2; grid-row: span 1; }
.tile-2x1 { grid-column: span 3; grid-row: span 1; }
.tile-3x1 { grid-column: span 6; grid-row: span 1; }
.tile-1x2 { grid-column: span 2; grid-row: span 2; }
.tile-2x2 { grid-column: span 3; grid-row: span 2; }
.tile-2x3 { grid-column: span 3; grid-row: span 3; }

/* ----- type: stat ----- */
.tile-stat .num {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #1f2a1c;
}
.tile-stat .label {
  font-size: 12.5px;
  color: #6a6862;
  letter-spacing: -0.003em;
}

/* ----- type: integration ----- */
.tile-integration {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.tile-integration .logo {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  flex: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;
}
.tile-integration .brand {
  font-size: 14px;
  font-weight: 600;
  color: #1f2a1c;
  letter-spacing: -0.005em;
}
.tile-integration .sub {
  font-size: 11.5px;
  color: #6a6862;
}

/* ----- type: person ----- */
.tile-person { flex-direction: row; align-items: center; gap: 12px; }
.tile-person .avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c9e3b3, #5b7a44);
  display: grid; place-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  flex: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}
.tile-person .name {
  font-size: 14px; font-weight: 600; color: #1f2a1c; letter-spacing: -0.005em;
}
.tile-person .caption {
  font-size: 12.5px; color: #6a6862; line-height: 1.35;
}

/* ----- type: quote ----- */
.tile-quote {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.36;
  color: #2a3a23;
  letter-spacing: -0.005em;
  padding-top: 22px;
}
.tile-quote::before {
  content: '“';
  position: absolute;
  top: 6px; left: 12px;
  font-family: 'Newsreader', serif;
  font-size: 36px;
  color: rgba(91,122,68,0.5);
  line-height: 1;
}

/* ----- type: narrative ----- */
.tile-narrative .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b7a44;
  margin-bottom: 4px;
}
.tile-narrative .text {
  font-size: 14px;
  line-height: 1.4;
  color: #1f2a1c;
  letter-spacing: -0.005em;
}

/* ----- type: routine ----- */
.tile-routine {
  background: linear-gradient(180deg, #f4f7ec 0%, #ebf0e0 100%);
  border-color: rgba(91,122,68,0.10);
}
.tile-routine .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b7a44;
}
.tile-routine .text {
  font-size: 14px; font-weight: 500; color: #1f2a1c; line-height: 1.35; letter-spacing: -0.005em;
}

/* ----- type: profile (autogenerated avatar tile) ----- */
.tile-profile {
  /* Base .tile-front is position: absolute; overflow: hidden — do NOT
     override position here or the tile collapses to its content size
     during loading and shows up as a thin pill. */
  padding: 0;
}
.tile-profile .img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.tile-profile .name {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f4f6ee;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* ----- type: gmail (header tile — email + inbox health) ----- */
.tile-gmail { padding: 0; }
.tile-gmail .gm-bg {
  width: 100%; height: 100%;
  background: linear-gradient(145deg, #e94235 0%, #a81d12 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  gap: 24px;
  border-radius: inherit;
}
.tile-gmail .gm-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.tile-gmail .gm-wordmark {
  font-size: clamp(48px, 7vw, 72px);
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.04em;
  line-height: 1;
}
.tile-gmail .gm-handle {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.60);
  font-weight: 500;
}
.tile-gmail .gm-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: none;
}
.tile-gmail .gm-metric-num {
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tile-gmail .gm-metric-lbl {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  font-weight: 600;
}
@media (max-width: 768px) {
  .tile-gmail .gm-bg { padding: 0 14px; gap: 10px; }
  .tile-gmail .gm-metric-num { font-size: 18px; }
  .tile-gmail .gm-metric-lbl { font-size: 9px; }
  .tile-gmail .gm-wordmark   { font-size: 42px; }
}

/* ----- type: heatmap (12 weeks × 7 days) ----- */
.tile-heatmap {
  padding: 10px 12px;
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
}
.tile-heatmap .heatmap-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5b7a44;
}
.tile-heatmap .grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 12), 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  flex: 1;
  width: 100%;
  min-height: 40px;
}
.tile-heatmap .cell {
  border-radius: 2px;
  background: rgba(91, 122, 68, calc(0.08 + var(--i) * 0.88));
}

/* ----- type: banner (full-width single-line stat) ----- */
.tile-banner {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #1f2a1c;
}
.tile-banner .text {
  width: 100%;
  text-align: center;
}

/* ----- type: people — avatar cluster, no text ----- */
/* ----- type: tags — soft cloud of pill tags describing the user ----- */
.tile-tags {
  padding: 18px 18px;
  align-items: center;
  justify-content: center;
}
.tile-tags .tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.tile-tags .tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.4;
  white-space: nowrap;
}
.tile-tags .tag-sm { font-size: 12px; padding: 3px 9px; }
.tile-tags .tag-md { font-size: 14px; padding: 4px 11px; }
.tile-tags .tag-lg { font-size: 17px; padding: 5px 14px; font-weight: 700; }
/* Tag tones — pastel pill with a darker matching text color. */
.tile-tags .tag-green  { background: #d8ecc9; color: #3f5a2c; }
.tile-tags .tag-blue   { background: #d6e3f0; color: #2a4d70; }
.tile-tags .tag-slate  { background: #dfdfd3; color: #44443a; }
.tile-tags .tag-amber  { background: #f1dab0; color: #6e4a18; }
.tile-tags .tag-orange { background: #f3d4b5; color: #7a3d12; }
.tile-tags .tag-pink   { background: #f1cfd5; color: #7b2a3a; }
.tile-tags .tag-dark   { background: #2b2a25; color: #f7efd9; }
.tile-tags .tag-teal   { background: #c3dfd9; color: #214a44; }
.tile-tags .tag-brown  { background: #dec5ab; color: #5c3a1d; }
.tile-tags .tag-purple { background: #ddd0eb; color: #4a2e7a; }

/* ----- type: tools — pure logo grid, no text, fills the card ----- */
.tile-tools {
  padding: 0 !important;
}
.tile-tools .tools-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
}
.tile-tools .tools-cell {
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.tile-tools .tools-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.14), transparent 55%);
  pointer-events: none;
}
.tile-tools .tools-cell svg {
  position: relative;
  z-index: 1;
  width: 42%;
  height: 42%;
  max-width: 96px;
  max-height: 96px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}

/* ----- type: role (job-shape progress bars) ----- */
.tile-role { padding: 16px 18px; justify-content: center; }
.tile-role .role-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tile-role .role-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tile-role .role-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: #1f2a1c;
}
.tile-role .role-bar {
  width: 100%;
  height: 18px;
  background: rgba(31, 42, 28, 0.10);
  border-radius: 999px;
  overflow: hidden;
}
.tile-role .role-bar-fill {
  height: 100%;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, #5b7a44 0%, #93b07e 100%);
  border-radius: 999px;
  transform-origin: left center;
  animation: roleFill 900ms cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes roleFill {
  from { width: 0%; }
  to   { width: var(--pct, 0%); }
}

/* ----- type: map (centered on user's primary city) ----- */
.tile-map {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}
.tile-map .map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(1.02);
  display: block;
}
.tile-map .map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
  z-index: 2;
  pointer-events: none;
}
.tile-map .map-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 3;
  font-size: 13px;
  font-weight: 600;
  color: #1f2a1c;
  letter-spacing: -0.01em;
  background: rgba(255,255,255,0.86);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ----- type: logo (now a checkmark — signals "all done") ----- */
.tile-logo {
  padding: 0;
  align-items: center;
  justify-content: center;
}
.tile-logo .logo-check {
  width: 38%;
  max-width: 96px;
  aspect-ratio: 1 / 1;
  display: block;
}
.tile-logo .logo-check svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ----- hero (final summary, inline at end of bento) ----- */
.bento-hero {
  margin-top: 14px;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faec 100%);
  border: 1px solid rgba(91,122,68,0.15);
  border-radius: 16px;
  text-align: left;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 8px 28px rgba(60,80,40,0.10);
  animation: tileBreathe 0.95s cubic-bezier(.22,.65,.3,1) both;
}
.bento-hero .pre {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #5b7a44;
  margin-bottom: 8px;
}
.bento-hero h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.20;
  color: #1f2a1c;
  margin: 0 0 10px;
}
.bento-hero p {
  font-size: 14.5px;
  line-height: 1.5;
  color: #4a5a48;
  margin: 0 0 18px;
}
.bento-hero .cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: #82e3a8; color: #003116;
  font-weight: 600; font-size: 15px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 6px 18px rgba(0,80,30,0.18);
}

/* ----- mobile bento ----- */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 72px;
    gap: 8px;
  }
  /* halves stay halves on mobile so pairs sit side-by-side */
  .tile-1x1 { grid-column: span 2; }
  .tile-2x1 { grid-column: span 2; }
  .tile-3x1 { grid-column: span 4; }
  .tile-2x2 { grid-column: span 2; grid-row: span 2; }
  .tile-2x3 { grid-column: span 2; grid-row: span 3; }
  .tile-1x2 { grid-column: span 2; grid-row: span 2; }
  .bento-hero h2 { font-size: 20px; }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1240px) {
  .rail {
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
  }
  .snippet { max-width: 100%; }
}
@media (max-width: 768px) {
  .topbar { padding: 14px 18px; grid-template-columns: 1fr auto; gap: 12px; }
  .pillnav { display: none; }
  .hero-br { display: inline; }
  .login { display: none; }

  /* Pre-auth on mobile: lock to viewport, center content, brighter sub. */
  body:not(.is-chat) {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }
  body:not(.is-chat) .stage {
    padding: 36px 18px 40px;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
  }
  body:not(.is-chat) .scene .scene-img {
    background-position: 50% 60%;
  }
  body:not(.is-chat) .view-home { gap: 28px; max-width: 520px; }
  body:not(.is-chat) .hero { font-size: 36px; line-height: 1.08; }
  body:not(.is-chat) .sub {
    color: #fff;
    font-size: 17px;
    line-height: 1.42;
    text-shadow: 0 1px 8px rgba(0,0,0,0.18);
  }
  body:not(.is-chat) .hire { max-width: 380px; padding: 8px 8px 8px 28px; }
  body:not(.is-chat) .hire-text { font-size: 16px; }

  /* Post-auth on mobile: drop header, panel, chrome — pure typography. */
  body.is-chat .topbar { display: none; }
  body.is-chat .stage {
    padding: 64px 24px 32px;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
  }
  body.is-chat .view-chat { flex: 1; min-height: 0; }
  body.is-chat .chat-panel {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    min-height: 0;
    box-shadow: none;
    flex: 1;
  }
  body.is-chat .msg {
    grid-template-columns: 44px 1fr;
    gap: 16px;
  }
  body.is-chat .agent-avatar { width: 44px; height: 44px; }
  body.is-chat .msg-meta { display: none; }
  body.is-chat .msg-text {
    font-size: 21px;
    line-height: 1.36;
    font-weight: 500;
    letter-spacing: -0.018em;
    color: #171814;
  }
  body.is-chat .msg-actions {
    margin-top: 22px;
    gap: 10px;
    flex-direction: column;
    flex-wrap: wrap;
  }
  body.is-chat .msg-actions .choice { flex: none; width: 100%; min-width: 0; }
  body.is-chat .choice {
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 999px;
  }
  body.is-chat .msg-trace {
    font-size: 13px;
    padding-left: 12px;
    max-height: 180px;
  }
  body.is-chat .rail { display: none; }
  body.is-chat .ascii-scene {
    /* Mobile: no chat-panel chrome, but body.is-chat .stage has 24px padding.
       Negate (avatar 44 + gap 16 + stage 24) on the left, stage 24 on the right. */
    height: 280px;
    border-radius: 0;
    margin-left: -84px;
    margin-right: -24px;
    width: calc(100% + 108px);
  }
  body.is-chat .msg-artifact { padding: 16px; border-radius: 16px; }
  body.is-chat .art-tiles { grid-template-columns: 1fr; }
}