.product-page {
  --page: #f6f8f4;
  --muted: #66746d;
  background: var(--page);
}

html { scroll-behavior: smooth; scroll-padding-top: 24px; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button, summary, .screenshot-link { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #317e69; outline-offset: 5px; }
.skip-link { position: absolute; z-index: 10; top: 10px; left: 16px; padding: 12px 18px; border-radius: 8px; background: var(--green); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.product-page .container { width: min(1160px, calc(100% - 64px)); }
.product-page .site-header { background: rgba(255,255,255,.8); }
.product-nav { display: flex; gap: 30px; align-items: center; font-size: 13px; }
.product-nav a { padding-block: 12px; color: var(--muted); text-decoration: none; }
.product-nav a:last-child { color: var(--green); font-weight: 650; }
.product-nav a:hover, .breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.product-nav a span { margin-left: 5px; }
.hero { padding-top: 32px; padding-bottom: 46px; }
.breadcrumb { display: flex; gap: 12px; color: var(--muted); font-size: 12px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb > span:last-child { color: #344d43; }
.product-identity { display: flex; align-items: center; gap: 12px; margin-top: 54px; }
.product-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #c8ddd0; border-radius: 11px; background: #e7efe5; }
.product-icon svg { width: 27px; height: 27px; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.product-identity h1 { font-size: 23px; letter-spacing: -.5px; }
.version-label { margin-left: 5px; padding-left: 18px; border-left: 1px solid #cdd8d0; color: var(--muted); font-size: 12px; }
.hero-statement { margin: 27px 0 19px; max-width: 1100px; font-size: clamp(30px, 4.2vw, 53px); font-weight: 650; line-height: 1.48; letter-spacing: -1.9px; }
.hero-statement span { color: var(--green); }
.hero-description { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.product-pills { display: flex; flex-wrap: wrap; gap: 9px; margin: 23px 0 0; padding: 0; list-style: none; }
.product-pills li { padding: 6px 12px; border: 1px solid #d8e2d8; border-radius: 99px; background: #fdfefb; color: #536459; font-size: 12px; }
.product-pills li span { margin-right: 5px; color: var(--green); font-size: 8px; vertical-align: 1px; }
.intro-link { display: inline-flex; gap: 14px; align-items: center; margin-top: 26px; padding-block: 7px; color: var(--green); font-size: 13px; font-weight: 600; text-decoration: none; }
.intro-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.primary-demo { margin: 0; }
.demo-frame { border: 1px solid #d9e4d9; border-radius: 20px; background: #e6eee3; }
.demo-frame--hero { padding: clamp(12px, 2.8vw, 34px); box-shadow: 0 24px 54px -40px #59705a; }
.screenshot-link { position: relative; display: block; overflow: hidden; border: 1px solid #d2ddd4; border-radius: 10px; background: #fff; box-shadow: 0 8px 26px #30453510; text-decoration: none; }
.screenshot-link img { display: block; width: 100%; height: auto; }
.zoom-label { position: absolute; right: 14px; bottom: 14px; display: inline-flex; gap: 7px; align-items: center; padding: 8px 11px; border: 1px solid #dbe4dc; border-radius: 7px; background: #fffffff5; color: #385747; box-shadow: 0 3px 12px #1f302d0d; font-size: 11px; transition: background 160ms ease; }
.zoom-label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.screenshot-link:hover .zoom-label { background: #e9f2e8; }
.demo-caption { display: flex; gap: 18px; align-items: flex-start; padding: 28px 5px 0; }
.feature-number { color: var(--green); font-size: 12px; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums; }
.demo-caption > .feature-number { padding-top: 4px; }
.demo-caption h2 { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.6; }
.demo-caption p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.caption-type { margin-left: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.feature-row { display: grid; grid-template-columns: .78fr 1.7fr; gap: clamp(30px, 5vw, 76px); align-items: center; margin-top: 106px; }
.feature-copy { padding-left: 5px; }
.feature-number > span { margin-left: 12px; font-size: 11px; font-weight: 500; color: #617566; }
.feature-copy h2 { margin: 17px 0 18px; font-size: clamp(25px, 2.6vw, 31px); font-weight: 650; line-height: 1.5; letter-spacing: -.7px; }
.feature-copy p { margin: 0; color: #5c6d62; font-size: 14px; line-height: 1.9; }
.feature-copy .feature-note { margin-top: 19px; padding-top: 15px; border-top: 1px solid #dce4d9; color: #63735e; font-size: 12px; }
.secondary-demo { min-width: 0; margin: 0; padding: 15px; border: 1px solid #dfe4da; border-radius: 15px; background: #eeefe5; }
.feature-row--reverse { grid-template-columns: 1.7fr .78fr; }
.feature-row--reverse .feature-copy { grid-column: 2; grid-row: 1; }
.feature-row--reverse .secondary-demo { grid-column: 1; grid-row: 1; background: #e9eeeb; }
.demo-disclosure { margin: 27px 0 0; text-align: right; color: #637267; font-size: 11px; }
.getting-started { margin-top: 108px; margin-bottom: 92px; padding-top: 43px; border-top: 1px solid var(--line); }
.eyebrow { margin: 0 0 13px; color: var(--green); font-size: 11px; font-weight: 650; }
.section-intro h2 { margin: 0; font-size: 25px; font-weight: 650; line-height: 1.5; letter-spacing: -.4px; }
.start-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 35px 0 0; padding: 0; list-style: none; }
.start-steps li { display: flex; gap: 14px; align-items: flex-start; }
.start-steps li > span { display: grid; width: 29px; height: 29px; flex-shrink: 0; place-items: center; border: 1px solid #cad9cb; border-radius: 50%; color: var(--green); font-size: 11px; }
.start-steps h3 { margin: 2px 0 8px; font-size: 15px; font-weight: 600; }
.start-steps p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.download-section { padding: 69px 0 49px; border-block: 1px solid #d5e1d3; background: #eaf0e5; }
.download-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; }
.download-heading h2 { margin: 0; font-size: 34px; font-weight: 650; line-height: 1.55; letter-spacing: -.9px; }
.download-heading > p { margin: 0 0 6px; color: #60715f; font-size: 13px; line-height: 1.9; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 35px; }
.download-card { padding: 30px; border: 1px solid #d1ddcc; border-radius: 13px; background: #fdfefb; box-shadow: 0 6px 20px #30482c04; }
.download-platform { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.platform-icon { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 10px; background: #edf2e9; color: #376348; }
.platform-icon svg { width: 25px; height: 25px; fill: currentColor; }
.platform-icon svg[fill="none"] { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.download-platform h3 { margin: 0 0 5px; font-size: 20px; font-weight: 650; }
.download-platform p { margin: 0; color: var(--muted); font-size: 12px; }
.download-button { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 17px; border: 1px solid #1f705b; border-radius: 7px; background: var(--green); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background 160ms ease; }
.download-button:hover { background: #195c4a; }
.download-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.download-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; color: #657260; font-size: 11px; line-height: 1.6; }
.platform-note { margin: 19px 0 0; padding-top: 17px; border-top: 1px solid #e4e9df; color: #6f7a6b; font-size: 11px; line-height: 1.9; }
.download-afterword { margin: 24px 0 0; color: #6b7a66; font-size: 12px; line-height: 1.9; }
.download-support { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 8px; color: #566551; font-size: 14px; line-height: 1.7; }
.download-support > a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 4px; color: #35562c; text-decoration: underline; text-underline-offset: 3px; }
.download-support > a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.download-support-note { font-size: 12px; }
.download-support .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.faq { display: grid; grid-template-columns: .9fr 1.45fr; gap: 80px; padding-block: 83px 85px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 21px 32px 21px 0; list-style: none; color: #344d40; font-size: 14px; font-weight: 550; line-height: 1.6; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 19px; right: 3px; color: #567563; content: "+"; font-size: 19px; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: -2px 0 22px; padding-right: 22px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.product-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 85px; border-top: 1px solid var(--line); color: #647363; font-size: 11px; }
.product-footer a { padding-block: 15px; color: #45654e; text-decoration: none; }
.product-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.image-dialog { width: min(1500px, calc(100% - 36px)); max-width: none; max-height: calc(100dvh - 36px); padding: 0; overflow: auto; border: 1px solid #ccd8cf; border-radius: 12px; background: #f9fbf7; color: var(--ink); box-shadow: 0 30px 100px #071a1766; }
.image-dialog::backdrop { background: #15251ed9; backdrop-filter: blur(4px); }
.image-dialog__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 18px; color: var(--muted); font-size: 12px; }
.image-dialog__close { display: flex; gap: 13px; align-items: center; min-height: 35px; padding: 5px 10px; border: 0; border-radius: 5px; background: #e9eee6; color: #3b5141; font-size: 12px; }
.image-dialog__close span { font-size: 21px; font-weight: 300; }
.image-dialog__image { display: block; width: 100%; max-height: calc(100dvh - 160px); object-fit: contain; background: #e9eee7; }
.image-dialog__footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 18px; }
.image-dialog__footer p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.image-dialog__original { flex-shrink: 0; padding-block: 8px; color: var(--green); font-size: 12px; text-underline-offset: 3px; }
.modal-open { overflow: hidden; }

@media (max-width: 850px) {
  .product-page .container { width: calc(100% - 44px); }
  .product-identity { margin-top: 40px; }
  .hero-statement { font-size: 37px; letter-spacing: -1px; }
  .feature-row, .feature-row--reverse { grid-template-columns: 1fr; gap: 23px; margin-top: 66px; }
  .feature-copy { max-width: 520px; }
  .feature-copy h2 br { display: none; }
  .feature-copy h2 { margin-block: 13px; font-size: 27px; }
  .feature-copy .feature-note { padding-top: 0; border: 0; margin-top: 8px; }
  .feature-row--reverse .feature-copy, .feature-row--reverse .secondary-demo { grid-column: auto; grid-row: auto; }
  .feature-row--reverse .feature-copy { order: 0; }
  .feature-row--reverse .secondary-demo { order: 1; }
  .getting-started { margin-top: 70px; margin-bottom: 63px; }
  .start-steps { gap: 19px; }
  .download-heading { align-items: flex-start; flex-direction: column; gap: 17px; }
  .download-heading h2 { font-size: 31px; }
  .download-heading > p br { display: none; }
  .download-card { padding: 24px; }
  .faq { grid-template-columns: 1fr; gap: 28px; padding-block: 62px; }
}

@media (max-width: 540px) {
  .product-page .container { width: calc(100% - 34px); }
  .site-header__inner { min-height: 66px; }
  .wordmark { font-size: 15px; gap: 8px; }
  .product-nav { gap: 13px; font-size: 11px; }
  .product-page .site-header__inner { flex-wrap: wrap; gap: 0 15px; padding-block: 9px; }
  .product-nav { flex-wrap: wrap; }
  .product-nav a[href="#features"] { display: none; }
  .product-nav a span { display: none; }
  .hero { padding-top: 23px; padding-bottom: 30px; }
  .product-identity { gap: 9px; margin-top: 34px; }
  .product-icon { width: 35px; height: 35px; border-radius: 9px; }
  .product-icon svg { width: 23px; height: 23px; }
  .product-identity h1 { font-size: 21px; }
  .version-label { margin-left: 1px; padding-left: 10px; font-size: 10px; }
  .hero-statement { margin-top: 23px; font-size: 31px; line-height: 1.55; letter-spacing: -1px; }
  .hero-description { font-size: 14px; line-height: 1.9; }
  .desktop-break { display: none; }
  .product-pills { gap: 7px; margin-top: 19px; }
  .product-pills li { padding: 5px 10px; font-size: 11px; }
  .intro-link { margin-top: 19px; font-size: 12px; }
  .demo-frame { border-radius: 12px; }
  .demo-frame--hero { padding: 9px; }
  .screenshot-link { border-radius: 6px; }
  .zoom-label { right: 7px; bottom: 7px; gap: 4px; padding: 5px 7px; border-radius: 5px; font-size: 10px; }
  .zoom-label svg { width: 12px; height: 12px; }
  .demo-caption { gap: 11px; padding-top: 21px; }
  .demo-caption h2 { font-size: 17px; }
  .demo-caption p { font-size: 12px; }
  .caption-type { display: none; }
  .feature-row { margin-top: 48px; gap: 19px; }
  .feature-copy { padding-left: 0; }
  .feature-copy h2 { font-size: 25px; }
  .feature-copy p { font-size: 13px; }
  .secondary-demo { padding: 9px; border-radius: 11px; }
  .demo-disclosure { margin-top: 18px; text-align: left; font-size: 10px; }
  .getting-started { margin-top: 48px; margin-bottom: 43px; padding-top: 30px; }
  .section-intro h2 { font-size: 22px; }
  .start-steps { grid-template-columns: 1fr; gap: 24px; margin-top: 27px; }
  .start-steps h3 { margin-bottom: 5px; }
  .download-section { padding-block: 43px 35px; }
  .download-heading h2 { font-size: 28px; }
  .download-heading > p { font-size: 12px; }
  .download-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
  .download-card { padding: 23px; }
  .download-platform { margin-bottom: 21px; }
  .download-afterword { margin-top: 19px; font-size: 11px; }
  .faq { gap: 24px; padding-block: 43px; }
  .faq-list summary { padding-block: 18px; font-size: 13px; }
  .faq-list details p { font-size: 12px; }
  .product-footer { min-height: 74px; font-size: 10px; flex-wrap: wrap; column-gap: 16px; row-gap: 0; padding-block: 12px; }
  .footer-links { gap: 15px; }
  .image-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 24px); border-radius: 8px; }
  .image-dialog__bar { padding: 9px 11px; }
  .image-dialog__footer { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}