/* Free tools. Shared navigation, typography and the FAQ live in landing.css; form fields in app.css. */
.gpt-mobile-actions { display: none; }
.gpt-tool-landing code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125em; background: #f0eee5; padding: 1px 5px; border-radius: 4px; }
.gpt-small { font-size: .8125rem; color: #5d6457; margin: 10px 0 0; }

.gpt-map, .gpt-preview { margin: 0; min-width: 0; background: #fffdf7; border: 1px solid #d8d6c8; border-radius: 15px; overflow: hidden; box-shadow: 8px 8px 0 #ebe8db, 0 22px 50px #17201b09; }
.gpt-preview-bar { display: flex; justify-content: space-between; gap: 12px; padding: 14px 22px; border-bottom: 1px solid #e3e0d3; background: #f3f1e8; font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: #5d6457; }
.gpt-map dl { margin: 0; }
.gpt-map dl > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 16px; padding: 14px 22px; border-bottom: 1px solid #eceadf; }
.gpt-map dl > div:last-child { border-bottom: 0; }
.gpt-map dt { font-weight: 600; font-size: .9375rem; }
.gpt-map dd { margin: 0; font-size: .875rem; line-height: 1.5; color: #3f453b; }
.gpt-map .gpt-map-lost dt, .gpt-map .gpt-map-lost dd { color: #8a4a2c; }

.gpt-tool { padding-block: 30px 90px; }
.gpt-tool-header h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -.03em; margin: 0 0 8px; }
.gpt-tool-header p { margin: 0 0 26px; color: #4c5247; max-width: 62ch; }
.gpt-form { max-width: 760px; padding: 30px; background: #fffdf7; border: 1px solid #d8d6c8; border-radius: 15px; }
.gpt-form .field-group { margin-bottom: 20px; }
.gpt-form textarea.field-input.tall { min-height: 280px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; line-height: 1.55; }
.gpt-optional { font-weight: 400; color: #6b7165; margin-left: 6px; font-size: .8125rem; }
.gpt-capabilities { border: 0; padding: 0; }
.gpt-capabilities label { display: flex; align-items: center; gap: 9px; font-size: .9375rem; margin-top: 8px; }
.gpt-error { max-width: 760px; margin: 0 0 18px; padding: 13px 16px; border-radius: 10px; background: #fbe9e2; color: #8a2f17; font-size: .9375rem; }

.gpt-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 50px; padding-block: 45px 50px; align-items: start; }
.gpt-result-title { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; margin: 0 0 12px; }
.gpt-result-lede { margin: 0 0 22px; color: #4c5247; }
.gpt-install, .gpt-notes { margin-top: 30px; }
.gpt-install h2, .gpt-notes h2 { font-size: 1.0625rem; font-weight: 650; margin: 0 0 10px; }
.gpt-install ol, .gpt-notes ul { margin: 0; padding-left: 20px; list-style: decimal; line-height: 1.6; font-size: .9375rem; }
.gpt-notes ul { list-style: disc; }
.gpt-notes li + li { margin-top: 6px; }
.gpt-preview pre { margin: 0; padding: 20px 22px; max-height: 560px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: .78rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: #2f342c; }
.gpt-preview-files { padding: 13px 22px; border-top: 1px solid #e3e0d3; font-size: .8125rem; background: #f6f4ec; }

.gpt-sell { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-block: 10px 40px; padding: 40px; border-radius: 18px; background: #243e2e; color: #f3f1e6; }
.product-landing .gpt-sell :is(h2, p) { color: #f3f1e6; }
.gpt-sell h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 500; letter-spacing: -.03em; margin: 0 0 12px; }
.gpt-sell p { margin: 0; line-height: 1.6; }
.product-landing .gpt-sell .gpt-small { color: #c8cfc0; }
.gpt-sell-plain { grid-template-columns: minmax(0, 1fr); max-width: 980px; }

@media (max-width: 1250px) {
  .gpt-mobile-actions { display: flex; margin-left: auto; }
}
@media (max-width: 960px) {
  .gpt-result, .gpt-sell { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 600px) {
  .gpt-form { padding: 20px 16px; }
  .gpt-map dl > div { grid-template-columns: 1fr; gap: 4px; }
  .gpt-sell { padding: 28px 20px; }
  .gpt-sell .btn { width: 100%; }
}