: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;
}

.creative-banner {
  margin: 86px 0 0;
  background: #020617;
}

.creative-banner img {
  width: 100%;
  max-width: 1600px;
  height: auto;
  margin-inline: auto;
}

.creative-banner + .hero {
  min-height: auto;
  padding-top: clamp(40px, 6vw, 88px);
}

@media (max-width: 980px) {
  .creative-banner {
    margin-top: 67px;
  }
}

.hero {
  position: relative;
  /* Keep the oversized decorative glows inside the section's scroll bounds. */
  overflow: clip;
  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.68 / 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);
}

.laptop-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 8px 8px 3px 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 28%);
}

.laptop-render {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.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-copy .site-analytics-note {
  display: block;
  margin-top: 25px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

.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;
  }

  .memory-ui::before {
    inset: 0;
    transform: none;
  }

  .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 setup preview mirrors the current shipped graphite wizard. */
.setup-window.kynd-setup-window {
  --s-bg: #1f1f23;
  --s-surface: #25252a;
  --s-surface2: #2a2a30;
  --s-border: rgba(255, 255, 255, 0.07);
  --s-border-strong: #4c4c56;
  --s-accent: #5b7cfa;
  --s-accent2: #93a9ff;
  --s-accent3: #93a9ff;
  --s-green: #46d18b;
  --s-text: #e8e8eb;
  --s-dim: #b0afba;
  --s-muted: #90909b;
  border-color: rgba(255,255,255,.11);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% -24%, rgba(91,124,250,.12), transparent 43%),
    var(--s-bg);
  box-shadow: 0 35px 70px rgba(2,12,17,.32), inset 0 1px rgba(255,255,255,.025);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
}

.setup-preview-icon {
  width: 1em;
  height: 1em;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kynd-wizard-header { padding: 2.15cqw 3.4cqw 0; }
.kynd-wizard-header > div { gap: .85cqw; font-size: clamp(8px, 1.13cqw, 14px); }
.kynd-wizard-header > div > span { display: flex; flex-direction: column; line-height: 1.2; }
.kynd-wizard-header > div small {
  margin-top: .2cqw;
  color: var(--s-muted);
  font-size: .58em;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kynd-wizard-header img {
  width: 2.65cqw;
  height: 2.65cqw;
  min-width: 22px;
  min-height: 22px;
  filter: none;
}
.kynd-wizard-header > span {
  width: 2.25cqw;
  height: 2.25cqw;
  border-color: transparent;
  border-radius: .55cqw;
  background: transparent;
}
.kynd-wizard-header > span .setup-preview-icon { width: 1.2cqw; height: 1.2cqw; }

.kynd-wizard-body { padding: 1.45cqw 3.4cqw 1.2cqw; }
.kynd-wizard-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .55cqw;
  color: var(--s-muted);
  font-size: clamp(5px, .72cqw, 9px);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kynd-wizard-progress-meta b { color: var(--s-dim); font-weight: 650; letter-spacing: .04em; }
.kynd-wizard-progress {
  height: .2cqw;
  min-height: 2px;
  margin-bottom: 1.15cqw;
  background: rgba(255,255,255,.065);
}
.kynd-wizard-progress i { background: var(--s-accent); }
.kynd-wizard-steps { margin-bottom: 1.7cqw; font-size: clamp(5px, .88cqw, 11px); }
.kynd-wizard-steps > span > b {
  width: 1.8cqw;
  height: 1.8cqw;
  border-radius: .55cqw;
  background: transparent;
}
.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: var(--s-accent2);
  border-color: rgba(91,124,250,.6);
  background: rgba(91,124,250,.14);
}
.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 {
  border-color: rgba(70,209,139,.28);
  background: rgba(70,209,139,.07);
}

.wizard-welcome { padding-top: .1cqw; }
.wizard-welcome > img {
  width: 5.1cqw;
  height: 5.1cqw;
  min-width: 44px;
  min-height: 44px;
  margin-bottom: .8cqw;
  padding: .8cqw;
  border: 1px solid var(--s-border);
  border-radius: 1.35cqw;
  background: rgba(255,255,255,.018);
  filter: none;
  box-shadow: 0 1.4cqw 3cqw rgba(0,0,0,.2);
}
.wizard-welcome h3,
.wizard-models > h3,
.wizard-calibrate > h3 {
  color: var(--s-text);
  font-size: clamp(15px, 2.2cqw, 27px);
  font-weight: 600;
  letter-spacing: -.035em;
}
.wizard-welcome h3 span { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.wizard-welcome > p,
.wizard-models > p,
.wizard-calibrate > p {
  color: var(--s-dim);
  font-size: clamp(6px, 1cqw, 12.5px);
}
.kynd-prep-status {
  border-radius: .65cqw;
  color: var(--s-dim);
  background: rgba(255,255,255,.018);
}
.kynd-prep-status i { border-top-color: var(--s-accent2); }
.kynd-welcome-grid { max-width: 51cqw; gap: .7cqw; }
.kynd-welcome-grid article {
  display: grid;
  grid-template-columns: 3.1cqw 1fr;
  grid-template-rows: auto auto;
  column-gap: .8cqw;
  padding: .9cqw;
  border-radius: .75cqw;
  background: rgba(255,255,255,.016);
  text-align: left;
}
.kynd-welcome-grid article > b {
  grid-row: 1 / 3;
  width: 3.1cqw;
  height: 3.1cqw;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid var(--s-border);
  border-radius: .7cqw;
  color: var(--s-dim);
  background: var(--s-surface2);
}
.kynd-welcome-grid article > b .setup-preview-icon { width: 1.45cqw; height: 1.45cqw; }
.kynd-welcome-grid strong { align-self: end; font-weight: 600; }
.kynd-welcome-grid small { align-self: start; margin-top: .1cqw; }

.kynd-panel-kicker {
  display: block;
  margin-bottom: .3cqw;
  color: var(--s-accent2);
  font-size: clamp(5px,.7cqw,9px);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kynd-hardware-card {
  border-radius: .8cqw;
  background: var(--s-surface);
}
.kynd-hardware-card > span {
  border-color: var(--s-border);
  border-radius: .7cqw;
  color: var(--s-dim);
  background: var(--s-surface2);
}
.kynd-hardware-card > span .setup-preview-icon { width: 1.65cqw; height: 1.65cqw; }
.kynd-hardware-card > b {
  border-color: rgba(91,124,250,.26);
  color: var(--s-accent2);
  background: rgba(91,124,250,.08);
  font-weight: 600;
}
.kynd-model-card {
  border-color: rgba(91,124,250,.25);
  border-radius: .8cqw;
  background: linear-gradient(150deg, rgba(91,124,250,.045), var(--s-surface) 42%);
}
.kynd-model-role { color: var(--s-accent2); }
.kynd-model-role > .setup-preview-icon {
  width: 2.65cqw;
  height: 2.65cqw;
  padding: .55cqw;
  border: 1px solid rgba(91,124,250,.26);
  border-radius: .65cqw;
  background: rgba(91,124,250,.075);
}
.kynd-model-card p em {
  border-color: var(--s-border);
  color: var(--s-dim);
  background: rgba(255,255,255,.025);
}
.kynd-model-score {
  background: radial-gradient(circle, var(--s-surface) 58%, transparent 60%), conic-gradient(var(--s-accent2) 92%, rgba(255,255,255,.07) 0);
  font-weight: 500;
}
.kynd-download-track i { background: var(--s-accent); }

.kynd-calibrate-status {
  border-radius: .8cqw;
  background: var(--s-surface);
}
.kynd-calibrate-status.is-complete > i {
  border-radius: .7cqw;
  color: var(--s-green);
  background: rgba(70,209,139,.07);
}
.kynd-calibrate-status.is-complete > i .setup-preview-icon { width: 1.3cqw; height: 1.3cqw; }
.kynd-calibrate-status strong { font-weight: 600; }
.kynd-calibrate-metrics span { background: var(--s-surface); }
.kynd-calibrate-metrics b { color: var(--s-accent2); font-weight: 600; }

.kynd-wizard-footer {
  padding: 1.05cqw 3.4cqw 1.45cqw;
  border-top-color: var(--s-border);
  background: rgba(31,31,35,.72);
  backdrop-filter: blur(14px);
}
.kynd-wizard-footer button { border-radius: .6cqw; color: var(--s-dim); background: transparent; }
.kynd-wizard-footer button:last-child {
  border-color: var(--s-accent);
  background: var(--s-accent);
  box-shadow: 0 .5cqw 1.5cqw rgba(91,124,250,.18);
}

/* Complete six-screen state mapping from the shipped wizard. */
.setup-ui[data-setup-stage="0"] .kynd-wizard-progress i { width: 0; }
.setup-ui[data-setup-stage="1"] .kynd-wizard-progress i { width: 20%; }
.setup-ui[data-setup-stage="2"] .kynd-wizard-progress i { width: 40%; }
.setup-ui[data-setup-stage="3"] .kynd-wizard-progress i { width: 60%; }
.setup-ui[data-setup-stage="4"] .kynd-wizard-progress i { width: 80%; }
.setup-ui[data-setup-stage="5"] .kynd-wizard-progress i { width: 100%; }

.kynd-wizard-steps > span { color: var(--s-muted); }
.kynd-wizard-steps > span > b {
  color: var(--s-muted);
  border-color: var(--s-border);
  background: transparent;
}
.setup-ui[data-setup-stage="1"] .kynd-wizard-steps > span:nth-of-type(-n+1),
.setup-ui[data-setup-stage="2"] .kynd-wizard-steps > span:nth-of-type(-n+2),
.setup-ui[data-setup-stage="3"] .kynd-wizard-steps > span:nth-of-type(-n+3),
.setup-ui[data-setup-stage="4"] .kynd-wizard-steps > span:nth-of-type(-n+4),
.setup-ui[data-setup-stage="5"] .kynd-wizard-steps > span:nth-of-type(-n+5) { color: var(--s-dim); }
.setup-ui[data-setup-stage="1"] .kynd-wizard-steps > span:nth-of-type(-n+1) > b,
.setup-ui[data-setup-stage="2"] .kynd-wizard-steps > span:nth-of-type(-n+2) > b,
.setup-ui[data-setup-stage="3"] .kynd-wizard-steps > span:nth-of-type(-n+3) > b,
.setup-ui[data-setup-stage="4"] .kynd-wizard-steps > span:nth-of-type(-n+4) > b,
.setup-ui[data-setup-stage="5"] .kynd-wizard-steps > span:nth-of-type(-n+5) > b {
  color: var(--s-green);
  border-color: rgba(70,209,139,.28);
  background: rgba(70,209,139,.07);
}
.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(2),
.setup-ui[data-setup-stage="2"] .kynd-wizard-steps > span:nth-of-type(3),
.setup-ui[data-setup-stage="3"] .kynd-wizard-steps > span:nth-of-type(4),
.setup-ui[data-setup-stage="4"] .kynd-wizard-steps > span:nth-of-type(5),
.setup-ui[data-setup-stage="5"] .kynd-wizard-steps > span:nth-of-type(6) { 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(2) > b,
.setup-ui[data-setup-stage="2"] .kynd-wizard-steps > span:nth-of-type(3) > b,
.setup-ui[data-setup-stage="3"] .kynd-wizard-steps > span:nth-of-type(4) > b,
.setup-ui[data-setup-stage="4"] .kynd-wizard-steps > span:nth-of-type(5) > b,
.setup-ui[data-setup-stage="5"] .kynd-wizard-steps > span:nth-of-type(6) > b {
  color: var(--s-accent2);
  border-color: rgba(91,124,250,.6);
  background: rgba(91,124,250,.14);
}

.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"],
.setup-ui[data-setup-stage="3"] [data-setup-panel="3"],
.setup-ui[data-setup-stage="4"] [data-setup-panel="4"],
.setup-ui[data-setup-stage="5"] [data-setup-panel="5"] {
  display: block;
  animation: kynd-panel-in .42s cubic-bezier(.2,.7,.2,1);
}
.setup-ui[data-setup-stage="0"] .kynd-wizard-footer button:first-child { visibility: hidden; }

.wizard-essentials > h3,
.wizard-permissions > h3,
.wizard-ready > h3 {
  margin: 0;
  color: var(--s-text);
  font-size: clamp(14px,2cqw,24px);
  font-weight: 600;
  letter-spacing: -.035em;
}
.wizard-permissions > p,
.wizard-ready > p {
  margin: .4cqw 0 1cqw;
  color: var(--s-dim);
  font-size: clamp(6px,1cqw,12.5px);
  line-height: 1.55;
}

.kynd-essentials-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.1cqw;
  margin-top: 1.4cqw;
  padding: 1.35cqw 1.5cqw;
  border: 1px solid rgba(91,124,250,.24);
  border-radius: .85cqw;
  background: rgba(91,124,250,.055);
}
.kynd-essentials-card > span,
.kynd-permission-list article > span {
  width: 3.5cqw;
  height: 3.5cqw;
  display: grid;
  place-items: center;
  border: 1px solid var(--s-border);
  border-radius: .75cqw;
  color: var(--s-dim);
  background: var(--s-surface2);
}
.kynd-essentials-card > span .setup-preview-icon,
.kynd-permission-list article > span .setup-preview-icon { width: 1.55cqw; height: 1.55cqw; }
.kynd-essentials-card > div { display: flex; flex-direction: column; }
.kynd-essentials-card strong { color: var(--s-text); font-size: clamp(8px,1.15cqw,14px); font-weight: 600; }
.kynd-essentials-card small { color: var(--s-muted); font-size: clamp(5.5px,.9cqw,11px); }
.kynd-essentials-card > b {
  display: inline-flex;
  align-items: center;
  gap: .35cqw;
  padding: .35cqw .7cqw;
  border: 1px solid rgba(70,209,139,.22);
  border-radius: .5cqw;
  color: var(--s-green);
  background: rgba(70,209,139,.07);
  font-size: clamp(5.5px,.82cqw,10px);
  font-weight: 600;
}
.kynd-essentials-card > b .setup-preview-icon { width: .9cqw; height: .9cqw; }
.kynd-technical-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1cqw;
  padding: .85cqw 1.1cqw;
  border: 1px solid var(--s-border);
  border-radius: .7cqw;
  color: var(--s-dim);
  background: rgba(255,255,255,.015);
  font-size: clamp(5.5px,.9cqw,11px);
}
.kynd-technical-row .setup-preview-icon { width: 1.05cqw; height: 1.05cqw; }

.kynd-permission-list { display: grid; gap: .65cqw; }
.kynd-permission-list article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9cqw;
  padding: .8cqw 1cqw;
  border: 1px solid var(--s-border);
  border-radius: .7cqw;
  background: var(--s-surface);
}
.kynd-permission-list article > span { width: 3cqw; height: 3cqw; }
.kynd-permission-list article > div { display: flex; flex-direction: column; }
.kynd-permission-list strong { color: var(--s-text); font-size: clamp(7px,1cqw,12px); font-weight: 600; }
.kynd-permission-list small { color: var(--s-muted); font-size: clamp(5px,.8cqw,10px); }
.kynd-permission-list article > b {
  padding: .25cqw .6cqw;
  border-radius: .45cqw;
  color: var(--s-muted);
  background: rgba(255,255,255,.045);
  font-size: clamp(5px,.75cqw,9px);
  font-weight: 600;
}
.kynd-optional-note {
  display: flex;
  align-items: center;
  gap: .55cqw;
  margin-top: .8cqw;
  color: var(--s-muted);
  font-size: clamp(5px,.78cqw,9.5px);
}
.kynd-optional-note .setup-preview-icon { width: 1cqw; height: 1cqw; color: var(--s-accent2); }

.wizard-ready { text-align: center; }
.wizard-ready > img {
  width: 5.4cqw;
  height: 5.4cqw;
  min-width: 44px;
  min-height: 44px;
  margin: 0 auto .75cqw;
  padding: .8cqw;
  border: 1px solid var(--s-border);
  border-radius: 1.35cqw;
  background: rgba(255,255,255,.018);
}
.wizard-ready .kynd-panel-kicker { margin-bottom: .2cqw; }
.wizard-ready > p { max-width: 42cqw; margin-left: auto; margin-right: auto; }
.kynd-ready-summary {
  max-width: 43cqw;
  margin: 1.1cqw auto 0;
  padding: .45cqw 1.2cqw;
  border: 1px solid var(--s-border);
  border-radius: .75cqw;
  background: var(--s-surface);
  text-align: left;
}
.kynd-ready-summary > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  padding: .6cqw 0;
  font-size: clamp(5.5px,.85cqw,10.5px);
}
.kynd-ready-summary > span + span { border-top: 1px solid var(--s-border); }
.kynd-ready-summary small { color: var(--s-muted); }
.kynd-ready-summary strong { display: inline-flex; align-items: center; gap: .3cqw; color: var(--s-text); font-weight: 550; }
.kynd-ready-summary strong .setup-preview-icon { width: .95cqw; height: .95cqw; color: var(--s-green); }

/* ── 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; }

@media (max-width: 480px) {
  .search-route {
    grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr);
    gap: 6px;
  }

  .search-route-node {
    min-width: 0;
    white-space: normal;
  }

  .search-route-node .ic,
  .search-route-node .status-dot {
    flex-shrink: 0;
  }
}

.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: minmax(0, 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%;
  }
}

/* ── singing-character proof (creative section) ─────────────────────────── */
.creative-sing {
  /* the proof bar is a 3-column grid (badge | text | small); this block is a
     new full-width row inside it, not a fourth column */
  grid-column: 1 / -1;
  display: flex; gap: 18px; align-items: center;
  margin: 2px 0; padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.creative-sing video {
  width: 200px; max-width: 38%; aspect-ratio: 1; border-radius: 10px;
  background: #000; flex: none;
}
.creative-sing strong { display: block; margin-bottom: 4px; font-size: 15px; }
.creative-sing p { margin: 0; font-size: 13.5px; line-height: 1.55; opacity: 0.85; }
@media (max-width: 640px) {
  .creative-sing { flex-direction: column; align-items: stretch; }
  .creative-sing video { width: 100%; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOCAL FILM PRODUCTION  (#film)
   Sits high on the page, directly under .proof-bar. Four stages driven by
   data-film-stage / data-film-phase on [data-film-demo] — the same lighting-desk
   idiom as the creative demo, but a separate attribute namespace so the two
   never collide (home.js resolves each demo with a singular querySelector).
   .reveal is on the three CHILDREN, never the <section>: a section this tall can
   never reach the observer's 0.12 element-ratio threshold and would stay at
   opacity 0 forever.
   ══════════════════════════════════════════════════════════════════════════ */

.film-section {
  position: relative;
  overflow: hidden;
  padding: 120px max(var(--gut), calc((100vw - var(--max)) / 2)) 130px;
  background:
    radial-gradient(circle at 12% 8%, rgba(231, 226, 255, 0.75), transparent 30%),
    radial-gradient(circle at 90% 6%, rgba(198, 236, 219, 0.6), transparent 26%),
    var(--paper-warm);
}

.film-intro { max-width: 940px; margin: 0 auto 34px; text-align: center; }
.film-intro .eyebrow { justify-content: center; }
.film-intro h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.film-intro h2 span { color: var(--blue); }
.film-intro > p {
  max-width: 680px;
  margin: 18px auto 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.film-availability {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px !important;
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-align: left;
}
.film-availability > span {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  font-size: 10px;
}
.film-availability strong { color: var(--green-dark); }

/* ── stage controls ─────────────────────────────────────────────────────── */
.film-stage-controls {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 0 auto 14px;
  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);
}
.film-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;
}
.film-stage-controls button span {
  color: var(--muted-light);
  font-family: var(--mono);
  font-size: 8px;
}
.film-stage-controls button.active {
  color: #fff;
  background: var(--green-dark);
  box-shadow: 0 7px 18px rgba(18, 77, 58, 0.23);
}
.film-stage-controls button.active span { color: rgba(255, 255, 255, 0.66); }

.film-stage-caption {
  position: relative;
  max-width: 680px;
  min-height: 34px;
  margin: 0 auto 16px;
  text-align: center;
}
.film-stage-caption p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.film-stage-caption p:not(:first-child) { position: absolute; inset: 0; }
.film-stage-caption strong { color: var(--ink-soft); }
[data-film-stage="0"] [data-film-caption="0"],
[data-film-stage="1"] [data-film-caption="1"],
[data-film-stage="2"] [data-film-caption="2"],
[data-film-stage="3"] [data-film-caption="3"] { opacity: 1; }

/* ── the app window ─────────────────────────────────────────────────────── */
.film-app.kynd-app-window {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--k-border);
  border-radius: 20px;
  background: var(--k-bg);
  box-shadow: 0 34px 90px rgba(28, 36, 32, 0.26);
  color: var(--k-text);
  overflow: hidden;
}

.film-panel { display: none; }
[data-film-stage="0"] [data-film-panel="0"],
[data-film-stage="1"] [data-film-panel="1"],
[data-film-stage="2"] [data-film-panel="2"],
[data-film-stage="3"] [data-film-panel="3"] { display: block; animation: filmPanelIn 0.45s ease both; }

@keyframes filmPanelIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.film-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--k-border-soft);
}
.film-tab-strip { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; }
.film-tab-strip b { color: var(--k-text); font-weight: 700; }
.film-tab-strip b.on {
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--k-bg3);
  color: #fff;
}
.film-tab-strip i { color: var(--k-muted); font-style: normal; }
.film-count {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--k-bg2);
  color: var(--k-text-dim);
  font-size: 10.5px;
  font-family: var(--mono);
}

.film-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--k-border-soft);
  color: var(--k-muted);
  font-size: 11.5px;
  line-height: 1.55;
}

/* ── 01 · ingredient sheets ─────────────────────────────────────────────── */
.film-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.film-sheet {
  position: relative;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--k-border);
  border-radius: 13px;
  background: var(--k-bg1);
  opacity: 0.25;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.45s ease;
}
[data-film-stage="0"][data-film-phase="1"] [data-film-card="0"],
[data-film-stage="0"][data-film-phase="2"] [data-film-card="0"],
[data-film-stage="0"][data-film-phase="2"] [data-film-card="1"],
[data-film-stage="0"][data-film-phase="3"] [data-film-card="0"],
[data-film-stage="0"][data-film-phase="3"] [data-film-card="1"],
[data-film-stage="0"][data-film-phase="3"] [data-film-card="2"] {
  opacity: 1;
  transform: none;
  border-color: var(--k-border-strong);
}
.film-sheet img { display: block; width: 100%; height: auto; border-radius: 8px; background: #000; }
.film-kind {
  position: absolute;
  top: 17px; left: 17px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(20, 20, 24, 0.82);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.film-kind-character { color: #9fb8ff; }
.film-kind-prop { color: #ffd08a; }
.film-kind-place { color: #8fe3bd; }
.film-sheet figcaption { display: block; margin-top: 9px; }
.film-sheet figcaption strong { display: block; font-size: 12px; }
.film-sheet figcaption small { display: block; margin-top: 2px; color: var(--k-muted); font-size: 10px; line-height: 1.4; }

/* ── 02 · board and camera moves ────────────────────────────────────────── */
.film-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.film-card {
  padding: 9px;
  border: 1px solid var(--k-border);
  border-radius: 12px;
  background: var(--k-bg1);
  transition: border-color 0.35s ease, background 0.35s ease;
}
[data-film-stage="1"][data-film-phase="2"] [data-film-shot="0"],
[data-film-stage="1"][data-film-phase="3"] [data-film-shot="1"],
[data-film-stage="1"][data-film-phase="4"] [data-film-shot="2"] {
  border-color: var(--k-accent);
  background: var(--k-bg2);
}
.film-card-art { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.film-card-art img { width: 100%; height: 100%; object-fit: cover; }
.film-card-num {
  position: absolute;
  top: 6px; left: 6px;
  display: grid; place-items: center;
  width: 17px; height: 17px;
  border-radius: 5px;
  background: rgba(16, 16, 20, 0.8);
  font-size: 9.5px;
  font-weight: 800;
}
.film-card strong { display: block; margin: 9px 0 6px; font-size: 11.5px; line-height: 1.35; }
.film-move {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--k-bg3);
  color: var(--k-accent2);
  font-size: 10px;
  font-weight: 700;
}

.film-movepicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--k-border);
  border-radius: 12px;
  background: var(--k-bg1);
}
.film-movepicker b, .film-movepicker i {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
}
.film-movepicker i { background: var(--k-bg2); color: var(--k-text-dim); }
.film-movepicker b { background: var(--k-accent); color: #fff; font-weight: 700; }
.film-move-group {
  margin-left: 4px;
  color: var(--k-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.film-move-group:first-child { margin-left: 0; }

/* ── 03 · performance ───────────────────────────────────────────────────── */
.film-perf { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.film-perf-video { border-radius: 12px; overflow: hidden; background: #000; }
.film-video { display: block; width: 100%; aspect-ratio: 1; background: #000; }

.film-lane { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.film-lane-label { flex: none; width: 58px; color: var(--k-muted); font-size: 10px; font-weight: 700; }
.film-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; }
.film-wave i {
  flex: 1;
  border-radius: 1px;
  background: var(--k-accent);
  opacity: 0.55;
  height: 30%;
  animation: filmWave 1.5s ease-in-out infinite;
}
.film-wave i:nth-child(3n)   { animation-delay: 0.18s; height: 72%; }
.film-wave i:nth-child(3n+1) { animation-delay: 0.36s; height: 46%; }
.film-wave i:nth-child(4n)   { animation-delay: 0.54s; height: 94%; }
@keyframes filmWave { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }

.film-sync { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; height: 20px; }
.film-sync b { border-radius: 4px; background: var(--k-bg3); transition: background 0.4s ease; }
[data-film-stage="2"][data-film-phase="1"] [data-film-sync="0"],
[data-film-stage="2"][data-film-phase="2"] [data-film-sync="0"],
[data-film-stage="2"][data-film-phase="2"] [data-film-sync="1"],
[data-film-stage="2"][data-film-phase="3"] [data-film-sync="0"],
[data-film-stage="2"][data-film-phase="3"] [data-film-sync="1"],
[data-film-stage="2"][data-film-phase="3"] [data-film-sync="2"],
[data-film-stage="2"][data-film-phase="4"] [data-film-sync="0"],
[data-film-stage="2"][data-film-phase="4"] [data-film-sync="1"],
[data-film-stage="2"][data-film-phase="4"] [data-film-sync="2"],
[data-film-stage="2"][data-film-phase="4"] [data-film-sync="3"] { background: var(--k-green); }

.film-beats { margin: 12px 0 0; padding: 0; list-style: none; }
.film-beats li {
  display: flex;
  gap: 9px;
  padding: 7px 0;
  border-top: 1px solid var(--k-border-soft);
  color: var(--k-text-dim);
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
.film-beats li span {
  flex: none;
  width: 74px;
  color: var(--k-accent2);
  font-weight: 700;
}
[data-film-stage="2"][data-film-phase="1"] [data-film-beat="0"],
[data-film-stage="2"][data-film-phase="2"] [data-film-beat="0"],
[data-film-stage="2"][data-film-phase="2"] [data-film-beat="1"],
[data-film-stage="2"][data-film-phase="3"] [data-film-beat="0"],
[data-film-stage="2"][data-film-phase="3"] [data-film-beat="1"],
[data-film-stage="2"][data-film-phase="3"] [data-film-beat="2"],
[data-film-stage="2"][data-film-phase="4"] [data-film-beat="0"],
[data-film-stage="2"][data-film-phase="4"] [data-film-beat="1"],
[data-film-stage="2"][data-film-phase="4"] [data-film-beat="2"],
[data-film-stage="2"][data-film-phase="4"] [data-film-beat="3"] { opacity: 1; }

/* ── 04 · the cut ───────────────────────────────────────────────────────── */
.film-finish { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
.film-sub {
  display: block;
  margin-bottom: 9px;
  color: var(--k-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.film-job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  padding: 9px 11px;
  border: 1px solid var(--k-border);
  border-radius: 10px;
  background: var(--k-bg1);
  font-size: 11px;
}
.film-job i { font-style: normal; font-size: 10px; }
.film-job.done i { color: var(--k-green); }
.film-job.run { border-color: var(--k-accent); background: var(--k-bg2); }
.film-job.run i { color: var(--k-accent2); }
.film-job.wait i { color: var(--k-muted); }
.film-queue small { display: block; margin-top: 8px; color: var(--k-muted); font-size: 10px; line-height: 1.45; }

.film-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.film-contact img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  background: #000;
}
.film-verdict {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(240, 115, 110, 0.35);
  border-radius: 10px;
  background: rgba(240, 115, 110, 0.09);
  color: var(--k-text-dim);
  font-size: 11px;
  line-height: 1.45;
}
.film-verdict b { color: var(--k-red); }

/* ── the three closers ──────────────────────────────────────────────────── */
.film-more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1120px;
  margin: 20px auto 0;
}
.film-more > div {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}
.film-more strong { display: block; margin-bottom: 6px; color: var(--green-dark); font-size: 14px; }
.film-more p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .film-section { padding-top: 90px; padding-bottom: 95px; }
  .film-sheets, .film-board, .film-more { grid-template-columns: 1fr; }
  .film-perf, .film-finish { grid-template-columns: 1fr; }
  .film-stage-caption { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .film-sheet, .film-beats li { opacity: 1; transform: none; }
  .film-wave i { animation: none; }
  [data-film-panel] { animation: none !important; }
}

/* Stage 3's clip is square: cap the column so the panel stays balanced instead
   of the video towering over the lane list beside it. */
.film-perf { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.film-perf-video { max-width: 360px; }

/* Sheets vary in aspect ratio, so pin the captions to the bottom of each card
   and they line up across the row. */
.film-sheet { display: flex; flex-direction: column; }
.film-sheet figcaption { margin-top: auto; padding-top: 9px; }

@media (max-width: 900px) {
  .film-perf { grid-template-columns: 1fr; }
  .film-perf-video { max-width: none; }
}

/* On a phone the head's two halves cannot share a row: the monospace status
   pill ("3 of 6 references on this shot") is wider than the column. Let it wrap
   and sit under the tab strip rather than pushing the panel out of the page. */
@media (max-width: 620px) {
  .film-panel-head { flex-wrap: wrap; row-gap: 8px; }
  .film-tab-strip { flex-wrap: wrap; row-gap: 5px; }
  .film-count { max-width: 100%; font-size: 9.5px; white-space: normal; }
}

/* ── IMAGINATION × LOCAL AI ───────────────────────────────────────────────
   A cinematic hinge between the friendly assistant and the film studio. It
   uses actual Kynd outputs rather than decorative concept art: Z-Image gives
   the idea a form, and the LTX performance gives it time. */
.breakthrough-section {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 10vw, 154px) var(--gut) clamp(86px, 9vw, 132px);
  background:
    radial-gradient(circle at 84% 12%, rgba(82, 105, 239, 0.23), transparent 31%),
    radial-gradient(circle at 10% 88%, rgba(40, 168, 223, 0.13), transparent 30%),
    linear-gradient(145deg, #0b1713 0%, #11241d 52%, #11182a 100%);
  color: #f5f1e8;
  isolation: isolate;
}

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

.breakthrough-glow-one {
  width: 520px;
  height: 520px;
  top: -290px;
  left: 18%;
  background: radial-gradient(circle, rgba(198, 236, 219, 0.18), transparent 67%);
}

.breakthrough-glow-two {
  width: 620px;
  height: 620px;
  right: -340px;
  bottom: -370px;
  background: radial-gradient(circle, rgba(231, 226, 255, 0.18), transparent 68%);
}

.breakthrough-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(440px, 1.08fr);
  align-items: center;
  gap: clamp(54px, 7vw, 104px);
}

.breakthrough-copy .eyebrow {
  color: #9ee4c5;
}

.breakthrough-copy h2 {
  max-width: 680px;
  margin: 0;
  color: #fffdf7;
  font-size: clamp(44px, 5.6vw, 78px);
  font-weight: 620;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.breakthrough-copy h2 em {
  color: #aebcff;
  font-style: normal;
}

.breakthrough-copy > p {
  max-width: 650px;
  margin: 24px 0 0;
  color: rgba(245, 241, 232, 0.75);
  font-size: 16px;
  line-height: 1.75;
}

.breakthrough-copy > p strong {
  color: #fffdf7;
  font-weight: 720;
}

.breakthrough-copy blockquote {
  position: relative;
  margin: 30px 0 0;
  padding: 3px 0 3px 25px;
  border-left: 2px solid #8da4ff;
  color: #fffdf7;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.5;
}

.breakthrough-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 30px;
}

.breakthrough-links a {
  color: #b9c7ff;
  font-size: 13px;
  font-weight: 720;
  text-decoration-color: rgba(185, 199, 255, 0.38);
  text-underline-offset: 5px;
}

.breakthrough-links a:hover { color: #fff; }

.breakthrough-media {
  position: relative;
  min-height: 660px;
}

.breakthrough-frame {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 23px;
  background: #0a0d0c;
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.42);
}

.breakthrough-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  border-radius: inherit;
}

.breakthrough-frame img,
.breakthrough-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #090d0b;
}

.breakthrough-frame figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 56px 20px 18px;
  background: linear-gradient(transparent, rgba(5, 8, 7, 0.92));
}

.breakthrough-frame figcaption span {
  display: block;
  color: #aebcff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.breakthrough-frame figcaption strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.breakthrough-still {
  top: 26px;
  left: 0;
  width: 59%;
  transform: rotate(-4deg);
}

.breakthrough-motion {
  right: 0;
  bottom: 46px;
  z-index: 2;
  width: 64%;
  transform: rotate(3.2deg);
}

.breakthrough-local {
  position: absolute;
  z-index: 3;
  right: 7%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(9, 19, 15, 0.82);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 650;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.breakthrough-local i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #75dfa9;
  box-shadow: 0 0 0 5px rgba(117, 223, 169, 0.11);
}

.breakthrough-principles {
  width: min(1180px, 100%);
  margin: clamp(58px, 7vw, 92px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.breakthrough-principles article {
  padding: 28px 28px 0 0;
}

.breakthrough-principles article + article {
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.breakthrough-principles span {
  display: block;
  color: #8fe3bd;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.breakthrough-principles strong {
  display: block;
  margin-top: 8px;
  color: #fffdf7;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.breakthrough-principles p {
  margin: 7px 0 0;
  color: rgba(245, 241, 232, 0.62);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .breakthrough-grid { grid-template-columns: 1fr; }
  .breakthrough-copy { max-width: 760px; }
  .breakthrough-media { width: min(660px, 100%); min-height: 650px; margin: 0 auto; }
}

@media (max-width: 700px) {
  .breakthrough-section { padding-left: 20px; padding-right: 20px; }
  .breakthrough-copy h2 { font-size: clamp(42px, 13vw, 62px); }
  .breakthrough-media { min-height: auto; display: grid; grid-template-columns: 1fr; gap: 18px; }
  .breakthrough-frame { position: relative; inset: auto; width: 100%; transform: none; }
  .breakthrough-motion { z-index: 1; }
  .breakthrough-local { position: relative; right: auto; bottom: auto; width: fit-content; max-width: 100%; justify-self: center; }
  .breakthrough-principles { grid-template-columns: 1fr; }
  .breakthrough-principles article { padding: 23px 0; }
  .breakthrough-principles article + article { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
  .breakthrough-frame { transform: none; }
}

/* Collaborative creation manifesto */
.manifesto-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(110px, 12vw, 178px) 32px;
  border-bottom: 1px solid rgba(29, 30, 27, 0.1);
  background:
    linear-gradient(rgba(31, 33, 30, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 33, 30, 0.035) 1px, transparent 1px),
    #f2eee4;
  background-size: 42px 42px;
  color: #1f211e;
}

.manifesto-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: radial-gradient(circle at 50% 43%, rgba(255, 255, 255, 0.95), rgba(242, 238, 228, 0.2) 53%, transparent 72%);
}

.manifesto-orbit {
  position: absolute;
  z-index: -1;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(73, 86, 201, 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.manifesto-orbit::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6576e8;
  box-shadow: 0 0 0 8px rgba(101, 118, 232, 0.09);
}

.manifesto-orbit-one {
  top: 115px;
  left: -300px;
}

.manifesto-orbit-one::after {
  top: 82px;
  right: 45px;
}

.manifesto-orbit-two {
  right: -255px;
  bottom: 90px;
  width: 360px;
  height: 360px;
  border-color: rgba(43, 140, 99, 0.15);
}

.manifesto-orbit-two::after {
  top: 32px;
  left: 78px;
  background: #42a77a;
  box-shadow: 0 0 0 8px rgba(66, 167, 122, 0.1);
}

.manifesto-wrap {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.manifesto-header {
  max-width: 950px;
  margin: 0 auto;
  text-align: center;
}

.manifesto-header .eyebrow {
  color: #5263cf;
}

.manifesto-header h2 {
  margin: 0;
  font-size: clamp(48px, 6.4vw, 88px);
  font-weight: 640;
  letter-spacing: -0.06em;
  line-height: 0.96;
}

.manifesto-header h2 span {
  color: #5869d7;
}

.manifesto-header > p:last-child {
  max-width: 730px;
  margin: 30px auto 0;
  color: rgba(31, 33, 30, 0.69);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.65;
}

.manifesto-header > p strong {
  color: #1f211e;
  font-weight: 750;
}

.manifesto-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin-top: clamp(60px, 8vw, 100px);
}

.manifesto-card {
  min-height: 445px;
  padding: clamp(32px, 4vw, 52px);
  border: 1px solid rgba(31, 33, 30, 0.12);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 30px 80px rgba(39, 39, 30, 0.08);
}

.manifesto-card-passive {
  transform: rotate(-1.25deg);
  color: rgba(31, 33, 30, 0.72);
}

.manifesto-card-kynd {
  transform: rotate(1.25deg);
  border-color: rgba(103, 120, 231, 0.38);
  background: linear-gradient(145deg, #273157, #111629 72%);
  color: #fdfaf2;
  box-shadow: 0 34px 90px rgba(33, 40, 82, 0.25);
}

.manifesto-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.manifesto-label i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8e9188;
}

.manifesto-card-kynd .manifesto-label {
  color: #9ce5c3;
}

.manifesto-card-kynd .manifesto-label i {
  background: #80dbb2;
  box-shadow: 0 0 0 6px rgba(128, 219, 178, 0.09);
}

.manifesto-card h3 {
  margin: 38px 0 0;
  font-size: clamp(32px, 3.2vw, 45px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.manifesto-card-passive h3 span {
  color: #999b93;
}

.manifesto-card-kynd h3 span {
  color: #aebcff;
}

.manifesto-card > p:last-child {
  margin: 30px 0 0;
  font-size: 15px;
  line-height: 1.72;
}

.manifesto-card-passive > p:last-child {
  color: rgba(31, 33, 30, 0.62);
}

.manifesto-card-kynd > p:last-child {
  color: rgba(253, 250, 242, 0.7);
}

.manifesto-mission {
  position: relative;
  z-index: 3;
  display: flex;
  width: 176px;
  height: 176px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(78, 96, 211, 0.33);
  border-radius: 50%;
  background: rgba(253, 251, 246, 0.94);
  box-shadow: 0 22px 65px rgba(47, 54, 98, 0.14);
  text-align: center;
}

.manifesto-mission small {
  margin-bottom: 8px;
  color: #6676dd;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.manifesto-mission strong {
  font-size: 16px;
  letter-spacing: -0.02em;
}

.manifesto-mission span {
  margin: 3px 0;
  color: #6576e8;
  font-size: 18px;
  line-height: 1;
}

.manifesto-close {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
  align-items: end;
  gap: 60px;
  margin-top: clamp(65px, 8vw, 100px);
  padding-top: 36px;
  border-top: 1px solid rgba(31, 33, 30, 0.14);
}

.manifesto-close blockquote {
  max-width: 760px;
  margin: 0;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 610;
  letter-spacing: -0.04em;
  line-height: 1.18;
}

.manifesto-close p {
  margin: 0;
  color: rgba(31, 33, 30, 0.66);
  font-size: 16px;
  line-height: 1.65;
}

.manifesto-close p strong {
  color: #1f211e;
}

.manifesto-close p em {
  color: #5364cf;
  font-style: normal;
  font-weight: 760;
}

@media (max-width: 900px) {
  .manifesto-path {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .manifesto-card {
    min-height: 0;
    transform: none;
  }

  .manifesto-mission {
    width: 142px;
    height: 142px;
    margin: -8px auto;
  }

  .manifesto-close {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .manifesto-close p {
    max-width: 520px;
  }
}

@media (max-width: 640px) {
  .manifesto-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .manifesto-header {
    text-align: left;
  }

  .manifesto-header h2 {
    font-size: clamp(44px, 13vw, 64px);
  }

  .manifesto-header > p:last-child {
    margin-left: 0;
  }

  .manifesto-card {
    padding: 32px 27px;
    border-radius: 23px;
  }

  .manifesto-card h3 {
    font-size: clamp(32px, 10vw, 42px);
  }

  .manifesto-close blockquote {
    font-size: clamp(27px, 8vw, 36px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto-card { transform: none; }
}