/* Dedicated product entry points. Form logic remains the shared demo form. */
.app-document { scroll-padding-top: 100px; }
.app-page { background: #f8f7f5; }
.app-page main { padding-top: 100px; }
.app-shell { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.app-skip { position: fixed; z-index: 10001; left: 20px; top: -70px; background: #fff; color: #111; padding: 12px; }
.app-skip:focus { top: 10px; }
.app-hero { width: min(1440px, calc(100% - 48px)); padding: 0; margin: 0 auto; background: #121214; border-radius: 28px; color: #fff; }
.app-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; padding-block: 64px; align-items: center; }
.app-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: #a63d08; font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; line-height: 1.5; }
.app-eyebrow img { border-radius: 10px; }
.app-hero-copy > .app-eyebrow { color: #ff9557; }
.app-hero h1 { margin: 0 0 24px; font-size: clamp(38px, 4vw, 58px); font-weight: 700; line-height: 1.08; letter-spacing: -2px; color: #fff; }
.app-hero h1 span { color: #ff9557; }
.app-intro { color: #d4d2cf; font-size: 18px; line-height: 1.65; max-width: 570px; }
.app-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 24px; margin-top: 30px; }
.app-install { background: #fff; color: #121214; font-size: 16px; padding: 16px 22px; border-radius: 10px; box-shadow: 0 5px 0 #ea580c; gap: 20px; }
.app-install:hover { background: #f5f1eb; color: #121214; }
.app-text-link { color: #fff; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.app-text-link:hover { color: #ff9557; }
.app-note { margin-top: 24px; font-size: 13px; line-height: 1.6; color: #5c5c63; }
.app-hero-copy .app-note { color: #bab8b4; }
.app-form-card { min-width: 0; padding: 32px; border-radius: 20px; background: #fff; color: #18181b; scroll-margin-top: 100px; box-shadow: 0 16px 48px #0002; }
.app-form-card > .app-eyebrow { margin-bottom: 12px; }
.app-form-card > h2 { margin: 0 0 12px; font-size: 28px; line-height: 1.2; letter-spacing: -.7px; font-weight: 700; }
.app-form-card > p:not(.app-eyebrow) { color: #5c5c63; font-size: 15px; line-height: 1.6; margin-bottom: 26px; }
.app-form-card .pf-field :is(input,select,textarea) { font-size: 16px; }
.app-form-card .pf-submit { background: #bc4306; }
.app-form-card .pf-submit:hover { background: #a63d08; }
.app-form-card .pf-privacy { color: #5c5c63; }
.app-section { padding: 80px 0; }
.app-section-white { background: #fff; border-block: 1px solid #e5e3df; }
.app-section h2 { margin: 0 0 20px; font-size: clamp(30px, 3vw, 40px); font-weight: 700; line-height: 1.15; letter-spacing: -1.2px; color: #18181b; }
.app-section p { font-size: 16px; line-height: 1.7; color: #5c5c63; }
.app-section .app-eyebrow { color: #a63d08; font-size: 12px; line-height: 1.5; }
.app-section .app-note { font-size: 13px; }
.app-section-heading { max-width: 730px; margin-bottom: 36px; }
.app-demo-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.app-phone { width: min(280px,100%); margin: 0 auto; }
.app-phone img { display: block; width: 100%; height: auto; border: 5px solid #191919; border-radius: 36px; box-shadow: 0 20px 35px #0002; }
.app-phone figcaption { text-align: center; font-size: 12px; color: #5c5c63; margin-top: 18px; }
.app-workflow { padding: 0; margin: 32px 0; list-style: none; counter-reset: steps; }
.app-workflow li { position: relative; counter-increment: steps; padding: 0 0 24px 48px; }
.app-workflow li::before { content: counter(steps, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-size: 13px; font-weight: 700; color: #a63d08; }
.app-workflow strong { display: block; font-size: 17px; margin-bottom: 6px; }
.app-workflow span { display: block; font-size: 15px; color: #5c5c63; line-height: 1.6; }
.app-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; }
.app-feature-grid article { border-top: 3px solid #ea580c; padding-top: 24px; }
.app-feature-grid h3 { font-size: 20px; line-height: 1.3; margin-bottom: 12px; letter-spacing: -.4px; }
.app-feature-grid p { font-size: 15px; }
.app-gpt-example { margin: 0; padding: 32px; border-radius: 24px; background: #121214; color: #fff; }
.app-gpt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 28px; border-bottom: 1px solid #343439; }
.app-gpt-top > span:first-child { display: flex; gap: 12px; align-items: center; font-size: 18px; font-weight: 600; color: #65d5c0; }
.app-gpt-top img { border-radius: 7px; }
.app-example-label { font-size: 12px; color: #c1beba; }
.app-gpt-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; padding-top: 32px; }
.app-gpt-steps { list-style: none; padding: 0; margin: 0; }
.app-gpt-steps li { display: flex; gap: 16px; margin-bottom: 28px; }
.app-gpt-steps li > span { color: #65d5c0; font-size: 13px; margin-top: 3px; }
.app-gpt-steps strong { font-size: 16px; font-weight: 500; }
.app-gpt-steps p { color: #bcb9b5; font-size: 14px; margin-top: 6px; }
.app-gpt-conversation .app-prompt { margin: 0 0 24px 30px; padding: 20px; background: #29292e; border-radius: 18px 18px 3px 18px; color: #fff; font-size: 16px; }
.app-review { border: 1px solid #414148; border-radius: 16px; padding: 24px; }
.app-review .app-review-label { font-size: 12px; color: #65d5c0; margin-bottom: 12px; }
.app-review h3 { color: #fff; font-size: 20px; margin-bottom: 12px; }
.app-review > p { color: #c1beba; font-size: 14px; }
.app-review-status { display: inline-block; border: 1px solid #885338; background: #34251e; color: #ffb28b; border-radius: 6px; font-size: 12px; padding: 8px 12px; margin-top: 20px; }
.app-gpt-example figcaption { border-top: 1px solid #343439; margin-top: 30px; padding-top: 20px; font-size: 12px; line-height: 1.6; color: #bcb9b5; }
.app-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; }
.app-faq details { border-bottom: 1px solid #d9d6d0; }
.app-faq summary { cursor: pointer; padding: 20px 24px 20px 0; font-size: 16px; font-weight: 600; line-height: 1.5; }
.app-faq p { padding-bottom: 24px; font-size: 15px; }
.app-crosslinks { background: #eeeae4; padding: 38px 0; }
.app-crosslinks .app-shell { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.app-crosslinks h2 { font-size: 20px; line-height: 1.3; margin-bottom: 10px; }
.app-crosslinks a { color: #993805; font-size: 14px; text-underline-offset: 4px; }
.app-trademark { padding-block: 22px; color: #656369; font-size: 12px; line-height: 1.6; }
.app-page main :focus-visible { outline: 3px solid #c25319; outline-offset: 5px; }
.app-page .app-hero-copy :focus-visible { outline-color: #ff9557; }
@media (max-width: 900px) {
 .app-hero { width: 100%; border-radius: 0; }
 .app-hero-grid { gap: 36px; grid-template-columns: 1fr 1fr; }
 .app-demo-grid { gap: 40px; }
 .app-gpt-grid { gap: 24px; }
 .app-faq-grid { gap: 32px; }
}
@media (max-width: 700px) {
 .app-page main { padding-top: 72px; }
 .app-shell { width: calc(100% - 40px); }
 .app-hero-grid { grid-template-columns: 1fr; padding-block: 36px; gap: 36px; }
 .app-hero h1 { font-size: 40px; letter-spacing: -1.5px; }
 .app-intro { font-size: 16px; }
 .app-hero-copy .app-note { font-size: 12px; }
 .app-form-card { padding: 24px; }
 .app-form-card h2 { font-size: 26px; }
 .app-section { padding: 48px 0; }
 .app-demo-grid, .app-faq-grid, .app-gpt-grid { grid-template-columns: 1fr; gap: 32px; }
 .app-feature-grid { grid-template-columns: 1fr; gap: 24px; }
 .app-gpt-example { padding: 24px 20px; border-radius: 16px; }
 .app-gpt-top > span:first-child { font-size: 16px; }
 .app-gpt-steps li:last-child { margin-bottom: 0; }
 .app-gpt-conversation .app-prompt { margin-left: 16px; font-size: 15px; }
 .app-review { padding: 20px; }
 .app-crosslinks .app-shell { align-items: flex-start; flex-direction: column; }
 .app-page .mobile-app-play { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .app-document { scroll-behavior: auto; } .app-page .pf-panel { animation: none; } }