/* landing.css is shared and identical across the apps. This app's accent and its own pieces are here. */
body[data-app="search"] { --accent: #a594ff; }

.landing-search {
  display: flex;
  gap: 10px;
  width: min(100%, 640px);
  margin: 36px auto 0;
}
.landing-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 99px;
  background: #1b1b1b;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  font: inherit;
  font-size: 17px;
}
.landing-search input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.landing-search .btn { height: 52px; border-radius: 99px; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding-bottom: var(--section-y); }
.why { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #141414; }
.why h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.why p { margin: 8px 0 0; }
@media (max-width: 560px) {
  .landing-search { flex-direction: column; }
  .landing-search .btn { width: 100%; justify-content: center; }
}