:root {
  --paper: #f7f4ed;
  --paper-deep: #eee9df;
  --paper-warm: #fbf9f4;
  --card: rgba(255, 255, 255, 0.82);
  --white: #ffffff;
  --ink: #17231f;
  --ink-soft: #35453f;
  --muted: #64726c;
  --muted-light: #87938e;
  --line: rgba(23, 35, 31, 0.11);
  --line-strong: rgba(23, 35, 31, 0.18);
  --green: #256b50;
  --green-dark: #124d3a;
  --green-deep: #0b3a2c;
  --mint: #dff2e8;
  --mint-bright: #c6ecdb;
  --blue: #5269ef;
  --blue-deep: #3e51cf;
  --sky: #28a8df;
  --lilac: #e7e2ff;
  --peach: #f3dcc5;
  --yellow: #f4e7a5;
  --rose: #efd9de;
  --app: #1b1c21;
  --app-raised: #24252b;
  --app-line: rgba(255, 255, 255, 0.085);
  --app-text: #f2f2f4;
  --app-muted: #989ba7;
  --radius: 28px;
  --shadow: 0 28px 80px rgba(49, 56, 48, 0.13);
  --sans: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1320px;
  --gut: clamp(20px, 4.8vw, 72px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(82, 105, 239, 0.45);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  left: 18px;
  top: 14px;
  z-index: 1000;
  transform: translateY(-150%);
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}

.skip-link:focus {
  transform: none;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s cubic-bezier(.2, .65, .25, 1), transform 0.75s cubic-bezier(.2, .65, .25, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: padding 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  border-bottom: 1px solid transparent;
}

.site-nav.is-scrolled {
  padding: 9px 0;
  background: rgba(247, 244, 237, 0.88);
  border-bottom-color: rgba(23, 35, 31, 0.08);
  box-shadow: 0 8px 28px rgba(32, 49, 43, 0.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}

.nav-inner {
  width: min(var(--max), calc(100% - var(--gut) * 2));
  min-height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.brand img {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 6px 9px rgba(62, 81, 207, 0.17));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 32px);
}

.nav-links > a:not(.button) {
  position: relative;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}

.nav-links > a:not(.button)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transition: right 0.2s ease;
}

.nav-links > a:not(.button):hover::after {
  right: 0;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
}

.menu-toggle > span:not(.sr-only) {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 750;
  letter-spacing: -0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-small {
  min-height: 40px;
  padding: 0 18px;
  color: #fff;
  background: var(--green-dark);
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(18, 77, 58, 0.13);
}

.button-primary {
  color: #fff;
  background: var(--green-dark);
  box-shadow: 0 14px 30px rgba(18, 77, 58, 0.2);
}

.button-primary:hover,
.button-small:hover {
  background: var(--green-deep);
  box-shadow: 0 18px 36px rgba(18, 77, 58, 0.24);
}

.button-primary > span:last-child,
.button-light > span:last-child {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 18px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--green-dark);
  font-weight: 750;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.hero {
  position: relative;
  min-height: 900px;
  padding: 150px max(var(--gut), calc((100vw - var(--max)) / 2)) 100px;
  display: grid;
  grid-template-columns: minmax(390px, 0.88fr) minmax(580px, 1.22fr);
  align-items: center;
  gap: clamp(42px, 5vw, 84px);
  isolation: isolate;
}

.hero-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.hero-glow-one {
  width: min(48vw, 720px);
  height: min(48vw, 720px);
  top: -170px;
  right: -140px;
  background: radial-gradient(circle at 45% 48%, rgba(205, 227, 255, 0.82), rgba(224, 218, 255, 0.44) 48%, transparent 70%);
}

.hero-glow-two {
  width: 520px;
  height: 520px;
  bottom: -210px;
  left: -230px;
  background: radial-gradient(circle, rgba(208, 239, 220, 0.78), transparent 68%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 610px;
}

.kicker,
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42ad77;
  box-shadow: 0 0 0 5px rgba(66, 173, 119, 0.13);
}

.hero h1 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(58px, 6.5vw, 94px);
  font-weight: 650;
  letter-spacing: -0.068em;
  line-height: 0.94;
}

.hero h1 span {
  display: inline-block;
  color: var(--blue);
}

.hero-lede {
  max-width: 590px;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.62;
  letter-spacing: -0.018em;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 34px;
}

.hero-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 650;
}

.hero-promises span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  border-radius: 50%;
  color: var(--green-dark);
  background: var(--mint);
  font-size: 11px;
}

.requirements {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.hero-product {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 0 58px;
  perspective: 1500px;
}

.product-shadow {
  position: absolute;
  left: 7%;
  right: 2%;
  bottom: 30px;
  height: 90px;
  border-radius: 50%;
  background: rgba(36, 52, 44, 0.22);
  filter: blur(35px);
  transform: rotate(-2deg);
}

.app-window {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.31 / 1;
  min-height: 530px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 23px;
  background: var(--app);
  color: var(--app-text);
  box-shadow: 0 40px 85px rgba(29, 33, 37, 0.31), 0 3px 0 rgba(255, 255, 255, 0.06) inset;
  transform: rotateY(-3deg) rotateX(1.5deg);
  transform-origin: center;
}

.app-titlebar {
  height: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid var(--app-line);
  background: #202126;
}

.window-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.window-dots i {
  width: 9px;
  height: 9px;
  display: block;
  border-radius: 50%;
  background: #ff625d;
}

.window-dots i:nth-child(2) {
  background: #f4bd4e;
}

.window-dots i:nth-child(3) {
  background: #4ec768;
}

.app-mode {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: #18191d;
  font-size: 10px;
}

.app-mode b,
.app-mode span {
  padding: 4px 13px;
  border-radius: 7px;
}

.app-mode b {
  background: #34353d;
}

.app-mode span {
  color: var(--app-muted);
}

.model-pill {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 8px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: #28292f;
  color: #c8cad0;
  font-size: 9px;
}

.model-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #42cf8a;
  box-shadow: 0 0 8px rgba(66, 207, 138, 0.8);
}

.model-pill em {
  padding: 2px 4px;
  border-radius: 4px;
  color: #aab8ff;
  background: rgba(82, 105, 239, 0.18);
  font-style: normal;
  font-size: 7px;
  font-weight: 800;
}

.app-body {
  height: calc(100% - 48px);
  display: grid;
  grid-template-columns: 142px 1fr;
}

.app-sidebar {
  position: relative;
  padding: 17px 11px;
  border-right: 1px solid var(--app-line);
  background: #202126;
  color: var(--app-muted);
  font-size: 9px;
}

.mini-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 4px 17px;
  color: #e7e8ec;
  font-size: 11px;
  font-weight: 750;
}

.mini-brand img {
  width: 22px;
  height: 22px;
}

.app-sidebar > button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  color: #e5e6ea;
  background: #292a30;
  font-size: 9px;
  text-align: left;
}

.sidebar-label {
  margin: 19px 7px 6px;
  color: #6d707b;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.history {
  overflow: hidden;
  padding: 7px 8px;
  border-radius: 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.history.active {
  color: #d8dae0;
  background: rgba(255, 255, 255, 0.045);
}

.sidebar-bottom {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
}

.sidebar-bottom b {
  margin-left: auto;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #bfc9ff;
  background: rgba(82, 105, 239, 0.18);
  font-size: 7px;
}

.chat-surface {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #1c1d21;
}

.chat-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 19px 24px 10px;
}

.chat-heading h2 {
  margin: 8px 0 0;
  font-size: clamp(18px, 1.65vw, 26px);
  font-weight: 650;
  letter-spacing: -0.035em;
}

.local-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #878b96;
  font-size: 8px;
}

.local-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #42cf8a;
}

.privacy-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  color: #b1b4bd;
  background: #25262c;
  font-size: 8px;
}

.conversation {
  flex: 1;
  min-height: 0;
  padding: 8px 24px 0;
  overflow: hidden;
}

.message-user {
  width: 76%;
  margin-left: auto;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px 13px 4px 13px;
  color: #e2e3e7;
  background: #2a2b31;
  font-size: 10px;
  line-height: 1.5;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.search-work {
  margin: 13px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(82, 105, 239, 0.18);
  border-radius: 12px;
  background: rgba(82, 105, 239, 0.07);
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin 0.4s ease;
}

.search-work-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 7px;
  color: #afbbff;
  background: rgba(82, 105, 239, 0.16);
  font-size: 13px;
}

.search-work-head div {
  display: flex;
  flex-direction: column;
}

.search-work-head strong {
  font-size: 9px;
}

.search-work-head small {
  color: #858997;
  font-size: 7px;
}

.search-pulse {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

.search-pulse i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #91a1ff;
  animation: dot-bounce 1.1s infinite ease-in-out;
}

.search-pulse i:nth-child(2) {
  animation-delay: 0.15s;
}

.search-pulse i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.search-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.search-steps span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 5px;
  color: #9ca0ad;
  background: rgba(255, 255, 255, 0.035);
  font-size: 6.5px;
}

.search-steps i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #5cdf99;
}

.message-assistant {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 9px;
  margin-top: 15px;
  color: #cfd1d7;
  font-size: 9px;
  line-height: 1.55;
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease;
}

.message-assistant p {
  margin: 0;
}

.assistant-mark img {
  width: 25px;
  height: 25px;
}

.source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.source-row a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  color: #aeb1bc;
  background: #25262b;
  text-decoration: none;
  font-size: 6.5px;
}

.source-row span {
  width: 11px;
  height: 11px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #b9c2ff;
  background: rgba(82, 105, 239, 0.17);
  font-size: 6px;
}

.composer {
  padding: 6px 22px 17px;
}

.tool-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  color: #8d909b;
  background: #25262b;
  font-size: 7px;
}

.tool-chip.is-on {
  color: #bec7ff;
  border-color: rgba(82, 105, 239, 0.45);
  background: rgba(82, 105, 239, 0.12);
}

.tool-chip i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5cdf99;
}

.scope-note {
  margin-left: auto;
  color: #6f727d;
  font-size: 6.5px;
}

.message-box {
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px 0 13px;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  color: #70737e;
  background: #27282e;
  font-size: 8px;
}

.message-box button,
.search-input button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--blue);
  font-size: 14px;
}

.privacy-toast {
  position: absolute;
  right: -32px;
  bottom: 82px;
  width: 254px;
  min-height: 70px;
  display: grid;
  grid-template-columns: 38px 1fr 24px;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(37, 107, 80, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 48px rgba(33, 58, 48, 0.18);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.2, .7, .2, 1);
}

.toast-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--green-dark);
  background: var(--mint);
}

.privacy-toast div {
  display: flex;
  flex-direction: column;
}

.privacy-toast strong {
  font-size: 11px;
}

.privacy-toast small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}

.toast-check {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 11px;
}

.hero-product[data-stage="0"] .demo-search,
.hero-product[data-stage="0"] .demo-answer,
.hero-product[data-stage="1"] .demo-answer {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  opacity: 0;
  transform: translateY(10px);
  overflow: hidden;
}

.hero-product[data-stage="0"] .demo-answer,
.hero-product[data-stage="1"] .demo-answer {
  gap: 0;
}

.hero-product[data-stage="2"] .demo-search,
.hero-product[data-stage="3"] .demo-search {
  opacity: 0.58;
}

.hero-product[data-stage="3"] .demo-toast {
  opacity: 1;
  transform: none;
}

.demo-controls {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.87);
  box-shadow: 0 12px 30px rgba(46, 57, 51, 0.11);
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.demo-controls button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.demo-controls button span {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-deep);
  font-size: 8px;
}

.demo-controls button.active {
  color: #fff;
  background: var(--green-dark);
}

.demo-controls button.active span {
  color: var(--green-dark);
  background: #fff;
}

.proof-bar {
  width: min(var(--max), calc(100% - var(--gut) * 2));
  margin: -22px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 18px 48px rgba(49, 56, 48, 0.06);
}

.proof-bar > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1px 13px;
  align-items: center;
  padding: 24px 26px;
  border-right: 1px solid var(--line);
}

.proof-bar > div:last-child {
  border-right: 0;
}

.proof-icon {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--green-dark);
  background: var(--mint);
  font-size: 19px;
}

.proof-bar strong {
  font-size: 13px;
  line-height: 1.3;
}

.proof-bar small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.story-section,
.search-section,
.free-section,
.everyday-section,
.faq-section {
  position: relative;
  padding: 150px max(var(--gut), calc((100vw - var(--max)) / 2));
}

.section-heading {
  max-width: 850px;
}

.section-heading h2,
.setup-copy h2,
.search-intro h2,
.memory-copy h2,
.free-heading h2,
.privacy-copy h2,
.faq-heading h2,
.closing-card h2 {
  margin: 0;
  font-size: clamp(45px, 5.2vw, 72px);
  font-weight: 620;
  letter-spacing: -0.058em;
  line-height: 1.02;
}

.section-heading h2 span,
.setup-copy h2 span,
.search-intro h2 span,
.memory-copy h2 span,
.free-heading h2 span,
.privacy-copy h2 span {
  color: var(--blue);
}

.section-heading > p:last-child,
.setup-copy > p,
.search-intro > p,
.memory-copy > p,
.free-heading > p,
.privacy-copy > p,
.faq-heading > p,
.closing-card > p {
  max-width: 700px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
  letter-spacing: -0.015em;
}

.privacy-visual {
  position: relative;
  min-height: 570px;
  margin-top: 70px;
  overflow: hidden;
  border: 1px solid rgba(23, 35, 31, 0.08);
  border-radius: 38px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.25) 42%, transparent 68%),
    linear-gradient(145deg, #dfeee5, #eee9ff 55%, #f5e8d9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.device-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.desk-shadow {
  position: absolute;
  left: 27%;
  right: 27%;
  bottom: 74px;
  height: 56px;
  border-radius: 50%;
  background: rgba(28, 50, 40, 0.2);
  filter: blur(26px);
}

.mini-laptop {
  position: relative;
  z-index: 2;
  width: min(57%, 620px);
  transform: translateY(4px);
}

.laptop-screen {
  position: relative;
  aspect-ratio: 1.55 / 1;
  overflow: hidden;
  border: 8px solid #303338;
  border-bottom-width: 13px;
  border-radius: 18px 18px 11px 11px;
  background: #1b1c21;
  box-shadow: 0 28px 55px rgba(38, 50, 45, 0.24);
}

.screen-top {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-bottom: 1px solid var(--app-line);
  background: #24252a;
}

.screen-top span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff625d;
}

.screen-top span:nth-child(2) { background: #f4bd4e; }
.screen-top span:nth-child(3) { background: #4ec768; }

.screen-chat {
  padding: 35px 45px;
}

.screen-bubble {
  width: 52%;
  height: 30px;
  margin: 0 0 14px auto;
  border-radius: 10px 10px 3px 10px;
  background: #303139;
}

.screen-bubble.short {
  width: 35%;
}

.screen-answer {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  width: 70%;
  margin-top: 30px;
}

.screen-answer img {
  width: 27px;
  height: 27px;
}

.screen-answer i {
  grid-column: 2;
  height: 7px;
  margin-top: -25px;
  border-radius: 5px;
  background: #4d4f58;
}

.screen-answer i:last-child {
  width: 64%;
  margin-top: -10px;
}

.local-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 174px;
  height: 174px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91, 122, 244, 0.42);
  border-radius: 50%;
  transform: translate(-50%, -42%);
  animation: local-ring 3.2s ease-in-out infinite;
}

.local-ring::before,
.local-ring::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(91, 122, 244, 0.24);
  border-radius: 50%;
}

.local-ring::before { inset: 17px; }
.local-ring::after { inset: 38px; }

.local-ring span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--sky));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 0 42px rgba(82, 105, 239, 0.42);
}

@keyframes local-ring {
  0%, 100% { transform: translate(-50%, -42%) scale(0.97); }
  50% { transform: translate(-50%, -42%) scale(1.04); }
}

.laptop-base {
  width: 112%;
  height: 16px;
  margin-left: -6%;
  border-radius: 4px 4px 18px 18px;
  background: linear-gradient(#b7babd, #6d7276);
  box-shadow: 0 8px 10px rgba(33, 42, 38, 0.19);
}

.file-card {
  position: absolute;
  z-index: 3;
  width: 180px;
  display: grid;
  grid-template-columns: 43px 1fr;
  gap: 0 11px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(23, 35, 31, 0.09);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 35px rgba(38, 53, 46, 0.11);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: file-float 5s ease-in-out infinite;
}

.file-card > span {
  grid-row: 1 / span 2;
  width: 43px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--green-dark);
  background: var(--mint);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
}

.file-card strong {
  font-size: 11px;
  line-height: 1.3;
}

.file-card small {
  color: var(--green);
  font-size: 8px;
}

.file-one { left: 6%; top: 16%; transform: rotate(-5deg); }
.file-two { right: 5%; top: 24%; transform: rotate(4deg); animation-delay: -1.6s; }
.file-three { right: 11%; bottom: 15%; transform: rotate(-2deg); animation-delay: -3.2s; }

@keyframes file-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

.offline-pill {
  position: absolute;
  left: 8%;
  bottom: 15%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(23, 35, 31, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 28px rgba(38, 53, 46, 0.09);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 750;
}

.offline-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4bb77d;
  box-shadow: 0 0 0 4px rgba(75, 183, 125, 0.15);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.benefit-card {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  padding: 33px;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.58);
}

.benefit-card:nth-child(2) { background: rgba(231, 226, 255, 0.45); }
.benefit-card:nth-child(3) { background: rgba(223, 242, 232, 0.57); }

.card-number {
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
}

.benefit-card h3 {
  margin: 36px 0 12px;
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.benefit-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.card-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 28px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
}

.card-proof i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4bb77d;
  box-shadow: 0 0 0 4px rgba(75, 183, 125, 0.14);
}

.setup-section {
  width: min(var(--max), calc(100% - var(--gut) * 2));
  margin: 20px auto 140px;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: center;
  gap: clamp(50px, 7vw, 100px);
  padding: clamp(55px, 7vw, 96px);
  overflow: hidden;
  border-radius: 38px;
  color: #f7fbf9;
  background:
    radial-gradient(circle at 15% 10%, rgba(89, 171, 132, 0.25), transparent 34%),
    var(--green-deep);
}

.setup-copy .eyebrow {
  color: #9ed7bb;
}

.setup-copy h2 {
  font-size: clamp(42px, 4.2vw, 62px);
}

.setup-copy > p {
  color: #b9cec6;
  font-size: 17px;
}

.check-list {
  display: grid;
  gap: 13px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  color: #dcebe5;
  font-size: 13px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.check-list span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--green-deep);
  background: #94d4b3;
  font-size: 11px;
  font-weight: 900;
}

.setup-ui {
  position: relative;
  min-height: 540px;
}

.setup-window {
  position: absolute;
  z-index: 2;
  inset: 18px 0 0 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: #f9f8f4;
  color: var(--ink);
  box-shadow: 0 35px 70px rgba(2, 24, 17, 0.38);
  transform: rotate(1.8deg);
}

.setup-top {
  height: 46px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #efeee9;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 750;
}

.setup-top em {
  justify-self: end;
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}

.setup-content {
  padding: clamp(24px, 4vw, 42px);
}

.setup-content > img {
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
}

.setup-overline {
  color: var(--green);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.setup-title h3 {
  margin: 6px 0 5px;
  font-size: clamp(24px, 2.5vw, 35px);
  font-weight: 650;
  letter-spacing: -0.045em;
}

.setup-title p {
  min-height: 42px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.setup-progress {
  height: 7px;
  margin: 19px 0;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e5df;
}

.setup-progress i {
  display: block;
  width: 18%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  transition: width 0.8s cubic-bezier(.2, .7, .2, 1);
}

.setup-ui[data-setup-stage="1"] .setup-progress i { width: 58%; }
.setup-ui[data-setup-stage="2"] .setup-progress i { width: 100%; }

.setup-steps {
  display: grid;
  gap: 7px;
}

.setup-steps > div {
  display: grid;
  grid-template-columns: 28px 1fr 22px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #9ba29e;
  background: #f3f2ee;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}

.setup-steps > div > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #7a827e;
  background: #e6e6e1;
  font-family: var(--mono);
  font-size: 8px;
}

.setup-steps > div div {
  display: flex;
  flex-direction: column;
}

.setup-steps strong { font-size: 9px; }
.setup-steps small { font-size: 7px; }
.setup-steps b {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  background: #e4e5e0;
  font-size: 8px;
}

.setup-steps > div.active,
.setup-ui[data-setup-stage="1"] .setup-steps > div:nth-child(-n+2),
.setup-ui[data-setup-stage="2"] .setup-steps > div {
  color: var(--ink-soft);
  border-color: rgba(37, 107, 80, 0.15);
  background: #edf6f1;
  transform: translateX(3px);
}

.setup-steps > div.active b,
.setup-ui[data-setup-stage="1"] .setup-steps > div:nth-child(-n+2) b,
.setup-ui[data-setup-stage="2"] .setup-steps > div b {
  color: #fff;
  background: var(--green);
}

.setup-content > button {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 17px;
  padding: 0 9px 0 15px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--green-dark);
  font-size: 10px;
  font-weight: 750;
}

.setup-content > button b {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.13);
}

.terminal-before {
  position: absolute;
  left: -32px;
  bottom: 22px;
  z-index: 1;
  width: 255px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  color: #92a9a0;
  background: #061f17;
  box-shadow: 0 20px 40px rgba(2, 20, 14, 0.38);
  transform: rotate(-5deg);
  opacity: 0.68;
}

.terminal-before span {
  color: #729388;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.terminal-before code {
  font-family: var(--mono);
  font-size: 8px;
}

.terminal-before .terminal-error {
  color: #dc8c8b;
}

.search-section {
  padding-top: 140px;
  padding-bottom: 150px;
  background: #ece8df;
}

.search-intro {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.search-intro .eyebrow {
  justify-content: center;
}

.search-intro > p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.search-experience {
  max-width: 1160px;
  margin: 72px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 22px;
  align-items: stretch;
}

.search-app {
  min-height: 680px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  color: var(--app-text);
  background: var(--app);
  box-shadow: 0 35px 75px rgba(34, 37, 35, 0.24);
}

.search-app-bar {
  height: 51px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid var(--app-line);
  background: #222328;
  color: #b6b8c0;
  font-size: 10px;
}

.search-app-bar > span {
  font-weight: 700;
}

.search-app-bar > div:last-child {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #292a30;
  font-size: 8px;
}

.search-app-bar > div:last-child i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #42cf8a;
}

.search-chat {
  flex: 1;
  min-height: 0;
  padding: 30px clamp(20px, 4vw, 48px) 10px;
  overflow: hidden;
}

.search-question {
  max-width: 78%;
  margin-left: auto;
}

.search-question > span {
  display: block;
  margin: 0 4px 6px;
  color: #838690;
  font-size: 8px;
  text-align: right;
}

.search-question p {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--app-line);
  border-radius: 14px 14px 4px 14px;
  color: #e4e5e8;
  background: #2b2c32;
  font-size: 11px;
  line-height: 1.55;
}

.search-live-panel {
  margin: 25px 0 0;
  overflow: hidden;
  border: 1px solid rgba(82, 105, 239, 0.23);
  border-radius: 14px;
  background: rgba(82, 105, 239, 0.06);
}

.live-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border-bottom: 1px solid var(--app-line);
}

.radar-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #bdc6ff;
  background: rgba(82, 105, 239, 0.19);
  animation: radar-pulse 1.6s ease-in-out infinite;
}

@keyframes radar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82, 105, 239, 0); }
  50% { box-shadow: 0 0 0 7px rgba(82, 105, 239, 0.09); }
}

.live-panel-title > div {
  display: flex;
  flex-direction: column;
}

.live-panel-title strong { font-size: 10px; }
.live-panel-title small { color: #888b96; font-size: 7px; }

.live-panel-title em {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #70dca1;
  font-style: normal;
  font-size: 7px;
  text-transform: uppercase;
}

.live-panel-title em i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #50d993;
  box-shadow: 0 0 8px rgba(80, 217, 147, 0.6);
}

.live-step {
  display: grid;
  grid-template-columns: 52px 1fr 32px;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 7px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  opacity: 0.22;
  transform: translateX(-10px);
  transition: opacity 0.45s ease, transform 0.45s ease, background 0.45s ease;
}

.live-step:last-child { border-bottom: 0; }

.live-step.is-active {
  opacity: 1;
  transform: none;
  background: rgba(255, 255, 255, 0.025);
}

.live-step > span {
  padding: 3px 5px;
  border-radius: 5px;
  color: #aeb9ff;
  background: rgba(82, 105, 239, 0.15);
  font-family: var(--mono);
  font-size: 6px;
  text-align: center;
}

.live-step p {
  margin: 0;
  color: #aeb0ba;
  font-size: 8px;
}

.live-step b {
  color: #6bc893;
  font-size: 7px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.live-step.is-done b { opacity: 1; }

.search-result {
  display: grid;
  grid-template-columns: 31px 1fr;
  gap: 11px;
  margin-top: 22px;
  color: #cfd1d6;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.search-result.is-visible {
  opacity: 1;
  transform: none;
}

.answer-logo img {
  width: 29px;
  height: 29px;
}

.search-result p {
  margin: 0;
  font-size: 10px;
  line-height: 1.65;
}

.citation-cards {
  display: flex;
  gap: 7px;
  margin-top: 11px;
}

.citation-cards > span {
  min-width: 130px;
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: 0 7px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: #25262b;
}

.citation-cards b {
  grid-row: 1 / span 2;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #c0c8ff;
  background: rgba(82, 105, 239, 0.16);
  font-size: 7px;
}

.citation-cards i {
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
}

.citation-cards small {
  color: #7f828d;
  font-size: 6px;
}

.search-composer {
  padding: 9px clamp(20px, 4vw, 48px) 22px;
}

.search-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

.search-tools > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  color: #8d909b;
  background: #25262b;
  font-size: 7px;
}

.search-tools > span.enabled {
  color: #bec7ff;
  border-color: rgba(82, 105, 239, 0.43);
  background: rgba(82, 105, 239, 0.11);
}

.search-tools span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #52da95;
}

.search-tools em {
  margin-left: auto;
  color: #686b75;
  font-style: normal;
  font-size: 6.5px;
}

.search-input {
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 14px;
  border: 1px solid var(--app-line);
  border-radius: 13px;
  color: #6f727c;
  background: #27282e;
  font-size: 8px;
}

.search-explainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.63);
}

.explainer-line {
  position: relative;
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 12px;
  padding: 13px 0;
}

.explainer-line:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 52px;
  bottom: -13px;
  width: 1px;
  background: var(--line-strong);
}

.explainer-line > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--green-dark);
  background: var(--mint);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
}

.explainer-line div {
  display: flex;
  flex-direction: column;
}

.explainer-line strong {
  color: var(--ink-soft);
  font-size: 12px;
}

.explainer-line small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.memory-section {
  width: min(var(--max), calc(100% - var(--gut) * 2));
  margin: 0 auto;
  padding: 150px 0;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  align-items: center;
  gap: clamp(50px, 7vw, 100px);
}

.memory-copy h2 {
  font-size: clamp(44px, 4.9vw, 68px);
}

.soft-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 17px;
  border: 1px solid rgba(37, 107, 80, 0.12);
  border-radius: 14px;
  color: var(--green-dark) !important;
  background: rgba(223, 242, 232, 0.6);
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.soft-note span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #cbead9;
}

.memory-ui {
  position: relative;
  min-height: 530px;
  padding: 42px 0 0;
}

.memory-ui::before {
  content: "";
  position: absolute;
  inset: 0 -30px;
  border-radius: 48% 52% 46% 54%;
  background: linear-gradient(135deg, rgba(231, 226, 255, 0.72), rgba(207, 238, 222, 0.6));
  transform: rotate(-3deg);
}

.memory-window {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.memory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px 21px;
  border-bottom: 1px solid var(--line);
  background: rgba(249, 248, 244, 0.85);
}

.memory-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.memory-symbol {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--blue);
  background: var(--lilac);
}

.memory-head strong {
  font-size: 13px;
}

.memory-head button,
.memory-item button {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  font-size: 8px;
}

.memory-list {
  display: grid;
  gap: 8px;
  padding: 15px;
}

.memory-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: #f7f6f2;
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.memory-item.active {
  border-color: rgba(82, 105, 239, 0.22);
  background: #f0f0ff;
  box-shadow: 0 8px 22px rgba(67, 75, 130, 0.08);
  transform: translateX(4px);
}

.memory-item-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--blue-deep);
  background: var(--lilac);
  font-size: 11px;
  font-weight: 800;
}

.memory-item:nth-child(2) .memory-item-icon {
  color: var(--green-dark);
  background: var(--mint);
}

.memory-item:nth-child(3) .memory-item-icon {
  color: #8b5b2d;
  background: var(--peach);
}

.memory-item div {
  min-width: 0;
}

.memory-item strong {
  display: block;
  font-size: 11px;
}

.memory-item p {
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.memory-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 19px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: #f8f7f3;
  font-size: 8px;
}

.memory-footer i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4bb77d;
}

.memory-footer em {
  margin-left: auto;
  color: var(--muted-light);
  font-family: var(--mono);
  font-style: normal;
}

.recall-bubble {
  position: absolute;
  right: -20px;
  bottom: 4px;
  z-index: 3;
  width: 290px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px rgba(52, 61, 55, 0.14);
  transform: rotate(2deg);
}

.recall-bubble img {
  width: 34px;
  height: 34px;
}

.recall-bubble p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.45;
}

.recall-bubble span {
  display: block;
  color: var(--blue-deep);
  font-weight: 800;
}

.free-section {
  overflow: hidden;
  background: var(--green-deep);
  color: #f7fbf9;
  isolation: isolate;
}

.free-orbit {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.free-orbit-one {
  width: 620px;
  height: 620px;
  right: -250px;
  top: -240px;
  background: radial-gradient(circle, rgba(75, 183, 125, 0.25), transparent 68%);
}

.free-orbit-two {
  width: 520px;
  height: 520px;
  left: -260px;
  bottom: -250px;
  background: radial-gradient(circle, rgba(82, 105, 239, 0.22), transparent 68%);
}

.free-heading {
  max-width: 820px;
}

.free-heading .eyebrow {
  color: #a5dabf;
}

.free-heading h2 span {
  color: #a5dabf;
}

.free-heading > p {
  color: #b9cec6;
}

.free-card {
  max-width: 1050px;
  margin-top: 66px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  color: var(--ink);
  background: #fbfaf6;
  box-shadow: 0 38px 85px rgba(0, 20, 14, 0.3);
}

.free-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--line);
}

.free-card-top > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.forever-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--green-dark);
  background: var(--mint);
  font-size: 29px;
  line-height: 1;
}

.free-card-top > div > div {
  display: flex;
  flex-direction: column;
}

.free-card-top strong {
  font-size: 20px;
  letter-spacing: -0.03em;
}

.free-card-top small {
  color: var(--muted);
  font-size: 10px;
}

.price-zero {
  color: var(--green-dark);
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.05em;
}

.price-zero small {
  margin-left: 3px;
  font-size: 9px;
  letter-spacing: 0;
}

.free-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  padding: 1px 32px 25px;
  background: var(--line);
}

.free-features > div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1px 12px;
  align-items: center;
  min-height: 100px;
  padding: 22px 18px;
  background: #fbfaf6;
}

.free-features > div > span {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--green-dark);
  background: var(--mint);
  font-size: 17px;
}

.free-features > div:nth-child(2n) > span {
  color: var(--blue-deep);
  background: var(--lilac);
}

.free-features strong {
  font-size: 12px;
}

.free-features small {
  color: var(--muted);
  font-size: 9px;
}

.trial-ribbon {
  margin: 0 32px;
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid rgba(82, 105, 239, 0.13);
  border-radius: 17px;
  background: linear-gradient(110deg, rgba(231, 226, 255, 0.78), rgba(223, 242, 232, 0.72));
}

.trial-ribbon > span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: 12px;
  color: #fff;
  background: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.trial-ribbon p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.55;
}

.free-action {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px 34px;
}

.free-action small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

/* ── Paid nod ─────────────────────────────────────────────────────────────
   Deliberately quiet, and deliberately last: the free card above is the offer
   this page actually makes, and this only exists for the minority who have
   already decided. It closes out the same dark section rather than starting a
   new one, so paying reads as a footnote to free rather than a rival to it.

   It also carries id="price". Every copy of the app already shipped opens
   kyndagent.com/#price from its licence screen, so that anchor has to keep
   landing on something that can actually be bought — an installed app cannot
   be edited after the fact. Do not move the id without leaving a redirect. */

/* Tighten the free section's own base padding when the nod follows it, so the
   two read as one block rather than two sections that happen to share a
   colour. Without this the strip floats 150px adrift of the card it belongs to. */
.free-section.has-pro-nod {
  padding-bottom: clamp(56px, 6.5vw, 86px);
}

.pro-strip {
  padding: 0 max(var(--gut), calc((100vw - var(--max)) / 2)) clamp(90px, 10vw, 130px);
  background: var(--green-deep);
  scroll-margin-top: 92px;
}

.pro-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  max-width: 1050px;
  margin: 0 auto;
  padding: 26px 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.055);
}

.pro-strip-copy strong {
  display: block;
  color: #f7fbf9;
  font-size: 16px;
  letter-spacing: -0.03em;
}

.pro-strip-copy small {
  display: block;
  margin-top: 4px;
  color: #a9c3ba;
  font-size: 12px;
  line-height: 1.55;
}

.pro-strip .button {
  flex: none;
  color: var(--green-deep);
  background: #f4fbf7;
  font-size: 15px;
}

.pro-strip .button:hover {
  background: #fff;
}

@media (max-width: 720px) {
  .pro-strip-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 22px;
  }

  .pro-strip .button {
    justify-content: center;
  }
}

.everyday-section {
  padding-bottom: 160px;
}

.section-heading.compact {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.section-heading.compact .eyebrow {
  justify-content: center;
}

.section-heading.compact h2 {
  font-size: clamp(42px, 4.6vw, 65px);
}

.section-heading.compact > p:last-child {
  margin-left: auto;
  margin-right: auto;
}

.prompt-cloud {
  position: relative;
  min-height: 600px;
  max-width: 1120px;
  margin: 60px auto 0;
  border-radius: 40px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95), transparent 34%),
    radial-gradient(circle at 17% 22%, rgba(223, 242, 232, 0.88), transparent 25%),
    radial-gradient(circle at 81% 20%, rgba(231, 226, 255, 0.88), transparent 26%),
    radial-gradient(circle at 70% 82%, rgba(243, 220, 197, 0.75), transparent 25%);
}

.prompt-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(82, 105, 239, 0.13);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 55px rgba(62, 81, 207, 0.14);
  transform: translate(-50%, -50%);
}

.prompt-center::before,
.prompt-center::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(82, 105, 239, 0.1);
  border-radius: 50%;
  animation: prompt-ring 4s ease-out infinite;
}

.prompt-center::before { inset: -25px; }
.prompt-center::after { inset: -55px; animation-delay: 1s; }

@keyframes prompt-ring {
  0%, 100% { opacity: 0.15; transform: scale(0.94); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.prompt-center img {
  width: 66px;
  height: 66px;
  position: relative;
  z-index: 1;
}

.prompt-center span {
  margin-top: -20px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.prompt-card {
  position: absolute;
  max-width: 320px;
  padding: 17px 20px;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 38px rgba(51, 62, 56, 0.1);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  animation: prompt-float 6s ease-in-out infinite;
}

.prompt-card span {
  display: block;
  margin-bottom: 5px;
  color: var(--green);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.prompt-one { left: 5%; top: 11%; transform: rotate(-2deg); }
.prompt-two { right: 4%; top: 12%; transform: rotate(2deg); animation-delay: -1.2s; }
.prompt-three { left: 1%; bottom: 20%; transform: rotate(1deg); animation-delay: -2.4s; }
.prompt-four { right: 2%; bottom: 17%; transform: rotate(-2deg); animation-delay: -3.6s; }
.prompt-five { left: 37%; bottom: 3%; transform: rotate(1deg); animation-delay: -4.8s; }

@keyframes prompt-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

.privacy-section {
  width: min(var(--max), calc(100% - var(--gut) * 2));
  margin: 0 auto 150px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: clamp(50px, 7vw, 100px);
  padding: clamp(55px, 7vw, 90px);
  border: 1px solid var(--line);
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.52);
}

.privacy-copy h2 {
  font-size: clamp(42px, 4.2vw, 60px);
}

.privacy-copy .text-link {
  margin-top: 25px;
  font-size: 13px;
}

.privacy-checks {
  display: grid;
  gap: 9px;
}

.privacy-checks article {
  display: grid;
  grid-template-columns: 37px 1fr 27px;
  align-items: center;
  gap: 13px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fbfaf6;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.privacy-checks article:hover {
  transform: translateX(4px);
  box-shadow: 0 9px 24px rgba(48, 60, 53, 0.08);
}

.privacy-checks article > span {
  color: var(--green);
  font-family: var(--mono);
  font-size: 9px;
}

.privacy-checks article > div {
  display: flex;
  flex-direction: column;
}

.privacy-checks strong { font-size: 12px; }
.privacy-checks small { color: var(--muted); font-size: 9px; }

.privacy-checks b {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--green-dark);
  background: var(--mint);
  font-size: 11px;
}

.faq-section {
  padding-top: 30px;
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: clamp(50px, 7vw, 100px);
}

.faq-heading {
  position: sticky;
  top: 125px;
  align-self: start;
}

.faq-heading h2 {
  font-size: clamp(42px, 4.4vw, 62px);
}

.faq-heading > p {
  font-size: 16px;
}

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

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

.faq summary {
  position: relative;
  padding: 24px 52px 24px 0;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

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

.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 50%;
  width: 15px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s ease;
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq details p {
  max-width: 760px;
  margin: -5px 55px 24px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.closing-section {
  padding: 60px max(var(--gut), calc((100vw - var(--max)) / 2)) 100px;
}

.closing-card {
  position: relative;
  overflow: hidden;
  min-height: 570px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px 25px;
  border-radius: 38px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(72, 168, 121, 0.3), transparent 30%),
    radial-gradient(circle at 85% 85%, rgba(82, 105, 239, 0.32), transparent 35%),
    #102f26;
  text-align: center;
  isolation: isolate;
}

.closing-card::before,
.closing-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}

.closing-card::before { transform: scale(0.65); }
.closing-card::after { transform: scale(1.15); }

.closing-card > img {
  width: 92px;
  height: 92px;
  margin-bottom: 25px;
  filter: drop-shadow(0 20px 28px rgba(5, 19, 15, 0.35));
  animation: closing-heart 3.2s ease-in-out infinite;
}

@keyframes closing-heart {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.03); }
}

.closing-card .eyebrow {
  margin-bottom: 13px;
  color: #a5dabf;
}

.closing-card h2 {
  font-size: clamp(53px, 6vw, 82px);
}

.closing-card > p {
  max-width: 640px;
  color: #c0d4cc;
}

.button-light {
  margin-top: 30px;
  color: var(--green-deep);
  background: #fff;
  box-shadow: 0 16px 35px rgba(4, 24, 17, 0.28);
}

.button-light > span:last-child {
  color: #fff;
  background: var(--green);
}

.closing-card > small {
  margin-top: 17px;
  color: #9eb6ad;
  font-size: 10px;
}

.site-footer {
  width: min(var(--max), calc(100% - var(--gut) * 2));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  padding: 45px 0 25px;
  border-top: 1px solid var(--line);
}

.footer-brand p {
  max-width: 300px;
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.footer-links > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links strong {
  margin-bottom: 3px;
  color: var(--ink-soft);
  font-size: 11px;
}

.footer-links a {
  width: fit-content;
  color: var(--muted);
  font-size: 10px;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--green);
  text-decoration: underline;
}

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
  color: var(--muted-light);
  font-size: 9px;
}

.anchor-alias {
  position: absolute;
  top: 0;
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(340px, 0.8fr) minmax(500px, 1.2fr);
    gap: 38px;
  }

  .app-window {
    min-height: 490px;
  }

  .search-app {
    min-height: 650px;
  }

  .setup-section {
    padding: 58px;
  }
}

@media (max-width: 980px) {
  .site-nav {
    padding: 9px 0;
  }

  .menu-toggle {
    display: block;
  }

  .menu-toggle[aria-expanded="true"] > span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] > span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] > span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav-links {
    position: fixed;
    inset: 67px 15px auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(251, 249, 244, 0.97);
    box-shadow: 0 24px 55px rgba(32, 49, 43, 0.16);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .nav-links.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .nav-links > a:not(.button) {
    padding: 13px 12px;
    border-bottom: 1px solid var(--line);
  }

  .nav-links > a::after {
    display: none;
  }

  .nav-links .button {
    margin-top: 10px;
  }

  .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 62px;
    padding-top: 135px;
  }

  .hero-copy {
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
  }

  .kicker,
  .hero-actions,
  .hero-promises {
    justify-content: center;
  }

  .hero-lede {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-product {
    width: min(820px, 100%);
    margin: 0 auto;
  }

  .app-window {
    min-height: 565px;
    transform: none;
  }

  .proof-bar {
    margin-top: 0;
  }

  .proof-bar > div {
    padding: 19px;
  }

  .proof-bar small {
    white-space: normal;
  }

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

  .benefit-card {
    min-height: 230px;
  }

  .setup-section,
  .memory-section,
  .privacy-section,
  .faq-section {
    grid-template-columns: 1fr;
  }

  .setup-copy,
  .memory-copy,
  .privacy-copy {
    max-width: 720px;
  }

  .setup-ui {
    min-height: 600px;
  }

  .search-experience {
    grid-template-columns: 1fr;
  }

  .search-explainer {
    flex-direction: row;
  }

  .explainer-line {
    flex: 1;
  }

  .explainer-line:not(:last-child)::after {
    left: auto;
    right: -7px;
    top: 30px;
    bottom: auto;
    width: 28px;
    height: 1px;
  }

  .memory-ui {
    max-width: 760px;
  }

  .privacy-section {
    padding: 60px;
  }

  .faq-heading {
    position: static;
    max-width: 620px;
  }
}

@media (max-width: 720px) {
  :root {
    --radius: 22px;
  }

  body {
    font-size: 16px;
  }

  .nav-inner {
    width: calc(100% - 32px);
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .hero {
    padding: 118px 18px 75px;
    gap: 48px;
  }

  .hero h1 {
    font-size: clamp(51px, 16vw, 70px);
  }

  .hero-lede {
    font-size: 17px;
  }

  .hero-actions {
    flex-direction: column;
    gap: 15px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-promises {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: start;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .requirements {
    max-width: 290px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-product {
    padding-bottom: 64px;
  }

  .app-window {
    min-height: 500px;
    aspect-ratio: auto;
    border-radius: 17px;
  }

  .app-titlebar {
    grid-template-columns: 1fr auto;
  }

  .app-mode {
    display: none;
  }

  .app-body {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    display: none;
  }

  .chat-heading {
    padding: 22px 17px 10px;
  }

  .conversation {
    padding: 8px 17px 0;
  }

  .composer {
    padding: 7px 15px 16px;
  }

  .privacy-toast {
    right: 8px;
    bottom: 70px;
    width: calc(100% - 16px);
  }

  .demo-controls {
    width: max-content;
  }

  .demo-controls button {
    padding: 7px 8px;
    font-size: 0;
  }

  .demo-controls button span {
    font-size: 8px;
  }

  .proof-bar {
    width: calc(100% - 36px);
    grid-template-columns: 1fr;
  }

  .proof-bar > div,
  .proof-bar > div:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .proof-bar > div:last-child {
    border-bottom: 0;
  }

  .story-section,
  .search-section,
  .free-section,
  .everyday-section,
  .faq-section {
    padding: 100px 20px;
  }

  .section-heading h2,
  .setup-copy h2,
  .search-intro h2,
  .memory-copy h2,
  .free-heading h2,
  .privacy-copy h2,
  .faq-heading h2 {
    font-size: clamp(40px, 13vw, 56px);
  }

  .privacy-visual {
    min-height: 470px;
    margin-top: 48px;
    border-radius: 25px;
  }

  .mini-laptop {
    width: 80%;
  }

  .file-card {
    width: 150px;
    padding: 10px;
  }

  .file-card > span {
    width: 36px;
    height: 40px;
  }

  .file-one { left: 2%; top: 6%; }
  .file-two { right: 1%; top: 25%; }
  .file-three { right: 3%; bottom: 8%; }
  .offline-pill { left: 3%; bottom: 12%; }

  .benefit-card {
    padding: 27px;
  }

  .setup-section {
    width: calc(100% - 24px);
    margin-bottom: 90px;
    gap: 30px;
    padding: 48px 22px;
    border-radius: 26px;
  }

  .setup-ui {
    min-height: 540px;
  }

  .setup-window {
    inset: 10px 0 0 9px;
  }

  .terminal-before {
    left: -9px;
    width: 210px;
  }

  .search-experience {
    margin-top: 48px;
  }

  .search-app {
    min-height: 660px;
    border-radius: 18px;
  }

  .search-chat {
    padding: 25px 15px 8px;
  }

  .search-question {
    max-width: 92%;
  }

  .live-step {
    grid-template-columns: 45px 1fr 28px;
    gap: 6px;
  }

  .search-composer {
    padding: 8px 15px 17px;
  }

  .search-tools em {
    display: none;
  }

  .citation-cards {
    flex-direction: column;
  }

  .search-explainer {
    flex-direction: column;
    padding: 18px;
  }

  .explainer-line:not(:last-child)::after {
    left: 17px;
    right: auto;
    top: 52px;
    bottom: -13px;
    width: 1px;
    height: auto;
  }

  .memory-section {
    width: calc(100% - 40px);
    padding: 100px 0;
    gap: 40px;
  }

  .memory-ui {
    min-height: 500px;
  }

  .memory-head {
    padding: 15px;
  }

  .memory-head button {
    display: none;
  }

  .memory-item {
    grid-template-columns: 38px 1fr;
  }

  .memory-item-icon {
    width: 38px;
    height: 38px;
  }

  .memory-item button {
    display: none;
  }

  .recall-bubble {
    right: -6px;
    width: 270px;
  }

  .free-card {
    margin-top: 45px;
    border-radius: 22px;
  }

  .free-card-top {
    padding: 22px 18px;
  }

  .forever-mark {
    width: 45px;
    height: 45px;
  }

  .free-features {
    grid-template-columns: 1fr;
    padding: 1px 18px 18px;
  }

  .free-features > div {
    min-height: 86px;
    padding: 16px 10px;
  }

  .trial-ribbon {
    margin: 0 18px;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }

  .trial-ribbon > span {
    width: fit-content;
    min-height: 34px;
    padding: 0 12px;
  }

  .free-action {
    flex-direction: column;
    align-items: stretch;
    padding: 23px 18px 27px;
    text-align: center;
  }

  .prompt-cloud {
    min-height: 700px;
    margin-top: 40px;
  }

  .prompt-card {
    max-width: 250px;
    font-size: 11px;
  }

  .prompt-one { left: 0; top: 5%; }
  .prompt-two { right: 0; top: 24%; }
  .prompt-three { left: 0; bottom: 29%; }
  .prompt-four { right: 0; bottom: 9%; }
  .prompt-five { display: none; }

  .prompt-center {
    width: 125px;
    height: 125px;
  }

  .privacy-section {
    width: calc(100% - 24px);
    margin-bottom: 100px;
    padding: 48px 22px;
    border-radius: 26px;
  }

  .faq-section {
    gap: 45px;
    padding-top: 10px;
  }

  .faq summary {
    padding: 21px 40px 21px 0;
    font-size: 16px;
  }

  .faq details p {
    margin-right: 0;
  }

  .closing-section {
    padding: 20px 12px 75px;
  }

  .closing-card {
    min-height: 530px;
    border-radius: 26px;
  }

  .closing-card h2 {
    font-size: clamp(51px, 15vw, 70px);
  }

  .site-footer {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-links {
    gap: 16px;
  }

  .footer-bottom {
    flex-wrap: wrap;
  }
}

@media (max-width: 390px) {
  .hero {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero h1 {
    font-size: 50px;
  }

  .app-window {
    min-height: 520px;
  }

  .message-user {
    width: 90%;
  }

  .scope-note {
    display: none;
  }

  .privacy-visual {
    min-height: 520px;
  }

  .file-card {
    width: 135px;
  }

  .file-card strong {
    font-size: 9px;
  }

  .offline-pill {
    max-width: 160px;
    border-radius: 14px;
  }

  .search-app {
    min-height: 690px;
  }

  .memory-footer em {
    display: none;
  }

  .price-zero {
    font-size: 24px;
  }

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

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero-product[data-stage="0"] .demo-search,
  .hero-product[data-stage="0"] .demo-answer,
  .hero-product[data-stage="1"] .demo-answer {
    max-height: none;
    margin-top: 13px;
    padding: 11px 12px;
    border-color: rgba(82, 105, 239, 0.18);
    opacity: 1;
    transform: none;
  }

  .hero-product .demo-toast {
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product-accurate UI replicas
   These components mirror the shipped renderer instead of inventing a second
   visual language for the website. The surrounding marketing page stays warm
   and light; every product surface uses Kynd's real default dark tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

.kynd-app-window,
.kynd-setup-window,
.kynd-settings-window {
  --k-bg: #1f1f23;
  --k-bg1: #25252a;
  --k-bg2: #2a2a30;
  --k-bg3: #34343b;
  --k-bg4: #3f3f47;
  --k-border: #3a3a42;
  --k-border-soft: rgba(255, 255, 255, 0.07);
  --k-border-strong: #4c4c56;
  --k-accent: #5b7cfa;
  --k-accent2: #93a9ff;
  --k-text: #e8e8eb;
  --k-text-dim: #b0afba;
  --k-muted: #90909b;
  --k-green: #46d18b;
  --k-red: #f0736e;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

.kynd-app-window *,
.kynd-setup-window *,
.kynd-settings-window * {
  box-sizing: border-box;
}

/* ── One real Chat shell, reused for the hero and search proof ───────────── */

.app-window.kynd-app-window,
.search-app.kynd-app-window,
.creative-app.kynd-app-window {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 1.689 / 1;
  border: 1px solid var(--k-border-strong);
  border-radius: 1.65cqw;
  color: var(--k-text);
  background: var(--k-bg);
  box-shadow: 0 40px 85px rgba(19, 21, 25, 0.31), inset 0 1px rgba(255, 255, 255, 0.045);
  transform: rotateY(-2.4deg) rotateX(1deg);
  transform-origin: center;
  container-type: inline-size;
}

.search-app.kynd-app-window,
.creative-app.kynd-app-window {
  min-height: 0;
  border-radius: 1.45cqw;
  transform: none;
}

.kynd-app-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 4.05% 22.65% minmax(0, 1fr);
  color: var(--k-text);
  background: var(--k-bg);
}

.kynd-window-dots {
  position: absolute;
  z-index: 8;
  left: 0.7cqw;
  top: 0.8cqw;
  display: flex;
  gap: 0.55cqw;
}

.kynd-window-dots i {
  display: block;
  width: 0.95cqw;
  height: 0.95cqw;
  min-width: 5px;
  min-height: 5px;
  border-radius: 50%;
  background: #ff5f57;
}

.kynd-window-dots i:nth-child(2) { background: #febc2e; }
.kynd-window-dots i:nth-child(3) { background: #28c840; }

.kynd-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqw;
  padding: 5.3cqw 0.45cqw 0.8cqw;
  border-right: 1px solid var(--k-border);
  background: var(--k-bg1);
}

.kynd-rail-logo {
  width: 2.55cqw;
  height: 2.55cqw;
  min-width: 14px;
  min-height: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 0.25cqw;
}

.kynd-rail-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.25cqw 0.7cqw rgba(91, 124, 250, 0.32));
}

.kynd-rail-button {
  position: relative;
  width: 2.75cqw;
  height: 2.75cqw;
  min-width: 15px;
  min-height: 15px;
  display: grid;
  place-items: center;
  border-radius: 0.7cqw;
  color: var(--k-muted);
  font-size: clamp(6px, 1.15cqw, 13px);
  line-height: 1;
}

.kynd-rail-button.active {
  color: var(--k-accent2);
  background: var(--k-bg3);
}

.kynd-rail-button.active::before {
  content: "";
  position: absolute;
  left: -0.45cqw;
  width: 0.2cqw;
  height: 1.55cqw;
  border-radius: 0 2px 2px 0;
  background: var(--k-accent);
}

.kynd-rail-spacer { flex: 1; }

.kynd-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--k-border);
  color: var(--k-text-dim);
  background: var(--k-bg1);
  font-size: clamp(6px, 1.02cqw, 12.5px);
}

.kynd-sidebar-top {
  height: 4.35cqw;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 1cqw;
  color: var(--k-text-dim);
  font-size: clamp(7px, 1.35cqw, 15px);
}

.kynd-new-chat {
  height: 3.65cqw;
  min-height: 22px;
  margin: 0.15cqw 1cqw 0.8cqw;
  display: flex;
  align-items: center;
  gap: 0.65cqw;
  padding: 0 0.95cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 0.8cqw;
  color: var(--k-text);
  background: var(--k-bg2);
  font-weight: 550;
}

.kynd-new-chat span { color: var(--k-accent2); font-size: 1.25em; }

.kynd-sidebar-search {
  min-height: 3.15cqw;
  margin: 0 1cqw 0.7cqw;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55cqw;
  padding: 0 0.8cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 0.75cqw;
  color: var(--k-muted);
  background: var(--k-bg);
}

.kynd-sidebar-search em,
.kynd-project-row em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kynd-sidebar-search b,
.kynd-project-row b { font-weight: 500; }

.kynd-project-row {
  min-height: 2.5cqw;
  margin: 0 1cqw 0.55cqw;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55cqw;
  padding: 0 0.65cqw;
  color: var(--k-text-dim);
}

.kynd-chat-list {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 0.65cqw;
}

.kynd-chat-list small {
  display: block;
  padding: 0.85cqw 0.75cqw 0.35cqw;
  color: var(--k-muted);
  font-size: 0.84em;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.kynd-chat-list div {
  overflow: hidden;
  padding: 0.55cqw 0.75cqw;
  border-radius: 0.55cqw;
  color: var(--k-text-dim);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kynd-chat-list div.active {
  color: var(--k-text);
  background: var(--k-bg3);
}

.kynd-sidebar-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45cqw;
  padding: 0.75cqw 0.9cqw;
  border-top: 1px solid var(--k-border);
}

.kynd-sidebar-foot span {
  min-width: 0;
  overflow: hidden;
  padding: 0.55cqw 0.45cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 0.65cqw;
  color: var(--k-text-dim);
  background: var(--k-bg2);
  font-size: 0.9em;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kynd-chat-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--k-text);
  background: var(--k-bg);
}

.kynd-chat-header {
  position: relative;
  z-index: 2;
  height: 4.35cqw;
  min-height: 24px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0 1.15cqw;
  background: linear-gradient(to bottom, var(--k-bg), transparent);
  font-size: clamp(6px, 1.02cqw, 12px);
}

.kynd-chat-header > strong {
  max-width: 22%;
  overflow: hidden;
  font-size: 1.05em;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kynd-mode-switch {
  position: absolute;
  left: 50%;
  top: 0.75cqw;
  display: flex;
  gap: 0.15cqw;
  padding: 0.25cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 999px;
  background: var(--k-bg2);
  transform: translateX(-50%);
  box-shadow: 0 0.2cqw 0.7cqw rgba(0, 0, 0, 0.18);
}

.kynd-mode-switch b,
.kynd-mode-switch span {
  min-width: 4.8cqw;
  padding: 0.38cqw 0.85cqw;
  border-radius: 999px;
  text-align: center;
  font-weight: 600;
}

.kynd-mode-switch b {
  color: var(--k-text);
  background: var(--k-bg4);
  box-shadow: inset 0 0 0 1px var(--k-border-soft);
}

.kynd-mode-switch span { color: var(--k-text-dim); }

.kynd-header-actions {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6cqw;
}

.kynd-model-chip,
.kynd-header-chip {
  height: 2.6cqw;
  min-height: 17px;
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  padding: 0 0.8cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 999px;
  color: var(--k-text-dim);
  background: var(--k-bg2);
  white-space: nowrap;
}

.kynd-model-chip {
  max-width: 15cqw;
  overflow: hidden;
}

.kynd-model-chip > i {
  width: 0.55cqw;
  height: 0.55cqw;
  min-width: 4px;
  min-height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--k-green);
  box-shadow: 0 0 0.55cqw rgba(70, 209, 139, 0.55);
}

.kynd-model-chip b,
.kynd-header-chip b {
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kynd-model-chip em {
  padding: 0.1cqw 0.35cqw;
  border-radius: 0.3cqw;
  color: var(--k-accent2);
  background: rgba(91, 124, 250, 0.14);
  font-size: 0.8em;
  font-style: normal;
  font-weight: 700;
}

.kynd-model-chip small { color: var(--k-muted); }
.kynd-header-chip { color: var(--k-text); }
.kynd-header-chip:first-of-type { color: var(--k-accent2); }

.kynd-empty-state {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55cqw;
  padding: 0 2cqw 2cqw;
  text-align: center;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.kynd-empty-state > img {
  width: 7cqw;
  height: 7cqw;
  min-width: 38px;
  min-height: 38px;
  margin-bottom: 0.6cqw;
  filter: drop-shadow(0 0.8cqw 2.1cqw rgba(91, 124, 250, 0.42));
  animation: kynd-ui-heart 6s ease-in-out infinite;
}

@keyframes kynd-ui-heart {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-0.35cqw) scale(1); }
  48% { transform: translateY(-0.35cqw) scale(1.055); }
  52% { transform: translateY(-0.35cqw) scale(1); }
}

.kynd-empty-state h2 {
  margin: 0;
  color: var(--k-text);
  font-size: clamp(11px, 1.85cqw, 22px);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.kynd-empty-state p {
  margin: 0 0 1.1cqw;
  color: var(--k-text-dim);
  font-size: clamp(6.5px, 1.08cqw, 13px);
}

.kynd-suggestions {
  width: min(41cqw, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8cqw;
}

.kynd-suggestions span {
  min-width: 0;
  padding: 0.9cqw 1.1cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 0.8cqw;
  color: var(--k-text-dim);
  background: var(--k-bg1);
  font-size: clamp(6px, 1.02cqw, 12.5px);
  text-align: left;
}

.kynd-suggestions b {
  display: block;
  margin-bottom: 0.2cqw;
  color: var(--k-accent2);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.kynd-thread {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  overflow: hidden;
  padding: 1.25cqw 3.3cqw 1cqw;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.kynd-user-bubble {
  max-width: 72%;
  margin-left: auto;
  padding: 0.85cqw 1.2cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 1.45cqw 1.45cqw 0.45cqw 1.45cqw;
  color: var(--k-text);
  background: var(--k-bg3);
  font-size: clamp(6.5px, 1.1cqw, 13.5px);
  line-height: 1.52;
}

.kynd-assistant-row {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.9cqw;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.kynd-assistant-row > img {
  width: 2.2cqw;
  height: 2.2cqw;
  min-width: 14px;
  min-height: 14px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0.2cqw 0.55cqw rgba(91, 124, 250, 0.32));
}

.kynd-assistant-body { min-width: 0; flex: 1; }

.kynd-tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5cqw;
  margin: 0 0 0.8cqw;
}

.kynd-tool-call {
  display: inline-flex;
  align-items: center;
  gap: 0.55cqw;
  min-width: 0;
  padding: 0.5cqw 0.9cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 999px;
  color: var(--k-text-dim);
  background: var(--k-bg1);
  font-size: clamp(6px, 0.98cqw, 12px);
  white-space: nowrap;
  transition: opacity 0.32s ease, transform 0.32s ease, border-color 0.32s ease;
}

.kynd-tool-call > b { color: var(--k-accent2); }
.kynd-tool-call > strong { font-weight: 500; }
.kynd-tool-call > em { color: var(--k-muted); font-size: 0.9em; font-style: normal; }
.kynd-tool-call > small {
  min-width: 1.35cqw;
  padding: 0 0.3cqw;
  border-radius: 999px;
  color: var(--k-accent2);
  background: rgba(91, 124, 250, 0.16);
  font-size: 0.8em;
  font-weight: 700;
  text-align: center;
}

.kynd-spinner {
  width: 0.9cqw;
  height: 0.9cqw;
  min-width: 6px;
  min-height: 6px;
  border: 1.5px solid rgba(91, 124, 250, 0.25);
  border-top-color: var(--k-accent2);
  border-radius: 50%;
  animation: kynd-ui-spin 0.7s linear infinite;
}

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

.kynd-answer {
  color: var(--k-text);
  font-size: clamp(6.5px, 1.08cqw, 13.5px);
  line-height: 1.6;
  transition: opacity 0.38s ease, transform 0.38s ease;
}

.kynd-answer p { margin: 0; }

.kynd-citations {
  margin-top: 0.75cqw !important;
  color: var(--k-text-dim);
  font-size: 0.82em;
}

.kynd-citations .md-link {
  color: var(--k-accent2);
  text-decoration: underline;
  text-decoration-color: rgba(147, 169, 255, 0.42);
  text-underline-offset: 0.18em;
}

.kynd-composer {
  flex: 0 0 auto;
  padding: 0 2.2cqw 0.65cqw;
}

.kynd-composer-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  padding: 0 0.35cqw 0.6cqw;
  color: var(--k-muted);
  font-size: clamp(5.5px, 0.9cqw, 11px);
}

.kynd-essential-tools {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4cqw;
}

.kynd-essential-tools span,
.kynd-private,
.kynd-thinking {
  display: inline-flex;
  align-items: center;
  gap: 0.35cqw;
  padding: 0.25cqw 0.7cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 999px;
  color: var(--k-muted);
  background: var(--k-bg2);
  white-space: nowrap;
}

.kynd-thinking i {
  position: relative;
  width: 1.9cqw;
  height: 1.05cqw;
  border: 1px solid var(--k-border-strong);
  border-radius: 999px;
  background: var(--k-bg4);
}

.kynd-thinking i::after {
  content: "";
  position: absolute;
  left: 0.15cqw;
  top: 0.13cqw;
  width: 0.7cqw;
  height: 0.7cqw;
  border-radius: 50%;
  background: var(--k-muted);
}

.kynd-effort {
  flex: 0 0 auto;
  display: flex;
  gap: 0.08cqw;
  padding: 0.18cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 999px;
  background: var(--k-bg2);
}

.kynd-effort span,
.kynd-effort b {
  padding: 0.25cqw 0.65cqw;
  border-radius: 999px;
  font-weight: 600;
}

.kynd-effort b {
  color: var(--k-accent2);
  background: var(--k-bg4);
  box-shadow: inset 0 0 0 1px var(--k-border-soft);
}

.kynd-input-box {
  min-height: 4.75cqw;
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 0.75cqw 0.8cqw 0.75cqw 1.15cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 1.45cqw;
  color: var(--k-muted);
  background: var(--k-bg2);
  box-shadow: 0 0.25cqw 0.8cqw rgba(0, 0, 0, 0.16);
  font-size: clamp(6px, 1.05cqw, 12.5px);
}

.kynd-input-box > em {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kynd-input-box > small { font-size: 1.1em; }

.kynd-input-box > b {
  width: 2.8cqw;
  height: 2.8cqw;
  min-width: 18px;
  min-height: 18px;
  display: grid;
  place-items: center;
  border-radius: 0.9cqw;
  color: #fff;
  background: var(--k-accent);
  font-size: 1.25em;
}

.kynd-footnote {
  padding-top: 0.4cqw;
  color: var(--k-muted);
  font-size: clamp(5px, 0.82cqw, 10.5px);
  text-align: center;
}

/* Hero state changes use the real empty/thread/tool states. */
.hero-product[data-stage="0"] .demo-thread { display: none; }
.hero-product[data-stage="1"] .kynd-empty-state,
.hero-product[data-stage="2"] .kynd-empty-state,
.hero-product[data-stage="3"] .kynd-empty-state { display: none; }
.hero-product[data-stage="1"] .demo-search { display: none; }
.hero-product[data-stage="2"] .demo-search,
.hero-product[data-stage="3"] .demo-search {
  display: flex;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
  transform: none;
  overflow: visible;
}
.hero-product[data-stage="2"] .demo-answer {
  display: none;
}
.hero-product[data-stage="3"] .demo-answer {
  display: block;
  max-height: none;
  margin: 0;
  padding: 0;
  opacity: 1;
  transform: none;
}
.hero-product[data-stage="2"] .fetch-call { display: none; }
.hero-product[data-stage="2"] .tool-done { display: none; }
.hero-product[data-stage="3"] .tool-running,
.hero-product[data-stage="3"] .kynd-spinner { display: none; }
.hero-product[data-stage="3"] .tool-done { display: inline; color: var(--k-green); }
.hero-product[data-stage="3"] .kynd-tool-call { border-color: rgba(70, 209, 139, 0.2); }

/* The search proof uses the same shipped tool pills, including real states. */
.kynd-search-thread {
  padding-top: 2.5cqw;
  gap: 2.1cqw;
}

.kynd-search-tools [data-search-step] {
  opacity: 0.18;
  transform: translateY(0.6cqw);
}

.kynd-search-tools [data-search-step].is-active {
  opacity: 1;
  transform: none;
}

.kynd-search-tools [data-search-step].is-done {
  border-color: rgba(70, 209, 139, 0.2);
}

.kynd-search-tools [data-search-step].is-done .kynd-spinner,
.kynd-search-tools [data-search-step].is-done > em { display: none; }

.kynd-search-tools [data-search-step].is-done::after {
  content: "done";
  color: var(--k-green);
  font-size: 0.9em;
}

.kynd-answer.search-result {
  display: block;
  margin: 0;
  color: var(--k-text);
  opacity: 0;
  transform: translateY(0.8cqw);
}

.kynd-answer.search-result.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Chat's real Markdown → image → video flow ─────────────────────────── */

.creative-section {
  position: relative;
  overflow: hidden;
  padding: 150px max(var(--gut), calc((100vw - var(--max)) / 2));
  background:
    radial-gradient(circle at 15% 12%, rgba(198, 236, 219, 0.72), transparent 30%),
    radial-gradient(circle at 88% 4%, rgba(231, 226, 255, 0.8), transparent 27%),
    var(--paper-warm);
}

.creative-intro {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.creative-intro .eyebrow { justify-content: center; }

.creative-intro h2 {
  margin: 0;
  font-size: clamp(45px, 5.2vw, 72px);
  font-weight: 620;
  letter-spacing: -0.058em;
  line-height: 1.02;
}

.creative-intro h2 span { color: var(--blue); }

.creative-intro > p:not(.creative-availability) {
  max-width: 750px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
  letter-spacing: -0.015em;
}

.creative-availability {
  width: fit-content;
  max-width: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 25px auto 0;
  padding: 10px 16px;
  border: 1px solid rgba(37, 107, 80, 0.16);
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 25px rgba(33, 72, 57, 0.05);
}

.creative-availability > span {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--green-dark);
  background: var(--mint);
  font-weight: 800;
}

.creative-availability strong { color: var(--green-dark); }

.creative-experience {
  max-width: 1180px;
  margin: 64px auto 0;
}

.creative-stage-controls {
  width: fit-content;
  max-width: 100%;
  display: flex;
  gap: 5px;
  margin: 0 auto 15px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 32px rgba(32, 49, 43, 0.08);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.creative-stage-controls button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 720;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.creative-stage-controls button span {
  color: var(--muted-light);
  font-family: var(--mono);
  font-size: 8px;
}

.creative-stage-controls button.active {
  color: #fff;
  background: var(--green-dark);
  box-shadow: 0 7px 18px rgba(18, 77, 58, 0.23);
}

.creative-stage-controls button.active span { color: rgba(255, 255, 255, 0.66); }

.creative-app.kynd-app-window {
  aspect-ratio: 1.72 / 1;
  border-radius: 1.45cqw;
  transform: none;
}

.creative-tools-chip > small {
  min-width: 1.35cqw;
  height: 1.35cqw;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--k-accent2);
  background: rgba(91, 124, 250, 0.16);
  font-size: 0.78em;
  font-weight: 700;
}

.creative-experience[data-creative-stage="0"] .creative-tools-chip > small { display: none; }

.kynd-creative-thread {
  gap: 0;
  padding-top: 1.45cqw;
  padding-bottom: 0.8cqw;
}

.creative-panel {
  display: none;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  gap: 1.15cqw;
  overflow: hidden;
}

.creative-experience[data-creative-stage="0"] [data-creative-panel="0"],
.creative-experience[data-creative-stage="1"] [data-creative-panel="1"],
.creative-experience[data-creative-stage="2"] [data-creative-panel="2"] {
  display: flex;
  animation: kynd-panel-in 0.4s cubic-bezier(.2, .7, .2, 1);
}

.creative-panel > .kynd-user-bubble { flex: 0 0 auto; }

/* These are the exact class names emitted by renderer/lib/markdown.js. */
.creative-app .cm-msg-content {
  color: var(--k-text);
  font-size: clamp(6.5px, 1.04cqw, 13px);
  line-height: 1.53;
}

.creative-app .md-h2 {
  margin: 0 0 0.35cqw;
  color: var(--k-text);
  font-size: 1.42em;
  font-weight: 700;
}

.creative-app .md-h3 {
  margin: 0.05cqw 0 0.2cqw;
  color: var(--k-text);
  font-size: 1.13em;
  font-weight: 650;
}

.creative-app .md-table-wrap {
  max-width: 100%;
  overflow: hidden;
  margin: 0.35cqw 0;
  border: 1px solid var(--k-border);
  border-radius: 0.7cqw;
}

.creative-app .md-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--k-text-dim);
  font-size: 0.92em;
}

.creative-app .md-table th {
  padding: 0.5cqw 0.9cqw;
  border-bottom: 2px solid var(--k-border);
  color: var(--k-text);
  background: var(--k-bg3);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.creative-app .md-table td {
  padding: 0.48cqw 0.9cqw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #c4c4c8;
}

.creative-app .md-check {
  display: flex;
  align-items: center;
  gap: 0.65cqw;
  padding: 0.22cqw 0;
}

.creative-app .md-check-box {
  width: 1.55cqw;
  height: 1.55cqw;
  min-width: 10px;
  min-height: 10px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--k-border);
  border-radius: 0.35cqw;
  color: transparent;
  background: var(--k-bg3);
  font-size: 0.8em;
}

.creative-app .md-check-box.checked {
  color: var(--k-green);
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.15);
  font-weight: 700;
}

.creative-app .md-check-text { color: var(--k-text); font-size: 1em; }
.creative-app .md-check-text.checked { color: var(--k-muted); text-decoration: line-through; }

.creative-app .creative-cursor {
  color: var(--k-accent2);
  animation: creative-cursor-blink 1s steps(1) infinite;
}

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

.creative-experience[data-creative-stage="0"][data-creative-phase="0"] .creative-markdown .md-table-wrap,
.creative-experience[data-creative-stage="0"][data-creative-phase="0"] .creative-markdown .md-h3,
.creative-experience[data-creative-stage="0"][data-creative-phase="0"] .creative-markdown .md-check,
.creative-experience[data-creative-stage="0"][data-creative-phase="1"] .creative-markdown .md-h3,
.creative-experience[data-creative-stage="0"][data-creative-phase="1"] .creative-markdown .md-check { display: none; }

.creative-experience[data-creative-stage="0"][data-creative-phase="2"] .creative-cursor { display: none; }

/* Exact Chat tool-chip structure and states from renderer/chat-mode.js. */
.creative-app .cm-tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5cqw;
  margin: 0.2cqw 0;
}

.creative-app .cm-tool { min-width: 0; max-width: 100%; }
.creative-app .cm-tool.cm-tool-wide { flex: 1 0 100%; }

.creative-app .cm-tool-chip {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.65cqw;
  padding: 0.52cqw 0.95cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 999px;
  color: var(--k-text-dim);
  background: var(--k-bg1);
  font-size: clamp(6px, 0.98cqw, 12px);
  white-space: nowrap;
}

.creative-app .cm-tool-icon { color: var(--k-accent2); font-size: 1.05em; }
.creative-app .cm-tool-label { overflow: hidden; color: var(--k-text-dim); text-overflow: ellipsis; }
.creative-app .cm-tool-state { overflow: hidden; color: var(--k-muted); font-size: 0.9em; text-overflow: ellipsis; }

.creative-app .cm-spinner {
  width: 0.9cqw;
  height: 0.9cqw;
  min-width: 6px;
  min-height: 6px;
  flex: 0 0 auto;
  border: 2px solid rgba(91, 124, 250, 0.25);
  border-top-color: var(--k-accent2);
  border-radius: 50%;
  animation: kynd-ui-spin 0.7s linear infinite;
}

.creative-app .cm-tool-chip.done .cm-tool-state { color: var(--k-green); }

.creative-app .cm-tool-images {
  max-height: 0;
  display: flex;
  gap: 0.65cqw;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(0.7cqw);
  transition: max-height 0.45s ease, margin-top 0.45s ease, opacity 0.4s ease, transform 0.4s ease;
}

.creative-app .cm-tool-images img {
  width: min(25.4cqw, 100%);
  max-height: 20.3cqw;
  object-fit: cover;
  border: 1px solid var(--k-border-soft);
  border-radius: 0.8cqw;
  box-shadow: 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.25);
}

.creative-experience[data-creative-stage="1"][data-creative-phase="3"] .cm-tool-images {
  max-height: 23cqw;
  margin-top: 0.7cqw;
  opacity: 1;
  transform: none;
}

.creative-plan-copy,
.creative-approval,
.creative-production-row,
.creative-app .cm-tool-playables {
  opacity: 0;
  transform: translateY(0.65cqw);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.creative-plan-copy { margin-top: 0.55cqw; color: var(--k-text-dim) !important; }

.creative-experience[data-creative-stage="2"]:not([data-creative-phase="0"]) .creative-plan-copy,
.creative-experience[data-creative-stage="2"]:not([data-creative-phase="0"]) .creative-approval,
.creative-experience[data-creative-stage="2"][data-creative-phase="2"] .creative-production-row,
.creative-experience[data-creative-stage="2"][data-creative-phase="3"] .creative-production-row,
.creative-experience[data-creative-stage="2"][data-creative-phase="4"] .creative-production-row,
.creative-experience[data-creative-stage="2"][data-creative-phase="4"] .cm-tool-playables {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.creative-video-panel { gap: 0.8cqw; }
.creative-video-panel .creative-approval { margin-top: 0; }

.creative-app .cm-tool-playables {
  max-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65cqw;
  margin-top: 0;
  overflow: hidden;
}

.creative-experience[data-creative-stage="2"][data-creative-phase="4"] .cm-tool-playables {
  max-height: 25cqw;
  margin-top: 0.65cqw;
}

.creative-app .cm-play-item {
  width: min(39cqw, 100%);
  overflow: hidden;
  border: 1px solid var(--k-border-soft);
  border-radius: 0.8cqw;
  background: var(--k-bg2);
  box-shadow: 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.25);
}

.creative-app .cm-play-media {
  width: 100%;
  max-height: 27.1cqw;
  display: block;
  object-fit: cover;
  background: #000;
}

.creative-app .cm-play-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65cqw;
  padding: 0.5cqw 0.8cqw;
  border-top: 1px solid var(--k-border-soft);
  color: var(--k-muted);
  font-size: clamp(5.5px, 0.88cqw, 11px);
}

.creative-app .cm-play-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--k-text-dim);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.creative-app .cm-play-btn {
  flex: 0 0 auto;
  padding: 0.18cqw 0.65cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 0.45cqw;
  color: var(--k-text-dim);
  background: transparent;
  font-size: 0.95em;
}

.creative-selected-tool { display: none !important; }
.creative-experience[data-creative-stage="1"] .creative-image-selected,
.creative-experience[data-creative-stage="2"] .creative-video-selected { display: inline-flex !important; color: var(--k-accent2); }

.creative-proof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 14px 18px 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 35px rgba(32, 49, 43, 0.06);
}

.creative-proof > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.creative-proof > span i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(37, 107, 80, 0.1);
}

.creative-proof p { margin: 0; font-size: 11px; line-height: 1.45; }
.creative-proof small { max-width: 265px; color: var(--muted); font-size: 9px; line-height: 1.4; text-align: right; }

/* ── The shipped setup wizard ───────────────────────────────────────────── */

.setup-ui {
  min-height: 560px;
}

.setup-window.kynd-setup-window {
  --s-bg: #0a0a0f;
  --s-surface: #111118;
  --s-surface2: #1a1a24;
  --s-border: rgba(255, 255, 255, 0.07);
  --s-accent: #7c6af7;
  --s-accent2: #4fc3f7;
  --s-accent3: #a78bfa;
  --s-green: #34d399;
  --s-text: #e8e8f0;
  --s-muted: #7a7a9a;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  color: var(--s-text);
  background: var(--s-bg);
  box-shadow: 0 35px 70px rgba(2, 12, 17, 0.38);
  transform: none;
  container-type: inline-size;
}

.kynd-wizard-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.1cqw 3cqw 0;
}

.kynd-wizard-header > div {
  display: flex;
  align-items: center;
  gap: 0.85cqw;
  font-size: clamp(10px, 1.5cqw, 18px);
}

.kynd-wizard-header img {
  width: 3.4cqw;
  height: 3.4cqw;
  min-width: 26px;
  min-height: 26px;
  filter: drop-shadow(0 0 1.1cqw rgba(42, 166, 255, 0.3));
}

.kynd-wizard-header > span {
  width: 2.5cqw;
  height: 2.5cqw;
  display: grid;
  place-items: center;
  border: 1px solid var(--s-border);
  border-radius: 0.75cqw;
  color: var(--s-muted);
  background: rgba(255, 255, 255, 0.03);
  font-size: clamp(9px, 1.35cqw, 16px);
}

.kynd-wizard-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 1.8cqw 3cqw 1.2cqw;
}

.kynd-wizard-progress {
  height: 0.38cqw;
  min-height: 3px;
  overflow: hidden;
  margin: 0 0 1.35cqw;
  border-radius: 999px;
  background: var(--s-surface2);
}

.kynd-wizard-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--s-accent), var(--s-accent2));
  transition: width 0.65s cubic-bezier(.2, .7, .2, 1);
}

.setup-ui[data-setup-stage="1"] .kynd-wizard-progress i { width: 40%; }
.setup-ui[data-setup-stage="2"] .kynd-wizard-progress i { width: 80%; }

.kynd-wizard-steps {
  display: flex;
  align-items: center;
  margin-bottom: 1.6cqw;
  color: var(--s-muted);
  font-size: clamp(6px, 1.05cqw, 13px);
}

.kynd-wizard-steps > span {
  display: flex;
  align-items: center;
  gap: 0.48cqw;
  white-space: nowrap;
}

.kynd-wizard-steps > span > b {
  width: 2.1cqw;
  height: 2.1cqw;
  min-width: 14px;
  min-height: 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--s-border);
  border-radius: 50%;
  color: var(--s-muted);
  background: var(--s-surface2);
  font-size: 0.85em;
}

.kynd-wizard-steps > span > em {
  font-style: normal;
  font-weight: 550;
}

.kynd-wizard-steps > i {
  flex: 1;
  height: 1px;
  min-width: 0.8cqw;
  margin: 0 0.5cqw;
  background: var(--s-border);
}

.setup-ui[data-setup-stage="0"] .kynd-wizard-steps > span:nth-of-type(1),
.setup-ui[data-setup-stage="1"] .kynd-wizard-steps > span:nth-of-type(3),
.setup-ui[data-setup-stage="2"] .kynd-wizard-steps > span:nth-of-type(5) { color: var(--s-text); }

.setup-ui[data-setup-stage="0"] .kynd-wizard-steps > span:nth-of-type(1) > b,
.setup-ui[data-setup-stage="1"] .kynd-wizard-steps > span:nth-of-type(3) > b,
.setup-ui[data-setup-stage="2"] .kynd-wizard-steps > span:nth-of-type(5) > b {
  color: #fff;
  border-color: var(--s-accent);
  background: var(--s-accent);
}

.setup-ui[data-setup-stage="1"] .kynd-wizard-steps > span:nth-of-type(-n+2),
.setup-ui[data-setup-stage="2"] .kynd-wizard-steps > span:nth-of-type(-n+4) { color: var(--s-green); }

.setup-ui[data-setup-stage="1"] .kynd-wizard-steps > span:nth-of-type(-n+2) > b,
.setup-ui[data-setup-stage="2"] .kynd-wizard-steps > span:nth-of-type(-n+4) > b {
  color: var(--s-green);
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.15);
}

.kynd-wizard-panel { display: none; }
.setup-ui[data-setup-stage="0"] [data-setup-panel="0"],
.setup-ui[data-setup-stage="1"] [data-setup-panel="1"],
.setup-ui[data-setup-stage="2"] [data-setup-panel="2"] {
  display: block;
  animation: kynd-panel-in 0.42s cubic-bezier(.2, .7, .2, 1);
}

@keyframes kynd-panel-in {
  from { opacity: 0; transform: translateY(0.8cqw); }
  to { opacity: 1; transform: none; }
}

.wizard-welcome {
  padding: 0.3cqw 0 0;
  text-align: center;
}

.wizard-welcome > img {
  width: 6.9cqw;
  height: 6.9cqw;
  min-width: 54px;
  min-height: 54px;
  margin: 0 auto 0.75cqw;
  filter: drop-shadow(0 0 2cqw rgba(42, 166, 255, 0.34));
}

.wizard-welcome h3,
.wizard-models > h3,
.wizard-calibrate > h3 {
  margin: 0;
  color: var(--s-text);
  font-size: clamp(17px, 2.45cqw, 30px);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.wizard-welcome h3 span {
  color: var(--s-accent3);
  background: linear-gradient(135deg, var(--s-accent), var(--s-accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wizard-welcome > p,
.wizard-models > p,
.wizard-calibrate > p {
  max-width: 46cqw;
  margin: 0.45cqw auto 1cqw;
  color: var(--s-muted);
  font-size: clamp(7px, 1.12cqw, 14px);
  line-height: 1.55;
}

.kynd-prep-status {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 0.65cqw;
  margin: 0 auto 1.1cqw;
  padding: 0.65cqw 1.1cqw;
  border: 1px solid var(--s-border);
  border-radius: 0.75cqw;
  color: var(--s-muted);
  background: var(--s-surface);
  font-size: clamp(6px, 0.98cqw, 12px);
}

.kynd-prep-status i,
.kynd-calibrate-status > i {
  width: 1cqw;
  height: 1cqw;
  min-width: 7px;
  min-height: 7px;
  border: 1.5px solid var(--s-border);
  border-top-color: var(--s-accent);
  border-radius: 50%;
  animation: kynd-ui-spin 0.7s linear infinite;
}

.kynd-calibrate-status.is-complete > i {
  display: grid;
  place-items: center;
  border-color: rgba(52, 211, 153, 0.4);
  color: var(--s-green);
  background: rgba(52, 211, 153, 0.12);
  font-size: 0.85em;
  animation: none;
}

.kynd-welcome-grid {
  max-width: 48cqw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85cqw;
}

.kynd-welcome-grid article {
  min-width: 0;
  padding: 1.05cqw 0.8cqw;
  border: 1px solid var(--s-border);
  border-radius: 0.9cqw;
  background: var(--s-surface);
}

.kynd-welcome-grid article > b {
  display: block;
  margin-bottom: 0.3cqw;
  color: var(--s-accent2);
  font-size: clamp(14px, 2cqw, 24px);
}

.kynd-welcome-grid strong {
  display: block;
  font-size: clamp(6.5px, 1.02cqw, 13px);
}

.kynd-welcome-grid small {
  display: block;
  margin-top: 0.25cqw;
  color: var(--s-muted);
  font-size: clamp(5px, 0.82cqw, 10.5px);
  line-height: 1.4;
}

.wizard-models > h3,
.wizard-calibrate > h3 { font-size: clamp(14px, 2cqw, 24px); }
.wizard-models > p,
.wizard-calibrate > p { max-width: none; margin-left: 0; }

.kynd-hardware-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1cqw;
  margin-bottom: 1cqw;
  padding: 1cqw 1.25cqw;
  border: 1px solid var(--s-border);
  border-radius: 1cqw;
  background: var(--s-surface);
}

.kynd-hardware-card > span {
  width: 3.5cqw;
  height: 3.5cqw;
  display: grid;
  place-items: center;
  border: 1px solid rgba(79, 195, 247, 0.18);
  border-radius: 0.9cqw;
  color: var(--s-accent2);
  background: rgba(79, 195, 247, 0.07);
}

.kynd-hardware-card > div { display: flex; flex-direction: column; }
.kynd-hardware-card strong { font-size: clamp(8px, 1.25cqw, 15px); }
.kynd-hardware-card small { color: var(--s-muted); font-size: clamp(5.5px, 0.9cqw, 11px); }
.kynd-hardware-card > b {
  padding: 0.45cqw 1cqw;
  border: 1px solid rgba(124, 106, 247, 0.3);
  border-radius: 0.65cqw;
  color: var(--s-accent3);
  background: rgba(124, 106, 247, 0.12);
  font-size: clamp(12px, 1.8cqw, 22px);
  text-align: center;
}
.kynd-hardware-card > b small { display: block; font-size: 0.42em; }

.kynd-model-card {
  position: relative;
  display: grid;
  grid-template-columns: 6cqw 1fr auto;
  align-items: center;
  gap: 1cqw;
  padding: 1.1cqw 1.2cqw 2.6cqw;
  border: 1px solid rgba(233, 192, 92, 0.26);
  border-radius: 0.9cqw;
  background: linear-gradient(165deg, rgba(233, 192, 92, 0.05), var(--s-surface2) 46%);
}

.kynd-model-role {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25cqw;
  color: #d5b459;
  font-size: clamp(11px, 1.7cqw, 20px);
  text-align: center;
}

.kynd-model-role small {
  max-width: 6cqw;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.kynd-model-card > div > strong {
  display: block;
  overflow: hidden;
  color: var(--s-text);
  font-size: clamp(7px, 1.12cqw, 13.5px);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kynd-model-card > div > small {
  display: block;
  margin-top: 0.2cqw;
  color: var(--s-muted);
  font-size: clamp(5.5px, 0.88cqw, 11.5px);
}

.kynd-model-card p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35cqw;
  margin: 0.55cqw 0 0;
}

.kynd-model-card p em {
  padding: 0.18cqw 0.55cqw;
  border: 1px solid rgba(124, 106, 247, 0.26);
  border-radius: 0.4cqw;
  color: #b6a7f5;
  background: rgba(124, 106, 247, 0.06);
  font-size: clamp(5px, 0.75cqw, 10px);
  font-style: normal;
}

.kynd-model-score {
  width: 4.4cqw;
  height: 4.4cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--s-text);
  background: radial-gradient(circle, var(--s-surface2) 58%, transparent 60%), conic-gradient(#e9c05c 92%, rgba(255,255,255,.07) 0);
  font-family: var(--mono);
  font-size: clamp(8px, 1.1cqw, 14px);
}

.kynd-model-score small { font-size: 0.55em; }

.kynd-download-track {
  position: absolute;
  left: 1.2cqw;
  right: 1.2cqw;
  bottom: 1.3cqw;
  height: 0.36cqw;
  min-height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.kynd-download-track i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--s-accent), var(--s-accent2));
  animation: kynd-download 3s ease-in-out infinite alternate;
}

@keyframes kynd-download { from { width: 54%; } to { width: 78%; } }

.kynd-download-copy {
  position: absolute;
  left: 1.2cqw;
  right: 1.2cqw;
  bottom: 0.2cqw;
  display: flex;
  justify-content: space-between;
  color: var(--s-muted);
  font-size: clamp(5px, 0.72cqw, 9.5px);
}

.kynd-calibrate-status {
  min-height: 11cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  margin-top: 1.5cqw;
  border: 1px solid var(--s-border);
  border-radius: 1cqw;
  background: var(--s-surface);
  text-align: center;
}

.kynd-calibrate-status > i {
  width: 2.5cqw;
  height: 2.5cqw;
  min-width: 18px;
  min-height: 18px;
}

.kynd-calibrate-status strong { font-size: clamp(8px, 1.3cqw, 16px); }
.kynd-calibrate-status small { max-width: 43cqw; color: var(--s-muted); font-size: clamp(5.5px, 0.9cqw, 11.5px); }

.kynd-calibrate-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8cqw;
  margin-top: 1cqw;
}

.kynd-calibrate-metrics span {
  padding: 0.7cqw;
  border: 1px solid var(--s-border);
  border-radius: 0.75cqw;
  background: var(--s-surface2);
  text-align: center;
}

.kynd-calibrate-metrics b {
  display: block;
  color: var(--s-accent2);
  font-family: var(--mono);
  font-size: clamp(10px, 1.6cqw, 19px);
}

.kynd-calibrate-metrics small { color: var(--s-muted); font-size: clamp(5px, 0.76cqw, 10px); }

.kynd-wizard-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2cqw 3cqw 1.7cqw;
  border-top: 1px solid var(--s-border);
}

.kynd-wizard-footer button {
  min-height: 2.9cqw;
  padding: 0 1.1cqw;
  border: 1px solid var(--s-border);
  border-radius: 0.65cqw;
  color: var(--s-muted);
  background: var(--s-surface2);
  font-size: clamp(6px, 0.95cqw, 12px);
}

.kynd-wizard-footer button:last-child {
  color: #fff;
  border-color: var(--s-accent);
  background: var(--s-accent);
}

/* ── The real Settings → Memory surface ─────────────────────────────────── */

.memory-window.kynd-settings-window {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 22.8% minmax(0, 1fr);
  overflow: hidden;
  aspect-ratio: 1.387 / 1;
  border: 1px solid var(--k-border-strong);
  border-radius: 1.7cqw;
  color: var(--k-text);
  background: var(--k-bg1);
  box-shadow: 0 30px 70px rgba(24, 28, 34, 0.26);
  container-type: inline-size;
}

.kynd-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 0.22cqw;
  padding: 1.5cqw 0.95cqw;
  border-right: 1px solid var(--k-border);
  background: var(--k-bg2);
}

.kynd-settings-nav > strong {
  display: flex;
  align-items: center;
  gap: 0.75cqw;
  padding: 0.2cqw 0.75cqw 1.25cqw;
  color: var(--k-text);
  font-size: clamp(9px, 1.55cqw, 14px);
}

.kynd-settings-nav img {
  width: 2.15cqw;
  height: 2.15cqw;
  min-width: 15px;
  min-height: 15px;
}

.kynd-settings-nav > span {
  padding: 0.72cqw 0.9cqw;
  border-radius: 0.7cqw;
  color: var(--k-text-dim);
  font-size: clamp(6.5px, 1.15cqw, 13px);
  font-weight: 500;
  white-space: nowrap;
}

.kynd-settings-nav > span.active {
  color: var(--k-accent2);
  background: rgba(91, 124, 250, 0.14);
  font-weight: 600;
}

.kynd-settings-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.kynd-settings-pane > header {
  height: 5.6cqw;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0 1.6cqw 0 2cqw;
  border-bottom: 1px solid var(--k-border-soft);
}

.kynd-settings-pane > header h3 {
  flex: 1;
  margin: 0;
  color: var(--k-text);
  font-size: clamp(11px, 1.75cqw, 16px);
  font-weight: 650;
}

.kynd-settings-pane > header span {
  color: var(--k-muted);
  font-size: clamp(12px, 1.9cqw, 18px);
}

.kynd-memory-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 1.25cqw 2cqw 1.5cqw;
}

.kynd-settings-label {
  display: block;
  margin: 0.45cqw 0 0.55cqw;
  color: var(--k-muted);
  font-size: clamp(5.5px, 0.95cqw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.kynd-memory-body > p:not(.kynd-memory-status) {
  margin: 0 0 0.8cqw;
  color: var(--k-muted);
  font-size: clamp(6px, 1cqw, 11px);
  line-height: 1.5;
}

.kynd-memory-actions {
  display: flex;
  gap: 0.6cqw;
}

.kynd-memory-actions button {
  padding: 0.52cqw 0.8cqw;
  border: 1px solid var(--k-border);
  border-radius: 0.55cqw;
  color: var(--k-text);
  background: var(--k-bg3);
  font-size: clamp(5.5px, 0.9cqw, 11px);
}

.kynd-memory-actions button:last-child { color: #e5484d; }

.kynd-memory-status {
  min-height: 1.3cqw;
  margin: 0.55cqw 0 0.7cqw;
  color: var(--k-muted);
  font-size: clamp(5.5px, 0.9cqw, 11px);
  transition: color 0.25s ease;
}

.kynd-memory-status.updating { color: var(--k-accent2); }
.kynd-memory-status.updated { color: var(--k-green); }

.kynd-dossier {
  max-height: 10.2cqw;
  overflow: hidden;
  padding: 0.8cqw 1cqw;
  border: 1px solid var(--k-border);
  border-radius: 0.7cqw;
  background: var(--k-bg2);
  font-size: clamp(5.7px, 0.95cqw, 12px);
  line-height: 1.48;
}

.kynd-dossier strong { display: block; color: var(--k-text); }
.kynd-dossier p { margin: 0 0 0.4cqw; color: var(--k-text-dim); }
.kynd-dossier p:last-child { margin-bottom: 0; }

.memory-window .memory-list {
  display: flex;
  flex-direction: column;
  gap: 0.25cqw;
  padding: 0;
}

.memory-window .memory-item {
  min-height: 2.8cqw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.65cqw;
  padding: 0.25cqw 0;
  border: 0;
  border-bottom: 1px solid var(--k-border);
  border-radius: 0;
  color: var(--k-text);
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: color 0.25s ease, background 0.25s ease, padding 0.25s ease;
}

.memory-window .memory-item.active {
  padding-left: 0.55cqw;
  padding-right: 0.3cqw;
  color: var(--k-text);
  background: rgba(91, 124, 250, 0.08);
  box-shadow: inset 0.18cqw 0 var(--k-accent);
  transform: none;
}

.memory-window .memory-item > span {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(5.8px, 0.96cqw, 11px);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.memory-window .memory-item time {
  color: var(--k-muted);
  font-size: clamp(5px, 0.82cqw, 10px);
}

.memory-window .memory-item button {
  width: 2cqw;
  height: 2cqw;
  min-width: 15px;
  min-height: 15px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0.45cqw;
  color: var(--k-muted);
  background: transparent;
  font-size: clamp(7px, 1.15cqw, 12px);
}

/* Product replicas retain their geometry as they scale; only low-value labels
   yield on narrow pages, just as the desktop app's container queries do. */
@media (max-width: 980px) {
  .app-window.kynd-app-window,
  .search-app.kynd-app-window,
  .creative-app.kynd-app-window { transform: none; }
  .setup-ui { min-height: 610px; }
  .memory-ui { max-width: 820px; min-height: 570px; }
}

@media (max-width: 720px) {
  .app-window.kynd-app-window,
  .search-app.kynd-app-window,
  .creative-app.kynd-app-window {
    min-height: 0;
    border-radius: 12px;
  }
  .kynd-header-chip b,
  .kynd-thinking,
  .kynd-model-chip > em { display: none; }
  .kynd-composer { padding-left: 1.2cqw; padding-right: 1.2cqw; }
  .kynd-wizard-steps > span > em { display: none; }
  .kynd-wizard-steps > i { margin-left: 0.25cqw; margin-right: 0.25cqw; }
  .setup-ui { min-height: 480px; }
  .setup-window.kynd-setup-window { border-radius: 16px; }
  .memory-ui { min-height: 390px; padding-top: 20px; }
  .memory-window.kynd-settings-window { border-radius: 14px; }
  .kynd-settings-nav > span { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 390px) {
  .kynd-header-actions { gap: 0.25cqw; }
  .kynd-header-chip { padding-left: 0.45cqw; padding-right: 0.45cqw; }
  .kynd-essential-tools span:nth-child(2),
  .kynd-thinking { display: none; }
  .setup-ui { min-height: 440px; }
  .kynd-welcome-grid article { padding-left: 0.4cqw; padding-right: 0.4cqw; }
  .kynd-settings-nav > span { padding-left: 0.45cqw; padding-right: 0.45cqw; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product[data-stage="0"] .demo-thread { display: flex; }
  .hero-product[data-stage="0"] .kynd-empty-state { display: none; }
  .hero-product[data-stage="0"] .demo-search,
  .hero-product[data-stage="0"] .demo-answer {
    display: flex;
    max-height: none;
    margin: 0;
    padding: 0;
    opacity: 1;
    transform: none;
  }
  .hero-product[data-stage="0"] .demo-answer { display: block; }
  .kynd-search-tools [data-search-step] { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .creative-section { padding: 120px 32px; }
  .creative-experience { margin-top: 52px; }
  .creative-proof { grid-template-columns: auto minmax(0, 1fr); }
  .creative-proof small { grid-column: 2; max-width: none; text-align: left; }
}

@media (max-width: 720px) {
  .creative-section { padding: 100px 20px; }

  .creative-intro h2 { font-size: clamp(40px, 13vw, 56px); }

  .creative-availability {
    align-items: flex-start;
    border-radius: 18px;
    text-align: left;
  }

  .creative-stage-controls {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 18px;
    scrollbar-width: none;
  }

  .creative-stage-controls::-webkit-scrollbar { display: none; }
  .creative-stage-controls button { flex: 0 0 auto; padding: 8px 12px; }

  /* On a phone the marketing preview crops into Chat's main pane so the real
     desktop controls remain legible instead of shrinking to postage stamps. */
  .creative-app.kynd-app-window { aspect-ratio: 0.92 / 1; }
  .creative-app .kynd-app-shell { grid-template-columns: minmax(0, 1fr); }
  .creative-app .kynd-rail,
  .creative-app .kynd-sidebar { display: none; }
  .creative-app .kynd-chat-header { height: 7cqw; }
  .creative-app .kynd-mode-switch { top: 1.3cqw; }
  .creative-app .kynd-thread { padding: 2.4cqw 4cqw 1.3cqw; }
  .creative-app .kynd-composer { padding: 0 2.4cqw 1.2cqw; }
  .creative-app .cm-msg-content,
  .creative-app .cm-tool-chip { font-size: clamp(7px, 2.6cqw, 11px); }
  .creative-app .cm-tool-images img,
  .creative-app .cm-play-item { width: min(58cqw, 100%); }
  .creative-app .cm-tool-images img { max-height: 33cqw; }
  .creative-experience[data-creative-stage="1"][data-creative-phase="3"] .cm-tool-images { max-height: 36cqw; }
  .creative-app .cm-play-media { max-height: 31cqw; }
  .creative-experience[data-creative-stage="2"][data-creative-phase="4"] .cm-tool-playables { max-height: 39cqw; }
  .creative-app .kynd-footnote { font-size: 1.6cqw; }

  .creative-proof {
    grid-template-columns: 1fr;
    gap: 7px;
    margin: 12px 0 0;
  }

  .creative-proof small { grid-column: auto; text-align: left; }
}

@media (max-width: 390px) {
  .creative-stage-controls button { font-size: 9.5px; }
  .creative-stage-controls button span { display: none; }
  .creative-app .creative-plan-copy { display: none; }
  .creative-app .kynd-header-chip:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .creative-panel,
  .creative-app .cm-tool-images,
  .creative-plan-copy,
  .creative-approval,
  .creative-production-row,
  .creative-app .cm-tool-playables { animation: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Source-locked Chat details
   These final rules intentionally track renderer/index.html, chat-mode.css,
   markdown.js and video-studio.js. Marketing copy can change; the dark product
   surface should keep speaking the app's exact visual language.
   ═══════════════════════════════════════════════════════════════════════════ */

.kynd-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.kynd-app-window {
  font-family: "SF Pro Text", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.kynd-app-window .ic,
.search-honesty .ic,
.search-route .ic,
.search-saved-card .ic {
  width: 1.27cqw;
  height: 1.27cqw;
  flex: none;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kynd-heart-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.kynd-empty-heart {
  width: 7cqw;
  height: 7cqw;
  min-width: 38px;
  min-height: 38px;
  display: block;
  margin-bottom: 0.6cqw;
  filter: drop-shadow(0 0.8cqw 2.1cqw rgba(91, 124, 250, 0.42));
  animation: kynd-ui-heart 6s ease-in-out infinite;
}

.kynd-rail-logo {
  width: 2.54cqw;
  height: 2.54cqw;
}

.kynd-rail-button .ic { width: 1.44cqw; height: 1.44cqw; }
.kynd-sidebar-top .ic { width: 1.27cqw; height: 1.27cqw; }
.kynd-new-chat > .ic { width: 1.27cqw; height: 1.27cqw; color: var(--k-accent2); }

.kynd-sidebar-search-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  margin: 0 1cqw 0.7cqw;
}

.kynd-sidebar-search-row .kynd-sidebar-search {
  min-width: 0;
  flex: 1;
  margin: 0;
  grid-template-columns: auto minmax(0, 1fr);
}

.kynd-folder-button {
  width: 2.2cqw;
  height: 2.2cqw;
  min-width: 16px;
  min-height: 16px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 0.55cqw;
  color: var(--k-muted);
}

.kynd-folder-button .ic { width: 1.18cqw; height: 1.18cqw; }
.kynd-project-row > .ic:first-child { width: 1.18cqw; height: 1.18cqw; }
.kynd-project-row > .ic:last-child { width: 1cqw; height: 1cqw; }

.kynd-sidebar-foot span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45cqw;
}

.kynd-sidebar-foot .ic { width: 1.1cqw; height: 1.1cqw; }
.kynd-header-chip > .ic { width: 1.18cqw; height: 1.18cqw; color: var(--k-accent2); }
.kynd-model-chip > .ic { width: 1cqw; height: 1cqw; color: var(--k-muted); }

.kynd-model-chip {
  max-width: 23.7cqw;
}

.kynd-thread {
  width: min(64.4cqw, 100%);
  margin: 0 auto;
  gap: 1.86cqw;
  padding: 0.85cqw 2.37cqw 2.54cqw;
}

.kynd-user-bubble {
  max-width: 82%;
  padding: 0.85cqw 1.27cqw;
  border-radius: 1.52cqw 1.52cqw 0.51cqw 1.52cqw;
}

.kynd-reply-heart {
  width: 2.2cqw;
  height: 2.2cqw;
  min-width: 14px;
  min-height: 14px;
  flex: 0 0 auto;
  margin-top: 0.17cqw;
  filter: drop-shadow(0 0.17cqw 0.51cqw rgba(91, 124, 250, 0.35));
}

.kynd-assistant-row > .kynd-reply-heart + .kynd-assistant-body { min-width: 0; }

.kynd-composer {
  width: min(64.4cqw, calc(100% - 4.74cqw));
  margin: 0 auto;
  padding: 0 0 0.68cqw;
}

.kynd-composer-row {
  align-items: flex-start;
  gap: 0.85cqw;
  padding: 0 0.34cqw 0.68cqw;
}

.kynd-essential-tools { gap: 0.51cqw; }

.kynd-essential-tools span,
.kynd-private,
.kynd-thinking {
  gap: 0.51cqw;
  padding: 0.25cqw 0.76cqw;
}

.kynd-essential-tools .ic { width: 0.93cqw; height: 0.93cqw; }
.kynd-private .ic { width: 0.93cqw; height: 0.93cqw; }

.kynd-input-box {
  align-items: flex-end;
  gap: 0.68cqw;
  min-height: 4.65cqw;
  padding: 0.85cqw 0.85cqw 0.85cqw 1.35cqw;
  border-radius: 1.52cqw;
}

.kynd-input-box > span,
.kynd-input-box > small {
  width: 2.54cqw;
  height: 2.54cqw;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.kynd-input-box > span .ic,
.kynd-input-box > small .ic { width: 1.27cqw; height: 1.27cqw; }

.kynd-input-box > b .ic {
  width: 1.36cqw;
  height: 1.36cqw;
  stroke-width: 2;
}

.kynd-input-box > b {
  width: 2.88cqw;
  height: 2.88cqw;
  border-radius: 1.02cqw;
}

/* Exact tool-activity components used by Chat. */
.kynd-app-window .cm-tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.51cqw;
  margin: 0.68cqw 0;
}

.kynd-app-window .cm-tool-chip {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.68cqw;
  padding: 0.51cqw 1.02cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 999px;
  color: var(--k-text-dim);
  background: var(--k-bg1);
  font-size: clamp(6px, 1.02cqw, 12px);
  white-space: nowrap;
}

.kynd-app-window .cm-tool-chip .cm-tool-icon {
  width: 1.1cqw;
  height: 1.1cqw;
  color: var(--k-accent2);
}

.kynd-app-window .cm-tool-chip .cm-tool-state {
  color: var(--k-muted);
  font-size: 0.92em;
}

.kynd-app-window .cm-tool-chip small {
  min-width: 1.35cqw;
  padding: 0 0.3cqw;
  border-radius: 999px;
  color: var(--k-accent2);
  background: rgba(91, 124, 250, 0.16);
  font-size: 0.8em;
  font-weight: 700;
  text-align: center;
}

.kynd-app-window .cm-spinner {
  width: 0.93cqw;
  height: 0.93cqw;
  min-width: 6px;
  min-height: 6px;
  flex: none;
  border: 2px solid rgba(91, 124, 250, 0.25);
  border-top-color: var(--k-accent2);
  border-radius: 50%;
  animation: kynd-ui-spin 0.7s linear infinite;
}

.kynd-app-window .cm-tool-chip.done .cm-tool-state,
.kynd-app-window .cm-tool-chip.is-done .cm-tool-state { color: var(--k-green); }

/* Search is deliberately about a high-stakes use of local AI: collect fresh
   official guidance now, keep a compact answer in local history for later. */
.search-honesty {
  width: fit-content;
  max-width: 760px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px auto 0 !important;
  padding: 9px 14px;
  border: 1px solid rgba(37, 107, 80, 0.15);
  border-radius: 999px;
  color: var(--ink-soft) !important;
  background: rgba(255, 255, 255, 0.62);
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.search-honesty .ic { width: 14px; height: 14px; color: var(--green-dark); }

.kynd-search-thread {
  gap: 1.4cqw;
  padding-top: 0.85cqw;
  padding-bottom: 0.75cqw;
}

.kynd-search-tools [data-search-step] {
  opacity: 0.16;
  transform: translateY(0.5cqw);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.kynd-search-tools [data-search-step].is-active,
.kynd-search-tools [data-search-step].is-done {
  opacity: 1;
  transform: none;
}

.kynd-search-tools [data-search-step].is-done {
  border-color: var(--k-border-soft);
}

.kynd-search-tools [data-search-step].is-done .cm-spinner { display: none; }

.cm-working {
  display: flex;
  align-items: center;
  gap: 0.76cqw;
  margin: 0.4cqw 0 0;
  color: var(--k-accent2);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.cm-working .squiggle { width: 3.9cqw; height: 0.93cqw; }
.cm-working-label { color: var(--k-muted); font-size: clamp(5.5px, 0.93cqw, 11px); }
.kynd-assistant-row:has(.search-result.is-visible) .cm-working { opacity: 0; transform: translateY(-0.3cqw); }

.search-result {
  display: block;
  max-height: 0;
  overflow: hidden;
  color: var(--k-text);
  opacity: 0;
  transform: translateY(0.55cqw);
  font-size: clamp(6.5px, 1.14cqw, 13.5px);
  line-height: 1.6;
  transition: max-height 0.6s ease, opacity 0.35s ease, transform 0.35s ease;
}

.search-result.is-visible {
  max-height: 31cqw;
  opacity: 1;
  transform: none;
}

.search-result > * {
  opacity: 0;
  transform: translateY(0.25cqw);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.search-result.is-visible > * { opacity: 1; transform: none; }
.search-result.is-visible > :nth-child(2) { transition-delay: 0.08s; }
.search-result.is-visible > :nth-child(3) { transition-delay: 0.14s; }
.search-result.is-visible > :nth-child(4) { transition-delay: 0.2s; }
.search-result.is-visible > :nth-child(5) { transition-delay: 0.26s; }
.search-result.is-visible > :nth-child(6) { transition-delay: 0.32s; }
.search-result.is-visible > :nth-child(7) { transition-delay: 0.38s; }
.search-result.is-visible > :nth-child(8) { transition-delay: 0.44s; }
.search-result.is-visible > :nth-child(9) { transition-delay: 0.5s; }
.search-result.is-visible > :nth-child(10) { transition-delay: 0.56s; }

.search-result .md-h2,
.creative-app .md-h2 {
  margin: 1.18cqw 0 0.51cqw;
  color: var(--k-text);
  font-size: clamp(7.5px, 1.27cqw, 15px);
  font-weight: 600;
}

.search-result .md-check,
.creative-app .md-check {
  display: flex;
  align-items: center;
  gap: 0.68cqw;
  padding: 0.25cqw 0;
}

.search-result .md-check-box,
.creative-app .md-check-box {
  width: 1.52cqw;
  height: 1.52cqw;
  min-width: 10px;
  min-height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--k-border);
  border-radius: 0.34cqw;
  color: transparent;
  background: var(--k-bg3);
  font-size: 0.82em;
}

.search-result .md-check-text,
.creative-app .md-check-text { color: var(--k-text); font-size: 0.96em; }

.search-result p { margin: 0.55cqw 0 0; color: var(--k-text-dim); line-height: 1.5; }
.search-paper-label { display: block; margin-top: 0.55cqw; }

.search-result .md-link,
.kynd-app-window .md-link {
  color: var(--k-accent2);
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 124, 250, 0.35);
  word-break: break-word;
}

.search-cursor { margin-left: 0.2cqw; color: var(--k-accent2); animation: creative-cursor-blink 1s steps(1) infinite; }
.search-result.is-settled .search-cursor { display: none; }

.search-reply-heart .heart-squint { display: none; }
.kynd-assistant-row:has(.search-result.is-settled) .search-reply-heart .heart-open { display: none; }
.kynd-assistant-row:has(.search-result.is-settled) .search-reply-heart .heart-squint { display: block; }

.search-route {
  display: grid;
  grid-template-columns: auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 14px;
  border: 1px solid rgba(37, 107, 80, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 35px rgba(32, 49, 43, 0.07);
}

.search-route > i { height: 1px; overflow: hidden; background: rgba(37, 107, 80, 0.18); }
.search-route > i::after { content: ""; display: block; width: 35%; height: 100%; background: var(--blue); animation: search-route-pulse 2.6s ease-in-out infinite; }
.search-route > i:nth-of-type(2)::after { animation-delay: 0.55s; }

@keyframes search-route-pulse {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(340%); }
}

.search-route-node {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.search-route-node .ic { width: 13px; height: 13px; color: var(--blue); }
.search-route-node .status-dot { width: 7px; height: 7px; }

.search-saved-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  color: #e8e8eb;
  background: #25252a;
  box-shadow: 0 18px 35px rgba(22, 31, 28, 0.14);
}

.search-saved-card .ic { width: 15px; height: 15px; margin-top: 2px; color: #93a9ff; }
.search-saved-card strong { display: block; font-size: 12px; }
.search-saved-card small { display: block; margin-top: 4px; color: #b0afba; font-size: 10px; line-height: 1.45; }

.search-experience {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.search-explainer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.search-explainer .search-route,
.search-explainer .search-saved-card { grid-column: 1 / -1; }

.search-explainer .search-route { margin: 0; }

.search-explainer .explainer-line {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 30px rgba(32, 49, 43, 0.055);
}

.search-explainer .explainer-line::after { display: none; }

.search-explainer .search-saved-card {
  align-items: center;
  margin: 0;
  padding: 12px 16px;
}

/* Creative stage framing: source-faithful Chat, Quick Look and Video Studio. */
.creative-stage-caption {
  min-height: 28px;
  margin: 0 auto 14px;
  text-align: center;
}

.creative-stage-caption p {
  display: none;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.creative-stage-caption strong { color: var(--ink-soft); }
.creative-experience[data-creative-stage="0"] [data-creative-caption="0"],
.creative-experience[data-creative-stage="1"] [data-creative-caption="1"],
.creative-experience[data-creative-stage="2"] [data-creative-caption="2"] { display: block; animation: kynd-panel-in 0.3s ease; }

.creative-app .cm-msg-content {
  font-size: clamp(6.5px, 1.14cqw, 13.5px);
  line-height: 1.6;
}

.creative-app .creative-markdown > p { margin: 0 0 0.55cqw; color: var(--k-text-dim); }
.creative-app .md-h3 { margin: 0.85cqw 0 0.34cqw; font-size: clamp(6.5px, 1.1cqw, 13px); font-weight: 600; }
.creative-app .md-li { padding: 0.17cqw 0 0.17cqw 0.34cqw; color: var(--k-text-dim); }

.creative-app .md-table-wrap {
  margin: 0.85cqw 0;
  border-radius: 0.68cqw;
}

.creative-app .md-table { font-size: clamp(6px, 1.02cqw, 12px); }
.creative-app .md-table th { padding: 0.51cqw 1.02cqw; }
.creative-app .md-table td { padding: 0.42cqw 1.02cqw; }

.creative-experience[data-creative-stage="0"][data-creative-phase="0"] .creative-markdown > p,
.creative-experience[data-creative-stage="0"][data-creative-phase="0"] .creative-markdown .md-li,
.creative-experience[data-creative-stage="0"][data-creative-phase="1"] .creative-markdown .md-h3,
.creative-experience[data-creative-stage="0"][data-creative-phase="1"] .creative-markdown .md-li { display: none; }

.creative-selected-tool > b { color: var(--k-muted); font-size: 1.1em; font-weight: 400; }

.creative-experience[data-creative-stage="1"][data-creative-phase="4"] .cm-tool-images {
  max-height: 23cqw;
  margin-top: 0.7cqw;
  opacity: 1;
  transform: none;
}

.creative-experience[data-creative-stage="1"][data-creative-phase="3"] .cm-tool-images {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(0.7cqw);
}

.creative-quick-look {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4cqw;
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.01);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.creative-experience[data-creative-stage="1"][data-creative-phase="4"] .creative-quick-look {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.creative-quick-look .ql-content {
  width: min(65cqw, 80%);
  max-height: 80%;
  overflow: hidden;
  border-radius: 1.02cqw;
  background: var(--k-bg2);
  box-shadow: 0 1.7cqw 5cqw rgba(0, 0, 0, 0.5);
}

.creative-quick-look .ql-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.02cqw;
  padding: 1.02cqw 1.35cqw;
  border-bottom: 1px solid var(--k-border);
  color: var(--k-text);
  background: var(--k-bg3);
  font-size: clamp(6px, 1.02cqw, 12px);
  font-weight: 500;
}

.creative-quick-look .ql-header > span:last-child { display: flex; align-items: center; gap: 0.68cqw; }
.creative-quick-look .ql-header button {
  padding: 0.25cqw 0.68cqw;
  border: 1px solid var(--k-border);
  border-radius: 0.51cqw;
  color: var(--k-text);
  background: none;
  font: inherit;
  font-size: 0.9em;
  opacity: 0.75;
}
.creative-quick-look .ql-header b { font-size: 1.25em; font-weight: 400; opacity: 0.6; }
.creative-quick-look img { width: 100%; max-height: 42cqw; display: block; object-fit: contain; }

.creative-studio {
  position: absolute;
  z-index: 30;
  top: 4.35cqw;
  right: 0;
  bottom: 0;
  width: 58%;
  overflow: hidden;
  border-left: 1px solid var(--k-border);
  color: var(--k-text);
  background: var(--k-bg);
  box-shadow: -1.2cqw 0 2.8cqw rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateX(3cqw);
  transition: opacity 0.38s ease, transform 0.45s cubic-bezier(.2, .7, .2, 1);
}

.creative-experience[data-creative-stage="2"][data-creative-phase="2"] .creative-studio,
.creative-experience[data-creative-stage="2"][data-creative-phase="3"] .creative-studio {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.creative-workbench-tabs {
  height: 3.05cqw;
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  padding: 0 0.7cqw;
  border-bottom: 1px solid var(--k-border);
  color: var(--k-muted);
  background: var(--k-bg1);
  font-size: clamp(5.5px, 0.88cqw, 10.5px);
}

.creative-workbench-tabs span {
  height: 2.25cqw;
  display: inline-flex;
  align-items: center;
  gap: 0.42cqw;
  padding: 0 0.7cqw;
  border-radius: 0.5cqw;
}

.creative-workbench-tabs span.active { color: var(--k-text); background: var(--k-bg3); }
.creative-workbench-tabs span:last-child { margin-left: auto; }
.creative-workbench-tabs .ic { width: 1cqw; height: 1cqw; }

.creative-studio .vs {
  display: flex;
  flex-direction: column;
  gap: 1.05cqw;
  padding: 1.35cqw 1.7cqw 2.2cqw;
}

.creative-studio .vs-header { display: flex; align-items: center; gap: 0.7cqw; flex-wrap: wrap; }
.creative-studio .vs-title { flex: 1; min-width: 12cqw; font-size: clamp(7px, 1.44cqw, 17px); font-weight: 600; }
.creative-studio .vs-head-meta { color: var(--k-muted); font-size: clamp(5px, 0.8cqw, 9.5px); }
.creative-studio .vs-head-meta i { font-style: normal; }
.creative-studio .studio-meta-one { display: none; }
.creative-experience[data-creative-phase="3"] .creative-studio .studio-meta-zero { display: none; }
.creative-experience[data-creative-phase="3"] .creative-studio .studio-meta-one { display: inline; }

.creative-studio .vs-viewtoggle {
  display: flex;
  gap: 0.1cqw;
  padding: 0.17cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 999px;
  background: var(--k-bg2);
  font-size: clamp(5px, 0.8cqw, 9.5px);
}

.creative-studio .vs-viewtoggle b,
.creative-studio .vs-viewtoggle span { padding: 0.25cqw 0.7cqw; border-radius: 999px; }
.creative-studio .vs-viewtoggle b { color: var(--k-text); background: var(--k-bg4); }
.creative-studio .vs-viewtoggle span { color: var(--k-muted); }

.creative-studio .vs-head-actions { width: 100%; display: flex; gap: 0.55cqw; }
.creative-studio button {
  display: inline-flex;
  align-items: center;
  gap: 0.35cqw;
  padding: 0.42cqw 0.7cqw;
  border: 1px solid var(--k-border);
  border-radius: 0.55cqw;
  color: var(--k-text-dim);
  background: var(--k-bg2);
  font: inherit;
  font-size: clamp(5px, 0.78cqw, 9.5px);
}
.creative-studio button.primary { color: #fff; border-color: var(--k-accent); background: var(--k-accent); }
.creative-studio button .ic { width: 0.9cqw; height: 0.9cqw; }

.creative-studio .vs-style,
.creative-studio .vs-progress {
  padding: 0.68cqw 1.02cqw;
  border: 1px solid var(--k-border);
  border-radius: 0.76cqw;
  color: var(--k-text-dim);
  background: var(--k-bg2);
  font-size: clamp(5px, 0.85cqw, 10px);
}

.creative-studio .vs-progress {
  color: var(--k-text);
  border-color: rgba(91, 124, 250, 0.3);
  background: rgba(91, 124, 250, 0.07);
}
.creative-studio .studio-cutting { display: none; }
.creative-experience[data-creative-phase="3"] .creative-studio .studio-rendering { display: none; }
.creative-experience[data-creative-phase="3"] .creative-studio .studio-cutting { display: inline; }

.creative-studio .vs-section-label {
  display: flex;
  align-items: baseline;
  gap: 0.8cqw;
  color: var(--k-text-dim);
  font-size: clamp(5px, 0.78cqw, 9.5px);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.creative-studio .vs-section-label small { color: var(--k-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.creative-studio .vs-board { display: grid; grid-template-columns: minmax(0, 19cqw); }
.creative-studio .vs-card { overflow: hidden; border: 1px solid var(--k-accent); border-radius: 0.9cqw; background: var(--k-bg2); box-shadow: 0 0 0 1px rgba(91, 124, 250, 0.35); }
.creative-studio .vs-card-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0f16; }
.creative-studio .vs-card-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.creative-studio .vs-card-num { position: absolute; top: 0.5cqw; left: 0.5cqw; min-width: 1.45cqw; height: 1.45cqw; display: grid; place-items: center; border-radius: 0.42cqw; color: #fff; background: rgba(8, 10, 16, 0.7); font-size: 0.75em; }
.creative-studio .vs-badge { position: absolute; top: 0.5cqw; right: 0.5cqw; padding: 0.08cqw 0.6cqw; border-radius: 999px; color: #d8e2ef; background: rgba(8, 10, 16, 0.7); font-size: 0.65em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.creative-studio .vs-card-body { display: flex; flex-direction: column; gap: 0.25cqw; padding: 0.76cqw 0.85cqw 0.85cqw; }
.creative-studio .vs-card-body strong { color: var(--k-text); font-size: clamp(5px, 0.85cqw, 10px); line-height: 1.35; }
.creative-studio .vs-card-body small { color: var(--k-muted); font-size: clamp(4.5px, 0.72cqw, 8.5px); }
.creative-studio .vs-timeline { height: 5.25cqw; padding: 0.42cqw; border: 1px solid var(--k-border); border-radius: 0.9cqw; background: var(--k-bg); }
.creative-studio .vs-block { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--k-accent); border-radius: 0.6cqw; background: linear-gradient(to top, rgba(8,10,16,.85), rgba(8,10,16,.25)), url('/assets/kynd-sunday-still.png') center/cover; }
.creative-studio .vs-block span { position: absolute; left: 0.6cqw; bottom: 0.42cqw; color: #fff; font-size: clamp(4.5px, 0.75cqw, 9px); font-weight: 600; }
.creative-studio .vs-block i { position: absolute; top: 0; right: 0; bottom: 0; width: 0.76cqw; background: linear-gradient(to left, rgba(255,255,255,.22), transparent); }

@media (max-width: 720px) {
  .search-honesty { align-items: flex-start; border-radius: 18px; text-align: left; }
  .search-explainer { grid-template-columns: 1fr; }
  .search-explainer .search-route,
  .search-explainer .search-saved-card { grid-column: auto; }
  .creative-stage-caption { min-height: 46px; padding: 0 8px; }
  .creative-studio { top: 7cqw; width: 100%; }
  .creative-studio .vs { gap: 1.7cqw; padding: 2.4cqw 3cqw; }
  .creative-studio .vs-board { grid-template-columns: minmax(0, 39cqw); }
  .creative-studio .vs-timeline { height: 10cqw; }
  .creative-quick-look .ql-content { width: 92%; }
  .creative-quick-look .ql-header button { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .search-route > i::after,
  .search-cursor,
  .creative-live-heart { animation: none; }
  .creative-studio,
  .creative-quick-look { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Memory + offline voice
   These sections deliberately reuse the shipped Settings and Chat controls.
   Scenario selectors and progress controls sit outside the product frame so
   they cannot be mistaken for features that do not exist in the app.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 981px) {
  .nav-links { gap: clamp(12px, 1.55vw, 24px); }
  .nav-links > a:not(.button) { font-size: 13px; }
}

.memory-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 14px;
}

.memory-promises > span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(37, 107, 80, 0.12);
  border-radius: 999px;
  color: var(--green-dark);
  background: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  font-weight: 700;
}

.memory-promises .ic,
.soft-note .ic {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.soft-note > span { color: var(--green-dark); }

.kynd-settings-nav > span {
  display: flex;
  align-items: center;
  gap: 0.62cqw;
}

.kynd-settings-nav > span .ic,
.kynd-settings-pane > header .ic,
.kynd-memory-actions .ic {
  width: 1.25cqw;
  height: 1.25cqw;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kynd-settings-pane > header > span {
  width: 2.2cqw;
  height: 2.2cqw;
  display: grid;
  place-items: center;
}

.kynd-memory-actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.45cqw;
}

.memory-path,
.learned-fixes-note {
  grid-column: 1 / -1;
}

.memory-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: -22px;
}

.memory-path::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 28px;
  height: 1px;
  background: var(--line-strong);
}

.memory-path article {
  position: relative;
  min-height: 150px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-content: start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 12px 34px rgba(46, 63, 55, 0.05);
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.memory-path article > span {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 4px solid var(--paper);
  border-radius: 13px;
  color: var(--green-dark);
  background: var(--mint);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.memory-path article > div { padding-top: 4px; }
.memory-path strong { display: block; color: var(--ink-soft); font-size: 12px; line-height: 1.35; }
.memory-path small { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.55; }

.memory-path article.active {
  border-color: rgba(82, 105, 239, 0.24);
  background: rgba(244, 243, 255, 0.92);
  box-shadow: 0 18px 44px rgba(67, 75, 130, 0.12);
  transform: translateY(-5px);
}

.memory-path article.active > span {
  color: #fff;
  background: var(--blue);
  transform: scale(1.06);
}

.learned-fixes-note {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
  padding: 22px 24px;
  border: 1px solid rgba(82, 105, 239, 0.16);
  border-radius: 22px;
  background: linear-gradient(110deg, rgba(231, 226, 255, 0.66), rgba(255, 255, 255, 0.76) 45%, rgba(223, 242, 232, 0.72));
}

.learned-fixes-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--blue-deep);
  background: #fff;
  box-shadow: 0 10px 28px rgba(62, 81, 207, 0.11);
}

.learned-fixes-icon .ic {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.learned-fixes-note small {
  display: block;
  margin-bottom: 5px;
  color: var(--blue-deep);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.learned-fixes-note strong { display: block; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.learned-fixes-note p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }

.learned-fixes-flow {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-light);
}

.learned-fixes-flow span {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.78);
  font-size: 8px;
  font-weight: 700;
}

.voice-section {
  overflow: hidden;
  padding: 145px max(var(--gut), calc((100vw - var(--max)) / 2));
  background:
    radial-gradient(circle at 8% 18%, rgba(205, 238, 220, 0.92), transparent 25%),
    radial-gradient(circle at 92% 17%, rgba(224, 218, 255, 0.74), transparent 27%),
    linear-gradient(180deg, #f3f6f0, #eef3ee 56%, #f7f4ed);
}

.voice-heading {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.72fr);
  align-items: end;
  gap: clamp(45px, 8vw, 120px);
}

.voice-heading h2 {
  max-width: 820px;
  font-size: clamp(48px, 5.8vw, 82px);
}

.voice-heading-copy > p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.72;
}

.voice-plan-badges {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.voice-plan-badges > span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 750;
}

.voice-plan-badges .ic {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.voice-scenarios {
  max-width: var(--max);
  margin: 62px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.voice-scenarios button {
  position: relative;
  min-height: 122px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 20px 23px;
  overflow: hidden;
  border: 1px solid rgba(28, 54, 44, 0.1);
  border-radius: 20px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.67);
  box-shadow: 0 12px 34px rgba(35, 59, 49, 0.06);
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.voice-scenarios button::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.voice-scenarios button:hover { transform: translateY(-2px); }
.voice-scenarios button.active {
  border-color: rgba(37, 107, 80, 0.26);
  background: #fff;
  box-shadow: 0 18px 44px rgba(35, 59, 49, 0.1);
}
.voice-scenarios button.active::after { transform: scaleX(1); }
.voice-scenarios small { color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.voice-scenarios strong { font-size: 14px; letter-spacing: -0.01em; }
.voice-scenarios span { color: var(--muted); font-size: 10px; }

.voice-experience {
  max-width: 1280px;
  margin: 24px auto 0;
}

.voice-demo-rail {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 32px rgba(38, 57, 49, 0.07);
}

.voice-demo-label,
.voice-demo-rail button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.voice-demo-label { color: var(--green-dark); }
.voice-demo-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(37, 107, 80, 0.08); }
.voice-demo-rail button { cursor: pointer; }
.voice-demo-rail button b { color: var(--muted-light); font-family: var(--mono); font-size: 7px; }
.voice-demo-rail button.active { color: #fff; background: var(--green-dark); }
.voice-demo-rail button.active b { color: rgba(255, 255, 255, 0.62); }

.voice-app.kynd-app-window {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  aspect-ratio: 1.69 / 1;
  border: 1px solid var(--k-border-strong);
  border-radius: 22px;
  color: var(--k-text);
  background: var(--k-bg);
  box-shadow: 0 42px 92px rgba(20, 28, 24, 0.27), inset 0 1px rgba(255, 255, 255, 0.045);
  container-type: inline-size;
}

.voice-app-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 4.05% 22.65% minmax(0, 1fr);
  color: var(--k-text);
  background: var(--k-bg);
}

.voice-chat-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--k-text);
  background: var(--k-bg);
}

.voice-thread {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1.05cqw;
  overflow: hidden;
  padding: 1.3cqw 3.5cqw 0.8cqw;
}

.voice-user-bubble {
  max-width: 76%;
  margin-left: auto;
  padding: 0.75cqw 1.05cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 1.3cqw 1.3cqw 0.4cqw 1.3cqw;
  color: var(--k-text);
  background: var(--k-bg3);
  font-size: clamp(6px, 1.02cqw, 12.5px);
  line-height: 1.5;
}

.voice-assistant-row {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.8cqw;
}

.voice-avatar {
  width: 2.15cqw;
  height: 2.15cqw;
  flex: 0 0 auto;
  filter: drop-shadow(0 0.18cqw 0.55cqw rgba(91, 124, 250, 0.33));
}

.voice-avatar svg { width: 100%; height: 100%; display: block; }
.voice-assistant-row > div { min-width: 0; }
.voice-assistant-row p { max-width: 52cqw; margin: 0; color: var(--k-text-dim); font-size: clamp(6px, 1cqw, 12px); line-height: 1.52; }

.voice-assistant-row button {
  width: 2cqw;
  height: 2cqw;
  margin-top: 0.35cqw;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.6cqw;
  color: var(--k-muted);
  background: transparent;
}

.voice-assistant-row button.reading { color: var(--k-accent2); background: rgba(91, 124, 250, 0.12); }
.voice-assistant-row button .ic { width: 1.15cqw; height: 1.15cqw; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.voice-spoken-turn {
  display: flex;
  flex-direction: column;
  gap: 1.05cqw;
  max-height: 0;
  opacity: 0;
  transform: translateY(1cqw);
  transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.45s ease;
}

.voice-experience[data-voice-stage="5"] .voice-spoken-turn {
  max-height: 18cqw;
  opacity: 1;
  transform: none;
}

.voice-composer.kynd-composer { width: min(66cqw, calc(100% - 4.6cqw)); }
.voice-composer .kynd-private.active { color: var(--k-accent2); border-color: rgba(91, 124, 250, 0.38); background: rgba(91, 124, 250, 0.1); }
.voice-wave-button { color: var(--k-accent2); }
.voice-experience[data-voice-stage="0"] .voice-wave-button { background: rgba(91, 124, 250, 0.14); animation: voice-wave-pulse 1.3s ease-in-out infinite; }

@keyframes voice-wave-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 124, 250, 0.16); }
  50% { box-shadow: 0 0 0 0.7cqw rgba(91, 124, 250, 0); }
}

.voice-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--k-text);
  background: rgba(37, 37, 42, 0.91);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.015);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  backdrop-filter: blur(28px) saturate(1.15);
  transition: opacity 0.25s ease, transform 0.3s ease;
}

.voice-experience[data-voice-stage="1"] .voice-overlay,
.voice-experience[data-voice-stage="2"] .voice-overlay,
.voice-experience[data-voice-stage="3"] .voice-overlay,
.voice-experience[data-voice-stage="4"] .voice-overlay {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.voice-overlay-close {
  position: absolute;
  top: 1.8cqw;
  right: 2cqw;
  width: 3cqw;
  height: 3cqw;
  display: grid;
  place-items: center;
  border: 1px solid var(--k-border-soft);
  border-radius: 50%;
  color: var(--k-muted);
  background: var(--k-bg2);
}

.voice-overlay-close .ic { width: 1.2cqw; height: 1.2cqw; fill: none; stroke: currentColor; stroke-width: 1.8; }

.voice-overlay-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15cqw;
}

.voice-orb {
  position: relative;
  width: 12.3cqw;
  height: 12.3cqw;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  --voice-hue: 91, 124, 250;
  --voice-level: 0.58;
}

.voice-orb > span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(var(--voice-hue), 0.85), rgba(var(--voice-hue), 0.42) 58%, rgba(var(--voice-hue), 0.16));
  box-shadow: 0 0 0 calc(0.5cqw + 2.1cqw * var(--voice-level)) rgba(var(--voice-hue), 0.1), 0 1.5cqw 5cqw rgba(var(--voice-hue), 0.28);
  transform: scale(calc(0.9 + 0.16 * var(--voice-level)));
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.voice-orb.is-listening > span { animation: voice-listen 1.1s ease-in-out infinite; }
.voice-orb.is-transcribing { --voice-hue: 150, 190, 140; }
.voice-orb.is-replying { --voice-hue: 235, 190, 110; }
.voice-orb.is-speaking { --voice-hue: 130, 175, 235; }
.voice-orb.is-transcribing > span,
.voice-orb.is-replying > span { animation: voice-breathe 1.5s ease-in-out infinite; }
.voice-orb.is-speaking > span { animation: voice-breathe 0.85s ease-in-out infinite; }

@keyframes voice-listen {
  0%, 100% { --voice-level: 0.35; transform: scale(0.96); }
  50% { --voice-level: 0.88; transform: scale(1.02); }
}

@keyframes voice-breathe {
  0%, 100% { transform: scale(0.92); }
  50% { transform: scale(1.02); }
}

.voice-phase { color: var(--k-text); font-size: clamp(11px, 1.45cqw, 17px); font-weight: 600; letter-spacing: -0.01em; }
.voice-hint { min-height: 1.5cqw; color: var(--k-muted); font-size: clamp(7px, 1.05cqw, 12.5px); }

.voice-engines { display: flex; justify-content: center; margin-top: 0.4cqw; }
.voice-engines > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15cqw;
  min-width: 10cqw;
  padding: 0.65cqw 1.15cqw;
  border: 1px solid rgba(91, 124, 250, 0.6);
  border-radius: 1cqw;
  color: var(--k-text);
  background: rgba(91, 124, 250, 0.1);
  font-size: clamp(7px, 1.05cqw, 12.5px);
}
.voice-engines strong { font-weight: 600; }
.voice-engines small { color: var(--k-muted); font-size: 0.86em; }
.voice-engine-note { color: var(--k-muted); font-size: clamp(6px, 0.94cqw, 11.5px); }

.voice-thinking-switch {
  width: min(30cqw, calc(100% - 4cqw));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6cqw;
  padding: 0.8cqw 1.05cqw;
  border: 1px solid var(--k-border-soft);
  border-radius: 1.05cqw;
  color: var(--k-text);
  background: rgba(42, 42, 48, 0.82);
}
.voice-thinking-switch > span { display: flex; flex-direction: column; gap: 0.15cqw; }
.voice-thinking-switch strong { font-size: clamp(7px, 1.05cqw, 12.5px); font-weight: 620; }
.voice-thinking-switch small { color: var(--k-muted); font-size: clamp(5.5px, 0.88cqw, 10.5px); line-height: 1.35; }
.voice-thinking-switch > i { position: relative; width: 2.6cqw; height: 1.45cqw; flex: 0 0 auto; border: 1px solid var(--k-border-strong); border-radius: 999px; background: var(--k-bg4); }
.voice-thinking-switch > i b { position: absolute; left: 0.18cqw; top: 0.16cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--k-muted); }

.voice-overlay-foot {
  position: absolute;
  bottom: 2.25cqw;
  color: var(--k-muted);
  font-size: clamp(6.5px, 0.98cqw, 11.5px);
  text-align: center;
}

.voice-proof-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 22px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--line);
}

.voice-proof-row > span {
  min-height: 84px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-content: center;
  gap: 3px 10px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.82);
}

.voice-proof-row .ic {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  color: var(--green);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.voice-proof-row strong { color: var(--ink-soft); font-size: 10px; }
.voice-proof-row small { color: var(--muted); font-size: 8px; line-height: 1.45; }

.voice-honesty {
  max-width: 880px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}
.voice-honesty strong { color: var(--ink-soft); }

.free-features > div > span .ic {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 980px) {
  .memory-section { grid-template-columns: 1fr; }
  .memory-copy { max-width: 720px; }
  .memory-path { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memory-path::before { display: none; }
  .learned-fixes-note { grid-template-columns: 58px minmax(0, 1fr); }
  .learned-fixes-flow { grid-column: 2; flex-wrap: wrap; }
  .voice-heading { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .voice-heading-copy > p { max-width: 760px; }
  .voice-demo-rail { width: 100%; overflow-x: auto; justify-content: flex-start; border-radius: 18px; scrollbar-width: none; }
  .voice-demo-rail::-webkit-scrollbar { display: none; }
  .voice-demo-label, .voice-demo-rail button { flex: 0 0 auto; }
  .voice-proof-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .memory-promises { align-items: flex-start; }
  .memory-path { grid-template-columns: 1fr; }
  .memory-path article { min-height: 118px; }
  .learned-fixes-note { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .learned-fixes-icon { width: 48px; height: 48px; border-radius: 14px; }
  .learned-fixes-flow { grid-column: 1 / -1; }
  .voice-section { padding: 105px 20px; }
  .voice-heading h2 { font-size: clamp(40px, 13vw, 58px); }
  .voice-scenarios { grid-template-columns: 1fr; margin-top: 42px; }
  .voice-scenarios button { min-height: 96px; }
  .voice-demo-label { display: none; }
  .voice-app.kynd-app-window { aspect-ratio: 0.82 / 1; border-radius: 15px; }
  .voice-app-shell { grid-template-columns: minmax(0, 1fr); }
  .voice-app .kynd-rail,
  .voice-app .kynd-sidebar { display: none; }
  .voice-app .kynd-chat-header { height: 8cqw; padding: 0 2.2cqw; }
  .voice-app .kynd-chat-header > strong { max-width: 31%; font-size: 8px; }
  .voice-app .kynd-mode-switch { top: 1.3cqw; }
  .voice-thread { gap: 2.2cqw; padding: 3cqw 4cqw 1.5cqw; }
  .voice-user-bubble { padding: 2cqw 2.6cqw; border-radius: 3cqw 3cqw 1cqw 3cqw; font-size: 9px; }
  .voice-avatar { width: 5cqw; height: 5cqw; }
  .voice-assistant-row { gap: 2cqw; }
  .voice-assistant-row p { max-width: 76cqw; font-size: 8px; }
  .voice-assistant-row button { width: 5cqw; height: 5cqw; }
  .voice-assistant-row button .ic { width: 2.7cqw; height: 2.7cqw; }
  .voice-experience[data-voice-stage="5"] .voice-spoken-turn { max-height: 46cqw; }
  .voice-composer.kynd-composer { width: calc(100% - 6cqw); }
  .voice-composer .kynd-essential-tools span:nth-child(2) { display: none; }
  .voice-composer .kynd-footnote { font-size: 6px; }
  .voice-orb { width: 25cqw; height: 25cqw; }
  .voice-thinking-switch { width: 58cqw; padding: 1.7cqw 2.2cqw; border-radius: 2.2cqw; }
  .voice-thinking-switch > i { width: 5.5cqw; height: 3.1cqw; }
  .voice-thinking-switch > i b { left: 0.4cqw; top: 0.35cqw; width: 2.1cqw; height: 2.1cqw; }
  .voice-engines > span { min-width: 25cqw; padding: 1.4cqw 2.4cqw; border-radius: 2.2cqw; }
  .voice-overlay-stage { gap: 2.4cqw; }
  .voice-overlay-close { width: 7cqw; height: 7cqw; }
  .voice-overlay-close .ic { width: 3cqw; height: 3cqw; }
  .voice-proof-row { grid-template-columns: 1fr; margin-left: 0; margin-right: 0; }
  .voice-proof-row > span { min-height: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-wave-button,
  .voice-orb > span { animation: none !important; }
  .voice-overlay,
  .voice-spoken-turn,
  .memory-path article { transition: none; }
}

/* ── Shared Chat workspace header ──────────────────────────────────────────
   The shipped app now owns one header above the rail, sidebar, Chat and
   Workbench. Keeping the replica header in the main column made the centred
   Chat/Build switch collide with model and tool controls whenever Workbench
   narrowed the conversation. These rules mirror the fixed shell geometry. */

.kynd-app-shell,
.voice-app-shell {
  position: relative;
  padding-top: 4.35cqw;
}

.kynd-chat-main,
.voice-chat-main {
  position: static;
}

.kynd-chat-header {
  position: absolute;
  z-index: 12;
  top: 0;
  right: 0;
  left: 0;
  height: 4.35cqw;
  min-height: 24px;
  display: block;
  padding: 0;
  border: 0;
  color: var(--k-text);
  background: color-mix(in srgb, var(--k-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
}

.kynd-chat-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 26.7%;
  border-right: 1px solid var(--k-border);
  background: var(--k-bg1);
}

.kynd-window-dots { z-index: 13; }

.kynd-header-new-chat {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4.05%;
  width: 22.65%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 1cqw;
  color: var(--k-text-dim);
}

.kynd-header-new-chat .ic {
  width: 1.25cqw;
  height: 1.25cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kynd-chat-header > strong {
  position: absolute;
  top: 50%;
  left: calc(26.7% + 1.2cqw);
  right: calc(50% + 6.9cqw);
  max-width: none;
  min-width: 0;
  overflow: hidden;
  padding: 0.35cqw 0.55cqw;
  border-radius: 0.55cqw;
  color: var(--k-text);
  font-size: clamp(6.5px, 1.1cqw, 13.5px);
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%);
}

.kynd-mode-switch {
  z-index: 2;
  top: 0.75cqw;
  left: 50%;
}

.kynd-header-actions {
  position: absolute;
  z-index: 2;
  top: 0.72cqw;
  right: 1.1cqw;
  height: 2.9cqw;
  max-width: calc(50% - 8cqw);
  margin: 0;
  overflow: hidden;
  flex-wrap: nowrap;
}

.kynd-header-actions > * {
  min-width: 0;
  flex: 0 1 auto;
}

.kynd-header-actions .kynd-model-chip {
  min-width: 0;
  max-width: 23.7cqw;
  flex: 1 1 14cqw;
}

.kynd-header-actions .kynd-header-chip {
  flex: 0 0 auto;
}

.kynd-rail {
  padding-top: 1.35cqw;
}

.kynd-sidebar-top {
  display: none;
}

.kynd-new-chat {
  margin-top: 0.65cqw;
}

.creative-app .creative-studio {
  top: 4.35cqw;
}

@container (max-width: 650px) {
  .kynd-chat-header > strong { display: none; }
  .kynd-header-actions .kynd-model-chip { max-width: 18cqw; }
  .kynd-header-chip b,
  .kynd-model-chip > em { display: none; }
}

@media (max-width: 720px) {
  .creative-app .kynd-chat-header,
  .voice-app .kynd-chat-header {
    height: 4.35cqw;
    padding: 0;
  }

  .creative-app .kynd-mode-switch,
  .voice-app .kynd-mode-switch {
    top: 0.75cqw;
  }

  .creative-app .creative-studio {
    top: 4.35cqw;
  }

  .creative-app .kynd-chat-header::before,
  .voice-app .kynd-chat-header::before,
  .creative-app .kynd-header-new-chat,
  .voice-app .kynd-header-new-chat,
  .creative-app .kynd-chat-header > strong,
  .voice-app .kynd-chat-header > strong {
    display: none;
  }

  .creative-app .kynd-mode-switch,
  .voice-app .kynd-mode-switch {
    left: 1.4cqw;
    transform: none;
  }

  .creative-app .kynd-header-actions,
  .voice-app .kynd-header-actions {
    max-width: 58%;
  }
}