/* HP / OmniGrep: readable content, explicit actions, real product screens. */
:root { --text-tertiary: #64645f; --text-quaternary: #6c6962; }
html { scroll-padding-top: 100px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
h1, h2 { text-wrap: balance; overflow-wrap: anywhere; }
h3, button, summary { font-family: var(--font-sans); }
.container, .hero-text, .hero-shot, .product-card, .mcp-grid > div { min-width: 0; }
.hero .eyebrow, .hero h1, .hero-lede, .hero-cta, .hero-actions, .hero-note, .hero-shot, .hero-meta { animation: none !important; }
[data-reveal] { opacity: 1; transform: none; }
.btn, .btn-purchase { min-height: 48px; justify-content: center; font-size: 15px; line-height: 1.5; text-align: center; }
.nav-links .btn-primary:hover { color: white; }
.hero-note, .hero-meta, .product-card-meta, .product-card-link { font-size: 14px; }
.product-card-desc { font-size: 16px; }
.nav-links { gap: 20px; }
.hero { padding-top: 52px; }
.hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.hero h1 { font-size: clamp(30px, 3.1vw, 40px); line-height: 1.5; }
.hero h1 .accent { font-style: normal; }
.hero-meta { grid-column: 1 / -1; gap: 16px; margin: 0; }
.hero-shot { margin: 0; }
.screen-crop { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: white; }
.hero-shot .screen-crop img { width: 148%; max-width: none; height: auto; }
.hero-shot figcaption { padding: 14px 18px; font-size: 14px; color: var(--text-secondary); }
.hero-shot figcaption a, .text-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.trial-terms { margin-top: 10px; font-size: 14px; color: var(--text-secondary); }
.mobile-handoff { margin-top: 16px; font-size: 14px; }
.mobile-handoff button { font: inherit; color: var(--accent); border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px 14px; background: white; cursor: pointer; }
.mobile-handoff output { display: block; overflow-wrap: anywhere; }
.mcp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.data-note { padding: 18px 20px; background: var(--accent-soft); border-radius: 12px; margin-top: 20px; font-size: 16px; }
.problem-card { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.problem-grid { gap: 20px; }
.problem-card p { font-size: 16px; margin-top: 16px; }
.problem-card .example { font-size: 14px; color: var(--accent); }
.demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.demo-step { margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: white; }
.demo-step img { display: block; width: 100%; height: auto; }
.demo-step figcaption { padding: 18px; font-size: 16px; }
.demo-step figcaption strong { display: block; margin-bottom: 6px; }
.video-details { margin-top: 28px; }
.video-details > summary { cursor: pointer; color: var(--accent); padding: 16px 0; }
.video-placeholder { width: 100%; height: 100%; padding: 24px; border: 0; background: var(--bg-subtle); color: var(--accent); font: 600 16px var(--font-sans); cursor: pointer; }
.demo-video .video-placeholder { position: absolute; inset: 0; }
.faq-item table { table-layout: fixed; overflow-wrap: anywhere; }
.faq-item th, .faq-item td { padding: 8px !important; }
.plan-mode, .pricing-note, .closing-note { font-size: 15px; }
.pricing-grid--single { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan { min-width: 0; }
.demo-step > a { display: block; overflow: hidden; aspect-ratio: 1.45; }
.demo-step img { width: 148%; max-width: none; }
.demo-step:last-child img { width: 240%; margin-left: -140%; margin-top: -40%; }
.image-dialog { width: min(1280px, 96vw); max-width: 96vw; max-height: 92dvh; padding: 20px; border: 1px solid var(--border); border-radius: 14px; }
.image-dialog::backdrop { background: rgb(0 0 0 / .65); }
.image-dialog img { display: block; width: 100%; height: auto; }
.image-dialog form { text-align: right; margin-bottom: 12px; }
.image-dialog button { padding: 10px 18px; font: inherit; cursor: pointer; }
.studio-page { --maxw: 1120px; }
.studio-page .hero h1 { max-width: 840px; font-size: clamp(26px, 4vw, 48px); }
.studio-page .hero-preview { display: block; max-width: 560px; margin: 32px auto 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-align: left; }
.studio-page .hero-preview img { display: block; width: 148%; max-width: none; }
.studio-page .hero-preview .screen-crop { aspect-ratio: 8 / 4; }
.studio-page .hero-preview span:last-child { display: block; padding: 12px 16px; background: white; font-size: 14px; color: var(--accent); }
.product-purpose { padding: 20px 24px; margin: 0; font-size: 18px; font-weight: 600; }
.selection-guide { margin-top: 32px; padding: 24px; background: white; border: 1px solid var(--border); border-radius: 14px; }
.selection-guide p { margin: 12px 0 0; }
.chat-text { min-width: 0; overflow-wrap: anywhere; }
.flow .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.codebox-head { overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .hero-grid, .mcp-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-shot { max-width: 720px; width: 100%; }
  .demo-steps { grid-template-columns: 1fr; }
  .pricing-grid--single { grid-template-columns: 1fr; max-width: 600px; }
  .demo-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
@media (max-width: 600px) {
  .chat-row { flex-direction: column; gap: 6px; }
  .usecase { padding: 20px 16px; }
  .nav-inner { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .nav-links { gap: 8px; }
  .nav-links .btn { font-size: 14px; padding: 8px 12px; }
  .studio-page .nav-links > a { display: none; }
  .studio-page .nav-social { padding-left: 0; margin: 0; border: 0; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero h1 { font-size: clamp(28px, 7.6vw, 34px); }
  .hero-shot .screen-crop { aspect-ratio: 8 / 6; }
  .demo-step { display: block; }
  .product-card-meta { gap: 12px; }
  .product-card-link { width: 100%; margin-left: 0; }
  .kind-list { grid-template-columns: 1fr !important; }
  .kind-list li { flex-wrap: wrap; }
  .closing-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

.studio-page .hero-preview img { margin-top: -18%; }

.plan-name, .plan-price, .plan-price .num { font-family: var(--font-sans); }