/* Shared part geometry, scoped to the three integration placements. */
.hp-motion{position:relative;isolation:isolate}
.hp-motion>.motion-decoration{pointer-events:none}
.hp-motion>.surface{display:none;position:absolute;inset:0;background:#fff;z-index:-1}
.hp-motion>.surface-secondary,.hp-motion>.fold,.hp-motion>.fold-secondary{display:none}
.hp-motion.sheet.is-playing{background:#e2edf3}
.hp-motion.sheet.is-playing>.surface{display:block}
.hp-motion.sheet.is-playing>.fold,.hp-motion.center.is-playing>.fold-secondary,.hp-motion.split.is-playing>.fold-secondary{display:block;position:absolute;inset:0 auto 0 0;width:calc(28px * var(--motion-strength,1));background:#c5e2ed;z-index:0}
.hp-motion.split>.surface{inset:0 0 50% 0}
.hp-motion.split.is-playing>.surface-secondary{display:block;position:absolute;inset:50% 0 0 0;background:#fff;z-index:-1}
.hp-motion.split.is-playing>.fold{bottom:50%}.hp-motion.split.is-playing>.fold-secondary{top:50%}
.hp-motion>.outline-trace{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.hp-motion>.outline-trace rect{fill:none;stroke:#397fa0;stroke-width:3;stroke-dasharray:100;stroke-dashoffset:0}
.hp-motion.outline.is-playing>.outline-trace{display:block}
.hp-motion .trace-repeat-one,.hp-motion .trace-repeat-two{opacity:0}
.hp-motion>.focus-band{display:none;position:absolute;left:0;right:0;background:#d7e9f2;z-index:0}
.hp-motion.rhythm.is-playing>.focus-band{display:block}.hp-motion>.focus-one{top:0;height:25%}.hp-motion>.focus-two{top:25%;height:37%}.hp-motion>.focus-three{top:62%;height:38%}
.hp-motion>.clock-edge,.hp-motion>.clock-guide{display:none;position:absolute;pointer-events:none;z-index:0}
.hp-motion>.clock-edge{background:#d7e9f2}.hp-motion>.clock-top{top:0;left:0;right:0;height:var(--motion-bar-thickness,14px)}.hp-motion>.clock-right{top:0;right:0;bottom:0;width:var(--motion-bar-thickness,14px)}.hp-motion>.clock-bottom{bottom:0;left:0;right:0;height:var(--motion-bar-thickness,14px)}.hp-motion>.clock-left{top:0;left:0;bottom:0;width:var(--motion-bar-thickness,14px)}
.hp-motion>.clock-guide{left:0;top:0;width:min(calc(8px * var(--motion-strength,1)),var(--motion-bar-thickness,14px));height:min(calc(8px * var(--motion-strength,1)),var(--motion-bar-thickness,14px));border-radius:50%;background:#4b94b2}
.hp-motion.rhythm[data-variant="clockwise"].is-playing>.clock-edge,.hp-motion.rhythm[data-variant="clockwise"].is-playing>.clock-guide{display:block}
.hp-motion.rhythm[data-variant="clockwise"].is-playing>.focus-band{display:none}
.hp-motion> :not(.motion-decoration){position:relative;z-index:1}
.hp-motion.is-pending{opacity:1;transform:none}
.hp-control{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:12px 0;font-size:14px}
.hp-control select{font:inherit;max-width:100%;min-width:0;padding:8px;color:#174861;background:white;border:1px solid #aac1cf;border-radius:6px}.hp-control input{width:140px;max-width:50%}.hp-control output{min-width:36px}.hp-control:has(input:disabled){opacity:.55}
@media(prefers-reduced-motion:reduce){.hp-motion>.motion-decoration{display:none!important}}
/* Review correction: closed controls occupy normal flow, never the reading area. */
.hp-config-entry{position:relative;display:block;grid-column:1/-1;width:max-content;max-width:100%;margin-top:16px;padding:8px 12px;border:1px solid #aac1cf;border-radius:6px;background:#fff;color:#174861;font:inherit;font-size:14px;cursor:pointer}
.hp-motion>.flow-connector{position:absolute;z-index:1}
/* Compact illustration geometry; all existing explanatory type sizes are retained. */
html[data-typography="readable"] .product-demo{padding:20px;border-radius:48px 0 0 0}
html[data-typography="readable"] .product-demo figcaption{margin:0 0 14px;gap:4px 10px}
html[data-typography="readable"] .demo-scene{gap:16px;padding:0}
html[data-typography="readable"] .demo-phone{min-height:0;padding:28px 12px 22px;box-shadow:8px 10px 0 #cddfe9}
html[data-typography="readable"] .phone-screen{min-height:0;padding:12px 10px}
html[data-typography="readable"] .phone-app-title{margin:8px 0 10px}
html[data-typography="readable"] .phone-app-title>br{display:none}
html[data-typography="readable"] .demo-stop .type-linebreak{display:initial}
html[data-typography="readable"] .phone-app-title>span{margin-top:4px}
html[data-typography="readable"] .demo-tasks{gap:4px}
html[data-typography="readable"] .demo-task{min-height:0;padding:5px 7px;gap:7px}
html[data-typography="readable"] .task-name{display:flex;flex-wrap:wrap;gap:0 8px}
html[data-typography="readable"] .task-name small{margin:0;display:inline}
html[data-typography="readable"] .demo-stop{margin-top:8px;padding:8px}
html[data-typography="readable"] .demo-state{height:2em;margin-top:8px}
html[data-typography="readable"] .demo-memory{padding:14px}
html[data-typography="readable"] .demo-flow{gap:8px 20px}
html[data-typography="readable"] .demo-orbit{display:none}
/* Lower-page emphasis uses the approved parts; people/company remain static. */
.case-main.hp-motion{padding:18px;background:#fff}
.hp-motion.hp-d-stage{isolation:isolate}
html[data-typography="readable"] .demo-state{min-height:2em}

.hp-config-entry[hidden]{display:none!important}
/* Keep the experience category label intact without reducing its type size. */
html[data-typography="readable"] .case-id span:last-child{white-space:nowrap;overflow-wrap:normal}
@media(min-width:1251px){html[data-typography="readable"] .case{grid-template-columns:140px minmax(0,1fr) 265px}}
@media(min-width:901px) and (max-width:1250px){html[data-typography="readable"] .case{grid-template-columns:140px minmax(0,1fr)}}
/* FOUNDATION keeps its settled surface; active sequencing never hides text. */
[data-section-motion="foundation"].section-settled{background:#f0f6fa;box-shadow:inset 0 0 0 1px #92b6cb,0 2px 8px #0f2f520a}
@media(prefers-reduced-motion:reduce){[data-section-motion="foundation"].section-settled{background:#fff;box-shadow:none}}
/* Avoid CSS/GSAP double interpolation; pre-position only before entering view. */
.service[data-section-motion="support"]{transition:none;transform-style:flat}
html.sequence-effects-enabled [data-section-motion="support"].sequence-awaiting{transform:translateY(16px)}
html.sequence-effects-enabled [data-sequence-layout="row"].sequence-awaiting{transform:translateY(12px)}
[data-section-motion="support"].sequence-near{will-change:transform}
.section-rise-shadow{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:0 12px 22px #0f2f521f}
.sequence-near .section-rise-shadow{will-change:opacity}
@media(prefers-reduced-motion:reduce){html.sequence-effects-enabled [data-section-motion].sequence-awaiting{transform:none}.section-rise-shadow{display:none}}
/* Preserve a natural phone ratio and the completed panel color through the door exit. */
html[data-typography="readable"] .demo-phone{width:min(100%,240px);aspect-ratio:9 / 19.5;height:auto;min-height:0}
html[data-typography="readable"] .phone-app-title>br{display:initial}
.product-demo.hp-motion.sheet.is-playing{background:#e8f0f5}
.product-demo.hp-motion>.surface,.product-demo.hp-motion.split.is-playing>.surface-secondary{background:#e8f0f5}

/* Existing context diagram uses A split; keep each completed surface color stable. */
.context-diagram.hp-motion.sheet.is-playing,.context-diagram.hp-motion>.surface,.context-diagram.hp-motion.split.is-playing>.surface-secondary{background:#f0f5f8}
.hp-d-stage.hp-motion.sheet.is-playing,.hp-d-stage.hp-motion>.surface,.hp-d-stage.hp-motion.split.is-playing>.surface-secondary{background:#fff}

/* Oltemo uses C4 per card; the caption and copy remain still. */
.hp-motion>.outline-merge{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.hp-motion>.outline-merge path{fill:none;stroke:#397fa0;stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:butt;stroke-linejoin:miter}
.hp-motion.merge-playing>.outline-merge{display:block}
.hp-motion.merge-playing>.outline-trace{display:none}
@media(prefers-reduced-motion:reduce){.hp-motion>.outline-merge{display:none!important}}

html.sequence-effects-enabled [data-section-motion][data-motion-profile-family="rise"].sequence-awaiting{transform:translateY(var(--sequence-lift,16px))}

.hp-motion>.row-flow-trace{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.hp-motion.row-flow.is-playing>.row-flow-trace{display:block}
@media(prefers-reduced-motion:reduce){.hp-motion>.row-flow-trace{display:none!important}}