/* Shared illustration fields for the introduction and detailed demos. */
:root{--layer-context-background:radial-gradient(ellipse at 15% 10%,#d6e6ff 0,transparent 65%),linear-gradient(135deg,#edf3fc,#dce9fa);--layer-motion-background:radial-gradient(ellipse at 85% 15%,#ffd0b3 0,transparent 65%),linear-gradient(135deg,#fff1e9,#ffe0cb);}
#layer-intro{--layer-section-gap:192px;padding:var(--layer-section-gap) clamp(24px,8vw,180px) var(--layer-section-gap);}
#layer-intro .intro-statements{max-width:1200px;}
#layer-intro .layer-intro-heading{text-align:left;max-width:800px;margin:0 0 48px;}
#layer-intro h2{font-size:clamp(36px,3.7vw,56px);font-weight:500;line-height:1.12;letter-spacing:-.045em;text-align:left;text-wrap:balance;}
.layer-intro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.layer-intro-panel{--layer-accent:#2462bf;--layer-soft:#edf3fc;--layer-border:#dbe4f1;min-width:0;border:1px solid #e5e8ed;border-radius:22px;overflow:hidden;background:#fff;}
.layer-intro-motion{--layer-accent:#b93000;--layer-soft:#fff1e9;--layer-border:#f1d7c8;}
.layer-intro-panel-copy{padding:30px 32px 28px;}
.layer-intro-label{display:flex;align-items:center;gap:9px;color:var(--layer-accent);font-size:14px;font-weight:500;}
.layer-intro-marker{display:inline-block;flex:none;width:12px;height:12px;border:3px solid #5a8fd8;border-radius:50%;}
.layer-intro-motion .layer-intro-marker{border-color:#ff4101;}
.layer-intro-panel h3{margin:14px 0 0;color:#151719;font-size:clamp(24px,2.1vw,30px);font-weight:500;line-height:1.2;letter-spacing:-.035em;}
#layer-intro .layer-intro-panel-copy p{max-width:400px;margin:12px 0 0;color:#626774;font-size:16px;line-height:1.55;}
.layer-intro-art{min-height:350px;padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--layer-context-background);border-top:1px solid var(--layer-border);}
.layer-intro-motion .layer-intro-art{background:var(--layer-motion-background);}
.layer-brief{width:100%;max-width:420px;background:#fff;border:1px solid var(--layer-border);border-radius:14px;box-shadow:0 12px 32px #244a7612;color:#151719;}
.layer-brief-top{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid #edf0f4;}
.layer-brief-symbol{display:grid;place-items:center;flex:none;width:38px;height:38px;background:var(--layer-soft);color:var(--layer-accent);border-radius:10px;font-size:18px;font-weight:500;}
.layer-brief-symbol svg{width:23px;height:23px;}
.layer-brief-top strong{display:block;font-size:15px;font-weight:500;line-height:1.3;}
.layer-brief-top div>span{display:block;margin-top:3px;color:#626774;font-size:12px;line-height:1.4;}
.layer-brief-live{margin-left:auto;color:#2462bf;font-size:11px;border-radius:999px;padding:5px 8px;background:#edf3fc;}
.layer-brief-foot{display:flex;align-items:center;gap:8px;padding:15px 20px;color:#626774;font-size:11px;line-height:1.5;}
.layer-brief-foot .layer-intro-marker{width:9px;height:9px;border-width:2px;}
@media(max-width:1000px){#layer-intro .layer-intro-heading{margin-bottom:40px;}#layer-intro{--layer-section-gap:144px;padding:var(--layer-section-gap) 32px var(--layer-section-gap);}.layer-intro-panel-copy{padding:26px 24px;}.layer-intro-art{padding:24px 20px;}.layer-brief-top{padding:16px;}.layer-brief-live{display:none;}.layer-brief-foot{padding:15px 16px;}}
@media(max-width:700px){#layer-intro .layer-intro-heading{margin-bottom:32px;}#layer-intro{--layer-section-gap:96px;padding:var(--layer-section-gap) 24px var(--layer-section-gap);}#layer-intro h2{font-size:clamp(30px,7vw,38px);}.layer-intro-grid{grid-template-columns:1fr;gap:20px;}.layer-intro-art{min-height:320px;}.layer-intro-panel-copy{padding:24px;}.layer-intro-panel h3{font-size:26px;}#layer-intro .layer-intro-panel-copy p{font-size:15px;}}

/* One measured gap before each detailed demonstration, rather than stacked padding. */
body .context-flow-stage .section-heading,body .motion-flow-stage .section-heading{top:clamp(64px,8svh,96px);}
#layer-intro h2 .intro-concept{display:inline;font-weight:inherit;}

body .context-flow-stage{background:var(--layer-context-background);}
body .motion-flow-stage{background:var(--layer-motion-background);}

/* Readable navigation on tinted stages; deeper orange frames Motion's white cards. */
body .context-flow-stage{--demo-secondary:#515b6a;}
body .motion-flow-stage{--demo-secondary:#655246;--motion-illustration-background:linear-gradient(145deg,#ffd6b5 0%,#ffab78 48%,#f36d38 100%);}
body .context-flow-stage .context-tabs .context-tab,body .motion-flow-stage .motion-pillar button{color:var(--demo-secondary);}
body .context-flow-stage .context-tabs .context-tab[aria-selected="true"],body .motion-flow-stage .motion-pillar.active button{color:#151719;}
body .context-flow-stage .context-detail p,body .motion-flow-stage .motion-detail p{color:var(--demo-secondary);}
body .context-flow-stage .selection-indicator{background:rgba(90,143,216,.16);}
body .motion-flow-stage .motion-selection{background:rgba(243,109,56,.14);}
body .context-flow-stage .context-tabs .context-tab:hover{background:rgba(90,143,216,.08);}
body .motion-flow-stage .motion-pillar button:hover{background:rgba(243,109,56,.07);}
body .context-flow-stage .context-tabs .context-tab:focus-visible{outline-color:#2462bf;}
body .motion-flow-stage .motion-pillar button:focus-visible{outline-color:#b93000;}
body .context-flow-stage .section-eyebrow .title-word{color:#2462bf;}
body .motion-flow-stage .section-eyebrow .title-word{color:#b93000;}

/* Full-width color fields; headings share the capped content column. */
body .context-flow-journey,body .motion-flow-journey{width:100%;max-width:none;margin-inline:0;}
body .context-flow-stage,body .motion-flow-stage{border-radius:0;}
body .context-flow-stage .section-heading,body .motion-flow-stage .section-heading{left:50%;width:min(1200px,calc(100% - clamp(24px,8vw,180px)*2));translate:-50% 0;transform:none;}
@media(max-width:1000px){body .context-flow-stage .section-heading,body .motion-flow-stage .section-heading{width:calc(100% - 64px);}}
@media(max-width:700px){body .context-flow-stage .section-heading,body .motion-flow-stage .section-heading{width:calc(100% - 48px);}}

/* Context exposes the evidence; Motion shows the work moving between cards. */
.layer-intro-panel{display:flex;flex-direction:column;}
.layer-intro-art{min-height:420px;flex:1;}
.layer-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
.layer-data-grid>div{padding:14px 20px;border-bottom:1px solid #edf0f4;}
.layer-data-grid>div:nth-child(odd){border-right:1px solid #edf0f4;}
.layer-data-grid>div>span{display:block;font-size:11px;color:#626774;line-height:1.4;}
.layer-data-grid strong{display:block;margin-top:5px;font-size:14px;font-weight:500;line-height:1.4;}
.layer-data-grid small{display:block;margin-top:5px;font-size:10px;color:#626774;line-height:1.4;}
.layer-data-arrow{color:#2462bf;margin:0 5px;}
.layer-data-signal{display:flex;align-items:center;gap:11px;padding:14px 20px;background:#f5f8fd;color:#2462bf;}
.layer-data-signal svg{width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.layer-data-signal span{display:block;font-size:10px;font-weight:500;line-height:1.4;}
.layer-data-signal strong{display:block;margin-top:3px;font-size:12px;font-weight:500;line-height:1.5;color:#151719;}
.layer-action-flow{width:100%;max-width:420px;}
.layer-action-card{position:relative;display:flex;align-items:center;gap:12px;padding:17px 18px;background:#fff;border:1px solid #f1d7c8;border-radius:14px;box-shadow:0 8px 24px #843d110d;width:calc(100% - 24px);}
.layer-action-outreach{margin-right:24px;}
.layer-action-conversation{margin-left:24px;border-color:#e9a582;box-shadow:0 8px 28px #843d1114;}
.layer-action-handoff{margin-right:24px;}
.layer-action-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:#fff1e9;color:#b93000;}
.layer-action-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.layer-action-copy{min-width:0;flex:1;}
.layer-action-copy>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.layer-action-copy strong{font-size:12px;line-height:1.5;font-weight:500;}
.layer-action-status{font-size:9px;color:#626774;line-height:1.5;white-space:nowrap;}
.layer-action-live{display:flex;align-items:center;gap:4px;color:#b93000;}
.layer-action-live i{width:5px;height:5px;border-radius:50%;background:#ff4101;}
#layer-intro .layer-action-copy p{margin:5px 0 0;font-size:11px;color:#626774;line-height:1.5;max-width:none;}
.layer-reply-bubbles{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.layer-reply-bubbles span{padding:5px 8px;background:#f3f4f6;border-radius:7px;font-size:10px;line-height:1.5;color:#515b6a;}
.layer-reply-bubbles span:last-child{background:#ffeadc;color:#b93000;}
.layer-flow-link{position:relative;height:28px;margin-left:42px;border-left:1px solid #e9a582;}
.layer-flow-link svg{position:absolute;bottom:0;left:-7px;width:13px;height:13px;fill:none;stroke:#cf7042;stroke-width:1.5;}
.layer-flow-link>span{position:absolute;top:0;left:-3px;width:5px;height:5px;background:#ff4101;border-radius:50%;animation:layer-flow-travel 5s ease-in-out infinite;animation-play-state:paused;}
.layer-flow-link:nth-of-type(4)>span{animation-delay:2.5s;}
.is-visible .layer-flow-link>span{animation-play-state:running;}
.layer-flow-caption{margin-top:18px;text-align:center;font-size:10px;color:#655246;line-height:1.5;}
@keyframes layer-flow-travel{0%,12%{transform:translateY(0);opacity:0;}22%{opacity:1;}48%{transform:translateY(20px);opacity:1;}60%,100%{transform:translateY(20px);opacity:0;}}
@media(max-width:1000px){.layer-data-grid>div{padding:13px 16px;}.layer-action-card{padding:15px 12px;gap:9px;}.layer-action-copy>div:first-child{align-items:flex-start;flex-wrap:wrap;gap:2px 8px;}.layer-action-icon{width:30px;height:30px;}.layer-action-copy strong{font-size:11px;}.layer-data-grid strong{font-size:13px;}}
@media(max-width:700px){.layer-intro-art{min-height:400px;}.layer-action-copy>div:first-child{flex-wrap:nowrap;}.layer-action-copy strong{font-size:12px;}}
@media(max-width:360px){.layer-action-copy>div:first-child{flex-wrap:wrap;}.layer-action-card{gap:8px;}.layer-data-grid>div{padding:12px;}.layer-data-grid strong{font-size:12px;}.layer-data-signal{padding:13px 12px;}}
@media(prefers-reduced-motion:reduce){.layer-flow-link>span{animation:none;opacity:0;}}

/* A central account collects evidence from every direction. */
.layer-context-universe{position:relative;width:100%;max-width:520px;height:440px;container-type:inline-size;}
.layer-universe-links{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#8bafe0;stroke-width:1;overflow:visible;}
.layer-universe-links path{vector-effect:non-scaling-stroke;}
.layer-context-universe .layer-context-brief{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;max-width:320px;box-shadow:0 14px 34px #244a761a;}
.layer-context-universe .layer-brief-top{padding:14px;gap:9px;}
.layer-context-universe .layer-brief-symbol{width:30px;height:30px;font-size:15px;}
.layer-context-universe .layer-brief-top strong{font-size:13px;}
.layer-context-universe .layer-brief-top div>span{font-size:10px;}
.layer-context-universe .layer-brief-live{font-size:9px;padding:4px 6px;}
.layer-context-universe .layer-data-grid>div{padding:12px;}
.layer-context-universe .layer-data-grid>div>span{font-size:10px;}
.layer-context-universe .layer-data-grid strong{font-size:12px;}
.layer-context-universe .layer-data-grid small{font-size:9px;}
.layer-context-universe .layer-data-signal{padding:12px;gap:8px;}
.layer-context-universe .layer-data-signal strong{font-size:11px;}
.layer-context-universe .layer-brief-foot{padding:12px;font-size:9px;}
.layer-source-node{position:absolute;z-index:2;display:flex;align-items:center;gap:6px;min-height:34px;padding:8px 10px;background:#ffffffdd;border:1px solid #cbdcf3;border-radius:9px;box-shadow:0 5px 18px #244a760d;color:#2462bf;font-size:11px;line-height:1.3;white-space:nowrap;}
.layer-source-node svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.node-company{left:24%;top:5%;transform:translateX(-50%);}
.node-signals{left:76%;top:5%;transform:translateX(-50%);}
.node-people{left:0;top:34%;transform:translateY(-50%);}
.node-hiring{left:0;top:64%;transform:translateY(-50%);}
.node-news{right:0;top:34%;transform:translateY(-50%);}
.node-website{right:0;top:64%;transform:translateY(-50%);}
.node-crm{left:25%;bottom:5%;transform:translateX(-50%);}
.node-conversations{left:75%;bottom:5%;transform:translateX(-50%);}
@container(max-width:430px){.node-people span,.node-hiring span,.node-news span,.node-website span{display:none;}.node-people,.node-hiring,.node-news,.node-website{padding:8px;}.layer-context-universe .layer-brief-live{display:none;}.layer-source-node{font-size:10px;}.layer-context-universe .layer-brief-top{padding:12px;}.layer-context-universe .layer-data-grid>div{padding:10px;}.layer-context-universe .layer-data-grid strong{font-size:11px;}}
@container(max-width:270px){.layer-context-universe .layer-context-brief{width:72%;}.layer-context-universe .layer-data-grid>div{padding:9px 8px;}.layer-context-universe .layer-data-grid>div>span{font-size:9px;}.layer-context-universe .layer-data-grid strong{font-size:10px;}.layer-context-universe .layer-data-grid small{font-size:8px;}.layer-context-universe .layer-brief-top{padding:10px;gap:6px;}.layer-context-universe .layer-brief-symbol{width:24px;height:24px;font-size:12px;}.layer-context-universe .layer-brief-top strong{font-size:11px;}.layer-context-universe .layer-brief-top div>span{font-size:8px;}.layer-context-universe .layer-data-signal{padding:10px 8px;}.layer-context-universe .layer-data-signal strong{font-size:10px;}.layer-context-universe .layer-brief-foot{padding:10px 8px;font-size:8px;}.layer-source-node{padding:7px 8px;font-size:9px;gap:4px;}.node-conversations svg{display:none;}}
@container(max-width:430px){.layer-context-universe .layer-data-grid small{display:none;}.node-company,.node-signals{top:3%;}.node-crm,.node-conversations{bottom:3%;}}
@container(max-width:270px){.layer-context-universe .layer-context-brief{width:70%;}.node-people,.node-hiring,.node-news,.node-website{padding:6px;min-height:30px;}}

/* Clear lettering, restrained icons: docs/design/illustration-direction.md. */
.layer-source-node{font-weight:500;}
.layer-context-universe .layer-brief-top strong{color:#151719;font-weight:600;}
.layer-context-universe .layer-brief-live{color:#174f9f;font-weight:500;}
.layer-context-universe .layer-data-grid>div>span{color:#2462bf;font-weight:500;}
.layer-context-universe .layer-data-grid strong{color:#174f9f;font-weight:600;}
.layer-context-universe .layer-data-grid small,.layer-context-universe .layer-brief-top div>span,.layer-context-universe .layer-brief-foot{color:#42516a;}
.layer-context-universe .layer-data-signal span{color:#2462bf;font-weight:600;}
.layer-context-universe .layer-data-signal strong{font-weight:500;}
.layer-action-copy strong{color:#b93000;font-weight:600;}
#layer-intro .layer-action-copy p{color:#384150;}
.layer-action-status{padding:3px 6px;border-radius:999px;background:#fff1e9;color:#963019;font-weight:500;}
.layer-reply-bubbles span{color:#4b362b;}
.layer-reply-bubbles span:last-child{font-weight:500;}
.layer-flow-caption{color:#513c31;}