.hero { padding-top: var(--space-5); }
/* Product and Technical share the Landing width scale, with room for their denser content. */
@media (min-width: 1200px) {
  .container { width: min(calc(100% - 2.5rem), max(1200px, var(--landing-content-max))); }
}
.hero > .display-heading, .hero__description { max-width: 1100px; }
.hero__description { margin: 0; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.product-video-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 525px); align-items: end; gap: var(--space-6); margin-block: var(--space-5); }
.product-stats { min-width: 0; min-height: 354px; padding: 1.15rem 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--gradient-panel); box-shadow: var(--shadow-card); }
.product-stats__heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 35px; }
.product-stats__heading h2 { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--color-foreground); font-size: clamp(.95rem, 1.25vw, 1.2rem); line-height: 1.2; }
.product-stats__heading h2 .icon { flex: none; color: var(--color-primary); }
.product-stats__period { flex: none; padding: .4rem .65rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--surface-translucent); color: var(--color-muted); font-size: .7rem; white-space: nowrap; }
.product-stats__body { display: grid; grid-template-columns: minmax(190px, .85fr) minmax(0, 1.7fr); align-items: center; gap: 1rem; margin-top: .7rem; }
.product-stats__feature { display: grid; justify-items: center; align-content: center; min-width: 0; color: var(--color-primary-strong); text-align: center; }
.product-stats__ring { position: relative; width: min(100%, 226px); aspect-ratio: 1; }
.product-stats__ring-art { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.product-stats__ring-base, .product-stats__ring-accent { fill: none; stroke-width: 15; }
.product-stats__ring-base { stroke: var(--color-lavender-soft); }
.product-stats__ring-accent { stroke: var(--color-focus); stroke-linecap: round; stroke-dasharray: 610 654; filter: drop-shadow(0 0 .35rem var(--color-border-hover)); }
.product-stats__ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; }
.product-stats__ring-center .icon { width: 1.65rem; height: 1.65rem; color: var(--color-primary); }
.product-stats__ring-center strong { font-family: var(--font-display); font-size: clamp(2.75rem, 4vw, 4rem); line-height: 1.05; }
.product-stats__feature-label { max-width: 11rem; margin-top: -.15rem; font-size: .8rem; font-weight: var(--weight-strong); line-height: 1.25; }
.product-stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.product-stats__metric { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .28rem; min-width: 0; min-height: 104px; padding: .75rem .65rem; border: 1px solid var(--color-border-hover); border-radius: var(--radius-control); background: linear-gradient(145deg, var(--color-lavender-soft), var(--color-surface-soft)); box-shadow: var(--shadow-card); }
.product-stats__metric .icon { box-sizing: border-box; width: 2rem; height: 2rem; padding: .3rem; border: 1px solid var(--color-border-hover); border-radius: 50%; background: var(--color-lavender-soft); color: var(--color-primary-strong); stroke-width: 2.1; }
.product-stats__metric strong { color: var(--color-foreground); font-size: clamp(1.05rem, 1.45vw, 1.45rem); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-stats__metric span { color: var(--color-muted); font-size: .7rem; line-height: 1.15; overflow-wrap: anywhere; }
.product-stats__note { margin: .55rem 0 0; color: var(--color-muted); font-size: .7rem; line-height: 1.25; }
.product-stats__fallback { margin: 1rem 0 0; color: var(--color-foreground); line-height: 1.6; }
.product-stats--animate .product-stats__ring-accent { stroke-dasharray: 0 654; transition: stroke-dasharray 700ms ease-out; }
.product-stats--visible .product-stats__ring-accent { stroke-dasharray: 610 654; }
.product-stats--animate .product-stats__metric { opacity: 0; transform: translateY(8px); transition: opacity 420ms ease-out, transform 420ms ease-out; }
.product-stats--visible .product-stats__metric { opacity: 1; transform: none; }
.product-stats--visible .product-stats__metric:nth-child(2), .product-stats--visible .product-stats__metric:nth-child(5) { transition-delay: 70ms; }
.product-stats--visible .product-stats__metric:nth-child(3), .product-stats--visible .product-stats__metric:nth-child(6) { transition-delay: 140ms; }
.product-video { width: min(100%, 525px); justify-self: end; aspect-ratio: auto; padding-bottom: var(--landing-video-controls-space); }
.product-video::before { background-image: var(--video-presenter-backdrop, url('../../assets/media/presentations/ogma-badjo-poster-v2.png')); }
.product-video .video-presenter__video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.product-video__start { top: auto; bottom: .45rem; min-height: 44px; padding: .55rem .75rem; font-size: .75rem; transform: translateX(-50%); }
.product-video__start:hover { transform: translate(-50%, -2px); }
.product-video__start:active { transform: translateX(-50%); }
.product-video .video-presenter__video::-webkit-media-controls-fullscreen-button { display: none !important; }
.product-video__captions { top: auto; right: .45rem; bottom: .45rem; left: auto; min-height: 44px; }
.product-video__caption-menu { position: absolute; z-index: 3; right: .45rem; bottom: calc(var(--landing-video-controls-space) + .4rem); display: grid; gap: .2rem; min-width: 150px; padding: .35rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); box-shadow: var(--shadow-hover); }
.product-video__caption-menu[hidden] { display: none; }
.product-video__caption-menu button { min-height: 40px; padding: .35rem .6rem; border: 0; border-radius: .5rem; background: transparent; color: var(--color-foreground); text-align: left; font-size: var(--text-label); }
.product-video__caption-menu button:hover, .product-video__caption-menu button[aria-current="true"] { background: var(--color-lavender-soft); color: var(--color-primary-strong); }
.site-header { position: relative; padding-bottom: var(--space-7); }
.site-header::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 45%; background: var(--gradient-header); pointer-events: none; }
.site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.product-home { white-space: nowrap; }
.site-nav__item:nth-child(-n+2) { width: 204px; flex: none; }
.site-nav__item[data-product-tab="ogma"].site-nav__item--active { color: var(--color-primary-strong); background: var(--color-lavender-soft); border-color: var(--color-border-hover); }
.site-nav__item small { display: inline-block; margin-left: .15rem; padding: .18rem .4rem; border-radius: 999px; background: var(--color-lavender-soft); font-size: .68rem; }
.modules-section { padding-top: var(--space-5); }
.modules-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.module-card { min-height: 128px; display: flex; align-items: flex-start; gap: .7rem; padding: 1rem .8rem; text-align: left; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--surface-translucent-soft); color: var(--color-foreground); box-shadow: var(--shadow-card); transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast); }
.module-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.module-card:active { transform: translateY(0); }
.module-card[aria-pressed="true"] { border: 2px solid var(--color-badjo); background: var(--color-success-soft); box-shadow: var(--shadow-selected); }
.module-card:disabled { cursor: not-allowed; opacity: .72; }
.module-card:disabled:hover { transform: none; box-shadow: var(--shadow-card); }
.module-card__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 14px; background: var(--color-lavender-soft); color: var(--color-primary); }
.module-card[aria-pressed="true"] .module-card__icon { color: var(--color-badjo); background: white; }
.module-card:nth-child(4) .module-card__icon { background: var(--color-blue-soft); color: var(--color-icon-blue); }
.module-card:nth-child(6) .module-card__icon { background: var(--color-amber-soft); color: var(--color-icon-amber); }
.module-card__copy { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.module-card__title { font-size: var(--text-card); font-weight: var(--weight-strong); line-height: 1.2; overflow-wrap: anywhere; }
.module-card__description, .module-card__status { color: var(--color-muted); font-size: var(--text-caption); line-height: 1.35; }
.module-card__status { color: var(--color-primary-strong); font-weight: var(--weight-strong); }
.showcase-section { padding-block: var(--space-6); }
.showcase-visual { min-width: 0; padding: clamp(1rem, 2vw, 1.5rem); border-radius: var(--radius-panel); }
.showcase-visual__scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); box-shadow: var(--shadow-demo); overscroll-behavior-inline: contain; }
.showcase-visual__scroll:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.showcase-visual__scroll img { display: block; width: 100%; height: auto; transform: translateZ(0); }
.purchases-visual { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 250px; border: 1px solid var(--color-border-hover); background: var(--gradient-panel); }
.purchases-visual > div { max-width: 40rem; }
.showcase-visual.purchases-visual h3 { margin: .35rem 0 var(--space-3); font-family: var(--font-display); font-size: clamp(1.5rem, 2vw, 2rem); }
.purchases-visual p:last-child { margin: 0; color: var(--color-muted); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; }
.purchases-visual__mark { display: grid; place-items: center; width: clamp(5rem, 14vw, 10rem); aspect-ratio: 1; flex: none; border: 1px solid var(--color-border-hover); border-radius: var(--radius-panel); background: var(--color-lavender-soft); color: var(--color-primary); }
.purchases-visual__mark .icon { width: 48%; height: 48%; stroke-width: 1.4; }
.sales-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-5); }
.sales-intro { min-width: 0; }
.sales-intro .section-heading { margin-bottom: var(--space-4); }
.sales-intro .lede { margin: 0; }
.sales-visual { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 250px; border: 1px solid var(--color-border-hover); background: var(--gradient-panel); }
.sales-visual > div { max-width: 40rem; }
.showcase-visual.sales-visual h3 { margin: .35rem 0 var(--space-3); font-family: var(--font-display); font-size: clamp(1.5rem, 2vw, 2rem); }
.sales-visual p:last-child { margin: 0; color: var(--color-muted); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; }
.sales-visual__mark { display: grid; place-items: center; width: clamp(5rem, 14vw, 10rem); aspect-ratio: 1; flex: none; border: 1px solid var(--color-border-hover); border-radius: var(--radius-panel); background: var(--color-lavender-soft); color: var(--color-primary); }
.sales-visual__mark .icon { width: 48%; height: 48%; stroke-width: 1.4; }
.analytics-intro { margin-bottom: var(--space-5); }
.analytics-intro .section-heading { margin-bottom: var(--space-4); }
.analytics-intro .lede { max-width: 74rem; margin: 0; }
.analytics-scope { width: fit-content; margin: var(--space-4) 0 0; padding: .4rem .7rem; border: 1px solid var(--color-border-hover); border-radius: 999px; background: var(--color-lavender-soft); color: var(--color-primary-strong); font-size: var(--text-caption); font-weight: var(--weight-strong); }
.analytics-visual { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 250px; border: 1px solid var(--color-border-hover); background: var(--gradient-panel); }
.analytics-visual > div { max-width: 40rem; }
.showcase-visual.analytics-visual h3 { margin: .35rem 0 var(--space-3); font-family: var(--font-display); font-size: clamp(1.5rem, 2vw, 2rem); }
.analytics-visual p:last-child { margin: 0; color: var(--color-muted); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; }
.analytics-visual__mark { display: grid; place-items: center; width: clamp(5rem, 14vw, 10rem); aspect-ratio: 1; flex: none; border: 1px solid var(--color-border-hover); border-radius: var(--radius-panel); background: var(--color-lavender-soft); color: var(--color-primary); }
.analytics-visual__mark .icon { width: 48%; height: 48%; stroke-width: 1.4; }
.inventory-intro { margin-bottom: var(--space-5); }
.inventory-intro .section-heading { margin-bottom: var(--space-4); }
.inventory-intro .lede { max-width: 74rem; margin: 0; }
.inventory-visual { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 250px; border: 1px solid var(--color-border-hover); background: var(--gradient-panel); }
.inventory-visual > div { max-width: 40rem; }
.showcase-visual.inventory-visual h3 { margin: .35rem 0 var(--space-3); font-family: var(--font-display); font-size: clamp(1.5rem, 2vw, 2rem); }
.inventory-visual p:last-child { margin: 0; color: var(--color-muted); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; }
.inventory-visual__mark { display: grid; place-items: center; width: clamp(5rem, 14vw, 10rem); aspect-ratio: 1; flex: none; border: 1px solid var(--color-border-hover); border-radius: var(--radius-panel); background: var(--color-lavender-soft); color: var(--color-primary); }
.inventory-visual__mark .icon { width: 48%; height: 48%; stroke-width: 1.4; }
.finance-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-5); }
.finance-intro { min-width: 0; }
.finance-intro .section-heading { margin-bottom: var(--space-4); }
.finance-intro .lede { margin: 0; }
.finance-visual { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 250px; border: 1px solid var(--color-border-hover); background: var(--gradient-panel); }
.finance-visual > div { max-width: 40rem; }
.showcase-visual.finance-visual h3 { margin: .35rem 0 var(--space-3); font-family: var(--font-display); font-size: clamp(1.5rem, 2vw, 2rem); }
.finance-visual p:last-child { margin: 0; color: var(--color-muted); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; }
.finance-visual__mark { display: grid; place-items: center; width: clamp(5rem, 14vw, 10rem); aspect-ratio: 1; flex: none; border: 1px solid var(--color-border-hover); border-radius: var(--radius-panel); background: var(--color-lavender-soft); color: var(--color-primary); }
.finance-visual__mark .icon { width: 48%; height: 48%; stroke-width: 1.4; }
.demo-content__heading { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: var(--space-4); }
.showcase-visual h3 { margin: .2rem 0 0; font-size: 1.3rem; }
.demo-badge { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .5rem; border-radius: 999px; color: var(--color-badjo); background: var(--color-success-soft); font-size: .68rem; font-weight: var(--weight-strong); white-space: nowrap; }
.showcase-copy { margin-top: var(--space-5); padding: clamp(1rem, 2vw, 1.5rem); border-radius: var(--radius-panel); }
.showcase-copy > .lede { margin: 0 0 var(--space-5); }
.benefits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.benefit-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; min-width: 0; min-height: 220px; overflow: hidden; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-soft); box-shadow: var(--shadow-card); transition: transform var(--motion-normal), box-shadow var(--motion-normal), border-color var(--motion-normal); }
.benefit-card:hover { transform: translateY(-3px); border-color: var(--color-border-hover); box-shadow: var(--shadow-hover); }
.benefit-card:nth-child(1) { background: var(--color-success-soft); }
.benefit-card:nth-child(2) { background: var(--color-lavender-soft); }
.benefit-card:nth-child(3) { background: var(--color-blue-soft); }
.benefit-card:nth-child(4) { background: var(--color-amber-soft); }
.benefit-card:nth-child(5) { background: var(--color-lavender-soft); }
.benefit-card:nth-child(6) { background: var(--color-success-soft); }
.benefit-card__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--surface-translucent); color: var(--color-primary); }
.benefit-card__icon .icon { width: 1.55rem; height: 1.55rem; }
.benefit-card h3 { position: relative; z-index: 1; max-width: 78%; margin: 0; font-size: clamp(1.08rem, 1.35vw, 1.35rem); line-height: 1.18; }
.benefit-card p { position: relative; z-index: 1; max-width: 76%; margin: 0; color: var(--color-muted); font-size: .9rem; line-height: 1.45; }
.benefit-card__art { position: absolute; right: .9rem; bottom: .9rem; display: grid; place-items: center; width: 6.5rem; height: 6.5rem; border: 1px solid var(--color-border-hover); border-radius: var(--radius-card); background: var(--surface-translucent); color: var(--color-primary); opacity: .62; transform: rotate(-7deg); }
.benefit-card__art .icon { width: 4rem; height: 4rem; stroke-width: 1.3; }
.purchases-benefit-card { min-height: 350px; }
.purchases-benefit-card h3, .purchases-benefit-card p { max-width: 100%; }
.sales-benefit-card { min-height: 350px; }
.sales-benefit-card h3, .sales-benefit-card p { max-width: 100%; }
.analytics-benefit-card { min-height: 350px; }
.analytics-benefit-card h3, .analytics-benefit-card p { max-width: 100%; }
.inventory-benefit-card { min-height: 350px; }
.inventory-benefit-card h3, .inventory-benefit-card p { max-width: 100%; }
.finance-benefit-card { min-height: 350px; }
.finance-benefit-card h3, .finance-benefit-card p { max-width: 100%; }
.product-flow { margin-top: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-border-hover); border-radius: var(--radius-card); background: var(--color-lavender-soft); }
.product-flow h3 { margin: 0 0 var(--space-5); font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.2; }
.product-flow__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.product-flow__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem; min-width: 0; color: var(--color-foreground); text-align: center; font-size: .88rem; font-weight: var(--weight-strong); line-height: 1.3; }
.product-flow__step:not(:last-child)::after { position: absolute; top: 1.1rem; right: -1.1rem; content: '→'; color: var(--color-primary); font-size: 1.45rem; font-weight: var(--weight-body); }
.product-flow__icon { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border: 1px solid var(--color-border-hover); border-radius: var(--radius-control); background: var(--surface-translucent); color: var(--color-primary); box-shadow: var(--shadow-card); }
.product-flow__icon .icon { width: 1.8rem; height: 1.8rem; }
.development-roadmap { margin-top: var(--space-5); padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--color-border-hover); border-radius: var(--radius-panel); background: var(--gradient-panel); }
.development-roadmap__status, .development-roadmap__planned { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--color-border-hover); border-radius: 999px; background: var(--color-lavender-soft); color: var(--color-primary-strong); font-size: var(--text-caption); font-weight: var(--weight-strong); letter-spacing: .04em; }
.development-roadmap__status { margin: 0 0 var(--space-3); padding: .4rem .7rem; }
.development-roadmap h3 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: clamp(1.65rem, 2.4vw, 2.5rem); line-height: 1.12; }
.development-roadmap__intro { max-width: 74rem; margin: 0 0 var(--space-5); color: var(--color-muted); font-size: clamp(.95rem, 1.15vw, 1.1rem); line-height: 1.5; }
.development-roadmap__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.development-roadmap__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; min-width: 0; min-height: 310px; overflow: hidden; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform var(--motion-normal), border-color var(--motion-normal), box-shadow var(--motion-normal); }
.development-roadmap__card:nth-child(1) { background: var(--color-lavender-soft); }
.development-roadmap__card:nth-child(2) { background: var(--color-blue-soft); }
.development-roadmap__card:nth-child(3) { background: var(--color-success-soft); }
.development-roadmap__card:hover { transform: translateY(-3px); border-color: var(--color-border-hover); box-shadow: var(--shadow-hover); }
.development-roadmap__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--color-border-hover); border-radius: var(--radius-control); background: var(--surface-translucent); color: var(--color-primary); }
.development-roadmap__icon .icon { width: 1.6rem; height: 1.6rem; }
.development-roadmap__card h4, .development-roadmap__card p { position: relative; z-index: 1; max-width: 66%; margin: 0; }
.development-roadmap__card h4 { color: var(--color-foreground); font-size: clamp(1.08rem, 1.35vw, 1.35rem); line-height: 1.2; }
.development-roadmap__card p { color: var(--color-muted); font-size: .9rem; line-height: 1.45; }
.development-roadmap__art { position: absolute; right: .65rem; bottom: 1.4rem; width: 29%; max-width: 124px; color: var(--color-primary); opacity: .52; pointer-events: none; }
.development-roadmap__art svg { display: block; width: 100%; height: auto; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.development-roadmap__planned { position: relative; z-index: 1; margin-top: auto; padding: .3rem .6rem; background: var(--surface-translucent); letter-spacing: 0; }
.development-roadmap--purchases .development-roadmap__card h4, .development-roadmap--purchases .development-roadmap__card p { max-width: 100%; }
.development-roadmap--sales .development-roadmap__card h4, .development-roadmap--sales .development-roadmap__card p { max-width: 100%; }
.development-roadmap--analytics .development-roadmap__card h4, .development-roadmap--analytics .development-roadmap__card p { max-width: 100%; }
.development-roadmap--finance .development-roadmap__card h4, .development-roadmap--finance .development-roadmap__card p { max-width: 100%; }
.inventory-roadmap__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; gap: var(--space-3); border: 1px dashed var(--color-border-hover); border-radius: var(--radius-card); background: var(--color-surface-soft); color: var(--color-muted); text-align: center; }
.inventory-roadmap__placeholder .icon { width: 3rem; height: 3rem; color: var(--color-primary); }
.inventory-roadmap__placeholder p { margin: 0; }
.showcase-copy--animate .benefit-card, .showcase-copy--animate .product-flow { opacity: 0; transform: translateY(12px); transition: opacity 480ms ease-out, transform 480ms ease-out, box-shadow var(--motion-normal), border-color var(--motion-normal); }
.showcase-copy--visible .benefit-card, .showcase-copy--visible .product-flow { opacity: 1; transform: none; }
.showcase-copy--visible .benefit-card:nth-child(2), .showcase-copy--visible .benefit-card:nth-child(5) { transition-delay: 70ms; }
.showcase-copy--visible .benefit-card:nth-child(3), .showcase-copy--visible .benefit-card:nth-child(6) { transition-delay: 140ms; }
.showcase-copy--visible .product-flow { transition-delay: 180ms; }
.showcase-copy--visible .benefit-card:hover { transform: translateY(-3px); }
.hint-line { display: flex; align-items: center; gap: .7rem; margin: var(--space-4) 0 0; padding: .9rem 1rem; border-radius: var(--radius-control); background: var(--color-lavender-soft); color: var(--color-primary-strong); font-size: var(--text-label); font-weight: var(--weight-strong); }
.product-footer { display: flex; justify-content: space-between; gap: 1rem; padding-block: var(--space-6); border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: var(--text-label); }
.product-footer a { color: var(--color-primary-strong); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1200px) { .modules-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1201px) and (max-width: 1600px) { .modules-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .development-roadmap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .product-video-layout { grid-template-columns: minmax(0, 1fr); } .product-video { justify-self: center; } .product-stats__body { grid-template-columns: minmax(200px, .6fr) minmax(0, 1.5fr); } }
@media (max-width: 900px) { .product-flow__steps { grid-template-columns: 1fr; gap: var(--space-4); } .product-flow__step { flex-direction: row; text-align: left; } .product-flow__step:not(:last-child)::after { top: auto; right: auto; bottom: -.95rem; left: 1.35rem; content: '↓'; font-size: 1rem; } }
@media (max-width: 768px) { .site-header__top { flex-wrap: wrap; } .site-header__actions { width: 100%; justify-content: space-between; } .modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .showcase-section { padding-top: var(--space-5); } .showcase-visual__scroll img { width: 1200px; max-width: none; } }
@media (max-width: 650px) { .benefits-grid { grid-template-columns: 1fr; } .benefit-card { min-height: 206px; } .benefit-card h3, .benefit-card p { max-width: 100%; } .benefit-card__art { right: .5rem; bottom: .5rem; width: 4rem; height: 4rem; opacity: .14; pointer-events: none; } .benefit-card__art .icon { width: 2.5rem; height: 2.5rem; } }
@media (max-width: 900px) { .development-roadmap__card h4, .development-roadmap__card p { max-width: 100%; } .development-roadmap__art { display: none; } }
@media (max-width: 700px) { .development-roadmap__grid { grid-template-columns: 1fr; } .development-roadmap__card { min-height: 245px; } }
@media (max-width: 700px) { .purchases-visual { min-height: 200px; } .purchases-visual__mark { width: 4rem; } .purchases-benefit-card { min-height: 0; } }
@media (max-width: 700px) { .sales-visual { min-height: 200px; } .sales-visual__mark { width: 4rem; } .sales-benefit-card { min-height: 0; } }
@media (max-width: 700px) { .analytics-visual { min-height: 200px; } .analytics-visual__mark { width: 4rem; } .analytics-benefit-card { min-height: 0; } }
@media (max-width: 700px) { .inventory-visual { min-height: 200px; } .inventory-visual__mark { width: 4rem; } .inventory-benefit-card { min-height: 0; } }
@media (max-width: 700px) { .finance-visual { min-height: 200px; } .finance-visual__mark { width: 4rem; } .finance-benefit-card { min-height: 0; } }
@media (max-width: 900px) { .finance-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .sales-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .modules-grid { grid-template-columns: 1fr; } .module-card { min-height: 92px; } .demo-content__heading { flex-wrap: wrap; } .product-footer { flex-direction: column; } }
@media (max-width: 680px) { .product-stats { padding: 1rem; } .product-stats__heading { align-items: flex-start; flex-direction: column; } .product-stats__body { grid-template-columns: 1fr; } .product-stats__ring { width: 190px; } .product-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-stats__metric { min-height: 96px; padding: .6rem .65rem; } .product-stats__metric strong { font-size: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .product-stats--animate .product-stats__metric { opacity: 1; transform: none; transition: none; } .product-stats--animate .product-stats__ring-accent { stroke-dasharray: 610 654; transition: none; } }
@media (prefers-reduced-motion: reduce) { .showcase-copy--animate .benefit-card, .showcase-copy--animate .product-flow { opacity: 1; transform: none; transition: none; } .showcase-copy--visible .benefit-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .development-roadmap__card, .development-roadmap__card:hover { transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) { .purchases-showcase .benefit-card, .purchases-showcase .benefit-card:hover { transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) { .sales-showcase .benefit-card, .sales-showcase .benefit-card:hover { transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) { .analytics-showcase .benefit-card, .analytics-showcase .benefit-card:hover { transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) { .inventory-showcase .benefit-card, .inventory-showcase .benefit-card:hover { transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) { .finance-showcase .benefit-card, .finance-showcase .benefit-card:hover { transform: none; transition: none; } }

/* OGMA is a local Product Presentation section and reuses shared tokens and card patterns. */
.ogma-presentation { padding-block: var(--space-6) var(--space-7); }
.ogma-presentation > * + * { margin-top: var(--space-5); }
.ogma-intro { padding: var(--space-5) 0; }
.ogma-intro .eyebrow { margin-bottom: var(--space-3); }
.ogma-intro .section-heading { margin: 0 0 var(--space-3); color: var(--color-primary-strong); font-size: clamp(2.6rem, 6vw, 5rem); }
.ogma-intro__subtitle { max-width: 50rem; margin: 0 0 var(--space-3); color: var(--color-foreground); font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: var(--weight-strong); line-height: 1.18; }
.ogma-intro .lede { max-width: 58rem; margin: 0; }
.ogma-demo .demo-content__heading { margin-bottom: var(--space-4); }
.ogma-demo .showcase-visual__scroll img { width: 100%; }
.ogma-capabilities, .ogma-tools { padding: clamp(1rem, 2.5vw, 2rem); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.ogma-capabilities > .section-heading, .ogma-tools > .section-heading { margin: 0 0 var(--space-3); }
.ogma-capabilities > .lede { max-width: 75rem; margin: 0 0 var(--space-6); }
.ogma-group + .ogma-group { margin-top: var(--space-6); }
.ogma-group h3 { margin: 0 0 var(--space-3); color: var(--color-primary-strong); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.ogma-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ogma-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-lavender-soft); box-shadow: var(--shadow-card); }
.ogma-card:nth-child(3n+2) { background: var(--color-blue-soft); }
.ogma-card:nth-child(3n) { background: var(--color-success-soft); }
.ogma-card__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: var(--space-3); border: 1px solid var(--color-border-hover); border-radius: var(--radius-control); background: var(--surface-translucent); color: var(--color-primary); }
.ogma-card__icon .icon { width: 1.5rem; height: 1.5rem; }
.ogma-card h4, .ogma-card h3 { margin: 0 0 var(--space-2); color: var(--color-foreground); font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.2; }
.ogma-card p { margin: 0; color: var(--color-muted); font-size: .92rem; line-height: 1.45; }
.ogma-tools__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ogma-tool-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: var(--space-3); align-content: center; }
.ogma-tool-card .ogma-card__icon { grid-row: span 2; margin: 0; }
.ogma-flow { margin-top: var(--space-5); }
.ogma-flow__steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ogma-flow__steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); min-width: 0; text-align: center; font-size: .83rem; font-weight: var(--weight-strong); line-height: 1.3; }
.ogma-flow__steps li:not(:last-child)::after { position: absolute; top: .7rem; right: -.75rem; content: '→'; color: var(--color-primary); font-size: 1.25rem; }
.ogma-benefits { padding: var(--space-5); border: 1px solid var(--color-border-hover); border-radius: var(--radius-panel); background: var(--gradient-panel); }
.ogma-benefits h2 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: clamp(1.45rem, 2vw, 2rem); }
.ogma-benefits ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ogma-benefits li { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; font-weight: var(--weight-strong); line-height: 1.3; }
.ogma-benefits li span { color: var(--color-primary); }
.ogma-roadmap { margin-top: var(--space-5); }
.ogma-roadmap__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.ogma-plan-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 215px; }
.ogma-plan-card .development-roadmap__planned { margin-top: auto; padding: .3rem .6rem; }
@media (max-width: 1050px) {
  .ogma-feature-grid, .ogma-roadmap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ogma-flow__steps { grid-template-columns: 1fr; }
  .ogma-flow__steps li { flex-direction: row; text-align: left; }
  .ogma-flow__steps li:not(:last-child)::after { top: auto; right: auto; bottom: -.95rem; left: 1.3rem; content: '↓'; }
  .ogma-benefits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ogma-feature-grid, .ogma-tools__grid, .ogma-roadmap__grid, .ogma-benefits ul { grid-template-columns: 1fr; }
  .ogma-demo .showcase-visual__scroll img { width: 1200px; max-width: none; }
  .ogma-card { padding: var(--space-4); }
  .ogma-plan-card { min-height: 0; gap: var(--space-2); }
  .ogma-benefits li { min-height: 28px; }
}