/* Source app product pages */
.source-app-body { background: #fbfaf7; color: #172722; }
.source-app-shell, .source-app-header, .source-app-footer { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.source-app-header, .source-app-footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 72px; }
.source-app-brand { color: #172722; font-weight: 820; text-decoration: none; }
.source-app-header nav, .source-app-footer nav { display: flex; flex-wrap: wrap; justify-content: end; gap: 4px; }
.source-app-header nav a, .source-app-footer a { padding: 8px 9px; color: #5f7069; font-size: .88rem; font-weight: 720; text-decoration: none; }
.source-app-header nav a:hover, .source-app-header nav a[aria-current="page"], .source-app-footer a:hover { color: #172722; background: #f0f2ed; }
.source-app-header .source-app-language { border: 1px solid #dce1d9; color: #285f4c; }
.source-app-hero { display: grid; grid-template-columns: minmax(0, .98fr) minmax(300px, .75fr); gap: clamp(30px, 7vw, 96px); align-items: center; min-height: 500px; padding: 48px 0 62px; }
.source-app-copy { max-width: 630px; }
.source-app-lockup { display: inline-flex; align-items: center; gap: 10px; color: #25332e; font-size: 1rem; font-weight: 820; }
.source-app-lockup-icon, .source-app-icon { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; }
.source-app-eyebrow { margin: 24px 0 11px; color: var(--app-accent); font-size: .76rem; font-weight: 830; letter-spacing: 0; text-transform: uppercase; }
.source-app-hero h1, .source-app-features h2, .source-app-policy h2, .source-app-document h1 { margin: 0; color: #172722; font-size: clamp(2rem, 4vw, 3.55rem); font-weight: 690; line-height: 1.08; }
.source-app-lead { max-width: 60ch; margin: 19px 0 0; color: #64736d; font-size: 1.04rem; line-height: 1.68; }
.source-app-status { margin: 16px 0 0; color: #5b6964; font-size: .91rem; line-height: 1.55; }
.source-app-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 27px; }
.source-app-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 9px 15px; border: 1px solid var(--app-accent); border-radius: 6px; background: var(--app-accent); color: white; font-size: .9rem; font-weight: 780; text-decoration: none; }
.source-app-button:hover { filter: brightness(.94); }
.source-app-button-secondary { border-color: #d7ddd6; background: white; color: #1c2b26; }
.source-app-art { display: grid; place-items: center; min-width: 0; }
.source-app-hero-image { display: block; width: 100%; max-width: 500px; max-height: 420px; object-fit: contain; border: 1px solid #e1e6de; background: white; }
.source-app-icon-only { display: grid; place-items: center; width: min(100%, 285px); min-height: 260px; border: 1px solid #e1e6de; background: white; }
.source-app-icon-only .source-app-icon { width: 120px; height: 120px; border-radius: 25px; }
.source-app-section { padding: 62px 0; border-top: 1px solid #dfe4dc; }
.source-app-features { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: clamp(28px, 7vw, 100px); }
.source-app-features h2, .source-app-policy h2 { font-size: clamp(1.65rem, 3vw, 2.45rem); }
.source-app-features ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.source-app-features li { padding: 15px 0 15px 21px; border-top: 1px solid #dfe4dc; color: #53635c; line-height: 1.65; position: relative; }
.source-app-features li::before { position: absolute; left: 0; color: var(--app-accent); content: "•"; font-size: 1.25rem; line-height: 1.1; }
.source-app-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.source-app-gallery figure { display: grid; place-items: center; min-height: 260px; margin: 0; padding: 16px; border: 1px solid #e1e6de; background: white; }
.source-app-screen { display: block; max-width: 100%; max-height: 440px; object-fit: contain; }
.source-app-gallery figcaption { margin-top: 10px; color: #6d7b75; font-size: .76rem; }
.source-app-policy { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.source-app-policy > div { max-width: 650px; }
.source-app-policy p:last-child { color: #64736d; line-height: 1.65; }
.source-app-footer { min-height: 100px; border-top: 1px solid #dfe4dc; color: #66756f; font-size: .9rem; }
.source-app-document-shell { padding: 40px 0 78px; }
.source-app-document { max-width: 840px; margin: 0 auto; }
.source-app-document header { padding-bottom: 31px; border-bottom: 1px solid #dfe4dc; }
.source-app-document header .source-app-eyebrow { margin-top: 28px; }
.source-app-document h1 { font-size: clamp(2rem, 3.6vw, 3rem); }
.source-app-document header > p:last-child { max-width: 66ch; margin: 16px 0 0; color: #64736d; line-height: 1.65; }
.source-app-document-content { max-width: 75ch; padding-top: 28px; color: #33443c; line-height: 1.75; }
.source-app-document-content h2, .source-app-document-content h3, .source-app-document-content h4 { margin: 36px 0 10px; color: #172722; line-height: 1.2; }
.source-app-document-content h2 { font-size: 1.75rem; }
.source-app-document-content h3 { font-size: 1.25rem; }
.source-app-document-content p, .source-app-document-content ul { margin: 14px 0; }
.source-app-document-content li { margin: 7px 0; }
.source-app-document-content a, .source-app-mail { color: var(--app-accent); font-weight: 740; }
.source-app-document-content code { padding: 1px 4px; background: #f0f2ed; color: #24342d; }
.source-app-table-line { overflow-wrap: anywhere; color: #61716a; font-size: .92rem; }
.source-app-rich .source-app-hero h1 { font-size: clamp(2rem, 3.8vw, 3.2rem); max-width: 15ch; }
.rich-hero { min-height: 0; padding-bottom: 72px; }
.rich-hero-art, .rich-story-figure { margin: 0; }
.rich-hero-art { display: grid; place-items: center; min-width: 0; }
.rich-hero-screen { display: block; width: 100%; max-width: 410px; max-height: 650px; object-fit: contain; border: 1px solid #e0e5dd; background: #fff; }
.rich-hero-art figcaption, .rich-story-figure figcaption { max-width: 44ch; margin: 10px auto 0; color: #687771; font-size: .78rem; line-height: 1.5; text-align: center; }
.rich-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 0 62px; }
.rich-card { min-width: 0; padding: 21px 18px; border: 1px solid #dee4dc; border-top: 3px solid var(--app-accent); background: #fff; }
.rich-card p { margin: 0 0 8px; color: var(--app-accent); font-size: .72rem; font-weight: 820; text-transform: uppercase; }
.rich-card h2 { margin: 0; color: #1a2c25; font-size: 1.05rem; line-height: 1.3; }
.rich-card div { display: grid; gap: 6px; margin-top: 14px; color: #60716a; font-size: .86rem; line-height: 1.45; }
.rich-card span { display: block; }
.rich-stories { border-top: 1px solid #dfe4dc; }
.rich-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .84fr); align-items: center; gap: clamp(28px, 7vw, 108px); padding: 72px 0; border-bottom: 1px solid #dfe4dc; }
.rich-story-reverse .rich-story-copy { order: 2; }
.rich-story-reverse .rich-story-figure { order: 1; }
.rich-story-copy { max-width: 620px; }
.rich-story-copy .source-app-eyebrow { margin: 0 0 10px; }
.rich-story-copy h2, .rich-pricing h2, .rich-faq h2 { margin: 0; color: #172722; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.14; }
.rich-story-copy > p:not(.source-app-eyebrow):not(.rich-story-badge), .rich-pricing > div > p:last-child, .rich-privacy p { color: #5f6f68; line-height: 1.7; }
.rich-story-badge { display: inline-block; margin: 14px 0 1px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--app-accent) 25%, #fff); color: var(--app-accent); font-size: .75rem; font-weight: 790; }
.rich-story-copy ul, .rich-plan ul { display: grid; gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }
.rich-story-copy li, .rich-plan li { position: relative; padding-left: 18px; color: #55665e; line-height: 1.55; }
.rich-story-copy li::before, .rich-plan li::before { position: absolute; left: 0; color: var(--app-accent); content: "•"; }
.rich-story-figure { display: grid; justify-items: center; min-width: 0; padding: 18px; border: 1px solid #e0e5dd; background: #fff; }
.rich-screen { display: block; width: 100%; max-width: 380px; max-height: 620px; object-fit: contain; }
.rich-pricing { padding: 72px 0; border-bottom: 1px solid #dfe4dc; }
.rich-pricing > div:first-child { max-width: 680px; }
.rich-pricing > div:first-child .source-app-eyebrow { margin: 0 0 10px; }
.rich-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.rich-plan { min-width: 0; padding: 24px; border: 1px solid #d8dfd7; background: #fff; }
.rich-plan:last-child { border-top: 3px solid var(--app-accent); }
.rich-plan-name { margin: 0; color: var(--app-accent); font-size: .78rem; font-weight: 830; text-transform: uppercase; }
.rich-plan h3 { margin: 9px 0 0; color: #172722; font-size: 1.28rem; line-height: 1.3; }
.rich-pricing-note { margin: 16px 0 0; color: #62726b; font-size: .88rem; line-height: 1.6; }
.rich-faq { padding: 72px 0; border-bottom: 1px solid #dfe4dc; }
.rich-faq .source-app-eyebrow { margin: 0 0 10px; }
.rich-faq details { margin-top: 13px; padding: 16px 0; border-top: 1px solid #dfe4dc; }
.rich-faq details:first-of-type { margin-top: 26px; }
.rich-faq summary { cursor: pointer; color: #1b2d26; font-weight: 760; line-height: 1.45; }
.rich-faq details p { max-width: 76ch; margin: 11px 0 0; color: #5f7069; line-height: 1.65; }
.rich-privacy { margin-bottom: 16px; }
@media (max-width: 840px) { .source-app-hero, .source-app-features { grid-template-columns: 1fr; } .source-app-hero { min-height: 0; } .source-app-art { justify-items: start; } .source-app-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 840px) { .rich-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rich-story { grid-template-columns: 1fr; } .rich-story-reverse .rich-story-copy, .rich-story-reverse .rich-story-figure { order: initial; } .rich-story-figure { justify-self: stretch; } }
@media (max-width: 620px) { .source-app-shell, .source-app-header, .source-app-footer { width: min(calc(100% - 28px), 1120px); } .source-app-header, .source-app-footer, .source-app-policy { align-items: flex-start; flex-direction: column; padding-block: 16px; } .source-app-header nav { justify-content: flex-start; width: 100%; overflow: visible; flex-wrap: wrap; } .source-app-hero { padding-top: 35px; } .source-app-gallery { grid-template-columns: 1fr; } .source-app-gallery figure { min-height: 0; } .source-app-hero h1 { font-size: 2.25rem; } .rich-card-grid, .rich-plan-grid { grid-template-columns: 1fr; } .rich-story, .rich-pricing, .rich-faq { padding: 48px 0; } .rich-hero-screen { max-height: 560px; } .rich-screen { max-height: 540px; } }