/* Real app features in normal document flow. Motion is supplied by the shared reveal controller. */
.knowledge-story{position:relative;isolation:isolate;padding-block:100px 110px}
.knowledge-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(50px,8vw,112px)}
.knowledge-copy{max-width:540px;min-width:0}
.knowledge-intro h2{margin-bottom:26px}
.knowledge-intro>p{max-width:450px}
.knowledge-details{display:grid;gap:30px;margin-top:38px;max-width:450px}
.knowledge-story h3,.data-story h3{font-size:var(--body);font-weight:500;line-height:1.4;letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance}
.knowledge-story p,.data-story p{font-size:var(--body);line-height:1.55;margin-block:0}
.knowledge-visual{display:flex;justify-content:center;min-width:0;padding:20px 0}
.knowledge-phone{width:300px;max-width:100%;flex:0 0 auto}
.data-story{padding-block:12px 110px}
.data-layout{position:relative}
.data-layout:before{content:"";display:block;height:1px;background:var(--line);margin-bottom:68px}
.data-story h2{max-width:680px;margin-bottom:46px}
.data-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.data-details article{min-width:0;max-width:380px}
@media(max-width:1000px){
 .knowledge-story{padding-block:72px 82px}
 .knowledge-layout{gap:44px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
 .knowledge-phone{width:270px}
 .knowledge-details{gap:26px;margin-top:30px}
 .data-story{padding-bottom:82px}
 .data-layout:before{margin-bottom:52px}
 .data-details{gap:30px}
}
@media(max-width:700px){
 .knowledge-story{padding-block:56px 66px}
 .knowledge-layout{grid-template-columns:minmax(0,1fr);gap:40px}
 .knowledge-copy{max-width:520px;width:100%;margin-inline:auto}
 .knowledge-intro h2{margin-bottom:22px}
 .knowledge-intro>p,.knowledge-details{max-width:none}
 .knowledge-details{gap:26px;margin-top:30px}
 .knowledge-visual{padding:4px 0 10px}
 .knowledge-phone{width:min(270px,calc(100vw - 100px))}
 .data-story{padding-bottom:64px}
 .data-layout:before{margin-bottom:42px}
 .data-story h2{margin-bottom:30px}
 .data-details{grid-template-columns:minmax(0,1fr);gap:28px}
 .data-details article{max-width:520px}
}

/* Let the app screen explain the headline before the supporting detail on phones. */
.knowledge-layout{row-gap:32px}.knowledge-copy{grid-column:1;grid-row:1;align-self:end}.knowledge-details{grid-column:1;grid-row:2;margin-top:0;align-self:start}.knowledge-visual{grid-column:2;grid-row:1/3;align-self:center}
@media(max-width:700px){.knowledge-layout{row-gap:34px}.knowledge-copy{grid-column:1;grid-row:1}.knowledge-visual{grid-column:1;grid-row:2}.knowledge-details{grid-column:1;grid-row:3;margin-top:0}}