/* AI Tool Finder visual system, extracted from the Claude Design direction. */
:root {
  --aitf-paper: #fbfaf6;
  --aitf-surface: #fffdf8;
  --aitf-panel: #ffffff;
  --aitf-ink: #1a1815;
  --aitf-muted: #686252;
  --aitf-soft: #8f8878;
  --aitf-rule: #ded8cc;
  --aitf-rule-strong: #cfc6b5;
  --aitf-accent: #8c5a2a;
  --aitf-blue: #315b8f;
  --aitf-green: #51725f;
  --aitf-red: #9a4f38;
  --aitf-shadow: 0 18px 48px rgba(26, 24, 21, .075);
}

html {
  background: var(--aitf-paper);
}

body {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, .94), rgba(247, 243, 234, .96)),
    var(--aitf-paper) !important;
  color: var(--aitf-ink) !important;
  font-family: "Aptos", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-size: 16px;
  letter-spacing: 0 !important;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
.section-title {
  color: var(--aitf-ink) !important;
  letter-spacing: 0 !important;
}

p,
li,
.section-sub,
.hero p,
.tool-card p,
.category-card p,
.note-card p,
.feature-card p,
.faq-card p,
.directory-row p {
  color: var(--aitf-muted) !important;
}

.shell,
.wrap,
.container,
.submit-shell,
.submit-main {
  width: min(1160px, calc(100vw - 40px)) !important;
}

.nav {
  background: rgba(251, 250, 246, .88) !important;
  border-bottom: 1px solid rgba(26, 24, 21, .11) !important;
  box-shadow: 0 1px 0 rgba(26, 24, 21, .035);
}

.nav-inner {
  height: 60px !important;
}

.brand {
  font-weight: 650 !important;
}

.brand-mark,
.tool-mark,
.mini-mark,
.row-mark {
  border-radius: 6px !important;
  background: var(--aitf-ink) !important;
}

.mini-mark,
.tool-mark,
.row-mark {
  overflow: hidden;
  position: relative;
}

.aitf-logo-mark {
  background: #fff !important;
  border-color: var(--aitf-rule) !important;
}

.aitf-logo-mark img {
  display: block;
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.aitf-generic-mark {
  background: #f7f1e8 !important;
  border-color: var(--aitf-rule) !important;
  color: var(--aitf-accent) !important;
}

.panel-title,
.mini-name,
.directory-row h3,
.category-card strong,
.feature-card h3,
.faq-card h3,
.note-card h2,
.tool-card h3 {
  font-weight: 680 !important;
}

.hero h1,
.section-title {
  font-weight: 560 !important;
}

.button,
.nav-links,
.row-rank,
.mini-rank,
.metric span,
.panel-kicker {
  font-weight: 650 !important;
}

.nav-links {
  gap: 18px !important;
}

.nav-links a,
.nav-cta {
  color: var(--aitf-muted) !important;
  font-weight: 560 !important;
}

.nav-links a:hover {
  color: var(--aitf-ink) !important;
}

.nav-cta {
  background: var(--aitf-panel) !important;
  border-color: var(--aitf-rule) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.hero {
  background:
    radial-gradient(circle at 18% 0%, rgba(140, 90, 42, .075), transparent 34%),
    linear-gradient(180deg, #fffdf8 0%, #fbfaf6 100%) !important;
  border-bottom: 1px solid var(--aitf-rule) !important;
  padding: 48px 0 34px !important;
}

.hero-grid {
  gap: 28px !important;
}

.eyebrow,
.trust-strip span,
.mini-badge,
.tool-price,
.row-price,
.category-examples span,
.chip {
  background: rgba(255, 255, 255, .68) !important;
  border: 1px solid var(--aitf-rule) !important;
  border-radius: 999px !important;
  color: var(--aitf-muted) !important;
  font-weight: 560 !important;
  box-shadow: none !important;
}

.hero h1 {
  color: var(--aitf-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(40px, 5vw, 62px) !important;
  font-weight: 430 !important;
  line-height: 1.03 !important;
  max-width: 760px;
}

.hero h1 span {
  color: var(--aitf-accent) !important;
  font-style: italic;
  font-weight: 420 !important;
}

.hero p {
  max-width: 690px;
  font-size: 16.5px !important;
}

.search-box {
  border: 1px solid var(--aitf-rule-strong) !important;
  border-radius: 10px !important;
  box-shadow: var(--aitf-shadow) !important;
  background: rgba(255, 255, 255, .86) !important;
}

.search-box input,
input[type="text"],
input[type="email"],
input[type="url"],
select,
textarea {
  border-color: var(--aitf-rule) !important;
  border-radius: 8px !important;
  color: var(--aitf-ink) !important;
  background: #fffdf9 !important;
}

.button,
.visit-btn,
.cta-btn,
.ph-btn,
#launch-button {
  background: var(--aitf-ink) !important;
  border: 1px solid var(--aitf-ink) !important;
  border-radius: 8px !important;
  color: #fff !important;
  box-shadow: 0 2px 0 rgba(26, 24, 21, .12) !important;
  font-weight: 620 !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}

.button:hover,
.visit-btn:hover,
.cta-btn:hover,
.ph-btn:hover,
#launch-button:hover {
  background: #332a20 !important;
  border-color: #332a20 !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

.button.secondary,
.button.subtle {
  background: #fffdf9 !important;
  border-color: var(--aitf-rule) !important;
  color: var(--aitf-ink) !important;
  box-shadow: none !important;
}

.live-panel,
.category-card,
.tool-card,
.note-card,
.feature-card,
.faq-card,
.card,
.plan-card,
.related-card,
.alt-card,
.feature-card,
.pros,
.cons {
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid var(--aitf-rule) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(26, 24, 21, .045) !important;
}

.panel-head {
  background: #fffaf1 !important;
  border-bottom-color: var(--aitf-rule) !important;
}

.panel-kicker {
  color: var(--aitf-accent) !important;
  font-weight: 650 !important;
}

.panel-title,
.category-card strong,
.tool-card h3,
.directory-row h3,
.faq-card h3,
.feature-card h3,
.note-card h2 {
  font-weight: 630 !important;
}

.mini-tool,
.directory-row {
  border-bottom-color: rgba(222, 216, 204, .72) !important;
}

.mini-tool:hover,
.directory-row:hover,
.category-card:hover,
.tool-card:hover,
.feature-card:hover,
.related-card:hover {
  background: #fffaf1 !important;
  border-color: var(--aitf-rule-strong) !important;
  transform: translateY(-1px);
  text-decoration: none;
}

.metric-row {
  background: #fffdf8 !important;
  border-color: var(--aitf-rule) !important;
}

.metric {
  border-color: var(--aitf-rule) !important;
}

.metric strong {
  color: var(--aitf-ink) !important;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace !important;
  font-size: 24px !important;
  font-weight: 620 !important;
}

.metric span {
  color: var(--aitf-soft) !important;
  font-weight: 620 !important;
  letter-spacing: .04em !important;
}

.section {
  padding: 46px 0 !important;
}

.section.band {
  background:
    linear-gradient(180deg, rgba(247, 243, 234, .92), rgba(251, 250, 246, .94)) !important;
  border-color: var(--aitf-rule) !important;
}

.section-title {
  font-size: 26px !important;
  font-weight: 620 !important;
}

.category-grid,
.tools-grid,
.feature-grid,
.faq-grid {
  gap: 14px !important;
}

.category-card,
.tool-card,
.note-card,
.feature-card,
.faq-card {
  padding: 17px !important;
}

.tool-card::before,
.feature-card::before {
  height: 2px !important;
  background: var(--aitf-accent) !important;
}

.tool-tags span {
  background: #f6efe3 !important;
  color: #6f4a23 !important;
  font-weight: 560 !important;
}

.directory-list {
  border: 1px solid var(--aitf-rule) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .86) !important;
}

.directory-row {
  grid-template-columns: 40px 38px minmax(0, 1fr) 150px 112px !important;
  padding: 12px 16px !important;
}

.row-rank,
.mini-rank,
.category-count {
  color: var(--aitf-accent) !important;
  font-weight: 680 !important;
}

.footer,
footer {
  background: #fffdf8 !important;
  border-top: 1px solid var(--aitf-rule) !important;
  color: var(--aitf-muted) !important;
}

.cta-section {
  background: var(--aitf-ink) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.cta-section p,
.cta-section h2,
.cta-section div,
.cta-section span {
  color: rgba(255, 255, 255, .88) !important;
}

/* Submit page */
.submit-main {
  max-width: 1160px !important;
}

.submit-main .bg-white,
.submit-main aside,
.submit-main form > div,
#submission-readiness-guide .bg-white {
  background: rgba(255, 255, 255, .86) !important;
  border-color: var(--aitf-rule) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(26, 24, 21, .045) !important;
}

.sidebar-item {
  border-radius: 8px !important;
  font-weight: 560 !important;
}

.sidebar-item.active {
  background: #f6efe3 !important;
  color: var(--aitf-ink) !important;
}

.plan-card.active {
  border-color: var(--aitf-accent) !important;
  background: #fffaf1 !important;
}

/* Older tool review pages. */
.wrap > header,
body > header[style*="gradient"] {
  background: var(--aitf-ink) !important;
}

body > header[style*="gradient"] a,
body > header[style*="gradient"] .wrap,
body > header[style*="gradient"] div {
  color: #fffdf8 !important;
}

.wrap,
main.wrap {
  max-width: 1040px !important;
}

.card[style*="gradient"] {
  background:
    radial-gradient(circle at 16% 0%, rgba(140, 90, 42, .10), transparent 32%),
    #fffdf8 !important;
}

main.wrap h1[style] {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(36px, 5vw, 54px) !important;
  font-weight: 430 !important;
}

main.wrap h2[style],
main.wrap h3[style] {
  font-weight: 620 !important;
}

section.card div[style*="repeat(auto-fill"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  background: var(--aitf-rule) !important;
  border-radius: 8px !important;
}

.stat-box .val {
  color: var(--aitf-ink) !important;
  font-weight: 620 !important;
}

.stat-box .lbl {
  color: var(--aitf-muted) !important;
}

table {
  border-color: var(--aitf-rule) !important;
}

th {
  background: #f7f1e8 !important;
  border-color: var(--aitf-rule) !important;
  color: var(--aitf-ink) !important;
}

td {
  border-color: rgba(222, 216, 204, .72) !important;
}

#af-mail-feedback {
  background: var(--aitf-ink) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 30px rgba(26, 24, 21, .18) !important;
}

@media (max-width: 900px) {
  .shell,
  .wrap,
  .container,
  .submit-shell,
  .submit-main {
    width: min(100% - 28px, 1160px) !important;
  }

  .hero {
    padding: 34px 0 24px !important;
  }

  .hero h1 {
    font-size: clamp(34px, 11vw, 46px) !important;
  }

  .directory-row {
    grid-template-columns: 34px 34px minmax(0, 1fr) !important;
  }

  section.card div[style*="repeat(auto-fill"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .nav-inner {
    height: 56px !important;
  }

  .nav-links a:not(.nav-cta) {
    display: none !important;
  }

  .search-box {
    display: block !important;
  }

  .search-box .button,
  .hero-actions .button,
  .button.secondary {
    width: 100% !important;
  }

  .metric-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #af-mail-feedback {
    right: 10px !important;
    bottom: 10px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}